@blocklet/payment-react 1.14.21 → 1.14.23

package/README.md

@@ -68,3 +68,80 @@ import zh from './zh';
 // eslint-disable-next-line import/prefer-default-export
 export const translations = merge({ zh, en }, extraTranslations);
 ```
+
+## Updates
+
+#### theme
+Since version 1.14.22, the component includes a built-in theme provider. If you need to modify the styles of internal components, you need to pass the `theme` property to override or inherit the external theme.
+
+| option |description |
+| --- | --- |
+| default [default value] | wrapped with built-in PaymentThemeProvider |
+| inherit | use the parent component's themeProvider |
+| PaymentThemeOptions | override some styles of PaymentThemeProvider |
+
+```ts
+export type PaymentThemeOptions = ThemeOptions & {
+  sx?: SxProps;
+};
+
+```
+ ```js
+// 1. use themeOptions
+ <CheckoutForm
+  id="plink_oB1I6FNeHKSkuq81fhJy0vIZ"
+  onChange={console.info}
+  theme={{
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          containedPrimary: {
+            backgroundColor: '#1DC1C7',
+            color: '#fff',
+            '&:hover': {
+              backgroundColor: 'rgb(20, 135, 139)',
+            },
+          },
+        },
+      },
+    },
+  }}
+/>
+
+// 2. use theme sx
+<CheckoutForm
+  id="plink_oB1I6FNeHKSkuq81fhJy0vIZ"
+  mode="inline-minimal"
+  onChange={console.info}
+  theme={{
+    sx: {
+      '.cko-submit-button': {
+        backgroundColor: '#1DC1C7',
+        color: '#fff',
+        '&:hover': {
+          backgroundColor: 'rgb(20, 135, 139)',
+        },
+      },
+    },
+  }}
+/>
+```
+
+#### showCheckoutSummary
+
+Since version 1.14.23, if you need to hide the product column, we recommend using `showCheckoutSummary=false` instead of `mode=inline-minimal`. We aim for better semantics.
+```js
+// bad
+<CheckoutForm
+  id="plink_oB1I6FNeHKSkuq81fhJy0vIZ"
+  mode="inline-minimal"
+  onChange={console.info}
+/>
+
+// good
+<CheckoutForm
+  id="plink_oB1I6FNeHKSkuq81fhJy0vIZ"
+  showCheckoutSummary={false}
+  onChange={console.info}
+/>
+```

package/es/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/es/checkout/donate.js

@@ -25,6 +25,7 @@ import TxLink from "../components/blockchain/tx.js";
 import api from "../libs/api.js";
 import { formatAmount, formatBNStr, formatDateTime, formatError, lazyLoad } from "../libs/util.js";
 import CheckoutForm from "./form.js";
+import { PaymentThemeProvider } from "../theme/index.js";
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
   if (!donationCache[settings.target]) {
@@ -210,15 +211,7 @@ function useDonation(settings, livemode = true, mode = "default") {
     setState
   };
 }
-export default function CheckoutDonate({
-  settings,
-  livemode,
-  timeout,
-  onPaid,
-  onError,
-  mode,
-  inlineOptions = {}
-}) {
+function CheckoutDonateInner({ settings, livemode, timeout, onPaid, onError, mode, inlineOptions = {} }) {
   const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
   const [anchorEl, setAnchorEl] = useState(null);
   const [popoverOpen, setPopoverOpen] = useState(false);
@@ -348,7 +341,7 @@ export default function CheckoutDonate({
         showCloseButton: true,
         disableEscapeKeyDown: true,
         onClose: (e, reason) => setState({ open: reason === "backdropClick" }),
-        children: /* @__PURE__ */ jsx(Box, { sx: { mb: 1, mt: -2, height: "100%" }, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Box, { sx: { mb: 1, height: "100%" }, children: /* @__PURE__ */ jsx(
           CheckoutForm,
           {
             id: donation.data?.id,
@@ -362,7 +355,17 @@ export default function CheckoutDonate({
     )
   ] });
 }
+export default function CheckoutDonate(props) {
+  if (props.theme === "inherit") {
+    return /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props });
+  }
+  if (props.theme && typeof props.theme === "object") {
+    return /* @__PURE__ */ jsx(PaymentThemeProvider, { theme: props.theme, children: /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props }) });
+}
 CheckoutDonate.defaultProps = {
+  theme: "default",
   livemode: true,
   timeout: 5e3,
   mode: "default",

package/es/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/es/checkout/form.js

@@ -6,6 +6,7 @@ import { joinURL } from "ufo";
 import api from "../libs/api.js";
 import { getPrefix, mergeExtraParams } from "../libs/util.js";
 import Payment from "../payment/index.js";
+import { PaymentThemeProvider } from "../theme/index.js";
 const promises = {};
 const startFromPaymentLink = (id, params) => {
   if (!promises[id]) {
@@ -29,7 +30,9 @@ export default 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.");
@@ -57,7 +60,49 @@ export default function CheckoutForm({
     setState({ appError: err });
     onError?.(err);
   };
-  return /* @__PURE__ */ jsx(
+  if (theme === "inherit") {
+    return /* @__PURE__ */ jsx(
+      Payment,
+      {
+        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__ */ jsx(PaymentThemeProvider, { theme, children: /* @__PURE__ */ jsx(
+      Payment,
+      {
+        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__ */ jsx(PaymentThemeProvider, { children: /* @__PURE__ */ jsx(
     Payment,
     {
       checkoutSession: data?.checkoutSession,
@@ -72,9 +117,10 @@ export default function CheckoutForm({
       onChange,
       goBack,
       mode,
-      action
+      action,
+      ...restProps
     }
-  );
+  ) });
 }
 CheckoutForm.defaultProps = {
   onPaid: noop,

package/es/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/es/checkout/table.js

@@ -10,6 +10,7 @@ import PricingTable from "../components/pricing-table.js";
 import api from "../libs/api.js";
 import { mergeExtraParams } from "../libs/util.js";
 import CheckoutForm from "./form.js";
+import { PaymentThemeProvider } from "../theme/index.js";
 const fetchData = async (id) => {
   const { data } = await api.get(`/api/pricing-tables/${id}`);
   return data;
@@ -20,7 +21,7 @@ const ensureProtocol = (url) => {
   }
   return url;
 };
-export default function CheckoutTable({ id, mode, onPaid, onError, onChange, extraParams, goBack }) {
+function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams, goBack }) {
   if (!id.startsWith("prctbl_")) {
     throw new Error("A valid pricing table id is required.");
   }
@@ -109,3 +110,12 @@ export default function CheckoutTable({ id, mode, onPaid, onError, onChange, ext
     }
   ) });
 }
+export default function CheckoutTable(props) {
+  if (props.theme === "inherit") {
+    return /* @__PURE__ */ jsx(CheckoutTableInner, { ...props });
+  }
+  if (props.theme && typeof props.theme === "object") {
+    return /* @__PURE__ */ jsx(PaymentThemeProvider, { theme: props.theme, children: /* @__PURE__ */ jsx(CheckoutTableInner, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: /* @__PURE__ */ jsx(CheckoutTableInner, { ...props }) });
+}

package/es/components/blockchain/tx.js

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

package/es/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/es/components/country-select.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box, MenuItem, Select, Typography } from "@mui/material";
+import { useFormContext } from "react-hook-form";
+import { FlagEmoji, defaultCountries, parseCountry } from "react-international-phone";
+CountrySelect.defaultProps = {
+  sx: {}
+};
+export default function CountrySelect({ value, onChange, name, sx }) {
+  const { setValue } = useFormContext();
+  const countryDetail = useMemo(() => {
+    const item = defaultCountries.find((v) => v[1] === value);
+    return value && item ? parseCountry(item) : { name: "" };
+  }, [value]);
+  const onCountryChange = (e) => {
+    onChange(e.target.value);
+    setValue(name, e.target.value);
+  };
+  return /* @__PURE__ */ jsx(
+    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__ */ jsxs(Box, { display: "flex", alignItems: "center", flexWrap: "nowrap", gap: 0.5, sx: { cursor: "pointer" }, children: [
+          /* @__PURE__ */ jsx(FlagEmoji, { iso2: code, style: { display: "flex" } }),
+          /* @__PURE__ */ jsx(Typography, { children: countryDetail?.name })
+        ] });
+      },
+      children: defaultCountries.map((c) => {
+        const parsed = parseCountry(c);
+        return /* @__PURE__ */ jsxs(MenuItem, { value: parsed.iso2, children: [
+          /* @__PURE__ */ jsx(FlagEmoji, { iso2: parsed.iso2, style: { marginRight: "8px" } }),
+          /* @__PURE__ */ jsx(Typography, { marginRight: "8px", children: parsed.name }),
+          /* @__PURE__ */ jsxs(Typography, { color: "gray", children: [
+            "+",
+            parsed.dialCode
+          ] })
+        ] }, parsed.iso2);
+      })
+    }
+  );
+}

package/es/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?: "bottom" | "right" | 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?: "bottom" | "right" | 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?: "bottom" | "right" | undefined;
+    rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
+    wrapperStyle?: any;
+}, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
 export default FormInput;

package/es/components/input.js

@@ -1,7 +1,49 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from "react";
 import { Box, FormLabel, InputAdornment, TextField, Typography } from "@mui/material";
 import get from "lodash/get";
 import { Controller, useFormContext } from "react-hook-form";
+function FormInputError({ error }) {
+  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(Typography, { component: "span", color: "error", children: error }) });
+}
+const FormInput = forwardRef(
+  ({ name, label, placeholder, rules, errorPosition, wrapperStyle, ...rest }, ref) => {
+    const { control, formState } = useFormContext();
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => {
+      return inputRef.current;
+    });
+    const error = get(formState.errors, name)?.message;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name,
+        control,
+        rules,
+        render: ({ field }) => /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...wrapperStyle }, children: [
+          !!label && /* @__PURE__ */ jsx(FormLabel, { sx: { color: "text.primary" }, children: label }),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              fullWidth: true,
+              error: !!get(formState.errors, name),
+              helperText: errorPosition === "bottom" && error ? error : "",
+              placeholder,
+              size: "small",
+              ...field,
+              ...rest,
+              inputRef,
+              InputProps: Object.assign(
+                rest.InputProps || {},
+                errorPosition === "right" && error ? { endAdornment: /* @__PURE__ */ jsx(FormInputError, { error }) } : {}
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
 FormInput.defaultProps = {
   label: "",
   placeholder: "",
@@ -9,45 +51,4 @@ FormInput.defaultProps = {
   rules: {},
   wrapperStyle: {}
 };
-export function FormInputError({ error }) {
-  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(Typography, { component: "span", color: "error", children: error }) });
-}
-export default function FormInput({
-  name,
-  label,
-  placeholder,
-  rules,
-  errorPosition,
-  wrapperStyle,
-  ...rest
-}) {
-  const { control, formState } = useFormContext();
-  const error = get(formState.errors, name)?.message;
-  return /* @__PURE__ */ jsx(
-    Controller,
-    {
-      name,
-      control,
-      rules,
-      render: ({ field }) => /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...wrapperStyle }, children: [
-        !!label && /* @__PURE__ */ jsx(FormLabel, { children: label }),
-        /* @__PURE__ */ jsx(
-          TextField,
-          {
-            fullWidth: true,
-            error: !!get(formState.errors, name),
-            helperText: errorPosition === "bottom" && error ? error : "",
-            placeholder,
-            size: "small",
-            ...field,
-            ...rest,
-            InputProps: Object.assign(
-              rest.InputProps || {},
-              errorPosition === "right" && error ? { endAdornment: /* @__PURE__ */ jsx(FormInputError, { error }) } : {}
-            )
-          }
-        )
-      ] })
-    }
-  );
-}
+export default FormInput;

package/es/components/livemode.js

@@ -8,6 +8,7 @@ export default function Livemode({ color, backgroundColor, sx }) {
     {
       label: t("common.livemode"),
       size: "small",
+      color: "warning",
       sx: {
         ml: 2,
         height: 18,

package/es/components/pricing-table.js

@@ -254,7 +254,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                                 color: "text.primary",
                                 fontWeight: 600,
                                 sx: {
-                                  color: "#4B5563",
                                   fontSize: "18px !important",
                                   fontWeight: "600"
                                 },
@@ -288,7 +287,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                               color: "text.secondary",
                               sx: {
                                 marginTop: "0px !important",
-                                color: "#4b5563",
                                 fontWeight: "400",
                                 fontSize: "16px",
                                 textAlign: "left"

package/es/components/status.js

@@ -5,14 +5,13 @@ export default function Status(props) {
     Chip,
     {
       size: "small",
-      variant: "outlined",
+      variant: "filled",
       ...props,
       sx: {
         ...props.sx || {},
         borderRadius: "4px",
         height: 20,
-        textTransform: "capitalize",
-        marginRight: "10px"
+        textTransform: "capitalize"
       }
     }
   );

package/es/components/table.d.ts

@@ -0,0 +1,2 @@
+declare const Table: any;
+export default Table;