@blocklet/payment-react 1.14.23 → 1.14.24

package/es/checkout/donate.js

@@ -211,7 +211,16 @@ function useDonation(settings, livemode = true, mode = "default") {
     setState
   };
 }
-function CheckoutDonateInner({ settings, livemode, timeout, onPaid, onError, mode, inlineOptions = {} }) {
+function CheckoutDonateInner({
+  settings,
+  livemode,
+  timeout,
+  onPaid,
+  onError,
+  mode,
+  inlineOptions = {},
+  theme
+}) {
   const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
   const [anchorEl, setAnchorEl] = useState(null);
   const [popoverOpen, setPopoverOpen] = useState(false);
@@ -340,15 +349,29 @@ function CheckoutDonateInner({ settings, livemode, timeout, onPaid, onError, mod
         maxWidth: "md",
         showCloseButton: true,
         disableEscapeKeyDown: true,
+        sx: {
+          ".MuiDialogContent-root": {
+            padding: {
+              xs: 0,
+              md: "0 16px 0"
+            },
+            borderTop: "1px solid var(--stroke-border-base, #EFF1F5)",
+            width: {
+              xs: "100%",
+              md: 900
+            }
+          }
+        },
         onClose: (e, reason) => setState({ open: reason === "backdropClick" }),
-        children: /* @__PURE__ */ jsx(Box, { sx: { mb: 1, height: "100%" }, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Box, { sx: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsx(
           CheckoutForm,
           {
             id: donation.data?.id,
             onPaid: handlePaid,
             onError,
             action: settings.appearance?.button?.text,
-            mode: "inline"
+            mode: "inline",
+            theme
           }
         ) })
       }

package/es/payment/product-donation.js

@@ -79,20 +79,30 @@ export default function ProductDonation({
           textAlign: "center",
           ...state.selected === amount && !state.custom ? { borderColor: "primary.main" } : {}
         },
-        children: /* @__PURE__ */ jsx(CardActionArea, { onClick: () => handleSelect(amount), children: /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { py: 1 }, spacing: 0.5, alignItems: "flex-end", justifyContent: "center", children: [
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              component: "strong",
-              lineHeight: 1,
-              variant: "h5",
-              sx: { fontVariantNumeric: "tabular-nums", fontWeight: 400 },
-              children: amount
-            }
-          ),
-          /* @__PURE__ */ jsx(Typography, { component: "small", lineHeight: 1, fontSize: 12, children: "ABT" }),
-          " "
-        ] }) })
+        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
     )) }),

package/es/payment/summary.js

@@ -251,7 +251,7 @@ export default function PaymentSummary({
       ),
       !settings.livemode && /* @__PURE__ */ jsx(Livemode, {})
     ] }),
-    isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    isMobile && !donationSettings ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         Stack,
         {

package/lib/checkout/donate.js

@@ -293,7 +293,8 @@ function CheckoutDonateInner({
   onPaid,
   onError,
   mode,
-  inlineOptions = {}
+  inlineOptions = {},
+  theme
 }) {
   const {
     state,
@@ -446,20 +447,34 @@ function CheckoutDonateInner({
       maxWidth: "md",
       showCloseButton: true,
       disableEscapeKeyDown: true,
+      sx: {
+        ".MuiDialogContent-root": {
+          padding: {
+            xs: 0,
+            md: "0 16px 0"
+          },
+          borderTop: "1px solid var(--stroke-border-base, #EFF1F5)",
+          width: {
+            xs: "100%",
+            md: 900
+          }
+        }
+      },
       onClose: (e, reason) => setState({
         open: reason === "backdropClick"
       }),
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
-          mb: 1,
-          height: "100%"
+          height: "100%",
+          width: "100%"
         },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
           id: donation.data?.id,
           onPaid: handlePaid,
           onError,
           action: settings.appearance?.button?.text,
-          mode: "inline"
+          mode: "inline",
+          theme
         })
       })
     })]

