@W-21000338: [BOPIS] Auto-populate billing address with default address (#3602)

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

Author: dannyphan2000

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

@@ -165,10 +165,13 @@ const ShippingAddressSelection = ({
 
     useEffect(() => {
         if (isBillingAddress) {
-            form.reset({...selectedAddress})
-            return
+            // Choose selected address (if any)
+            if (selectedAddress?.address1) {
+                form.reset({...selectedAddress})
+                return
+            }
         }
-        // Automatically select the customer's default/preferred shipping address
+        // Automatically select the customer's default/preferred address as shipping/billing address
         if (customer.addresses) {
             const address = customer.addresses.find((addr) => addr.preferred === true)
             if (address) {
@@ -417,7 +420,6 @@ const ShippingAddressSelection = ({
                         form={form}
                         isBillingAddress={isBillingAddress}
                         hidePhone={isBillingAddress}
-                        hidePreferred={true}
                         submitButtonLabel={submitButtonLabel}
                         formTitleAriaLabel={formTitleAriaLabel}
                     />

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

@@ -44,6 +44,13 @@ jest.mock('react-intl', () => ({
 jest.mock('@salesforce/retail-react-app/app/hooks/use-current-customer')
 jest.mock('@salesforce/commerce-sdk-react')
 
+// Mock AddressFields to avoid react-hook-form complexity in billing address tests
+jest.mock('@salesforce/retail-react-app/app/components/forms/address-fields', () => {
+    return function MockAddressFields() {
+        return <div data-testid="mock-address-fields">Address Fields</div>
+    }
+})
+
 const mockCustomer = {
     addresses: []
 }
@@ -101,6 +108,86 @@ describe('ShippingAddressSelection Component', () => {
 
             expect(screen.queryByText('Submit')).not.toBeInTheDocument()
         })
+
+        test('auto-populates form with selectedAddress when isBillingAddress is true', () => {
+            const mockForm = {
+                handleSubmit: jest.fn(() => (e) => e?.preventDefault?.()),
+                reset: jest.fn(),
+                watch: jest.fn(),
+                register: jest.fn(),
+                control: {},
+                trigger: jest.fn(),
+                formState: {isSubmitting: false, errors: {}}
+            }
+            const selectedAddress = {
+                address1: '456 Billing St',
+                city: 'Billing City',
+                stateCode: 'CA',
+                postalCode: '90210',
+                countryCode: 'US',
+                firstName: 'Jane',
+                lastName: 'Doe'
+            }
+
+            useCurrentCustomer.mockReturnValue({
+                data: {
+                    customerId: 'test-customer-id',
+                    isRegistered: true,
+                    addresses: []
+                },
+                isLoading: false,
+                isFetching: false
+            })
+
+            render(
+                <ShippingAddressSelection
+                    form={mockForm}
+                    isBillingAddress={true}
+                    selectedAddress={selectedAddress}
+                />
+            )
+
+            // Verify the form was reset with the selected billing address
+            expect(mockForm.reset).toHaveBeenCalledWith(selectedAddress)
+        })
+
+        test('auto-populates form with preferred address when no selectedAddress provided', () => {
+            const mockForm = {
+                handleSubmit: jest.fn(() => (e) => e?.preventDefault?.()),
+                reset: jest.fn(),
+                watch: jest.fn(),
+                register: jest.fn(),
+                control: {},
+                trigger: jest.fn(),
+                formState: {isSubmitting: false, errors: {}}
+            }
+            const preferredAddress = {
+                addressId: 'addr-preferred',
+                address1: '789 Preferred St',
+                city: 'Preferred City',
+                stateCode: 'NY',
+                postalCode: '10001',
+                countryCode: 'US',
+                firstName: 'John',
+                lastName: 'Smith',
+                preferred: true
+            }
+
+            useCurrentCustomer.mockReturnValue({
+                data: {
+                    customerId: 'test-customer-id',
+                    isRegistered: true,
+                    addresses: [preferredAddress]
+                },
+                isLoading: false,
+                isFetching: false
+            })
+
+            render(<ShippingAddressSelection form={mockForm} isBillingAddress={true} />)
+
+            // Verify the form was reset with the preferred address
+            expect(mockForm.reset).toHaveBeenCalledWith(preferredAddress)
+        })
     })
 
     describe('Edge Cases', () => {