Skip to content

@W-18762700: Implemented address autocomplete dropdown using mock addresses#2589

Open
harshini-magesh wants to merge 9 commits intoSalesforceCommerceCloud:developfrom
harshini-magesh:W-18698963.harshini-magesh.create_address_suggestion_dropdown
Open

@W-18762700: Implemented address autocomplete dropdown using mock addresses#2589
harshini-magesh wants to merge 9 commits intoSalesforceCommerceCloud:developfrom
harshini-magesh:W-18698963.harshini-magesh.create_address_suggestion_dropdown

Conversation

@harshini-magesh
Copy link

@harshini-magesh harshini-magesh commented Jun 19, 2025

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)

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...

Localization

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

@harshini-magesh harshini-magesh requested a review from a team as a code owner June 19, 2025 01:10
@cc-prodsec
Copy link
Collaborator

cc-prodsec commented Jun 19, 2025

🎉 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)

@@ -0,0 +1,200 @@
/*
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this file be moved outside of this folder into a separate one under components/
We want to have a dedicated folder for this dropdown, and then import it here

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please follow current pattern in the soure code for file name. It is snake-case, not camel case.


// The port that the local dev server listens on
port: 3000,
port: 8080,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't check change in

export const SHIPPING_COUNTRY_CODES = [
{value: 'CA', label: 'Canada'},
{value: 'US', label: 'United States'}
{ value: 'AF', label: 'Afghanistan' },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm now I wonder if we should change this for PWA kit :/
Maybe let's not since pwa-kit team is only providing CA and US OOTB?


// Sample address data structured like Google Places API
const MOCK_ADDRESSES = [
{
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd assume this file will be moved to a test util situation for mocking Google Places API results

rules: {
required:
countryCode === 'CA'
? 'Please select your province.' // FYI we won't translate this
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why remove this comment?

Copy link
Contributor

@dannyphan2000 dannyphan2000 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're closing this PR since we're checking this change into a feature branch first.
Use https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2614/files

@harshini-magesh harshini-magesh force-pushed the W-18698963.harshini-magesh.create_address_suggestion_dropdown branch from 3b45f3f to 47ef052 Compare July 9, 2025 18:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants