@blocklet/payment-react 1.18.0 → 1.18.1

package/lib/payment/form/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 module.exports = PaymentForm;
+exports.waitForCheckoutComplete = exports.hasDidWallet = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 require("react-international-phone/style.css");
 var _context = require("@arcblock/ux/lib/Locale/context");
@@ -51,11 +52,15 @@ const waitForCheckoutComplete = async sessionId => {
   });
   return result;
 };
+exports.waitForCheckoutComplete = waitForCheckoutComplete;
 const hasDidWallet = user => {
   const connected = user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
   return connected.some(x => x.provider === "wallet");
 };
-PaymentForm.defaultProps = {};
+exports.hasDidWallet = hasDidWallet;
+PaymentForm.defaultProps = {
+  onlyShowBtn: false
+};
 function PaymentForm({
   checkoutSession,
   paymentMethods,
@@ -66,7 +71,8 @@ function PaymentForm({
   onError,
   // mode,
   action,
-  currencyId
+  currencyId,
+  onlyShowBtn
 }) {
   const {
     t
@@ -379,6 +385,33 @@ function PaymentForm({
       stripePaying: false
     });
   };
+  if (onlyShowBtn) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        className: "cko-payment-submit-btn",
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.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__ */(0, _jsxRuntime.jsx)(_confirm.default, {
+        onConfirm: () => window.open((0, _ufo.joinURL)((0, _util.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__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
       in: true,

package/lib/payment/product-donation.js

@@ -9,11 +9,9 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
 var _react = require("react");
-var _switchButton = _interopRequireDefault(require("../components/switch-button"));
 var _util = require("../libs/util");
 var _payment = require("../contexts/payment");
 var _scroll = require("../hooks/scroll");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ProductDonation({
   item,
   settings,
@@ -28,13 +26,17 @@ function ProductDonation({
     setPayable
   } = (0, _payment.usePaymentContext)();
   (0, _scroll.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] = (0, _ahooks.useSetState)({
     selected: preset,
     input: "",
-    custom: settings.amount.presets?.length === 0,
+    custom: !supportPreset,
     error: ""
   });
+  const customInputRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     if (settings.amount.preset) {
       setState({
@@ -56,6 +58,13 @@ function ProductDonation({
       });
     }
   }, [settings.amount.preset, settings.amount.presets]);
+  (0, _react.useEffect)(() => {
+    if (state.custom) {
+      setTimeout(() => {
+        customInputRef.current?.focus();
+      }, 0);
+    }
+  }, [state.custom]);
   const handleSelect = amount => {
     setState({
       selected: amount,
@@ -103,93 +112,151 @@ function ProductDonation({
       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__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     display: "flex",
     flexDirection: "column",
     alignItems: "flex-start",
     gap: 1.5,
-    children: [settings.amount.custom && preset !== "0" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
-      control: /* @__PURE__ */(0, _jsxRuntime.jsx)(_switchButton.default, {
-        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__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Card, {
-        variant: "outlined",
-        sx: {
-          minWidth: 115,
-          textAlign: "center",
-          ...(state.selected === amount && !state.custom ? {
-            borderColor: "primary.main"
-          } : {})
-        },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CardActionArea, {
-          onClick: () => handleSelect(amount),
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-            direction: "row",
-            sx: {
-              py: 1,
-              px: 0.5
+    children: [supportPreset && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Grid, {
+      container: true,
+      spacing: 2,
+      children: [settings.amount.presets && settings.amount.presets.length > 0 && settings.amount.presets.map(amount => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grid, {
+        item: true,
+        xs: 6,
+        sm: 3,
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
+          variant: "outlined",
+          sx: {
+            minWidth: 115,
+            textAlign: "center",
+            transition: "all 0.3s",
+            cursor: "pointer",
+            "&:hover": {
+              transform: "translateY(-4px)",
+              boxShadow: 3
             },
-            spacing: 0.5,
-            alignItems: "flex-end",
-            justifyContent: "center",
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              component: "strong",
-              lineHeight: 1,
-              variant: "h3",
+            height: "42px",
+            ...(state.selected === amount && !state.custom ? {
+              borderColor: "primary.main",
+              borderWidth: 1
+            } : {})
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CardActionArea, {
+            onClick: () => handleSelect(amount),
+            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
               sx: {
-                fontVariantNumeric: "tabular-nums",
-                fontWeight: 400
+                py: 1.5,
+                px: 1.5
               },
-              children: amount
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              component: "small",
-              lineHeight: 1,
-              fontSize: 12,
-              children: "ABT"
-            }), " "]
+              spacing: 0.5,
+              alignItems: "center",
+              justifyContent: "center",
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+                src: currency?.logo,
+                sx: {
+                  width: 16,
+                  height: 16,
+                  mr: 0.5
+                },
+                alt: currency?.symbol
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                component: "strong",
+                lineHeight: 1,
+                variant: "h3",
+                sx: {
+                  fontVariantNumeric: "tabular-nums",
+                  fontWeight: 400
+                },
+                children: amount
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                lineHeight: 1,
+                fontSize: 14,
+                color: "text.secondary",
+                children: currency?.symbol
+              })]
+            })
           })
-        })
-      }, amount))
+        }, amount)
+      }, amount)), supportCustom && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grid, {
+        item: true,
+        xs: 6,
+        sm: 3,
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.CardActionArea, {
+            onClick: () => handleCustomSelect(),
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+              direction: "row",
+              sx: {
+                py: 1.5,
+                px: 1.5
+              },
+              spacing: 0.5,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "h3",
+                lineHeight: 1,
+                sx: {
+                  fontWeight: 400
+                },
+                children: t("common.custom")
+              })
+            })
+          })
+        }, "custom")
+      }, "custom")]
     }), state.custom && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          spacing: 0.5,
