feat: handle remaining translations

.eslintrc.js

@@ -50,6 +50,7 @@ module.exports = {
           'transform',
           'filter',
           'rel',
+          'textShadow',
         ],
       },
     ],

README.md

@@ -18,9 +18,12 @@ The website for the [Regen Network](https://regen.network) decentralized infrast
     - [Storybook](#storybook)
     - [Website](#website)
   - [Testing](#testing)
+    - [- Running tests](#--running-tests)
+    - [- Writing tests](#--writing-tests)
   - [Code style](#code-style)
   - [i18n](#i18n)
     - [Important notes](#important-notes)
+    - [web-components](#web-components)
   - [Typography](#typography)
     - [Sizing guide](#sizing-guide)
   - [Netlify](#netlify)
@@ -60,7 +63,6 @@ bun install
 
 Set variables in `.env` files in `web-marketplace/` and `web-storybook/` folders based on provided `.env.example` files.
 
-
 ## Development
 
 To run the marketplace app:
@@ -136,27 +138,29 @@ bun run build-www
 ## Testing
 
 #### - Running tests
+
 We are using [Vitest](https://vitest.dev/) as a test runner.
 
-Tests can be run in the terminal with the following commands from the project root: 
+Tests can be run in the terminal with the following commands from the project root:
+
+- To run `web-marketplace` tests
 
-* To run `web-marketplace` tests
   ```sh
   bun run test-marketplace
   ```
 
-* To run `web-components` tests
+- To run `web-components` tests
   ```sh
   bun run test-components
   ```
-In both cases the test runner is launched in the interactive watch mode.
+  In both cases the test runner is launched in the interactive watch mode.
 
 #### - Writing tests
+
 When writing test in `web-marketplace` remember to import the methods from`'web-marketplace/test/test-utils'`, specially the `render` method, as it is a custom render that wraps components with the necessary providers.
 
 In `web-components`, methods should be imported directly from `'@testing-library/*'`
 
-
 ## Code style
 
 [Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) are used as
@@ -207,6 +211,10 @@ Here's a vscode snippet to make string translation easier:
 `<Trans>` component should be imported from `@lingui/macro` most of the time. This component is used at compile-time.
 There is another `<Trans>` component in `@lingui/react` for [special cases](https://lingui.dev/tutorials/react-patterns#lazy-translations). This component is used at runtime.
 
+### web-components
+
+components in `web-components` should not use any i18n code in order to make them more generic and reusable.
+
 ## Typography
 
 This repo utilizes custom MUI Typography components to normalize styles with the mockups based on the typography in [figma](<https://www.figma.com/file/MuSpCtCdU2ns4cFAsPfvsx/Text-Styles-%26-Components-(current)?node-id=0:1>):

web-components/package.json

@@ -9,8 +9,8 @@
     "copy-assets": "cp ./src/theme/fonts.css ./lib/theme/fonts.css && cp -R ./src/theme/assets ./lib/theme/",
     "watch": "bun run remove-previous-files && tsc --watch && bun run copy-assets",
     "build": "bun run remove-previous-files && tsc && bun run copy-assets",
-    "lint": "eslint ./src  -c .eslintrc.js --max-warnings 0 --ext .ts,.tsx",
-    "lint-fix": "eslint ./src --fix -c .eslintrc.js --ext .ts,.tsx",
+    "lint": "eslint ./src  -c .eslintrc.cjs --max-warnings 0 --ext .ts,.tsx",
+    "lint-fix": "eslint ./src --fix -c .eslintrc.cjs --ext .ts,.tsx",
     "format": "prettier --write --loglevel warn --ignore-path=../.prettierignore './src/**/*.{ts,tsx,json,md,css}'",
     "format-and-fix": "bun run format && bun run lint-fix",
     "test": "vitest",

web-components/src/components/PrefinanceTag/PrefinanceTag.tsx

@@ -1,10 +1,11 @@
 import { cn } from 'web-components/src/utils/styles/cn';
 
-import { PREFINANCE } from '../cards/ProjectCard/ProjectCard.constants';
+import { ProjectCardBodyTextsMapping } from '../cards/ProjectCard/ProjectCard.types';
 import { PrefinanceIcon } from '../icons/PrefinanceIcon';
 import { Label } from '../typography';
 
 export const PrefinanceTag = ({
+  bodyTexts,
   classNames = {
     root: '',
     label: '',
@@ -14,6 +15,7 @@ export const PrefinanceTag = ({
     height: '19',
   },
 }: {
+  bodyTexts: ProjectCardBodyTextsMapping;
   classNames?: { root?: string; label?: string };
   iconSize?: {
     width: string;
@@ -32,7 +34,7 @@ export const PrefinanceTag = ({
       component="span"
       size="xxs"
     >
-      {PREFINANCE}
+      {bodyTexts.prefinance}
     </Label>
   </div>
 );

web-components/src/components/atoms/RadioCard/RadioCard.mock.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable lingui/no-unlocalized-strings */
 import OrganizationIcon from '../../../components/icons/OrganizationIcon';
 import UserIcon from '../../../components/icons/UserIcon';
 import { RadioCardItem } from './RadioCard.types';

web-components/src/components/atoms/RoundLogo/RoundLogo.mock.ts

@@ -1,3 +1,4 @@
+/* eslint-disable lingui/no-unlocalized-strings */
 import { ImageType } from '../../../types/shared/imageType';
 
 export const RoundLogoMock: ImageType = {

web-components/src/components/buttons/ContainedButton.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable lingui/no-unlocalized-strings */
 import { styled } from '@mui/material';
 import Button from '@mui/material/Button';
 

web-components/src/components/buttons/PrevNextButton.tsx

@@ -33,8 +33,10 @@ const getBorderColor = (
     ? theme.palette.grey[100]
     : theme.palette.grey[400];
   return disabled
-    ? `linear-gradient(${disabledColor}, ${disabledColor})`
-    : 'linear-gradient(204.4deg, #527984 5.94%, #79C6AA 51.92%, #C4DAB5 97.89%)';
+    ? // eslint-disable-next-line lingui/no-unlocalized-strings
+      `linear-gradient(${disabledColor}, ${disabledColor})`
+    : // eslint-disable-next-line lingui/no-unlocalized-strings
+      'linear-gradient(204.4deg, #527984 5.94%, #79C6AA 51.92%, #C4DAB5 97.89%)';
 };
 
 const getBackgroundColor = (

web-components/src/components/buttons/SetMaxButton.test.tsx

@@ -5,7 +5,13 @@ import { fireEvent, screen } from 'web-components/test/test-utils';
 describe('SetMaxButton', () => {
   it('calls onClick when clicked', () => {
     const onClick = vi.fn();
-    render(<SetMaxButton onClick={onClick} />);
+    render(
+      <SetMaxButton
+        onClick={onClick}
+        ariaLabel="Set max credits"
+        buttonText="Set max credits"
+      />,
+    );
     const button = screen.getByLabelText('Set max credits');
     fireEvent.click(button);
     expect(onClick).toHaveBeenCalledTimes(1);

web-components/src/components/buttons/SetMaxButton.tsx

@@ -2,17 +2,21 @@ import { MouseEvent } from 'react';
 
 export function SetMaxButton({
   onClick,
+  ariaLabel,
+  buttonText,
 }: {
   onClick: (e: MouseEvent<HTMLElement>) => void;
+  ariaLabel: string;
+  buttonText: string;
 }) {
   return (
     <button
       type="button"
       onClick={onClick}
-      aria-label="Set max credits"
+      aria-label={ariaLabel}
       className="ml-3 sm:ml-10 border-none w-[46px] h-[30px] py-[5px] bg-grey-500 hover:bg-grey-400 rounded text-grey-0 text-sm font-bold font-['Lato'] hover:cursor-pointer"
     >
-      Max
+      {buttonText}
     </button>
   );
 }

web-components/src/components/buttons/button.stories.tsx

@@ -110,7 +110,11 @@ export const saveButton = {
 export const setMaxButton = {
   render: () => (
     <>
-      <SetMaxButton onClick={() => {}} />
+      <SetMaxButton
+        onClick={() => {}}
+        ariaLabel="Set max"
+        buttonText="Set max"
+      />
     </>
   ),
 };

web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.Content.tsx

@@ -10,17 +10,39 @@ import { CRYPTO_TOOLTIP_TEXT } from './OrderSummaryCard.constants';
 import { OrderProps, PaymentMethod } from './OrderSummaryCard.types';
 import { OrderSummmaryRowHeader } from './OrderSummmaryCard.RowHeader';
 
+type Props = {
+  title: string;
+  order: OrderProps;
+  currentBuyingStep: number;
+  paymentMethod: PaymentMethod;
+  headers: {
+    project: string;
+    pricePerCredit: string;
+    credits: string;
+    totalPrice: string;
+    payment: string;
+  };
+  ariaLabels: {
+    editableCredits: string;
+    changePaymentCard: string;
+    editButtonAriaLabel: string;
+  };
+  editableUpdateButtonText: string;
+  endingInText: string;
+  onClickEditCard?: () => void;
+};
+
 export function OrderSummaryContent({
+  title,
   order,
   currentBuyingStep,
   paymentMethod,
+  headers,
+  ariaLabels,
+  editableUpdateButtonText,
+  endingInText,
   onClickEditCard = () => {},
-}: {
-  order: OrderProps;
-  currentBuyingStep: number;
-  paymentMethod: PaymentMethod;
-  onClickEditCard?: () => void;
-}) {
+}: Props) {
   const { projectName, currency, pricePerCredit, credits } = order;
   const [creditsAmount, setCreditsAmount] = useState(credits);
   return (
@@ -29,15 +51,13 @@ export function OrderSummaryContent({
         variant="h5"
         className="col-span-2 text-base mt-0 sm:mt-[30px] mb-5 sm:mb-[15px]"
       >
-        Order Summary
+        {title}
       </Title>
       <OrderSummmaryRowHeader text="project" className="self-start mt-5" />
       <p className="text-[14px] sm:text-base sm:font-normal font-['Lato'] self-start m-0">
         {projectName}
       </p>
-      <OrderSummmaryRowHeader
-        text={`${currency !== CURRENCIES.usd ? 'avg' : ''} price per credit`}
-      />
+      <OrderSummmaryRowHeader text={headers.pricePerCredit} />
       <div className="justify-start items-center flex">
         <span>
           <SupCurrencyAndAmount
@@ -53,20 +73,25 @@ export function OrderSummaryContent({
           }`}
         />
       </div>
-      <OrderSummmaryRowHeader text="# credits" className="pt-5" />
+      <OrderSummmaryRowHeader text={headers.credits} />
       <div className="text-base font-normal font-['Lato'] text-[14px] sm:text-base">
         <EditableInput
           value={creditsAmount}
           onChange={setCreditsAmount}
-          ariaLabel="editable-credits"
+          inputAriaLabel={ariaLabels.editableCredits}
+          editButtonAriaLabel={ariaLabels.editButtonAriaLabel}
+          updateButtonText={editableUpdateButtonText}
           name="editable-credits"
         />
       </div>
       <div className="col-span-full">
         <hr className="border-t border-grey-300 border-solid border-l-0 border-r-0 border-b-0" />
       </div>
       <div className="flex items-end col-span-full gap-5">
-        <OrderSummmaryRowHeader text="total price" className="pb-[9px]" />
+        <OrderSummmaryRowHeader
+          text={headers.totalPrice}
+          className="pb-[9px]"
+        />
         <div className="flex flex-wrap">
           <span className="pt-[11px] sm:pt-5">
             <SupCurrencyAndAmount
@@ -95,14 +120,14 @@ export function OrderSummaryContent({
                 className="font-['Lato'] text-[14px] md:text-base m-0"
               >
                 <span className="capitalize">
-                  {paymentMethod.type} ending in
+                  {paymentMethod.type} {endingInText}
                 </span>{' '}
                 {paymentMethod.cardNumber.slice(-4)}
               </p>
               <EditButtonIcon
                 onClick={onClickEditCard}
                 className="self-end"
-                ariaLabel="Change payment card"
+                ariaLabel={ariaLabels.changePaymentCard}
               />
             </div>
           </div>

web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.Image.tsx

@@ -1,18 +1,26 @@
 import { PrefinanceTag } from 'web-components/src/components/PrefinanceTag/PrefinanceTag';
 
+import { ProjectCardBodyTextsMapping } from '../ProjectCard/ProjectCard.types';
+
 export function OrderSummaryImage({
   src,
   prefinanceProject,
+  bodyTexts,
+  altText,
 }: {
   src: string;
   prefinanceProject?: boolean;
+  bodyTexts: ProjectCardBodyTextsMapping;
+  altText: string;
 }) {
   return (
     <div className="w-[90px] sm:w-full  sm:h-[160px]">
-      {prefinanceProject && <PrefinanceTag classNames={{ root: 'top-20' }} />}
+      {prefinanceProject && (
+        <PrefinanceTag classNames={{ root: 'top-20' }} bodyTexts={bodyTexts} />
+      )}
       <img
         src={src}
-        alt="order summary"
+        alt={altText}
         className="w-[90px] h-[60px] px-15 sm:h-[160px] sm:px-0 sm:w-full object-cover object-center"
       />
     </div>

web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.mock.ts

@@ -0,0 +1,22 @@
+import { projectCardBodyTextMapping } from '../ProjectCard/ProjectCard.mock';
+
+/* eslint-disable lingui/no-unlocalized-strings */
+export const orderSummaryCommonProps = {
+  title: 'Order Summary',
+  headers: {
+    project: 'project',
+    pricePerCredit: 'price per Credit',
+    credits: '# credits',
+    totalPrice: 'total Price',
+    payment: 'payment',
+  },
+  ariaLabels: {
+    editableCredits: 'Editable credits',
+    changePaymentCard: 'Change payment card',
+    editButtonAriaLabel: 'Edit',
+  },
+  editableUpdateButtonText: 'update',
+  endingInText: 'ending in',
+  imageAltText: 'order summary',
+  bodyTexts: projectCardBodyTextMapping,
+};

web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { CURRENCIES } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
 
 import { OrderSummaryCard } from './OrderSummaryCard';
+import { orderSummaryCommonProps } from './OrderSummaryCard.mock';
 
 export default {
   title: 'Cards/OrderSummaryCard',
@@ -23,6 +24,7 @@ Default.args = {
     credits: 50,
     currency: CURRENCIES.usd,
   },
+  ...orderSummaryCommonProps,
 };
 
 export const WithPaymentDetails: Story = {
@@ -43,6 +45,7 @@ WithPaymentDetails.args = {
     type: 'visa',
     cardNumber: '1234 5678 9012 3456',
   },
+  ...orderSummaryCommonProps,
 };
 
 export const WithPrefinanceProject: Story = {
@@ -63,6 +66,7 @@ WithPrefinanceProject.args = {
     type: 'visa',
     cardNumber: '1234 5678 9012 3456',
   },
+  ...orderSummaryCommonProps,
 };
 
 export const WithCrypto: Story = {
@@ -78,4 +82,5 @@ WithCrypto.args = {
     credits: 50,
     currency: CURRENCIES.uregen,
   },
+  ...orderSummaryCommonProps,
 };