Merge pull request #3513 from SalesforceCommerceCloud/rvishwanathbhat/order-confirmation-hide-sfp-payment-details

@W-19799923: Remove payment details on order confirmation page for SFP orders

Author: rasbhat

packages/template-retail-react-app/app/pages/checkout/confirmation.jsx

@@ -70,6 +70,7 @@ const CheckoutConfirmation = () => {
             enabled: !!orderNo && onClient
         }
     )
+
     const {currency} = useCurrency()
     const itemIds = order?.productItems.map((item) => item.productId)
     const {data: products} = useProducts({parameters: {ids: itemIds?.join(',')}})
@@ -507,11 +508,13 @@ const CheckoutConfirmation = () => {
                                         <AddressDisplay address={order.billingAddress} />
                                     </Stack>
 
-                                    {order.paymentInstruments[0].paymentMethodId ===
+                                    {order.paymentInstruments?.[0]?.paymentMethodId ===
                                     'Salesforce Payments' ? (
-                                        <SFPaymentsOrderSummary
-                                            paymentInstrument={order.paymentInstruments[0]}
-                                        />
+                                        order.paymentInstruments?.[0]?.c_paymentReference_type ? (
+                                            <SFPaymentsOrderSummary
+                                                paymentInstrument={order.paymentInstruments[0]}
+                                            />
+                                        ) : null
                                     ) : (
                                         <Stack spacing={1}>
                                             <Heading as="h3" fontSize="sm">

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

@@ -313,6 +313,17 @@ describe('Account form', () => {
 
 describe('Salesforce Payments Integration', () => {
     const mockSFPaymentsOrder = {
+        ...mockOrder,
+        paymentInstruments: [
+            {
+                amount: 82.56,
+                paymentInstrumentId: 'sfp123',
+                paymentMethodId: 'Salesforce Payments'
+            }
+        ]
+    }
+
+    const mockSFPaymentsOrderWithType = {
         ...mockOrder,
         paymentInstruments: [
             {
@@ -326,164 +337,61 @@ describe('Salesforce Payments Integration', () => {
         ]
     }
 
-    beforeEach(() => {
+    test('does not render payment details for Salesforce Payments orders when c_paymentReference_type is missing', async () => {
         global.server.use(
             rest.get('*/orders/:orderId', (req, res, ctx) => {
                 return res(ctx.delay(0), ctx.json(mockSFPaymentsOrder))
             })
         )
-    })
 
-    test('renders SFPaymentsOrderSummary for Salesforce Payments orders', async () => {
         renderWithProviders(<MockedComponent />)
 
-        // Wait for the page to load
         await screen.findByText(mockSFPaymentsOrder.orderNo)
 
-        // Check that Payment Details section exists
-        const paymentDetailsHeading = screen.getByText('Payment Details')
-        expect(paymentDetailsHeading).toBeInTheDocument()
-
-        // The SFPaymentsOrderSummary should render instead of credit card display
-        const creditCardHeading = await screen.findByRole('heading', {name: /credit card/i})
-        expect(creditCardHeading).toBeInTheDocument()
-    })
-
-    test('displays Visa payment information for Salesforce Payments', async () => {
-        renderWithProviders(<MockedComponent />)
-
-        await screen.findByText(mockSFPaymentsOrder.orderNo)
-
-        // Check for Visa brand name
-        expect(await screen.findByText('Visa')).toBeInTheDocument()
-
-        // Check for last 4 digits with masked format
-        expect(screen.getByText(/4242/)).toBeInTheDocument()
-    })
-
-    test('renders different payment types for Salesforce Payments', async () => {
-        const mockOrderWithKlarna = {
-            ...mockOrder,
-            paymentInstruments: [
-                {
-                    amount: 82.56,
-                    paymentInstrumentId: 'sfp-klarna',
-                    paymentMethodId: 'Salesforce Payments',
-                    c_paymentReference_type: 'klarna'
-                }
-            ]
-        }
-
-        global.server.use(
-            rest.get('*/orders/:orderId', (req, res, ctx) => {
-                return res(ctx.delay(0), ctx.json(mockOrderWithKlarna))
-            })
-        )
-
-        renderWithProviders(<MockedComponent />)
-
-        await screen.findByText(mockOrderWithKlarna.orderNo)
-
-        // Check for Klarna heading
-        expect(await screen.findByText('Klarna')).toBeInTheDocument()
-    })
-
-    test('displays MasterCard payment information for Salesforce Payments', async () => {
-        const mockOrderWithMasterCard = {
-            ...mockOrder,
-            paymentInstruments: [
-                {
-                    amount: 82.56,
-                    paymentInstrumentId: 'sfp-mc',
-                    paymentMethodId: 'Salesforce Payments',
-                    c_paymentReference_type: 'card',
-                    c_paymentReference_brand: 'mastercard',
-                    c_paymentReference_last4: '5454'
-                }
-            ]
-        }
-
-        global.server.use(
-            rest.get('*/orders/:orderId', (req, res, ctx) => {
-                return res(ctx.delay(0), ctx.json(mockOrderWithMasterCard))
-            })
-        )
-
-        renderWithProviders(<MockedComponent />)
-
-        await screen.findByText(mockOrderWithMasterCard.orderNo)
-
-        // Check for MasterCard brand name
-        expect(await screen.findByText('MasterCard')).toBeInTheDocument()
+        // Payment Details section should exist
+        expect(screen.getByText('Payment Details')).toBeInTheDocument()
 
-        // Check for last 4 digits
-        expect(screen.getByText(/5454/)).toBeInTheDocument()
+        // No payment method details should be shown for SFP orders when c_paymentReference_type is missing
+        expect(screen.queryByRole('heading', {name: /credit card/i})).not.toBeInTheDocument()
     })
 
-    test('displays SEPA Debit payment information for Salesforce Payments', async () => {
-        const mockOrderWithSEPA = {
-            ...mockOrder,
-            paymentInstruments: [
-                {
-                    amount: 82.56,
-                    paymentInstrumentId: 'sfp-sepa',
-                    paymentMethodId: 'Salesforce Payments',
-                    c_paymentReference_type: 'sepa_debit',
-                    c_paymentReference_last4: '9012'
-                }
-            ]
-        }
-
+    test('renders SFPaymentsOrderSummary for Salesforce Payments orders when c_paymentReference_type exists', async () => {
         global.server.use(
             rest.get('*/orders/:orderId', (req, res, ctx) => {
-                return res(ctx.delay(0), ctx.json(mockOrderWithSEPA))
+                return res(ctx.delay(0), ctx.json(mockSFPaymentsOrderWithType))
             })
         )
 
         renderWithProviders(<MockedComponent />)
 
-        await screen.findByText(mockOrderWithSEPA.orderNo)
+        await screen.findByText(mockSFPaymentsOrderWithType.orderNo)
 
-        // Check for SEPA Debit heading
-        expect(await screen.findByText('SEPA Debit')).toBeInTheDocument()
+        // Payment Details section should exist
+        expect(screen.getByText('Payment Details')).toBeInTheDocument()
 
-        // Check for last 4 digits
-        expect(screen.getByText(/9012/)).toBeInTheDocument()
+        // SFPaymentsOrderSummary should render when c_paymentReference_type is available
+        expect(await screen.findByRole('heading', {name: /credit card/i})).toBeInTheDocument()
+        expect(screen.getByText('Visa')).toBeInTheDocument()
+        expect(screen.getByText(/4242/)).toBeInTheDocument()
     })
 
-    test('displays Bancontact payment information for Salesforce Payments', async () => {
-        const mockOrderWithBancontact = {
-            ...mockOrder,
-            paymentInstruments: [
-                {
-                    amount: 82.56,
-                    paymentInstrumentId: 'sfp-bancontact',
-                    paymentMethodId: 'Salesforce Payments',
-                    c_paymentReference_type: 'bancontact',
-                    c_paymentReference_bankName: 'ING Bank',
-                    c_paymentReference_last4: '1234'
-                }
-            ]
-        }
-
+    test('renders billing address for Salesforce Payments orders', async () => {
         global.server.use(
             rest.get('*/orders/:orderId', (req, res, ctx) => {
-                return res(ctx.delay(0), ctx.json(mockOrderWithBancontact))
+                return res(ctx.delay(0), ctx.json(mockSFPaymentsOrder))
             })
         )
 
         renderWithProviders(<MockedComponent />)
 
-        await screen.findByText(mockOrderWithBancontact.orderNo)
-
-        // Check for Bancontact heading
-        expect(await screen.findByText('Bancontact')).toBeInTheDocument()
+        await screen.findByText(mockSFPaymentsOrder.orderNo)
 
-        // Check for bank name
-        expect(screen.getByText('ING Bank')).toBeInTheDocument()
+        // Billing address should be shown
+        expect(screen.getByRole('heading', {name: /billing address/i})).toBeInTheDocument()
 
-        // Check for last 4 digits
-        expect(screen.getByText(/1234/)).toBeInTheDocument()
+        // Check that billing address is displayed
+        const addresses = screen.getAllByText(/123 Walnut Place/)
+        expect(addresses.length).toBeGreaterThan(0)
     })
 
     test('still renders traditional credit card display for non-SF Payments orders', async () => {
@@ -501,78 +409,5 @@ describe('Salesforce Payments Integration', () => {
         expect(await screen.findByText('Credit Card')).toBeInTheDocument()
         expect(screen.getByText('Visa')).toBeInTheDocument()
         expect(screen.getByText(/1111/)).toBeInTheDocument()
-        expect(screen.getByText(/1\/2040/)).toBeInTheDocument()
-    })
-
-    test('renders billing address alongside Salesforce Payments details', async () => {
-        renderWithProviders(<MockedComponent />)
-
-        await screen.findByText(mockSFPaymentsOrder.orderNo)
-
-        // Check for billing address heading
-        const billingAddressHeading = screen.getByRole('heading', {name: /billing address/i})
-        expect(billingAddressHeading).toBeInTheDocument()
-
-        // Check that billing address is displayed (use getAllByText since address appears in multiple places)
-        const addresses = screen.getAllByText(/123 Walnut Place/)
-        expect(addresses.length).toBeGreaterThan(0)
-
-        // Verify Payment Details heading exists
-        expect(screen.getByText('Payment Details')).toBeInTheDocument()
-    })
-
-    test('displays Afterpay/Clearpay payment information for Salesforce Payments', async () => {
-        const mockOrderWithAfterpay = {
-            ...mockOrder,
-            paymentInstruments: [
-                {
-                    amount: 82.56,
-                    paymentInstrumentId: 'sfp-afterpay',
-                    paymentMethodId: 'Salesforce Payments',
-                    c_paymentReference_type: 'afterpay_clearpay'
-                }
-            ]
-        }
-
-        global.server.use(
-            rest.get('*/orders/:orderId', (req, res, ctx) => {
-                return res(ctx.delay(0), ctx.json(mockOrderWithAfterpay))
-            })
-        )
-
-        renderWithProviders(<MockedComponent />)
-
-        await screen.findByText(mockOrderWithAfterpay.orderNo)
-
-        // Check for Afterpay/Clearpay heading
-        expect(await screen.findByText('Afterpay/Clearpay')).toBeInTheDocument()
-    })
-
-    test('displays iDEAL payment information for Salesforce Payments', async () => {
-        const mockOrderWithIdeal = {
-            ...mockOrder,
-            paymentInstruments: [
-                {
-                    amount: 82.56,
-                    paymentInstrumentId: 'sfp-ideal',
-                    paymentMethodId: 'Salesforce Payments',
-                    c_paymentReference_type: 'ideal',
-                    c_paymentReference_bank: 'rabobank'
-                }
-            ]
-        }
-
-        global.server.use(
-            rest.get('*/orders/:orderId', (req, res, ctx) => {
-                return res(ctx.delay(0), ctx.json(mockOrderWithIdeal))
-            })
-        )
-
-        renderWithProviders(<MockedComponent />)
-
-        await screen.findByText(mockOrderWithIdeal.orderNo)
-
-        // Check for iDEAL heading
-        expect(await screen.findByText('iDEAL')).toBeInTheDocument()
     })
 })