@blocklet/payment-react 1.13.113

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2018-2024 ArcBlock
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,29 @@
+# Payment Kit Components
+
+```tsx
+import { PaymentProvider, Checkout, PricingTable } from '@blocklet/payment-react';
+
+export default function Payment() {
+  const { session, connectApi } = useSessionContext();
+  const { locale } = useLocaleContext();
+
+  return (<PaymentProvider session={session} connect={connectApi} locale={locale}>
+    <Checkout checkoutSessionId="" onComplete={noop} onError={noop} params={{}} />
+    <Checkout paymentLinkId="" onComplete={noop} onError={noop} params={{}} />
+    <Checkout pricingTableId="" onSelect={noop} onComplete={noop} onError={noop} params={{}} />
+  </PaymentProvider>);
+}
+```
+
+## I18n
+
+```tsx
+import { createTranslator, translations as extraTranslations } from '@blocklet/payment-react';
+import merge from 'lodash/merge';
+
+import en from './en';
+import zh from './zh';
+
+// eslint-disable-next-line import/prefer-default-export
+export const translations = merge({ zh, en }, extraTranslations);
+```

package/babel.config.es.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { modules: false, targets: 'chrome 114' }],
+    ['@babel/preset-react', { useBuiltIns: true, runtime: 'automatic' }],
+  ],
+  plugins: ['babel-plugin-inline-react-svg'],
+  ignore: ['src/**/*.stories.js', 'src/**/demo'],
+};

package/build.config.ts

@@ -0,0 +1,29 @@
+import { defineBuildConfig, BuildEntry } from 'unbuild';
+
+const pattern = ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx', '**/*.png', '!**/*.stories.js', '!**/demo'];
+
+const shared: BuildEntry = {
+  builder: 'mkdist',
+  input: './src',
+  pattern,
+  ext: 'js',
+  esbuild: {
+    jsx: 'automatic',
+  },
+  declaration: true,
+};
+export default defineBuildConfig({
+  failOnWarn: false,
+  entries: [
+    {
+      ...shared,
+      outDir: './es',
+      format: 'esm',
+    },
+    {
+      ...shared,
+      outDir: './lib',
+      format: 'cjs',
+    },
+  ],
+});

package/es/api.d.ts

@@ -0,0 +1,2 @@
+declare const api: import("axios").AxiosInstance;
+export default api;

package/es/api.js

@@ -0,0 +1,18 @@
+import { getLocale } from "@arcblock/ux/lib/Locale/context";
+import axios from "axios";
+import isNull from "lodash/isNull";
+import { getPrefix } from "./util.js";
+const api = axios.create();
+api.interceptors.request.use(
+  (config) => {
+    const prefix = getPrefix();
+    config.baseURL = prefix || "";
+    config.timeout = 8e3;
+    const livemode = localStorage.getItem("livemode");
+    const locale = getLocale(window.blocklet.languages);
+    config.params = { ...config.params || {}, livemode: isNull(livemode) ? true : JSON.parse(livemode), locale };
+    return config;
+  },
+  (err) => Promise.reject(err)
+);
+export default api;

package/es/checkout/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { CheckoutProps } from '../types';
+declare function Checkout({ id, onPaid, onError, mode, extraParams }: CheckoutProps): import("react").JSX.Element;
+declare namespace Checkout {
+    var defaultProps: {
+        onPaid: any;
+        onError: {
+            (...data: any[]): void;
+            (message?: any, ...optionalParams: any[]): void;
+        };
+        mode: string;
+        extraParams: {};
+    };
+}
+export default Checkout;

