@blocklet/payment-react 1.20.20 → 1.20.22

package/es/components/table.js

@@ -9,7 +9,16 @@ function EmptyStub() {
   return null;
 }
 const Table = React.memo(
-  ({ options, columns, toolbar = true, footer = true, hasRowLink = false, emptyNodeText = "", ...rest }) => {
+  ({
+    options,
+    columns,
+    toolbar = true,
+    footer = true,
+    hasRowLink = false,
+    emptyNodeText = "",
+    bordered = true,
+    ...rest
+  }) => {
     const { locale, t } = useLocaleContext();
     const { isMobile } = useMobile();
     const defaultOptions = {
@@ -45,7 +54,8 @@ const Table = React.memo(
         ...rest,
         components,
         hasRowLink,
-        isMobile
+        isMobile,
+        bordered
       }
     );
   }
@@ -55,19 +65,23 @@ const Wrapped = styled(Datatable)`
     font-size: 0.875rem !important;
   }` : ""}
   .MuiPaper-root {
-    border-radius: 8px;
+    border-radius: ${(props) => props?.bordered ? "8px" : "0"};
     overflow: hidden;
   }
   table.MuiTable-root {
-    outline: 1px solid;
-    outline-color: ${({ theme }) => theme.palette.divider};
-    border-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
+    ${(props) => props?.bordered ? `
+      outline: 1px solid;
+      outline-color: ${props.theme.palette.divider};
+      border-radius: ${2 * props.theme.shape.borderRadius}px;
+    ` : ""}
     overflow: hidden;
   }
   [class*='MUIDataTable-responsiveBase'] {
-    outline: 1px solid;
-    outline-color: ${({ theme }) => theme.palette.divider};
-    border-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
+    ${(props) => props?.bordered ? `
+      outline: 1px solid;
+      outline-color: ${props.theme.palette.divider};
+      border-radius: ${2 * props.theme.shape.borderRadius}px;
+    ` : ""}
   }
 
   th.MuiTableCell-head {
@@ -76,11 +90,11 @@ const Wrapped = styled(Datatable)`
     background: ${({ theme }) => theme.palette.grey[50]};
     border-bottom: none;
     &:first-of-type {
-      border-top-left-radius: 8px;
+      ${(props) => props?.bordered ? "border-top-left-radius: 8px;" : ""}
       padding-left: 20px;
     }
     &:last-of-type {
-      border-top-right-radius: 8px;
+      ${(props) => props?.bordered ? "border-top-right-radius: 8px;" : ""}
     }
   }
 
@@ -88,11 +102,11 @@ const Wrapped = styled(Datatable)`
     background: ${({ theme }) => theme.palette.grey[100]};
   }
   tr.MuiTableRow-root:last-of-type td:first-of-type {
-    border-bottom-left-radius: 8px;
+    ${(props) => props?.bordered ? "border-bottom-left-radius: 8px;" : ""}
   }
 
   tr.MuiTableRow-root:last-of-type td:last-of-type {
-    border-bottom-right-radius: 8px;
+    ${(props) => props?.bordered ? "border-bottom-right-radius: 8px;" : ""}
   }
 
   tr.MuiTableRow-root:nth-of-type(even) {
@@ -191,6 +205,16 @@ const Wrapped = styled(Datatable)`
     [class*='MUIDataTable-responsiveBase'] tr:not([class*='responsiveSimple']) td.MuiTableCell-body > div {
       width: inherit;
     }
+    ${({ mobileTDFlexDirection }) => mobileTDFlexDirection === "row" ? `
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      align-items: center;
+      padding: 4px 0;
+      > div {
+        width: fit-content;
+        flex: inherit;
+      }
+    }
+    ` : ""}
   }
 `;
 export default Table;

package/es/locales/en.js

@@ -185,7 +185,17 @@ export default flat({
         progress: "Progress {progress}%",
         delivered: "Installation completed",
         failed: "Processing failed",
-        failedMsg: "An exception occurred during installation. We will automatically process a refund for you. We apologize for the inconvenience. Thank you for your understanding!"
+        failedMsg: "An exception occurred during installation. We will automatically process a refund for you. We apologize for the inconvenience. Thank you for your understanding!",
+        launcher: {
+          processing: "Installing {name}",
+          completed: "{name} installed successfully",
+          failed: "Failed to install {name}"
+        },
+        didnames: {
+          processing: "Domain ({domain}) registering",
+          completed: "Domain ({domain}) registered successfully",
+          failed: "Domain ({domain}) registered failed"
+        }
       },
       confirm: {
         withStake: "By confirming, you allow {payee} to charge your account for future payments and, if necessary, slash your stake. You can cancel your subscription or withdraw your stake at any time.",

package/es/locales/zh.js

@@ -185,7 +185,17 @@ export default flat({
         progress: "\u8FDB\u5EA6 {progress}%",
         delivered: "\u5B89\u88C5\u6210\u529F",
         failed: "\u5B89\u88C5\u5931\u8D25",
-        failedMsg: "\u5F88\u62B1\u6B49\uFF0C\u5B89\u88C5\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u4E00\u4E9B\u95EE\u9898\u3002\u6211\u4EEC\u6B63\u5728\u5904\u7406\u8FD9\u4E2A\u95EE\u9898\uFF0C\u7A0D\u540E\u4F1A\u81EA\u52A8\u4E3A\u60A8\u9000\u6B3E\u3002\u611F\u8C22\u60A8\u7684\u8010\u5FC3\u7B49\u5F85\uFF01"
+        failedMsg: "\u5F88\u62B1\u6B49\uFF0C\u5B89\u88C5\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u4E00\u4E9B\u95EE\u9898\u3002\u6211\u4EEC\u6B63\u5728\u5904\u7406\u8FD9\u4E2A\u95EE\u9898\uFF0C\u7A0D\u540E\u4F1A\u81EA\u52A8\u4E3A\u60A8\u9000\u6B3E\u3002\u611F\u8C22\u60A8\u7684\u8010\u5FC3\u7B49\u5F85\uFF01",
+        launcher: {
+          processing: "\u6B63\u5728\u5B89\u88C5 {name}",
+          completed: "\u5B89\u88C5 {name} \u6210\u529F",
+          failed: "\u5B89\u88C5 {name} \u5931\u8D25"
+        },
+        didnames: {
+          processing: "\u6B63\u5728\u6CE8\u518C {domain}",
+          completed: "\u6CE8\u518C {domain} \u6210\u529F",
+          failed: "\u6CE8\u518C {domain} \u5931\u8D25"
+        }
       },
       confirm: {
         withStake: "\u786E\u8BA4\u8BA2\u9605\uFF0C\u5373\u8868\u793A\u60A8\u6388\u6743 {payee} \u4ECE\u60A8\u7684\u8D26\u6237\u6263\u53D6\u672A\u6765\u6B3E\u9879\uFF0C\u5E76\u5728\u5FC5\u8981\u65F6\u7F5A\u6CA1\u8D28\u62BC\u3002\u60A8\u53EF\u968F\u65F6\u53D6\u6D88\u8BA2\u9605\u6216\u64A4\u9500\u8D28\u62BC\u3002",

package/es/payment/form/index.js

@@ -495,8 +495,15 @@ export default function PaymentForm({
     setState({ stripePaying: false, paying: true });
     await handleConnected();
   };
-  const onStripeCancel = () => {
-    setState({ stripePaying: false });
+  const onStripeCancel = async () => {
+    try {
+      await api.post(`/api/checkout-sessions/${checkoutSession.id}/abort-stripe`);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ stripePaying: false });
+    }
   };
   useEffect(() => {
     const handleKeyDown = (e) => {

package/es/payment/index.js

@@ -304,7 +304,9 @@ function PaymentInner({
             {
               mode,
               pageInfo: state.checkoutSession.metadata?.page_info,
-              hasVendor: state.checkoutSession.metadata?.page_info?.hasVendor || state.checkoutSession.line_items.some((item) => item.price?.product?.vendor_config?.length > 0),
+              vendorCount: state.checkoutSession.line_items.reduce((total, item) => {
+                return total + (item.price?.product?.vendor_config?.length || 0);
+              }, 0),
               sessionId: state.checkoutSession.id,
               payee: getStatementDescriptor(state.checkoutSession.line_items),
               action: state.checkoutSession.mode,

package/es/payment/progress-item.d.ts

@@ -1,3 +1,4 @@
+export declare function VendorPlaceholder(): import("react").JSX.Element;
 interface VendorStatus {
     success: boolean;
     name?: string;
@@ -7,6 +8,7 @@ interface VendorStatus {
     message: string;
     appUrl?: string;
     title?: string;
+    vendorType: string;
 }
 export declare function VendorProgressItem({ vendor }: {
     vendor: VendorStatus;

package/es/payment/progress-item.js

@@ -1,7 +1,37 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Box, LinearProgress, Typography } from "@mui/material";
+import { Box, LinearProgress, Skeleton, Typography } from "@mui/material";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { Check } from "@mui/icons-material";
+export function VendorPlaceholder() {
+  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: 16, width: 150 }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: 16, width: 50 })
+    ] }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: 8, width: "100%" })
+  ] });
+}
+const getVendorLabel = (vendor, isFailed, t) => {
+  const name = vendor.name || vendor.title;
+  const isCompleted = vendor.status === "delivered";
+  if (vendor.vendorType === "didnames") {
+    if (isFailed) {
+      return t("payment.checkout.vendor.didnames.failed", { name });
+    }
+    if (isCompleted) {
+      return t("payment.checkout.vendor.didnames.completed", { name });
+    }
+    return t("payment.checkout.vendor.didnames.processing", { name });
+  }
+  if (isFailed) {
+    return t("payment.checkout.vendor.launcher.failed", { name });
+  }
+  if (isCompleted) {
+    return t("payment.checkout.vendor.launcher.completed", { name });
+  }
+  return t("payment.checkout.vendor.launcher.processing", { name });
+};
 export function VendorProgressItem({ vendor }) {
   const { t } = useLocaleContext();
   const [displayProgress, setDisplayProgress] = useState(0);
@@ -29,7 +59,7 @@ export function VendorProgressItem({ vendor }) {
         newProgress = Math.min(startProgress + elapsed / 1e3, 99);
       }
       newProgress = Math.round(newProgress);
-      setDisplayProgress((pre) => pre > newProgress ? pre : newProgress);
+      setDisplayProgress((pre) => Math.min(pre > newProgress ? pre : newProgress, 100));
       if (realProgress === 100) {
         return;
       }
@@ -52,11 +82,11 @@ export function VendorProgressItem({ vendor }) {
   }, [startAnimation]);
   const isCompleted = displayProgress >= 100;
   const isFailed = vendor.status === "failed";
-  const nameText = vendor.name || vendor.title;
+  const nameText = getVendorLabel(vendor, isFailed, t);
   if (isFailed) {
     return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
       /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: nameText ? `${nameText} - ${t("payment.checkout.vendor.failed")}` : t("payment.checkout.vendor.failed") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: nameText }),
         /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "error.main", fontWeight: 500 }, children: t("payment.checkout.vendor.progress", { progress: 0 }) })
       ] }),
       /* @__PURE__ */ jsx(
@@ -77,17 +107,23 @@ export function VendorProgressItem({ vendor }) {
       )
     ] });
   }
