@blocklet/payment-react 1.14.20 → 1.14.22

package/es/theme/index.js

@@ -0,0 +1,243 @@
+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 { 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"
+          }
+        }
+      }
+    },
+    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)"
+          }
+        }
+      }
+    }
+  }
+};
+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"
+      },
+      error: {
+        main: rootStyle.getPropertyValue("--foregrounds-fg-danger").trim() || "#FF003B"
+      }
+    },
+    ...themeOverrides
+  });
+  return /* @__PURE__ */ jsxs(ThemeProvider, { theme: merged, children: [
+    /* @__PURE__ */ jsx(CssBaseline, {}),
+    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

@@ -29,6 +29,7 @@ export type CheckoutProps = Partial<CheckoutCallbacks> & {
     extraParams?: Record<string, any>;
     action?: string;
     mode?: LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
+    customTheme?: boolean;
 };
 export type CheckoutCallbacks = {
     onPaid: (res: CheckoutContext) => void;
@@ -42,3 +43,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

@@ -20,8 +20,9 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     inlineOptions?: {
         button?: ButtonType;
     };
+    customTheme?: boolean;
 };
-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: {
         livemode: boolean;

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,6 +465,18 @@ function CheckoutDonate({
     })]
   });
 }
+function CheckoutDonate(props) {
+  if (props.customTheme) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutDonateInner, {
+      ...props
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutDonateInner, {
+      ...props
+    })
+  });
+}
 CheckoutDonate.defaultProps = {
   livemode: true,
   timeout: 5e3,

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, customTheme, }: 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,8 @@ function CheckoutForm({
   onChange,
   goBack,
   extraParams,
-  action
+  action,
+  customTheme = false
 }) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
     throw new Error("Either a checkoutSession or a paymentLink id is required.");
@@ -70,6 +72,25 @@ function CheckoutForm({
     });
     onError?.(err);
   };
+  if (!customTheme) {
+    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
+      })
+    });
+  }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment.default, {
     checkoutSession: data?.checkoutSession,
     paymentMethods: data?.paymentMethods,

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,16 @@ function CheckoutTable({
       ...prop
     })
   });
+}
+function CheckoutTable(props) {
+  if (props.customTheme) {
+    return /* @__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;

package/lib/components/country-select.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CountrySelect;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _material = require("@mui/material");
+var _reactHookForm = require("react-hook-form");
+var _reactInternationalPhone = require("react-international-phone");
+CountrySelect.defaultProps = {
+  sx: {}
+};
+function CountrySelect({
+  value,
+  onChange,
+  name,
+  sx
+}) {
+  const {
+    setValue
+  } = (0, _reactHookForm.useFormContext)();
+  const countryDetail = (0, _react.useMemo)(() => {
+    const item = _reactInternationalPhone.defaultCountries.find(v => v[1] === value);
+    return value && item ? (0, _reactInternationalPhone.parseCountry)(item) : {
+      name: ""
+    };
+  }, [value]);
+  const onCountryChange = e => {
+    onChange(e.target.value);
+    setValue(name, e.target.value);
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+    MenuProps: {
+      style: {
+        height: "300px",
+        top: "10px"
+      },
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      }
+    },
+    sx: {
+      width: "100%",
+      // Remove default outline (display only on focus)
+      fieldset: {
+        display: "none"
+      },
+      '&.Mui-focused:has(div[aria-expanded="false"])': {
+        fieldset: {
+          display: "block"
+        }
+      },
+      // Update default spacing
+      ".MuiSelect-select": {
+        padding: "8px",
+        paddingRight: "24px !important"
+      },
+      svg: {
+        right: 0
+      },
+      ".MuiMenuItem-root": {
+        justifyContent: "flex-start"
+        // 确保内容左对齐
+      },
+
+      ...sx
+    },
+    value,
+    onChange: onCountryChange,
+    renderValue: code => {
+      return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        gap: 0.5,
+        sx: {
+          cursor: "pointer"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+          iso2: code,
+          style: {
+            display: "flex"
+          }
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          children: countryDetail?.name
+        })]
+      });
+    },
+    children: _reactInternationalPhone.defaultCountries.map(c => {
+      const parsed = (0, _reactInternationalPhone.parseCountry)(c);
+      return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        value: parsed.iso2,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+          iso2: parsed.iso2,
+          style: {
+            marginRight: "8px"
+          }
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          marginRight: "8px",
+          children: parsed.name
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          color: "gray",
+          children: ["+", parsed.dialCode]
+        })]
+      }, parsed.iso2);
+    })
+  });
+}

package/lib/components/input.d.ts

@@ -1,25 +1,25 @@
 /// <reference types="react" />
-import { TextFieldProps } from '@mui/material';
 import { RegisterOptions } from 'react-hook-form';
-type InputProps = TextFieldProps & {
+declare const FormInput: import("react").ForwardRefExoticComponent<(Omit<import("@mui/material").OutlinedTextFieldProps & {
     name: string;
-    label?: string;
-    placeholder?: string;
-    errorPosition?: 'right' | 'bottom';
-    rules?: RegisterOptions;
-    wrapperStyle?: React.CSSProperties;
-};
-export declare function FormInputError({ error }: {
-    error: string;
-}): import("react").JSX.Element;
-declare function FormInput({ name, label, placeholder, rules, errorPosition, wrapperStyle, ...rest }: InputProps): import("react").JSX.Element;
-declare namespace FormInput {
-    var defaultProps: {
-        label: string;
-        placeholder: string;
-        errorPosition: string;
-        rules: {};
-        wrapperStyle: {};
-    };
-}
+    label?: string | undefined;
+    placeholder?: string | undefined;
+    errorPosition?: "right" | "bottom" | undefined;
+    rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
+    wrapperStyle?: any;
+}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
+    name: string;
+    label?: string | undefined;
+    placeholder?: string | undefined;
+    errorPosition?: "right" | "bottom" | undefined;
+    rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
+    wrapperStyle?: any;
+}, "ref"> | Omit<import("@mui/material").StandardTextFieldProps & {
+    name: string;
+    label?: string | undefined;
+    placeholder?: string | undefined;
+    errorPosition?: "right" | "bottom" | undefined;
+    rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
+    wrapperStyle?: any;
+}, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
 export default FormInput;