@blocklet/payment-react 1.14.22 → 1.14.23

package/es/theme/index.js

@@ -1,243 +1,256 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ThemeProvider, useTheme } from "@mui/material/styles";
 import { create } from "@arcblock/ux/lib/Theme";
-import { CssBaseline } from "@mui/material";
+import { cloneDeep, merge } from "lodash";
+import { Box, CssBaseline } from "@mui/material";
 import { typography } from "./typography.js";
 import "./index.css";
 export { typography };
-export 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"
+PaymentThemeProvider.defaultProps = {
+  theme: {}
+};
+export function PaymentThemeProvider({
+  children,
+  theme: customTheme = {}
+}) {
+  const { sx: themeSX = {}, ...restTheme } = customTheme || {};
+  const parentTheme = 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))"
           },
-          "&.Mui-checked": {
-            color: "var(--foregrounds-fg-interactive, #0086FF)"
+          ".base-label": {
+            color: "var(--foregrounds-fg-base, #010714)",
+            fontSize: "16px",
+            fontWeight: "500",
+            lineHeight: "24px"
+          },
+          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)"
-        }
-      }
-    },
-    MuiInputBase: {
-      defaultProps: {
-        size: "small"
       },
-      styleOverrides: {
-        root: () => ({
-          fontSize: "0.875rem",
-          backgroundColor: "var(--backgrounds-bg-field, #F9FAFB)"
-        })
-      }
-    },
-    MuiInputLabel: {
-      defaultProps: {
-        size: "small"
+      MuiCheckbox: {
+        styleOverrides: {
+          root: {
+            color: "var(--backgrounds-bg-interactive, #0086FF)",
+            "&.Mui-checked": {
+              color: "var(--foregrounds-fg-interactive, #0086FF)"
+            }
+          }
+        }
       },
-      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)"
+      MuiDivider: {
+        styleOverrides: {
+          root: {
+            borderColor: "var(--stroke-border-base, #EFF1F5)"
           }
         }
-      }
-    }
-  }
-};
-export function PaymentThemeProvider({ children }) {
-  const theme = useTheme();
-  const rootStyle = getComputedStyle(document.documentElement);
-  const merged = create({
-    ...theme,
-    typography,
-    palette: {
-      primary: {
-        main: rootStyle.getPropertyValue("--foregrounds-fg-base").trim() || "#030712"
       },
-      text: {
-        primary: rootStyle.getPropertyValue("--foregrounds-fg-base").trim() || "#030712",
-        secondary: rootStyle.getPropertyValue("--foregrounds-fg-subtle").trim() || "#4b5563",
-        lighter: rootStyle.getPropertyValue("--foregrounds-fg-muted").trim() || "#9ca3af",
-        link: rootStyle.getPropertyValue("--foregrounds-fg-interactive").trim() || "#0086FF"
+      MuiInputBase: {
+        defaultProps: {
+          size: "small"
+        },
+        styleOverrides: {
+          root: () => ({
+            fontSize: "0.875rem",
+            backgroundColor: "var(--backgrounds-bg-field, #F9FAFB)"
+          })
+        }
       },
-      error: {
-        main: rootStyle.getPropertyValue("--foregrounds-fg-danger").trim() || "#FF003B"
+      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)"
+            }
+          }
+        }
       }
-    },
-    ...themeOverrides
-  });
-  return /* @__PURE__ */ jsxs(ThemeProvider, { theme: merged, children: [
+    }
+  };
+  const mergeTheme = create(
+    merge(
+      cloneDeep({
+        ...parentTheme,
+        typography,
+        palette: {
+          primary: {
+            main: rootStyle.getPropertyValue("--foregrounds-fg-base").trim() || "#030712"
+          },
+          text: {
+            primary: rootStyle.getPropertyValue("--foregrounds-fg-base").trim() || "#030712",
+            secondary: rootStyle.getPropertyValue("--foregrounds-fg-subtle").trim() || "#4b5563",
+            lighter: rootStyle.getPropertyValue("--foregrounds-fg-muted").trim() || "#9ca3af",
+            link: rootStyle.getPropertyValue("--foregrounds-fg-interactive").trim() || "#0086FF"
+          },
+          error: {
+            main: rootStyle.getPropertyValue("--foregrounds-fg-danger").trim() || "#FF003B"
+          }
+        },
+        ...themeOverrides
+      }),
+      restTheme
+    )
+  );
+  return /* @__PURE__ */ jsxs(ThemeProvider, { theme: mergeTheme, children: [
     /* @__PURE__ */ jsx(CssBaseline, {}),
-    children
+    /* @__PURE__ */ jsx(Box, { sx: { height: "100%", ...themeSX }, children })
   ] });
 }

