Skip to content

@W-19364102 - Cart pick up section changes in StoreDisplay component to match figma - #3248

Merged
aditek-sf merged 7 commits into
developfrom
t/commerce/spark/W-19364102/CartPickupFigmaMatch
Sep 10, 2025
Merged

@W-19364102 - Cart pick up section changes in StoreDisplay component to match figma#3248
aditek-sf merged 7 commits into
developfrom
t/commerce/spark/W-19364102/CartPickupFigmaMatch

Conversation

@aditek-sf

@aditek-sf aditek-sf commented Sep 5, 2025

Copy link
Copy Markdown
Contributor

Description

This PR updates the pickup in store section on the cart page to closely resemble the designs. This also ensures layout similarity between the following pages:

  • cart page
  • checkout page
  • store locator modal page
  • store locator page
  • order confirmation page

Also this change refactors and cleans up code, which ensures there is no code duplication and the code is re-used where required.

Cart Page

Updated (without store distance/unit data available):

Screenshot 2025-09-09 at 6 04 04 PM Screenshot 2025-09-09 at 6 04 21 PM

Updated (when store distance/unit data is available):

Screenshot 2025-09-09 at 3 59 35 PM Screenshot 2025-09-09 at 4 02 37 PM

Store Locator Modal

Updated

Screenshot 2025-09-09 at 4 00 32 PM Screenshot 2025-09-09 at 4 03 47 PM

Store Locator Page

Updated

Screenshot 2025-09-09 at 4 00 54 PM Screenshot 2025-09-09 at 4 04 03 PM

Checkout Page

Updated (without store distance/unit data available):

Screenshot 2025-09-09 at 4 47 24 PM Screenshot 2025-09-09 at 6 09 32 PM

Updated (when store distance/unit data is available):

Screenshot 2025-09-09 at 4 49 06 PM Screenshot 2025-09-09 at 4 49 15 PM

Order Confirmation Page

Screenshot 2025-09-09 at 4 50 53 PM Screenshot 2025-09-09 at 4 51 03 PM

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

  • Desktop view for pick up in store section on cart page modified to closely resemble figma designs
  • Cleaned up code and ensured code re-usability.

How to Test-Drive This PR

  • Add an item to cart for pick up in store.
  • Proceed to cart.
  • View the layout
  • Open the store locator modal to view the updated layout
  • Visit the store locator page to view the updated layout
  • Proceed to checkout to view the updated layout for the pick up in store product
  • Place an order to see the order confirmation details which includes the pick up in store information with the updated layout.

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...

Localization

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

@aditek-sf
aditek-sf requested review from a team as code owners September 5, 2025 07:23
@aditek-sf aditek-sf added the skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated label Sep 5, 2025
@cc-prodsec

cc-prodsec commented Sep 5, 2025

Copy link
Copy Markdown
Collaborator

🎉 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)

@aditek-sf
aditek-sf force-pushed the t/commerce/spark/W-19364102/CartPickupFigmaMatch branch from e7699e2 to cbc7606 Compare September 5, 2025 07:31

@patricksullivansf patricksullivansf left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This much prettier and much more modular. A few must haves

  • find a way to include phone & email in the new layout. remember the source figma was under-spec'd. but we still need these.
  • strongly consider not having two desktop layouts. it adds code bloat and complexity and there is little advantage to the shopper. the places you need to align layout are: store locator modal, store locator page, cart, checkout, confirmation. use a similar layout throughout.

@aditek-sf

Copy link
Copy Markdown
Contributor Author

Hi @patricksullivansf , I've updated the PR with the latest code changes, test updates, and an updated description, including screenshots of the new layout we aligned on during the UX session with Felipe.

@shauryemahajanSF shauryemahajanSF left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, personally prefer the old UX I think its cleaner, but I know we talked w Felipe on this. If you can, send him the screenshots of before and after to just to make sure we're aligned.

@patricksullivansf patricksullivansf left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love the layout! made some minor comments. most importantly though please update the change log. Thank you!

Comment thread packages/template-retail-react-app/app/components/store-display/index.jsx Outdated
Comment thread packages/template-retail-react-app/app/components/store-display/index.jsx Outdated
Comment thread packages/template-retail-react-app/app/components/store-display/index.jsx Outdated
})

test('does not render Change Store button when store has no name', () => {
test('still renders Change Store button when store has no name (callback provided)', () => {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this seems like a regression. Don't think it will actually happen so the original test is weird. but that said, allowing a shopper to choose a store without a name will mess up a lot of BOPIS UX.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Absolutely right, I updated the test and updated the code to only show that button if the store has a name. Thanks!

"defaultMessage": "{city}, {stateCode} {postalCode}"
},
"store_display.label.store_contact_info": {
"defaultMessage": "Store Contact Info"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@knhage FYI new BOPIS label

@gurpreetsainisalesforce gurpreetsainisalesforce left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@aditek-sf aditek-sf removed the skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated label Sep 10, 2025
@aditek-sf aditek-sf changed the title @W-19364102 - Cart pick up section changes to match figma @W-19364102 - Cart pick up section changes in StoreDisplay component to match figma Sep 10, 2025

@gurpreetsainisalesforce gurpreetsainisalesforce left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@aditek-sf
aditek-sf merged commit 3a66a3f into develop Sep 10, 2025
42 checks passed
@aditek-sf
aditek-sf deleted the t/commerce/spark/W-19364102/CartPickupFigmaMatch branch September 10, 2025 20:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants