feat: remove account form fields label camel case

bigcommerce · Aug 29, 2023 · 7dfbdc4 · 7dfbdc4
1 parent 224c2b3
commit 7dfbdc4
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 22 deletions.
diff --git a/apps/storefront/src/pages/accountSetting/AccountSetting.tsx b/apps/storefront/src/pages/accountSetting/AccountSetting.tsx
@@ -22,7 +22,7 @@ import {
   updateB2BAccountSettings,
   updateBCAccountSettings,
 } from '@/shared/service/b2b'
-import { B3SStorage, snackbar, validatorRules } from '@/utils'
+import { B3SStorage, manipulateString, snackbar, validatorRules } from '@/utils'
 
 import { deCodeField, getAccountFormFields } from '../registered/config'
 
@@ -319,7 +319,7 @@ function AccountSetting() {
   }
 
   const handleAddUserClick = () => {
-    handleSubmit(async (data) => {
+    handleSubmit(async (data: CustomFieldItems) => {
       setLoadding(true)
 
       try {
@@ -496,6 +496,16 @@ function AccountSetting() {
     })()
   }
 
+  const convertLabel = (infos: Partial<Fields>[]) =>
+    infos.map((info: Partial<Fields>) => {
+      const { label } = info
+      if (label) {
+        info.label = manipulateString(label)
+      }
+
+      return info
+    }) || []
+
   return (
     <B3Sping isSpinning={isloadding} background={backgroundColor}>
       <Box
@@ -523,7 +533,7 @@ function AccountSetting() {
         }}
       >
         <B3CustomForm
-          formFields={accountInfoFormFields}
+          formFields={convertLabel(accountInfoFormFields)}
           errors={errors}
           control={control}
           getValues={getValues}

diff --git a/apps/storefront/src/pages/address/Address.tsx b/apps/storefront/src/pages/address/Address.tsx
@@ -11,7 +11,7 @@ import {
   getB2BCountries,
   getBCCustomerAddress,
 } from '@/shared/service/b2b'
-import { snackbar } from '@/utils'
+import { manipulateString, snackbar } from '@/utils'
 
 import B3Filter from '../../components/filter/B3Filter'
 import {
@@ -84,7 +84,14 @@ function Address() {
             !isBCPermission,
             countries
           )
-          setAddressFields(addressFields)
+          const newAddressFields =
+            addressFields?.map((field) => {
+              const { label } = field
+              if (label) field.label = manipulateString(label)
+
+              return field
+            }) || []
+          setAddressFields(newAddressFields)
         } catch (err) {
           console.log(err)
         } finally {

diff --git a/apps/storefront/src/pages/registered/RegisterComplete.tsx b/apps/storefront/src/pages/registered/RegisterComplete.tsx
@@ -21,7 +21,7 @@ import {
   createBCCompanyUser,
   uploadB2BFile,
 } from '@/shared/service/b2b'
-import { storeHash } from '@/utils'
+import { convertLabel, manipulateString, storeHash } from '@/utils'
 
 import RegisteredStepButton from './component/RegisteredStepButton'
 import { RegisteredContext } from './context/RegisteredContext'
@@ -84,9 +84,11 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
   const list: RegisterCompleteList =
     accountType === '1' ? contactInformation : bcContactInformation
   const passwordInfo: RegisterCompleteList =
-    accountType === '1' ? passwordInformation : bcPasswordInformation
+    accountType === '1'
+      ? convertLabel(passwordInformation)
+      : convertLabel(bcPasswordInformation)
 
-  const passwordName = passwordInfo[0]?.groupName || ''
+  const passwordName = manipulateString(passwordInfo[0]?.groupName) || ''
 
   const additionalInfo: RegisterCompleteList =
     accountType === '1' ? additionalInformation : bcAdditionalInformation

diff --git a/apps/storefront/src/pages/registered/RegisteredAccount.tsx b/apps/storefront/src/pages/registered/RegisteredAccount.tsx
@@ -20,6 +20,7 @@ import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
 import { checkUserBCEmail, checkUserEmail } from '@/shared/service/b2b'
 import { themeFrameSelector } from '@/store'
+import { convertLabel, manipulateString } from '@/utils'
 
 import RegisteredStepButton from './component/RegisteredStepButton'
 import { RegisteredContext } from './context/RegisteredContext'
@@ -77,30 +78,38 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
   const additionName =
     accountType === '1' ? 'additionalInformation' : 'bcAdditionalInformation'
   const additionalInfo: any =
-    accountType === '1' ? additionalInformation : bcAdditionalInformation
+    accountType === '1'
+      ? convertLabel(additionalInformation || [])
+      : convertLabel(bcAdditionalInformation || [])
 
   const newContactInformation = contactInformation?.map(
     (info: CustomFieldItems) => {
       if (info.fieldId === 'field_email' && accountType === '1') {
         info.isTip = true
         info.tipText = 'This email will be used to sign in to your account'
       }
+      const { label } = info
+      if (label) {
+        info.label = manipulateString(label)
+      }
 
       return info
     }
   )
 
   const contactInfo: any =
-    accountType === '1' ? newContactInformation : bcContactInformation
+    accountType === '1'
+      ? newContactInformation
+      : convertLabel(bcContactInformation || [])
   const contactName =
     accountType === '1' ? 'contactInformation' : 'bcContactInformationFields'
 
   const contactInformationLabel = contactInfo.length
-    ? contactInfo[0]?.groupName
+    ? manipulateString(contactInfo[0]?.groupName)
     : ''
 
   const additionalInformationLabel = additionalInfo.length
-    ? additionalInfo[0]?.groupName
+    ? manipulateString(additionalInfo[0]?.groupName)
     : ''
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {

diff --git a/apps/storefront/src/pages/registered/RegisteredBCToB2B.tsx b/apps/storefront/src/pages/registered/RegisteredBCToB2B.tsx
@@ -17,7 +17,12 @@ import { getContrastColor } from '@/components/outSideComponents/utils/b3CustomS
 import { useMobile } from '@/hooks'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
-import { getCurrentCustomerInfo, storeHash } from '@/utils'
+import {
+  convertLabel,
+  getCurrentCustomerInfo,
+  manipulateString,
+  storeHash,
+} from '@/utils'
 
 import {
   createB2BCompanyUser,
@@ -577,11 +582,13 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
                 >
                   <InformationFourLabels>
                     {bcTob2bContactInformation?.length
-                      ? bcTob2bContactInformation[0]?.groupName
+                      ? manipulateString(
+                          bcTob2bContactInformation[0]?.groupName
+                        )
                       : ''}
                   </InformationFourLabels>
                   <B3CustomForm
-                    formFields={bcTob2bContactInformation}
+                    formFields={convertLabel(bcTob2bContactInformation || [])}
                     errors={errors}
                     control={control}
                     getValues={getValues}
@@ -596,13 +603,15 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
                 >
                   <InformationFourLabels>
                     {bcTob2bCompanyInformation?.length
-                      ? bcTob2bCompanyInformation[0]?.groupName
+                      ? manipulateString(
+                          bcTob2bCompanyInformation[0]?.groupName
+                        )
                       : ''}
                   </InformationFourLabels>
                   <B3CustomForm
                     formFields={[
-                      ...bcTob2bCompanyInformation,
-                      ...bcTob2bCompanyExtraFields,
+                      ...convertLabel(bcTob2bCompanyInformation),
+                      ...convertLabel(bcTob2bCompanyExtraFields),
                     ]}
                     errors={errors}
                     control={control}

diff --git a/apps/storefront/src/pages/registered/RegisteredDetail.tsx b/apps/storefront/src/pages/registered/RegisteredDetail.tsx
@@ -6,6 +6,7 @@ import { B3CustomForm } from '@/components'
 import { getContrastColor } from '@/components/outSideComponents/utils/b3CustomStyles'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { validateBCCompanyExtraFields } from '@/shared/service/b2b'
+import { convertLabel, manipulateString } from '@/utils'
 
 import RegisteredStepButton from './component/RegisteredStepButton'
 import { RegisteredContext } from './context/RegisteredContext'
@@ -54,14 +55,18 @@ export default function RegisteredDetail(props: RegisteredDetailProps) {
     mode: 'all',
   })
   const businessDetailsName =
-    accountType === '1' ? companyInformation[0]?.groupName : ''
+    accountType === '1'
+      ? manipulateString(companyInformation[0]?.groupName)
+      : ''
 
   const addressBasicName =
     accountType === '1' ? 'addressBasicFields' : 'bcAddressBasicFields'
   const addressBasicList =
-    accountType === '1' ? addressBasicFields : bcAddressBasicFields
+    accountType === '1'
+      ? convertLabel(addressBasicFields)
+      : convertLabel(bcAddressBasicFields)
 
-  const addressName = addressBasicList[0]?.groupName || ''
+  const addressName = manipulateString(addressBasicList[0]?.groupName) || ''
 
   const handleCountryChange = (countryCode: string, stateCode = '') => {
     const stateList =
@@ -261,7 +266,7 @@ export default function RegisteredDetail(props: RegisteredDetailProps) {
         <Box>
           <InformationFourLabels>{businessDetailsName}</InformationFourLabels>
           <B3CustomForm
-            formFields={[...companyInformation]}
+            formFields={[...convertLabel(companyInformation)]}
             errors={errors}
             control={control}
             getValues={getValues}

diff --git a/apps/storefront/src/utils/b3ManipulateString.ts b/apps/storefront/src/utils/b3ManipulateString.ts
@@ -0,0 +1,29 @@
+import { RegisterFields } from '@/pages/registered/config'
+
+const manipulateString = (input: string): string => {
+  if (!input) return ''
+  const words = input.split(' ')
+
+  if (words.length === 0) {
+    return input
+  }
+
+  const firstWord = words[0]
+  const manipulatedWords = words
+    .slice(1)
+    .map((word) => word.charAt(0).toLowerCase() + word.slice(1))
+
+  return [firstWord, ...manipulatedWords].join(' ')
+}
+
+const convertLabel = (infos: RegisterFields[]) =>
+  infos.map((info: RegisterFields) => {
+    const { label } = info
+    if (label) {
+      info.label = manipulateString(label)
+    }
+
+    return info
+  }) || []
+
+export { convertLabel, manipulateString }
diff --git a/apps/storefront/src/utils/index.ts b/apps/storefront/src/utils/index.ts
@@ -25,6 +25,7 @@ import {
 import { getLineNumber, getTextLenPX } from './b3GetTextLenPX'
 import handleHideRegisterPage from './b3HideRegister'
 import { getLogo, getQuoteEnabled } from './b3Init'
+import { convertLabel, manipulateString } from './b3ManipulateString'
 import { showPageMask } from './b3PageMask'
 import distanceDay from './b3Picker'
 import getProductPriceIncTax from './b3Price'
@@ -66,6 +67,7 @@ export {
   clearCurrentCustomerInfo,
   clearInvoiceCart,
   convertArrayToGraphql,
+  convertLabel,
   convertObjectToGraphql,
   currencyFormat,
   currencyFormatInfo,
@@ -95,6 +97,7 @@ export {
   isModifierNumberTextValid,
   isModifierTextValid,
   loginInfo,
+  manipulateString,
   openPageByClick,
   ordersCurrencyFormat,
   redirectBcMenus,