@W-18669904- PDP changes for pickup in store feature by snilakandan13 · Pull Request #2537 · SalesforceCommerceCloud/pwa-kit

snilakandan13 · 2025-06-09T17:05:34Z

@W-18669904

Description

Added support in PDP page for doing a Pickup In store

If the localStorage has inventoryId set, the PDP page will do a fetch based on inventoryId
UI will show whether the Product is In stock or Out of stock at the selected store
If In stock, then the Pickup in Store radio button will be enabled
-If the Pickup in Store radio button is selected, the AddtoCart API call will have the inventoryId set for the particular store and the ProductItem

Types of Changes

Bug fix (non-breaking change that fixes an issue)
[x ] New feature (non-breaking change that adds functionality)
Documentation update
[ X] 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)

Checklists

General

[ X] Changes are covered by test cases
[X ] 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

[X ] Changes include a UI text update in the Retail React App (which requires translation)

…pwa-kit into develop

cc-prodsec · 2025-06-09T17:05:43Z

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

packages/template-retail-react-app/app/components/product-view/index.jsx

packages/template-retail-react-app/app/pages/product-detail/index.jsx

…angesForPickupInStore Signed-off-by: snilakandan13 <119348013+snilakandan13@users.noreply.github.com>

…tps://github.com/SalesforceCommerceCloud/pwa-kit into t/commerce/W-18669904/pdpChangesForPickupInStore

packages/template-retail-react-app/app/hooks/use-add-to-cart-modal.js

packages/template-retail-react-app/app/components/product-view/index.jsx

packages/template-retail-react-app/app/pages/product-detail/index.jsx

patricksullivansf

Great discussion. Approving for merge to feature branch with understanding discussion items will be followed up with additional WI based on TLR feedback.

snilakandan13 · 2025-06-10T20:50:56Z

The follow up PR will be W-18751492 for PDP page changes

alexvuong · 2025-06-10T22:14:25Z

How do I test drive this?

alexvuong · 2025-06-10T22:14:49Z

packages/template-retail-react-app/CHANGELOG.md

 - Improved the layout of product tiles in product scroll and product list [#2446](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2446)
 - Updated 6 new languagues [#2495](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2495)
 - Show Bonus Product Label on OrderSummary component [#2524](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2524)
+- Added support for Shop in Store Functionality


no PR link?

that is just the group heading, the PR link is in line #7, the shopInStore is going to have multiple Prs, the first one is the one to the PDP page

alexvuong · 2025-06-10T22:15:23Z

packages/template-retail-react-app/app/components/product-view/index.jsx

+    useTheme,
+    Stack,
+    Radio,
+    RadioGroup


Let's keep the hook at the bottom, and arrange the components in alphabetical order for readability

alexvuong · 2025-06-10T22:21:25Z

packages/template-retail-react-app/app/components/product-view/index.jsx

+        const [pickupError, setPickupError] = useState('')
+        const {site} = useMultiSite()
+
+        // Get store info from localStorage for stock status display (move to main render scope)


There are a lot of logic is added into this component. Can we create a hook or components for the entire "delivery" section ?

This whole section is going to be modified based on the changes to the hook for "useDerivedProduct" which Yuming is going on currently, this is more of a placeHolder until then

With that the "useDerivedProduct" will return the storeStockStatus

Again all this goes to the feature branch, with the caveat that future WIs/stories incrementally are present to encapsulate code better

alexvuong · 2025-06-10T22:28:25Z

packages/template-retail-react-app/app/pages/product-detail/index.jsx

+        } catch (e) {
+            return null
+        }
+    })


This is not a good React practise to listen to a value change.

If you want to create listener for any value change, you should useEffect and put your logic there.
Using useState is not a way to listen for a change. useState is a way to trigger a re-rendering by changing the state.

