Fix fill/edit billing address form using invertAddress prop

commercelayer · Oct 2, 2024 · 0514e06 · 0514e06
1 parent 0b4c761
commit 0514e06
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 28 deletions.
diff --git a/packages/react-components/src/components/addresses/AddressesContainer.tsx b/packages/react-components/src/components/addresses/AddressesContainer.tsx
@@ -10,7 +10,7 @@ import addressReducer, {
   type SetAddressParams,
   setCloneAddress,
   saveAddresses,
-  ICustomerAddress
+  type ICustomerAddress
 } from '#reducers/AddressReducer'
 import { type BaseError } from '#typings/errors'
 import OrderContext from '#context/OrderContext'
@@ -94,7 +94,7 @@ export function AddressesContainer(props: Props): JSX.Element {
       defaultAddressContext.setAddress({ ...params, dispatch })
     },
     saveAddresses: async (params: {
-      customerEmail?: string,
+      customerEmail?: string
       customerAddress?: ICustomerAddress
     }): ReturnType<typeof saveAddresses> =>
       await saveAddresses({

diff --git a/packages/react-components/src/components/addresses/BillingAddressForm.tsx b/packages/react-components/src/components/addresses/BillingAddressForm.tsx
@@ -129,7 +129,7 @@ export function BillingAddressForm(props: Props): JSX.Element {
                       setErrorForm({
                         name: field,
                         code: 'VALIDATION_ERROR',
-                        message: message
+                        message
                       })
                     }
                   } else {

diff --git a/packages/react-components/src/components/addresses/SaveAddressesButton.tsx b/packages/react-components/src/components/addresses/SaveAddressesButton.tsx
@@ -103,7 +103,8 @@ export function SaveAddressesButton(props: Props): JSX.Element {
     lineItems: order?.line_items
   })
   // NOTE: This is a temporary fix to avoid the button to be disabled when the user is editing an address
-  const invertAddressesDisable = invertAddresses && shippingAddressId ? false : shippingDisable
+  const invertAddressesDisable =
+    invertAddresses && shippingAddressId ? false : shippingDisable
   const disable =
     disabled ||
     customerEmail ||
@@ -120,29 +121,40 @@ export function SaveAddressesButton(props: Props): JSX.Element {
         success: false
       }
       setForceDisable(true)
+      // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
       switch (true) {
-        case order != null && addressId != null && createCustomerAddress != null && saveAddresses != null:
+        case order != null &&
+          addressId != null &&
+          createCustomerAddress != null &&
+          saveAddresses != null: {
           response = await saveAddresses({
             customerEmail: email,
             customerAddress: {
-              resource: invertAddresses ? 'shipping_address' : 'billing_address',
+              resource: invertAddresses
+                ? 'shipping_address'
+                : 'billing_address',
               id: addressId
             }
           })
-          break;
-        case order != null && saveAddresses != null:
+          break
+        }
+        case order != null && saveAddresses != null: {
           response = await saveAddresses({
-            customerEmail: email,
+            customerEmail: email
           })
-          break;
-        case createCustomerAddress != null:
-          const address = invertAddresses ? { ...shippingAddress } : { ...billingAddress }
+          break
+        }
+        case createCustomerAddress != null: {
+          const address = invertAddresses
+            ? { ...shippingAddress }
+            : { ...billingAddress }
           if (addressId) address.id = addressId
           void createCustomerAddress(address as TCustomerAddress)
           response = {
             success: true
           }
-          break;
+          break
+        }
       }
       setForceDisable(false)
       if (onClick && response.success) onClick(response)

diff --git a/packages/react-components/src/components/payment_source/BraintreePayment.tsx b/packages/react-components/src/components/payment_source/BraintreePayment.tsx
@@ -175,7 +175,6 @@ export function BraintreePayment({
         const validStatus =
           response?.liabilityShiftPossible === true &&
           response?.liabilityShifted === true
-        console.log('validStatus', validStatus)
         if (validStatus && paymentSource != null) {
           await setPaymentSource({
             paymentSourceId: paymentSource.id,

diff --git a/packages/react-components/src/reducers/AddressReducer.ts b/packages/react-components/src/reducers/AddressReducer.ts
@@ -13,7 +13,10 @@ import { type updateOrder } from './OrderReducer'
 import camelCase from 'lodash/camelCase'
 import { type TCustomerAddress } from './CustomerReducer'
 import { type TResourceError } from '#components/errors/Errors'
-import { invertedAddressesHandler, sanitizeMetadataFields } from '#utils/addressesManager'
+import {
+  invertedAddressesHandler,
+  sanitizeMetadataFields
+} from '#utils/addressesManager'
 import { formCleaner } from '#utils/formCleaner'
 import { type AddressValuesKeys } from '#context/BillingAddressFormContext'
 import { type AddressInputName } from '#typings/index'
@@ -25,12 +28,15 @@ export type CustomFieldMessageError = (props: {
   message?: string | undefined
   value: string
   values?: Record<string, any>
-}) => string | null | {
-    field: Extract<AddressValuesKeys, AddressInputName> | string
-    value: string
-    isValid: boolean
-    message?: string
-}[]
+}) =>
+  | string
+  | null
+  | Array<{
+      field: Extract<AddressValuesKeys, AddressInputName> | string
+      value: string
+      isValid: boolean
+      message?: string
+    }>
 
 export type AddressActionType =
   | 'setErrors'
@@ -195,7 +201,7 @@ export async function saveAddresses({
 }: TSaveAddressesParams): Promise<{
   success: boolean
   order?: Order
-  error?: unknown,
+  error?: unknown
 }> {
   const {
     shipToDifferentAddress,
@@ -209,8 +215,14 @@ export async function saveAddresses({
     const sdk = getSdk(config)
     if (order) {
       let orderAttributes: OrderUpdate | null = null
-      const billingAddressCloneId = customerAddress?.resource === 'billing_address' ? customerAddress?.id : billingAddressId
-      const shippingAddressCloneId = customerAddress?.resource === 'shipping_address' ? customerAddress?.id : shippingAddressId
+      const billingAddressCloneId =
+        customerAddress?.resource === 'billing_address'
+          ? customerAddress?.id
+          : billingAddressId
+      const shippingAddressCloneId =
+        customerAddress?.resource === 'shipping_address'
+          ? customerAddress?.id
+          : shippingAddressId
       if (invertAddresses) {
         orderAttributes = await invertedAddressesHandler({
           billingAddress,
@@ -239,7 +251,11 @@ export async function saveAddresses({
           orderAttributes._shipping_address_clone_id =
             order?.shipping_address?.id
         }
-        if (billingAddress != null && Object.keys(billingAddress).length > 0 && !billingAddressCloneId) {
+        if (
+          billingAddress != null &&
+          Object.keys(billingAddress).length > 0 &&
+          !billingAddressCloneId
+        ) {
           delete orderAttributes._billing_address_clone_id
           delete orderAttributes._shipping_address_clone_id
           if (!doNotShipItems) {
@@ -260,7 +276,8 @@ export async function saveAddresses({
             Object.keys(shippingAddress).length > 0
           ) {
             delete orderAttributes._shipping_address_clone_id
-            const shippingAddressWithMeta = sanitizeMetadataFields(shippingAddress)
+            const shippingAddressWithMeta =
+              sanitizeMetadataFields(shippingAddress)
             const address = await sdk.addresses.create(shippingAddressWithMeta)
             orderAttributes.shipping_address = sdk.addresses.relationship(
               address.id

diff --git a/packages/react-components/src/utils/addressesManager.ts b/packages/react-components/src/utils/addressesManager.ts
@@ -214,7 +214,11 @@ export async function invertedAddressesHandler({
     orderAttributes._billing_address_clone_id = order?.billing_address?.id
     orderAttributes._shipping_address_clone_id = order?.shipping_address?.id
   }
-  if (shippingAddress != null && Object.keys(shippingAddress).length > 0 && !shippingAddressId) {
+  if (
+    shippingAddress != null &&
+    Object.keys(shippingAddress).length > 0 &&
+    !shippingAddressId
+  ) {
     delete orderAttributes._billing_address_clone_id
     delete orderAttributes._shipping_address_clone_id
     orderAttributes._billing_address_same_as_shipping = true
@@ -359,4 +363,4 @@ export function sanitizeMetadataFields(address: AddressCreate): AddressCreate {
     })
   }
   return address
-}
+}
diff --git a/packages/react-components/src/utils/formCleaner.ts b/packages/react-components/src/utils/formCleaner.ts
@@ -3,9 +3,14 @@ import { type AddressSchema } from '#reducers/AddressReducer'
 
 export function formCleaner(address: AddressSchema): AddressSchema {
   Object.keys(address).forEach((key) => {
+    const keyCleaned = key
+      .replace('shipping_address_', '')
+      .replace('billing_address_', '')
     const isNotCleaned =
       key.startsWith('shipping_address_') || key.startsWith('billing_address_')
     if (isNotCleaned) {
+      // @ts-expect-error type error
+      address[keyCleaned] = address[key]
       // @ts-expect-error type error
       delete address[key]
     }