Add new unified OrderCaptureDialog with amount options by mirekm · Pull Request #6200 · saleor/saleor-dashboard

mirekm · 2025-12-12T12:58:51Z

Summary

New unified OrderCaptureDialog for both Legacy Payments and Transactions APIs
Shows order context (total, captured so far, balance due) and transaction context (available to capture, already captured)
Handles authorization states: full, partial, none, and fully captured
Outcome prediction shows resulting order status before confirming (e.g., "This will result in a Fully captured order")
Supports currency-aware decimal input with comma/dot normalization
Displays server errors from both API types
New shared utilities in PriceField/utils.ts: normalizeDecimalSeparator, parseDecimalValue, limitDecimalPlaces
Fixed Callout component dark mode colors using theme-aware getStatusColor

Test plan

Legacy API: Capture works on orders with totalAuthorized > 0
Transactions API: Charge action works on transactions with authorizedAmount > 0
Dialog correctly shows partial authorization warning when auth < balance
Outcome prediction updates based on selected amount
Decimal input respects currency precision (e.g., JPY = 0 decimals)
Error messages display correctly on failed capture

… not confused when the name matches

… "Order value"

When no products are available in the channel or channel is inactive.

- Create new OrderCaptureDialog component using macaw-ui-next - Supports three capture options: order total, authorized amount, custom - Shows contextual warnings when authorized differs from total - Integrate with both Legacy Payments API and Transactions API flows - Include development overrides for testing (to be removed)

Copilot

Pull request overview

Copilot reviewed 15 out of 15 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

witoszekdev

Here are my comments from other PR that had changes from this one by accident, these are still valid since the diff is the same:

Copilot

Pull request overview

Copilot reviewed 19 out of 19 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-14T14:33:13Z

src/orders/components/OrderCaptureDialog/OrderCaptureDialog.tsx

+                      <Input
+                        size="small"
+                        type="text"
+                        inputMode="decimal"
+                        value={customAmountInput}
+                        onChange={handleCustomAmountChange}
+                        error={showCustomAmountError}
+                        disabled={
+                          authStatus === "none" ||
+                          authStatus === "charged" ||
+                          selectedOption !== "custom"
+                        }
+                        endAdornment={
+                          <Text size={2} color="default2" marginRight={2}>
+                            {currency}
+                          </Text>
+                        }
+                      />


The custom amount input field lacks an associated label or aria-label attribute, which can impact accessibility for screen reader users. Consider adding an aria-label or associating it with a visible label element to describe its purpose.

Copilot · 2026-01-14T14:33:14Z

src/orders/components/OrderCaptureDialog/messages.ts

