Add new unified OrderCaptureDialog with amount options

.changeset/mighty-toes-march.md

@@ -0,0 +1,9 @@
+---
+"saleor-dashboard": patch
+---
+
+New capture dialog for capturing payments with support for:
+- Full and partial authorization status indicators
+- Custom capture amount input with currency-aware decimal validation
+- Order balance and transaction-level capture tracking
+- Outcome prediction showing resulting order status

locale/defaultMessages.json

@@ -431,6 +431,10 @@
     "context": "column header",
     "string": "Title"
   },
+  "0YOedO": {
+    "context": "label for already charged amount",
+    "string": "Captured so far"
+  },
   "0YjGFG": {
     "context": "alert message",
     "string": "For subscription"
@@ -450,6 +454,10 @@
     "context": "ProductTypeDeleteWarningDialog multiple consent label",
     "string": "Yes, I want to delete those products types and assigned products"
   },
+  "0f6YvV": {
+    "context": "dialog title",
+    "string": "Capture Payment"
+  },
   "0iMYc+": {
     "context": "field is optional",
     "string": "(Optional)"
@@ -1022,6 +1030,10 @@
   "4YJHut": {
     "string": "Clear search"
   },
+  "4YyeCx": {
+    "context": "label for order total amount",
+    "string": "Order total"
+  },
   "4Z0O2B": {
     "context": "section header title",
     "string": "Gift Card Timeline"
@@ -1612,6 +1624,10 @@
     "context": "ordered product sku",
     "string": "SKU"
   },
+  "8JEG80": {
+    "context": "warning when authorized is less than total",
+    "string": "The remaining authorization doesn't cover the balance. {shortfall} will need a separate payment."
+  },
   "8LWaFr": {
     "context": "dialog content",
     "string": "{counter,plural,one{Are you sure you want to unpublish this model?} other{Are you sure you want to unpublish {displayQuantity} models?}}"
@@ -2065,6 +2081,10 @@
     "context": "no warehouses info",
     "string": "There are no warehouses set up for this product. To add stock quantity to the product <a>configure a warehouse</a> or use existing one by clicking button below."
   },
+  "BJRu4V": {
+    "context": "pill status for partially captured outcome",
+    "string": "Partially captured"
+  },
   "BJtUQI": {
     "context": "button",
     "string": "Add"
@@ -2857,6 +2877,10 @@
     "context": "tooltip",
     "string": "Checkout reservation time threshold is enabled in settings."
   },
+  "G9y5Ze": {
+    "context": "pill status for fully captured outcome",
+    "string": "Fully captured"
+  },
   "GA+Djy": {
     "string": "Are you sure you want to delete these voucher codes?"
   },
@@ -3112,6 +3136,10 @@
     "context": "cta button label",
     "string": "Get in touch"
   },
+  "HSYM17": {
+    "context": "outcome prediction showing resulting order status after capture",
+    "string": "This will result in {status} order"
+  },
   "HSmg1/": {
     "context": "gift cards section name",
     "string": "Gift Cards"
@@ -3185,6 +3213,10 @@
   "HvJPcU": {
     "string": "Category deleted"
   },
+  "HwIhau": {
+    "context": "status pill for fully authorized payment",
+    "string": "Fully Authorized"
+  },
   "HwTMFL": {
     "string": "Go to channels"
   },
@@ -3285,6 +3317,10 @@
   "ITYiRy": {
     "string": "Go to collections"
   },
+  "IU1lif": {
+    "context": "radio option for custom capture amount",
+    "string": "Custom amount"
+  },
   "IUWJKt": {
     "context": "order was discounted event title",
     "string": "Order was discounted"
@@ -3703,6 +3739,10 @@
   "L87bp7": {
     "string": "Order payment successfully voided"
   },
+  "L8J/jr": {
+    "context": "status pill when order is fully paid",
+    "string": "Fully Captured"
+  },
   "L8seEc": {
     "string": "Subtotal"
   },
@@ -3939,10 +3979,18 @@
     "context": "customer input label",
     "string": "Customer"
   },
+  "MhlYkx": {
+    "context": "label for available authorization amount",
+    "string": "Available to capture (authorized)"
+  },
   "MjUyhA": {
     "context": "section subheader",
     "string": "Active member since {date}"
   },
+  "Mm/Stj": {
+    "context": "hint showing maximum allowed custom amount",
+    "string": "Max: {amount}"
+  },
   "MmGlkp": {
     "context": "dialog header",
     "string": "Unassign Collections From Voucher"
@@ -4230,6 +4278,10 @@
     "context": "tab name",
     "string": "All staff members"
   },
+  "OUMqG1": {
+    "context": "label for remaining balance to capture",
+    "string": "Remaining balance"
+  },
   "OUX4LB": {
     "context": "input label",
     "string": "Model type"
@@ -4658,6 +4710,10 @@
     "context": "add new refund button",
     "string": "New refund"
   },
+  "R/YHMH": {
+    "context": "label for amount already captured from this transaction",
+    "string": "Already captured"
+  },
   "R4IIw1": {
     "context": "tracking number of the shipment",
     "string": "Tracking number"
@@ -4928,6 +4984,10 @@
     "context": "product filter label",
     "string": "Product"
   },
+  "SnV3LR": {
+    "context": "error when no authorization exists",
+    "string": "No payment has been authorized for this order. The full amount of {amount} cannot be captured."
+  },
   "SpngiS": {
     "context": "sale status",
     "string": "Status"
@@ -5125,6 +5185,10 @@
     "context": "order expiration card description",
     "string": "The time in days after expired orders will be deleted. Allowed range between 1 and 120."
   },
+  "U0IK0G": {
+    "context": "label for authorized amount",
+    "string": "Authorized"
+  },
   "U2DyeR": {
     "string": "Are you sure you want to delete structure {menuName}?"
   },
@@ -5774,6 +5838,10 @@
     "context": "product pricing, section header",
     "string": "Pricing"
   },
+  "XrliJg": {
+    "context": "label for amount selection",
+    "string": "Select amount to capture:"
+  },
   "Xsh2Pa": {
     "context": "column picker search input placeholder",
     "string": "Search for columns"
@@ -6076,6 +6144,10 @@
     "context": "empty state message",
     "string": "No refunds made for this order."
   },
+  "ZUYQ+C": {
+    "context": "status pill for partial authorization",
+    "string": "Partial authorisation"
+  },
   "ZXOpCJ": {
     "string": "An unexpected issue occurred when parsing manifest. Please contact support. ({errorCode})"
   },
@@ -6409,6 +6481,10 @@
     "context": "button",
     "string": "Create permission group"
   },
+  "bRXgSC": {
+    "context": "capture button with amount",
+    "string": "Capture {amount}"
+  },
   "bS7A8u": {
     "context": "add tracking button",
     "string": "Add tracking"
@@ -7600,6 +7676,10 @@
     "context": "product price",
     "string": "Select channel"
   },
+  "jhyt3I": {
+    "context": "label for max capturable amount when partial authorization",
+    "string": "Remaining max (authorized)"
+  },
   "jiXbx5": {
     "context": "fulfillment status canceled",
     "string": "Canceled"
@@ -8140,6 +8220,10 @@
   "mvVmbJ": {
     "string": "Install extension from manifest"
   },
+  "mxGY7T": {
+    "context": "status pill for no authorization",
+    "string": "No Authorization"
+  },
   "mxtAFx": {
     "string": "Are you sure you want to delete draft #{orderNumber}?"
   },
@@ -8769,6 +8853,10 @@
     "context": "bulk delete label",
     "string": "Delete"
   },
