@blocklet/payment-react 1.20.20 → 1.20.22

package/lib/components/table.js

@@ -22,6 +22,7 @@ const Table = _react.default.memo(({
   footer = true,
   hasRowLink = false,
   emptyNodeText = "",
+  bordered = true,
   ...rest
 }) => {
   const {
@@ -67,7 +68,8 @@ const Table = _react.default.memo(({
     ...rest,
     components,
     hasRowLink,
-    isMobile
+    isMobile,
+    bordered
   });
 });
 const Wrapped = (0, _system.styled)(_Datatable.default)`
@@ -75,27 +77,23 @@ const Wrapped = (0, _system.styled)(_Datatable.default)`
     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 {
@@ -106,11 +104,11 @@ const Wrapped = (0, _system.styled)(_Datatable.default)`
 }) => 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;" : ""}
     }
   }
 
@@ -120,11 +118,11 @@ const Wrapped = (0, _system.styled)(_Datatable.default)`
 }) => 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) {
@@ -239,6 +237,18 @@ const Wrapped = (0, _system.styled)(_Datatable.default)`
     [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;
+      }
+    }
+    ` : ""}
   }
 `;
 module.exports = Table;

package/lib/locales/en.js

@@ -192,7 +192,17 @@ module.exports = (0, _flat.default)({
         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/lib/locales/zh.js

@@ -192,7 +192,17 @@ module.exports = (0, _flat.default)({
         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/lib/payment/form/index.js

@@ -577,10 +577,17 @@ function PaymentForm({
     });
     await handleConnected();
   };
-  const onStripeCancel = () => {
-    setState({
-      stripePaying: false
-    });
+  const onStripeCancel = async () => {
+    try {
+      await _api.default.post(`/api/checkout-sessions/${checkoutSession.id}/abort-stripe`);
+    } catch (err) {
+      console.error(err);
+      _Toast.default.error((0, _util2.formatError)(err));
+    } finally {
+      setState({
+        stripePaying: false
+      });
+    }
   };
   (0, _react.useEffect)(() => {
     const handleKeyDown = e => {

package/lib/payment/index.js

@@ -360,7 +360,9 @@ function PaymentInner({
         children: [completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_success.default, {
           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: (0, _util2.getStatementDescriptor)(state.checkoutSession.line_items),
           action: state.checkoutSession.mode,

package/lib/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/lib/payment/progress-item.js

@@ -3,11 +3,73 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.VendorPlaceholder = VendorPlaceholder;
 exports.VendorProgressItem = VendorProgressItem;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _react = require("react");
+var _iconsMaterial = require("@mui/icons-material");
+function VendorPlaceholder() {
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      mb: 2
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        mb: 1
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        variant: "rounded",
+        height: 16,
+        width: 150
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        variant: "rounded",
+        height: 16,
+        width: 50
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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
+  });
+};
 function VendorProgressItem({
   vendor
 }) {
@@ -39,7 +101,7 @@ function VendorProgressItem({
         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;
       }
@@ -62,7 +124,7 @@ function VendorProgressItem({
   }, [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__ */(0, _jsxRuntime.jsxs)(_material.Box, {
       sx: {
@@ -80,7 +142,7 @@ function VendorProgressItem({
           sx: {
             color: "text.secondary"
           },
-          children: nameText ? `${nameText} - ${t("payment.checkout.vendor.failed")}` : t("payment.checkout.vendor.failed")
+          children: nameText
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           variant: "body2",
           sx: {
@@ -106,7 +168,9 @@ function VendorProgressItem({
       })]
     });
   }
-  const statusText = isCompleted ? t("payment.checkout.vendor.delivered") : t("payment.checkout.vendor.processing");
+  if (!vendor.name && !vendor.title) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(VendorPlaceholder, {});
+  }
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     sx: {
       mb: 2
@@ -118,13 +182,21 @@ function VendorProgressItem({
         alignItems: "center",
         mb: 1
       },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
         variant: "body2",
         sx: {
-          color: "text.secondary"
+          color: "text.secondary",
+          display: "flex",
+          alignItems: "center"
         },
-        children: nameText ? `${nameText} - ${statusText}` : statusText
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: [nameText, " ", isCompleted ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Check, {
+          sx: {
+            color: "success.main",
+            ml: 0.5
+          },
+          fontSize: "small"
+        }) : null]
+      }), isCompleted ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "body2",
         sx: {
           color: "text.secondary",
@@ -136,7 +208,7 @@ function VendorProgressItem({
       })]
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.LinearProgress, {
       variant: "determinate",
-      value: Math.min(displayProgress, 100),
+      value: displayProgress || 0,
       sx: {
         height: 8,
         borderRadius: 4,

package/lib/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/lib/payment/success.js

@@ -15,7 +15,7 @@ var _progressItem = require("./progress-item");
 function PaymentSuccess({
   mode,
   pageInfo = {},
-  hasVendor = false,
+  vendorCount = 0,
   sessionId = "",
   message,
   action,
@@ -38,7 +38,7 @@ function PaymentSuccess({
   const timerRef = (0, _react.useRef)(Date.now());
   let next = null;
   (0, _react.useEffect)(() => {
-    if (!hasVendor || !sessionId) return void 0;
+    if (vendorCount === 0 || !sessionId) return void 0;
     const fetchVendorStatus = async interval2 => {
       try {
         const response = await api.get((0, _ufo.joinURL)(prefix, `/api/vendors/order/${sessionId}/status`), {});
@@ -60,9 +60,24 @@ 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__ */(0, _jsxRuntime.jsx)(_progressItem.VendorPlaceholder, {}, `placeholder-${i}`));
+    }
+    return placeholders;
+  };
+  const renderVendors = () => {
+    if (!vendorStatus) return renderPlaceholders();
+    return vendorStatus.vendors?.map((vendor, index) => {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_progressItem.VendorProgressItem, {
+        vendor
+      }, vendor.title || `vendor-${index}`);
+    });
+  };
   const renderVendorProgress = () => {
-    if (!hasVendor || !vendorStatus) return null;
+    if (vendorCount === 0) return null;
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Paper, {
       elevation: 0,
       sx: {
@@ -75,9 +90,7 @@ function PaymentSuccess({
         flexDirection: "column",
         gap: 2
       },
-      children: [vendorStatus.vendors?.map((vendor, index) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_progressItem.VendorProgressItem, {
-        vendor
-      }, vendor.title || `vendor-${index}`)), hasFailed ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: [renderVendors(), hasFailed ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h6",
         sx: {
           color: "warning.main",

package/lib/payment/summary.js

@@ -214,6 +214,7 @@ function PaymentSummary({
       });
     }
   };
+  const hasSubTotal = +staking > 0 || allowPromotionCodes;
   const ProductCardList = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     className: "cko-product-list",
     sx: {
@@ -368,7 +369,8 @@ function PaymentSummary({
           mt: 2.5,
           mb: 2.5
         }
-      }), +staking > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      }), +staking > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 1,
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
           spacing: 1,
@@ -469,9 +471,6 @@ function PaymentSummary({
           currencyId: currency.id
         })
       }), hasDiscounts && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          py: 1.5
-        },
         children: sessionDiscounts.map(discount => {
           const promotionCodeInfo = discount.promotion_code_details;
           const couponInfo = discount.coupon_details;
@@ -493,13 +492,12 @@ function PaymentSummary({
                   backgroundColor: "grey.100",
                   width: "fit-content",
                   px: 1,
-                  py: 0.5,
+                  py: 1,
                   borderRadius: 1
                 },
                 children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                   sx: {
                     fontWeight: "medium",
-                    fontSize: "small",
                     display: "flex",
                     alignItems: "center",
                     gap: 0.5
@@ -545,6 +543,10 @@ function PaymentSummary({
             })]
           }, discount.promotion_code || discount.coupon || `discount-${discount.discount_amount}`);
         })
+      }), hasSubTotal && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {
+        sx: {
+          my: 1
+        }
       }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         sx: {
           display: "flex",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.20.20",
+  "version": "1.20.22",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.20.20",
+    "@blocklet/payment-types": "1.20.22",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "0aa636abf410af4ba08cf03fd4a15ae3beab115d"
+  "gitHead": "a0a691de0cd6e47efbc0e4de01d200bb9193c435"
 }

package/src/components/table.tsx

@@ -12,7 +12,16 @@ function EmptyStub() {
 }
 
 const Table = React.memo(
-  ({ options, columns, toolbar = true, footer = true, hasRowLink = false, emptyNodeText = '', ...rest }: any) => {
+  ({
+    options,
+    columns,
+    toolbar = true,
+    footer = true,
+    hasRowLink = false,
+    emptyNodeText = '',
+    bordered = true,
+    ...rest
+  }: any) => {
     const { locale, t } = useLocaleContext();
     const { isMobile } = useMobile();
 
@@ -52,6 +61,7 @@ const Table = React.memo(
         components={components}
         hasRowLink={hasRowLink}
         isMobile={isMobile}
+        bordered={bordered}
       />
     );
   }
@@ -64,6 +74,7 @@ interface TableProps {
   footer?: boolean;
   hasRowLink?: boolean;
   emptyNodeText?: string;
+  bordered?: boolean;
   mobileTDFlexDirection?: string;
 }
 
@@ -75,19 +86,29 @@ const Wrapped = styled(Datatable)`
   }`
       : ''}
   .MuiPaper-root {
-    border-radius: 8px;
+    border-radius: ${(props: any) => (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 as number)}px`};
+    ${(props: any) =>
+      props?.bordered
+        ? `
+      outline: 1px solid;
+      outline-color: ${props.theme.palette.divider};
+      border-radius: ${2 * (props.theme.shape.borderRadius as number)}px;
+    `
+        : ''}
     overflow: hidden;
   }
   [class*='MUIDataTable-responsiveBase'] {
-    outline: 1px solid;
-    outline-color: ${({ theme }) => theme.palette.divider};
-    border-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
+    ${(props: any) =>
+      props?.bordered
+        ? `
+      outline: 1px solid;
+      outline-color: ${props.theme.palette.divider};
+      border-radius: ${2 * (props.theme.shape.borderRadius as number)}px;
+    `
+        : ''}
   }
 
   th.MuiTableCell-head {
@@ -96,11 +117,11 @@ const Wrapped = styled(Datatable)`
     background: ${({ theme }) => theme.palette.grey[50]};
     border-bottom: none;
     &:first-of-type {
-      border-top-left-radius: 8px;
+      ${(props: any) => (props?.bordered ? 'border-top-left-radius: 8px;' : '')}
       padding-left: 20px;
     }
     &:last-of-type {
-      border-top-right-radius: 8px;
+      ${(props: any) => (props?.bordered ? 'border-top-right-radius: 8px;' : '')}
     }
   }
 
@@ -108,11 +129,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: any) => (props?.bordered ? 'border-bottom-left-radius: 8px;' : '')}
   }
 
   tr.MuiTableRow-root:last-of-type td:last-of-type {
-    border-bottom-right-radius: 8px;
+    ${(props: any) => (props?.bordered ? 'border-bottom-right-radius: 8px;' : '')}
   }
 
   tr.MuiTableRow-root:nth-of-type(even) {
@@ -214,6 +235,19 @@ 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;
+      }
+    }
+    `
+        : ''}
   }
 `;
 

package/src/locales/en.tsx

@@ -190,6 +190,16 @@ export default flat({
         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!',
+        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:

package/src/locales/zh.tsx

@@ -188,6 +188,16 @@ export default flat({
         delivered: '安装成功',
         failed: '安装失败',
         failedMsg: '很抱歉，安装过程中遇到了一些问题。我们正在处理这个问题，稍后会自动为您退款。感谢您的耐心等待！',
+        launcher: {
+          processing: '正在安装 {name}',
+          completed: '安装 {name} 成功',
+          failed: '安装 {name} 失败',
+        },
+        didnames: {
+          processing: '正在注册 {domain}',
+          completed: '注册 {domain} 成功',
+          failed: '注册 {domain} 失败',
+        },
       },
       confirm: {
         withStake:

package/src/payment/form/index.tsx

@@ -639,8 +639,15 @@ export default function PaymentForm({
     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(() => {

package/src/payment/index.tsx

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