@W-21000344: [BOPIS] Pickup address component enhancement (#3607)

Signed-off-by: d.phan <d.phan@salesforce.com>

Author: dannyphan2000

packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-pickup-address.jsx

@@ -13,7 +13,7 @@ import {
     ToggleCard,
     ToggleCardSummary
 } from '@salesforce/retail-react-app/app/components/toggle-card'
-import AddressDisplay from '@salesforce/retail-react-app/app/components/address-display'
+import StoreDisplay from '@salesforce/retail-react-app/app/components/store-display'
 
 // Hooks
 import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout-one-click/util/checkout-context'
@@ -38,8 +38,6 @@ const PickupAddress = () => {
     )
     const pickupShipment = shipmentsWithItems.find((s) => isPickupShipment(s))
 
-    const selectedShippingAddress = pickupShipment?.shippingAddress
-
     // Check if basket is a pickup order
     const isPickupOrder = !!pickupShipment
     const storeId = pickupShipment?.c_fromStoreId
@@ -54,6 +52,7 @@ const PickupAddress = () => {
         }
     )
     const store = storeData?.data?.[0]
+    // Build address object for shipping API update (required for order processing)
     const pickupAddress = {
         address1: store?.address1,
         city: store?.city,
@@ -64,8 +63,6 @@ const PickupAddress = () => {
         lastName: 'Pickup',
         phone: store?.phone
     }
-    // Prefer store-derived address; only fall back to shipment shippingAddress if store unavailable
-    const displayAddress = pickupAddress || selectedShippingAddress
 
     const submitAndContinue = async (address) => {
         setIsLoading(true)
@@ -111,8 +108,21 @@ const PickupAddress = () => {
                             id="pickup_address.title.store_information"
                         />
                     </Text>
-                    {displayAddress ? (
-                        <AddressDisplay address={displayAddress} />
+                    {store ? (
+                        <Box mb={4}>
+                            <StoreDisplay
+                                store={store}
+                                showDistance={true}
+                                showStoreHours={true}
+                                showPhone={true}
+                                showEmail={true}
+                                nameStyle={{
+                                    fontSize: 'sm',
+                                    fontWeight: 'normal'
+                                }}
+                                textSize="sm"
+                            />
+                        </Box>
                     ) : isStoreLoading ? (
                         <Text>
                             <FormattedMessage
@@ -133,16 +143,27 @@ const PickupAddress = () => {
                     </Box>
                 </>
             )}
-            {isPickupOrder && (displayAddress || isStoreLoading) && (
+            {isPickupOrder && (store || isStoreLoading) && (
                 <ToggleCardSummary>
                     <Text fontWeight="bold" fontSize="md" mb={2}>
                         <FormattedMessage
                             defaultMessage="Store Information"
                             id="pickup_address.title.store_information"
                         />
                     </Text>
-                    {displayAddress ? (
-                        <AddressDisplay address={displayAddress} />
+                    {store ? (
+                        <StoreDisplay
+                            store={store}
+                            showDistance={true}
+                            showStoreHours={true}
+                            showPhone={true}
+                            showEmail={true}
+                            nameStyle={{
+                                fontSize: 'sm',
+                                fontWeight: 'normal'
+                            }}
+                            textSize="sm"
+                        />
                     ) : (
                         <Text>
                             <FormattedMessage

packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-pickup-address.test.js

@@ -30,7 +30,8 @@ jest.mock('@salesforce/commerce-sdk-react', () => {
                         postalCode: '94105',
                         countryCode: 'US',
                         phone: '555-123-4567',
-                        storeHours: 'Mon-Fri: 9AM-6PM',
+                        c_customerServiceEmail: 'store@example.com',
+                        storeHours: '<p>Mon-Fri: 9AM-6PM</p>',
                         storeType: 'retail'
                     }
                 ]
@@ -74,10 +75,11 @@ jest.mock('@salesforce/retail-react-app/app/hooks/use-current-basket', () => ({
                     shipmentId: 'me',
                     shipmentTotal: 25.17,
                     shippingStatus: 'not_shipped',
-                    shippingTotal: 5.99
+                    shippingTotal: 5.99,
+                    c_fromStoreId: 'store-123',
+                    c_deliveryType: 'pickup'
                 }
-            ],
-            c_fromStoreId: 'store-123'
+            ]
         },
         derivedData: {
             hasBasket: true,
@@ -125,8 +127,18 @@ describe('PickupAddress', () => {
         expect(screen.getByText('Store Information')).toBeInTheDocument()
         expect(screen.getByText('Continue to Payment')).toBeInTheDocument()
 
+        // Verify store name is displayed
+        expect(screen.getByText('Test Store')).toBeInTheDocument()
+
+        // Verify store address is displayed
         expect(screen.getByText('123 Main Street')).toBeInTheDocument()
         expect(screen.getByText('San Francisco, CA 94105')).toBeInTheDocument()
+
+        // Verify Store Hours accordion is present
+        expect(screen.getByText('Store Hours')).toBeInTheDocument()
+
+        // Verify Store Contact Info accordion is present
+        expect(screen.getByText('Store Contact Info')).toBeInTheDocument()
     })
 
     test('submits pickup address and continues to payment', async () => {
@@ -158,4 +170,36 @@ describe('PickupAddress', () => {
             })
         })
     })
+
+    test('displays store hours when accordion is expanded', async () => {
+        const {user} = renderWithProviders(<PickupAddress />)
+
+        await waitFor(() => {
+            expect(screen.getByText('Store Hours')).toBeInTheDocument()
+        })
+
+        // Click to expand the Store Hours accordion
+        await user.click(screen.getByText('Store Hours'))
+
+        await waitFor(() => {
+            expect(screen.getByText('Mon-Fri: 9AM-6PM')).toBeInTheDocument()
+        })
+    })
+
+    test('displays store contact info when accordion is expanded', async () => {
+        const {user} = renderWithProviders(<PickupAddress />)
+
+        await waitFor(() => {
+            expect(screen.getByText('Store Contact Info')).toBeInTheDocument()
+        })
+
+        // Click to expand the Store Contact Info accordion
+        await user.click(screen.getByText('Store Contact Info'))
+
+        await waitFor(() => {
+            // Email and phone are in the same element separated by <br />, use substring matcher
+            expect(screen.getByText(/Email: store@example\.com/)).toBeInTheDocument()
+            expect(screen.getByText(/Phone: 555-123-4567/)).toBeInTheDocument()
+        })
+    })
 })