@blocklet/payment-react 1.16.3 → 1.16.5

package/lib/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/lib/components/over-due-invoice-payment.js

@@ -0,0 +1,285 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _ufo = require("ufo");
+var _ahooks = require("ahooks");
+var _ux = require("@arcblock/ux");
+var _payment = require("../contexts/payment");
+var _util = require("../libs/util");
+var _subscription = require("../hooks/subscription");
+var _api = _interopRequireDefault(require("../libs/api"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const fetchOverdueInvoices = async subscriptionId => {
+  const res = await _api.default.get(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
+  return res.data;
+};
+function OverdueInvoicePayment({
+  subscriptionId,
+  mode = "default",
+  dialogProps = {},
+  children,
+  onPaid = () => {}
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    connect
+  } = (0, _payment.usePaymentContext)();
+  const [selectCurrencyId, setSelectCurrencyId] = (0, _react.useState)("");
+  const [payLoading, setPayLoading] = (0, _react.useState)(false);
+  const [dialogOpen, setDialogOpen] = (0, _react.useState)(dialogProps.open || false);
+  const [processedCurrencies, setProcessedCurrencies] = (0, _react.useState)({});
+  const {
+    data = {
+      subscription: {},
+      summary: {},
+      invoices: []
+    },
+    error,
+    loading,
+    runAsync: refresh
+  } = (0, _ahooks.useRequest)(() => fetchOverdueInvoices(subscriptionId));
+  const subscriptionUrl = (0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/subscription/${subscriptionId}`);
+  const summaryList = (0, _react.useMemo)(() => {
+    if (!data?.summary) {
+      return [];
+    }
+    return Object.values(data.summary);
+  }, [data?.summary]);
+  const subscription = (0, _subscription.useSubscription)("events");
+  (0, _react.useEffect)(() => {
+    if (subscription) {
+      subscription.on("invoice.paid", ({
+        response
+      }) => {
+        const uniqueKey = `${response.subscription_id}-${response.currency_id}`;
+        if (response.subscription_id === subscriptionId && !processedCurrencies[uniqueKey]) {
+          _Toast.default.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.default.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: (0, _ufo.joinURL)("/api/did"),
+        extraParams: {
+          currencyId: currency.id,
+          subscriptionId
+        },
+        onSuccess: () => {
+          connect.close();
+        },
+        onClose: () => {
+          connect.close();
+          setPayLoading(false);
+        },
+        onError: err => {
+          _Toast.default.error((0, _util.formatError)(err));
+          setPayLoading(false);
+        }
+      });
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+  }
+  const renderPayButton = (item, props) => {
+    const isPayLoading = payLoading && item.currency.id === selectCurrencyId;
+    if (item.method.type === "stripe") {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "contained",
+        color: "primary",
+        onClick: () => window.open(subscriptionUrl, "_blank"),
+        ...props,
+        children: t("payment.subscription.overdue.viewNow")
+      });
+    }
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
+      variant: "contained",
+      color: "primary",
+      onClick: () => handlePay(item),
+      ...props,
+      disabled: isPayLoading,
+      children: [isPayLoading && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+        size: 14,
+        sx: {
+          mr: 1,
+          color: "text.lighter"
+        }
+      }), t("payment.subscription.overdue.payNow")]
+    });
+  };
+  if (mode === "custom" && children && typeof children === "function") {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+      children: children(handlePay, {
+        subscription: data?.subscription,
+        subscriptionUrl,
+        summary: data?.summary,
+        invoices: data?.invoices
+      })
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Dialog, {
+    open: dialogOpen,
+    onClose: () => setDialogOpen(false),
+    title: dialogProps.title || t("payment.subscription.overdue.pastDue"),
+    PaperProps: {
+      style: {
+        minHeight: "auto"
+      }
+    },
+    children: error ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+      severity: "error",
+      children: error.message
+    }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      gap: 1,
+      children: [summaryList.length === 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+          severity: "success",
+          children: t("payment.subscription.overdue.empty", {
+            // @ts-ignore
+            name: data?.subscription?.description
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          direction: "row",
+          justifyContent: "flex-end",
+          mt: 2,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "outlined",
+            color: "primary",
+            onClick: () => setDialogOpen(false),
+            sx: {
+              width: "fit-content"
+            },
+            children: t("common.know")
+          })
+        })]
+      }), summaryList.length === 1 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          color: "text.secondary",
+          variant: "body1",
+          children: [t("payment.subscription.overdue.title", {
+            // @ts-ignore
+            name: data?.subscription?.description,
+            count: data?.invoices?.length,
+            total: (0, _util.formatAmount)(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
+            symbol: summaryList[0]?.currency?.symbol
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)("br", {}), t("payment.subscription.overdue.description"), /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
+            href: subscriptionUrl,
+            target: "_blank",
+            rel: "noreferrer",
+            style: {
+              color: "var(--foregrounds-fg-interactive, 0086FF)"
+            },
+            children: t("payment.subscription.overdue.view")
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          justifyContent: "flex-end",
+          gap: 2,
+          mt: 2,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "outlined",
+            color: "primary",
+            onClick: () => setDialogOpen(false),
+            children: t("common.cancel")
+          }), renderPayButton(summaryList[0])]
+        })]
+      }), summaryList.length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          color: "text.secondary",
+          variant: "body1",
+          children: [t("payment.subscription.overdue.simpleTitle", {
+            // @ts-ignore
+            name: data?.subscription?.description,
+            count: data?.invoices?.length
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)("br", {}), t("payment.subscription.overdue.description"), /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
+            href: subscriptionUrl,
+            target: "_blank",
+            rel: "noreferrer",
+            style: {
+              color: "var(--foregrounds-fg-interactive, 0086FF)"
+            },
+            children: t("payment.subscription.overdue.view")
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          color: "text.secondary",
+          variant: "body1",
+          children: t("payment.subscription.overdue.list")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          children: summaryList.map(item => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: t("payment.subscription.overdue.total", {
+                total: (0, _util.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
+};
+module.exports = OverdueInvoicePayment;

package/lib/components/pricing-table.js

@@ -184,13 +184,13 @@ function PricingTable({
     @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;
       }
     }
@@ -507,8 +507,6 @@ function Subscribe({
     loading: state.loading === x.price_id && !state.loaded,
     disabled: x.is_disabled,
     onClick: () => handleSelect(x.price_id),
-    loadingPosition: "end",
-    endIcon: null,
     children: action
   });
 }

package/lib/components/table.js

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

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

@@ -34,6 +34,7 @@ var _exportNames = {
   TruncatedText: true,
   Link: true,
   createLazyComponent: true,
+  OverdueInvoicePayment: true,
   PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
@@ -116,6 +117,12 @@ Object.defineProperty(exports, "Livemode", {
     return _livemode.default;
   }
 });
+Object.defineProperty(exports, "OverdueInvoicePayment", {
+  enumerable: true,
+  get: function () {
+    return _overDueInvoicePayment.default;
+  }
+});
 Object.defineProperty(exports, "Payment", {
   enumerable: true,
   get: function () {
@@ -266,6 +273,7 @@ var _countrySelect = _interopRequireDefault(require("./components/country-select
 var _truncatedText = _interopRequireDefault(require("./components/truncated-text"));
 var _link = _interopRequireDefault(require("./components/link"));
 var _lazyLoader = require("./components/lazy-loader");
+var _overDueInvoicePayment = _interopRequireDefault(require("./components/over-due-invoice-payment"));
 var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {

package/lib/locales/en.js

@@ -97,7 +97,8 @@ module.exports = (0, _flat.default)({
     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: {
@@ -323,6 +324,21 @@ module.exports = (0, _flat.default)({
         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/lib/locales/zh.js

@@ -97,7 +97,8 @@ module.exports = (0, _flat.default)({
     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: {
@@ -323,6 +324,21 @@ module.exports = (0, _flat.default)({
         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/lib/payment/summary.js

@@ -219,6 +219,7 @@ function PaymentSummary({
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
             size: "small",
             loadingPosition: "end",
+            endIcon: null,
             color: "error",
             variant: "text",
             loading: state.loading,
@@ -263,6 +264,7 @@ function PaymentSummary({
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
               size: "small",
               loadingPosition: "end",
+              endIcon: null,
               color: crossSellBehavior === "required" ? "info" : "info",
               variant: crossSellBehavior === "required" ? "text" : "text",
               loading: state.loading,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.16.3",
+  "version": "1.16.5",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -53,15 +53,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.10.67",
-    "@arcblock/ux": "^2.10.67",
-    "@arcblock/ws": "^1.18.147",
-    "@blocklet/ui-react": "^2.10.67",
+    "@arcblock/did-connect": "^2.10.74",
+    "@arcblock/ux": "^2.10.74",
+    "@arcblock/ws": "^1.18.150",
+    "@blocklet/ui-react": "^2.10.74",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.18.147",
+    "@ocap/util": "^1.18.150",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.16.3",
+    "@blocklet/payment-types": "1.16.5",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -122,5 +122,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "6accc56a51e4ea0906e65f69dc5f41eaa82685fb"
+  "gitHead": "74e38987168230f01af52d1aff14bfa6a18c0578"
 }

package/src/checkout/table.tsx

@@ -52,7 +52,12 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
 
   const handleSelect = (priceId: string, currencyId: string) => {
     api
-      .post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${mergeExtraParams(extraParams)}`)
+      .post(
+        `/api/pricing-tables/${data.id}/checkout/${priceId}?${mergeExtraParams({
+          ...extraParams,
+          currencyId,
+        })}`
+      )
       .then((res) => {
         if (mode === 'standalone') {
           let { url } = res.data;

package/src/components/country-select.tsx

@@ -1,6 +1,4 @@
-/* eslint-disable react/prop-types */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { useMemo } from 'react';
+import { useMemo, forwardRef } from 'react';
 import { Box, MenuItem, Select, SxProps, Typography } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { CountryIso2, FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
@@ -12,11 +10,7 @@ export type CountrySelectProps = {
   sx?: SxProps;
 };
 
-CountrySelect.defaultProps = {
-  sx: {},
-};
-
-export default function CountrySelect({ value, onChange, name, sx }: CountrySelectProps) {
+const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(({ value, onChange, name, sx }, ref) => {
   const { setValue } = useFormContext();
   const countryDetail = useMemo(() => {
     const item = defaultCountries.find((v) => v[1] === value);
@@ -30,6 +24,7 @@ export default function CountrySelect({ value, onChange, name, sx }: CountrySele
 
   return (
     <Select
+      ref={ref}
       MenuProps={{
         style: {
           height: '300px',
@@ -46,7 +41,6 @@ export default function CountrySelect({ value, onChange, name, sx }: CountrySele
       }}
       sx={{
         width: '100%',
-        // Remove default outline (display only on focus)
         fieldset: {
           display: 'none',
         },
@@ -55,7 +49,6 @@ export default function CountrySelect({ value, onChange, name, sx }: CountrySele
             display: 'block',
           },
         },
-        // Update default spacing
         '.MuiSelect-select': {
           padding: '8px',
           paddingRight: '24px !important',
@@ -64,7 +57,7 @@ export default function CountrySelect({ value, onChange, name, sx }: CountrySele
           right: 0,
         },
         '.MuiMenuItem-root': {
-          justifyContent: 'flex-start', // 确保内容左对齐
+          justifyContent: 'flex-start',
         },
         ...sx,
       }}
@@ -90,4 +83,9 @@ export default function CountrySelect({ value, onChange, name, sx }: CountrySele
       })}
     </Select>
   );
-}
+});
+
+CountrySelect.defaultProps = {
+  sx: {},
+};
+export default CountrySelect;