@blocklet/payment-react 1.14.21 → 1.14.23

package/lib/payment/index.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PaymentInner = PaymentInner;
 exports.Root = void 0;
 module.exports = Payment;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _Header = _interopRequireDefault(require("@blocklet/ui-react/lib/Header"));
 var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
 var _system = require("@mui/system");
@@ -22,122 +22,15 @@ var _util2 = require("../libs/util");
 var _error = _interopRequireDefault(require("./error"));
 var _footer = _interopRequireDefault(require("./footer"));
 var _form = _interopRequireDefault(require("./form"));
-var _header = _interopRequireDefault(require("./header"));
 var _overview = _interopRequireDefault(require("./skeleton/overview"));
 var _payment2 = _interopRequireDefault(require("./skeleton/payment"));
 var _success = _interopRequireDefault(require("./success"));
 var _summary = _interopRequireDefault(require("./summary"));
+var _mobile = require("../hooks/mobile");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-Payment.defaultProps = {
-  completed: false,
-  error: null
-};
-function Payment({
-  checkoutSession,
-  paymentMethods,
-  paymentIntent,
-  paymentLink,
-  customer,
-  completed,
-  error,
-  mode,
-  onPaid,
-  onError,
-  onChange,
-  goBack,
-  action
-}) {
-  const {
-    t
-  } = (0, _context.useLocaleContext)();
-  const {
-    refresh,
-    livemode,
-    setLivemode
-  } = (0, _payment.usePaymentContext)();
-  const [delay, setDelay] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    setTimeout(() => {
-      setDelay(true);
-    }, 500);
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (checkoutSession) {
-      if (livemode !== checkoutSession.livemode) {
-        setLivemode(checkoutSession.livemode);
-        setTimeout(() => {
-          refresh();
-        }, 10);
-      }
-    }
-  }, [checkoutSession, livemode, setLivemode, refresh]);
-  if (error) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
-      mode,
-      title: "Oops",
-      description: (0, _util2.formatError)(error)
-    });
-  }
-  if (!checkoutSession || !delay) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
-      mode,
-      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-        className: "cko-container",
-        sx: {
-          gap: {
-            sm: mode === "standalone" ? 0 : 8
-          }
-        },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-          className: "cko-overview",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_overview.default, {})
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-          className: "cko-payment",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment2.default, {})
-        }), mode === "standalone" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
-          className: "cko-footer"
-        })]
-      })
-    });
-  }
-  if (checkoutSession.expires_at <= Math.round(Date.now() / 1e3)) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
-      mode,
-      title: t("payment.checkout.expired.title"),
-      description: t("payment.checkout.expired.description")
-    });
-  }
-  if (checkoutSession.status === "complete") {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
-      mode,
-      title: t("payment.checkout.complete.title"),
-      description: t("payment.checkout.complete.description")
-    });
-  }
-  if (!checkoutSession.line_items.length) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
-      mode,
-      title: t("payment.checkout.emptyItems.title"),
-      description: t("payment.checkout.emptyItems.description")
-    });
-  }
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(PaymentInner, {
-    checkoutSession,
-    paymentMethods,
-    paymentLink,
-    paymentIntent,
-    completed,
-    customer,
-    onPaid,
-    onError,
-    onChange,
-    goBack,
-    mode,
-    action
-  });
-}
 PaymentInner.defaultProps = {
-  completed: false
+  completed: false,
+  showCheckoutSummary: true
 };
 function PaymentInner({
   checkoutSession,
@@ -150,22 +43,25 @@ function PaymentInner({
   onPaid,
   onError,
   onChange,
-  goBack,
-  action
+  action,
+  showCheckoutSummary = true
 }) {
   const {
-    t,
-    locale
+    t
   } = (0, _context.useLocaleContext)();
   const {
     settings,
     session
   } = (0, _payment.usePaymentContext)();
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
   const [state, setState] = (0, _ahooks.useSetState)({
     checkoutSession
   });
   const defaultCurrencyId = state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
   const defaultMethodId = paymentMethods.find(m => m.payment_currencies.some(c => c.id === defaultCurrencyId))?.id;
+  const hideSummaryCard = mode.endsWith("-minimal") || !showCheckoutSummary;
   const methods = (0, _reactHookForm.useForm)({
     defaultValues: {
       customer_name: customer?.name || session?.user?.fullName || "",
@@ -256,18 +152,10 @@ function PaymentInner({
       _Toast.default.error((0, _util2.formatError)(err));
     }
   };
-  const min = parseFloat(paymentLink?.donation_settings?.amount.minimum || "0");
-  const max = paymentLink?.donation_settings?.amount.maximum ? parseFloat(paymentLink?.donation_settings?.amount.maximum) : Infinity;
   const onChangeAmount = async ({
     priceId,
     amount
   }) => {
-    if (Number(amount) < min || Number(amount) > max) {
-      return;
-    }
-    if (amount && (0, _util2.formatAmountPrecisionLimit)(String(amount), locale)) {
-      return;
-    }
     try {
       const {
         data
@@ -291,8 +179,196 @@ function PaymentInner({
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.FormProvider, {
     ...methods,
-    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      className: "cko-container",
+      sx: {
+        gap: {
+          sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8
+        }
+      },
+      children: [!hideSummaryCard && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+        in: true,
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          className: "base-card cko-overview",
+          direction: "column",
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_summary.default, {
+            items: state.checkoutSession.line_items,
+            trialInDays: state.checkoutSession.subscription_data?.trial_period_days || 0,
+            billingThreshold: Math.max(state.checkoutSession.subscription_data?.billing_threshold_amount || 0,
+            // @ts-ignore
+            state.checkoutSession.subscription_data?.min_stake_amount || 0),
+            showStaking: method.type === "arcblock",
+            currency,
+            onUpsell,
+            onDownsell,
+            onApplyCrossSell,
+            onCancelCrossSell,
+            onChangeAmount,
+            checkoutSessionId: state.checkoutSession.id,
+            crossSellBehavior: state.checkoutSession.cross_sell_behavior,
+            donationSettings: paymentLink?.donation_settings,
+            action
+          }), mode === "standalone" && !isMobile && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
+            className: "cko-footer",
+            sx: {
+              color: "var(--foregrounds-fg-muted, #98A3B1)"
+            }
+          })]
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        className: "base-card cko-payment",
+        direction: "column",
+        spacing: {
+          xs: 2,
+          sm: 3
+        },
+        children: [completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_success.default, {
+          mode,
+          payee: (0, _util2.getStatementDescriptor)(state.checkoutSession.line_items),
+          action: state.checkoutSession.mode,
+          invoiceId: state.checkoutSession.invoice_id,
+          subscriptionId: state.checkoutSession.subscription_id,
+          message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${state.checkoutSession.submit_type === "donate" ? "donate" : state.checkoutSession.mode}`)
+        }), !completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
+          checkoutSession: state.checkoutSession,
+          paymentMethods,
+          paymentIntent,
+          paymentLink,
+          customer,
+          onPaid: handlePaid,
+          onError,
+          mode,
+          action
+        })]
+      }), mode === "standalone" && isMobile && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
+        className: "cko-footer",
+        sx: {
+          color: "var(--foregrounds-fg-muted, #98A3B1)"
+        }
+      })]
+    })
+  });
+}
+Payment.defaultProps = {
+  completed: false,
+  error: null,
+  showCheckoutSummary: true
+};
+function Payment({
+  checkoutSession,
+  paymentMethods,
+  paymentIntent,
+  paymentLink,
+  customer,
+  completed,
+  // error,
+  mode,
+  onPaid,
+  onError,
+  onChange,
+  goBack,
+  action,
+  showCheckoutSummary = true
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    refresh,
+    livemode,
+    setLivemode
+  } = (0, _payment.usePaymentContext)();
+  const [delay, setDelay] = (0, _react.useState)(false);
+  const hideSummaryCard = mode.endsWith("-minimal") || !showCheckoutSummary;
+  (0, _react.useEffect)(() => {
+    setTimeout(() => {
+      setDelay(true);
+    }, 500);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (checkoutSession) {
+      if (livemode !== checkoutSession.livemode) {
+        setLivemode(checkoutSession.livemode);
+        setTimeout(() => {
+          refresh();
+        }, 10);
+      }
+    }
+  }, [checkoutSession, livemode, setLivemode, refresh]);
+  const renderContent = () => {
+    if (!checkoutSession || !delay) {
+      return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        className: "cko-container",
+        sx: {
+          gap: {
+            sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8
+          }
+        },
+        children: [!hideSummaryCard && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          className: "base-card cko-overview",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            className: "cko-product",
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_overview.default, {})
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          className: "base-card cko-payment",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment2.default, {})
+        })]
+      });
+    }
+    if (checkoutSession.expires_at <= Math.round(Date.now() / 1e3)) {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
+        mode,
+        title: t("payment.checkout.expired.title"),
+        description: t("payment.checkout.expired.description")
+      });
+    }
+    if (!checkoutSession.line_items.length) {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
+        mode,
+        title: t("payment.checkout.emptyItems.title"),
+        description: t("payment.checkout.emptyItems.description")
+      });
+    }
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(PaymentInner, {
+      checkoutSession,
+      paymentMethods,
+      paymentLink,
+      paymentIntent,
+      completed: completed || checkoutSession.status === "complete",
+      customer,
+      onPaid,
+      onError,
+      onChange,
+      goBack,
+      mode,
+      action,
+      showCheckoutSummary
+    });
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    display: "flex",
+    flexDirection: "column",
+    sx: {
+      height: mode === "standalone" ? "100vh" : "auto",
+      overflow: "hidden"
+    },
+    children: [mode === "standalone" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_Header.default, {
+      meta: void 0,
+      addons: void 0,
+      sessionManagerProps: void 0,
+      homeLink: void 0,
+      theme: void 0,
+      hideNavMenu: void 0,
+      maxWidth: false,
+      sx: {
+        borderBottom: "1px solid var(--stroke-border-base, #EFF1F5)"
+      }
+    }) : null, /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
       mode,
+      sx: {
+        flex: 1
+      },
       children: [goBack && /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.ArrowBackOutlined, {
         sx: {
           mr: 0.5,
@@ -303,108 +379,59 @@ function PaymentInner({
         },
         onClick: goBack,
         fontSize: "medium"
-      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
         className: "cko-container",
         sx: {
           gap: {
             sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8
           }
         },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
-          in: true,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-            className: "cko-overview",
-            direction: "column",
-            children: [mode === "standalone" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_header.default, {
-              checkoutSession: state.checkoutSession
-            }) : null, /* @__PURE__ */(0, _jsxRuntime.jsx)(_summary.default, {
-              items: state.checkoutSession.line_items,
-              trialInDays: state.checkoutSession.subscription_data?.trial_period_days || 0,
-              billingThreshold: Math.max(state.checkoutSession.subscription_data?.billing_threshold_amount || 0,
-              // @ts-ignore
-              state.checkoutSession.subscription_data?.min_stake_amount || 0),
-              showStaking: method.type === "arcblock",
-              currency,
-              onUpsell,
-              onDownsell,
-              onApplyCrossSell,
-              onCancelCrossSell,
-              onChangeAmount,
-              checkoutSessionId: state.checkoutSession.id,
-              crossSellBehavior: state.checkoutSession.cross_sell_behavior,
-              donationSettings: paymentLink?.donation_settings,
-              action
-            })]
-          })
-        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          className: "cko-payment",
-          direction: "column",
-          spacing: {
-            xs: 2,
-            sm: 3
-          },
-          children: [completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_success.default, {
-            mode,
-            payee: (0, _util2.getStatementDescriptor)(state.checkoutSession.line_items),
-            action: state.checkoutSession.mode,
-            invoiceId: state.checkoutSession.invoice_id,
-            subscriptionId: state.checkoutSession.subscription_id,
-            message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${state.checkoutSession.submit_type === "donate" ? "donate" : state.checkoutSession.mode}`)
-          }), !completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
-            checkoutSession: state.checkoutSession,
-            paymentMethods,
-            paymentIntent,
-            paymentLink,
-            customer,
-            onPaid: handlePaid,
-            onError,
-            mode,
-            action
-          })]
-        }), mode === "standalone" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
-          className: "cko-footer"
-        })]
+        children: renderContent()
       })]
