fix: Rehydrate payment source props

i Please enter the commit message for your changes. Lines starting

package.json

@@ -84,7 +84,7 @@
   "dependencies": {
     "@ac-dev/countries-service": "^1.2.0",
     "@ac-dev/states-service": "^1.0.3",
-    "@adyen/adyen-web": "^5.10.0",
+    "@adyen/adyen-web": "^5.11.0",
     "@commercelayer/js-auth": "^3.0.0",
     "@commercelayer/sdk": "^3.6.0",
     "@stripe/react-stripe-js": "^1.7.0",
@@ -95,14 +95,14 @@
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "rapid-form": "^1.6.1"
+    "rapid-form": "^1.6.2"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@playwright/test": "^1.19.2",
+    "@playwright/test": "^1.20.0",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -115,33 +115,33 @@
     "@tailwindcss/typography": "^0.5.2",
     "@types/braintree-web": "^3.75.19",
     "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.179",
+    "@types/lodash": "^4.14.180",
     "@types/node": "^17.0.21",
     "@types/prop-types": "^15.7.4",
     "@types/react": "^17.0.40",
     "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
     "@zeit/next-css": "^1.0.1",
     "@zerollup/ts-transform-paths": "^1.7.18",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.4",
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.3",
     "babel-plugin-istanbul": "^6.1.1",
     "dotenv": "^16.0.0",
-    "eslint": "^8.10.0",
+    "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.0",
-    "eslint-plugin-react": "^7.29.3",
+    "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^27.5.1",
     "minimize-js": "^1.3.0",
     "next": "^12.1.0",
     "nyc": "^15.1.0",
-    "playwright": "^1.19.2",
-    "postcss": "^8.4.8",
+    "playwright": "^1.20.0",
+    "postcss": "^8.4.12",
     "postcss-loader": "^6.2.1",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.0",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -150,7 +150,7 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "tailwindcss": "^3.0.23",
     "ts-jest": "^27.1.3",
-    "ts-loader": "^9.2.7",
+    "ts-loader": "^9.2.8",
     "tsc-alias": "^1.6.4",
     "tsconfig-paths-jest": "^0.0.1",
     "ttypescript": "^1.5.13",

src/components/AddToCartButton.tsx

@@ -100,8 +100,8 @@ const AddToCartButton: FunctionComponent<AddToCartButtonProps> = (props) => {
             ],
           },
         })
