perf: Add nullify payment source

commercelayer · Mar 10, 2022 · 0a76d7a · 0a76d7a
1 parent a4eab50
commit 0a76d7a
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 101 deletions.
diff --git a/src/components/PaymentGateway.tsx b/src/components/PaymentGateway.tsx
@@ -70,7 +70,10 @@ const PaymentGateway: FunctionComponent<PaymentGatewayProps> = ({
         config && paymentResource === 'paypal_payments'
           ? getPaypalConfig(paymentResource, config)
           : {}
-      if (!paymentSource || paymentSource.type !== paymentResource) {
+      if (
+        (!order?.payment_source || (!order?.payment_source && paymentSource)) &&
+        show
+      ) {
         setPaymentSource({
           paymentResource,
           order,
@@ -83,7 +86,7 @@ const PaymentGateway: FunctionComponent<PaymentGatewayProps> = ({
     return () => {
       setLoading(true)
     }
-  }, [order?.payment_method?.payment_source_type, show, paymentSource])
+  }, [order?.payment_method, show, paymentSource])
   const gatewayConfig = {
     readonly,
     showCard,

diff --git a/src/components/PaymentMethodRadioButton.tsx b/src/components/PaymentMethodRadioButton.tsx
@@ -25,47 +25,48 @@ type ShippingMethodRadioButtonProps = {
   onChange?: (payment?: PaymentMethod | Record<string, any>) => void
 } & JSX.IntrinsicElements['input']
 
-const PaymentMethodRadioButton: FunctionComponent<ShippingMethodRadioButtonProps> =
-  (props) => {
-    const { onChange, ...p } = props
-    const { payment, paymentSelected, setPaymentSelected, clickableContainer } =
-      useContext(PaymentMethodChildrenContext)
-    const { order } = useContext(OrderContext)
-    const { setPaymentMethod, setLoading } = useContext(PaymentMethodContext)
-    const orderId = order?.id || ''
-    const paymentResource = payment?.payment_source_type as PaymentResource
-    const paymentMethodId = payment?.id as string
-    const name = `payment-${orderId}`
-    const checked = paymentSelected === payment?.id
-    const handleOnChange = async (e: ChangeEvent<HTMLInputElement>) => {
-      e.stopPropagation()
-      setPaymentSelected && setPaymentSelected(paymentMethodId)
-      setLoading({ loading: true })
-      !clickableContainer &&
-        (await setPaymentMethod({ paymentResource, paymentMethodId }))
-      onChange && onChange(payment)
-      setLoading({ loading: false })
-    }
-    const id = payment?.payment_source_type
-    const parentProps = {
-      handleOnChange,
-      checked,
-      id,
-      name,
-      ...props,
-    }
-    return props.children ? (
-      <Parent {...parentProps}>{props.children}</Parent>
-    ) : (
-      <input
-        type="radio"
-        id={id}
-        onChange={handleOnChange}
-        checked={checked}
-        {...p}
-      />
-    )
+const PaymentMethodRadioButton: FunctionComponent<
+  ShippingMethodRadioButtonProps
+> = (props) => {
+  const { onChange, ...p } = props
+  const { payment, paymentSelected, setPaymentSelected, clickableContainer } =
+    useContext(PaymentMethodChildrenContext)
+  const { order } = useContext(OrderContext)
+  const { setPaymentMethod, setLoading } = useContext(PaymentMethodContext)
+  const orderId = order?.id || ''
+  const paymentResource = payment?.payment_source_type as PaymentResource
+  const paymentMethodId = payment?.id as string
+  const name = `payment-${orderId}`
+  const checked = paymentSelected === payment?.id
+  const handleOnChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    e.stopPropagation()
+    setPaymentSelected && setPaymentSelected(paymentMethodId)
+    setLoading({ loading: true })
+    !clickableContainer &&
+      (await setPaymentMethod({ paymentResource, paymentMethodId }))
+    onChange && onChange(payment)
+    setLoading({ loading: false })
   }
+  const id = payment?.payment_source_type
+  const parentProps = {
+    handleOnChange,
+    checked,
+    id,
+    name,
+    ...props,
+  }
+  return props.children ? (
+    <Parent {...parentProps}>{props.children}</Parent>
+  ) : (
+    <input
+      type="radio"
+      id={id}
+      onChange={handleOnChange}
+      checked={checked}
+      {...p}
+    />
+  )
+}
 
 PaymentMethodRadioButton.propTypes = propTypes
 PaymentMethodRadioButton.displayName = displayName

diff --git a/src/components/PaymentMethodsContainer.tsx b/src/components/PaymentMethodsContainer.tsx
@@ -66,17 +66,18 @@ const PaymentMethodsContainer: FunctionComponent<
         },
       })
     }
-
     if (config && isEmpty(state.config))
       setPaymentMethodConfig(config, dispatch)
-    if (credentials && order && !state.paymentMethods) {
-      getPaymentMethods({ order, dispatch })
-    }
-    if (credentials && order?.payment_source) {
-      dispatch({
-        type: 'setPaymentSource',
-        payload: { paymentSource: order?.payment_source },
-      })
+    if (credentials && order) {
+      if (!state.paymentMethods) {
+        getPaymentMethods({ order, dispatch })
+      }
+      if (order?.payment_source) {
+        dispatch({
+          type: 'setPaymentSource',
+          payload: { paymentSource: order?.payment_source },
+        })
+      }
     }
   }, [order, credentials, include, includeLoaded])
   const contextValue = useMemo(() => {

diff --git a/src/components/utils/PriceTemplate.tsx b/src/components/utils/PriceTemplate.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, FunctionComponent } from 'react'
+import React from 'react'
 import { PriceProps } from '#components/Price'
 import PropTypes from 'prop-types'
 
@@ -16,18 +16,17 @@ export type PTemplateProps = {
   formattedCompare?: string
 } & Omit<PriceProps, 'children'>
 
-const PriceTemplate: FunctionComponent<PTemplateProps> = (props) => {
+const PriceTemplate: React.FunctionComponent<PTemplateProps> = (props) => {
   const {
     showCompare,
     formattedCompare,
     compareClassName,
     className,
     formattedAmount,
-    skuCode,
     ...p
   } = props
   return (
-    <Fragment>
+    <>
       <span className={className} {...p}>
         {formattedAmount}
       </span>
@@ -36,7 +35,7 @@ const PriceTemplate: FunctionComponent<PTemplateProps> = (props) => {
           {formattedCompare}
         </span>
       )}
-    </Fragment>
+    </>
   )
 }
 

diff --git a/src/reducers/PaymentMethodReducer.ts b/src/reducers/PaymentMethodReducer.ts
@@ -56,7 +56,9 @@ export type PaymentSourceObject = {
       card: Card
     }
   }
