@blocklet/payment-react 1.18.0 → 1.18.2

package/lib/payment/form/index.js

@@ -4,11 +4,11 @@ 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");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
-var _lab = require("@mui/lab");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
 var _pWaitFor = _interopRequireDefault(require("p-wait-for"));
@@ -51,11 +51,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 +70,8 @@ function PaymentForm({
   onError,
   // mode,
   action,
-  currencyId
+  currencyId,
+  onlyShowBtn
 }) {
   const {
     t
@@ -379,6 +384,43 @@ 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.jsxs)(_material.Button, {
+          variant: "contained",
+          color: "primary",
+          size: "large",
+          className: "cko-submit-button",
+          onClick: () => {
+            if (state.submitting || state.paying) {
+              return;
+            }
+            onAction();
+          },
+          fullWidth: true,
+          disabled: state.stripePaying || !quantityInventoryStatus || !payable,
+          children: [(state.submitting || state.paying) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+            size: 16,
+            sx: {
+              mr: 0.5,
+              color: "var(--foregrounds-fg-on-color, #fff)"
+            }
+          }), 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,
@@ -497,16 +539,26 @@ function PaymentForm({
         className: "cko-payment-submit",
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           className: "cko-payment-submit-btn",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
             variant: "contained",
             color: "primary",
             size: "large",
             className: "cko-submit-button",
-            onClick: onAction,
+            onClick: () => {
+              if (state.submitting || state.paying) {
+                return;
+              }
+              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
+            disabled: state.stripePaying || !quantityInventoryStatus || !payable,
+            children: [(state.submitting || state.paying) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+              size: 16,
+              sx: {
+                mr: 0.5,
+                color: "var(--foregrounds-fg-on-color, #fff)"
+              }
+            }), state.submitting || state.paying ? t("payment.checkout.processing") : buttonText]
           })
         }), ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {

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,7 +58,15 @@ function ProductDonation({
       });
     }
   }, [settings.amount.preset, settings.amount.presets]);
+  (0, _react.useEffect)(() => {
+    if (state.custom) {
+      setTimeout(() => {
+        customInputRef.current?.focus();
+      }, 0);
+    }
+  }, [state.custom]);
   const handleSelect = amount => {
+    setPayable(true);
     setState({
       selected: amount,
       custom: false,
@@ -103,16 +113,13 @@ 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: ""
+    });
+    if (!state.input) {
+      setPayable(false);
     }
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -120,76 +127,140 @@ function ProductDonation({
     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"
             }
           }
         }
@@ -126,6 +129,9 @@ function PaymentThemeProvider({
       },
       MuiPopover: {
         styleOverrides: {
+          root: {
+            zIndex: 1200
+          },
           paper: ({
             theme
           }) => ({
@@ -245,6 +251,13 @@ function PaymentThemeProvider({
             }
           }
         }
+      },
+      MuiDialog: {
+        styleOverrides: {
+          root: {
+            zIndex: 1200
+          }
+        }
       }
     }
   };

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.2",
   "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.2",
     "@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": "577491d13f4b2e53e9a71be3b90298b5685f5e8a"
 }

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,12 @@ 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 { connect } = usePaymentContext();
 
   const handlePaid = (...args: any[]) => {
     if (onPaid) {
@@ -488,29 +493,59 @@ 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%' }}>
             <CheckoutForm
@@ -520,9 +555,27 @@ function CheckoutDonateInner({
               action={settings.appearance?.button?.text}
               mode="inline"
               theme={theme}
+              formType="donation"
               extraParams={{
                 livemode,
               }}
+              formRender={{
+                cancel: (
+                  <Button
+                    variant="outlined"
+                    size="large"
+                    onClick={() => {
+                      connect.close();
+                      setState({ open: false });
+                    }}>
+                    {t('common.cancel')}
+                  </Button>
+                ),
+                onCancel: () => {
+                  connect.close();
+                  setState({ open: false });
+                },
+              }}
             />
           </Box>
         </Dialog>