@W-17442945 BOPIS Shop the Store PLP and PDP SteelThread #2226

hajinsuha1 · 2025-01-28T18:34:25Z

Description

PLP: Adds a checkbox refinement to filter products by store availability
PDP: Adds text on store availability

This PR is a SteelThread for updating the PLP and PDP with base functionality of "Shop the Store" to verify the Shopper API's didn't require any changes. We have separate stories for finalizing the design for the PLP and PDP.

W-17442945
Figma PDP "BOPIS"
Figma PLP "BOPIS"

PLP

Before

After

PDP

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

Update ProductView to include a StoreAvailabilityText that displays whether the item is in stock at the selected store
Add a useSelectStore custom hook for handling setting and getting store info from local storage
Update ProductDetail to pass the inventoryId of the selected store in the parameters of useProduct
Update ProductList to include a StoreAvailabilityRefinement that allows users to filter products by store

How to Test-Drive This PR

For this work, i've updated zzrf_001 and added a new inventory inventory_m_store_store12 and assigned it to the San Mateo Retail Store in BM.

Latest changes have been deployed to https://cloud-jinsu-env3.mobify-storefront-staging.com/

No Store Selected

Navigate to https://cloud-jinsu-env3.mobify-storefront-staging.com/
Click on a product category and verify there is a new Shop by Availability accordian panel with a checkbox item with the text Select Store
Click on a product and verify there is text under the quanity that displays In Stock at Select Store

Store with no inventoryId Selected

PLP

TODO as part of W-17443392

PDP

Navigate to any product
Verify under quanitity "Out of Stock at Palo Alto Retail Store" is displayed

Store with inventoryId Selected

PLP

Navigate to https://cloud-jinsu-env3.mobify-storefront-staging.com/global/en-GB/category/womens
Open the Store Locator modal, select United States for the country and enter 94086 for the postal code.
Select San Mateo Retail Store
Open the Developer Console
Under "Shop by Availability" select "San Mateo Retail Store"
Verify only 3 products are now displayed
Verify a /product-search API call is made with the query param: ?refine: ilids=inventory_m_store_store12
- Link to inventory records in zzrf_001
Uncheck "San Mateo Retail Store"
Verify all the products are displayed and a /product-search API call is made without the query param: ?refine: ilids=inventory_m_store_store12

PDP

Navigate to a product not in the inventory list: https://cloud-jinsu-env3.mobify-storefront-staging.com/global/en-GB/product/TG786M?color=0001TG786214
Verify under quanitity "Out of Stock at San Mateo Retail Store" is displayed
Navigate to a product in the inventory list and has stock: https://cloud-jinsu-env3.mobify-storefront-staging.com/global/en-GB/product/25599636M?color=JJ887XX&pid=013742000191M
Verify under quanitity "In Stock at San Mateo Retail Store" is displayed

Other Tests

Verify the store name re-renders immediately on the PDP and PLP when the selection changes via the modal

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)

…elthread

…com:SalesforceCommerceCloud/pwa-kit into W-17442945-bopis-shop-the-store-steelthread

…ed in the context

hajinsuha1 · 2025-01-30T18:39:13Z

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

 export const StoreLocatorContext = createContext()
+export const StoreLocatorProvider = ({children}) => {
+    const storeLocator = useStoreLocator()
+
+    return (
+        <StoreLocatorContext.Provider value={storeLocator}>{children}</StoreLocatorContext.Provider>
+    )
+}
+
+StoreLocatorProvider.propTypes = {
+    children: PropTypes.node.isRequired
+}


would it be preferred to move this to the contexts/index.js?

hajinsuha1 · 2025-01-30T18:39:54Z

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

+StoreLocatorProvider.propTypes = {
+    children: PropTypes.node.isRequired
+}
+
 export const useStoreLocator = () => {


any preference on leaving this code here or moving it to a separate file in hooks/use-store-locator?

Sounds good. That would make file changes to the store locator modal more easy

…dStore is missing inventoryId

hajinsuha1 · 2025-01-30T21:58:39Z

packages/template-retail-react-app/app/components/store-availability-text/index.jsx

+                        />
+                    )}
+
+                    <Link>{selectedStore.name}</Link>


it's possible to create a store with no name. Should we throw an error in that case?

If a store is created with no name, that should be a concern on the BM/store creation side and not an error that the shoppers' UX should have to deal with. I think it would be fine to keep it simple and just display what the API gives.

jeremy-jung1 · 2025-02-04T06:32:20Z

