refactor(account-settings): lift translations to the view component

Remove the need for translation on lower layers, and lift it up to the view component. b3Lang shouldn't be needed within business logic.
bigcommerce · Feb 14, 2025 · 10c2cc1 · 10c2cc1
1 parent cea67f9
commit 10c2cc1
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 62 deletions.
diff --git a/apps/storefront/src/pages/AccountSetting/config.ts b/apps/storefront/src/pages/AccountSetting/config.ts
@@ -1,12 +1,5 @@
-import { LangFormatFunction } from '@b3/lang';
-
-interface ShippingListStatusProps {
-  label: string;
-  value: number;
-}
-
 export interface GetFilterMoreListProps {
-  options?: Array<ShippingListStatusProps>;
+  fieldId: string;
   rows?: string | number;
   name: string;
   label: string;
@@ -18,11 +11,12 @@ export interface GetFilterMoreListProps {
   size: string;
 }
 
-export const getAccountSettingsFields = (b3Lang: LangFormatFunction): GetFilterMoreListProps[] => {
+export const getAccountSettingsFields = (): GetFilterMoreListProps[] => {
   return [
     {
       name: 'company',
-      label: b3Lang('accountSettings.form.company'),
+      fieldId: 'field_company',
+      label: 'Company',
       required: false,
       default: '',
       fieldType: 'text',
@@ -32,40 +26,24 @@ export const getAccountSettingsFields = (b3Lang: LangFormatFunction): GetFilterM
     },
     {
       name: 'role',
-      label: b3Lang('accountSettings.form.role'),
+      fieldId: 'field_role',
+      label: 'Role',
       required: false,
       default: '',
-      fieldType: 'dropdown',
-      options: [
-        {
-          label: b3Lang('accountSettings.form.admin'),
-          value: 0,
-        },
-        {
-          label: b3Lang('accountSettings.form.seniorBuyer'),
-          value: 1,
-        },
-        {
-          label: b3Lang('accountSettings.form.juniorBuyer'),
-          value: 2,
-        },
-        {
-          label: b3Lang('accountSettings.form.superAdmin'),
-          value: 3,
-        },
-      ],
+      fieldType: 'text',
       xs: 12,
       variant: 'filled',
       size: 'small',
     },
   ];
 };
 
-export const getPasswordModifiedFields = (b3Lang: LangFormatFunction): GetFilterMoreListProps[] => {
+export const getPasswordModifiedFields = (): GetFilterMoreListProps[] => {
   return [
     {
       name: 'currentPassword',
-      label: b3Lang('accountSettings.form.currentPassword'),
+      fieldId: 'field_current_password',
+      label: 'Current Password',
       required: false,
       default: '',
       fieldType: 'password',
@@ -75,7 +53,8 @@ export const getPasswordModifiedFields = (b3Lang: LangFormatFunction): GetFilter
     },
     {
       name: 'password',
-      label: b3Lang('accountSettings.form.password'),
+      fieldId: 'field_password',
+      label: 'Password',
       required: false,
       default: '',
       fieldType: 'password',
@@ -85,7 +64,8 @@ export const getPasswordModifiedFields = (b3Lang: LangFormatFunction): GetFilter
     },
     {
       name: 'confirmPassword',
-      label: b3Lang('accountSettings.form.confirmPassword'),
+      fieldId: 'field_confirm_password',
+      label: 'Confirm Password',
       required: false,
       default: '',
       fieldType: 'password',

diff --git a/apps/storefront/src/pages/AccountSetting/index.tsx b/apps/storefront/src/pages/AccountSetting/index.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { useB3Lang } from '@b3/lang';
@@ -128,8 +128,6 @@ function AccountSetting() {
 
         const key = isBCUser ? 'customerAccountSettings' : 'accountSettings';
 
-        const { [key]: accountSettings } = await fn(params);
-
         const accountFormAllFields = await getB2BAccountFormFields(isBCUser ? 1 : 2);
         const accountFormFields = getAccountFormFields(
           accountFormAllFields.accountFormFields || [],
@@ -139,38 +137,20 @@ function AccountSetting() {
           (item: Partial<Fields>) => item.fieldId !== 'field_email_marketing_newsletter',
         );
 
-        const contactInformationTranslatedLabels = JSON.parse(JSON.stringify(contactInformation));
-
-        contactInformationTranslatedLabels.forEach(
-          (element: { fieldId: string; label: string }) => {
-            const currentElement = element;
-            if (currentElement.fieldId === 'field_first_name') {
-              currentElement.label = b3Lang('accountSettings.form.firstName');
-            }
-            if (currentElement.fieldId === 'field_last_name') {
-              currentElement.label = b3Lang('accountSettings.form.lastName');
-            }
-            if (currentElement.fieldId === 'field_email') {
-              currentElement.label = b3Lang('accountSettings.form.email');
-            }
-            if (currentElement.fieldId === 'field_phone_number') {
-              currentElement.label = b3Lang('accountSettings.form.phoneNumber');
-            }
-          },
-        );
-
         const { additionalInformation = [] } = accountFormFields;
 
+        const { [key]: accountSettings } = await fn(params);
+
         const fields = isBCUser
-          ? initBcInfo(accountSettings, contactInformationTranslatedLabels, additionalInformation)
+          ? initBcInfo(accountSettings, contactInformation, additionalInformation)
           : initB2BInfo(
               accountSettings,
-              contactInformationTranslatedLabels,
-              getAccountSettingsFields(b3Lang),
+              contactInformation,
+              getAccountSettingsFields(),
               additionalInformation,
             );
 
-        const passwordModifiedFields = getPasswordModifiedFields(b3Lang);
+        const passwordModifiedFields = getPasswordModifiedFields();
 
         const all = [...fields, ...passwordModifiedFields];
 
@@ -287,6 +267,25 @@ function AccountSetting() {
     })();
   };
 
+  const translatedFields = useMemo(() => {
+    const fieldTranslations: Record<string, string> = {
+      field_first_name: b3Lang('accountSettings.form.firstName'),
+      field_last_name: b3Lang('accountSettings.form.lastName'),
+      field_email: b3Lang('accountSettings.form.email'),
+      field_phone_number: b3Lang('accountSettings.form.phoneNumber'),
+      field_company: b3Lang('accountSettings.form.company'),
+      field_role: b3Lang('accountSettings.form.role'),
+      field_current_password: b3Lang('accountSettings.form.currentPassword'),
+      field_password: b3Lang('accountSettings.form.password'),
+      field_confirm_password: b3Lang('accountSettings.form.confirmPassword'),
+    };
+
+    return accountInfoFormFields.map((item) => ({
+      ...item,
+      label: fieldTranslations[item.fieldId ?? ''] ?? item.label,
+    }));
+  }, [accountInfoFormFields, b3Lang]);
+
   return (
     <B3Spin isSpinning={isLoading} background={backgroundColor}>
       <Box
@@ -314,7 +313,7 @@ function AccountSetting() {
         }}
       >
         <B3CustomForm
-          formFields={accountInfoFormFields}
+          formFields={translatedFields}
           errors={errors}
           control={control}
           getValues={getValues}