package/es/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/lib/checkout/donate.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { DonationSettings, TCheckoutSessionExpanded, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
 import { ButtonProps as MUIButtonProps } from '@mui/material';
-import { CheckoutProps } from '../types';
+import { CheckoutProps, PaymentThemeOptions } from '../types';
 export type DonateHistory = {
     supporters: TCheckoutSessionExpanded[];
     currency: TPaymentCurrency;
@@ -20,11 +20,12 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     inlineOptions?: {
         button?: ButtonType;
     };
-    customTheme?: boolean;
+    theme?: 'default' | 'inherit' | PaymentThemeOptions;
 };
 declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element;
 declare namespace CheckoutDonate {
     var defaultProps: {
+        theme: string;
         livemode: boolean;
         timeout: number;
         mode: string;

package/lib/checkout/donate.js

@@ -466,11 +466,19 @@ function CheckoutDonateInner({
   });
 }
 function CheckoutDonate(props) {
-  if (props.customTheme) {
+  if (props.theme === "inherit") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutDonateInner, {
       ...props
     });
   }
+  if (props.theme && typeof props.theme === "object") {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
+      theme: props.theme,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutDonateInner, {
+        ...props
+      })
+    });
+  }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
     children: /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutDonateInner, {
       ...props
@@ -478,6 +486,7 @@ function CheckoutDonate(props) {
   });
 }
 CheckoutDonate.defaultProps = {
+  theme: "default",
   livemode: true,
   timeout: 5e3,
   mode: "default",

package/lib/checkout/form.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, customTheme, }: CheckoutProps): import("react").JSX.Element;
+declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, theme, ...restProps }: CheckoutProps): import("react").JSX.Element;
 declare namespace CheckoutForm {
     var defaultProps: {
         onPaid: any;

package/lib/checkout/form.js

@@ -40,7 +40,8 @@ function CheckoutForm({
   goBack,
   extraParams,
   action,
-  customTheme = false
+  theme = "default",
+  ...restProps
 }) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
     throw new Error("Either a checkoutSession or a paymentLink id is required.");
@@ -72,8 +73,27 @@ function CheckoutForm({
     });
     onError?.(err);
   };
-  if (!customTheme) {
+  if (theme === "inherit") {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment.default, {
+      checkoutSession: data?.checkoutSession,
+      paymentMethods: data?.paymentMethods,
+      paymentIntent: data?.paymentIntent,
+      paymentLink: data?.paymentLink,
+      customer: data?.customer,
+      completed: state.completed,
+      error: apiError || state.appError,
+      onPaid: handlePaid,
+      onError: handleError,
+      onChange,
+      goBack,
+      mode,
+      action,
+      ...restProps
+    });
+  }
+  if (theme && typeof theme === "object") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
+      theme,
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment.default, {
         checkoutSession: data?.checkoutSession,
         paymentMethods: data?.paymentMethods,
@@ -87,24 +107,28 @@ function CheckoutForm({
         onChange,
         goBack,
         mode,
-        action
+        action,
+        ...restProps
       })
     });
   }
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment.default, {
-    checkoutSession: data?.checkoutSession,
-    paymentMethods: data?.paymentMethods,
-    paymentIntent: data?.paymentIntent,
-    paymentLink: data?.paymentLink,
-    customer: data?.customer,
-    completed: state.completed,
-    error: apiError || state.appError,
-    onPaid: handlePaid,
-    onError: handleError,
-    onChange,
-    goBack,
-    mode,
-    action
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment.default, {
+      checkoutSession: data?.checkoutSession,
+      paymentMethods: data?.paymentMethods,
+      paymentIntent: data?.paymentIntent,
+      paymentLink: data?.paymentLink,
+      customer: data?.customer,
+      completed: state.completed,
+      error: apiError || state.appError,
+      onPaid: handlePaid,
+      onError: handleError,
+      onChange,
+      goBack,
+      mode,
+      action,
+      ...restProps
+    })
   });
 }
 CheckoutForm.defaultProps = {

package/lib/checkout/table.js

@@ -148,11 +148,19 @@ function CheckoutTableInner({
   });
 }
 function CheckoutTable(props) {
-  if (props.customTheme) {
+  if (props.theme === "inherit") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutTableInner, {
       ...props
     });
   }
+  if (props.theme && typeof props.theme === "object") {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
+      theme: props.theme,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutTableInner, {
+        ...props
+      })
+    });
+  }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
     children: /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutTableInner, {
       ...props