package/lib/payment/product-donation.js

@@ -151,7 +151,8 @@ function ProductDonation({
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
             direction: "row",
             sx: {
-              py: 1
+              py: 1,
+              px: 0.5
             },
             spacing: 0.5,
             alignItems: "flex-end",
@@ -159,7 +160,7 @@ function ProductDonation({
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               component: "strong",
               lineHeight: 1,
-              variant: "h5",
+              variant: "h3",
               sx: {
                 fontVariantNumeric: "tabular-nums",
                 fontWeight: 400

package/lib/payment/summary.js

@@ -289,7 +289,7 @@ function PaymentSummary({
           },
           children: action || t("payment.checkout.orderSummary")
         }), !settings.livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {})]
-      }), isMobile ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      }), isMobile && !donationSettings ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           justifyContent: "space-between",
           flexDirection: "row",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.23",
+  "version": "1.14.24",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.14.23",
+    "@blocklet/payment-types": "1.14.24",
     "@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": "868311b6e37e21e5755e7a78daf335f3057dd1c8"
+  "gitHead": "34ddc3ea5d4e166304a4966a926bfc35796193b1"
 }

package/src/checkout/donate.tsx

@@ -301,7 +301,16 @@ function useDonation(settings: DonationSettings, livemode: boolean = true, mode
   };
 }
 
-function CheckoutDonateInner({ settings, livemode, timeout, onPaid, onError, mode, inlineOptions = {} }: DonateProps) {
+function CheckoutDonateInner({
+  settings,
+  livemode,
+  timeout,
+  onPaid,
+  onError,
+  mode,
+  inlineOptions = {},
+  theme,
+}: DonateProps) {
   // eslint-disable-line
   const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
 
@@ -442,14 +451,28 @@ function CheckoutDonateInner({ settings, livemode, timeout, onPaid, onError, mod
           maxWidth="md"
           showCloseButton
           disableEscapeKeyDown
+          sx={{
+            '.MuiDialogContent-root': {
+              padding: {
+                xs: 0,
+                md: '0 16px 0',
+              },
+              borderTop: '1px solid var(--stroke-border-base, #EFF1F5)',
+              width: {
+                xs: '100%',
+                md: 900,
+              },
+            },
+          }}
           onClose={(e: any, reason: string) => setState({ open: reason === 'backdropClick' })}>
-          <Box sx={{ mb: 1, height: '100%' }}>
+          <Box sx={{ height: '100%', width: '100%' }}>
             <CheckoutForm
               id={donation.data?.id}
               onPaid={handlePaid}
               onError={onError}
               action={settings.appearance?.button?.text}
               mode="inline"
+              theme={theme}
             />
           </Box>
         </Dialog>

package/src/payment/product-donation.tsx

@@ -99,11 +99,16 @@ export default function ProductDonation({
                   ...(state.selected === amount && !state.custom ? { borderColor: 'primary.main' } : {}),
                 }}>
                 <CardActionArea onClick={() => handleSelect(amount)}>
-                  <Stack direction="row" sx={{ py: 1 }} spacing={0.5} alignItems="flex-end" justifyContent="center">
+                  <Stack
+                    direction="row"
+                    sx={{ py: 1, px: 0.5 }}
+                    spacing={0.5}
+                    alignItems="flex-end"
+                    justifyContent="center">
                     <Typography
                       component="strong"
                       lineHeight={1}
-                      variant="h5"
+                      variant="h3"
                       sx={{ fontVariantNumeric: 'tabular-nums', fontWeight: 400 }}>
                       {amount}
                     </Typography>

package/src/payment/summary.tsx

@@ -303,7 +303,7 @@ export default function PaymentSummary({
           </Typography>
           {!settings.livemode && <Livemode />}
         </Box>
-        {isMobile ? (
+        {isMobile && !donationSettings ? (
           <>
             <Stack
               justifyContent="space-between"