@blocklet/payment-react 1.18.0 → 1.18.1

package/es/payment/form/index.js

@@ -31,7 +31,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";
-const waitForCheckoutComplete = async (sessionId) => {
+export const waitForCheckoutComplete = async (sessionId) => {
   let result;
   await pWaitFor(
     async () => {
@@ -49,11 +49,13 @@ const waitForCheckoutComplete = async (sessionId) => {
   );
   return result;
 };
-const hasDidWallet = (user) => {
+export const hasDidWallet = (user) => {
   const connected = user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
   return connected.some((x) => x.provider === "wallet");
 };
-PaymentForm.defaultProps = {};
+PaymentForm.defaultProps = {
+  onlyShowBtn: false
+};
 export default function PaymentForm({
   checkoutSession,
   paymentMethods,
@@ -64,7 +66,8 @@ export default function PaymentForm({
   onError,
   // mode,
   action,
-  currencyId
+  currencyId,
+  onlyShowBtn
 }) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
@@ -316,6 +319,38 @@ export default function PaymentForm({
   const onStripeCancel = () => {
     setState({ stripePaying: false });
   };
+  if (onlyShowBtn) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsx(
+        LoadingButton,
+        {
+          variant: "contained",
+          color: "primary",
+          size: "large",
+          className: "cko-submit-button",
+          onClick: onAction,
+          fullWidth: true,
+          disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
+          loading: state.submitting || state.paying,
+          children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
+        }
+      ) }),
+      state.customerLimited && /* @__PURE__ */ jsx(
+        ConfirmDialog,
+        {
+          onConfirm: () => window.open(
+            joinURL(getPrefix(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`),
+            "_self"
+          ),
+          onCancel: () => setState({ customerLimited: false }),
+          confirm: t("payment.customer.pastDue.alert.confirm"),
+          title: t("payment.customer.pastDue.alert.title"),
+          message: t("payment.customer.pastDue.alert.description"),
+          color: "primary"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-contact", children: [
       /* @__PURE__ */ jsx(

package/es/payment/product-donation.js

@@ -1,9 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Box, Card, CardActionArea, FormControlLabel, Stack, TextField, Typography } from "@mui/material";
+import { Avatar, Box, Card, CardActionArea, Grid, Stack, TextField, Typography } from "@mui/material";
 import { useSetState } from "ahooks";
-import { useEffect } from "react";
-import Switch from "../components/switch-button.js";
+import { useEffect, useRef } from "react";
 import { formatAmountPrecisionLimit } from "../libs/util.js";
 import { usePaymentContext } from "../contexts/payment.js";
 import { usePreventWheel } from "../hooks/scroll.js";
@@ -16,13 +15,17 @@ export default function ProductDonation({
   const { t, locale } = useLocaleContext();
   const { setPayable } = usePaymentContext();
   usePreventWheel();
-  const preset = settings.amount.preset || settings.amount.presets?.[0] || "0";
+  const presets = settings?.amount?.presets || [];
+  const preset = settings?.amount?.preset || presets?.[0] || "0";
+  const supportPreset = presets.length > 0;
+  const supportCustom = !!settings?.amount?.custom;
   const [state, setState] = useSetState({
     selected: preset,
     input: "",
-    custom: settings.amount.presets?.length === 0,
+    custom: !supportPreset,
     error: ""
   });
+  const customInputRef = useRef(null);
   useEffect(() => {
     if (settings.amount.preset) {
       setState({ selected: settings.amount.preset, custom: false });
@@ -32,6 +35,13 @@ export default function ProductDonation({
       onChange({ priceId: item.price_id, amount: settings.amount.presets[0] });
     }
   }, [settings.amount.preset, settings.amount.presets]);
+  useEffect(() => {
+    if (state.custom) {
+      setTimeout(() => {
+        customInputRef.current?.focus();
+      }, 0);
+    }
+  }, [state.custom]);
   const handleSelect = (amount) => {
     setState({ selected: amount, custom: false, error: "" });
     onChange({ priceId: item.price_id, amount });
@@ -55,71 +65,102 @@ export default function ProductDonation({
     setState({ error: "", input: value });
     onChange({ priceId: item.price_id, amount: value });
   };
-  const handleToggle = (event) => {
-    if (event.target.checked) {
-      setState({ custom: true, input: state.selected, error: "" });
-    } else {
-      setPayable(true);
-      handleSelect(preset);
-    }
+  const handleCustomSelect = () => {
+    setState({ custom: true, error: "" });
   };
   return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 1.5, children: [
-    settings.amount.custom && preset !== "0" && /* @__PURE__ */ jsx(
-      FormControlLabel,
-      {
-        control: /* @__PURE__ */ jsx(Switch, { checked: state.custom, sx: { marginRight: 0.4 }, onChange: handleToggle }),
-        label: state.custom ? t("payment.checkout.donation.select") : t("payment.checkout.donation.custom"),
-        sx: { marginRight: 2, marginLeft: 0.5, color: "text.lighter" }
-      }
-    ),
-    !state.custom && /* @__PURE__ */ jsx(Box, { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 1.5, children: settings.amount.presets && settings.amount.presets.length > 0 && settings.amount.presets.map((amount) => /* @__PURE__ */ jsx(
-      Card,
-      {
-        variant: "outlined",
-        sx: {
-          minWidth: 115,
-          textAlign: "center",
-          ...state.selected === amount && !state.custom ? { borderColor: "primary.main" } : {}
+    supportPreset && /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      settings.amount.presets && settings.amount.presets.length > 0 && settings.amount.presets.map((amount) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, sm: 3, children: /* @__PURE__ */ jsx(
+        Card,
+        {
+          variant: "outlined",
+          sx: {
+            minWidth: 115,
+            textAlign: "center",
+            transition: "all 0.3s",
+            cursor: "pointer",
+            "&:hover": {
+              transform: "translateY(-4px)",
+              boxShadow: 3
+            },
+            height: "42px",
+            ...state.selected === amount && !state.custom ? { borderColor: "primary.main", borderWidth: 1 } : {}
+          },
+          children: /* @__PURE__ */ jsx(CardActionArea, { onClick: () => handleSelect(amount), children: /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: "row",
+              sx: { py: 1.5, px: 1.5 },
+              spacing: 0.5,
+              alignItems: "center",
+              justifyContent: "center",
+              children: [
+                /* @__PURE__ */ jsx(Avatar, { src: currency?.logo, sx: { width: 16, height: 16, mr: 0.5 }, alt: currency?.symbol }),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    component: "strong",
+                    lineHeight: 1,
+                    variant: "h3",
+                    sx: { fontVariantNumeric: "tabular-nums", fontWeight: 400 },
+                    children: amount
+                  }
+                ),
+                /* @__PURE__ */ jsx(Typography, { lineHeight: 1, fontSize: 14, color: "text.secondary", children: currency?.symbol })
+              ]
+            }
+          ) })
         },
-        children: /* @__PURE__ */ jsx(CardActionArea, { onClick: () => handleSelect(amount), children: /* @__PURE__ */ jsxs(
-          Stack,
-          {
-            direction: "row",
-            sx: { py: 1, px: 0.5 },
-            spacing: 0.5,
-            alignItems: "flex-end",
-            justifyContent: "center",
-            children: [
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  component: "strong",
-                  lineHeight: 1,
-                  variant: "h3",
-                  sx: { fontVariantNumeric: "tabular-nums", fontWeight: 400 },
-                  children: amount
-                }
-              ),
-              /* @__PURE__ */ jsx(Typography, { component: "small", lineHeight: 1, fontSize: 12, children: "ABT" }),
-              " "
-            ]
-          }
-        ) })
-      },
-      amount
-    )) }),
+        amount
+      ) }, amount)),
+      supportCustom && /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, sm: 3, children: /* @__PURE__ */ jsx(
+        Card,
+        {
+          variant: "outlined",
+          sx: {
+            textAlign: "center",
+            transition: "all 0.3s",
+            cursor: "pointer",
+            "&:hover": {
+              transform: "translateY(-4px)",
+              boxShadow: 3
+            },
+            height: "42px",
+            ...state.custom ? { borderColor: "primary.main", borderWidth: 1 } : {}
+          },
+          children: /* @__PURE__ */ jsx(CardActionArea, { onClick: () => handleCustomSelect(), children: /* @__PURE__ */ jsx(
+            Stack,
+            {
+              direction: "row",
+              sx: { py: 1.5, px: 1.5 },
+              spacing: 0.5,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */ jsx(Typography, { variant: "h3", lineHeight: 1, sx: { fontWeight: 400 }, children: t("common.custom") })
+            }
+          ) })
+        },
+        "custom"
+      ) }, "custom")
+    ] }),
     state.custom && /* @__PURE__ */ jsx(
       TextField,
       {
-        label: preset !== "0" ? null : t("payment.checkout.donation.custom"),
         type: "number",
         value: state.input,
         onChange: handleInput,
-        inputProps: { min: settings.amount.minimum, max: settings.amount.maximum },
         margin: "none",
         fullWidth: true,
         error: !!state.error,
         helperText: state.error,
+        inputRef: customInputRef,
+        InputProps: {
+          endAdornment: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { ml: 1 }, children: [
+            /* @__PURE__ */ jsx(Avatar, { src: currency?.logo, sx: { width: 16, height: 16 }, alt: currency?.symbol }),
+            /* @__PURE__ */ jsx(Typography, { children: currency?.symbol })
+          ] }),
+          autoComplete: "off"
+        },
         sx: {
           mt: preset !== "0" ? 0 : 1
         }

package/es/payment/skeleton/donation.d.ts

@@ -0,0 +1 @@
+export default function DonationSkeleton(): import("react").JSX.Element;

package/es/payment/skeleton/donation.js

@@ -0,0 +1,30 @@
+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, { sx: { mt: 2 }, variant: "rounded", height: 80 }),
+    /* @__PURE__ */ jsx(
+      Divider,
+      {
+        sx: {
+          mt: {
+            xs: "16px",
+            md: "16px"
+          },
+          mb: {
+            xs: "16px",
+            md: "16px"
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", spacing: 2, children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.5rem", width: "40%" } }),
+      /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 80 }) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 120 }) })
+      ] })
+    ] })
+  ] }) });
+}

package/es/theme/index.js

@@ -37,6 +37,9 @@ export function PaymentThemeProvider({
               fontSize: "14px",
               minHeight: "1.65em",
               lineHeight: "1.65em"
+            },
+            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderWidth: "1px"
             }
           }
         }

package/es/types/index.d.ts

@@ -36,6 +36,8 @@ export type CheckoutProps = Partial<CheckoutCallbacks> & {
     action?: string;
     mode?: LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
     theme?: 'default' | 'inherit' | PaymentThemeOptions;
+    formType?: 'donation' | 'payment';
+    formRender?: Record<string, any>;
 };
 export type CheckoutCallbacks = {
     onPaid: (res: CheckoutContext) => void;

package/lib/checkout/donate.js

@@ -18,6 +18,8 @@ var _util = require("../libs/util");
 var _form = _interopRequireDefault(require("./form"));
 var _theme = require("../theme");
 var _payment = require("../contexts/payment");
+var _livemode = _interopRequireDefault(require("../components/livemode"));
+var _mobile = require("../hooks/mobile");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
@@ -308,8 +310,15 @@ function CheckoutDonateInner({
     donation,
     supporters
   } = useDonation(settings, livemode, mode);
+  const customers = (0, _unionBy.default)(supporters?.data?.supporters || [], "customer_did");
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
   const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
   const [popoverOpen, setPopoverOpen] = (0, _react.useState)(false);
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
   const handlePaid = (...args) => {
     if (onPaid) {
       onPaid(...args);
@@ -467,21 +476,64 @@ function CheckoutDonateInner({
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [renderInnerView(), donation.data && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
       open: state.open,
-      title: settings.title,
+      title: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "h3",
+          sx: {
+            maxWidth: 320,
+            textOverflow: "ellipsis",
+            overflow: "hidden"
+          },
+          children: settings.title
+        }), !donation.data.livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {
+          sx: {
+            width: "fit-content"
+          }
+        })]
+      }),
       maxWidth: "md",
-      showCloseButton: true,
+      toolbar: isMobile ? null : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        sx: {
+          color: "text.secondary"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
+          total: customers?.length,
+          max: 5,
+          children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+            title: x.customer?.name,
+            src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 18),
+            variant: "circular",
+            sx: {
+              width: 18,
+              height: 18
+            }
+          }, x.id))
+        }), customers?.length > 0 && t("payment.checkout.donation.gaveTips", {
+          count: customers?.length
+        })]
+      }),
+      showCloseButton: false,
       disableEscapeKeyDown: true,
       sx: {
         ".MuiDialogContent-root": {
-          padding: {
-            xs: 0,
-            md: "0 16px 0"
-          },
+          padding: "16px 24px",
           borderTop: "1px solid var(--stroke-border-base, #EFF1F5)",
-          width: {
-            xs: "100%",
-            md: 900
-          }
+          width: "100%"
+        },
+        ".ux-dialog_header": {
+          gap: 5
+        }
+      },
+      PaperProps: {
+        style: {
+          minHeight: "auto",
+          width: 680
         }
       },
       onClose: (e, reason) => setState({
@@ -499,8 +551,22 @@ function CheckoutDonateInner({
           action: settings.appearance?.button?.text,
           mode: "inline",
           theme,
+          formType: "donation",
           extraParams: {
             livemode
+          },
+          formRender: {
+            cancel: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+              variant: "outlined",
+              size: "large",
+              onClick: () => setState({
+                open: false
+              }),
+              children: t("common.cancel")
+            }),
+            onCancel: () => setState({
+              open: false
+            })
           }
         })
       })

package/lib/checkout/form.d.ts

@@ -1,5 +1,5 @@
 import type { CheckoutProps } from '../types';
-declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, theme, ...restProps }: CheckoutProps): import("react").JSX.Element;
+declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, theme, formType, ...restProps }: CheckoutProps): import("react").JSX.Element;
 declare namespace CheckoutForm {
     var defaultProps: {
         onPaid: any;
@@ -10,6 +10,7 @@ declare namespace CheckoutForm {
         mode: string;
         action: string;
         extraParams: {};
+        formType: string;
     };
 }
 export default CheckoutForm;

package/lib/checkout/form.js

@@ -13,6 +13,7 @@ var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 var _payment = _interopRequireDefault(require("../payment"));
 var _theme = require("../theme");
+var _donationForm = _interopRequireDefault(require("../payment/donation-form"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const promises = {};
 const startFromPaymentLink = (id, params) => {
@@ -41,6 +42,7 @@ function CheckoutForm({
   extraParams,
   action,
   theme = "default",
+  formType = "payment",
   ...restProps
 }) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
@@ -73,62 +75,49 @@ function CheckoutForm({
     });
     onError?.(err);
   };
+  const Checkout = formType === "donation" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_donationForm.default, {
+    checkoutSession: data?.checkoutSession,
+    paymentMethods: data?.paymentMethods,
+    paymentIntent: data?.paymentIntent,
+    paymentLink: data?.paymentLink,
+    customer: data?.customer,
+    completed: state.completed,
+    error: apiError,
+    onPaid: handlePaid,
+    onError: handleError,
+    onChange,
+    goBack,
+    mode,
+    action,
+    id,
+    ...restProps
+  }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment.default, {
+    checkoutSession: data?.checkoutSession,
+    paymentMethods: data?.paymentMethods,
+    paymentIntent: data?.paymentIntent,
+    paymentLink: data?.paymentLink,
+    customer: data?.customer,
+    completed: state.completed,
+    error: apiError,
+    onPaid: handlePaid,
+    onError: handleError,
+    onChange,
+    goBack,
+    mode,
+    action,
+    ...restProps
+  });
   if (theme === "inherit") {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment.default, {
-      checkoutSession: data?.checkoutSession,
-      paymentMethods: data?.paymentMethods,
-      paymentIntent: data?.paymentIntent,
-      paymentLink: data?.paymentLink,
-      customer: data?.customer,
-      completed: state.completed,
-      error: apiError,
-      onPaid: handlePaid,
-      onError: handleError,
-      onChange,
-      goBack,
-      mode,
-      action,
-      ...restProps
-    });
+    return Checkout;
   }
   if (theme && typeof theme === "object") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
       theme,
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment.default, {
-        checkoutSession: data?.checkoutSession,
-        paymentMethods: data?.paymentMethods,
-        paymentIntent: data?.paymentIntent,
-        paymentLink: data?.paymentLink,
-        customer: data?.customer,
-        completed: state.completed,
-        error: apiError,
-        onPaid: handlePaid,
-        onError: handleError,
-        onChange,
-        goBack,
-        mode,
-        action,
-        ...restProps
-      })
+      children: Checkout
     });
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
-    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment.default, {
-      checkoutSession: data?.checkoutSession,
-      paymentMethods: data?.paymentMethods,
-      paymentIntent: data?.paymentIntent,
-      paymentLink: data?.paymentLink,
-      customer: data?.customer,
-      completed: state.completed,
-      error: apiError,
-      onPaid: handlePaid,
-      onError: handleError,
-      onChange,
-      goBack,
-      mode,
-      action,
-      ...restProps
-    })
+    children: Checkout
   });
 }
 CheckoutForm.defaultProps = {
@@ -136,5 +125,6 @@ CheckoutForm.defaultProps = {
   onError: console.error,
   mode: "inline",
   action: "",
-  extraParams: {}
+  extraParams: {},
+  formType: "payment"
 };

package/lib/components/payment-beneficiaries.d.ts

@@ -0,0 +1,24 @@
+export interface TBeneficiary {
+    name: string;
+    address: string;
+    avatar?: string;
+    percent: number;
+    amount?: string;
+    url?: string;
+    type?: 'user' | 'dapp';
+}
+interface BenefitsProps {
+    data: TBeneficiary[];
+    currency: {
+        symbol: string;
+        decimal: number;
+    };
+    totalAmount?: string;
+}
+declare function PaymentBeneficiaries({ data, currency, totalAmount }: BenefitsProps): import("react").JSX.Element;
+declare namespace PaymentBeneficiaries {
+    var defaultProps: {
+        totalAmount: string;
+    };
+}
+export default PaymentBeneficiaries;