@blocklet/payment-react 1.16.3 → 1.16.5

package/README.md

@@ -394,6 +394,40 @@ We recommend using `showCheckoutSummary={false}` instead of `mode=inline-minimal
 />
 ```
 
+### v1.16.4
+
+- Add `OverdueInvoicePayment` component
+  - display all overdue invoices of a subscription, and support batch payment
+  - props:
+    - `subscriptionId`: [required] the id of the subscription
+    - `onPaid`: [optional] a callback function that will be called when the payment is successful
+    - `mode`: [optional] the mode of the component, `default` or `custom`, default is `default`
+    - `dialogProps`: [optional] the props of the dialog, default is `{ open: true }`
+    - `children`: [optional] a function that will be called with the payment data, if `mode` is `custom`, otherwise, the default dialog will be displayed
+  - custom mode:
+    - the `children` will receive two parameters:
+      - `handlePay`: a function that starts the payment process
+      - `data`: the payment data
+        - `subscription`: the subscription data
+        - `summary`: the summary of the payment, the key is the `currencyId`, the value includes `amount`, `currency`, `method`
+        - `invoices`: the list of invoices
+        - `subscriptionUrl`: the url of the subscription
+```tsx
+<OverdueInvoicePayment subscriptionId={data.id} onPaid={() => { console.log('paid') }} />
+
+// custom mode
+<OverdueInvoicePayment subscriptionId={data.id} onPaid={() => { console.log('paid') }} mode="custom">
+  {(handlePay, { subscription, summary, invoices, subscriptionUrl }) => (
+    <div>custom content</div>
+    <p>Subscription: {subscription.name}</p>
+    <p>Current currency Total: {summary[currencyId].amount}</p>
+    <p>Invoices: {invoices.length}</p>
+    <p>Subscription URL: {subscriptionUrl}</p>
+    <button onClick={() => handlePay(summary[currencyId])}>Pay</button>
+  )}
+</OverdueInvoicePayment>
+```
+
 ### Status & Utility Components
 ```tsx
 import { 

package/es/checkout/table.js

@@ -40,7 +40,12 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
     return /* @__PURE__ */ jsx(Alert, { severity: "warning", children: t("payment.checkout.noPricing") });
   }
   const handleSelect = (priceId, currencyId) => {
-    api.post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${mergeExtraParams(extraParams)}`).then((res) => {
+    api.post(
+      `/api/pricing-tables/${data.id}/checkout/${priceId}?${mergeExtraParams({
+        ...extraParams,
+        currencyId
+      })}`
+    ).then((res) => {
       if (mode === "standalone") {
         let { url } = res.data;
         url = url.indexOf("?") > -1 ? `${url}&currencyId=${currencyId}` : `${url}?currencyId=${currencyId}`;

package/es/components/country-select.d.ts

@@ -7,10 +7,5 @@ export type CountrySelectProps = {
     name: string;
     sx?: SxProps;
 };
-declare function CountrySelect({ value, onChange, name, sx }: CountrySelectProps): JSX.Element;
-declare namespace CountrySelect {
-    var defaultProps: {
-        sx: {};
-    };
-}
+declare const CountrySelect: import("react").ForwardRefExoticComponent<CountrySelectProps & import("react").RefAttributes<HTMLDivElement>>;
 export default CountrySelect;

package/es/components/country-select.js

@@ -1,12 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useMemo, forwardRef } 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 CountrySelect = forwardRef(({ value, onChange, name, sx }, ref) => {
   const { setValue } = useFormContext();
   const countryDetail = useMemo(() => {
     const item = defaultCountries.find((v) => v[1] === value);
@@ -19,6 +16,7 @@ export default function CountrySelect({ value, onChange, name, sx }) {
   return /* @__PURE__ */ jsx(
     Select,
     {
+      ref,
       MenuProps: {
         style: {
           height: "300px",
@@ -35,7 +33,6 @@ export default function CountrySelect({ value, onChange, name, sx }) {
       },
       sx: {
         width: "100%",
-        // Remove default outline (display only on focus)
         fieldset: {
           display: "none"
         },
@@ -44,7 +41,6 @@ export default function CountrySelect({ value, onChange, name, sx }) {
             display: "block"
           }
         },
-        // Update default spacing
         ".MuiSelect-select": {
           padding: "8px",
           paddingRight: "24px !important"
@@ -54,7 +50,6 @@ export default function CountrySelect({ value, onChange, name, sx }) {
         },
         ".MuiMenuItem-root": {
           justifyContent: "flex-start"
-          // 确保内容左对齐
         },
         ...sx
       },
@@ -79,4 +74,8 @@ export default function CountrySelect({ value, onChange, name, sx }) {
       })
     }
   );
-}
+});
+CountrySelect.defaultProps = {
+  sx: {}
+};
+export default CountrySelect;

package/es/components/over-due-invoice-payment.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import type { Invoice, PaymentCurrency, PaymentMethod, Subscription } from '@blocklet/payment-types';
+type DialogProps = {
+    open?: boolean;
+    onClose?: () => void;
+    title?: string;
+};
+type Props = {
+    subscriptionId: string;
+    mode?: 'default' | 'custom';
+    onPaid?: (subscriptionId: string, currencyId: string) => void;
+    dialogProps?: DialogProps;
+    children?: (handlePay: (item: SummaryItem) => void, data: {
+        subscription: Subscription;
+        summary: {
+            [key: string]: SummaryItem;
+        };
+        invoices: Invoice[];
+        subscriptionUrl: string;
+    }) => React.ReactNode;
+};
+type SummaryItem = {
+    amount: string;
+    currency: PaymentCurrency;
+    method: PaymentMethod;
+};
+declare function OverdueInvoicePayment({ subscriptionId, mode, dialogProps, children, onPaid, }: Props): import("react").JSX.Element;
+declare namespace OverdueInvoicePayment {
+    var defaultProps: {
+        mode: string;
+        onPaid: () => void;
+        dialogProps: {
+            open: boolean;
+        };
+        children: null;
+    };
+}
+export default OverdueInvoicePayment;

package/es/components/over-due-invoice-payment.js

@@ -0,0 +1,238 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Button, Typography, Stack, CircularProgress, Alert } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Toast from "@arcblock/ux/lib/Toast";
+import { joinURL } from "ufo";
+import { useRequest } from "ahooks";
+import { Dialog } from "@arcblock/ux";
+import { usePaymentContext } from "../contexts/payment.js";
+import { formatAmount, formatError, getPrefix } from "../libs/util.js";
+import { useSubscription } from "../hooks/subscription.js";
+import api from "../libs/api.js";
+const fetchOverdueInvoices = async (subscriptionId) => {
+  const res = await api.get(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
+  return res.data;
+};
+function OverdueInvoicePayment({
+  subscriptionId,
+  mode = "default",
+  dialogProps = {},
+  children,
+  onPaid = () => {
+  }
+}) {
+  const { t } = useLocaleContext();
+  const { connect } = usePaymentContext();
+  const [selectCurrencyId, setSelectCurrencyId] = useState("");
+  const [payLoading, setPayLoading] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
+  const [processedCurrencies, setProcessedCurrencies] = useState({});
+  const {
+    data = {
+      subscription: {},
+      summary: {},
+      invoices: []
+    },
+    error,
+    loading,
+    runAsync: refresh
+  } = useRequest(() => fetchOverdueInvoices(subscriptionId));
+  const subscriptionUrl = joinURL(getPrefix(), `/customer/subscription/${subscriptionId}`);
+  const summaryList = useMemo(() => {
+    if (!data?.summary) {
+      return [];
+    }
+    return Object.values(data.summary);
+  }, [data?.summary]);
+  const subscription = useSubscription("events");
+  useEffect(() => {
+    if (subscription) {
+      subscription.on("invoice.paid", ({ response }) => {
+        const uniqueKey = `${response.subscription_id}-${response.currency_id}`;
+        if (response.subscription_id === subscriptionId && !processedCurrencies[uniqueKey]) {
+          Toast.success(t("payment.customer.invoice.paySuccess"));
+          setPayLoading(false);
+          setProcessedCurrencies({ ...processedCurrencies, [uniqueKey]: 1 });
+          refresh().then((res) => {
+            if (res.invoices?.length === 0) {
+              setDialogOpen(false);
+              onPaid(subscriptionId, response.currency_id);
+            }
+          });
+        }
+      });
+    }
+  }, [subscription]);
+  const handlePay = (item) => {
+    const { currency, method } = item;
+    if (method.type === "stripe") {
+      Toast.error(t("payment.subscription.overdue.notSupport"));
+      return;
+    }
+    if (payLoading) {
+      return;
+    }
+    setSelectCurrencyId(currency.id);
+    setPayLoading(true);
+    if (method.type === "arcblock" || method.type === "ethereum") {
+      connect.open({
+        containerEl: void 0,
+        saveConnect: false,
+        action: "collect-batch",
+        prefix: joinURL("/api/did"),
+        extraParams: { currencyId: currency.id, subscriptionId },
+        onSuccess: () => {
+          connect.close();
+        },
+        onClose: () => {
+          connect.close();
+          setPayLoading(false);
+        },
+        onError: (err) => {
+          Toast.error(formatError(err));
+          setPayLoading(false);
+        }
+      });
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(CircularProgress, {});
+  }
+  const renderPayButton = (item, props) => {
+    const isPayLoading = payLoading && item.currency.id === selectCurrencyId;
+    if (item.method.type === "stripe") {
+      return /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", onClick: () => window.open(subscriptionUrl, "_blank"), ...props, children: t("payment.subscription.overdue.viewNow") });
+    }
+    return /* @__PURE__ */ jsxs(Button, { variant: "contained", color: "primary", onClick: () => handlePay(item), ...props, disabled: isPayLoading, children: [
+      isPayLoading && /* @__PURE__ */ jsx(CircularProgress, { size: 14, sx: { mr: 1, color: "text.lighter" } }),
+      t("payment.subscription.overdue.payNow")
+    ] });
+  };
+  if (mode === "custom" && children && typeof children === "function") {
+    return /* @__PURE__ */ jsx(Stack, { children: children(handlePay, {
+      subscription: data?.subscription,
+      subscriptionUrl,
+      summary: data?.summary,
+      invoices: data?.invoices
+    }) });
+  }
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: dialogOpen,
+      onClose: () => setDialogOpen(false),
+      title: dialogProps.title || t("payment.subscription.overdue.pastDue"),
+      PaperProps: {
+        style: { minHeight: "auto" }
+      },
+      children: error ? /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message }) : /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
+        summaryList.length === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Alert, { severity: "success", children: t("payment.subscription.overdue.empty", {
+            // @ts-ignore
+            name: data?.subscription?.description
+          }) }),
+          /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "flex-end", mt: 2, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              color: "primary",
+              onClick: () => setDialogOpen(false),
+              sx: { width: "fit-content" },
+              children: t("common.know")
+            }
+          ) })
+        ] }),
+        summaryList.length === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Typography, { color: "text.secondary", variant: "body1", children: [
+            t("payment.subscription.overdue.title", {
+              // @ts-ignore
+              name: data?.subscription?.description,
+              count: data?.invoices?.length,
+              total: formatAmount(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
+              symbol: summaryList[0]?.currency?.symbol
+            }),
+            /* @__PURE__ */ jsx("br", {}),
+            t("payment.subscription.overdue.description"),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: subscriptionUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
+                children: t("payment.subscription.overdue.view")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "flex-end", gap: 2, mt: 2, children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outlined", color: "primary", onClick: () => setDialogOpen(false), children: t("common.cancel") }),
+            renderPayButton(summaryList[0])
+          ] })
+        ] }),
+        summaryList.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Typography, { color: "text.secondary", variant: "body1", children: [
+            t("payment.subscription.overdue.simpleTitle", {
+              // @ts-ignore
+              name: data?.subscription?.description,
+              count: data?.invoices?.length
+            }),
+            /* @__PURE__ */ jsx("br", {}),
+            t("payment.subscription.overdue.description"),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: subscriptionUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
+                children: t("payment.subscription.overdue.view")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Typography, { color: "text.secondary", variant: "body1", children: t("payment.subscription.overdue.list") }),
+          /* @__PURE__ */ jsx(Stack, { children: summaryList.map((item) => /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              sx: {
+                py: 1,
+                px: 0.5,
+                borderBottom: "1px solid var(--foregrounds-fg-border, #E0E0E0)",
+                "&:hover": {
+                  background: "var(--backgrounds-bg-highlight, #eff6ff)"
+                },
+                mt: 0
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { children: t("payment.subscription.overdue.total", {
+                  total: formatAmount(item?.amount, item?.currency?.decimal),
+                  currency: item?.currency?.symbol
+                }) }),
+                renderPayButton(item, {
+                  variant: "text",
+                  sx: {
+                    color: "text.link"
+                  }
+                })
+              ]
+            },
+            item?.currency?.id
+          )) })
+        ] })
+      ] })
+    }
+  );
+}
+OverdueInvoicePayment.defaultProps = {
+  mode: "default",
+  onPaid: () => {
+  },
+  dialogProps: {
+    open: true
+  },
+  children: null
+};
+export default OverdueInvoicePayment;

