This PR creates the Store Locator feature for the template retail react app. The store locator is available in the app via a Modal, which is accessible by the Store Icon on the top right of the app in the header, and via a page, which is available by going to the Store Locator at the footer of the Home page or typing /store-locator after the app URL.
The store locator also has a feature flag to account for merchants that sell only online.
This PR is a culmination of PRs previously approved:
(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.
(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.
Testing when the merchant has removed the country dropdown (Use only the default country)
(step14) Go to https://runtime-admin-n18.mobify-storefront.com and open store locator. See that there is no country dropdown, but there is a default list of stores. These are stores in the vicinity of the default location that merchant specified
(step15) Put in 24103 in the Postal Code and see that it gives results around the location in the default country of Germany.
Testing feature flag
(step16) Start the app locally, and change the STORE_LOCATOR_IS_ENABLED flag to false in app/constants.js. See that the store icon in the header, the store locator link in the footer, and the store locator link in the mobile view the drawer menu do not exist anymore.
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
Description
This PR creates the Store Locator feature for the template retail react app. The store locator is available in the app via a Modal, which is accessible by the Store Icon on the top right of the app in the header, and via a page, which is available by going to the Store Locator at the footer of the Home page or typing
/store-locatorafter the app URL.The store locator also has a feature flag to account for merchants that sell only online.
This PR is a culmination of PRs previously approved:
Types of Changes
Changes
How to Test-Drive This PR
Load More testing
Use my location testing
Testing the store locator page
mobify_server_onlyto the URL to make https://runtime-admin-n16.mobify-storefront.com/global/en-GB/store-locator?mobify_server_only and see that the stores are listed around the default location.Testing when the merchant has removed the country dropdown (Use only the default country)
24103in the Postal Code and see that it gives results around the location in the default country of Germany.Testing feature flag
STORE_LOCATOR_IS_ENABLEDflag tofalseinapp/constants.js. See that the store icon in the header, the store locator link in the footer, and the store locator link in the mobile view the drawer menu do not exist anymore.Checklists
General
Accessibility Compliance
You must check off all items in one of the follow two lists:
or...
Localization