@blocklet/payment-react 1.14.22 → 1.14.23

package/lib/theme/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PaymentThemeProvider = PaymentThemeProvider;
-exports.themeOverrides = void 0;
 Object.defineProperty(exports, "typography", {
   enumerable: true,
   get: function () {
@@ -14,227 +13,236 @@ Object.defineProperty(exports, "typography", {
 var _jsxRuntime = require("react/jsx-runtime");
 var _styles = require("@mui/material/styles");
 var _Theme = require("@arcblock/ux/lib/Theme");
+var _lodash = require("lodash");
 var _material = require("@mui/material");
 var _typography = require("./typography");
 require("./index.css");
-const themeOverrides = exports.themeOverrides = {
-  shape: {
-    borderRadius: 8
-  },
-  components: {
-    MuiOutlinedInput: {
-      styleOverrides: {
-        root: {
-          borderRadius: "var(--radius-m, 8px)",
-          backgroundColor: "var(--backgrounds-bg-field)",
-          "&.Mui-disabled": {
-            backgroundColor: "var(--backgrounds-bg-disabled)"
-          },
-          ".MuiOutlinedInput-notchedOutline": {
-            borderColor: "var(--stroke-border-base, #EFF1F5)"
-          },
-          ".MuiInputBase-input": {
-            fontSize: "14px",
-            minHeight: "1.65em",
-            lineHeight: "1.65em"
+PaymentThemeProvider.defaultProps = {
+  theme: {}
+};
+function PaymentThemeProvider({
+  children,
+  theme: customTheme = {}
+}) {
+  const {
+    sx: themeSX = {},
+    ...restTheme
+  } = customTheme || {};
+  const parentTheme = (0, _styles.useTheme)();
+  const rootStyle = getComputedStyle(document.documentElement);
+  const themeOverrides = {
+    shape: {
+      borderRadius: 8
+    },
+    components: {
+      MuiOutlinedInput: {
+        styleOverrides: {
+          root: {
+            borderRadius: "var(--radius-m, 8px)",
+            backgroundColor: "var(--backgrounds-bg-field)",
+            "&.Mui-disabled": {
+              backgroundColor: "var(--backgrounds-bg-disabled)"
+            },
+            ".MuiOutlinedInput-notchedOutline": {
+              borderColor: "var(--stroke-border-base, #EFF1F5)"
+            },
+            ".MuiInputBase-input": {
+              fontSize: "14px",
+              minHeight: "1.65em",
+              lineHeight: "1.65em"
+            }
           }
         }
-      }
-    },
-    MuiButton: {
-      defaultProps: {
-        size: "small"
       },
-      styleOverrides: {
-        root: {
-          fontSize: "1rem",
-          fontWeight: 500,
-          textTransform: "none"
+      MuiButton: {
+        defaultProps: {
+          size: "small"
         },
-        containedPrimary: {
-          backgroundColor: "var(--buttons-button-inverted, #010714)",
-          color: "var(--foregrounds-fg-on-color, #fff)",
-          "&:hover": {
-            backgroundColor: "var(--buttons-button-inverted-hover, #1f2937)"
+        styleOverrides: {
+          root: {
+            fontSize: "1rem",
+            fontWeight: 500,
+            textTransform: "none"
+          },
+          containedPrimary: {
+            backgroundColor: "var(--buttons-button-inverted, #010714)",
+            color: "var(--foregrounds-fg-on-color, #fff)",
+            "&:hover": {
+              backgroundColor: "var(--buttons-button-inverted-hover, #1f2937)"
+            }
+          },
+          outlinedPrimary: {
+            color: "var(--foregrounds-fg-base, #010714)",
+            borderColor: "var(--stroke-button-secondary-border, #E5E7EB)",
+            "&:hover": {
+              backgroundColor: "var(--buttons-button-neutral-hover, #F3F4F6)",
+              borderColor: "var(--stroke-button-secondary-border, #E5E7EB)"
+            }
+          },
+          sizeSmall: {
+            height: 32
           }
+        }
+      },
+      MuiIconButton: {
+        defaultProps: {
+          size: "small"
         },
-        outlinedPrimary: {
-          color: "var(--foregrounds-fg-base, #010714)",
-          borderColor: "var(--stroke-button-secondary-border, #E5E7EB)",
-          "&:hover": {
-            backgroundColor: "var(--buttons-button-neutral-hover, #F3F4F6)",
-            borderColor: "var(--stroke-button-secondary-border, #E5E7EB)"
+        styleOverrides: {
+          root: {
+            textTransform: "none"
+          },
+          colorPrimary: {
+            backgroundColor: "#fff"
           }
-        },
-        sizeSmall: {
-          height: 32
         }
-      }
-    },
-    MuiIconButton: {
-      defaultProps: {
-        size: "small"
       },
-      styleOverrides: {
-        root: {
-          textTransform: "none"
-        },
-        colorPrimary: {
-          backgroundColor: "#fff"
+      MuiToggleButton: {
+        styleOverrides: {
+          root: {
+            textTransform: "none"
+          }
         }
-      }
-    },
-    MuiToggleButton: {
-      styleOverrides: {
-        root: {
-          textTransform: "none"
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            textTransform: "none"
+          }
         }
-      }
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          textTransform: "none"
+      },
+      MuiTooltip: {
+        defaultProps: {
+          enterTouchDelay: 3e3,
+          leaveTouchDelay: 100
         }
-      }
-    },
-    MuiTooltip: {
-      defaultProps: {
-        enterTouchDelay: 3e3,
-        leaveTouchDelay: 100
-      }
-    },
-    MuiPopover: {
-      styleOverrides: {
-        paper: ({
-          theme
-        }) => ({
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
-        })
-      }
-    },
-    MuiCssBaseline: {
-      styleOverrides: {
-        ".base-card": {
-          padding: "20px",
-          borderRadius: "var(--radius-l)",
-          background: "var(--backgrounds-bg-base)",
-          boxShadow: "0px 0px 0px 1px var(--shadows-card-rest-1, rgba(2, 7, 19, 0.08)), 0px 1px 2px -1px var(--shadows-card-rest-2, rgba(2, 7, 19, 0.08)), 0px 2px 4px 0px var(--shadows-card-rest-3, rgba(2, 7, 19, 0.04))"
-        },
-        ".base-label": {
-          color: "var(--foregrounds-fg-base, #010714)",
-          fontSize: "16px",
-          fontWeight: "500",
-          lineHeight: "24px"
-        },
-        a: {
-          textDecoration: "none !important"
+      },
+      MuiPopover: {
+        styleOverrides: {
+          paper: ({
+            theme
+          }) => ({
+            border: `1px solid ${theme.palette.divider}`,
+            boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+          })
         }
-      }
-    },
-    // MuiButtonBase: {
-    //    styleOverrides: {
-    //    }
-    // },
-    MuiRadio: {
-      styleOverrides: {
-        root: {
-          color: "var(--stroke-border-base, #EFF1F5)",
-          "&:hover": {
-            background: "none"
+      },
+      MuiCssBaseline: {
+        styleOverrides: {
+          ".base-card": {
+            padding: "20px",
+            borderRadius: "var(--radius-l)",
+            background: "var(--backgrounds-bg-base)",
+            boxShadow: "0px 0px 0px 1px var(--shadows-card-rest-1, rgba(2, 7, 19, 0.08)), 0px 1px 2px -1px var(--shadows-card-rest-2, rgba(2, 7, 19, 0.08)), 0px 2px 4px 0px var(--shadows-card-rest-3, rgba(2, 7, 19, 0.04))"
+          },
+          ".base-label": {
+            color: "var(--foregrounds-fg-base, #010714)",
+            fontSize: "16px",
+            fontWeight: "500",
+            lineHeight: "24px"
           },
-          "&.Mui-checked": {
-            color: "var(--foregrounds-fg-interactive, #0086FF)"
+          a: {
+            textDecoration: "none !important"
           }
         }
-      }
-    },
-    MuiCheckbox: {
-      styleOverrides: {
-        root: {
-          color: "var(--backgrounds-bg-interactive, #0086FF)",
-          "&.Mui-checked": {
-            color: "var(--foregrounds-fg-interactive, #0086FF)"
+      },
+      // MuiButtonBase: {
+      //    styleOverrides: {
+      //    }
+      // },
+      MuiRadio: {
+        styleOverrides: {
+          root: {
+            color: "var(--stroke-border-base, #EFF1F5)",
+            "&:hover": {
+              background: "none"
+            },
+            "&.Mui-checked": {
+              color: "var(--foregrounds-fg-interactive, #0086FF)"
+            }
           }
         }
-      }
-    },
-    MuiDivider: {
-      styleOverrides: {
-        root: {
-          borderColor: "var(--stroke-border-base, #EFF1F5)"
+      },
+      MuiCheckbox: {
+        styleOverrides: {
+          root: {
+            color: "var(--backgrounds-bg-interactive, #0086FF)",
+            "&.Mui-checked": {
+              color: "var(--foregrounds-fg-interactive, #0086FF)"
+            }
+          }
         }
-      }
-    },
-    MuiInputBase: {
-      defaultProps: {
-        size: "small"
       },
-      styleOverrides: {
-        root: () => ({
-          fontSize: "0.875rem",
-          backgroundColor: "var(--backgrounds-bg-field, #F9FAFB)"
-        })
-      }
-    },
-    MuiInputLabel: {
-      defaultProps: {
-        size: "small"
+      MuiDivider: {
+        styleOverrides: {
+          root: {
+            borderColor: "var(--stroke-border-base, #EFF1F5)"
+          }
+        }
       },
-      styleOverrides: {
-        root: () => ({
-          fontSize: "0.875rem"
-        })
-      }
-    },
-    MuiChip: {
-      styleOverrides: {
-        root: {
-          borderRadius: "var(--radius-S, 4px)",
-          border: "1px solid transparent",
-          "&.MuiChip-filledSuccess": {
-            color: "var(--tags-tag-green-text, #007C52)",
-            backgroundColor: "var(--tags-tag-green-bg, #B7FEE3)",
-            borderColor: "var(--tags-tag-green-border, #63F9CB)"
-          },
-          "&.MuiChip-filledDefault": {
-            color: "var(--tags-tag-neutral-text, #007C52)",
-            backgroundColor: "var(--tags-tag-neutral-bg, #B7FEE3)",
-            borderColor: "var(--tags-tag-neutral-border, #E5E7EB)"
-          },
-          "&.MuiChip-filledSecondary": {
-            color: "var(--tags-tag-purple-text, #8118EB)",
-            backgroundColor: " var(--tags-tag-purple-bg, #EFE9FF)",
-            borderColor: "var(--tags-tag-purple-border, #E1D6FF)"
-          },
-          "&.MuiChip-filledError": {
-            color: "var(--tags-tag-red-text, #E40031)",
-            backgroundColor: "var(--tags-tag-red-bg, #FFE2E6)",
-            borderColor: "var(--tags-tag-red-border, #FFC8D3)"
-          },
-          "&.MuiChip-filledWarning": {
-            color: "var(--tags-tag-orange-text, #D24000)",
-            backgroundColor: "var(--tags-tag-orange-bg, #FFF4BC)",
-            borderColor: "var(--tags-tag-orange-border, #FFE467)"
-          },
-          "&.MuiChip-filledPrimary,&.MuiChip-filledInfo": {
-            color: "var(--tags-tag-blue-text, #0051E9)",
-            backgroundColor: "var(--tags-tag-blue-bg, #D2ECFF)",
-            borderColor: "var(--tags-tag-blue-border, #AFDDFF)"
+      MuiInputBase: {
+        defaultProps: {
+          size: "small"
+        },
+        styleOverrides: {
+          root: () => ({
+            fontSize: "0.875rem",
+            backgroundColor: "var(--backgrounds-bg-field, #F9FAFB)"
+          })
+        }
+      },
+      MuiInputLabel: {
+        defaultProps: {
+          size: "small"
+        },
+        styleOverrides: {
+          root: () => ({
+            fontSize: "0.875rem"
+          })
+        }
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: {
+            borderRadius: "var(--radius-S, 4px)",
+            border: "1px solid transparent",
+            "&.MuiChip-filledSuccess": {
+              color: "var(--tags-tag-green-text, #007C52)",
+              backgroundColor: "var(--tags-tag-green-bg, #B7FEE3)",
+              borderColor: "var(--tags-tag-green-border, #63F9CB)"
+            },
+            "&.MuiChip-filledDefault": {
+              color: "var(--tags-tag-neutral-text, #007C52)",
+              backgroundColor: "var(--tags-tag-neutral-bg, #B7FEE3)",
+              borderColor: "var(--tags-tag-neutral-border, #E5E7EB)"
+            },
+            "&.MuiChip-filledSecondary": {
+              color: "var(--tags-tag-purple-text, #8118EB)",
+              backgroundColor: " var(--tags-tag-purple-bg, #EFE9FF)",
+              borderColor: "var(--tags-tag-purple-border, #E1D6FF)"
+            },
+            "&.MuiChip-filledError": {
+              color: "var(--tags-tag-red-text, #E40031)",
+              backgroundColor: "var(--tags-tag-red-bg, #FFE2E6)",
+              borderColor: "var(--tags-tag-red-border, #FFC8D3)"
+            },
+            "&.MuiChip-filledWarning": {
+              color: "var(--tags-tag-orange-text, #D24000)",
+              backgroundColor: "var(--tags-tag-orange-bg, #FFF4BC)",
+              borderColor: "var(--tags-tag-orange-border, #FFE467)"
+            },
+            "&.MuiChip-filledPrimary,&.MuiChip-filledInfo": {
+              color: "var(--tags-tag-blue-text, #0051E9)",
+              backgroundColor: "var(--tags-tag-blue-bg, #D2ECFF)",
+              borderColor: "var(--tags-tag-blue-border, #AFDDFF)"
+            }
           }
         }
       }
     }
-  }
-};
-function PaymentThemeProvider({
-  children
-}) {
-  const theme = (0, _styles.useTheme)();
-  const rootStyle = getComputedStyle(document.documentElement);
-  const merged = (0, _Theme.create)({
-    ...theme,
+  };
+  const mergeTheme = (0, _Theme.create)((0, _lodash.merge)((0, _lodash.cloneDeep)({
+    ...parentTheme,
     typography: _typography.typography,
     palette: {
       primary: {
@@ -251,9 +259,15 @@ function PaymentThemeProvider({
       }
     },
     ...themeOverrides
-  });
+  }), restTheme));
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
-    theme: merged,
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CssBaseline, {}), children]
+    theme: mergeTheme,
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CssBaseline, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        height: "100%",
+        ...themeSX
+      },
+      children
+    })]
   });
 }

package/lib/types/index.d.ts

@@ -1,4 +1,5 @@
 import type { TCheckoutSessionExpanded, TCustomer, TPaymentIntent, TPaymentLink, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import { SxProps, ThemeOptions } from '@mui/material';
 import { LiteralUnion } from 'type-fest';
 export type CheckoutContext = {
     checkoutSession: TCheckoutSessionExpanded;
@@ -8,6 +9,7 @@ export type CheckoutContext = {
     customer?: TCustomer;
     mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
     action?: string;
+    showCheckoutSummary?: boolean;
 };
 export type CheckoutFormData = {
     customer_name: string;
@@ -24,12 +26,15 @@ export type CheckoutFormData = {
         postal_code: string;
     };
 };
+export type PaymentThemeOptions = ThemeOptions & {
+    sx?: SxProps;
+};
 export type CheckoutProps = Partial<CheckoutCallbacks> & {
     id: string;
     extraParams?: Record<string, any>;
     action?: string;
     mode?: LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
-    customTheme?: boolean;
+    theme?: 'default' | 'inherit' | PaymentThemeOptions;
 };
 export type CheckoutCallbacks = {
     onPaid: (res: CheckoutContext) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.22",
+  "version": "1.14.23",
   "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.22",
+    "@blocklet/payment-types": "1.14.23",
     "@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": "1fabd8f359e12e8ac68b20bd2d0d04b7928d16f3"
+  "gitHead": "868311b6e37e21e5755e7a78daf335f3057dd1c8"
 }

package/src/checkout/donate.tsx

@@ -35,7 +35,7 @@ import { useEffect, useState } from 'react';
 import TxLink from '../components/blockchain/tx';
 import api from '../libs/api';
 import { formatAmount, formatBNStr, formatDateTime, formatError, lazyLoad } from '../libs/util';
-import { CheckoutProps } from '../types';
+import { CheckoutProps, PaymentThemeOptions } from '../types';
 import CheckoutForm from './form';
 import { PaymentThemeProvider } from '../theme';
 
@@ -60,7 +60,7 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
   inlineOptions?: {
     button?: ButtonType;
   };
-  customTheme?: boolean;
+  theme?: 'default' | 'inherit' | PaymentThemeOptions;
 };
 
 const donationCache: { [key: string]: Promise<TPaymentLink> } = {};
@@ -459,9 +459,16 @@ function CheckoutDonateInner({ settings, livemode, timeout, onPaid, onError, mod
 }
 
 export default function CheckoutDonate(props: DonateProps) {
-  if (props.customTheme) {
+  if (props.theme === 'inherit') {
     return <CheckoutDonateInner {...props} />;
   }
+  if (props.theme && typeof props.theme === 'object') {
+    return (
+      <PaymentThemeProvider theme={props.theme}>
+        <CheckoutDonateInner {...props} />
+      </PaymentThemeProvider>
+    );
+  }
   return (
     <PaymentThemeProvider>
       <CheckoutDonateInner {...props} />
@@ -470,6 +477,7 @@ export default function CheckoutDonate(props: DonateProps) {
 }
 
 CheckoutDonate.defaultProps = {
+  theme: 'default',
   livemode: true,
   timeout: 5000,
   mode: 'default',

package/src/checkout/form.tsx

@@ -40,7 +40,8 @@ export default function CheckoutForm({
   goBack,
   extraParams,
   action,
-  customTheme = false,
+  theme = 'default',
+  ...restProps
 }: CheckoutProps) {
   if (!id.startsWith('plink_') && !id.startsWith('cs_')) {
     throw new Error('Either a checkoutSession or a paymentLink id is required.');
@@ -75,9 +76,29 @@ export default function CheckoutForm({
     onError?.(err);
   };
 
-  if (!customTheme) {
+  if (theme === 'inherit') {
     return (
-      <PaymentThemeProvider>
+      <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 || state.appError}
+        onPaid={handlePaid}
+        onError={handleError}
+        onChange={onChange}
+        goBack={goBack}
+        mode={mode as string}
+        action={action}
+        {...restProps}
+      />
+    );
+  }
+  if (theme && typeof theme === 'object') {
+    return (
+      <PaymentThemeProvider theme={theme}>
         <Payment
           checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
           paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
@@ -92,26 +113,30 @@ export default function CheckoutForm({
           goBack={goBack}
           mode={mode as string}
           action={action}
+          {...restProps}
         />
       </PaymentThemeProvider>
     );
   }
   return (
-    <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 || state.appError}
-      onPaid={handlePaid}
-      onError={handleError}
-      onChange={onChange}
-      goBack={goBack}
-      mode={mode as string}
-      action={action}
-    />
+    <PaymentThemeProvider>
+      <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 || state.appError}
+        onPaid={handlePaid}
+        onError={handleError}
+        onChange={onChange}
+        goBack={goBack}
+        mode={mode as string}
+        action={action}
+        {...restProps}
+      />
+    </PaymentThemeProvider>
   );
 }
 

package/src/checkout/table.tsx

@@ -126,9 +126,16 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
 }
 
 export default function CheckoutTable(props: CheckoutProps) {
-  if (props.customTheme) {
+  if (props.theme === 'inherit') {
     return <CheckoutTableInner {...props} />;
   }
+  if (props.theme && typeof props.theme === 'object') {
+    return (
+      <PaymentThemeProvider theme={props.theme}>
+        <CheckoutTableInner {...props} />
+      </PaymentThemeProvider>
+    );
+  }
   return (
     <PaymentThemeProvider>
       <CheckoutTableInner {...props} />