diff --git a/packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-pickup-address.jsx b/packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-pickup-address.jsx
index 7368e79c22..76ffa059ec 100644
--- a/packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-pickup-address.jsx
+++ b/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"
/>
- {displayAddress ? (
-
+ {store ? (
+
+
+
) : isStoreLoading ? (
{
>
)}
- {isPickupOrder && (displayAddress || isStoreLoading) && (
+ {isPickupOrder && (store || isStoreLoading) && (
{
id="pickup_address.title.store_information"
/>
- {displayAddress ? (
-
+ {store ? (
+
) : (
{
postalCode: '94105',
countryCode: 'US',
phone: '555-123-4567',
- storeHours: 'Mon-Fri: 9AM-6PM',
+ c_customerServiceEmail: 'store@example.com',
+ storeHours: 'Mon-Fri: 9AM-6PM
',
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()
+
+ 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()
+
+ 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
, use substring matcher
+ expect(screen.getByText(/Email: store@example\.com/)).toBeInTheDocument()
+ expect(screen.getByText(/Phone: 555-123-4567/)).toBeInTheDocument()
+ })
+ })
})