@W-17443086 Allow store to be selected by Shopper #2187

hajinsuha1 · 2025-01-07T20:21:36Z

Description

Allows users to select a store in StoreLocator. Once a store is selected, the store id, name, and inventoryId are saved in local storage under the key store_${siteId}.

Before:

After:

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

add radio buttons for each store in StoreLocator
save the store id, name, and inventoryId of the selected store in local storage

How to Test-Drive This PR

Navigate to https://cloud-jinsu-env3.mobify-storefront-staging.com/global/en-GB/
Open the developer console (F12) and navigate to the Network tab
Open the store locator by clicking the Store icon on the top right.
Set location to Country: United States, Postal Code: 94086, and press "Find" to see list of stores
Click on a radio button for a store
navigate to Application. Under Storage, click Local Storage and click the name of the site.
Verify there is a key store_RefArchGlobal with a JSON value that contains the store id, store name, and store inventoryId of the selected store
- You can cross check the store id and inventoryId using the response of the /store-search API
Verify the selected store persists when closing and opening the store locator
Verify the store locator selection works in https://cloud-jinsu-env3.mobify-storefront-staging.com/store-locator

A11Y

Verify store info is read when a store is selected

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)

… selected

… is the same

…locator-ui

…b.com:SalesforceCommerceCloud/pwa-kit into W-17443086-select-store-from-store-locator-ui

jeremy-jung1 · 2025-01-14T08:23:06Z

packages/template-retail-react-app/app/components/store-locator-modal/stores-list.jsx