-          .then((res) => {
-            getOrder && orderId && getOrder(orderId)
+          .then(async (res) => {
+            getOrder && orderId && (await getOrder(orderId))
             return res
           })
           .catch(({ response }) => {
@@ -131,8 +131,8 @@ const AddToCartButton: FunctionComponent<AddToCartButtonProps> = (props) => {
             lineItem: customLineItem,
           },
         })
-          .then((res) => {
-            getOrder && orderId && getOrder(orderId)
+          .then(async (res) => {
+            getOrder && orderId && (await getOrder(orderId))
             return res
           })
           .catch(({ response }) => {

src/components/OrderContainer.tsx

@@ -141,6 +141,7 @@ const OrderContainer: FunctionComponent<OrderContainerProps> = (props) => {
           dispatch,
           config,
           include: state.include,
+          state,
         }),
     }
   }, [state])

src/components/PaymentGateway.tsx

@@ -53,7 +53,6 @@ const PaymentGateway: FunctionComponent<PaymentGatewayProps> = ({
   const {
     currentPaymentMethodId,
     config,
-    paymentSource,
     currentPaymentMethodType,
     setPaymentSource,
   } = useContext(PaymentMethodContext)
@@ -70,23 +69,28 @@ const PaymentGateway: FunctionComponent<PaymentGatewayProps> = ({
         config && paymentResource === 'paypal_payments'
           ? getPaypalConfig(paymentResource, config)
           : {}
-      if (
-        (!order?.payment_source || (!order?.payment_source && paymentSource)) &&
-        show
-      ) {
-        setPaymentSource({
+      const setPaymentSources = async () => {
+        await setPaymentSource({
           paymentResource,
           order,
           attributes,
         })
-        getCustomerPaymentSources && getCustomerPaymentSources()
+        getCustomerPaymentSources && (await getCustomerPaymentSources())
       }
+      if (order?.payment_source === null && order?.payment_method.id && show) {
+        setPaymentSources()
+      }
+      // @ts-ignore
+      if (order?.payment_source?.mismatched_amounts && show) {
+        setPaymentSources()
+      }
+
       setLoading(false)
     }
     return () => {
       setLoading(true)
     }
-  }, [order?.payment_method, show, paymentSource])
+  }, [order?.payment_method?.id, show, order?.payment_source?.id])
   const gatewayConfig = {
     readonly,
     showCard,

src/components/PaymentMethodsContainer.tsx

@@ -2,7 +2,6 @@ import PaymentMethodContext, {
   defaultPaymentMethodContext,
 } from '#context/PaymentMethodContext'
 import React, {
-  FunctionComponent,
   ReactNode,
   useContext,
   useEffect,
@@ -30,7 +29,7 @@ type PaymentMethodsContainerProps = {
   children: ReactNode
   config?: PaymentMethodConfig
 }
-const PaymentMethodsContainer: FunctionComponent<
+const PaymentMethodsContainer: React.FunctionComponent<
   PaymentMethodsContainerProps
 > = (props) => {
   const { children, config } = props
@@ -48,6 +47,9 @@ const PaymentMethodsContainer: FunctionComponent<
     includeLoaded,
   } = useContext(OrderContext)
   const credentials = useContext(CommerceLayerContext)
+  async function getPayMethods() {
+    order && (await getPaymentMethods({ order, dispatch }))
+  }
   useEffect(() => {
     if (!include?.includes('available_payment_methods')) {
       addResourceToInclude({
@@ -70,13 +72,7 @@ const PaymentMethodsContainer: FunctionComponent<
       setPaymentMethodConfig(config, dispatch)
     if (credentials && order) {
       if (!state.paymentMethods) {
-        getPaymentMethods({ order, dispatch })
-      }
-      if (order?.payment_source) {
-        dispatch({
-          type: 'setPaymentSource',
-          payload: { paymentSource: order?.payment_source },
-        })
+        getPayMethods()
       }
     }
   }, [order, credentials, include, includeLoaded])
@@ -99,7 +95,7 @@ const PaymentMethodsContainer: FunctionComponent<
           setOrderErrors,
         }),
       setPaymentSource: async (args: any) =>
-        defaultPaymentMethodContext['setPaymentSource']({
+        await defaultPaymentMethodContext['setPaymentSource']({
           ...state,
           ...args,
           config: credentials,
@@ -109,13 +105,13 @@ const PaymentMethodsContainer: FunctionComponent<
           order,
         }),
       updatePaymentSource: async (args: any) =>
-        defaultPaymentMethodContext['updatePaymentSource']({
+        await defaultPaymentMethodContext['updatePaymentSource']({
           ...args,
           config: credentials,
           dispatch,
         }),
       destroyPaymentSource: async (args: any) =>
-        defaultPaymentMethodContext['destroyPaymentSource']({
+        await defaultPaymentMethodContext['destroyPaymentSource']({
           ...args,
           dispatch,
           config: credentials,

src/components/PaymentSource.tsx

@@ -61,13 +61,13 @@ const PaymentSource: FunctionComponent<PaymentSourceProps> = (props) => {
       setShowCard(false)
     }
   }, [currentPaymentMethodId, paymentSource, payments, payment, readonly])
-  const handleEditClick = (e: MouseEvent) => {
+  const handleEditClick = async (e: MouseEvent) => {
     e.stopPropagation()
     paymentSource &&
-      destroyPaymentSource({
+      (await destroyPaymentSource({
         paymentSourceId: paymentSource?.id,
         paymentResource: payment?.payment_source_type as PaymentResource,
-      })
+      }))
     setShowCard(!showCard)
     setShow(true)
   }

src/components/PlaceOrderButton.tsx

@@ -34,20 +34,16 @@ const PlaceOrderButton: FunctionComponent<PlaceOrderButtonProps> = (props) => {
     useContext(PlaceOrderContext)
   const [notPermitted, setNotPermitted] = useState(true)
   const [forceDisable, setForceDisable] = useState(disabled)
-  const {
-    currentPaymentMethodRef,
-    paymentSource,
-    loading,
-    currentPaymentMethodType,
-  } = useContext(PaymentMethodContext)
+  const { currentPaymentMethodRef, loading, currentPaymentMethodType } =
+    useContext(PaymentMethodContext)
   const { order } = useContext(OrderContext)
   const isFree = order?.total_amount_with_taxes_cents === 0
   useEffect(() => {
     if (loading) setNotPermitted(loading)
     else {
       if (paymentType === currentPaymentMethodType && paymentType) {
         const card = getCardDetails({
-          customerPayment: { payment_source: paymentSource },
+          customerPayment: { payment_source: order?.payment_source },
           paymentType,
         })
         if (
@@ -71,10 +67,10 @@ const PlaceOrderButton: FunctionComponent<PlaceOrderButtonProps> = (props) => {
     isPermitted,
     paymentType,
     currentPaymentMethodRef?.current?.onsubmit,
-    paymentSource,
     loading,
     currentPaymentMethodType,
     order,
+    order?.payment_source,
   ])
   useEffect(() => {
     if (
@@ -114,7 +110,7 @@ const PlaceOrderButton: FunctionComponent<PlaceOrderButtonProps> = (props) => {
       paymentType &&
       getCardDetails({
         paymentType,
-        customerPayment: { payment_source: paymentSource },
+        customerPayment: { payment_source: order?.payment_source },
       })
     if (
       currentPaymentMethodRef?.current?.onsubmit &&
@@ -125,15 +121,18 @@ const PlaceOrderButton: FunctionComponent<PlaceOrderButtonProps> = (props) => {
       ].every(Boolean)
     ) {
       // @ts-ignore
-      isValid = (await currentPaymentMethodRef.current?.onsubmit()) as boolean
+      isValid = (await currentPaymentMethodRef.current?.onsubmit(
+        // @ts-ignore
+        order.payment_source
+      )) as boolean
     } else if (card?.brand) {
       isValid = true
     }
     const placed =
       isValid &&
       setPlaceOrder &&
-      (paymentSource || isFree) &&
-      (await setPlaceOrder({ paymentSource: paymentSource }))
+      (order?.payment_source || isFree) &&
+      (await setPlaceOrder({ paymentSource: order?.payment_source }))
     setForceDisable(false)
     onClick && placed && onClick(placed)
   }