+  "qlfssi": {
+    "context": "label for remaining amount customer owes",
+    "string": "Balance due"
+  },
   "qov29K": {
     "context": "dialog content",
     "string": "Select one of customer addresses or add a new address:"
@@ -9143,6 +9231,10 @@
   "tR+UuE": {
     "string": "User doesn't exist. Please check your email in URL"
   },
+  "tS2K/N": {
+    "context": "radio option for capturing order total",
+    "string": "Order total"
+  },
   "tTuCYj": {
     "context": "all gift cards label",
     "string": "All Gift Cards"
@@ -9262,6 +9354,10 @@
     "context": "shipping zones configuration",
     "string": "Change default weight unit"
   },
+  "u7ShY+": {
+    "context": "pill status for overcaptured outcome",
+    "string": "Overcaptured"
+  },
   "u9/vj9": {
     "context": "webhook input label",
     "string": "Target URL"
@@ -9445,6 +9541,10 @@
   "v3WWK+": {
     "string": "Status is invalid"
   },
+  "v8e93p": {
+    "context": "hint for order total option",
+    "string": "Matches what customer owes"
+  },
   "v9D1pm": {
     "context": "automatic completion cut-off date info message",
     "string": "Setting a cut-off date will not stop checkouts that are already in the process of being completed."

src/components/Callout/Callout.tsx

@@ -1,58 +1,66 @@
-import { ExclamationIcon } from "@dashboard/icons/ExclamationIcon";
-import { Box } from "@saleor/macaw-ui-next";
+import { iconSize, iconStrokeWidthBySize } from "@dashboard/components/icons";
+import { getStatusColor, PillStatusType } from "@dashboard/misc";
+import { Box, Text, useTheme } from "@saleor/macaw-ui-next";
+import { AlertTriangle, CircleAlert, Info, LucideIcon } from "lucide-react";
 import { ReactNode } from "react";
 
-import { DashboardCard } from "../Card";
+type CalloutType = "info" | "warning" | "error";
 
-type CalloutType = "info" | "warning";
+interface CalloutStyles {
+  status: PillStatusType;
+  iconColor: "warning1" | "critical1" | "default1";
+  Icon: LucideIcon;
+}
 
-const warningStylesBox = {
-  backgroundColor: "warning1",
-  borderColor: "warning1",
-} as const;
-
-const warningStylesIcon = {
-  color: "warning1",
-} as const;
-
-const gridTemplate = `
-  "icon title"
-  "empty content"
-`;
+const calloutStylesMap: Record<CalloutType, CalloutStyles> = {
+  warning: {
+    status: "warning",
+    iconColor: "warning1",
+    Icon: CircleAlert,
+  },
+  error: {
+    status: "error",
+    iconColor: "critical1",
+    Icon: AlertTriangle,
+  },
+  info: {
+    status: "neutral",
+    iconColor: "default1",
+    Icon: Info,
+  },
+};
 
-export const Callout = ({
-  children,
-  title,
-  type,
-}: {
-  children: ReactNode;
+interface CalloutProps {
+  children?: ReactNode;
   title: ReactNode;
   type: CalloutType;
-}) => {
-  const boxStyles = type === "warning" ? warningStylesBox : null;
-  const iconStyles = type === "warning" ? warningStylesIcon : null;
+}
+
+export const Callout = ({ children, title, type }: CalloutProps): JSX.Element => {
+  const { theme: currentTheme } = useTheme();
+  const { status, iconColor, Icon } = calloutStylesMap[type];
+  const backgroundColor = getStatusColor({ status, currentTheme }).base;
 
   return (
-    <DashboardCard
-      display="grid"
-      __gridTemplateColumns="auto 1fr"
-      __gridTemplateRows="auto auto"
-      __gridTemplateAreas={gridTemplate}
-      withBorder
-      rowGap={1}
-      columnGap={2}
-      __width="fit-content"
-      {...boxStyles}
+    <Box
+      display="flex"
+      alignItems="flex-start"
+      gap={3}
+      padding={4}
+      borderRadius={4}
+      __backgroundColor={backgroundColor}
     >
-      <DashboardCard.Title display="contents">
-        <Box __lineHeight="0" __gridArea="icon" {...iconStyles}>
-          <ExclamationIcon width="20" height="20" />
-        </Box>
-        <Box __gridArea="title">{title}</Box>
-      </DashboardCard.Title>
-      <DashboardCard.Content __gridArea="content" fontSize={3} paddingRight={0} paddingLeft={0}>
-        {children}
-      </DashboardCard.Content>
-    </DashboardCard>
+      <Box color={iconColor} __lineHeight="0" flexShrink="0">
+        <Icon size={iconSize.small} strokeWidth={iconStrokeWidthBySize.small} />
+      </Box>
+      <Box display="flex" flexDirection="column" gap={1}>
+        <Box>{title}</Box>
+        {children && (
+          <Text size={3} color="default2">
+            {children}
+          </Text>
+        )}
+      </Box>
+    </Box>
   );
 };