package/es/components/pricing-table.js

@@ -167,13 +167,13 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       // }
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-      .price-table-wrap:has(> div:nth-child(1)) {
+      .price-table-wrap:has(> div:nth-of-type(1)) {
         max-width: 360px !important;
       }
-      .price-table-wrap:has(> div:nth-child(2)) {
+      .price-table-wrap:has(> div:nth-of-type(2)) {
         max-width: 780px !important;
       }
-      .price-table-wrap:has(> div:nth-child(3)) {
+      .price-table-wrap:has(> div:nth-of-type(3)) {
         max-width: 1200px !important;
       }
     }
@@ -482,8 +482,6 @@ function Subscribe({ x, action, onSelect, currencyId }) {
       loading: state.loading === x.price_id && !state.loaded,
       disabled: x.is_disabled,
       onClick: () => handleSelect(x.price_id),
-      loadingPosition: "end",
-      endIcon: null,
       children: action
     }
   );

package/es/components/table.js

@@ -100,6 +100,8 @@ const Wrapped = styled(Datatable)`
     border-bottom: none;
     padding-top: 12px;
     padding-bottom: 12px;
+    padding-left: 16px;
+    padding-right: 16px;
     &:first-of-type {
       padding-left: 20px;
     }

package/es/index.d.ts

@@ -28,6 +28,7 @@ import CountrySelect from './components/country-select';
 import TruncatedText from './components/truncated-text';
 import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
+import OverdueInvoicePayment from './components/over-due-invoice-payment';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -38,4 +39,4 @@ export * from './hooks/mobile';
 export * from './hooks/table';
 export * from './hooks/scroll';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, };
+export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, };

package/es/index.js

@@ -28,6 +28,7 @@ import CountrySelect from "./components/country-select.js";
 import TruncatedText from "./components/truncated-text.js";
 import Link from "./components/link.js";
 import { createLazyComponent } from "./components/lazy-loader.js";
+import OverdueInvoicePayment from "./components/over-due-invoice-payment.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -68,5 +69,6 @@ export {
   CountrySelect,
   Table,
   TruncatedText,
-  Link
+  Link,
+  OverdueInvoicePayment
 };

package/es/locales/en.js

@@ -90,7 +90,8 @@ export default flat({
     amountPrecisionLimit: "Amount decimal places must be less than or equal to {precision}",
     saveAsDefaultPriceSuccess: "Set default price successfully",
     stakeAmount: "Stake Amount",
-    slashStakeAmount: "Slash Stake Amount"
+    slashStakeAmount: "Slash Stake Amount",
+    know: "I know"
   },
   payment: {
     checkout: {
@@ -316,6 +317,21 @@ export default flat({
         recharge: "Add funds",
         rechargeForSubscription: "Add funds for subscription"
       }
+    },
+    subscription: {
+      overdue: {
+        simpleTitle: "There are {count} due invoices for your subscription {name}, you need to pay them to activate your subscription or before making new purchases.",
+        title: "There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}, you need to pay them to activate your subscription or before making new purchases.",
+        payNow: "Pay Now",
+        notSupport: "This payment method is not supported",
+        total: "Total {total} {currency}",
+        view: "View Subscription Details",
+        viewNow: "View Now",
+        pastDue: "Past Due Invoices",
+        description: "If you have any questions, you can choose ",
+        list: "Past Due Invoices:",
+        empty: "There are no overdue invoices for your subscription {name}."
+      }
     }
   },
   refund: {

package/es/locales/zh.js

@@ -90,7 +90,8 @@ export default flat({
     amountPrecisionLimit: "\u91D1\u989D\u5C0F\u6570\u4F4D\u6570\u5FC5\u987B\u5728 {precision} \u4F4D\u4EE5\u5185",
     saveAsDefaultPriceSuccess: "\u8BBE\u7F6E\u9ED8\u8BA4\u4EF7\u683C\u6210\u529F",
     stakeAmount: "\u8D28\u62BC\u91D1\u989D",
-    slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D"
+    slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D",
+    know: "\u6211\u77E5\u9053\u4E86"
   },
   payment: {
     checkout: {
@@ -316,6 +317,21 @@ export default flat({
         recharge: "\u5145\u503C",
         rechargeForSubscription: "\u8BA2\u9605\u5145\u503C"
       }
+    },
+    subscription: {
+      overdue: {
+        title: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u603B\u8BA1 {total} {symbol}\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
+        simpleTitle: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
+        payNow: "\u7ACB\u5373\u652F\u4ED8",
+        notSupport: "\u6682\u4E0D\u652F\u6301\u8BE5\u652F\u4ED8\u65B9\u5F0F",
+        total: "\u603B\u8BA1 {total} {currency}",
+        view: "\u67E5\u770B\u8BA2\u9605\u8BE6\u60C5",
+        pastDue: "\u6B20\u8D39\u8D26\u5355",
+        viewNow: "\u7ACB\u5373\u67E5\u770B",
+        description: "\u5982\u679C\u60A8\u6709\u4EFB\u4F55\u7591\u95EE\uFF0C\u53EF\u4EE5\u9009\u62E9 ",
+        list: "\u6B20\u8D39\u8D26\u5355\uFF1A",
+        empty: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355"
+      }
     }
   },
   refund: {

package/es/payment/summary.js

@@ -196,6 +196,7 @@ export default function PaymentSummary({
                   {
                     size: "small",
                     loadingPosition: "end",
+                    endIcon: null,
                     color: "error",
                     variant: "text",
                     loading: state.loading,
@@ -225,6 +226,7 @@ export default function PaymentSummary({
                 {
                   size: "small",
                   loadingPosition: "end",
+                  endIcon: null,
                   color: crossSellBehavior === "required" ? "info" : "info",
                   variant: crossSellBehavior === "required" ? "text" : "text",
                   loading: state.loading,

package/lib/checkout/table.js

@@ -70,7 +70,10 @@ function CheckoutTableInner({
     });
   }
   const handleSelect = (priceId, currencyId) => {
-    _api.default.post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${(0, _util.mergeExtraParams)(extraParams)}`).then(res => {
+    _api.default.post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${(0, _util.mergeExtraParams)({
+      ...extraParams,
+      currencyId
+    })}`).then(res => {
       if (mode === "standalone") {
         let {
           url

package/lib/components/country-select.d.ts

@@ -7,10 +7,5 @@ export type CountrySelectProps = {
     name: string;
     sx?: SxProps;
 };
-declare function CountrySelect({ value, onChange, name, sx }: CountrySelectProps): JSX.Element;
-declare namespace CountrySelect {
-    var defaultProps: {
-        sx: {};
-    };
-}
+declare const CountrySelect: import("react").ForwardRefExoticComponent<CountrySelectProps & import("react").RefAttributes<HTMLDivElement>>;
 export default CountrySelect;

package/lib/components/country-select.js

@@ -3,21 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = CountrySelect;
+
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _material = require("@mui/material");
 var _reactHookForm = require("react-hook-form");
 var _reactInternationalPhone = require("react-international-phone");
-CountrySelect.defaultProps = {
-  sx: {}
-};
-function CountrySelect({
+const CountrySelect = (0, _react.forwardRef)(({
   value,
   onChange,
   name,
   sx
-}) {
+}, ref) => {
   const {
     setValue
   } = (0, _reactHookForm.useFormContext)();
@@ -32,6 +29,7 @@ function CountrySelect({
     setValue(name, e.target.value);
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+    ref,
     MenuProps: {
       style: {
         height: "300px",
@@ -48,7 +46,6 @@ function CountrySelect({
     },
     sx: {
       width: "100%",
-      // Remove default outline (display only on focus)
       fieldset: {
         display: "none"
       },
@@ -57,7 +54,6 @@ function CountrySelect({
           display: "block"
         }
       },
-      // Update default spacing
       ".MuiSelect-select": {
         padding: "8px",
         paddingRight: "24px !important"
@@ -67,9 +63,7 @@ function CountrySelect({
       },
       ".MuiMenuItem-root": {
         justifyContent: "flex-start"
-        // 确保内容左对齐
       },
-
       ...sx
     },
     value,
@@ -112,4 +106,8 @@ function CountrySelect({
       }, parsed.iso2);
     })
   });
-}
+});
+CountrySelect.defaultProps = {
+  sx: {}
+};
+module.exports = CountrySelect;