pwa-kit icon indicating copy to clipboard operation
pwa-kit copied to clipboard

@W-20276592: Address autocompletion feature

Open dannyphan2000 opened this issue 1 week ago • 1 comments

Merging address autocompletion feature to develop branch.

See original PR: https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3071

Description

Merging address autocompletion feature to develop branch. The changes included are from previously approved PRs. https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2614 https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2767 https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2886 https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2981 https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3209

Screenshot 2025-11-21 at 11 47 37 AM

Types of Changes

  • [ ] Bug fix (non-breaking change that fixes an issue)
  • [x] 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

  • [x] Changes are covered by test cases
  • [x] 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...

Localization

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

dannyphan2000 avatar Dec 11 '25 20:12 dannyphan2000