W-21372336: Fail Order for redirect based payments

Author: rasbhat

packages/template-retail-react-app/app/pages/checkout/payment-processing.jsx

@@ -14,7 +14,13 @@ import {FormattedMessage} from 'react-intl'
 import {Heading, Stack, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
 import Link from '@salesforce/retail-react-app/app/components/link'
 
-import {useOrder, useShopperOrdersMutation} from '@salesforce/commerce-sdk-react'
+import {
+    useOrder,
+    useShopperOrdersMutation,
+    useCommerceApi,
+    useAccessToken
+} from '@salesforce/commerce-sdk-react'
+import {useQueryClient} from '@tanstack/react-query'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
 import {useSFPayments, STATUS_SUCCESS} from '@salesforce/retail-react-app/app/hooks/use-sf-payments'
 import {getSFPaymentsInstrument} from '@salesforce/retail-react-app/app/utils/sf-payments-utils'
@@ -42,6 +48,9 @@ const PaymentProcessing = () => {
     const navigate = useNavigation()
     const {sfp} = useSFPayments()
     const toast = useToast()
+    const queryClient = useQueryClient()
+    const api = useCommerceApi()
+    const {getTokenWhenReady} = useAccessToken()
 
     const {mutateAsync: updatePaymentInstrumentForOrder} = useShopperOrdersMutation(
         'updatePaymentInstrumentForOrder'
@@ -81,6 +90,7 @@ const PaymentProcessing = () => {
 
     const isError = !isValidReturnUrl()
     const isHandled = useRef(false)
+    const failOrderCalledRef = useRef(false)
 
     async function handleAdyenRedirect() {
         // Find SF Payments payment instrument in order
@@ -117,16 +127,41 @@ const PaymentProcessing = () => {
         )
     }
 
-    async function failOrderForPayment() {
-        await failOrder({
-            parameters: {
-                orderNo,
-                reopenBasket: true
-            },
-            body: {
-                reasonCode: 'payment_confirm_failure'
+    /**
+     * Attempts to fail an order and reopen the basket.
+     * Only calls failOrder if the order status is 'created' (avoids hanging when order
+     * was already failed by webhook.)
+     * @returns {Promise<void>}
+     */
+    async function attemptFailOrderForPayment() {
+        if (!orderNo || failOrderCalledRef.current) {
+            return
+        }
+
+        try {
+            const token = await getTokenWhenReady()
+            const currentOrder = await api.shopperOrders.getOrder({
+                parameters: {orderNo},
+                headers: {Authorization: `Bearer ${token}`}
+            })
+
+            if (currentOrder.status === 'created') {
+                await failOrder({
+                    parameters: {
+                        orderNo,
+                        reopenBasket: true
+                    },
+                    body: {
+                        reasonCode: 'payment_confirm_failure'
+                    }
+                })
             }
-        })
+        } catch {
+            // Order may already be failed by webhook; avoid hanging
+        } finally {
+            failOrderCalledRef.current = true
+            queryClient.invalidateQueries()
+        }
     }
 
     function showOrderConfirmation() {
@@ -139,7 +174,7 @@ const PaymentProcessing = () => {
             isHandled.current = true
 
             // Order exists but payment can't be processed for return URL
-            failOrderForPayment()
+            attemptFailOrderForPayment()
         } else if (!isError && sfp && order) {
             ;(async () => {
                 if (isHandled.current) {
@@ -175,11 +210,11 @@ const PaymentProcessing = () => {
                     duration: 30000
                 })
 
-                // Attempt to fail the order
-                await failOrderForPayment()
+                // Attempt to fail the order (no-op if already failed by webhook
+                await attemptFailOrderForPayment()
 
-                // Navigate back to the checkout page to try again
-                navigate('/checkout')
+                // Redirect to cart when payment fails
+                navigate('/cart')
             })()
         }
     }, [sfp, order])

packages/template-retail-react-app/app/pages/checkout/payment-processing.test.js

@@ -20,6 +20,9 @@ const mockUseOrder = jest.fn()
 const mockUpdatePaymentInstrumentForOrder = jest.fn()
 const mockFailOrder = jest.fn()
 const mockGetSFPaymentsInstrument = jest.fn()
+const mockGetOrder = jest.fn()
+const mockGetTokenWhenReady = jest.fn()
+const mockInvalidateQueries = jest.fn()
 
 jest.mock('@salesforce/retail-react-app/app/hooks/use-navigation', () => ({
     __esModule: true,
@@ -40,6 +43,14 @@ jest.mock('@salesforce/commerce-sdk-react', () => {
     const actual = jest.requireActual('@salesforce/commerce-sdk-react')
     return {
         ...actual,
+        useCommerceApi: () => ({
+            shopperOrders: {
+                getOrder: mockGetOrder
+            }
+        }),
+        useAccessToken: () => ({
+            getTokenWhenReady: mockGetTokenWhenReady
+        }),
         useShopperOrdersMutation: (mutationKey) => {
             if (mutationKey === 'updatePaymentInstrumentForOrder') {
                 return {mutateAsync: mockUpdatePaymentInstrumentForOrder}
@@ -53,6 +64,16 @@ jest.mock('@salesforce/commerce-sdk-react', () => {
     }
 })
 
+jest.mock('@tanstack/react-query', () => {
+    const actual = jest.requireActual('@tanstack/react-query')
+    return {
+        ...actual,
+        useQueryClient: () => ({
+            invalidateQueries: mockInvalidateQueries
+        })
+    }
+})
+
 jest.mock('@salesforce/retail-react-app/app/utils/sf-payments-utils', () => ({
     getSFPaymentsInstrument: () => mockGetSFPaymentsInstrument()
 }))
@@ -90,6 +111,9 @@ describe('PaymentProcessing', () => {
         mockUpdatePaymentInstrumentForOrder.mockReturnValue({})
 
         mockGetSFPaymentsInstrument.mockReturnValue({})
+
+        mockGetOrder.mockResolvedValue({status: 'created'})
+        mockGetTokenWhenReady.mockResolvedValue('token')
     })
 
     afterEach(() => {
@@ -205,6 +229,7 @@ describe('PaymentProcessing', () => {
             expect(screen.getByText('Return to Checkout')).toBeInTheDocument()
 
             await waitFor(() => {
+                expect(mockGetOrder).toHaveBeenCalled()
                 expect(mockFailOrder).toHaveBeenCalledTimes(1)
                 expect(mockFailOrder).toHaveBeenCalledWith({
                     parameters: {
@@ -229,6 +254,7 @@ describe('PaymentProcessing', () => {
             expect(screen.getByText('Return to Checkout')).toBeInTheDocument()
 
             await waitFor(() => {
+                expect(mockGetOrder).toHaveBeenCalled()
                 expect(mockFailOrder).toHaveBeenCalledTimes(1)
                 expect(mockFailOrder).toHaveBeenCalledWith({
                     parameters: {
@@ -253,6 +279,7 @@ describe('PaymentProcessing', () => {
             expect(screen.getByText('Return to Checkout')).toBeInTheDocument()
 
             await waitFor(() => {
+                expect(mockGetOrder).toHaveBeenCalled()
                 expect(mockFailOrder).toHaveBeenCalledTimes(1)
                 expect(mockFailOrder).toHaveBeenCalledWith({
                     parameters: {
@@ -380,13 +407,13 @@ describe('PaymentProcessing', () => {
                 })
             })
 
-            test('navigates back to checkout on failed payment', async () => {
+            test('navigates to cart on failed payment', async () => {
                 mockHandleRedirect.mockResolvedValue({responseCode: 1})
 
                 renderWithProviders(<PaymentProcessing />)
 
                 await waitFor(() => {
-                    expect(mockNavigate).toHaveBeenCalledWith('/checkout')
+                    expect(mockNavigate).toHaveBeenCalledWith('/cart')
                 })
             })
 
@@ -400,6 +427,7 @@ describe('PaymentProcessing', () => {
                 })
 
                 await waitFor(() => {
+                    expect(mockGetOrder).toHaveBeenCalled()
                     expect(mockFailOrder).toHaveBeenCalledTimes(1)
                     expect(mockFailOrder).toHaveBeenCalledWith({
                         parameters: {
@@ -412,7 +440,22 @@ describe('PaymentProcessing', () => {
                     })
                 })
 
-                expect(mockNavigate).toHaveBeenCalledWith('/checkout')
+                expect(mockNavigate).toHaveBeenCalledWith('/cart')
+            })
+
+            test('does not call failOrder when order already failed by webhook (e.g. 3DS declined)', async () => {
+                mockHandleRedirect.mockResolvedValue({responseCode: 1})
+                mockGetOrder.mockResolvedValue({status: 'failed'})
+
+                renderWithProviders(<PaymentProcessing />)
+
+                await waitFor(() => {
+                    expect(mockToast).toHaveBeenCalled()
+                    expect(mockNavigate).toHaveBeenCalledWith('/cart')
+                })
+
+                expect(mockGetOrder).toHaveBeenCalled()
+                expect(mockFailOrder).not.toHaveBeenCalled()
             })
 
             test('handles different error response codes', async () => {
@@ -421,12 +464,14 @@ describe('PaymentProcessing', () => {
                 for (const code of errorCodes) {
                     jest.clearAllMocks()
                     mockHandleRedirect.mockResolvedValue({responseCode: code})
+                    mockGetOrder.mockResolvedValue({status: 'created'})
+                    mockGetTokenWhenReady.mockResolvedValue('token')
 
                     renderWithProviders(<PaymentProcessing />)
 
                     await waitFor(() => {
                         expect(mockToast).toHaveBeenCalled()
-                        expect(mockNavigate).toHaveBeenCalledWith('/checkout')
+                        expect(mockNavigate).toHaveBeenCalledWith('/cart')
                     })
                 }
             })
@@ -536,11 +581,11 @@ describe('PaymentProcessing', () => {
                 })
             })
 
-            test('navigates back to checkout on failed payment', async () => {
+            test('navigates to cart on failed payment', async () => {
                 renderWithProviders(<PaymentProcessing />)
 
                 await waitFor(() => {
-                    expect(mockNavigate).toHaveBeenCalledWith('/checkout')
+                    expect(mockNavigate).toHaveBeenCalledWith('/cart')
                 })
             })
 
@@ -552,6 +597,7 @@ describe('PaymentProcessing', () => {
                 })
 
                 await waitFor(() => {
+                    expect(mockGetOrder).toHaveBeenCalled()
                     expect(mockFailOrder).toHaveBeenCalledTimes(1)
                     expect(mockFailOrder).toHaveBeenCalledWith({
                         parameters: {
@@ -564,7 +610,7 @@ describe('PaymentProcessing', () => {
                     })
                 })
 
-                expect(mockNavigate).toHaveBeenCalledWith('/checkout')
+                expect(mockNavigate).toHaveBeenCalledWith('/cart')
             })
         })
     })