feat: store locator

[shauke]

PR Type

[x] Feature

What Is the Current Behavior?

Currently the PWA does not provide Store Finder functionality similar to the one in the Responsive Starter Store
https://pwa-review.northeurope.cloudapp.azure.com/INTERSHOP/web/WFS/inSPIRED-inTRONICS_Business-Site/en_US/-/USD/ViewStoreFinder-Start

Issue Number: Closes #754

What Is the New Behavior?

Store Finder functionality is available and configurable via feature toogle.
In addition Google Maps integration can be activated.

Store Finder with Google Maps integration is activated by default for the B2B theme
http://pwa-gh-review-911.azurewebsites.net/store-finder

Store Finder without Google Maps integration is the default configuration for the B2C theme
http://pwa-gh-review-911.azurewebsites.net/store-finder;theme=b2c

Does this PR Introduce a Breaking Change?

[x] No

Other Information

AB#70748

To Dos

• IAD/VD review
• Store Finder or Store Locator link integration
• code review
• documentation
• waiting for REST API "'stores' resource should return custom attributes 'Latitude' and 'Longitude'"
• remove mock data and docker ignore adaption
• remove maps key from env
• scroll behavior parent
• rebase for git credit
• handle "no results" response
• update linting to ESLint
• api key as env var
• ability to provide highlight icon
• fix tests

[iwiederhold]

Here are the paddings for the new footer-top:
div class="footer-top" style="
padding-top: 20px;
padding-bottom: 20px;"

[MoritzRS]

The Google Maps API does allow customization and styling. It is possible to allow or disallow controlls (zoom, map type, street view, etc.), set min and max zoom level of the map, place custom markers on the map by providing an image or even stylizing the map itself.

[M-Behr]

I like the google maps integration 👍 Nice feature!

We would like to change a little bit the user experience design. Here are the IAD/VD remarks:

• Small text changes in Store finder introduction (see designs below).
• Space between paragraph and store finder form is too large. I think it should be 15px between the explanation "Simply select a country..." and the form (see registration form as example).
• Typo: ZIP/Postal Code (see labels in registration form - each word starts with capital letters, no blank character after /)
• "Results of store location finder" heading is no longer displayed - only a counter for the results (paragraph like "no-search-result-title").
• Display a list of stores on the left side (with scrollbar) and map is displayed on right side.
• If user hovers over a list item (background-color: #e6e6e6), the pin is highlighted (highlight definition is in progress). Triggered by click on mobile devices.
• Please display the e-mail in the store contact information.
• Use icons for phone, fax and e-mail (fa-phone, fa-fax, fa-envelope).
• Phone and e-mail are links (tel: and mailto:) so that users can contact the store immediately without copying the number or e-mail address.
• Phone view: Display store list below map (see designs below).

Desktop:

Phone:

No map:

No results:

[iwiederhold]

Customizing the map marker:

You can change the pins to another images

for all stores that have been found

for the selected store (hover and selected)

You can find these icons in Google Maps.
shoppingcart_pinlet-2-medium.png&highlight=4285f4,5491f5,ffffff
spotlight_pin_v4_dot-1-small.png&highlight=c5221f,ea4335,b31412

[iwiederhold]

Great work! THX

[M-Behr]

It looks fantastic. I would like to change one last things:

• Use the default margin of 16px bottom for paragraph text. I think the PWA uses only "p" (see contact form) or "p class=ng-star-inserted" (see my account pages) most of the cases. Your paragraph uses class="my-4" with 24px margin top and bottom (see screenshot below). @MoritzRS: Why you use this class? Is it something special?
• Please use the solid envelope as icon for e-mail (i class="fas fa-envelope"). I used the false icon for the design. Sorry, this was my mistake.
• If you click on a pin on the map, then the list should move to the selected item on the left side.
• Please change the selection of a list item from hover to click on desktop view. During the review, the behavior feels unsteady and the user losses control (example: I scroll through the list and then the selected pin is changed without me wanting it). It feels much better on the current behavior in mobile view. That's why I decided to make this change.

[MoritzRS]

Scrolling itself should be supported on all modern browsers (uses Element.scrollTo). However smoothing via option.behavior might not be supported on every browser. Works fine on Chrome and Firefox but couldn't use smooth on Epiphany (WebKit based) so Safari might also not be working as well. Depending on the use case, polyfills might be needed.

[M-Behr]

It looks and works very well.
Currently the list items look not clickable.

Therefore we have to add 2 little things:

• The hand as mouse pointer, which indicates an action. You can see it when you hover over buttons, links or pins.
• And a hover styling is needed (background color e6e6e6).

These are the last changes, I promise! :)

[M-Behr]

Great job 👍