@blocklet/payment-react 1.20.19 → 1.20.21

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/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/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,
       {

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/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/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.19",
+  "version": "1.20.21",
   "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.19",
+    "@blocklet/payment-types": "1.20.21",
     "@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": "13703fca3eb2151623b303605df104c4a1199741"
+  "gitHead": "43b26f9e7373a99000f6a14762fdab860a562967"
 }

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/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/summary.tsx

@@ -275,6 +275,7 @@ export default function PaymentSummary({
     }
   };
 
+  const hasSubTotal = +staking > 0 || allowPromotionCodes;
   const ProductCardList = (
     <Stack
       className="cko-product-list"
@@ -422,7 +423,7 @@ export default function PaymentSummary({
         )}
         <Divider sx={{ mt: 2.5, mb: 2.5 }} />
         {+staking > 0 && (
-          <>
+          <Stack spacing={1}>
             <Stack
               direction="row"
               spacing={1}
@@ -465,7 +466,7 @@ export default function PaymentSummary({
                 {formatAmount(staking, discountCurrency.decimal)} {discountCurrency.symbol}
               </Typography>
             </Stack>
-          </>
+          </Stack>
         )}
         {(allowPromotionCodes || hasDiscounts) && (
           <Stack
@@ -502,10 +503,7 @@ export default function PaymentSummary({
 
         {/* Promotion Code Details */}
         {hasDiscounts && (
-          <Box
-            sx={{
-              py: 1.5,
-            }}>
+          <Box>
             {sessionDiscounts.map((discount: any) => {
               const promotionCodeInfo = discount.promotion_code_details;
               const couponInfo = discount.coupon_details;
@@ -529,13 +527,12 @@ export default function PaymentSummary({
                         backgroundColor: 'grey.100',
                         width: 'fit-content',
                         px: 1,
-                        py: 0.5,
+                        py: 1,
                         borderRadius: 1,
                       }}>
                       <Typography
                         sx={{
                           fontWeight: 'medium',
-                          fontSize: 'small',
                           display: 'flex',
                           alignItems: 'center',
                           gap: 0.5,
@@ -582,7 +579,7 @@ export default function PaymentSummary({
             })}
           </Box>
         )}
-
+        {hasSubTotal && <Divider sx={{ my: 1 }} />}
         <Stack
           sx={{
             display: 'flex',