fix: Show checkout.com card after placing an order

commercelayer · Mar 28, 2022 · 1083750 · 1083750
1 parent 03b84a9
commit 1083750
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 13 deletions.
diff --git a/src/components/gateways/CheckoutComGateway.tsx b/src/components/gateways/CheckoutComGateway.tsx
@@ -11,7 +11,7 @@ import {
 } from '#reducers/PaymentMethodReducer'
 import { StripeElementLocale } from '@stripe/stripe-js'
 import isEmpty from 'lodash/isEmpty'
-import React, { Fragment, useContext } from 'react'
+import React from 'react'
 import PaymentCardsTemplate from '../utils/PaymentCardsTemplate'
 import getCardDetails from '../../utils/getCardDetails'
 
@@ -30,11 +30,11 @@ export default function CheckoutComGateway(props: CheckoutComGateway) {
     templateCustomerSaveToWallet,
     ...p
   } = props
-  const { order } = useContext(OrderContext)
-  const { payment } = useContext(PaymentMethodChildrenContext)
-  const { payments, isGuest } = useContext(CustomerContext)
+  const { order } = React.useContext(OrderContext)
+  const { payment } = React.useContext(PaymentMethodChildrenContext)
+  const { payments, isGuest } = React.useContext(CustomerContext)
   const { currentPaymentMethodId, config, paymentSource } =
-    useContext(PaymentMethodContext)
+    React.useContext(PaymentMethodContext)
   const paymentResource: PaymentResource = 'checkout_com_payments'
   const locale = order?.language_code as StripeElementLocale
 
@@ -53,7 +53,9 @@ export default function CheckoutComGateway(props: CheckoutComGateway) {
       : []
   if (readonly || showCard) {
     const card = getCardDetails({
-      customerPayment: { payment_source: paymentSource },
+      customerPayment: {
+        payment_source: order?.payment_source || paymentSource,
+      },
       paymentType: paymentResource,
     })
     const value = { ...card, showCard, handleEditClick, readonly }
@@ -65,7 +67,7 @@ export default function CheckoutComGateway(props: CheckoutComGateway) {
   }
   if (!isGuest && templateCustomerCards) {
     return publicKey && !loading ? (
-      <Fragment>
+      <>
         {isEmpty(customerPayments) ? null : (
           <div className={p.className}>
             <PaymentCardsTemplate {...{ paymentResource, customerPayments }}>
@@ -80,7 +82,7 @@ export default function CheckoutComGateway(props: CheckoutComGateway) {
           locale={locale}
           {...paymentConfig}
         />
-      </Fragment>
+      </>
     ) : (
       loaderComponent
     )

diff --git a/src/reducers/PlaceOrderReducer.ts b/src/reducers/PlaceOrderReducer.ts
@@ -121,6 +121,8 @@ export type SetPlaceOrder = (args: {
   state?: PlaceOrderState
   setOrderErrors?: (collection: unknown) => void
   paymentSource?: PaymentSourceType & { approval_url?: string }
+  include?: string[]
+  setOrder?: (order: Order) => void
 }) => Promise<{
   placed: boolean
 }>
@@ -131,6 +133,8 @@ export const setPlaceOrder: SetPlaceOrder = async ({
   config,
   setOrderErrors,
   paymentSource,
+  setOrder,
+  include,
 }) => {
   const response = {
     placed: false,
@@ -154,11 +158,25 @@ export const setPlaceOrder: SetPlaceOrder = async ({
         paymentSource &&
         options?.checkoutCom?.session_id
       ) {
-        await sdk[paymentType].update({
+        const payment = await sdk[paymentType].update({
           id: paymentSource.id,
           _details: true,
           session_id: options?.checkoutCom?.session_id,
         })
+        // @ts-ignore
+        if (payment?.payment_response?.status !== 'Authorized') {
+          // @ts-ignore
+          const [action] = payment?.payment_response?.actions || ['']
+          const errors: BaseError[] = [
+            {
+              code: 'PAYMENT_NOT_APPROVED_FOR_EXECUTION',
+              message: action?.response_summary,
+              resource: 'orders',
+              field: 'checkout_com_payments',
+            },
+          ]
+          throw { errors }
+        }
       }
       const updateAttributes: OrderUpdate = {
         id: order.id,
@@ -177,20 +195,27 @@ export const setPlaceOrder: SetPlaceOrder = async ({
         })
       }
       switch (paymentType) {
-        case 'braintree_payments':
+        case 'braintree_payments': {
           if (saveToWallet()) {
             await sdk.orders.update({
               id: order.id,
               _save_payment_source_to_customer_wallet: true,
             })
           }
-          await sdk.orders.update(updateAttributes)
+          const orderUpdated = await sdk.orders.update(updateAttributes, {
+            include,
+          })
+          setOrder && setOrder(orderUpdated)
           setOrderErrors && setOrderErrors([])
           return {
             placed: true,
           }
-        default:
-          await sdk.orders.update(updateAttributes)
+        }
+        default: {
+          const orderUpdated = await sdk.orders.update(updateAttributes, {
+            include,
+          })
+          setOrder && setOrder(orderUpdated)
           if (saveToWallet()) {
             await sdk.orders.update({
               id: order.id,
@@ -201,6 +226,7 @@ export const setPlaceOrder: SetPlaceOrder = async ({
           return {
             placed: true,
           }
+        }
       }
     }
     return response