+                                    {store.city}, {store.stateCode ? store.stateCode : ''}{' '}
+                                    {store.postalCode}
+                                </Box>
+                                {store.distance !== undefined ? (


Nit: Could these conditionals be simplified

store.distance !== undefined && ( ... )

bfeister

@hajinsuha1 I have a strong preference that we include a screenshot of "before" and "after" a given change for those changes that modify UI. It's a good "audit trail" to be able to look at a PR (when I look at git history) and see what the intent was behind a given change... do you mind adding screenshots of "before" and "after"?

bfeister · 2025-01-15T22:31:24Z

packages/template-retail-react-app/app/components/store-locator-modal/stores-list.jsx

@@ -5,7 +5,7 @@
 * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
 */

-import React from 'react'


You're missing a CHANGELOG.md update associated with this PR

Added! @bfeister question on the release process. Currently I have the base branch set to a feature branch feature-bopis. Does this make sense or should I just merge the change into develop?

This change does works on it's own, although it doesn't really do anything other than save the store info in local storage

I think it's fine to merge into develop since it works on it's own. It'll help to avoid a "big bang" merge and make that diff smaller

jeremy-jung1 · 2025-01-15T23:39:20Z

FYI: While making the CI pass, you may also find that some tests unrelated to your changes fail the pipeline. Some fixes were pushed recently to develop that fixes it, so if you see that just merge develop into your branches

…locator-ui

packages/template-retail-react-app/app/components/store-locator-modal/stores-list.jsx

bfeister · 2025-01-16T18:08:00Z

packages/template-retail-react-app/app/components/store-locator-modal/stores-list.jsx

+                                        <AccordionPanel mb={6} mt={4}>
+                                            <div
+                                                dangerouslySetInnerHTML={{
+                                                    __html: store?.storeHours


Why dangerouslySetInnerHTML here? Can't we just interpolate the value in the place where we declare vars via useState and similar?

The /store-search API actually returns the store hours as html

Oh wow, SUPER weird, but ok 🚢

…b.com:SalesforceCommerceCloud/pwa-kit into W-17443086-select-store-from-store-locator-ui

…r-ui

bfeister · 2025-01-21T17:49:19Z

packages/template-retail-react-app/app/components/store-locator-modal/stores-list.jsx

+                        <HStack align="flex-start" mt="16px" mb="16px">
+                            <Radio
+                                value={store.id}
+                                mt="1.5px"


(non-blocking) weird to have 1.5px which seems like not a valid value. Reminds me of when Retina displays first came out and there were weird hacks like ~10 years ago. But if it's correct, then fine

ooh good callout! So dug into this a bit, seems like all modern browsers support this while older browsers may round to the nearest whole number.

I also don't see anywhere else in PWA Kit that uses this so just for consistency i'll change it to 1px. UI wise this puts the radio button bottom-aligned with the store name rather than centered which isn't a big deal

hajinsuha1 added 9 commits January 7, 2025 15:14

add radio buttons for each store

05f2e55

save store data in loca storage

1247e54

align radio button to store name

6cf11ec

keep selected store selected

f42ed1c

ensure the description of the store is described when radio button is…

48299f6

… selected

add unit tests

469ec2c

lint

8bd458e

fix margin

6728456

fix margin so that if there is a view more or isn't the bottom margin…

5faed18

… is the same

hajinsuha1 changed the base branch from develop to feature-bopis January 10, 2025 16:36

hajinsuha1 requested a review from bendvc January 10, 2025 18:17

Merge branch 'feature-bopis' into W-17443086-select-store-from-store-…

375e8ae

…locator-ui

hajinsuha1 marked this pull request as ready for review January 10, 2025 18:17

hajinsuha1 requested a review from a team as a code owner January 10, 2025 18:17

hajinsuha1 added 2 commits January 10, 2025 13:18

fix bug with window being undefined in the store-locator page

868d129

Merge branch 'W-17443086-select-store-from-store-locator-ui' of githu…

abc3421

…b.com:SalesforceCommerceCloud/pwa-kit into W-17443086-select-store-from-store-locator-ui

hajinsuha1 requested a review from jeremy-jung1 January 10, 2025 18:27

jeremy-jung1 reviewed Jan 14, 2025

View reviewed changes

hajinsuha1 requested review from bfeister and removed request for bendvc January 14, 2025 19:03

simplif null checks in store-lists

d73464d

hajinsuha1 requested a review from jeremy-jung1 January 15, 2025 15:13

bfeister requested changes Jan 15, 2025

View reviewed changes

bfeister reviewed Jan 15, 2025

View reviewed changes

hajinsuha1 and others added 2 commits January 16, 2025 10:26

update changelog

abbb3b6

Merge branch 'feature-bopis' into W-17443086-select-store-from-store-…

61bd914

…locator-ui

hajinsuha1 requested a review from bfeister January 16, 2025 16:13

bfeister reviewed Jan 16, 2025

View reviewed changes

packages/template-retail-react-app/app/components/store-locator-modal/stores-list.jsx Outdated Show resolved Hide resolved

bfeister reviewed Jan 16, 2025

View reviewed changes

hajinsuha1 changed the base branch from feature-bopis to develop January 16, 2025 18:29

use sx instead of style

a602253

hajinsuha1 requested a review from bfeister January 17, 2025 19:26

hajinsuha1 and others added 3 commits January 17, 2025 14:27

Merge branch 'W-17443086-select-store-from-store-locator-ui' of githu…

fd8c67c

…b.com:SalesforceCommerceCloud/pwa-kit into W-17443086-select-store-from-store-locator-ui

Merge branch 'develop' into W-17443086-select-store-from-store-locato…

bdf378d

…r-ui

Merge branch 'develop' into W-17443086-select-store-from-store-locato…

e79f06e

…r-ui

bfeister reviewed Jan 21, 2025

View reviewed changes

bfeister previously approved these changes Jan 21, 2025

View reviewed changes

jeremy-jung1 previously approved these changes Jan 21, 2025

View reviewed changes

change marginTop of radio button from 1.5px to 1px

33a631f

hajinsuha1 dismissed stale reviews from jeremy-jung1 and bfeister via 33a631f January 21, 2025 18:46

jeremy-jung1 approved these changes Jan 21, 2025

View reviewed changes

bfeister approved these changes Jan 22, 2025

View reviewed changes

hajinsuha1 merged commit 3adb5ca into develop Jan 22, 2025
29 checks passed

hajinsuha1 deleted the W-17443086-select-store-from-store-locator-ui branch January 22, 2025 14:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@W-17443086 Allow store to be selected by Shopper #2187

@W-17443086 Allow store to be selected by Shopper #2187

hajinsuha1 commented Jan 7, 2025 •

edited

Loading

jeremy-jung1 Jan 14, 2025

bfeister left a comment •

edited

Loading

bfeister Jan 15, 2025

hajinsuha1 Jan 16, 2025

bfeister Jan 16, 2025

jeremy-jung1 commented Jan 15, 2025 •

edited

Loading

bfeister Jan 16, 2025

hajinsuha1 Jan 17, 2025

bfeister Jan 21, 2025

bfeister Jan 21, 2025

hajinsuha1 Jan 21, 2025

@W-17443086 Allow store to be selected by Shopper #2187

@W-17443086 Allow store to be selected by Shopper #2187

Conversation

hajinsuha1 commented Jan 7, 2025 • edited Loading

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

Choose a reason for hiding this comment

bfeister left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeremy-jung1 commented Jan 15, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hajinsuha1 commented Jan 7, 2025 •

edited

Loading

bfeister left a comment •

edited

Loading

jeremy-jung1 commented Jan 15, 2025 •

edited

Loading