feat: add address extrafields

https://bigc-b2b.atlassian.net/browse/BUN-786
bigcommerce · Jun 27, 2023 · ec51f0e · ec51f0e
1 parent 0ba0496
commit ec51f0e
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 4 deletions.
diff --git a/apps/storefront/src/pages/registered/Registered.tsx b/apps/storefront/src/pages/registered/Registered.tsx
@@ -27,6 +27,8 @@ import { loginCheckout, LoginConfig } from '../login/config'
 
 import { RegisteredContext } from './context/RegisteredContext'
 import {
+  AccountFormFieldsItems,
+  b2bAddressRequiredFields,
   companyAttachmentsFields,
   getAccountFormFields,
   RegisterFields,
@@ -105,11 +107,25 @@ function Registered(props: RegisteredProps) {
 
         const accountFormFields = await Promise.all(accountFormAllFields)
 
+        const newB2bAccountFormFields: AccountFormFieldsItems[] = (
+          accountFormFields[1]?.accountFormFields || []
+        ).map((fields: AccountFormFieldsItems) => {
+          if (
+            b2bAddressRequiredFields.includes(fields?.fieldId || '') &&
+            fields.groupId === 4
+          ) {
+            fields.isRequired = true
+            fields.visible = true
+          }
+
+          return fields
+        })
+
         const bcAccountFormFields = getAccountFormFields(
           accountFormFields[0]?.accountFormFields || []
         )
         const b2bAccountFormFields = getAccountFormFields(
-          accountFormFields[1]?.accountFormFields || []
+          newB2bAccountFormFields || []
         )
 
         const { countries } = await getB2BCountries()
@@ -121,6 +137,10 @@ function Registered(props: RegisteredProps) {
             ): Partial<RegisterFieldsItems> => {
               if (addressFields.name === 'country') {
                 addressFields.options = countries
+                addressFields.replaceOptions = {
+                  label: 'countryName',
+                  value: 'countryName',
+                }
               }
               return addressFields
             }

diff --git a/apps/storefront/src/pages/registered/RegisteredBCToB2B.tsx b/apps/storefront/src/pages/registered/RegisteredBCToB2B.tsx
@@ -29,6 +29,8 @@ import {
 
 import { RegisteredContext } from './context/RegisteredContext'
 import {
+  AccountFormFieldsItems,
+  b2bAddressRequiredFields,
   Country,
   deCodeField,
   getAccountFormFields,
@@ -130,8 +132,22 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
 
         const accountFormAllFields = await getB2BAccountFormFields(3)
 
-        const bcToB2BAccountFormFields = getAccountFormFields(
+        const newAccountFormFields: AccountFormFieldsItems[] = (
           accountFormAllFields?.accountFormFields || []
+        ).map((fields: AccountFormFieldsItems) => {
+          if (
+            b2bAddressRequiredFields.includes(fields?.fieldId || '') &&
+            fields.groupId === 4
+          ) {
+            fields.isRequired = true
+            fields.visible = true
+          }
+
+          return fields
+        })
+
+        const bcToB2BAccountFormFields = getAccountFormFields(
+          newAccountFormFields || []
         )
         const { countries } = await getB2BCountries()
 
@@ -142,6 +158,10 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
             ): Partial<RegisterFieldsItems> => {
               if (addressFields.name === 'country') {
                 addressFields.options = countries
+                addressFields.replaceOptions = {
+                  label: 'countryName',
+                  value: 'countryName',
+                }
               }
               return addressFields
             }
@@ -206,7 +226,9 @@ export default function RegisteredBCToB2B(props: RegisteredProps) {
   const handleCountryChange = (countryCode: string, stateCode = '') => {
     const stateList =
       countryList.find(
-        (country: Country) => country.countryCode === countryCode
+        (country: Country) =>
+          country.countryCode === countryCode ||
+          country.countryName === countryCode
       )?.states || []
     const stateFields = bcTob2bAddressBasicFields.find(
       (formFields: RegisterFields) => formFields.name === 'state'

diff --git a/apps/storefront/src/pages/registered/RegisteredDetail.tsx b/apps/storefront/src/pages/registered/RegisteredDetail.tsx
@@ -66,7 +66,9 @@ export default function RegisteredDetail(props: RegisteredDetailProps) {
   const handleCountryChange = (countryCode: string, stateCode = '') => {
     const stateList =
       countryList.find(
-        (country: Country) => country.countryCode === countryCode
+        (country: Country) =>
+          country.countryCode === countryCode ||
+          country.countryName === countryCode
       )?.states || []
     const stateFields = addressBasicList.find(
       (formFields: RegisterFields) => formFields.name === 'state'

diff --git a/apps/storefront/src/pages/registered/config.ts b/apps/storefront/src/pages/registered/config.ts
@@ -61,6 +61,11 @@ export interface AccountFormFieldsItems {
 
 type AccountFormFieldsList = Array<[]> | Array<AccountFormFieldsItems>
 
+interface ReplaceOptionsProps {
+  label: string
+  value: string
+}
+
 export interface RegisterFieldsItems {
   id?: string | number
   name: string
@@ -77,6 +82,7 @@ export interface RegisterFieldsItems {
   groupName: string
   options?: any
   disabled: boolean
+  replaceOptions?: ReplaceOptionsProps
 }
 
 export const steps = [
@@ -183,6 +189,13 @@ const classificationType = (item: CustomFieldItems) => {
 }
 
 const noEncryptFieldList = ['country', 'state', 'email']
+export const b2bAddressRequiredFields = [
+  'field_country',
+  'field_address_1',
+  'field_city',
+  'field_state',
+  'field_zip_code',
+]
 
 const groupItems = {
   1: 'contactInformation',

diff --git a/apps/storefront/src/shared/service/b2b/graphql/register.ts b/apps/storefront/src/shared/service/b2b/graphql/register.ts
@@ -103,6 +103,13 @@ const createCompanyUser = (data: any) => `mutation{
     }
     fileList: ${convertArrayToGraphql(data.fileList)}
     channelId: ${data.channelId || 1}
+    ${
+      data?.addressExtraFields
+        ? `addressExtraFields: ${convertArrayToGraphql(
+            data.addressExtraFields
+          )}`
+        : ''
+    }
   }) {
     company {
       id,