@blocklet/payment-react 1.14.21 → 1.14.23

package/es/theme/index.js

@@ -0,0 +1,256 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ThemeProvider, useTheme } from "@mui/material/styles";
+import { create } from "@arcblock/ux/lib/Theme";
+import { cloneDeep, merge } from "lodash";
+import { Box, CssBaseline } from "@mui/material";
+import { typography } from "./typography.js";
+import "./index.css";
+export { typography };
+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"
+          },
+          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"
+        },
+        styleOverrides: {
+          root: {
+            textTransform: "none"
+          },
+          colorPrimary: {
+            backgroundColor: "#fff"
+          }
+        }
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: {
+            textTransform: "none"
+          }
+        }
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            textTransform: "none"
+          }
+        }
+      },
+      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"
+          }
+        }
+      },
+      // MuiButtonBase: {
+      //    styleOverrides: {
+      //    }
+      // },
+      MuiRadio: {
+        styleOverrides: {
+          root: {
+            color: "var(--stroke-border-base, #EFF1F5)",
+            "&:hover": {
+              background: "none"
+            },
+            "&.Mui-checked": {
+              color: "var(--foregrounds-fg-interactive, #0086FF)"
+            }
+          }
+        }
+      },
+      MuiCheckbox: {
+        styleOverrides: {
+          root: {
+            color: "var(--backgrounds-bg-interactive, #0086FF)",
+            "&.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"
+        },
+        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)"
+            }
+          }
+        }
+      }
+    }
+  };
+  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, {}),
+    /* @__PURE__ */ jsx(Box, { sx: { height: "100%", ...themeSX }, children })
+  ] });
+}

package/es/theme/typography.d.ts

@@ -0,0 +1,2 @@
+import type { TypographyOptions } from '@mui/material/styles/createTypography';
+export declare const typography: TypographyOptions;

package/es/theme/typography.js

@@ -0,0 +1,53 @@
+export const typography = {
+  h1: {
+    fontSize: "1.875rem",
+    lineHeight: 1.2,
+    fontWeight: 800,
+    letterSpacing: "-.025em"
+  },
+  h2: {
+    fontSize: "1.5rem",
+    lineHeight: 1.3333333,
+    fontWeight: 700,
+    letterSpacing: "-.025em"
+  },
+  h3: {
+    fontSize: "1.25rem",
+    lineHeight: 1.4,
+    fontWeight: 600,
+    letterSpacing: "-.025em"
+  },
+  h4: {
+    fontSize: "1.125rem",
+    lineHeight: 1.5,
+    fontWeight: 600
+  },
+  h5: {
+    fontSize: "1rem",
+    lineHeight: 1.75,
+    fontWeight: 400
+  },
+  h6: {
+    fontSize: "1rem",
+    lineHeight: 1.75,
+    fontWeight: 400
+  },
+  subtitle1: {
+    fontSize: "1rem",
+    lineHeight: 1.75,
+    fontWeight: 400
+  },
+  subtitle2: {
+    fontSize: "1rem",
+    lineHeight: 1.75,
+    fontWeight: 400
+  },
+  body1: {
+    fontSize: "1rem",
+    lineHeight: 1.75
+  },
+  fontWeightLight: 300,
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightBold: 700
+};

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,11 +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>;
+    theme?: 'default' | 'inherit' | PaymentThemeOptions;
 };
 export type CheckoutCallbacks = {
     onPaid: (res: CheckoutContext) => void;
@@ -42,3 +48,13 @@ export type PricingRenderProps = {
     quantity: string;
     totalAmount: string;
 };
+export type ActionProps = {
+    [key: string]: {
+        color?: string;
+        variant?: string;
+        sx?: {
+            [key: string]: any;
+        };
+        text?: string;
+    };
+};

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,10 +20,12 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     inlineOptions?: {
         button?: ButtonType;
     };
+    theme?: 'default' | 'inherit' | PaymentThemeOptions;
 };
-declare function CheckoutDonate({ settings, livemode, timeout, onPaid, onError, mode, inlineOptions, }: DonateProps): import("react").JSX.Element;
+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

@@ -16,6 +16,7 @@ var _tx = _interopRequireDefault(require("../components/blockchain/tx"));
 var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 var _form = _interopRequireDefault(require("./form"));
+var _theme = require("../theme");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
@@ -285,7 +286,7 @@ function useDonation(settings, livemode = true, mode = "default") {
     setState
   };
 }
-function CheckoutDonate({
+function CheckoutDonateInner({
   settings,
   livemode,
   timeout,
@@ -451,7 +452,6 @@ function CheckoutDonate({
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
           mb: 1,
-          mt: -2,
           height: "100%"
         },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
@@ -465,7 +465,28 @@ function CheckoutDonate({
     })]
   });
 }
+function CheckoutDonate(props) {
+  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
+    })
+  });
+}
 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, }: 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

@@ -12,6 +12,7 @@ var _ufo = require("ufo");
 var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 var _payment = _interopRequireDefault(require("../payment"));
+var _theme = require("../theme");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const promises = {};
 const startFromPaymentLink = (id, params) => {
@@ -38,7 +39,9 @@ function CheckoutForm({
   onChange,
   goBack,
   extraParams,
-  action
+  action,
+  theme = "default",
+  ...restProps
 }) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
     throw new Error("Either a checkoutSession or a paymentLink id is required.");
@@ -70,20 +73,62 @@ function CheckoutForm({
     });
     onError?.(err);
   };
-  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
+  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,
+        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
+      })
+    });
+  }
+  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.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-export default function CheckoutTable({ id, mode, onPaid, onError, onChange, extraParams, goBack }: CheckoutProps): import("react").JSX.Element;
+export default function CheckoutTable(props: CheckoutProps): import("react").JSX.Element;

package/lib/checkout/table.js

@@ -16,6 +16,7 @@ var _pricingTable = _interopRequireDefault(require("../components/pricing-table"
 var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 var _form = _interopRequireDefault(require("./form"));
+var _theme = require("../theme");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const fetchData = async id => {
   const {
@@ -29,7 +30,7 @@ const ensureProtocol = url => {
   }
   return url;
 };
-function CheckoutTable({
+function CheckoutTableInner({
   id,
   mode,
   onPaid,
@@ -145,4 +146,24 @@ function CheckoutTable({
       ...prop
     })
   });
+}
+function CheckoutTable(props) {
+  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
+    })
+  });
 }

package/lib/components/blockchain/tx.js

@@ -38,10 +38,13 @@ function TxLink(props) {
         direction: "row",
         alignItems: "center",
         justifyContent: props.align === "left" ? "flex-start" : "flex-end",
+        sx: {
+          color: "text.link"
+        },
         spacing: 1,
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "span",
-          color: "primary",
+          color: "text.link",
           children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
           fontSize: "small"

package/lib/components/country-select.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { SxProps } from '@mui/material';
+import { CountryIso2 } from 'react-international-phone';
+export type CountrySelectProps = {
+    value: CountryIso2;
+    onChange: (value: CountryIso2) => void;
+    name: string;
+    sx?: SxProps;
+};
+declare function CountrySelect({ value, onChange, name, sx }: CountrySelectProps): JSX.Element;
+declare namespace CountrySelect {
+    var defaultProps: {
+        sx: {};
+    };
+}
+export default CountrySelect;