-  const statusText = isCompleted ? t("payment.checkout.vendor.delivered") : t("payment.checkout.vendor.processing");
+  if (!vendor.name && !vendor.title) {
+    return /* @__PURE__ */ jsx(VendorPlaceholder, {});
+  }
   return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
     /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: nameText ? `${nameText} - ${statusText}` : statusText }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontWeight: 500 }, children: t("payment.checkout.vendor.progress", { progress: displayProgress }) })
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { color: "text.secondary", display: "flex", alignItems: "center" }, children: [
+        nameText,
+        " ",
+        isCompleted ? /* @__PURE__ */ jsx(Check, { sx: { color: "success.main", ml: 0.5 }, fontSize: "small" }) : null
+      ] }),
+      isCompleted ? null : /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontWeight: 500 }, children: t("payment.checkout.vendor.progress", { progress: displayProgress }) })
     ] }),
     /* @__PURE__ */ jsx(
       LinearProgress,
       {
         variant: "determinate",
-        value: Math.min(displayProgress, 100),
+        value: displayProgress || 0,
         sx: {
           height: 8,
           borderRadius: 4,

package/es/payment/success.d.ts

@@ -1,7 +1,7 @@
 type Props = {
     mode: string;
     pageInfo?: any;
-    hasVendor?: boolean;
+    vendorCount?: number;
     sessionId?: string;
     message: string;
     action: string;
@@ -10,5 +10,5 @@ type Props = {
     subscriptionId?: string;
     subscriptions?: any[];
 };
-export default function PaymentSuccess({ mode, pageInfo, hasVendor, sessionId, message, action, payee, invoiceId, subscriptionId, subscriptions, }: Props): import("react").JSX.Element;
+export default function PaymentSuccess({ mode, pageInfo, vendorCount, sessionId, message, action, payee, invoiceId, subscriptionId, subscriptions, }: Props): import("react").JSX.Element;
 export {};

package/es/payment/success.js

@@ -5,11 +5,11 @@ import { useEffect, useRef, useState } from "react";
 import { joinURL } from "ufo";
 import { Button } from "@arcblock/ux";
 import { usePaymentContext } from "../contexts/payment.js";
-import { VendorProgressItem } from "./progress-item.js";
+import { VendorPlaceholder, VendorProgressItem } from "./progress-item.js";
 export default function PaymentSuccess({
   mode,
   pageInfo = {},
-  hasVendor = false,
+  vendorCount = 0,
   sessionId = "",
   message,
   action,
@@ -26,7 +26,7 @@ export default function PaymentSuccess({
   const timerRef = useRef(Date.now());
   let next = null;
   useEffect(() => {
-    if (!hasVendor || !sessionId) return void 0;
+    if (vendorCount === 0 || !sessionId) return void 0;
     const fetchVendorStatus = async (interval2) => {
       try {
         const response = await api.get(joinURL(prefix, `/api/vendors/order/${sessionId}/status`), {});
@@ -50,9 +50,22 @@ export default function PaymentSuccess({
       fetchVendorStatus(interval);
     }, 5e3);
     return () => clearInterval(interval);
-  }, [hasVendor, api, prefix, sessionId]);
+  }, [vendorCount, api, prefix, sessionId]);
+  const renderPlaceholders = () => {
+    const placeholders = [];
+    for (let i = 0; i < vendorCount; i++) {
+      placeholders.push(/* @__PURE__ */ jsx(VendorPlaceholder, {}, `placeholder-${i}`));
+    }
+    return placeholders;
+  };
+  const renderVendors = () => {
+    if (!vendorStatus) return renderPlaceholders();
+    return vendorStatus.vendors?.map((vendor, index) => {
+      return /* @__PURE__ */ jsx(VendorProgressItem, { vendor }, vendor.title || `vendor-${index}`);
+    });
+  };
   const renderVendorProgress = () => {
-    if (!hasVendor || !vendorStatus) return null;
+    if (vendorCount === 0) return null;
     return /* @__PURE__ */ jsxs(
       Paper,
       {
@@ -68,7 +81,7 @@ export default function PaymentSuccess({
           gap: 2
         },
         children: [
-          vendorStatus.vendors?.map((vendor, index) => /* @__PURE__ */ jsx(VendorProgressItem, { vendor }, vendor.title || `vendor-${index}`)),
+          renderVendors(),
           hasFailed ? /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { color: "warning.main", mb: 1 }, children: t("payment.checkout.vendor.failedMsg") }) : null,
           pageInfo?.success_message?.[locale] && isAllCompleted ? /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { color: "text.primary", mb: 1 }, children: pageInfo?.success_message?.[locale] }) : null
         ]

package/es/payment/summary.js

@@ -189,6 +189,7 @@ export default function PaymentSummary({
       setState({ loading: false });
     }
   };
+  const hasSubTotal = +staking > 0 || allowPromotionCodes;
   const ProductCardList = /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -353,7 +354,7 @@ export default function PaymentSummary({
       /* @__PURE__ */ jsx(Collapse, { in: state.expanded || !isMobile, timeout: "auto", unmountOnExit: true, children: ProductCardList })
     ] }) : ProductCardList,
     /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5 } }),
-    +staking > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+    +staking > 0 && /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
       /* @__PURE__ */ jsxs(
         Stack,
         {
@@ -450,103 +451,95 @@ export default function PaymentSummary({
         currencyId: currency.id
       }
     ) }),
-    hasDiscounts && /* @__PURE__ */ jsx(
-      Box,
-      {
-        sx: {
-          py: 1.5
-        },
-        children: sessionDiscounts.map((discount) => {
-          const promotionCodeInfo = discount.promotion_code_details;
-          const couponInfo = discount.coupon_details;
-          const discountDescription = couponInfo ? formatCouponTerms(couponInfo, discountCurrency, locale) : "";
-          const notSupported = discountDescription === t("payment.checkout.coupon.noDiscount");
-          return /* @__PURE__ */ jsxs(Stack, { children: [
-            /* @__PURE__ */ jsxs(
-              Stack,
-              {
-                direction: "row",
-                spacing: 1,
-                sx: {
-                  justifyContent: "space-between",
-                  alignItems: "center"
-                },
-                children: [
-                  /* @__PURE__ */ jsxs(
-                    Stack,
-                    {
-                      direction: "row",
-                      spacing: 1,
-                      sx: {
-                        alignItems: "center",
-                        backgroundColor: "grey.100",
-                        width: "fit-content",
-                        px: 1,
-                        py: 0.5,
-                        borderRadius: 1
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxs(
-                          Typography,
-                          {
-                            sx: {
-                              fontWeight: "medium",
-                              fontSize: "small",
-                              display: "flex",
-                              alignItems: "center",
-                              gap: 0.5
-                            },
-                            children: [
-                              /* @__PURE__ */ jsx(LocalOffer, { sx: { color: "warning.main", fontSize: "small" } }),
-                              promotionCodeInfo?.code || discount.verification_data?.code || t("payment.checkout.discount")
-                            ]
-                          }
-                        ),
-                        !completed && /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            size: "small",
-                            disabled: paymentState.paying || paymentState.stripePaying,
-                            onClick: () => handleRemovePromotion(checkoutSessionId),
-                            sx: {
-                              minWidth: "auto",
-                              width: 16,
-                              height: 16,
-                              color: "text.secondary",
-                              "&.Mui-disabled": {
-                                color: "text.disabled"
-                              }
-                            },
-                            children: /* @__PURE__ */ jsx(Close, { sx: { fontSize: 14 } })
+    hasDiscounts && /* @__PURE__ */ jsx(Box, { children: sessionDiscounts.map((discount) => {
+      const promotionCodeInfo = discount.promotion_code_details;
+      const couponInfo = discount.coupon_details;
+      const discountDescription = couponInfo ? formatCouponTerms(couponInfo, discountCurrency, locale) : "";
+      const notSupported = discountDescription === t("payment.checkout.coupon.noDiscount");
+      return /* @__PURE__ */ jsxs(Stack, { children: [
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            spacing: 1,
+            sx: {
+              justifyContent: "space-between",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  direction: "row",
+                  spacing: 1,
+                  sx: {
+                    alignItems: "center",
+                    backgroundColor: "grey.100",
+                    width: "fit-content",
+                    px: 1,
+                    py: 1,
+                    borderRadius: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        sx: {
+                          fontWeight: "medium",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 0.5
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(LocalOffer, { sx: { color: "warning.main", fontSize: "small" } }),
+                          promotionCodeInfo?.code || discount.verification_data?.code || t("payment.checkout.discount")
+                        ]
+                      }
+                    ),
+                    !completed && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "small",
+                        disabled: paymentState.paying || paymentState.stripePaying,
+                        onClick: () => handleRemovePromotion(checkoutSessionId),
+                        sx: {
+                          minWidth: "auto",
+                          width: 16,
+                          height: 16,
+                          color: "text.secondary",
+                          "&.Mui-disabled": {
+                            color: "text.disabled"
                           }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(Typography, { sx: { color: "text.secondary" }, children: [
-                    "-",
-                    formatAmount(discount.discount_amount || "0", discountCurrency.decimal),
-                    " ",
-                    discountCurrency.symbol
-                  ] })
-                ]
-              }
-            ),
-            discountDescription && /* @__PURE__ */ jsx(
-              Typography,
-              {
-                sx: {
-                  fontSize: "small",
-                  color: notSupported ? "error.main" : "text.secondary",
-                  mt: 0.5
-                },
-                children: discountDescription
-              }
-            )
-          ] }, discount.promotion_code || discount.coupon || `discount-${discount.discount_amount}`);
-        })
-      }
-    ),
+                        },
+                        children: /* @__PURE__ */ jsx(Close, { sx: { fontSize: 14 } })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(Typography, { sx: { color: "text.secondary" }, children: [
+                "-",
+                formatAmount(discount.discount_amount || "0", discountCurrency.decimal),
+                " ",
+                discountCurrency.symbol
+              ] })
+            ]
+          }
+        ),
+        discountDescription && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            sx: {
+              fontSize: "small",
+              color: notSupported ? "error.main" : "text.secondary",
+              mt: 0.5
+            },
+            children: discountDescription
+          }
+        )
+      ] }, discount.promotion_code || discount.coupon || `discount-${discount.discount_amount}`);
+    }) }),
+    hasSubTotal && /* @__PURE__ */ jsx(Divider, { sx: { my: 1 } }),
     /* @__PURE__ */ jsxs(
       Stack,
       {