package/es/checkout/index.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { useRequest, useSetState } from "ahooks";
+import noop from "lodash/noop";
+import { useEffect } from "react";
+import { joinURL } from "ufo";
+import api from "../api.js";
+import Payment from "../payment/index.js";
+import { getPrefix, mergeExtraParams } from "../util.js";
+const startFromPaymentLink = async (id, params) => {
+  const { data } = await api.post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`);
+  return data;
+};
+const fetchCheckoutSession = async (id) => {
+  const { data } = await api.get(`/api/checkout-sessions/retrieve/${id}`);
+  return data;
+};
+export default function Checkout({ id, onPaid, onError, mode, extraParams }) {
+  if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
+    throw new Error("Either a checkout session or a payment link id is required.");
+  }
+  const type = id.startsWith("plink_") ? "paymentLink" : "checkoutSession";
+  const [state, setState] = useSetState({ completed: false, appError: null });
+  const { error: apiError, data } = useRequest(
+    () => type === "paymentLink" ? startFromPaymentLink(id, extraParams) : fetchCheckoutSession(id)
+  );
+  useEffect(() => {
+    if (type === "paymentLink" && mode === "standalone" && data) {
+      window.location.replace(joinURL(getPrefix(), `/checkout/pay/${data.checkoutSession.id}`));
+    }
+  }, [type, mode, data]);
+  const handlePaid = () => {
+    setState({ completed: true });
+    onPaid?.(data);
+  };
+  const handleError = (err) => {
+    console.error(err);
+    setState({ appError: err });
+    onError?.(err);
+  };
+  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,
+      mode
+    }
+  );
+}
+Checkout.defaultProps = {
+  onPaid: noop,
+  onError: console.error,
+  mode: "inline",
+  extraParams: {}
+};

package/es/components/input.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+import { RegisterOptions } from 'react-hook-form';
+type InputProps = TextFieldProps & {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    errorPosition?: 'right' | 'bottom';
+    rules?: RegisterOptions;
+};
+export declare function FormInputError({ error }: {
+    error: string;
+}): import("react").JSX.Element;
+declare function FormInput({ name, label, placeholder, rules, errorPosition, ...rest }: InputProps): import("react").JSX.Element;
+declare namespace FormInput {
+    var defaultProps: {
+        label: string;
+        placeholder: string;
+        errorPosition: string;
+        rules: {};
+    };
+}
+export default FormInput;

package/es/components/input.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, FormLabel, InputAdornment, TextField, Typography } from "@mui/material";
+import get from "lodash/get";
+import { Controller, useFormContext } from "react-hook-form";
+FormInput.defaultProps = {
+  label: "",
+  placeholder: "",
+  errorPosition: "bottom",
+  rules: {}
+};
+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, ...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%" }, 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 }) } : {}
+            )
+          }
+        )
+      ] })
+    }
+  );
+}

package/es/components/livemode.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Livemode(): import("react").JSX.Element;

package/es/components/livemode.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Chip } from "@mui/material";
+export default function Livemode() {
+  const { t } = useLocaleContext();
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label: t("common.livemode"),
+      size: "small",
+      sx: {
+        ml: 2,
+        height: 18,
+        lineHeight: 1,
+        textTransform: "uppercase",
+        fontSize: "0.8rem",
+        fontWeight: "bold",
+        borderRadius: "4px",
+        backgroundColor: "#ffde92",
+        color: "#bb5504"
+      }
+    }
+  );
+}

package/es/components/pricing-table.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { TPricingTableExpanded } from '@blocklet/payment-types';
+type Props = {
+    table: TPricingTableExpanded;
+    onSelect: (priceId: string) => void;
+    alignItems?: 'center' | 'left';
+    mode?: 'checkout' | 'select';
+    interval?: string;
+};
+declare function PricingTable({ table, alignItems, interval, mode, onSelect }: Props): import("react").JSX.Element;
+declare namespace PricingTable {
+    var defaultProps: {
+        alignItems: string;
+        mode: string;
+        interval: string;
+    };
+}
+export default PricingTable;

package/es/components/pricing-table.js

@@ -0,0 +1,175 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Toast from "@arcblock/ux/lib/Toast";
+import { CheckOutlined } from "@mui/icons-material";
+import { LoadingButton } from "@mui/lab";
+import {
+  Box,
+  Chip,
+  Fade,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Stack,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography
+} from "@mui/material";
+import { useSetState } from "ahooks";
+import { useEffect } from "react";
+import Amount from "../payment/amount.js";
+import { formatError, formatPriceAmount, formatRecurring } from "../util.js";
+const groupItemsByRecurring = (items) => {
+  const grouped = {};
+  const recurring = {};
+  items.forEach((x) => {
+    const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join("-");
+    recurring[key] = x.price.recurring;
+    if (!grouped[key]) {
+      grouped[key] = [];
+    }
+    grouped[key].push(x);
+  });
+  return { recurring, grouped };
+};
+PricingTable.defaultProps = {
+  alignItems: "center",
+  mode: "checkout",
+  interval: ""
+};
+export default function PricingTable({ table, alignItems, interval, mode, onSelect }) {
+  const { t, locale } = useLocaleContext();
+  const [state, setState] = useSetState({ interval, loading: "" });
+  const { recurring, grouped } = groupItemsByRecurring(table.items);
+  useEffect(() => {
+    if (table) {
+      if (!state.interval || !grouped[state.interval]) {
+        const keys = Object.keys(recurring);
+        if (keys[0]) {
+          setState({ interval: keys[0] });
+        }
+      }
+    }
+  }, [table]);
+  const handleSelect = async (priceId) => {
+    try {
+      setState({ loading: priceId });
+      await onSelect(priceId);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: "" });
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "column",
+      alignItems: alignItems === "center" ? "center" : "flex-start",
+      sx: {
+        pt: {
+          xs: 4,
+          sm: 2
+        },
+        gap: {
+          xs: 3,
+          sm: mode === "select" ? 3 : 5
+        }
+      },
+      children: [
+        Object.keys(recurring).length > 1 && /* @__PURE__ */ jsx(
+          ToggleButtonGroup,
+          {
+            color: "primary",
+            value: state.interval,
+            onChange: (_, value) => {
+              if (value !== null) {
+                setState({ interval: value });
+              }
+            },
+            exclusive: true,
+            children: Object.keys(recurring).map((x) => /* @__PURE__ */ jsx(ToggleButton, { value: x, sx: { textTransform: "capitalize" }, children: formatRecurring(recurring[x], true, "", locale) }, x))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Stack,
+          {
+            flexWrap: "wrap",
+            direction: "row",
+            gap: { xs: 3, sm: 5, md: mode === "checkout" ? 10 : 5 },
+            justifyContent: alignItems === "center" ? "center" : "flex-start",
+            children: grouped[state.interval]?.map((x) => {
+              let action = x.subscription_data?.trial_period_days ? t("payment.checkout.try") : t("payment.checkout.subscription");
+              if (mode === "select") {
+                action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
+              }
+              return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  padding: 4,
+                  spacing: 2,
+                  direction: "column",
+                  alignItems: "center",
+                  sx: {
+                    width: 320,
+                    cursor: "pointer",
+                    borderWidth: "1px",
+                    borderStyle: "solid",
+                    borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
+                    borderRadius: 1,
+                    transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
+                    boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",
+                    "&:hover": {
+                      borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
+                      boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(Box, { textAlign: "center", children: [
+                      /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+                        /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", fontWeight: 600, children: x.product.name }),
+                        x.is_highlight && /* @__PURE__ */ jsx(Chip, { label: x.highlight_text, color: "default", size: "small" })
+                      ] }),
+                      /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: x.product.description })
+                    ] }),
+                    /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+                      /* @__PURE__ */ jsx(Amount, { amount: formatPriceAmount(x.price, table.currency, x.product.unit_label) }),
+                      /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", children: [
+                        /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: t("payment.checkout.per") }),
+                        /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: formatRecurring(x.price.recurring, false, "", locale) })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      LoadingButton,
+                      {
+                        fullWidth: true,
+                        size: "large",
+                        loadingPosition: "end",
+                        variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
+                        color: x.is_highlight || x.is_selected ? "primary" : "info",
+                        sx: { fontSize: "1.2rem" },
+                        loading: state.loading === x.price_id,
+                        disabled: x.is_disabled,
+                        onClick: () => handleSelect(x.price_id),
+                        children: action
+                      }
+                    ),
+                    x.product.features.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+                      /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.include") }),
+                      /* @__PURE__ */ jsx(List, { dense: true, children: x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, children: [
+                        /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 25 }, children: /* @__PURE__ */ jsx(CheckOutlined, { color: "success", fontSize: "small" }) }),
+                        /* @__PURE__ */ jsx(ListItemText, { primary: f.name })
+                      ] }, f.name)) })
+                    ] })
+                  ]
+                }
+              ) }, x.price_id);
+            })
+          }
+        )
+      ]
+    }
+  );
+}

package/es/components/status.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ChipProps } from '@mui/material';
+export default function Status(props: ChipProps): import("react").JSX.Element;

package/es/components/status.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { Chip } from "@mui/material";
+export default function Status(props) {
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      size: "small",
+      variant: "outlined",
+      ...props,
+      sx: {
+        ...props.sx || {},
+        borderRadius: "4px",
+        height: 20,
+        lineHeight: 1,
+        textTransform: "capitalize",
+        marginRight: "10px"
+      }
+    }
+  );
+}

package/es/components/switch.d.ts

@@ -0,0 +1,6 @@
+import type { LiteralUnion } from 'type-fest';
+type SwitchProps = {
+    variant?: LiteralUnion<'success' | 'error' | 'warning' | 'info' | 'primary' | 'secondary', string>;
+};
+declare const _default: import("@emotion/styled").StyledComponent<import("@mui/material").SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & SwitchProps, {}, {}>;
+export default _default;

package/es/components/switch.js

@@ -0,0 +1,42 @@
+import { Switch } from "@mui/material";
+import { styled } from "@mui/system";
+export default styled(Switch)(({ variant = "success", theme }) => ({
+  width: 28,
+  height: 16,
+  padding: 0,
+  display: "inline-flex",
+  "&:active": {
+    "& .MuiSwitch-thumb": {
+      width: 15
+    },
+    "& .MuiSwitch-switchBase.Mui-checked": {
+      transform: "translateX(9px)"
+    }
+  },
+  "& .MuiSwitch-switchBase": {
+    padding: 2,
+    "&.Mui-checked": {
+      transform: "translateX(12px)",
+      color: "#fff",
+      "& + .MuiSwitch-track": {
+        opacity: 1,
+        backgroundColor: theme.palette[variant].light
+      }
+    }
+  },
+  "& .MuiSwitch-thumb": {
+    boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    transition: theme.transitions.create(["width"], {
+      duration: 200
+    })
+  },
+  "& .MuiSwitch-track": {
+    borderRadius: 16 / 2,
+    opacity: 1,
+    backgroundColor: theme.palette.mode === "dark" ? "rgba(255,255,255,.35)" : "rgba(0,0,0,.25)",
+    boxSizing: "border-box"
+  }
+}));

package/es/contexts/payment.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import type { Axios } from 'axios';
+export interface Settings {
+    paymentMethods: TPaymentMethodExpanded[];
+    baseCurrency: TPaymentCurrency;
+}
+export type PaymentContextType = {
+    livemode: boolean;
+    session: any;
+    connect: any;
+    prefix: string;
+    settings: Settings;
+    refresh: () => void;
+    setLivemode: (livemode: boolean) => void;
+    api: Axios;
+};
+declare const PaymentContext: import("react").Context<PaymentContextType>;
+declare const Consumer: import("react").Consumer<PaymentContextType>;
+declare function PaymentProvider({ children, session, connect }: {
+    children: any;
+    session: any;
+    connect: any;
+}): JSX.Element;
+declare namespace PaymentProvider {
+    var defaultProps: {};
+}
+declare function usePaymentContext(): PaymentContextType;
+export { PaymentContext, PaymentProvider, Consumer as SettingsConsumer, usePaymentContext };

package/es/contexts/payment.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { Alert, CircularProgress } from "@mui/material";
+import { useLocalStorageState, useRequest } from "ahooks";
+import { createContext, useContext } from "react";
+import api from "../api.js";
+import { getPrefix } from "../util.js";
+const prefix = getPrefix();
+const PaymentContext = createContext({ api });
+const { Provider, Consumer } = PaymentContext;
+const getSettings = async () => {
+  const { data } = await api.get("/api/settings");
+  return data;
+};
+function PaymentProvider({ children, session, connect }) {
+  const { data, error, run, loading } = useRequest(getSettings);
+  const [livemode, setLivemode] = useLocalStorageState("livemode", { defaultValue: true });
+  if (error) {
+    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx(CircularProgress, {});
+  }
+  return /* @__PURE__ */ jsx(
+    Provider,
+    {
+      value: {
+        session,
+        connect,
+        prefix,
+        livemode: !!livemode,
+        settings: data,
+        refresh: run,
+        setLivemode,
+        api
+      },
+      children
+    }
+  );
+}
+function usePaymentContext() {
+  const context = useContext(PaymentContext);
+  return context;
+}
+PaymentProvider.defaultProps = {};
+export { PaymentContext, PaymentProvider, Consumer as SettingsConsumer, usePaymentContext };

package/es/dayjs.d.ts

@@ -0,0 +1,2 @@
+import dayjs from 'dayjs';
+export default dayjs;

package/es/dayjs.js

@@ -0,0 +1,14 @@
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import relativeTime from "dayjs/plugin/relativeTime";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import("dayjs/locale/en");
+import("dayjs/locale/zh");
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(duration);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+export default dayjs;

package/es/index.d.ts

@@ -0,0 +1,16 @@
+import api from './api';
+import Checkout from './checkout';
+import FormInput from './components/input';
+import Livemode from './components/livemode';
+import PricingTable from './components/pricing-table';
+import Status from './components/status';
+import Switch from './components/switch';
+import dayjs from './dayjs';
+import Amount from './payment/amount';
+import PhoneInput from './payment/form/phone';
+import Payment from './payment/index';
+import ProductSkeleton from './payment/product-skeleton';
+export * from './util';
+export * from './contexts/payment';
+export { translations, createTranslator } from './locales';
+export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, Checkout, Payment, PricingTable, ProductSkeleton, Amount, };