@W-15621253 Initial Store Locator Implementation

[jeremy-jung1]

Description

W-15621253

This is the initial Store Locator implementation, which is without pagination and linking of geolocation web API. The initial implementation includes:

1. the handling of manual geolocation input
2. default country and postal code and user specified store locator countries
3. the listing of corresponding stores sorted by distance away
4. mobile view
5. a store locator page, on top of the modal, that can be navigated to via URL for SEO

The PR will merge into a store locator base branch, to which subsequent PRs will be merged until the store locator is ready for shipping. Subsequent PRs will link the geolocation web API to the store locator and enable pagination for the store locator.

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

• (change1) Implemented initial store locator page and modal
• (change2) Linked the existing store locator link in the footer to the page
• (change3) Added store locator icon at the header

How to Test-Drive This PR

• (step1) Ensure all tests pass with npm run test
• (step 2) Go to https://runtime-admin-n16.mobify-storefront.com/ and click on the store icon on the top right of the page to open store locator modal
• (step 3) See that the list of stores are sorted by distance away
• (step 4) See that clicking View More opens an accordion to view store hours, if specified
• (step 4) Change location to Country: United States, Postal Code: 94086, and press "Find" to see that new stores are now listed
• (step 5) Close the modal, and open it again to see that the last submitted user input is saved.
• (step 7) Go to https://runtime-admin-n16.mobify-storefront.com/store-locator for the page version of the store locator

Checklists

General

• [x] 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...

• [x] 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)

[vmarta]

@jeremy-jung1 FYI I've left some comments. But I see that you've just made new code changes. I'll review them later at another time.

[jeremy-jung1]

Before deleting the translations in this PR for professional translation, I took a screenshot of German locale store locator to show that the store locator is translatable.

[vcua-mobify]

Not a part of this ticket, but I would be interested in seeing how we handle saving the shopper's selected store in the future since it might have some implication on hybrid (ie. how do we share the selected store from PWA to SFRA?).

Could you loop me in once we get to that part of the epic?