@W-19319212: Add Address Autocompletion feature branch
Merging address autocompletion feature to develop branch.
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
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)
- 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...
- [ ] 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
- [x] Changes include a UI text update in the Retail React App (which requires translation)
:white_check_mark: Snyk checks have passed. No issues have been found so far.
| Status | Scanner | Total (0) | ||||
|---|---|---|---|---|---|---|
| :white_check_mark: | Open Source Security | 0 | 0 | 0 | 0 | 0 issues |
| :white_check_mark: | Licenses | 0 | 0 | 0 | 0 | 0 issues |
:computer: Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.
Thanks for the contribution! It looks like @harshini-magesh is an internal user so signing the CLA is not required. However, we need to confirm this.