@W-20276592: Address autocompletion feature by dannyphan2000 · Pull Request #3484 · SalesforceCommerceCloud/pwa-kit

dannyphan2000 · 2025-11-27T00:01:44Z

Merging address autocompletion feature to develop branch.

See original PR: #3071

Description

Merging address autocompletion feature to develop branch. The changes included are from previously approved PRs.
#2614
#2767
#2886
#2981
#3209

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

New environment variable (GOOGLE_CLOUD_API_KEY) that allows customers to enable the address autocompletion feature in checkout (and any address fields)
Introduction of Shopper Configuration SCAPI endpoint and usage in checkout
Address suggestions from Google Maps Platform are displayed to the user upon 3 or more characters in the input field
Address autocompletion for address fields upon choosing an address suggestion from the dropdown

How to Test-Drive This PR

Add an item to the cart and go to checkout. Fill out your contact information to go to shipping address section.
Country is auto-selected (United States), can change if you want.
Start typing 3 or more characters in the Address field.
Address Suggestions dropdown should be displayed to the buyer, with an option to temporarily close it (X icon).
Upon choosing an address suggestion, the address fields should be automatically populated.
Try the same with billing address (specify that it's different from shipping address).
Checkout can be completed as expected.

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-11-27T00:02:03Z

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

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

- Implemented address autocomplete dropdown using mock addresses - Auto-fill address on choosing suggestion from dropdown - Added Google API integration - Sourced GCP API Key from Configuration API - Added ShopperConfigurations hook for API key management - Fixed accessibility, cleanup, and introduced caching by component - Added translations and various fixes

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

vcua-mobify

I'm new to this PR so apologies if the questions I'm asking have already been asked in the previous PRs.

vcua-mobify · 2025-12-10T00:50:59Z

packages/commerce-sdk-react/src/auth/index.ts

+    dnt: {
+        storageType: 'local',
+        key: 'dnt'
+    },


What's the reason for the changes to auth.index.ts?

@sf-mkosak mentioned that this was needed with the new SCAPI changes in updating to the latest commerce-sdk-isomorphic version

vcua-mobify · 2025-12-10T00:56:24Z

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

+const COUNTRY_CODE_MAP = {
+    USA: 'US',
+    Canada: 'CA'
+}


Should this pull from the locales in config/sites.js?

I image that other projects with other countries will be updating this and the supported countries will be different depending on the site.

I believe we had this conversation before while reviewing the original PR - had to make another PR due to CLA signature issues. In the current PWA Kit codebase, there is precedent for hard coding US / CA, regardless of sites.

Thanks for reminding me of that! That was a while ago.

Since there was precedent for having hard coded country codes before this work, I won't treat this as a blocker for this release.

Is there a follow up ticket for eventually cleaning up the hard coded US / CA?

vcua-mobify · 2025-12-10T01:07:49Z

packages/template-retail-react-app/app/pages/checkout/util/google-api-provider.js

We're adding an integration to Google API. But what if a project doesn't want to use Google?
Do we have docs explaining how customers can wire in other systems in place of Google?

For now, the address autocompletion feature is only powered by Google Maps Platform, no plan to support other providers is in place. Customers will have to build their own implementation if they do not want address autocomplete with Google.

vcua-mobify · 2025-12-10T22:28:45Z

Just leaving a note here for tracking purposes:

I discussed the PR with @dannyphan2000 since I could not get the address autocomplete to appear on my local.
For now, to test this feature we need to use a production realm where the Enable Google Address Autocomplete feature toggle has been enabled.

Currently on non-prod environments the call from ShopperConfigurations returns a null google api key.

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

vcua-mobify

I've verified that with the most recent change, I can now set a custom Google API key via env var on local and see that the address autocomplete UI appears in checkout when filling in the address.

sf-mkosak · 2025-12-11T21:59:24Z

packages/template-retail-react-app/app/pages/checkout/util/google-api-provider.js

-    return !platformProvidedKey
-        ? null
-        : getConfig()?.app?.googleCloudAPI?.apiKey || platformProvidedKey
+    return platformProvidedKey || null


do we even need the || then?

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

* @W-20276592: Address autocompletion feature - Implemented address autocomplete dropdown using mock addresses - Auto-fill address on choosing suggestion from dropdown - Added Google API integration - Sourced GCP API Key from Configuration API - Added ShopperConfigurations hook for API key management - Fixed accessibility, cleanup, and introduced caching by component - Added translations and various fixes * @W-20276592: clean up Signed-off-by: d.phan <d.phan@salesforce.com> * update API key rules Signed-off-by: d.phan <d.phan@salesforce.com> * quick fix Signed-off-by: d.phan <d.phan@salesforce.com> --------- Signed-off-by: d.phan <d.phan@salesforce.com>

dannyphan2000 marked this pull request as ready for review December 1, 2025 17:51

dannyphan2000 requested a review from a team as a code owner December 1, 2025 17:51

dannyphan2000 requested a review from sf-mkosak December 1, 2025 18:00

sf-mkosak previously approved these changes Dec 1, 2025

View reviewed changes

dannyphan2000 dismissed sf-mkosak’s stale review via 1854c3d December 2, 2025 18:42

dannyphan2000 added 2 commits December 9, 2025 15:13

@W-20276592: clean up

0cc84e4

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

dannyphan2000 force-pushed the feature/address-autocompletion-MAIN branch from 1854c3d to 0cc84e4 Compare December 9, 2025 20:15

vcua-mobify reviewed Dec 10, 2025

View reviewed changes

update API key rules

9d9ebf6

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

vcua-mobify previously approved these changes Dec 11, 2025

View reviewed changes

sf-mkosak reviewed Dec 11, 2025

View reviewed changes

sf-mkosak previously approved these changes Dec 11, 2025

View reviewed changes

quick fix

2eece5d

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

dannyphan2000 dismissed stale reviews from sf-mkosak and vcua-mobify via 2eece5d December 11, 2025 22:09

dannyphan2000 requested review from sf-mkosak and vcua-mobify December 11, 2025 22:10

vcua-mobify approved these changes Dec 11, 2025

View reviewed changes

sf-mkosak approved these changes Dec 11, 2025

View reviewed changes

Merge branch 'develop' into feature/address-autocompletion-MAIN

fea5418

dannyphan2000 merged commit da5245b into develop Dec 12, 2025
42 checks passed

dannyphan2000 deleted the feature/address-autocompletion-MAIN branch December 12, 2025 00:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@W-20276592: Address autocompletion feature#3484

@W-20276592: Address autocompletion feature#3484
dannyphan2000 merged 5 commits intodevelopfrom
feature/address-autocompletion-MAIN

dannyphan2000 commented Nov 27, 2025 •

edited

Loading

Uh oh!

cc-prodsec commented Nov 27, 2025 •

edited

Loading

Uh oh!

vcua-mobify left a comment

Uh oh!

vcua-mobify Dec 10, 2025

Uh oh!

dannyphan2000 Dec 10, 2025

Uh oh!

vcua-mobify Dec 10, 2025

Uh oh!

dannyphan2000 Dec 10, 2025

Uh oh!

vcua-mobify Dec 10, 2025

Uh oh!

vcua-mobify Dec 10, 2025

Uh oh!

dannyphan2000 Dec 10, 2025

Uh oh!

vcua-mobify commented Dec 10, 2025

Uh oh!

vcua-mobify left a comment

Uh oh!

sf-mkosak Dec 11, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

dannyphan2000 commented Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

Uh oh!

cc-prodsec commented Nov 27, 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!

vcua-mobify 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vcua-mobify commented Dec 10, 2025

Uh oh!

vcua-mobify left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dannyphan2000 commented Nov 27, 2025 •

edited

Loading

cc-prodsec commented Nov 27, 2025 •

edited

Loading