@blocklet/payment-react 1.13.113

package/es/payment/product-item.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Stack, Typography } from "@mui/material";
+import Status from "../components/status.js";
+import Switch from "../components/switch.js";
+import { formatLineItemPricing, formatPrice, formatRecurring, formatUpsellSaving } from "../util.js";
+import ProductCard from "./product-card.js";
+ProductItem.defaultProps = {
+  mode: "normal",
+  children: null
+};
+export default function ProductItem({ item, session, currency, mode, children, onUpsell, onDownsell }) {
+  const { t, locale } = useLocaleContext();
+  const pricing = formatLineItemPricing(item, currency, session.subscription_data?.trial_period_days || 0, locale);
+  const saving = formatUpsellSaving(session, currency);
+  const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
+  const canUpsell = mode === "normal" && session.line_items.length === 1;
+  return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", spacing: 1, sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-end", sx: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx(
+          ProductCard,
+          {
+            logo: item.price.product?.images[0],
+            name: item.price.product?.name,
+            description: item.price.product?.description,
+            extra: item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}` })].filter(Boolean).join(", ") : pricing.quantity
+          }
+        ),
+        /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-end", flex: 1, children: [
+          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 500 }, gutterBottom: true, children: pricing.primary }),
+          pricing.secondary && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.85rem", color: "text.secondary" }, children: pricing.secondary })
+        ] })
+      ] }),
+      children
+    ] }),
+    canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs(
+        Typography,
+        {
+          component: "label",
+          htmlFor: "upsell-switch",
+          sx: {
+            fontSize: 12,
+            cursor: "pointer",
+            color: "text.primary"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                id: "upsell-switch",
+                sx: { mr: 1 },
+                variant: "success",
+                checked: false,
+                onChange: () => onUpsell(item.price_id, item.price.upsell?.upsells_to_id)
+              }
+            ),
+            t("payment.checkout.upsell.save", {
+              recurring: formatRecurring(item.price.upsell.upsells_to.recurring, true, "per", locale)
+            }),
+            /* @__PURE__ */ jsx(
+              Status,
+              {
+                label: t("payment.checkout.upsell.off", { saving }),
+                color: "primary",
+                variant: "outlined",
+                sx: { ml: 1 }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 12 }, children: formatPrice(item.price.upsell.upsells_to, currency, item.price.product?.unit_label, 1, true, locale) })
+    ] }),
+    canUpsell && item.upsell_price_id && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs(
+        Typography,
+        {
+          component: "label",
+          htmlFor: "upsell-switch",
+          sx: {
+            fontSize: 12,
+            cursor: "pointer",
+            color: "text.secondary"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                id: "upsell-switch",
+                sx: { mr: 1 },
+                variant: "success",
+                checked: true,
+                onChange: () => onDownsell(item.upsell_price_id)
+              }
+            ),
+            t("payment.checkout.upsell.revert", {
+              recurring: t(`common.${formatRecurring(item.price.recurring)}`)
+            })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 12 }, children: formatPrice(item.price, currency, item.price.product?.unit_label, 1, true, locale) })
+    ] })
+  ] });
+}

package/es/payment/product-skeleton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function ProductSkeleton({ count }: {
+    count: number;
+}): import("react").JSX.Element;

package/es/payment/product-skeleton.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fade, Skeleton, Stack, Typography } from "@mui/material";
+export default function ProductSkeleton({ count }) {
+  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "column",
+      alignItems: "center",
+      padding: 4,
+      spacing: 1,
+      sx: {
+        width: 320,
+        border: "1px solid #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: "#ddd",
+          boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", sx: { width: "50%" }, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1rem", width: "60%" } }),
+        /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h3", sx: { width: "60%" }, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+        /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h3", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+        Array.from({ length: count }).map((_, i) => (
+          // eslint-disable-next-line react/no-array-index-key
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1rem", width: "60%" } }, i)
+        ))
+      ]
+    }
+  ) });
+}

package/es/payment/skeleton/overview.d.ts

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

package/es/payment/skeleton/overview.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fade, Skeleton, Stack, Typography } from "@mui/material";
+export default function OverviewSkeleton() {
+  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 2, children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 32, height: 32 }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } })
+    ] }),
+    /* @__PURE__ */ jsx(Typography, { mt: 3, component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+    /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h2", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+    /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 3 }, variant: "rounded", width: 200, height: 200 })
+  ] }) });
+}

package/es/payment/skeleton/payment.d.ts

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

package/es/payment/skeleton/payment.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Fade, Skeleton, Stack, Typography } from "@mui/material";
+export default function PaymentSkeleton() {
+  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", spacing: 3, children: [
+    /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h1", children: /* @__PURE__ */ jsx(Skeleton, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h1", children: /* @__PURE__ */ jsx(Skeleton, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h1", children: /* @__PURE__ */ jsx(Skeleton, {}) })
+    ] })
+  ] }) });
+}

package/es/payment/success.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type Props = {
+    message: string;
+    action: string;
+    payee: string;
+};
+export default function PaymentSuccess({ message, action, payee }: Props): import("react").JSX.Element;
+export {};

package/es/payment/success.js

@@ -0,0 +1,164 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Grow, Link, Stack, Typography } from "@mui/material";
+import { styled } from "@mui/system";
+import { joinURL } from "ufo";
+import { usePaymentContext } from "../contexts/payment.js";
+export default function PaymentSuccess({ message, action, payee }) {
+  const { t } = useLocaleContext();
+  const { prefix } = usePaymentContext();
+  return /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", justifyContent: "center", sx: { height: 360 }, children: [
+    /* @__PURE__ */ jsx(Div, { children: /* @__PURE__ */ jsxs("div", { className: "check-icon", children: [
+      /* @__PURE__ */ jsx("span", { className: "icon-line line-tip" }),
+      /* @__PURE__ */ jsx("span", { className: "icon-line line-long" }),
+      /* @__PURE__ */ jsx("div", { className: "icon-circle" }),
+      /* @__PURE__ */ jsx("div", { className: "icon-fix" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", mb: 3, children: message }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", textAlign: "center", children: t("payment.checkout.completed.tip", { payee }) }),
+    ["subscription", "setup"].includes(action) && /* @__PURE__ */ jsx(Typography, { textAlign: "center", sx: { mt: 2 }, children: /* @__PURE__ */ jsx(Link, { href: joinURL(prefix, "/customer"), children: t("payment.checkout.portal", { payee }) }) })
+  ] }) });
+}
+const Div = styled("div")`
+  width: 80px;
+  height: 115px;
+
+  .check-icon {
+    width: 80px;
+    height: 80px;
+    position: relative;
+    border-radius: 50%;
+    box-sizing: content-box;
+    border: 4px solid ${(props) => props.theme.palette.success.main};
+  }
+  .check-icon::before {
+    top: 3px;
+    left: -2px;
+    width: 30px;
+    transform-origin: 100% 50%;
+    border-radius: 100px 0 0 100px;
+  }
+  .check-icon::after {
+    top: 0;
+    left: 30px;
+    width: 60px;
+    transform-origin: 0 50%;
+    border-radius: 0 100px 100px 0;
+    animation: rotate-circle 4.25s ease-in;
+  }
+  .check-icon::before,
+  .check-icon::after {
+    content: '';
+    height: 100px;
+    position: absolute;
+    background: #ffffff;
+    transform: rotate(-45deg);
+  }
+  .check-icon .icon-line {
+    height: 5px;
+    background-color: ${(props) => props.theme.palette.success.main};
+    display: block;
+    border-radius: 2px;
+    position: absolute;
+    z-index: 10;
+  }
+  .check-icon .icon-line.line-tip {
+    top: 46px;
+    left: 14px;
+    width: 25px;
+    transform: rotate(45deg);
+    animation: icon-line-tip 0.75s;
+  }
+  .check-icon .icon-line.line-long {
+    top: 38px;
+    right: 8px;
+    width: 47px;
+    transform: rotate(-45deg);
+    animation: icon-line-long 0.75s;
+  }
+  .check-icon .icon-circle {
+    top: -4px;
+    left: -4px;
+    z-index: 10;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    position: absolute;
+    box-sizing: content-box;
+    border: 4px solid rgba(76, 175, 80, 0.5);
+  }
+  .check-icon .icon-fix {
+    top: 8px;
+    width: 5px;
+    left: 26px;
+    z-index: 1;
+    height: 85px;
+    position: absolute;
+    transform: rotate(-45deg);
+    background-color: #ffffff;
+  }
+
+  @keyframes rotate-circle {
+    0% {
+      transform: rotate(-45deg);
+    }
+    5% {
+      transform: rotate(-45deg);
+    }
+    12% {
+      transform: rotate(-405deg);
+    }
+    100% {
+      transform: rotate(-405deg);
+    }
+  }
+  @keyframes icon-line-tip {
+    0% {
+      width: 0;
+      left: 1px;
+      top: 19px;
+    }
+    54% {
+      width: 0;
+      left: 1px;
+      top: 19px;
+    }
+    70% {
+      width: 50px;
+      left: -8px;
+      top: 37px;
+    }
+    84% {
+      width: 17px;
+      left: 21px;
+      top: 48px;
+    }
+    100% {
+      width: 25px;
+      left: 14px;
+      top: 45px;
+    }
+  }
+  @keyframes icon-line-long {
+    0% {
+      width: 0;
+      right: 46px;
+      top: 54px;
+    }
+    65% {
+      width: 0;
+      right: 46px;
+      top: 54px;
+    }
+    84% {
+      width: 55px;
+      right: 0px;
+      top: 35px;
+    }
+    100% {
+      width: 47px;
+      right: 8px;
+      top: 38px;
+    }
+  }
+`;

package/es/payment/summary.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { TCheckoutSessionExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+type Props = {
+    checkoutSession: TCheckoutSessionExpanded;
+    currency: TPaymentCurrency;
+    onUpsell: Function;
+    onDownsell: Function;
+    onApplyCrossSell: Function;
+    onCancelCrossSell: Function;
+};
+export default function PaymentSummary({ checkoutSession, currency, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, }: Props): import("react").JSX.Element;
+export {};

package/es/payment/summary.js

@@ -0,0 +1,178 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { LoadingButton } from "@mui/lab";
+import { Fade, Grow, Stack, Typography, keyframes } from "@mui/material";
+import { useRequest, useSetState } from "ahooks";
+import noop from "lodash/noop";
+import useBus from "use-bus";
+import api from "../api.js";
+import Status from "../components/status.js";
+import { formatCheckoutHeadlines } from "../util.js";
+import PaymentAmount from "./amount.js";
+import ProductItem from "./product-item.js";
+const shake = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(2deg);
+  }
+  50% {
+    transform: rotate(0eg);
+  }
+  75% {
+    transform: rotate(-2deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+`;
+async function fetchCrossSell(id) {
+  try {
+    const { data } = await api.get(`/api/checkout-sessions/${id}/cross-sell`);
+    if (!data.error) {
+      return data;
+    }
+    return null;
+  } catch (err) {
+    return null;
+  }
+}
+export default function PaymentSummary({
+  checkoutSession,
+  currency,
+  onUpsell,
+  onDownsell,
+  onApplyCrossSell,
+  onCancelCrossSell
+}) {
+  const { t, locale } = useLocaleContext();
+  const [state, setState] = useSetState({ loading: false, shake: false });
+  const { data, runAsync } = useRequest(() => fetchCrossSell(checkoutSession.id));
+  const headlines = formatCheckoutHeadlines(checkoutSession, currency, locale);
+  useBus(
+    "error.REQUIRE_CROSS_SELL",
+    () => {
+      setState({ shake: true });
+      setTimeout(() => {
+        setState({ shake: false });
+      }, 1e3);
+    },
+    []
+  );
+  const handleUpsell = async (from, to) => {
+    await onUpsell(from, to);
+    runAsync();
+  };
+  const handleDownsell = async (from) => {
+    await onDownsell(from);
+    runAsync();
+  };
+  const handleApplyCrossSell = async () => {
+    if (data) {
+      try {
+        setState({ loading: true });
+        await onApplyCrossSell(data.id);
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setState({ loading: false });
+      }
+    }
+  };
+  const handleCancelCrossSell = async () => {
+    try {
+      setState({ loading: true });
+      await onCancelCrossSell();
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setState({ loading: false });
+    }
+  };
+  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: "cko-product",
+      direction: "column",
+      sx: {
+        mt: 8
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { className: "cko-product-summary", direction: "column", alignItems: "flex-start", sx: { mb: 4 }, children: [
+          /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 500, fontSize: "1.15rem", color: "text.secondary" }, children: headlines.action }),
+          /* @__PURE__ */ jsx(PaymentAmount, { amount: headlines.amount }),
+          headlines.then && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.9rem", color: "text.secondary" }, children: headlines.then })
+        ] }),
+        /* @__PURE__ */ jsx(Stack, { spacing: 2, children: checkoutSession.line_items.map((x) => /* @__PURE__ */ jsx(
+          ProductItem,
+          {
+            item: x,
+            session: checkoutSession,
+            currency,
+            onUpsell: handleUpsell,
+            onDownsell: handleDownsell,
+            children: x.cross_sell && /* @__PURE__ */ jsx(
+              LoadingButton,
+              {
+                size: "small",
+                loadingPosition: "end",
+                color: "error",
+                variant: "text",
+                loading: state.loading,
+                onClick: handleCancelCrossSell,
+                children: t("payment.checkout.cross_sell.remove")
+              }
+            )
+          },
+          x.price_id
+        )) }),
+        data && checkoutSession.line_items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "column",
+            alignItems: "flex-end",
+            spacing: 0.5,
+            sx: {
+              border: "1px solid #eee",
+              borderRadius: 1,
+              padding: 1,
+              animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : "none",
+              mt: {
+                xs: 4,
+                md: 8
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                ProductItem,
+                {
+                  item: { quantity: 1, price: data, price_id: data.id, cross_sell: true },
+                  session: checkoutSession,
+                  currency,
+                  onUpsell: noop,
+                  onDownsell: noop
+                }
+              ),
+              /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: 1 }, children: [
+                /* @__PURE__ */ jsx(Typography, { children: checkoutSession.cross_sell_behavior === "required" && /* @__PURE__ */ jsx(Status, { label: t("payment.checkout.required"), color: "info", variant: "outlined", sx: { mr: 1 } }) }),
+                /* @__PURE__ */ jsx(
+                  LoadingButton,
+                  {
+                    size: "small",
+                    loadingPosition: "end",
+                    color: checkoutSession.cross_sell_behavior === "required" ? "info" : "info",
+                    variant: checkoutSession.cross_sell_behavior === "required" ? "text" : "text",
+                    loading: state.loading,
+                    onClick: handleApplyCrossSell,
+                    children: t("payment.checkout.cross_sell.add")
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+}

package/es/theme.d.ts

@@ -0,0 +1 @@
+export default function create(settings?: any): any;

package/es/theme.js

@@ -0,0 +1,17 @@
+import { createTheme } from "@arcblock/ux/lib/Theme";
+import merge from "lodash/merge";
+export default function create(settings = {}) {
+  return createTheme(
+    merge(
+      {
+        typography: {
+          fontSize: 14,
+          allVariants: {
+            textTransform: "none"
+          }
+        }
+      },
+      settings
+    )
+  );
+}

package/es/types/index.d.ts

@@ -0,0 +1,19 @@
+import type { TCheckoutSessionExpanded, TCustomer, TPaymentIntent, TPaymentLink, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import { LiteralUnion } from 'type-fest';
+export type CheckoutContext = {
+    checkoutSession: TCheckoutSessionExpanded;
+    paymentMethods: TPaymentMethodExpanded[];
+    paymentLink?: TPaymentLink;
+    paymentIntent?: TPaymentIntent;
+    customer?: TCustomer;
+    mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
+};
+export type CheckoutProps = Partial<CheckoutCallbacks> & {
+    id: string;
+    extraParams?: Record<string, any>;
+    mode?: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
+};
+export type CheckoutCallbacks = {
+    onPaid: (res: CheckoutContext) => void;
+    onError: (err: Error) => void;
+};

package/es/types/shims.d.ts

@@ -0,0 +1,18 @@
+declare module '@arcblock/ux/*';
+declare module '@arcblock/did-connect/*';
+
+declare module '*.png';
+
+declare module 'google-libphonenumber';
+
+declare module 'flat';
+
+declare module '@arcblock/*';
+
+declare module '@blocklet/*';
+
+declare module 'pretty-ms-i18n';
+
+declare interface Window {
+  blocklet: any;
+}

package/es/util.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import type { PriceCurrency, PriceRecurring, TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded } from '@blocklet/payment-types';
+export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
+export declare const getPrefix: () => any;
+export declare function formatToDate(date: Date | string | number, locale?: string): any;
+export declare function formatToDatetime(date: Date | string | number, locale?: string): any;
+export declare function formatTime(date: Date | string | number, format?: string, locale?: string): any;
+export declare function formatDateTime(date: Date | string | number, locale?: string): any;
+export declare const formatLocale: (locale?: string) => string;
+export declare const formatPrettyMsLocale: (locale: string) => "zh_CN" | "en_US";
+export declare const formatError: (err: any) => any;
+export declare const formatPrice: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean, locale?: string) => string;
+export declare const formatPriceAmount: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean) => string;
+export declare function getStatementDescriptor(items: any[]): any;
+export declare function formatRecurring(recurring: PriceRecurring, translate?: boolean, separator?: string, locale?: string): string;
+export declare function getPriceUintAmountByCurrency(price: TPrice, currency: TPaymentCurrency): string;
+export declare function getPriceCurrencyOptions(price: TPrice): PriceCurrency[];
+export declare function formatLineItemPricing(item: TLineItemExpanded, currency: TPaymentCurrency, trial: number, locale?: string): {
+    primary: string;
+    secondary?: string;
+    quantity: string;
+};
+export declare function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, includeFreeTrial?: boolean, upsell?: boolean): {
+    subtotal: any;
+    total: any;
+    renew: any;
+    discount: string;
+    shipping: string;
+    tax: string;
+};
+export declare function getRecurringPeriod(recurring: PriceRecurring): number;
+export declare function formatUpsellSaving(session: TCheckoutSessionExpanded, currency: TPaymentCurrency): string;
+export declare function formatCheckoutHeadlines(session: TCheckoutSessionExpanded, currency: TPaymentCurrency, locale?: string): {
+    action: string;
+    amount: string;
+    then?: string;
+    secondary?: string;
+};
+export declare function formatAmount(amount: string, decimals: number): string;
+export declare function findCurrency(methods: TPaymentMethodExpanded[], currencyId: string): import("sequelize").InferAttributes<import("@blocklet/payment-types").PaymentCurrency, {
+    omit: never;
+}> | null;
+export declare function isValidCountry(code: string): boolean;
+export declare function stopEvent(e: React.SyntheticEvent<any>): void;
+export declare function sleep(ms: number): Promise<unknown>;
+export declare const getSubscriptionTimeSummary: (subscription: TSubscriptionExpanded) => string;
+export declare const getSubscriptionAction: (subscription: TSubscriptionExpanded) => {
+    action: string;
+    variant: string;
+    color: string;
+} | null;
+export declare const mergeExtraParams: (extra?: Record<string, any>) => string;