[OMS] Add cancel button and modal @W-18998059 by sf-emmyzhang · Pull Request #2775 · SalesforceCommerceCloud/pwa-kit

sf-emmyzhang · 2025-07-10T17:59:41Z

Description

Added a "Cancel order" button next to the Order Details heading that opens a "Request Cancellation" modal dialog.

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

Added "Cancel order" button to order details page header (authenticated user only, guest will be covered after order details for guest is completed)
Created reusable CancelOrderModal component
Test coverage and labels

How to Test-Drive This PR

Deployed to https://cc-sharks-dev-emmy-test.mobify-storefront-staging.com

Place an order as an authenticated buyer
Go to order history and click on order details for the order
Cancel order button should be seen in the top right of the order details page
Clicking the cancel order button should open a 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)

cc-prodsec · 2025-07-10T17:59:51Z

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

…der-btn Signed-off-by: sf-emmyzhang <emmyzhang@salesforce.com>

vmarta

Just some minor comments. Other than that, PR is good. Button works and opens up the modal.

vmarta · 2025-07-15T18:50:49Z

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

 - Show Automatic Bonus Products on Cart Page [#2704](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2704)
 - Support Standard Products [2697](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2697)
 - Fix passwordless race conditions in form submission [#2758](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2758)
+- Add cancel button and modal @W-18998059 [#2775](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2775)


Do we need our ticket number here? The changelog is meant for public audience.

vmarta · 2025-07-15T19:04:21Z

packages/template-retail-react-app/app/components/cancel-order-modal/index.jsx

+    order = null,
+    onRequestCancellation = null,


Suggested change

order = null,

onRequestCancellation = null,

order,

onRequestCancellation,

There's a difference betweennull vs undefined. I think of null as something intentionally passed in.

But in this case, I don't think it's necessary to add null or undefined. Your component propTypes already specifies which props are required and optional.

I've also seen noops set as default for some modals, not sure what difference that makes because the values always seem to be populated (required)

kzheng-sfdc · 2025-07-15T19:47:08Z

packages/template-retail-react-app/app/components/cancel-order-modal/index.jsx

+    ...props
+}) => {
+    const handleRequestCancellation = () => {
+        if (onRequestCancellation) {


Should onRequestCancellation allowed to be falsy at all? That means we don't do anything, which sounds wrong?

kzheng-sfdc · 2025-07-15T19:48:20Z

packages/template-retail-react-app/app/components/cancel-order-modal/index.jsx

+    /**
+     * Order object for cancellation
+     */
+    order: PropTypes.object,


Yes, as we'll eventually need order information to be displayed in the cancel order modal

Can we add .isRequired to it, then?

kzheng-sfdc · 2025-07-15T19:51:04Z

packages/template-retail-react-app/app/pages/account/order-detail.jsx

+                                id="account_order_detail.title.order_details"
+                            />
+                        </Heading>
+                        <Button variant="link" size="sm" onClick={onCancelModalOpen}>


Not all orders are cancellable, right? How do we make sure this doesn't show up at all times?

Yes, I haven't added that logic bit yet. I recently learned that SOM has a field called QuantityAvailableToCancel on each orderItemSummary. I will incorporate that in the next iteration, and add a todo comment to address that here if that works?

Other than quantity (why would quantity matter when canceling an order?), I'd imagine the order status also matters? I am good with doing it in the next iteration. Thanks.

Good question, I'll follow up on that

kzheng-sfdc · 2025-07-15T21:56:59Z

packages/template-retail-react-app/app/components/cancel-order-modal/index.jsx

+        if (!onRequestCancellation) {
+            console.error('Cancel order modal: onRequestCancellation is required')
+            return
+        }


I think you can safely remove this check now that it's marked as isRequired.

* add button and modal * Initial empty commit for order-management-plugin * separate modal component; changelog * unit tests * labels * remove redundancy * chakra? * update changelog * mark cancellation props as required --------- Signed-off-by: sf-emmyzhang <emmyzhang@salesforce.com> Co-authored-by: sf-deepali-bharmal <deepali.bharmal@salesforce.com>

sf-emmyzhang and others added 2 commits July 10, 2025 13:54

add button and modal

f72ed98

Initial empty commit for order-management-plugin

2b1c0c8

sf-emmyzhang added 5 commits July 10, 2025 14:06

separate modal component; changelog

fcf9398

unit tests

492be37

Merge branch 'feature/order-management-plugin' into feature/cancel-or…

ce28431

…der-btn Signed-off-by: sf-emmyzhang <emmyzhang@salesforce.com>

labels

c5bc7a2

remove redundancy

0f886ec

sf-emmyzhang force-pushed the feature/cancel-order-btn branch from 1814eb7 to 0f886ec Compare July 11, 2025 15:09

sf-emmyzhang changed the title ~~Add cancel button and modal @W-18998059~~ [OMS] Add cancel button and modal @W-18998059 Jul 11, 2025

sf-emmyzhang marked this pull request as ready for review July 11, 2025 17:33

sf-emmyzhang requested a review from a team as a code owner July 11, 2025 17:33

sf-emmyzhang added the ready for review PR is ready to be reviewed label Jul 11, 2025

chakra?

e3c0c81

sf-deepali-bharmal force-pushed the feature/order-management-plugin branch from ccc0c81 to 5c5a5e7 Compare July 15, 2025 17:24

Merge branch 'feature/order-management-plugin' into feature/cancel-or…

cf7b4db

…der-btn Signed-off-by: sf-emmyzhang <emmyzhang@salesforce.com>

vmarta approved these changes Jul 15, 2025

View reviewed changes

kzheng-sfdc reviewed Jul 15, 2025

View reviewed changes

sf-emmyzhang added 2 commits July 15, 2025 13:48

update changelog

0fcfed7

mark cancellation props as required

5dc7a73

kzheng-sfdc reviewed Jul 15, 2025

View reviewed changes

kzheng-sfdc approved these changes Jul 15, 2025

View reviewed changes

sf-emmyzhang merged commit d789bcf into feature/order-management-plugin Jul 15, 2025
36 checks passed

sf-emmyzhang deleted the feature/cancel-order-btn branch July 15, 2025 22:29

Conversation

sf-emmyzhang commented Jul 10, 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 Jul 10, 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!

vmarta left a comment

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!

kzheng-sfdc Jul 15, 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!

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!

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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

sf-emmyzhang commented Jul 10, 2025 •

edited

Loading

cc-prodsec commented Jul 10, 2025 •

edited

Loading

kzheng-sfdc Jul 15, 2025 •

edited

Loading