-  external_payments: ExternalPayment
+  external_payments: ExternalPayment & {
+    payment_source_token?: string
+  }
   paypal_payments: PaypalPayment
   stripe_payments: StripePayment & {
     options?: {
@@ -226,6 +228,7 @@ export const setPaymentMethod: SetPaymentMethod = async ({
       const attributes = {
         payment_method: sdk.payment_methods.relationship(paymentMethodId),
       }
+      updateOrder && (await updateOrder({ id: order.id, attributes }))
       dispatch({
         type: 'setPaymentMethods',
         payload: {
@@ -234,31 +237,11 @@ export const setPaymentMethod: SetPaymentMethod = async ({
           errors: [],
         },
       })
-      updateOrder && (await updateOrder({ id: order.id, attributes }))
-      // const attrs: any = {
-      //   order: sdk.orders.relationship(order.id),
-      // }
-      // const paymentSource = await sdk[paymentResource].create(attrs)
-      // dispatch({
-      //   type: 'setPaymentMethods',
-      //   payload: {
-      //     currentPaymentMethodId: paymentMethodId,
-      //     currentPaymentMethodType: paymentResource,
-      //     paymentSource,
-      //     errors: [],
-      //   },
-      // })
       setOrderErrors && setOrderErrors([])
     }
   } catch (error) {
     const errors = getErrors(error, 'orders')
     console.error('Set payment method', errors)
-    // if (dispatch)
-    // setErrors({
-    //   currentErrors: state?.errors,
-    //   newErrors: errors,
-    //   dispatch,
-    // })
   }
 }
 
@@ -309,18 +292,18 @@ export const setPaymentSource: SetPaymentSource = async ({
           }
           paymentSource = await sdk[paymentResource].create(attrs)
         } else {
-          const attrs: any = {
+          const attrs = {
             id: paymentSourceId,
             ...attributes,
           }
           paymentSource = await sdk[paymentResource].update(attrs)
         }
+        getOrder && (await getOrder(order.id))
         dispatch &&
           dispatch({
             type: 'setPaymentSource',
             payload: { paymentSource, errors: [] },
           })
-        getOrder && (await getOrder(order.id))
         return paymentSource
       } else {
         updateOrder &&
@@ -330,29 +313,7 @@ export const setPaymentSource: SetPaymentSource = async ({
               _customer_payment_source_id: customerPaymentSourceId,
             },
           }))
-        // paymentSource = (
-        //   await Order.includes('paymentSource')
-        //     .build({ id: order.id })
-        //     .withCredentials(config)
-        //     .update({
-        //       _customerPaymentSourceId: customerPaymentSourceId,
-        //     })
-        // ).paymentSource()
       }
-      // if (order?.billingAddress() === null)
-      //   await order.withCredentials(config).loadBillingAddress()
-      // if (order?.paymentSource() === null)
-      //   await order.withCredentials(config).loadPaymentSource()
-      // dispatch &&
-      //   dispatch({
-      //     type: 'setPaymentSource',
-      //     payload: { paymentSource, errors: [] },
-      //   })
-      // if (getOrder) order = (await getOrder(order?.id)) as Order
-      // return {
-      //   order,
-      //   paymentSource,
-      // }
     }
   } catch (error: any) {
     const errors = getErrors(error, 'payment_methods')