I'm seeing the DNT notification pop up again and again. Can you try doing npm run build on commerce-sdk-react and deploying the site again?

I don't see this issue locally but just making sure

hajinsuha1 · 2025-02-04T14:21:32Z

I'm seeing the DNT notification pop up again and again. Can you try doing npm run build on commerce-sdk-react and deploying the site again?

I don't see this issue locally but just making sure

@jeremy-jung1 thanks for catching that! I've redeployed the site and it looks like the DNT pop up is working now

jeremy-jung1

LGTM. Test drive works for me too

hajinsuha1 and others added 9 commits January 27, 2025 13:53

initial PLP implementation

051d825

initial implementation PDP

8cad090

check inventoryId is in list of productInventories for checking inStock

82a91f3

Merge branch 'feature-bopis' into W-17442945-bopis-shop-the-store-ste…

626b051

…elthread

clean up StoreAvailabilityText

c8bcbeb

add unit tests for StoreAvailabilityRefinement

304346a

Merge branch 'W-17442945-bopis-shop-the-store-steelthread' of github.…

47322e7

…com:SalesforceCommerceCloud/pwa-kit into W-17442945-bopis-shop-the-store-steelthread

update unit tests

407f91d

move StoreLocatorProvider to app level to ensure selectedStore is sav…

16958ae

…ed in the context

hajinsuha1 commented Jan 30, 2025

View reviewed changes

hajinsuha1 added 4 commits January 30, 2025 14:53

cleanup and update unit tests

9bca83a

update changelog

30d4563

add transaltions

369d2c7

update PDP StoreAvailabilityText to display Out of Stock when selecte…

b2fffc4

…dStore is missing inventoryId

hajinsuha1 requested review from bfeister and jeremy-jung1 January 30, 2025 21:57

hajinsuha1 commented Jan 30, 2025

View reviewed changes

hajinsuha1 marked this pull request as ready for review January 30, 2025 21:59

hajinsuha1 requested a review from a team as a code owner January 30, 2025 21:59

hajinsuha1 added 3 commits February 5, 2025 09:56

lint

d926f3f

move useStoreLocator to hooks

a3cd356

fix unit tests

a1a10e7

jeremy-jung1 approved these changes Feb 5, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@W-17442945 BOPIS Shop the Store PLP and PDP SteelThread #2226

@W-17442945 BOPIS Shop the Store PLP and PDP SteelThread #2226

hajinsuha1 commented Jan 28, 2025 •

edited

Loading

hajinsuha1 Jan 30, 2025

hajinsuha1 Jan 30, 2025

jeremy-jung1 Feb 4, 2025 •

edited

Loading

hajinsuha1 Jan 30, 2025

jeremy-jung1 Feb 4, 2025 •

edited

Loading

jeremy-jung1 commented Feb 4, 2025 •

edited

Loading

hajinsuha1 commented Feb 4, 2025

jeremy-jung1 left a comment •

edited

Loading

@W-17442945 BOPIS Shop the Store PLP and PDP SteelThread #2226

Are you sure you want to change the base?

@W-17442945 BOPIS Shop the Store PLP and PDP SteelThread #2226

Conversation

hajinsuha1 commented Jan 28, 2025 • edited Loading

Description

PLP

Before

After

PDP

Before

After

Types of Changes

Changes

How to Test-Drive This PR

No Store Selected

Store with no inventoryId Selected

PLP

PDP

Store with inventoryId Selected

PLP

PDP

Other Tests

Checklists

General

Accessibility Compliance

Localization

hajinsuha1 Jan 30, 2025

Choose a reason for hiding this comment

hajinsuha1 Jan 30, 2025

Choose a reason for hiding this comment

jeremy-jung1 Feb 4, 2025 • edited Loading

Choose a reason for hiding this comment

hajinsuha1 Jan 30, 2025

Choose a reason for hiding this comment

jeremy-jung1 Feb 4, 2025 • edited Loading

Choose a reason for hiding this comment

jeremy-jung1 commented Feb 4, 2025 • edited Loading

hajinsuha1 commented Feb 4, 2025

jeremy-jung1 left a comment • edited Loading

Choose a reason for hiding this comment

hajinsuha1 commented Jan 28, 2025 •

edited

Loading

jeremy-jung1 Feb 4, 2025 •

edited

Loading

jeremy-jung1 Feb 4, 2025 •

edited

Loading

jeremy-jung1 commented Feb 4, 2025 •

edited

Loading

jeremy-jung1 left a comment •

edited

Loading