useEffect(() => { // update logic here const val = JSON.parse(window.localStorage.getItem(storeInfoKey))?.inventoryId setSelectedInventoryId(val) }, [site.?id])

I have used useState to set the initial value, for listening to the storechanges I have used "useEffect" in line 85 below

packages/template-retail-react-app/app/pages/product-detail/index.jsx

snilakandan13 · 2025-06-11T14:53:07Z

How do I test drive this?

Testing the PDP page after using the store locator , and then verifying using the radio buttons, I have added the screenshots

patricksullivansf · 2025-06-23T18:56:12Z

packages/template-retail-react-app/app/pages/product-detail/index.jsx

-                    // The add item endpoint in the shopper baskets API does not respect variant selections
-                    // for bundle children, so we have to make a follow up call to update the basket
-                    // with the chosen variant selections


QQ: i missed this discussion. why are all these unrelated comments removed?

Please add back this comment since this comment explains why we are doing the following code

Will do, I'm addressing these with my next PR

alexvuong · 2025-06-23T19:56:21Z

packages/template-retail-react-app/app/pages/product-detail/index.jsx

-
-            // since the returned data includes all products in basket
-            // here we compare list of productIds in bundleProductItems of each productItem to filter out the
-            // current bundle that was last added into cart


Same with this comment

snilakandan13 added 13 commits June 6, 2025 13:37

Initial commit for PDP changes for pickup in Store

d2e515e

Merge branch 'develop' of https://github.com/SalesforceCommerceCloud/…

17ed9cb

…pwa-kit into develop

Modified Pickup as a Radio Button

983089a

Modified Pickup as a Radio Button

51282f7

Linting errors

ca7d6ad

Fixing product bundles

23d3bb1

Reverting git ignore

f39b47f

Remove my-test-project from repository and add to .gitignore

c9b5e61

Reverting other linting files

fe8e9a4

reverting unchanged files

b8a71e9

Translations

5219741

Cleaning up comments

f20e9e2

Added changes to PDP page

7625fd8

snilakandan13 requested a review from a team as a code owner June 9, 2025 17:05

snilakandan13 requested review from aditek-sf, patricksullivansf, sf-henry-semaganda, shauryemahajanSF, wei-liu-sf, yhsieh1 and yunakim714 June 9, 2025 17:09

patricksullivansf reviewed Jun 9, 2025

View reviewed changes

packages/template-retail-react-app/app/components/product-view/index.jsx Outdated Show resolved Hide resolved

packages/template-retail-react-app/app/components/product-view/index.jsx Show resolved Hide resolved

yhsieh1 reviewed Jun 9, 2025

View reviewed changes

packages/template-retail-react-app/app/components/product-view/index.jsx Outdated Show resolved Hide resolved

yhsieh1 reviewed Jun 9, 2025

View reviewed changes

packages/template-retail-react-app/app/components/product-view/index.jsx Outdated Show resolved Hide resolved

snilakandan13 commented Jun 9, 2025

View reviewed changes

packages/template-retail-react-app/app/pages/product-detail/index.jsx Show resolved Hide resolved

Review comments

cbcd369

snilakandan13 requested review from patricksullivansf and yhsieh1 June 9, 2025 20:18

Review comments

af96e17

snilakandan13 and others added 3 commits June 10, 2025 10:01

Review comments

392cff0

Review comments

66e7c9c

Merge branch 'feature/shop-in-store' into t/commerce/W-18669904/pdpCh…

b98aaf9

…angesForPickupInStore Signed-off-by: snilakandan13 <119348013+snilakandan13@users.noreply.github.com>

snilakandan13 requested review from aditek-sf and shauryemahajanSF June 10, 2025 15:09

snilakandan13 added 2 commits June 10, 2025 10:29

linting error fix

41161eb

Merge branch 't/commerce/W-18669904/pdpChangesForPickupInStore' of ht…

e972465

…tps://github.com/SalesforceCommerceCloud/pwa-kit into t/commerce/W-18669904/pdpChangesForPickupInStore

yhsieh1 reviewed Jun 10, 2025

View reviewed changes

packages/template-retail-react-app/app/hooks/use-add-to-cart-modal.js Outdated Show resolved Hide resolved

sf-henry-semaganda reviewed Jun 10, 2025

View reviewed changes

packages/template-retail-react-app/app/components/product-view/index.jsx Show resolved Hide resolved

yhsieh1 reviewed Jun 10, 2025

View reviewed changes

packages/template-retail-react-app/app/pages/product-detail/index.jsx Show resolved Hide resolved

Review comment

5e354cb

snilakandan13 requested review from sf-henry-semaganda and yhsieh1 June 10, 2025 19:56

linting issue

4094418

patricksullivansf approved these changes Jun 10, 2025

View reviewed changes

shauryemahajanSF approved these changes Jun 10, 2025

View reviewed changes

yhsieh1 approved these changes Jun 10, 2025

View reviewed changes

alexvuong reviewed Jun 10, 2025

View reviewed changes

packages/template-retail-react-app/app/pages/product-detail/index.jsx Show resolved Hide resolved

snilakandan13 requested a review from alexvuong June 11, 2025 02:12

snilakandan13 merged commit 9ce5366 into feature/shop-in-store Jun 11, 2025
35 checks passed

patricksullivansf reviewed Jun 23, 2025

View reviewed changes

alexvuong reviewed Jun 23, 2025

View reviewed changes

patricksullivansf mentioned this pull request Jun 25, 2025

@W-18811979 BOPIS (buy online pick up in store) #2646

Merged

12 tasks

Conversation

snilakandan13 commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

Uh oh!

cc-prodsec commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎉 Snyk checks have passed. No issues have been found so far.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

patricksullivansf left a comment

Choose a reason for hiding this comment

Uh oh!

snilakandan13 commented Jun 10, 2025

Uh oh!

alexvuong commented Jun 10, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snilakandan13 Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexvuong Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snilakandan13 Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

snilakandan13 commented Jun 11, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

snilakandan13 commented Jun 9, 2025 •

edited

Loading

cc-prodsec commented Jun 9, 2025 •

edited

Loading

snilakandan13 Jun 11, 2025 •

edited

Loading

alexvuong Jun 10, 2025 •

edited

Loading

snilakandan13 Jun 11, 2025 •

edited

Loading