Merge pull request #583 from commercelayer/fix/stripe-apple-pay

Fix show apple pay provided by Stripe.
commercelayer · Oct 3, 2024 · e03275b · e03275b
2 parents 31efbae + 998b162
commit e03275b
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 39 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": false,
   "npmClient": "pnpm",
-  "version": "4.15.10",
+  "version": "4.15.11-beta.1",
   "command": {
     "version": {
       "preid": "beta"

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "4.15.10",
+  "version": "4.15.11-beta.1",
   "description": "The Official Commerce Layer React Components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",

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/orders/PlaceOrderButton.tsx b/packages/react-components/src/components/orders/PlaceOrderButton.tsx
@@ -151,10 +151,12 @@ export function PlaceOrderButton(props: Props): JSX.Element {
   }, [options?.stripe?.redirectStatus, paymentType])
   useEffect(() => {
     if (order?.status != null && ['draft', 'pending'].includes(order?.status)) {
-      // @ts-expect-error no type
-      const resultCode = order?.payment_source?.payment_response?.resultCode === 'Authorised'
-      // @ts-expect-error no type
-      const paymentDetails = order?.payment_source?.payment_request_details?.details != null
+      const resultCode =
+        // @ts-expect-error no type
+        order?.payment_source?.payment_response?.resultCode === 'Authorised'
+      const paymentDetails =
+        // @ts-expect-error no type
+        order?.payment_source?.payment_request_details?.details != null
       if (
         paymentType === 'adyen_payments' &&
         options?.adyen?.redirectResult &&
@@ -251,11 +253,14 @@ export function PlaceOrderButton(props: Props): JSX.Element {
     setIsLoading(true)
     let isValid = true
     setForceDisable(true)
-    const checkPaymentSource = await setPaymentSource({
-      // @ts-expect-error no type not be undefined
-      paymentResource: paymentType,
-      paymentSourceId: paymentSource?.id
-    })
+    const checkPaymentSource =
+      paymentType !== 'stripe_payments'
+        ? await setPaymentSource({
+            // @ts-expect-error no type not be undefined
+            paymentResource: paymentType,
+            paymentSourceId: paymentSource?.id
+          })
+        : paymentSource
     const card =
       paymentType &&
       getCardDetails({

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]
     }