W-19799923: Addressing comments, adding test cases

Author: rvishwanathbhat

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

@@ -44,6 +44,7 @@ import CartItemVariantAttributes from '@salesforce/retail-react-app/app/componen
 import CartItemVariantPrice from '@salesforce/retail-react-app/app/components/item-variant/item-price'
 import MultiShipOrderSummary from '@salesforce/retail-react-app/app/components/multiship/multiship-order-summary'
 import ShipmentDetails from '@salesforce/retail-react-app/app/pages/checkout/partials/shipment-details'
+import SFPaymentsOrderSummary from '@salesforce/retail-react-app/app/pages/checkout/partials/sf-payments-order-summary'
 
 // Hooks
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
@@ -508,7 +509,13 @@ const CheckoutConfirmation = () => {
                                     </Stack>
 
                                     {order.paymentInstruments[0].paymentMethodId ===
-                                    'Salesforce Payments' ? null : (
+                                    'Salesforce Payments' ? (
+                                        order.paymentInstruments[0].c_paymentReference_type ? (
+                                            <SFPaymentsOrderSummary
+                                                paymentInstrument={order.paymentInstruments[0]}
+                                            />
+                                        ) : null
+                                    ) : (
                                         <Stack spacing={1}>
                                             <Heading as="h3" fontSize="sm">
                                                 <FormattedMessage

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

@@ -323,27 +323,65 @@ describe('Salesforce Payments Integration', () => {
         ]
     }
 
-    beforeEach(() => {
+    const mockSFPaymentsOrderWithType = {
+        ...mockOrder,
+        paymentInstruments: [
+            {
+                amount: 82.56,
+                paymentInstrumentId: 'sfp123',
+                paymentMethodId: 'Salesforce Payments',
+                c_paymentReference_type: 'card',
+                c_paymentReference_brand: 'visa',
+                c_paymentReference_last4: '4242'
+            }
+        ]
+    }
+
+    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('does not render payment details for Salesforce Payments orders', async () => {
         renderWithProviders(<MockedComponent />)
 
         await screen.findByText(mockSFPaymentsOrder.orderNo)
 
         // Payment Details section should exist
         expect(screen.getByText('Payment Details')).toBeInTheDocument()
 
-        // No payment method details should be shown for SFP orders
+        // 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('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(mockSFPaymentsOrderWithType))
+            })
+        )
+
+        renderWithProviders(<MockedComponent />)
+
+        await screen.findByText(mockSFPaymentsOrderWithType.orderNo)
+
+        // Payment Details section should exist
+        expect(screen.getByText('Payment Details')).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('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(mockSFPaymentsOrder))
+            })
+        )
+
         renderWithProviders(<MockedComponent />)
 
         await screen.findByText(mockSFPaymentsOrder.orderNo)