@blocklet/payment-react 1.14.21 → 1.14.22

package/es/payment/index.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
+import Header from "@blocklet/ui-react/lib/Header";
 import { ArrowBackOutlined } from "@mui/icons-material";
 import { Box, Fade, Stack } from "@mui/material";
 import { styled } from "@mui/system";
@@ -10,120 +11,19 @@ import { useEffect, useState } from "react";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { usePaymentContext } from "../contexts/payment.js";
 import api from "../libs/api.js";
-import {
-  findCurrency,
-  formatAmountPrecisionLimit,
-  formatError,
-  getStatementDescriptor,
-  isValidCountry
-} from "../libs/util.js";
+import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from "../libs/util.js";
 import PaymentError from "./error.js";
 import CheckoutFooter from "./footer.js";
 import PaymentForm from "./form/index.js";
-import PaymentHeader from "./header.js";
 import OverviewSkeleton from "./skeleton/overview.js";
 import PaymentSkeleton from "./skeleton/payment.js";
 import PaymentSuccess from "./success.js";
 import PaymentSummary from "./summary.js";
-Payment.defaultProps = {
-  completed: false,
-  error: null
-};
-export default function Payment({
-  checkoutSession,
-  paymentMethods,
-  paymentIntent,
-  paymentLink,
-  customer,
-  completed,
-  error,
-  mode,
-  onPaid,
-  onError,
-  onChange,
-  goBack,
-  action
-}) {
-  const { t } = useLocaleContext();
-  const { refresh, livemode, setLivemode } = usePaymentContext();
-  const [delay, setDelay] = useState(false);
-  useEffect(() => {
-    setTimeout(() => {
-      setDelay(true);
-    }, 500);
-  }, []);
-  useEffect(() => {
-    if (checkoutSession) {
-      if (livemode !== checkoutSession.livemode) {
-        setLivemode(checkoutSession.livemode);
-        setTimeout(() => {
-          refresh();
-        }, 10);
-      }
-    }
-  }, [checkoutSession, livemode, setLivemode, refresh]);
-  if (error) {
-    return /* @__PURE__ */ jsx(PaymentError, { mode, title: "Oops", description: formatError(error) });
-  }
-  if (!checkoutSession || !delay) {
-    return /* @__PURE__ */ jsx(Root, { mode, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : 8 } }, children: [
-      /* @__PURE__ */ jsx(Stack, { className: "cko-overview", children: /* @__PURE__ */ jsx(OverviewSkeleton, {}) }),
-      /* @__PURE__ */ jsx(Stack, { className: "cko-payment", children: /* @__PURE__ */ jsx(PaymentSkeleton, {}) }),
-      mode === "standalone" && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer" })
-    ] }) });
-  }
-  if (checkoutSession.expires_at <= Math.round(Date.now() / 1e3)) {
-    return /* @__PURE__ */ jsx(
-      PaymentError,
-      {
-        mode,
-        title: t("payment.checkout.expired.title"),
-        description: t("payment.checkout.expired.description")
-      }
-    );
-  }
-  if (checkoutSession.status === "complete") {
-    return /* @__PURE__ */ jsx(
-      PaymentError,
-      {
-        mode,
-        title: t("payment.checkout.complete.title"),
-        description: t("payment.checkout.complete.description")
-      }
-    );
-  }
-  if (!checkoutSession.line_items.length) {
-    return /* @__PURE__ */ jsx(
-      PaymentError,
-      {
-        mode,
-        title: t("payment.checkout.emptyItems.title"),
-        description: t("payment.checkout.emptyItems.description")
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    PaymentInner,
-    {
-      checkoutSession,
-      paymentMethods,
-      paymentLink,
-      paymentIntent,
-      completed,
-      customer,
-      onPaid,
-      onError,
-      onChange,
-      goBack,
-      mode,
-      action
-    }
-  );
-}
+import { useMobile } from "../hooks/mobile.js";
 PaymentInner.defaultProps = {
   completed: false
 };
-export function PaymentInner({
+function PaymentInner({
   checkoutSession,
   paymentMethods,
   paymentLink,
@@ -134,11 +34,11 @@ export function PaymentInner({
   onPaid,
   onError,
   onChange,
-  goBack,
   action
 }) {
-  const { t, locale } = useLocaleContext();
+  const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
+  const { isMobile } = useMobile();
   const [state, setState] = 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;
@@ -207,15 +107,7 @@ export function PaymentInner({
       Toast.error(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 && formatAmountPrecisionLimit(String(amount), locale)) {
-      return;
-    }
     try {
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/amount`, {
         priceId,
@@ -231,112 +123,215 @@ export function PaymentInner({
     setState({ checkoutSession: result.checkoutSession });
     onPaid(result);
   };
-  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsxs(Root, { mode, children: [
-    goBack && /* @__PURE__ */ jsx(
-      ArrowBackOutlined,
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: [
+    /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-overview base-card", direction: "column", children: [
+      /* @__PURE__ */ jsx(
+        PaymentSummary,
+        {
+          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__ */ jsx(CheckoutFooter, { className: "cko-footer", sx: { color: "var(--foregrounds-fg-muted, #98A3B1)" } })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Stack, { className: "cko-payment base-card", direction: "column", spacing: { xs: 2, sm: 3 }, children: [
+      completed && /* @__PURE__ */ jsx(
+        PaymentSuccess,
+        {
+          mode,
+          payee: 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__ */ jsx(
+        PaymentForm,
+        {
+          checkoutSession: state.checkoutSession,
+          paymentMethods,
+          paymentIntent,
+          paymentLink,
+          customer,
+          onPaid: handlePaid,
+          onError,
+          mode,
+          action
+        }
+      )
+    ] }),
+    mode === "standalone" && isMobile && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer", sx: { color: "var(--foregrounds-fg-muted, #98A3B1)" } })
+  ] }) });
+}
+Payment.defaultProps = {
+  completed: false,
+  error: null
+};
+export default function Payment({
+  checkoutSession,
+  paymentMethods,
+  paymentIntent,
+  paymentLink,
+  customer,
+  completed,
+  // error,
+  mode,
+  onPaid,
+  onError,
+  onChange,
+  goBack,
+  action
+}) {
+  const { t } = useLocaleContext();
+  const { refresh, livemode, setLivemode } = usePaymentContext();
+  const [delay, setDelay] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setDelay(true);
+    }, 500);
+  }, []);
+  useEffect(() => {
+    if (checkoutSession) {
+      if (livemode !== checkoutSession.livemode) {
+        setLivemode(checkoutSession.livemode);
+        setTimeout(() => {
+          refresh();
+        }, 10);
+      }
+    }
+  }, [checkoutSession, livemode, setLivemode, refresh]);
+  const renderContent = () => {
+    if (!checkoutSession || !delay) {
+      return /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: [
+        /* @__PURE__ */ jsx(Stack, { className: "cko-overview base-card", children: /* @__PURE__ */ jsx(Box, { className: "cko-product", children: /* @__PURE__ */ jsx(OverviewSkeleton, {}) }) }),
+        /* @__PURE__ */ jsx(Stack, { className: "cko-payment base-card", children: /* @__PURE__ */ jsx(PaymentSkeleton, {}) })
+      ] });
+    }
+    if (checkoutSession.expires_at <= Math.round(Date.now() / 1e3)) {
+      return /* @__PURE__ */ jsx(
+        PaymentError,
+        {
+          mode,
+          title: t("payment.checkout.expired.title"),
+          description: t("payment.checkout.expired.description")
+        }
+      );
+    }
+    if (!checkoutSession.line_items.length) {
+      return /* @__PURE__ */ jsx(
+        PaymentError,
+        {
+          mode,
+          title: t("payment.checkout.emptyItems.title"),
+          description: t("payment.checkout.emptyItems.description")
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      PaymentInner,
       {
-        sx: { mr: 0.5, color: "text.secondary", alignSelf: "flex-start", margin: "16px 0", cursor: "pointer" },
-        onClick: goBack,
-        fontSize: "medium"
+        checkoutSession,
+        paymentMethods,
+        paymentLink,
+        paymentIntent,
+        completed: completed || checkoutSession.status === "complete",
+        customer,
+        onPaid,
+        onError,
+        onChange,
+        goBack,
+        mode,
+        action
       }
-    ),
-    /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: [
-      /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-overview", direction: "column", children: [
-        mode === "standalone" ? /* @__PURE__ */ jsx(PaymentHeader, { checkoutSession: state.checkoutSession }) : null,
-        /* @__PURE__ */ jsx(
-          PaymentSummary,
-          {
-            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__ */ jsxs(Stack, { className: "cko-payment", direction: "column", spacing: { xs: 2, sm: 3 }, children: [
-        completed && /* @__PURE__ */ jsx(
-          PaymentSuccess,
-          {
-            mode,
-            payee: 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__ */ jsx(
-          PaymentForm,
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      display: "flex",
+      flexDirection: "column",
+      sx: { height: mode === "standalone" ? "100vh" : "auto", overflow: "hidden" },
+      children: [
+        mode === "standalone" ? /* @__PURE__ */ jsx(
+          Header,
           {
-            checkoutSession: state.checkoutSession,
-            paymentMethods,
-            paymentIntent,
-            paymentLink,
-            customer,
-            onPaid: handlePaid,
-            onError,
-            mode,
-            action
+            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)" }
           }
-        )
-      ] }),
-      mode === "standalone" && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer" })
-    ] })
-  ] }) });
+        ) : null,
+        /* @__PURE__ */ jsxs(Root, { mode, sx: { flex: 1 }, children: [
+          goBack && /* @__PURE__ */ jsx(
+            ArrowBackOutlined,
+            {
+              sx: { mr: 0.5, color: "text.secondary", alignSelf: "flex-start", margin: "16px 0", cursor: "pointer" },
+              onClick: goBack,
+              fontSize: "medium"
+            }
+          ),
+          /* @__PURE__ */ jsx(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: renderContent() })
+        ] })
+      ]
+    }
+  );
 }
 export const Root = styled(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"};
   }
 
   .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"};
+    background: var(--backgrounds-bg-base);
+    min-height: 'auto';
+    // width: 502px;
+    display: flex;
+    flex-direction: column;
   }
   .cko-header {
     left: 0;
@@ -349,7 +344,8 @@ export const Root = styled(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%;
@@ -361,30 +357,60 @@ export const Root = styled(Box)`
     text-overflow: ellipsis;
   }
 
+  .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-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;
     }
 
     .MuiFormHelperText-root {
       margin-left: 14px;
     }
-
-    .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
   }
 
   .cko-payment-methods {
@@ -392,9 +418,9 @@ export const Root = styled(Box)`
 
   .cko-payment-submit {
     .MuiButtonBase-root {
-      border-radius: 0;
       font-size: 1.3rem;
       position: relative;
+      padding: 4px 22px;
     }
 
     .cko-submit-progress {
@@ -409,15 +435,28 @@ export const Root = styled(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;
     }
@@ -427,18 +466,34 @@ export const Root = styled(Box)`
       gap: 32px;
       min-width: 350px;
       max-width: 400px;
+      overflow: visible;
     }
     .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;
     }
   }
 `;

package/es/payment/product-card.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar, Stack, Typography } from "@mui/material";
 export default function ProductCard({ size, variant, name, logo, description, extra }) {
   const s = { width: size, height: size };
-  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "flex-start", spacing: 1, flex: 2, sx: { width: "100%" }, children: [
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, flex: 2, sx: { width: "100%" }, children: [
     logo ? (
       // @ts-ignore
       /* @__PURE__ */ jsx(Avatar, { src: logo, alt: name, variant, sx: s })
@@ -24,7 +24,7 @@ export default function ProductCard({ size, variant, name, logo, description, ex
               className: "cko-ellipsis",
               variant: "body1",
               title: name,
-              sx: { fontWeight: 500, mb: 0.5, lineHeight: 1 },
+              sx: { fontWeight: 500, mb: 0.5, lineHeight: 1, fontSize: 16 },
               color: "text.primary",
               children: name
             }
@@ -35,11 +35,11 @@ export default function ProductCard({ size, variant, name, logo, description, ex
               variant: "body1",
               title: description,
               sx: { fontSize: "0.85rem", mb: 0.5, lineHeight: 1, textAlign: "left" },
-              color: "text.secondary",
+              color: "text.lighter",
               children: description
             }
           ),
-          extra && /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: "0.85rem" }, color: "text.secondary", children: extra })
+          extra && /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: "0.85rem" }, color: "text.lighter", children: extra })
         ]
       }
     )