+  statusPartial: {
+    id: "ZUYQ+C",
+    defaultMessage: "Partial Authorisation",
+    description: "status pill for partial authorization",


Inconsistent spelling: The default message uses British English "authorisation" while the description uses American English "authorization". Consider using consistent spelling throughout (either "authorization" or "authorisation" for both).

Copilot · 2026-01-14T14:33:14Z

src/misc.ts

+  // Also check for Apollo errors (network errors, GraphQL execution errors)
+  // These are stored in opts.error, not in the mutation response data
+  const hasApolloError = !!opts.error;
+
+  return getMutationState(
+    opts.called,
+    opts.loading,
+    errors,
+    hasApolloError ? [{ error: opts.error }] : [],
+  );


The error array passed to getMutationState should contain actual error objects that match the expected structure. The current implementation passes [{ error: opts.error }] which will always evaluate as truthy (non-empty array) even though it doesn't contain proper error objects. This may cause the button state to show "error" even when opts.error is undefined or null.

Consider checking if opts.error actually exists before creating the array, or pass an empty array when there's no error.

Copilot · 2026-01-14T14:33:14Z

src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx

+          onSubmit={amount =>
+            orderTransactionAction
+              .mutate({
+                action: params.type,
+                transactionId: params.id,
+                amount,
+              })
+              .finally(() => closeModal())
+          }


The transaction capture dialog closes immediately after submission (via .finally(() => closeModal())), which means errors won't be visible to the user. The legacy payment capture implementation (lines 448-453) doesn't have this .finally() call, allowing errors to be displayed in the dialog before it's closed. Consider removing the .finally(() => closeModal()) call to match the legacy behavior and allow users to see error messages.

Copilot

Pull request overview

Copilot reviewed 19 out of 19 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-14T14:57:32Z

src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx

+        <OrderCaptureDialog
+          confirmButtonState={orderPaymentCapture.opts.status}
+          errors={orderPaymentCapture.opts.data?.orderCapture?.errors ?? []}
+          orderTotal={order?.total.gross ?? defaultZeroMoney}
+          authorizedAmount={order?.totalAuthorized ?? defaultZeroMoney}
+          onClose={closeModal}
+          onSubmit={amount =>
+            orderPaymentCapture.mutate({
+              amount,
+              id,
+            })
+          }
+        />


The OrderCaptureDialog for legacy payment capture (action === "capture") is missing a key prop. The transaction-charge-action dialog has key={params.id} at line 389, but this one doesn't. Without a key prop, React won't remount the component when switching between different orders, causing stale state in the dialog. Add a unique key prop to force remounting when the order changes.

Copilot · 2026-01-14T14:57:33Z

src/orders/views/OrderDetails/OrderNormalDetails/index.tsx

+        <OrderCaptureDialog
+          confirmButtonState={orderPaymentCapture.opts.status}
+          errors={orderPaymentCapture.opts.data?.orderCapture?.errors ?? []}
+          orderTotal={order.total.gross}
+          authorizedAmount={order.totalAuthorized}
+          onClose={closeModal}
+          onSubmit={amount =>
+            orderPaymentCapture.mutate({
+              amount,
+              id,
+            })
+          }
+        />


The OrderCaptureDialog for legacy payment capture (action === "capture") is missing a key prop. The transaction-charge-action dialog has key={params.id} at line 323, but this one doesn't. Without a key prop, React won't remount the component when switching between different orders, causing stale state in the dialog. Add a unique key prop to force remounting when the order changes.

Copilot · 2026-01-14T14:57:34Z

src/components/PriceField/utils.ts

+export const limitDecimalPlaces = (value: string, maxDecimalPlaces: number): string => {
+  const normalized = normalizeDecimalSeparator(value);
+  const separator = value.includes(",") ? "," : ".";
+  const [integerPart, decimalPart] = normalized.split(".");
+
+  if (!decimalPart) {
+    return value;
+  }
+
+  if (maxDecimalPlaces === 0) {
+    return integerPart;
+  }
+
+  if (decimalPart.length > maxDecimalPlaces) {
+    return `${integerPart}${separator}${decimalPart.slice(0, maxDecimalPlaces)}`;


When the user types a value with thousand separators (e.g., "1,234.56"), the function will detect the separator as "," at line 90 because the value contains a comma, even though the decimal separator is actually a dot. This will cause the limited value to be reconstructed with the wrong separator (e.g., if limiting to 1 decimal, it might become "1234,5" instead of "1234.5"). Consider detecting the decimal separator by checking which separator appears last in the original value, or by checking the normalized value's decimal position.

Copilot · 2026-01-14T14:57:34Z

src/extensions/views/AddCustomExtension/AddCustomExtension.test.tsx

+jest.mock("@saleor/macaw-ui-next", () => ({
+  ...(jest.requireActual("@saleor/macaw-ui-next") as object),
+  useTheme: () => ({ theme: "default" }),
+}));


The mock for useTheme returns { theme: "default" }, but the actual useTheme hook from macaw-ui-next likely returns a theme value of type DefaultTheme which should be either "defaultLight" or "defaultDark", not "default". This could cause tests to fail or produce incorrect results when testing theme-dependent functionality. Verify the correct theme value by checking the DefaultTheme type definition or update to use "defaultLight" which is the typical default.

witoszekdev

Feature wise it works fine, but I think we should rethink logic for displaying button to open this modal.

For example we can request capture via API when it's in TransactionItem.actions, but after this change we hide capture button for Transaction:

mirekm added 29 commits December 5, 2025 18:38

Add border to Order summary and remove bg

aaa4c9d

Improve empty state for Payments summary card

7ce12ba

Match font size and add tabular nums to amounts

5c1b09d

Fix buttons stacking on each other

51ae25d

Extract messages

7c2b4d6

Add changeset

d1f5263

Fix linting warning

3390702

Fix "No applicable shipping methods" bug

5ba1c15

Fix Edit Shipping Options modal to show unavailable method so user is…

2f242bf

… not confused when the name matches

Merge the old UNCONFIRMED and DRAFT order summary into the new design…

7dcf708

… "Order value"

Eslint

4de0c07

More types

8e09b06

Extract messages

f25a05a

Add changeset

a7905f8

Fix imports placement

f90f52b

Merge branch 'improve-order-summary' into unify-order-value-sections

3a494ac

Merge branch 'main' into unify-order-value-sections

97dd348

Clean up the old unused Draft summary component

c0d9104

Unify the Draft header style and reuse OrderCardTitle component

d7a0151

Improve the Add products button showing disabled state

4aae8de

When no products are available in the channel or channel is inactive.

Extract messages

c77648c

Improve the "Set shipping" logic and messages in Order Summary

b1c6b52

Add tests to Order summary

f4d1ec1

Extract messages

f26dfd5

Fix liniting errors

94b676f

Let users remove the selected shipping method in Drafts

ee0aea1

Extract messages

b3feed7

Types

3210bc1

mirekm requested a review from a team as a code owner December 12, 2025 12:58

Merge branch 'main' into enable-granular-capture

78bde8a

Copilot AI review requested due to automatic review settings January 13, 2026 07:51

Copilot started reviewing on behalf of mirekm January 13, 2026 07:52 View session

mirekm removed the request for review from witoszekdev January 13, 2026 07:55

Copilot AI reviewed Jan 13, 2026

View reviewed changes

witoszekdev requested changes Jan 13, 2026

View reviewed changes

Improve the separator nomalisation to handle multiple tousend blocks

23ab07b

mirekm dismissed lkostrowski’s stale review via 23ab07b January 13, 2026 18:29

witoszekdev added 4 commits January 14, 2026 14:49

Refactor capture modal state into separate hook

f8eaa71

Use order currency as default currency

5bf94c1

Mock theme instead of using ThemeProvider

66fb2b7

CR: Minor fixes

f562ee8

Copilot AI review requested due to automatic review settings January 14, 2026 14:27

Copilot started reviewing on behalf of witoszekdev January 14, 2026 14:28 View session

Apply suggestion from @witoszekdev

e43abf2

Copilot AI reviewed Jan 14, 2026

View reviewed changes

witoszekdev added 2 commits January 14, 2026 15:36

Extract messages

324d842

Fix test

8a1cdd3

Copilot AI review requested due to automatic review settings January 14, 2026 14:47

Copilot started reviewing on behalf of witoszekdev January 14, 2026 14:48 View session

witoszekdev added test deployment Deploy Pull Request to *.saleor.rocks environment and removed test deployment Deploy Pull Request to *.saleor.rocks environment labels Jan 14, 2026

github-actions bot deployed to pr-6200 January 14, 2026 14:56 View deployment

Copilot AI reviewed Jan 14, 2026

View reviewed changes

Merge branch 'main' into enable-granular-capture

9cb5e15

witoszekdev approved these changes Jan 14, 2026

View reviewed changes

witoszekdev merged commit f824411 into main Jan 14, 2026
13 of 14 checks passed

witoszekdev deleted the enable-granular-capture branch January 14, 2026 16:44

This was referenced Jan 20, 2026

Prepare release 3.23.0 #6258

Closed

Prepare release 3.22.25 #6260

Merged

Comments

Conversation

mirekm commented Dec 12, 2025

Summary

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

witoszekdev left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

witoszekdev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants