@W-15628148 Implement Pagination and Integrate Web Geolocation API

[jeremy-jung1]

W-15628148 and W-15621326

Description

Added "Load More" button functionality to store locator and integrated native web geolocation API to "Use my Location" function. Made default of country selector, if defined in constants.js, to show "Select a country". Updated UI text to remove distance and show information on geolocation.

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

• (change1)

How to Test-Drive This PR

• (step1) Go to https://runtime-admin-n16.mobify-storefront.com/ to check out the deployment
• (step2) Open the store locator modal by pressing the icon on the top right of the home page
• (step3) See that results from the default geolocation set by the merchant is shown. The input fields have an empty postal code and a "Select a country" for the country selector. (NOTE: you will see results from different countries because for testing purposes I have set the distance to look for stores around a given location to be the API maximum)

  Load More testing

• (step4) Scroll down and press load more to see that 10 more stores are loaded
• (step5) Keep pressing load more until there are no more stores in the list

  Use my location testing

• (step6) Press use my location to find the permission dropdown from your browser show up. Allow sharing.
• (step7) See that UI text changes to "Viewing stores near your location", and shows the store closest to you first.
• (step8) Close and open the modal to see that the modal keeps your last input (i.e. before close if you had pressed "Use My Location" it will show you location around you. If you had given a manual input, e.g. Germany 24103, then it will show you location around there.

  Testing the store locator page

• (step9) Go to https://runtime-admin-n16.mobify-storefront.com/global/en-GB/store-locator
• (step10) Now that you have your location sharing enabled, see that it shows you stores around you. Test the Load More functionality like in step4-step5
• (step11) The behavior of the store locator page and the modal are different. Closing the store locator page and opening does not result in the remembering of previous input. Check that this is the case.
• (step12) Alternate between providing manual input and pressing "Use my Location" to test the functionalities.

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)

[salesforce-cla[bot]]

Thanks for the contribution! It looks like @jeremy-jung1 is an internal user so signing the CLA is not required. However, we need to confirm this.

[kevinxh]

For some reason the linter isn't working, i'm surprised there is var in the code and tests are passing... let's only use let or const. No var in the code base.

[vmarta]

When I opened the modal, I could see some errors/warnings in the browser console. Let's fix them, because otherwise that won't leave a good impression to other developers.