feat: address page layout

bigcommerce · Nov 30, 2022 · 9365900 · 9365900
1 parent 5ab4207
commit 9365900
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 23 deletions.
diff --git a/apps/storefront/src/components/form/B3ControlTextField.tsx b/apps/storefront/src/components/form/B3ControlTextField.tsx
@@ -40,6 +40,7 @@ export const B3ControlTextField = ({
     disabled,
     labelName,
     size,
+    readOnly,
   } = rest
 
   const b3Lang = useB3Lang()
@@ -84,6 +85,7 @@ export const B3ControlTextField = ({
     max,
     maxLength,
     minLength,
+    readOnly,
   }
 
   const muiAttributeProps = muiTextFieldProps ? {

diff --git a/apps/storefront/src/pages/address/Address.tsx b/apps/storefront/src/pages/address/Address.tsx
@@ -77,8 +77,10 @@ const Address = () => {
       isB2BUser,
       isAgenting,
       salesRepCompanyId,
+      salesRepCompanyName,
       companyInfo: {
         id: companyInfoId,
+        companyName: companyInfoName,
       },
       addressConfig,
     },
@@ -98,6 +100,7 @@ const Address = () => {
   })
 
   const companyId = role === 3 && isAgenting ? salesRepCompanyId : companyInfoId
+  const companyName = role === 3 && isAgenting ? salesRepCompanyName : companyInfoName
   const hasAdminPermission = isB2BUser && (!role || (role === 3 && isAgenting))
   const isBCPermission = !isB2BUser || (role === 3 && !isAgenting)
 
@@ -338,6 +341,7 @@ const Address = () => {
           addressFields={addressFields}
           ref={addEditAddressRef}
           companyId={companyId}
+          companyName={companyName}
           isBCPermission={isBCPermission}
         />
       </Box>

diff --git a/apps/storefront/src/pages/address/components/AddressForm.tsx b/apps/storefront/src/pages/address/components/AddressForm.tsx
@@ -73,6 +73,7 @@ const AddressForm = ({
   updateAddressList,
   companyId,
   isBCPermission,
+  companyName,
 }: any, ref: Ref<unknown> | undefined) => {
   const [open, setOpen] = useState<boolean>(false)
   const [type, setType] = useState<string>('')
@@ -225,6 +226,12 @@ const AddressForm = ({
 
           snackbar.success('Address updated successfully')
         }
+        setShippingBilling({
+          isShipping: false,
+          isBilling: false,
+          isDefaultShipping: false,
+          isDefaultBilling: false,
+        })
         setOpen(false)
 
         await updateAddressList(true)
@@ -329,6 +336,10 @@ const AddressForm = ({
             field.default = originFields.default || ''
           }
         }
+        if (field.name === 'company' && isB2BUser) {
+          field.default = companyName
+          setValue(field.name, companyName)
+        }
       })
     }
 
@@ -408,6 +419,9 @@ const AddressForm = ({
             field.fieldType = 'text'
           }
         }
+      } else if (field.name === 'company') {
+        field.default = companyName
+        setValue(field.name, companyName)
       } else {
         setValue(field.name, addressData[field.name])
       }

diff --git a/apps/storefront/src/pages/address/shared/config.ts b/apps/storefront/src/pages/address/shared/config.ts
@@ -78,7 +78,7 @@ export const b2bAddressFields = [
     required: true,
     default: '',
     fieldType: 'text',
-    xs: 12,
+    xs: 6,
     variant: 'filled',
     size: 'small',
   },
@@ -87,34 +87,40 @@ export const b2bAddressFields = [
     label: 'Last Name',
     required: true,
     fieldType: 'text',
-    xs: 12,
+    xs: 6,
     default: '',
     variant: 'filled',
     size: 'small',
   },
   {
-    name: 'addressLine1',
-    label: 'Address Line 1',
-    required: true,
+    name: 'company',
+    label: 'Company',
+    required: false,
     fieldType: 'text',
     xs: 12,
     default: '',
     variant: 'filled',
     size: 'small',
+    readOnly: true,
   },
   {
-    name: 'addressLine2',
-    label: 'Address Line 2',
-    required: false,
-    fieldType: 'text',
+    name: 'country',
+    label: 'Country',
+    required: true,
+    fieldType: 'dropdown',
     xs: 12,
     default: '',
     variant: 'filled',
     size: 'small',
+    replaceOptions: {
+      label: 'countryName',
+      value: 'countryCode',
+    },
+    options: [],
   },
   {
-    name: 'city',
-    label: 'City',
+    name: 'addressLine1',
+    label: 'Address Line 1',
     required: true,
     fieldType: 'text',
     xs: 12,
@@ -123,23 +129,18 @@ export const b2bAddressFields = [
     size: 'small',
   },
   {
-    name: 'country',
-    label: 'Country',
-    required: true,
-    fieldType: 'dropdown',
+    name: 'addressLine2',
+    label: 'Address Line 2',
+    required: false,
+    fieldType: 'text',
     xs: 12,
     default: '',
     variant: 'filled',
     size: 'small',
-    replaceOptions: {
-      label: 'countryName',
-      value: 'countryCode',
-    },
-    options: [],
   },
   {
-    name: 'zipCode',
-    label: 'ZIP Code',
+    name: 'city',
+    label: 'City',
     required: true,
     fieldType: 'text',
     xs: 12,
@@ -152,7 +153,7 @@ export const b2bAddressFields = [
     label: 'State',
     required: true,
     fieldType: 'text',
-    xs: 12,
+    xs: 8,
     default: '',
     variant: 'filled',
     size: 'small',
@@ -161,6 +162,16 @@ export const b2bAddressFields = [
       value: 'stateCode',
     },
   },
+  {
+    name: 'zipCode',
+    label: 'ZIP Code',
+    required: true,
+    fieldType: 'text',
+    xs: 4,
+    default: '',
+    variant: 'filled',
+    size: 'small',
+  },
   {
     name: 'phoneNumber',
     label: 'Phone Number',

diff --git a/apps/storefront/src/shared/service/b2b/graphql/address.ts b/apps/storefront/src/shared/service/b2b/graphql/address.ts
@@ -96,6 +96,7 @@ const createAddress = (data: any) => `mutation{
     label: "${data.label}",
     uuid: "${data.uuid || ''}",
     extraFields: ${convertArrayToGraphql(data.extraFields || [])},
+    company: "${data.company}",
   }) {
     address{
       id
@@ -174,6 +175,7 @@ const updateAddress = (data: CustomFieldItems) => `mutation{
     uuid: "${data.uuid}",
     extraFields: ${convertArrayToGraphql(data.extraFields || [])},
     addressId: ${data.id}
+    company: "${data.company}",
   }) {
     address{
       id