+          alignItems: "center",
+          sx: {
+            ml: 1
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+            src: currency?.logo,
+            sx: {
+              width: 16,
+              height: 16
+            },
+            alt: currency?.symbol
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: currency?.symbol
+          })]
+        }),
+        autoComplete: "off"
+      },
       sx: {
         mt: preset !== "0" ? 0 : 1
       }

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

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

package/lib/payment/skeleton/donation.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = DonationSkeleton;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+function DonationSkeleton() {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+    in: true,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "column",
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        variant: "text",
+        sx: {
+          fontSize: "2rem",
+          width: "40%"
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        sx: {
+          mt: 2
+        },
+        variant: "rounded",
+        height: 80
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {
+        sx: {
+          mt: {
+            xs: "16px",
+            md: "16px"
+          },
+          mb: {
+            xs: "16px",
+            md: "16px"
+          }
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        justifyContent: "space-between",
+        spacing: 2,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+          variant: "text",
+          sx: {
+            fontSize: "1.5rem",
+            width: "40%"
+          }
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              height: 60,
+              width: 80
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              height: 60,
+              width: 120
+            })
+          })]
+        })]
+      })]
+    })
+  });
+}

package/lib/theme/index.js

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

package/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.0",
+    "@blocklet/payment-types": "1.18.1",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "052c301e1f565558766c9346ba355f2fd072108e"
+  "gitHead": "22060b542145f7c62282ee0d3ec132ff581e13ec"
 }

package/src/checkout/donate.tsx

@@ -39,6 +39,8 @@ import type { CheckoutProps, PaymentThemeOptions } from '../types';
 import CheckoutForm from './form';
 import { PaymentThemeProvider } from '../theme';
 import { usePaymentContext } from '../contexts/payment';
