@blocklet/payment-react 1.13.113

package/es/util.js

@@ -0,0 +1,390 @@
+import { BN, fromUnitToToken } from "@ocap/util";
+import { defaultCountries } from "react-international-phone";
+import dayjs from "./dayjs.js";
+import { t } from "./locales/index.js";
+export const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
+export const getPrefix = () => {
+  const componentId = (window.blocklet.componentId || "").split("/").pop();
+  if (componentId === PAYMENT_KIT_DID) {
+    return window.blocklet.prefix;
+  }
+  const component = (window.blocklet.componentMountPoints || []).find((x) => x.did === PAYMENT_KIT_DID);
+  if (component) {
+    return component.mountPoint;
+  }
+  return window.blocklet.prefix;
+};
+export function formatToDate(date, locale = "en") {
+  if (!date) {
+    return "-";
+  }
+  return dayjs(date).locale(formatLocale(locale)).format("YYYY-MM-DD HH:mm:ss");
+}
+export function formatToDatetime(date, locale = "en") {
+  if (!date) {
+    return "-";
+  }
+  return dayjs(date).locale(formatLocale(locale)).format("lll");
+}
+export function formatTime(date, format = "YYYY-MM-DD HH:mm:ss", locale = "en") {
+  if (!date) {
+    return "-";
+  }
+  return dayjs(date).locale(formatLocale(locale)).format(format);
+}
+export function formatDateTime(date, locale = "en") {
+  return dayjs(date).locale(formatLocale(locale)).format("YYYY-MM-DD HH:mm");
+}
+export const formatLocale = (locale = "en") => {
+  if (locale === "tw") {
+    return "zh";
+  }
+  return locale;
+};
+export const formatPrettyMsLocale = (locale) => locale === "zh" ? "zh_CN" : "en_US";
+export const formatError = (err) => {
+  const { details, errors, response } = err;
+  if (Array.isArray(errors)) {
+    return errors.map((x) => x.message).join("\n");
+  }
+  if (Array.isArray(details)) {
+    const formatted = details.map((e) => {
+      const errorMessage = e.message.replace(/["]/g, "'");
+      const errorPath = e.path.join(".");
+      return `${errorPath}: ${errorMessage}`;
+    });
+    return `Validate failed: ${formatted.join(";")}`;
+  }
+  if (response) {
+    return response.data.error || `${err.message}: ${JSON.stringify(response.data)}`;
+  }
+  return err.message;
+};
+export const formatPrice = (price, currency, unit_label, quantity = 1, bn = true, locale = "en") => {
+  const unit = getPriceUintAmountByCurrency(price, currency);
+  const amount = bn ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString() : +unit * quantity;
+  if (price?.type === "recurring" && price.recurring) {
+    const recurring = formatRecurring(price.recurring, false, "slash", locale);
+    if (unit_label) {
+      return `${amount} ${currency.symbol} / ${unit_label} ${recurring}`;
+    }
+    if (price.recurring.usage_type === "metered") {
+      return `${amount} ${currency.symbol} / unit ${recurring}`;
+    }
+    return `${amount} ${currency.symbol} ${recurring}`;
+  }
+  return `${amount} ${currency.symbol}`;
+};
+export const formatPriceAmount = (price, currency, unit_label, quantity = 1, bn = true) => {
+  const unit = getPriceUintAmountByCurrency(price, currency);
+  const amount = bn ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString() : +unit * quantity;
+  if (price?.type === "recurring" && price.recurring) {
+    if (unit_label) {
+      return `${amount} ${currency.symbol} / ${unit_label}`;
+    }
+    if (price.recurring.usage_type === "metered") {
+      return `${amount} ${currency.symbol} / unit`;
+    }
+    return `${amount} ${currency.symbol}`;
+  }
+  return `${amount} ${currency.symbol}`;
+};
+export function getStatementDescriptor(items) {
+  for (const item of items) {
+    if (item.price?.product?.statement_descriptor) {
+      return item.price?.product?.statement_descriptor;
+    }
+  }
+  return window.blocklet.appName;
+}
+export function formatRecurring(recurring, translate = true, separator = "per", locale = "en") {
+  const intervals = {
+    hour: "hourly",
+    day: "daily",
+    week: "weekly",
+    month: "monthly",
+    year: "yearly"
+  };
+  if (+recurring.interval_count === 1) {
+    const interval = t(`common.${recurring.interval}`, locale);
+    return translate ? t(`common.${intervals[recurring.interval]}`, locale) : separator ? t(`common.${separator}`, locale, { interval }) : interval;
+  }
+  return t("common.recurring", locale, {
+    count: recurring.interval_count,
+    interval: t(`common.${recurring.interval}s`, locale)
+  });
+}
+export function getPriceUintAmountByCurrency(price, currency) {
+  const options = getPriceCurrencyOptions(price);
+  const option = options.find((x) => x.currency_id === currency.id);
+  if (option) {
+    return option.unit_amount;
+  }
+  return price.unit_amount;
+}
+export function getPriceCurrencyOptions(price) {
+  if (Array.isArray(price.currency_options)) {
+    return price.currency_options;
+  }
+  return [{ currency_id: price.currency_id, unit_amount: price.unit_amount, tiers: null, custom_unit_amount: null }];
+}
+export function formatLineItemPricing(item, currency, trial, locale = "en") {
+  const price = item.upsell_price || item.price;
+  let quantity = t("common.qty", locale, { count: item.quantity });
+  if (price.recurring?.usage_type === "metered" || +item.quantity === 1) {
+    quantity = "";
+  }
+  const total = `${fromUnitToToken(
+    new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(item.quantity)),
+    currency.decimal
+  )} ${currency.symbol}`;
+  const unit = `${fromUnitToToken(getPriceUintAmountByCurrency(price, currency))} ${currency.symbol}`;
+  const appendUnit = (v, alt) => {
+    if (price.product.unit_label) {
+      return `${v}/${price.product.unit_label}`;
+    }
+    if (price.recurring?.usage_type === "metered" || item.quantity === 1) {
+      return alt;
+    }
+    return quantity ? t("common.each", locale, { unit }) : "";
+  };
+  if (price.type === "recurring" && price.recurring) {
+    if (trial > 0) {
+      return {
+        primary: t("common.trial", locale, { count: trial }),
+        secondary: `${appendUnit(total, total)} ${formatRecurring(price.recurring, false, "slash", locale)}`,
+        quantity
+      };
+    }
+    return {
+      primary: total,
+      secondary: appendUnit(total, ""),
+      quantity
+    };
+  }
+  return {
+    primary: total,
+    secondary: appendUnit(total, ""),
+    quantity
+  };
+}
+export function getCheckoutAmount(items, currency, includeFreeTrial = false, upsell = true) {
+  let renew = new BN(0);
+  const total = items.reduce((acc, x) => {
+    const price = upsell ? x.upsell_price || x.price : x.price;
+    if (price.type === "recurring") {
+      renew = renew.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
+      if (includeFreeTrial) {
+        return acc;
+      }
+      if (price.recurring?.usage_type === "metered") {
+        return acc;
+      }
+    }
+    return acc.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
+  }, new BN(0)).toString();
+  return { subtotal: total, total, renew: renew.toString(), discount: "0", shipping: "0", tax: "0" };
+}
+export function getRecurringPeriod(recurring) {
+  const { interval } = recurring;
+  const count = +recurring.interval_count || 1;
+  const dayInMs = 24 * 60 * 60 * 1e3;
+  switch (interval) {
+    case "hour":
+      return 60 * 60 * 1e3;
+    case "day":
+      return count * dayInMs;
+    case "week":
+      return count * 7 * dayInMs;
+    case "month":
+      return count * 30 * dayInMs;
+    case "year":
+      return count * 365 * dayInMs;
+    default:
+      throw new Error(`Unsupported recurring interval: ${interval}`);
+  }
+}
+export function formatUpsellSaving(session, currency) {
+  const items = session.line_items;
+  if (items[0]?.upsell_price_id) {
+    return "0";
+  }
+  if (!items[0]?.price.upsell?.upsells_to) {
+    return "0";
+  }
+  const from = getCheckoutAmount(items, currency, false, false);
+  const to = getCheckoutAmount(
+    items.map((x) => ({
+      ...x,
+      upsell_price_id: x.price.upsell?.upsells_to_id,
+      upsell_price: x.price.upsell?.upsells_to
+    })),
+    currency,
+    false,
+    true
+  );
+  const fromRecurring = items[0].price?.recurring;
+  const toRecurring = items[0].price?.upsell?.upsells_to?.recurring;
+  if (!fromRecurring || !toRecurring) {
+    return "0";
+  }
+  const factor = Math.floor(getRecurringPeriod(toRecurring) / getRecurringPeriod(fromRecurring));
+  const before = new BN(from.total).mul(new BN(factor));
+  const after = new BN(to.total);
+  return Number(before.sub(after).mul(new BN(100)).div(before).toString()).toFixed(0);
+}
+export function formatCheckoutHeadlines(session, currency, locale = "en") {
+  const items = session.line_items;
+  const trial = session.subscription_data?.trial_period_days || 0;
+  const brand = getStatementDescriptor(items);
+  const { total } = getCheckoutAmount(items, currency, !!trial);
+  const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
+  if (items.length === 0) {
+    return {
+      action: t("payment.checkout.empty", locale),
+      amount: "0",
+      then: ""
+    };
+  }
+  const { name } = items[0]?.price.product || { name: "" };
+  if (items.every((x) => x.price.type === "one_time")) {
+    const action = t("payment.checkout.pay", locale, { payee: brand });
+    if (items.length > 1) {
+      return { action, amount };
+    }
+    return { action, amount, then: "" };
+  }
+  const item = items.find((x) => x.price.type === "recurring");
+  const recurring = formatRecurring(
+    (item?.upsell_price || item?.price)?.recurring,
+    false,
+    "per",
+    locale
+  );
+  if (items.every((x) => x.price.type === "recurring")) {
+    const hasMetered = items.some((x) => x.price.type === "recurring" && x.price.recurring?.usage_type === "metered");
+    const subscription2 = [
+      hasMetered ? t("payment.checkout.least", locale) : "",
+      fromUnitToToken(
+        items.reduce((acc, x) => {
+          if (x.price.recurring?.usage_type === "metered") {
+            return acc;
+          }
+          return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
+        }, new BN(0)),
+        currency.decimal
+      ),
+      currency.symbol
+    ].filter(Boolean).join(" ");
+    if (items.length > 1) {
+      if (trial > 0) {
+        return {
+          action: t("payment.checkout.try2", locale, { name, count: items.length - 1 }),
+          amount: t("payment.checkout.free", locale, { count: trial }),
+          then: t("payment.checkout.then", locale, { subscription: subscription2, recurring })
+        };
+      }
+      return {
+        action: t("payment.checkout.sub2", locale, { name, count: items.length - 1 }),
+        amount,
+        then: recurring
+      };
+    }
+    if (trial > 0) {
+      return {
+        action: t("payment.checkout.try1", locale, { name }),
+        amount: t("payment.checkout.free", locale, { count: trial }),
+        then: t("payment.checkout.then", locale, { subscription: subscription2, recurring })
+      };
+    }
+    return {
+      action: t("payment.checkout.sub1", locale, { name }),
+      amount,
+      then: recurring
+    };
+  }
+  const subscription = fromUnitToToken(
+    items.filter((x) => x.price.type === "recurring").reduce((acc, x) => {
+      if (x.price.recurring?.usage_type === "metered") {
+        return acc;
+      }
+      return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
+    }, new BN(0)),
+    currency.decimal
+  );
+  return {
+    action: t("payment.checkout.pay", locale, { payee: brand }),
+    amount,
+    then: t("payment.checkout.then", locale, { subscription: `${subscription} ${currency.symbol}`, recurring })
+  };
+}
+export function formatAmount(amount, decimals) {
+  return fromUnitToToken(amount, decimals);
+}
+export function findCurrency(methods, currencyId) {
+  for (const method of methods) {
+    for (const currency of method.payment_currencies) {
+      if (currency.id === currencyId) {
+        return currency;
+      }
+    }
+  }
+  return null;
+}
+export function isValidCountry(code) {
+  return defaultCountries.some((x) => x[1] === code);
+}
+export function stopEvent(e) {
+  try {
+    e.stopPropagation();
+    e.preventDefault();
+  } catch {
+  }
+}
+export function sleep(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+export const getSubscriptionTimeSummary = (subscription) => {
+  const lines = [`Started on ${formatToDate(subscription.start_date * 1e3)}`];
+  if (subscription.status === "active" || subscription.status === "trialing") {
+    if (subscription.cancel_at) {
+      lines.push(`will cancel on ${formatToDate(subscription.cancel_at * 1e3)}`);
+    } else if (subscription.cancel_at_period_end) {
+      lines.push(`will cancel on ${formatToDate(subscription.current_period_end * 1e3)}`);
+    } else {
+      lines.push(`will renew on ${formatToDate(subscription.current_period_end * 1e3)}`);
+    }
+  } else if (subscription.status === "past_due") {
+    lines.push(`will cancel on ${formatToDate(subscription.current_period_end * 1e3)}`);
+  } else if (subscription.status === "canceled") {
+    lines.push(`canceled on ${formatToDate(subscription.canceled_at * 1e3)}`);
+  }
+  return lines.join(", ");
+};
+export const getSubscriptionAction = (subscription) => {
+  if (subscription.status !== "canceled" && subscription.cancel_at_period_end) {
+    return { action: "recover", variant: "contained", color: "primary" };
+  }
+  if (subscription.status === "active" || subscription.status === "trialing") {
+    if (subscription.cancel_at) {
+      return null;
+    }
+    if (subscription.cancel_at_period_end) {
+      return { action: "recover", variant: "contained", color: "primary" };
+    }
+    return { action: "cancel", variant: "outlined", color: "inherit" };
+  }
+  if (subscription.status === "past_due") {
+    return { action: "pastDue", variant: "contained", color: "primary" };
+  }
+  return null;
+};
+export const mergeExtraParams = (extra = {}) => {
+  const params = new URLSearchParams(window.location.search);
+  Object.keys(extra).forEach((key) => {
+    params.set(key, extra[key]);
+  });
+  return params.toString();
+};

package/lib/api.d.ts

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

package/lib/api.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _axios = _interopRequireDefault(require("axios"));
+var _isNull = _interopRequireDefault(require("lodash/isNull"));
+var _util = require("./util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const api = _axios.default.create();
+api.interceptors.request.use(config => {
+  const prefix = (0, _util.getPrefix)();
+  config.baseURL = prefix || "";
+  config.timeout = 8e3;
+  const livemode = localStorage.getItem("livemode");
+  const locale = (0, _context.getLocale)(window.blocklet.languages);
+  config.params = {
+    ...(config.params || {}),
+    livemode: (0, _isNull.default)(livemode) ? true : JSON.parse(livemode),
+    locale
+  };
+  return config;
+}, err => Promise.reject(err));
+module.exports = api;

package/lib/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/lib/checkout/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = Checkout;
+var _jsxRuntime = require("react/jsx-runtime");
+var _ahooks = require("ahooks");
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _react = require("react");
+var _ufo = require("ufo");
+var _api = _interopRequireDefault(require("../api"));
+var _payment = _interopRequireDefault(require("../payment"));
+var _util = require("../util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const startFromPaymentLink = async (id, params) => {
+  const {
+    data
+  } = await _api.default.post(`/api/checkout-sessions/start/${id}?${(0, _util.mergeExtraParams)(params)}`);
+  return data;
+};
+const fetchCheckoutSession = async id => {
+  const {
+    data
+  } = await _api.default.get(`/api/checkout-sessions/retrieve/${id}`);
+  return data;
+};
+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] = (0, _ahooks.useSetState)({
+    completed: false,
+    appError: null
+  });
+  const {
+    error: apiError,
+    data
+  } = (0, _ahooks.useRequest)(() => type === "paymentLink" ? startFromPaymentLink(id, extraParams) : fetchCheckoutSession(id));
+  (0, _react.useEffect)(() => {
+    if (type === "paymentLink" && mode === "standalone" && data) {
+      window.location.replace((0, _ufo.joinURL)((0, _util.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__ */(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,
+    mode
+  });
+}
+Checkout.defaultProps = {
+  onPaid: _noop.default,
+  onError: console.error,
+  mode: "inline",
+  extraParams: {}
+};

package/lib/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/lib/components/input.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormInputError = FormInputError;
+module.exports = FormInput;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _get = _interopRequireDefault(require("lodash/get"));
+var _reactHookForm = require("react-hook-form");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+FormInput.defaultProps = {
+  label: "",
+  placeholder: "",
+  errorPosition: "bottom",
+  rules: {}
+};
+function FormInputError({
+  error
+}) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+    position: "end",
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      component: "span",
+      color: "error",
+      children: error
+    })
+  });
+}
+function FormInput({
+  name,
+  label,
+  placeholder,
+  rules,
+  errorPosition,
+  ...rest
+}) {
+  const {
+    control,
+    formState
+  } = (0, _reactHookForm.useFormContext)();
+  const error = (0, _get.default)(formState.errors, name)?.message;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+    name,
+    control,
+    rules,
+    render: ({
+      field
+    }) => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        width: "100%"
+      },
+      children: [!!label && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+        children: label
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+        fullWidth: true,
+        error: !!(0, _get.default)(formState.errors, name),
+        helperText: errorPosition === "bottom" && error ? error : "",
+        placeholder,
+        size: "small",
+        ...field,
+        ...rest,
+        InputProps: Object.assign(rest.InputProps || {}, errorPosition === "right" && error ? {
+          endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(FormInputError, {
+            error
+          })
+        } : {})
+      })]
+    })
+  });
+}

package/lib/components/livemode.d.ts

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

package/lib/components/livemode.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = Livemode;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+function Livemode() {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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/lib/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;