@blocklet/payment-react 1.13.278 → 1.13.281

package/es/checkout/donate.js

@@ -186,7 +186,7 @@ export default function CheckoutDonate({ settings, livemode, timeout, onPaid, on
             showCloseButton: true,
             disableEscapeKeyDown: true,
             onClose: (e, reason) => setState({ open: reason === "backdropClick" }),
-            children: /* @__PURE__ */ jsx(Box, { sx: { mb: 1, mt: -2 }, children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx(Box, { sx: { mb: 1, mt: -2, height: "100%" }, children: /* @__PURE__ */ jsx(
               CheckoutForm,
               {
                 id: donation.data.id,

package/es/checkout/table.js

@@ -89,7 +89,7 @@ export default function CheckoutTable({ id, mode, onPaid, onError, onChange, ext
     }
     return /* @__PURE__ */ jsx(PricingTable, { mode: "select", table: data, onSelect: handleSelect });
   }
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { sx: { height: "100%" }, children: /* @__PURE__ */ jsx(
     CheckoutForm,
     {
       id: hashSessionId || sessionId,

package/es/payment/error.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+import type { LiteralUnion } from 'type-fest';
+type ModeType = LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
 type Props = {
     title: string;
     description: string;
     button?: string;
-    mode?: string;
+    mode?: ModeType;
 };
 declare function PaymentError({ title, description, button, mode }: Props): import("react").JSX.Element;
 declare namespace PaymentError {

package/es/payment/error.js

@@ -1,7 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Link, Stack, Typography } from "@mui/material";
+function getHeightStyle(mode) {
+  switch (mode) {
+    case "standalone":
+      return { height: "100%" };
+    default:
+      return { height: "auto", minHeight: 200 };
+  }
+}
 export default function PaymentError({ title, description, button, mode }) {
-  return /* @__PURE__ */ jsx(Stack, { sx: { height: mode === "inline" ? "auto" : "100vh" }, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs(Stack, { sx: { width: "280px" }, direction: "column", alignItems: "center", justifyContent: "center", children: [
+  const heightStyle = getHeightStyle(mode);
+  return /* @__PURE__ */ jsx(Stack, { sx: heightStyle, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs(Stack, { sx: { width: "280px" }, direction: "column", alignItems: "center", justifyContent: "center", children: [
     /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { mb: 2 }, children: title }),
     /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 2, textAlign: "center" }, children: description }),
     /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", component: Link, href: window.blocklet?.appUrl, children: button })

package/lib/checkout/donate.js

@@ -273,7 +273,8 @@ function CheckoutDonate({
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
           mb: 1,
-          mt: -2
+          mt: -2,
+          height: "100%"
         },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
           id: donation.data.id,

package/lib/checkout/table.js

@@ -123,6 +123,9 @@ function CheckoutTable({
     });
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_system.Box, {
+    sx: {
+      height: "100%"
+    },
     children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
       id: hashSessionId || sessionId,
       mode,

package/lib/payment/error.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+import type { LiteralUnion } from 'type-fest';
+type ModeType = LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
 type Props = {
     title: string;
     description: string;
     button?: string;
-    mode?: string;
+    mode?: ModeType;
 };
 declare function PaymentError({ title, description, button, mode }: Props): import("react").JSX.Element;
 declare namespace PaymentError {

package/lib/payment/error.js

@@ -6,16 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = PaymentError;
 var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
+function getHeightStyle(mode) {
+  switch (mode) {
+    case "standalone":
+      return {
+        height: "100%"
+      };
+    default:
+      return {
+        height: "auto",
+        minHeight: 200
+      };
+  }
+}
 function PaymentError({
   title,
   description,
   button,
   mode
 }) {
+  const heightStyle = getHeightStyle(mode);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-    sx: {
-      height: mode === "inline" ? "auto" : "100vh"
-    },
+    sx: heightStyle,
     alignItems: "center",
     justifyContent: "center",
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.278",
+  "version": "1.13.281",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -91,7 +91,7 @@
     "@babel/core": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.13.278",
+    "@blocklet/payment-types": "1.13.281",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
@@ -120,5 +120,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "1d8a1be23706258132357c6443c274e2d5af13ce"
+  "gitHead": "dea66d4a8bbd397b5a8f8235332349aaca0ab72c"
 }

package/src/checkout/donate.tsx

@@ -248,7 +248,7 @@ export default function CheckoutDonate({ settings, livemode, timeout, onPaid, on
         showCloseButton
         disableEscapeKeyDown
         onClose={(e: any, reason: string) => setState({ open: reason === 'backdropClick' })}>
-        <Box sx={{ mb: 1, mt: -2 }}>
+        <Box sx={{ mb: 1, mt: -2, height: '100%' }}>
           <CheckoutForm
             id={donation.data.id}
             onPaid={handlePaid}

package/src/checkout/table.tsx

@@ -102,7 +102,7 @@ export default function CheckoutTable({ id, mode, onPaid, onError, onChange, ext
   }
 
   return (
-    <Box>
+    <Box sx={{ height: '100%' }}>
       <CheckoutForm
         id={hashSessionId || sessionId}
         mode={mode}

package/src/payment/error.tsx

@@ -1,15 +1,27 @@
 import { Button, Link, Stack, Typography } from '@mui/material';
+import type { LiteralUnion } from 'type-fest';
+
+type ModeType = LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
 
 type Props = {
   title: string;
   description: string;
   button?: string;
-  mode?: string;
+  mode?: ModeType;
 };
 
+function getHeightStyle(mode: ModeType | undefined): any {
+  switch (mode) {
+    case 'standalone':
+      return { height: '100%' }; // 独立模式下，高度为100vh
+    default:
+      return { height: 'auto', minHeight: 200 }; // 默认情况下，高度根据内容自动调整
+  }
+}
 export default function PaymentError({ title, description, button, mode }: Props) {
+  const heightStyle = getHeightStyle(mode);
   return (
-    <Stack sx={{ height: mode === 'inline' ? 'auto' : '100vh' }} alignItems="center" justifyContent="center">
+    <Stack sx={heightStyle} alignItems="center" justifyContent="center">
       <Stack sx={{ width: '280px' }} direction="column" alignItems="center" justifyContent="center">
         <Typography variant="h5" sx={{ mb: 2 }}>
           {title}