+import Livemode from '../components/livemode';
+import { useMobile } from '../hooks/mobile';
 
 export type DonateHistory = {
   supporters: TCheckoutSessionExpanded[];
@@ -329,9 +331,11 @@ function CheckoutDonateInner({
 }: DonateProps) {
   // eslint-disable-line
   const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
-
+  const customers = uniqBy((supporters?.data as DonateHistory)?.supporters || [], 'customer_did');
+  const { t } = useLocaleContext();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
+  const { isMobile } = useMobile();
 
   const handlePaid = (...args: any[]) => {
     if (onPaid) {
@@ -488,28 +492,58 @@ function CheckoutDonateInner({
     }
     return defaultRender;
   };
+
   return (
     <>
       {renderInnerView()}
       {donation.data && (
         <Dialog
           open={state.open}
-          title={settings.title}
+          title={
+            <Box display="flex" alignItems="center" gap={0.5}>
+              <Typography variant="h3" sx={{ maxWidth: 320, textOverflow: 'ellipsis', overflow: 'hidden' }}>
+                {settings.title}
+              </Typography>
+              {!donation.data.livemode && <Livemode sx={{ width: 'fit-content' }} />}
+            </Box>
+          }
           maxWidth="md"
-          showCloseButton
+          toolbar={
+            isMobile ? null : (
+              <Box display="flex" alignItems="center" gap={1} sx={{ color: 'text.secondary' }}>
+                <AvatarGroup total={customers?.length} max={5}>
+                  {customers.map((x: any) => (
+                    <Avatar
+                      key={x.id}
+                      title={x.customer?.name}
+                      src={getCustomerAvatar(
+                        x.customer?.did,
+                        x?.updated_at ? new Date(x.updated_at).toISOString() : '',
+                        18
+                      )}
+                      variant="circular"
+                      sx={{ width: 18, height: 18 }}
+                    />
+                  ))}
+                </AvatarGroup>
+                {customers?.length > 0 && t('payment.checkout.donation.gaveTips', { count: customers?.length })}
+              </Box>
+            )
+          }
+          showCloseButton={false}
           disableEscapeKeyDown
           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: any, reason: string) => setState({ open: reason === 'backdropClick' })}>
           <Box sx={{ height: '100%', width: '100%' }}>
@@ -520,9 +554,18 @@ function CheckoutDonateInner({
               action={settings.appearance?.button?.text}
               mode="inline"
               theme={theme}
+              formType="donation"
               extraParams={{
                 livemode,
               }}
+              formRender={{
+                cancel: (
+                  <Button variant="outlined" size="large" onClick={() => setState({ open: false })}>
+                    {t('common.cancel')}
+                  </Button>
+                ),
+                onCancel: () => setState({ open: false }),
+              }}
             />
           </Box>
         </Dialog>

package/src/checkout/form.tsx

@@ -9,6 +9,7 @@ import { getPrefix, mergeExtraParams } from '../libs/util';
 import Payment from '../payment';
 import type { CheckoutContext, CheckoutProps } from '../types';
 import { PaymentThemeProvider } from '../theme';
+import DonationForm from '../payment/donation-form';
 
 const promises: { [key: string]: Promise<any> } = {};
 const startFromPaymentLink = (id: string, params?: Record<string, any>): Promise<CheckoutContext> => {
@@ -41,6 +42,7 @@ export default function CheckoutForm({
   extraParams,
   action,
   theme = 'default',
+  formType = 'payment',
   ...restProps
 }: CheckoutProps) {
   if (!id.startsWith('plink_') && !id.startsWith('cs_')) {
@@ -76,9 +78,9 @@ export default function CheckoutForm({
     onError?.(err);
   };
 
-  if (theme === 'inherit') {
-    return (
-      <Payment
+  const Checkout =
+    formType === 'donation' ? (
+      <DonationForm
         checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
         paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
         paymentIntent={data?.paymentIntent}
@@ -92,34 +94,10 @@ export default function CheckoutForm({
         goBack={goBack}
         mode={mode as string}
         action={action}
+        id={id}
         {...restProps}
       />
-    );
-  }
-  if (theme && typeof theme === 'object') {
-    return (
-      <PaymentThemeProvider theme={theme}>
-        <Payment
-          checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
-          paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
-          paymentIntent={data?.paymentIntent}
-          paymentLink={data?.paymentLink}
-          customer={data?.customer}
-          completed={state.completed}
-          error={apiError}
-          onPaid={handlePaid}
-          onError={handleError}
-          onChange={onChange}
-          goBack={goBack}
-          mode={mode as string}
-          action={action}
-          {...restProps}
-        />
-      </PaymentThemeProvider>
-    );
-  }
-  return (
-    <PaymentThemeProvider>
+    ) : (
       <Payment
         checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
         paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
@@ -136,8 +114,15 @@ export default function CheckoutForm({
         action={action}
         {...restProps}
       />
-    </PaymentThemeProvider>
-  );
+    );
+
+  if (theme === 'inherit') {
+    return Checkout;
+  }
+  if (theme && typeof theme === 'object') {
+    return <PaymentThemeProvider theme={theme}>{Checkout}</PaymentThemeProvider>;
+  }
+  return <PaymentThemeProvider>{Checkout}</PaymentThemeProvider>;
 }
 
 CheckoutForm.defaultProps = {
@@ -146,4 +131,5 @@ CheckoutForm.defaultProps = {
   mode: 'inline',
   action: '',
   extraParams: {},
+  formType: 'payment',
 };