@blocklet/payment-react 1.18.6 → 1.18.8

package/es/payment/form/index.js

@@ -30,6 +30,7 @@ import PhoneInput from "./phone.js";
 import StripeCheckout from "./stripe/index.js";
 import { useMobile } from "../../hooks/mobile.js";
 import { validatePhoneNumber } from "../../libs/phone-validator.js";
+import LoadingButton from "../../components/loading-button.js";
 export const waitForCheckoutComplete = async (sessionId) => {
   let result;
   await pWaitFor(
@@ -143,7 +144,7 @@ export default function PaymentForm({
   }, [paymentCurrencyIndex, currencies, setValue]);
   const paymentMethod = useWatch({ control, name: "payment_method" });
   const afterUserLoggedIn = useMemoizedFn(() => {
-    if (hasDidWallet(session.user)) {
+    if (hasDidWallet(session.user) || skipBindWallet) {
       handleSubmit(onFormSubmit, onFormError)();
     } else {
       session.bindWallet(() => {
@@ -166,6 +167,8 @@ export default function PaymentForm({
   }
   buttonText = session?.user ? buttonText : t("payment.checkout.connect", { action: buttonText });
   const method = paymentMethods.find((x) => x.id === paymentMethod);
+  const showForm = session?.user;
+  const skipBindWallet = method.type === "stripe";
   const handleConnected = async () => {
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
@@ -292,6 +295,10 @@ export default function PaymentForm({
       errorRef.current.scrollIntoView({ behavior: "smooth" });
     }
     if (session?.user) {
+      if (skipBindWallet) {
+        handleSubmit(onFormSubmit, onFormError)();
+        return;
+      }
       if (hasDidWallet(session.user)) {
         handleSubmit(onFormSubmit, onFormError)();
       } else {
@@ -406,7 +413,7 @@ export default function PaymentForm({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxs(
+      showForm && /* @__PURE__ */ jsxs(
         Stack,
         {
           direction: "column",
@@ -474,28 +481,23 @@ export default function PaymentForm({
     ] }) }),
     /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5 } }),
     /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-submit", children: [
-      /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsxs(
-        Button,
+      /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsx(
+        LoadingButton,
         {
           variant: "contained",
           color: "primary",
           size: "large",
           className: "cko-submit-button",
           onClick: () => {
-            if (state.submitting || state.paying) {
-              return;
-            }
             onAction();
           },
           fullWidth: true,
+          loading: state.submitting || state.paying,
           disabled: state.stripePaying || !quantityInventoryStatus || !payable,
-          children: [
-            (state.submitting || state.paying) && /* @__PURE__ */ jsx(CircularProgress, { size: 16, sx: { mr: 0.5, color: "var(--foregrounds-fg-on-color, #fff)" } }),
-            state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
-          ]
+          children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
         }
       ) }),
-      ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.9rem", lineHeight: "1.1rem" }, children: t("payment.checkout.confirm", { payee }) })
+      ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.7875rem", lineHeight: "0.9625rem" }, children: t("payment.checkout.confirm", { payee }) })
     ] }) }),
     state.customerLimited && /* @__PURE__ */ jsx(
       ConfirmDialog,

package/es/payment/form/stripe/form.js

@@ -2,11 +2,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import Center from "@arcblock/ux/lib/Center";
 import Dialog from "@arcblock/ux/lib/Dialog";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { LoadingButton } from "@mui/lab";
 import { CircularProgress, Typography } from "@mui/material";
 import { styled } from "@mui/system";
 import { useSetState } from "ahooks";
 import { useEffect, useCallback } from "react";
+import { useMobile } from "../../../hooks/mobile.js";
+import LoadingButton from "../../../components/loading-button.js";
 const { Elements, PaymentElement, useElements, useStripe, loadStripe } = globalThis.__STRIPE_COMPONENTS__;
 function StripeCheckoutForm({
   clientSecret,
@@ -101,11 +102,10 @@ function StripeCheckoutForm({
       LoadingButton,
       {
         fullWidth: true,
-        sx: { mt: 2, mb: 1, borderRadius: 0, fontSize: "1.1rem" },
+        sx: { mt: 2, mb: 1, borderRadius: 0, fontSize: "0.875rem" },
         type: "submit",
         disabled: state.confirming || !state.loaded,
         loading: state.confirming,
-        loadingPosition: "end",
         variant: "contained",
         color: "primary",
         size: "large",
@@ -135,7 +135,8 @@ export default function StripeCheckout({
   returnUrl = ""
 }) {
   const stripePromise = loadStripe(publicKey);
-  const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
+  const { t, locale } = useLocaleContext();
   const [state, setState] = useSetState({
     open: true,
     closable: true
@@ -155,7 +156,21 @@ export default function StripeCheckout({
       open: state.open,
       onClose: handleClose,
       disableEscapeKeyDown: true,
-      children: /* @__PURE__ */ jsx(Elements, { options: { clientSecret }, stripe: stripePromise, children: /* @__PURE__ */ jsx(
+      sx: {
+        ".StripeElement": {
+          minWidth: isMobile ? "100%" : "500px",
+          py: 1
+        },
+        form: {
+          justifyContent: "flex-start"
+        }
+      },
+      PaperProps: {
+        style: {
+          minWidth: isMobile ? "100%" : "500px"
+        }
+      },
+      children: /* @__PURE__ */ jsx(Elements, { options: { clientSecret, locale: locale === "zh" ? "zh-CN" : "en" }, stripe: stripePromise, children: /* @__PURE__ */ jsx(
         StripeCheckoutForm,
         {
           clientSecret,

package/es/payment/index.js

@@ -514,7 +514,6 @@ export const Root = styled(Box)`
     .MuiButtonBase-root {
       font-size: 1.3rem;
       position: relative;
-      padding: 4px 22px;
     }
 
     .cko-submit-progress {

package/es/payment/product-card.js

@@ -34,12 +34,12 @@ export default function ProductCard({ size, variant, name, logo, description, ex
             {
               variant: "body1",
               title: description,
-              sx: { fontSize: "0.85rem", mb: 0.5, lineHeight: 1.2, textAlign: "left" },
+              sx: { fontSize: "0.74375rem", mb: 0.5, lineHeight: 1.2, textAlign: "left" },
               color: "text.lighter",
               children: description
             }
           ),
-          extra && /* @__PURE__ */ jsx(Box, { sx: { fontSize: "0.85rem" }, color: "text.lighter", children: extra })
+          extra && /* @__PURE__ */ jsx(Box, { sx: { fontSize: "0.74375rem" }, color: "text.lighter", children: extra })
         ]
       }
     )

package/es/payment/product-item.js

@@ -65,7 +65,7 @@ export default function ProductItem({
             ),
             /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-end", flex: 1, children: [
               /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 500, whiteSpace: "nowrap" }, gutterBottom: true, children: primaryText }),
-              pricing.secondary && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.85rem", color: "text.lighter" }, children: pricing.secondary })
+              pricing.secondary && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.74375rem", color: "text.lighter" }, children: pricing.secondary })
             ] })
           ]
         }

package/es/payment/product-skeleton.js

@@ -21,12 +21,12 @@ export default function ProductSkeleton({ count }) {
       },
       children: [
         /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", sx: { width: "50%" }, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
-        /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1rem", width: "60%" } }),
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "0.875rem", width: "60%" } }),
         /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h3", sx: { width: "60%" }, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
         /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h3", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
         Array.from({ length: count }).map((_, i) => (
           // eslint-disable-next-line react/no-array-index-key
-          /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1rem", width: "60%" } }, i)
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "0.875rem", width: "60%" } }, i)
         ))
       ]
     }

package/es/payment/skeleton/donation.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Divider, Fade, Skeleton, Stack } from "@mui/material";
 export default function DonationSkeleton() {
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
-    /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.75rem", width: "40%" } }),
     /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 40 }),
     /* @__PURE__ */ jsx(
       Divider,

package/es/payment/skeleton/overview.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fade, Skeleton, Stack, Typography } from "@mui/material";
 export default function OverviewSkeleton() {
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
-    /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "center", spacing: 2, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } }) }),
+    /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "center", spacing: 2, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.75rem", width: "40%" } }) }),
     /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 100 }),
     /* @__PURE__ */ jsx(Typography, { mt: 2, component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
     /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h2", children: /* @__PURE__ */ jsx(Skeleton, {}) })

package/es/payment/skeleton/payment.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Fade, Skeleton, Stack, Typography } from "@mui/material";
 export default function PaymentSkeleton() {
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
-    /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.75rem", width: "40%" } }),
     /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 68 }),
     /* @__PURE__ */ jsxs(Box, { mt: 1, children: [
       /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", mb: -1, children: /* @__PURE__ */ jsx(Skeleton, {}) }),

package/es/payment/summary.js

@@ -1,7 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { HelpOutline } from "@mui/icons-material";
-import { LoadingButton } from "@mui/lab";
 import { Box, Divider, Fade, Grow, Stack, Tooltip, Typography, Collapse, IconButton } from "@mui/material";
 import { BN, fromTokenToUnit, fromUnitToToken } from "@ocap/util";
 import { useRequest, useSetState } from "ahooks";
@@ -18,6 +17,7 @@ import ProductItem from "./product-item.js";
 import Livemode from "../components/livemode.js";
 import { usePaymentContext } from "../contexts/payment.js";
 import { useMobile } from "../hooks/mobile.js";
+import LoadingButton from "../components/loading-button.js";
 const ExpandMore = styled((props) => {
   const { expand, ...other } = props;
   return /* @__PURE__ */ jsx(IconButton, { ...other });
@@ -309,7 +309,7 @@ export default function PaymentSummary({
       Typography,
       {
         component: "div",
-        sx: { fontSize: "0.9rem", color: "text.lighter", textAlign: "right", margin: "-2px 0 8px" },
+        sx: { fontSize: "0.7875rem", color: "text.lighter", textAlign: "right", margin: "-2px 0 8px" },
         children: headlines.then
       }
     )

package/es/theme/index.js

@@ -50,9 +50,10 @@ export function PaymentThemeProvider({
         },
         styleOverrides: {
           root: {
-            fontSize: "1rem",
+            fontSize: "0.875rem",
             fontWeight: 500,
-            textTransform: "none"
+            textTransform: "none",
+            boxShadow: "none"
           },
           containedPrimary: {
             backgroundColor: "var(--buttons-button-inverted, #010714)",
@@ -97,7 +98,8 @@ export function PaymentThemeProvider({
       MuiTab: {
         styleOverrides: {
           root: {
-            textTransform: "none"
+            textTransform: "none",
+            fontSize: "0.875rem"
           }
         }
       },

package/es/theme/typography.js

@@ -1,6 +1,6 @@
 export const typography = {
   h1: {
-    fontSize: "1.875rem",
+    fontSize: "1.5rem",
     lineHeight: 1.2,
     fontWeight: 800,
     letterSpacing: "-.025em"
@@ -12,38 +12,38 @@ export const typography = {
     letterSpacing: "-.025em"
   },
   h3: {
-    fontSize: "1.25rem",
+    fontSize: "1.09375rem",
     lineHeight: 1.4,
     fontWeight: 600,
     letterSpacing: "-.025em"
   },
   h4: {
-    fontSize: "1.125rem",
+    fontSize: "1.09375rem",
     lineHeight: 1.5,
     fontWeight: 600
   },
   h5: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   h6: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   subtitle1: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   subtitle2: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75,
     fontWeight: 400
   },
   body1: {
-    fontSize: "1rem",
+    fontSize: "0.875rem",
     lineHeight: 1.75
   },
   fontWeightLight: 300,

package/lib/checkout/donate.d.ts

@@ -1,20 +1,45 @@
-import type { DonationSettings, TCheckoutSessionExpanded, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+import type { DonationSettings, PaymentBeneficiary, TCheckoutSessionExpanded, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
 import { type ButtonProps as MUIButtonProps } from '@mui/material';
 import type { CheckoutProps, PaymentThemeOptions } from '../types';
 export type DonateHistory = {
     supporters: TCheckoutSessionExpanded[];
     currency: TPaymentCurrency;
     method: TPaymentMethod;
+    total?: number;
     totalAmount: string;
 };
-export type RequiredDonationSettings = Pick<DonationSettings, 'target' | 'title' | 'description' | 'reference' | 'beneficiaries'>;
-type OptionalDonationSettings = Partial<Omit<DonationSettings, keyof RequiredDonationSettings>>;
+export type CheckoutDonateSettings = {
+    target: string;
+    title: string;
+    description: string;
+    reference: string;
+    beneficiaries: PaymentBeneficiary[];
+    amount?: {
+        presets?: string[];
+        preset?: string;
+        minimum?: string;
+        maximum?: string;
+        custom?: boolean;
+    };
+    appearance?: {
+        button?: {
+            text?: any;
+            icon?: any;
+            size?: string;
+            color?: string;
+            variant?: string;
+        };
+        history?: {
+            variant?: string;
+        };
+    };
+};
 export interface ButtonType extends Omit<MUIButtonProps, 'text' | 'icon'> {
     text?: string | React.ReactNode;
     icon: React.ReactNode;
 }
 export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
-    settings: RequiredDonationSettings & OptionalDonationSettings;
+    settings: CheckoutDonateSettings;
     livemode?: boolean;
     timeout?: number;
     mode?: 'inline' | 'default' | 'custom';