@W-18762700: Implemented address autocomplete dropdown using mock addresses by harshini-magesh · Pull Request #2614 · SalesforceCommerceCloud/pwa-kit

harshini-magesh · 2025-06-20T18:55:50Z

Description

This PR implements Address Autocomplete functionality for checkout in the PWA Kit storefront.The implementation includes a mock address service that simulates the Google Places API, which can then be replaced with the actual API integration in the future.

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

Added AddressSuggestionDropdown component for displaying address suggestions
Created mockAddressService.js as a placeholder for Google Places API with country filtering
Modified useAddressFields hook to implement address autocomplete logic and debouncing
Updated SHIPPING_COUNTRY_CODES in constants.js to include all countries (hardcoded)

How to Test-Drive This PR

Go to checkout
Click on the address input field and type at least 3 characters
Verify that address suggestions appear in a dropdown
Select a country from the country dropdown and check that only addresses from that country appear
Edge cases: clicking outside the dropdown to close it, keyboard navigation, cut/paste operations

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

cc-prodsec · 2025-06-20T18:56:01Z

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

dannyphan2000

See comments in the earlier PR: #2589

dannyphan2000

testing is needed

…ropriate locations

harshini-magesh · 2025-07-01T16:50:12Z

Test Results

dannyphan2000 · 2025-07-02T18:12:36Z

...emplate-retail-react-app/app/components/address-suggestion-dropdown/useAddressFields.test.js

@@ -0,0 +1,289 @@
+/*


this file should be under the same folder as useAddressFields.jsx

dannyphan2000 · 2025-07-02T18:12:48Z

...-retail-react-app/app/components/address-suggestion-dropdown/address-suggestion-dropdown.jsx

@@ -0,0 +1,200 @@
+/*


file name = index.jsx, same with test file

dannyphan2000 · 2025-07-02T18:13:00Z

.../template-retail-react-app/app/components/address-suggestion-dropdown/addressService.test.js

+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause


do not need this file for this PR, out of scope

dannyphan2000 · 2025-07-02T18:13:30Z

packages/template-retail-react-app/app/mocks/mockAddressService.js

+ * @param {string} countryCode - Country code to filter addresses (e.g., 'US', 'UK', 'AU')
+ * @returns {Promise<Array>} Array of address suggestions
+ */
+export const getAddressSuggestions = async (input, countryCode) => {


why is these functions in the mock

explore using hook/function

or helper/util

dannyphan2000 · 2025-07-02T18:14:42Z

packages/template-retail-react-app/app/mocks/mockAddressService.js

+        address: '147 Broadway, New York, NY 10038, USA',
+        mainText: '147 Broadway',
+        secondaryText: 'New York, NY 10038, USA',
+        country: 'US'


rename the file name

address-suggestions

dannyphan2000

run: npm run lint:fix at project root

dannyphan2000 · 2025-07-07T19:04:43Z

packages/template-retail-react-app/app/components/forms/use-address-fields.test.js

@@ -0,0 +1,289 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.


Rename test file useAddressFields.test.js

dannyphan2000 · 2025-07-07T19:05:12Z

packages/template-retail-react-app/app/utils/address-suggestions.js

+        return parsedFields
+    }
+
+    // Parse secondary text to extract city, state, and postal code


Use multi-line comment

dannyphan2000 · 2025-07-07T19:06:04Z

packages/template-retail-react-app/app/components/forms/useAddressFields.jsx

    provinceOptions
 } from '@salesforce/retail-react-app/app/components/forms/state-province-options'
 import {SHIPPING_COUNTRY_CODES} from '@salesforce/retail-react-app/app/constants'
+import {getAddressSuggestions} from '@salesforce/retail-react-app/app/utils/address-suggestions' // TODO: replace with the actual API call to the address service


From same file, why 2 lines are needed here for the import?

dannyphan2000 · 2025-07-07T19:07:56Z

packages/template-retail-react-app/app/utils/address-suggestions.js

+ */
+export const getAddressSuggestions = async (input, countryCode) => {
+    // Simulate API delay
+    await simulateDelay(300)


Can we put 300 as a CONSTANT in this file?

dannyphan2000 · 2025-07-07T19:08:16Z

packages/template-retail-react-app/app/utils/address-suggestions.js

+ * Simulates API delay similar to real Google Places API
+ * @param {number} delay - Delay in milliseconds
+ */
+const simulateDelay = (delay = 200) => {


Should we do 300 as DEFAULT instead

…sive tests

…omments

…rrent PR, will add back for next PR

…te folders

dannyphan2000

QA is done, verifying that it is working as intended. Great job :)

…resses (#2614) This PR implements Address Autocomplete functionality for checkout in the PWA Kit storefront.The implementation includes a mock address service that simulates the Google Places API, which can then be replaced with the actual API integration in the future.

Implemented address autocomplete dropdown using mock addresses

52653f0

harshini-magesh requested a review from a team as a code owner June 20, 2025 18:55

dannyphan2000 requested changes Jun 23, 2025

View reviewed changes

dannyphan2000 reviewed Jun 23, 2025

View reviewed changes

@W-18762700: Resolved PR comments by renaming and moving files to app…

f919acd

…ropriate locations

dannyphan2000 reviewed Jul 2, 2025

View reviewed changes

dannyphan2000 reviewed Jul 7, 2025

View reviewed changes

harshini-magesh added 7 commits July 9, 2025 11:23

@W-18762700: Add address suggestion dropdown component with comprehen…

410de36

…sive tests

@W-18762700: Moved and renamed files, added tests, and reverted old c…

bb811d3

…omments

@W-18762700: Removed city/state/country field population logic for cu…

9dde590

…rrent PR, will add back for next PR

@W-18762700: properly formatted all files and moved them to appropria…

acd6d99

…te folders

@W-18762700: Renamed test files and updated imports

235f0df

Renamed test file and defined constants

ced4478

Remove unintended files from app/components directory

47ef052

harshini-magesh force-pushed the W-18698963.harshini-magesh.create_address_suggestion_dropdown branch from 3b45f3f to 47ef052 Compare July 9, 2025 18:25

dannyphan2000 approved these changes Jul 9, 2025

View reviewed changes

dannyphan2000 merged commit 01ff2dc into SalesforceCommerceCloud:harshini-magesh.main-address-autocompletion Jul 9, 2025
16 checks passed

dannyphan2000 mentioned this pull request Aug 12, 2025

@W-19319212: Add Address Autocompletion feature branch #3071

Open

12 tasks

dannyphan2000 mentioned this pull request Dec 1, 2025

@W-20276592: Address autocompletion feature #3484

Merged

12 tasks

dannyphan2000 mentioned this pull request Dec 11, 2025

@W-20276592: Address autocompletion feature #3509

Draft

12 tasks

		@@ -0,0 +1,289 @@
		/*
		* Copyright (c) 2021, salesforce.com, inc.

Conversation

harshini-magesh commented Jun 20, 2025

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

Uh oh!

cc-prodsec commented Jun 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎉 Snyk checks have passed. No issues have been found so far.

Uh oh!

dannyphan2000 left a comment

Choose a reason for hiding this comment

Uh oh!

dannyphan2000 left a comment

Choose a reason for hiding this comment

Uh oh!

harshini-magesh commented Jul 1, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dannyphan2000 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dannyphan2000 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cc-prodsec commented Jun 20, 2025 •

edited

Loading