-    })
+    })]
   });
 }
 const Root = exports.Root = (0, _system.styled)(_material.Box)`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  // justify-content: center;
   align-items: center;
-  min-height: ${props => props.mode === "standalone" ? "100vh" : "auto"};
+  overflow: hidden;
+  // min-height: ${props => props.mode === "standalone" ? "100vh" : "auto"};
   position: relative;
-
-  ${props => props.mode === "standalone" ? `&:before {
-    animation-fill-mode: both;
-    background: #ffffff;
-    content: '';
-    height: 100%;
-    position: fixed;
-    right: 0;
-    top: 0;
-    transform-origin: right;
-    width: 50%;
-    box-shadow: 15px 0 30px 0 rgba(0, 0, 0, 0.18);
-  }` : ""}
-
   .cko-container {
+    overflow: hidden;
     width: 100%;
-    max-width: ${props => props.mode.endsWith("-minimal") ? "400px" : "1000px"};
+    // max-width: ${props => props.mode.endsWith("-minimal") ? "400px" : "1000px"};
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: center;
+    // gap: 4px;
     position: relative;
-    padding: ${props => props.mode === "standalone" ? "0 16px" : "0"};
+    flex: 1;
+    padding: 1px;
+    // padding: ${props => props.mode === "standalone" ? "0 16px" : "0"};
+  }
+
+  .base-card {
+    border: none;
+    border-radius: 0;
+    padding: ${props => props.mode === "standalone" ? "100px 40px 20px" : "20px 0"};
+    box-shadow: none;
+    flex: 1;
+    max-width: 582px;
   }
 
   .cko-overview {
-    width: ${props => props.mode.endsWith("-minimal") ? "100%" : "400px"};
-    min-height: ${props => props.mode === "standalone" ? "540px" : "auto"};
+    // width: ${props => props.mode.endsWith("-minimal") ? "100%" : "400px"};
+    // min-height: ${props => props.mode === "standalone" ? "540px" : "auto"};
     position: relative;
-    display: ${props => props.mode.endsWith("-minimal") ? "none" : "block"};
+    flex-direction: column;
+    display: ${props => props.mode.endsWith("-minimal") ? "none" : "flex"};
+    background: var(--backgrounds-bg-base);
+    min-height: 'auto';
+    // width: 502px;
   }
   .cko-header {
     left: 0;
@@ -417,7 +444,8 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
       box-shadow 0.15s ease-out;
   }
   .cko-product {
-    margin-top: ${props => props.mode === "standalone" ? "64px" : "0"};
+    flex: 1;
+    overflow: hidden;
   }
   .cko-product-summary {
     width: 100%;
@@ -430,29 +458,50 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   }
 
   .cko-payment {
-    width: ${props => props.mode.endsWith("-minimal") ? "100%" : "400px"};
-    .MuiInputBase-root {
-      border-radius: 0;
+    width: 502px;
+    // width: ${props => props.mode.endsWith("-minimal") ? "100%" : "400px"};
+    // box-shadow: -4px 0px 8px 0px rgba(2, 7, 19, 0.04);
+    padding-left: ${props => props.mode === "standalone" ? "40px" : "20px"};
+    position: relative;
+    &:before {
+      -webkit-animation-fill-mode: both;
+      content: '';
+      height: 100%;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      transform-origin: left center;
+      width: 8px;
+      box-shadow: -4px 0px 8px 0px rgba(2, 7, 19, 0.04);
     }
   }
+  .cko-payment-contact {
+    overflow: hidden;
+  }
+  .cko-footer {
+    display: ${props => props.mode.endsWith("-minimal") ? "none" : "block"};
+    text-align: center;
+    margin-top: 20px;
+  }
 
   .cko-payment-form {
-    .MuiInputAdornment-positionStart {
-      width: 50px;
-    }
+    // .MuiInputAdornment-positionStart {
+    //   width: 50px;
+    // }
 
+    .MuiFormLabel-root {
+      color: var(--foregrounds-fg-base, #010714);
+      font-weight: 500;
+      margin-top: 12px;
+      margin-bottom: 4px;
+    }
     .MuiBox-root {
-      border: 1px solid #ccc;
-      margin: -1px 0 0 -1px;
+      margin: 0;
     }
 
     .MuiFormHelperText-root {
       margin-left: 14px;
     }
-
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
   }
 
   .cko-payment-methods {
@@ -460,9 +509,9 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
 
   .cko-payment-submit {
     .MuiButtonBase-root {
-      border-radius: 0;
       font-size: 1.3rem;
       position: relative;
+      padding: 4px 22px;
     }
 
     .cko-submit-progress {
@@ -477,17 +526,30 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   .cko-header {
   }
 
-  .cko-footer {
-    position: absolute;
-    bottom: 0;
-    left: 12px;
-    margin: 12px 0;
-    display: ${props => props.mode.endsWith("-minimal") ? "none" : "block"};
+  .product-item {
+    border-radius: var(--radius-l, 12px);
+    border: 1px solid var(--stroke-border-base, #eff1f5);
+    .product-item-content {
+      padding: 16px;
+      background: var(--backgrounds-bg-subtle, #f9fafb);
+      border-top-left-radius: var(--radius-l, 12px);
+      border-top-right-radius: var(--radius-l, 12px);
+    }
+    .product-item-upsell {
+      margin-top: 0;
+      padding: 16px;
+      background: var(--backgrounds-bg-component, #f1f3f5);
+      border-bottom-left-radius: var(--radius-l, 12px);
+      border-bottom-right-radius: var(--radius-l, 12px);
+    }
   }
 
   @media (max-width: ${({
   theme
 }) => theme.breakpoints.values.md}px) {
+    background: ${props => props.mode === "standalone" ? "var(--backgrounds-bg-subtle, #F9FAFB)" : "transparent"};
+    padding-top: 0;
+    overflow: auto;
     &:before {
       display: none;
     }
@@ -495,20 +557,35 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
       flex-direction: column;
       align-items: center;
       gap: 32px;
-      min-width: 350px;
-      max-width: 400px;
+      overflow: visible;
+      min-width: 200px;
     }
     .cko-overview {
       width: 100%;
       min-height: auto;
+      flex: none;
     }
     .cko-payment {
       width: 100%;
+      height: fit-content;
+      flex: none;
+      &:before {
+        display: none;
+      }
     }
 
     .cko-footer {
-      position: static;
+      position: relative;
+      margin-bottom: 4px;
       margin-top: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(0);
+    }
+    .base-card {
+      box-shadow: none;
+      border-radius: 0;
+      padding: 20px;
     }
   }
 `;