@blocklet/payment-react 1.18.30 → 1.18.31

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

@@ -11,6 +11,7 @@ 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 _pWaitFor = _interopRequireDefault(require("p-wait-for"));
 var _ux = require("@arcblock/ux");
 var _iconsMaterial = require("@mui/icons-material");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
@@ -62,6 +63,7 @@ function OverdueInvoicePayment({
   const sourceType = subscriptionId ? "subscription" : "customer";
   const effectiveCustomerId = customerId || session?.user?.did;
   const sourceId = subscriptionId || effectiveCustomerId;
+  const customerIdRef = (0, _react.useRef)(effectiveCustomerId);
   const {
     data = {
       summary: {},
@@ -75,7 +77,12 @@ function OverdueInvoicePayment({
     customerId: effectiveCustomerId,
     authToken
   }), {
-    ready: !!subscriptionId || !!effectiveCustomerId
+    ready: !!subscriptionId || !!effectiveCustomerId,
+    onSuccess: res => {
+      if (res.customer?.id && res.customer?.id !== customerIdRef.current) {
+        customerIdRef.current = res.customer?.id;
+      }
+    }
   });
   const detailUrl = (0, _react.useMemo)(() => {
     if (subscriptionId) {
@@ -108,15 +115,45 @@ function OverdueInvoicePayment({
     trailing: true,
     maxWait: 5e3
   });
+  const isCrossOriginRequest = (0, _util.isCrossOrigin)();
   const subscription = (0, _subscription.useSubscription)("events");
+  const waitForInvoiceAllPaid = async () => {
+    let isPaid = false;
+    await (0, _pWaitFor.default)(async () => {
+      const res = await refresh();
+      isPaid = res.invoices?.length === 0;
+      return isPaid;
+    }, {
+      interval: 2e3,
+      timeout: 3 * 60 * 1e3
+    });
+    return isPaid;
+  };
+  const handleConnected = async () => {
+    if (isCrossOriginRequest) {
+      try {
+        const paid = await waitForInvoiceAllPaid();
+        if (successToast) {
+          _Toast.default.close();
+          _Toast.default.success(t("payment.customer.invoice.paySuccess"));
+        }
+        if (paid) {
+          setDialogOpen(false);
+          onPaid(sourceId, selectCurrencyId, sourceType);
+        }
+      } catch (err) {
+        console.error("Check payment status failed:", err);
+      }
+    }
+  };
   (0, _react.useEffect)(() => {
-    if (subscription) {
+    if (subscription && !isCrossOriginRequest) {
       subscription.on("invoice.paid", ({
         response
       }) => {
         const relevantId = subscriptionId || response.customer_id;
         const uniqueKey = `${relevantId}-${response.currency_id}`;
-        if (subscriptionId && response.subscription_id === subscriptionId || effectiveCustomerId && [data.customer?.id, effectiveCustomerId].includes(response.customer_id)) {
+        if (subscriptionId && response.subscription_id === subscriptionId || effectiveCustomerId && effectiveCustomerId === response.customer_id || customerIdRef.current && customerIdRef.current === response.customer_id) {
           if (!processedCurrencies[uniqueKey]) {
             setProcessedCurrencies(prev => ({
               ...prev,
@@ -160,10 +197,11 @@ function OverdueInvoicePayment({
         saveConnect: false,
         action: "collect-batch",
         prefix: (0, _ufo.joinURL)((0, _util.getPrefix)(), "/api/did"),
-        useSocket: (0, _util.isCrossOrigin)() === false,
+        useSocket: !isCrossOriginRequest,
         extraParams,
         onSuccess: () => {
           connect.close();
+          handleConnected();
           setPayLoading(false);
           setPaymentStatus(prev => ({
             ...prev,

package/lib/libs/util.d.ts

@@ -50,6 +50,7 @@ export declare function formatPriceDisplay({ amount, then, actualAmount, showThe
     actualAmount: string;
     showThen?: boolean;
 }, recurring: string, hasMetered: boolean, locale?: string): string;
+export declare function hasMultipleRecurringIntervals(items: TLineItemExpanded[]): boolean;
 export declare function getFreeTrialTime({ trialInDays, trialEnd }: {
     trialInDays: number;
     trialEnd: number;

package/lib/libs/util.js

@@ -49,6 +49,7 @@ exports.getUserProfileLink = getUserProfileLink;
 exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.getWordBreakStyle = getWordBreakStyle;
 exports.hasDelegateTxHash = hasDelegateTxHash;
+exports.hasMultipleRecurringIntervals = hasMultipleRecurringIntervals;
 exports.isCrossOrigin = isCrossOrigin;
 exports.isMobileSafari = isMobileSafari;
 exports.isPaymentKitMounted = void 0;
@@ -549,6 +550,18 @@ function formatPriceDisplay({
   }
   return [amount, then].filter(Boolean).join(" ");
 }
+function hasMultipleRecurringIntervals(items) {
+  const intervals = /* @__PURE__ */new Set();
+  for (const item of items) {
+    if (item.price?.recurring?.interval && item.price?.type === "recurring") {
+      intervals.add(`${item.price.recurring.interval}-${item.price.recurring.interval_count}`);
+      if (intervals.size > 1) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
 function getFreeTrialTime({
   trialInDays,
   trialEnd
@@ -634,6 +647,7 @@ function formatCheckoutHeadlines(items, currency, {
   const item = items.find(x => x.price.type === "recurring");
   const recurring = formatRecurring((item?.upsell_price || item?.price)?.recurring, false, "per", locale);
   const hasMetered = items.some(x => x.price.type === "recurring" && x.price.recurring?.usage_type === "metered");
+  const differentRecurring = hasMultipleRecurringIntervals(items);
   if (items.every(x => x.price.type === "recurring")) {
     const subscription2 = [hasMetered ? (0, _locales.t)("payment.checkout.least", locale) : "", (0, _util.fromUnitToToken)(items.reduce((acc, x) => {
       if (x.price.recurring?.usage_type === "metered") {
@@ -704,7 +718,7 @@ function formatCheckoutHeadlines(items, currency, {
       then: hasMetered ? (0, _locales.t)("payment.checkout.meteredThen", locale, {
         recurring
       }) : recurring,
-      showThen: hasMetered,
+      showThen: hasMetered && !differentRecurring,
       actualAmount
     };
     return {
@@ -724,7 +738,7 @@ function formatCheckoutHeadlines(items, currency, {
     }),
     amount,
     then: formatMeteredThen(`${subscription} ${currency.symbol}`, recurring, hasMetered && Number(subscription) === 0, locale),
-    showThen: true,
+    showThen: !differentRecurring,
     actualAmount
   };
   return {

package/lib/locales/en.js

@@ -122,7 +122,8 @@ module.exports = (0, _flat.default)({
       login: "Login to load and save contact information",
       next: {
         subscription: "View subscription",
-        invoice: "View invoice"
+        invoice: "View invoice",
+        view: "View"
       },
       paymentRequired: "Payment Required",
       staking: {

package/lib/locales/zh.js

@@ -122,7 +122,8 @@ module.exports = (0, _flat.default)({
       login: "\u767B\u5F55\u4EE5\u52A0\u8F7D\u5E76\u4FDD\u5B58\u8054\u7CFB\u4FE1\u606F",
       next: {
         subscription: "\u67E5\u770B\u8BA2\u9605",
-        invoice: "\u67E5\u770B\u8D26\u5355"
+        invoice: "\u67E5\u770B\u8D26\u5355",
+        view: "\u67E5\u770B"
       },
       paymentRequired: "\u652F\u4ED8\u91D1\u989D",
       staking: {

package/lib/payment/form/currency.d.ts

@@ -1,6 +1,6 @@
 import type { TPaymentCurrency } from '@blocklet/payment-types';
 type Props = {
-    value: number;
+    value: string;
     currencies: TPaymentCurrency[];
     onChange: Function;
 };

package/lib/payment/form/currency.js

@@ -20,11 +20,11 @@ function CurrencySelector({
       gap: 12,
       gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))"
     },
-    children: currencies.map((x, i) => {
-      const selected = i === value;
+    children: currencies.map(x => {
+      const selected = x.id === value;
       return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
         variant: "outlined",
-        onClick: () => onChange(i),
+        onClick: () => onChange(x.id, x.method?.id),
         className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",

package/lib/payment/form/index.d.ts

@@ -6,7 +6,7 @@ type PageData = CheckoutContext & CheckoutCallbacks & {
     onlyShowBtn?: boolean;
     isDonation?: boolean;
 };
-declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, currencyId, onlyShowBtn, isDonation, }: PageData): import("react").JSX.Element;
+declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, onlyShowBtn, isDonation, }: PageData): import("react").JSX.Element;
 declare namespace PaymentForm {
     var defaultProps: {
         onlyShowBtn: boolean;

package/lib/payment/form/index.js

@@ -103,7 +103,6 @@ function PaymentForm({
   onError,
   // mode,
   action,
-  currencyId,
   onlyShowBtn,
   isDonation = false
 }) {
@@ -150,19 +149,6 @@ function PaymentForm({
     stripePaying: false
   });
   const currencies = (0, _util.flattenPaymentMethods)(paymentMethods);
-  const [paymentCurrencyIndex, setPaymentCurrencyIndex] = (0, _react.useState)(() => {
-    const query = (0, _util.getQueryParams)(window.location.href);
-    const queryCurrencyId = query.currencyId || currencyId;
-    const index = currencies.findIndex(x => x.id === queryCurrencyId);
-    return index >= 0 ? index : 0;
-  });
-  const handleCurrencyChange = index => {
-    setPaymentCurrencyIndex(index);
-    const selectedCurrencyId = currencies[index]?.id;
-    if (selectedCurrencyId) {
-      (0, _currency2.saveCurrencyPreference)(selectedCurrencyId, session?.user?.did);
-    }
-  };
   const onCheckoutComplete = (0, _ahooks.useMemoizedFn)(async ({
     response
   }) => {
@@ -170,17 +156,9 @@ function PaymentForm({
       await handleConnected();
     }
   });
-  const onInvoicePaid = (0, _ahooks.useMemoizedFn)(async ({
-    response
-  }) => {
-    if (response.customer_id === customer?.id && state.customerLimited) {
-      await onAction();
-    }
-  });
   (0, _react.useEffect)(() => {
     if (subscription) {
       subscription.on("checkout.session.completed", onCheckoutComplete);
-      subscription.on("invoice.paid", onInvoicePaid);
     }
   }, [subscription]);
   const mergeUserInfo = (customerInfo, userInfo) => {
@@ -247,10 +225,6 @@ function PaymentForm({
     };
     initUserInfo();
   }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
-  (0, _react.useEffect)(() => {
-    setValue("payment_method", currencies[paymentCurrencyIndex]?.method?.id);
-    setValue("payment_currency", currencies[paymentCurrencyIndex]?.id);
-  }, [paymentCurrencyIndex, currencies, setValue]);
   const paymentMethod = (0, _reactHookForm.useWatch)({
     control,
     name: "payment_method"
@@ -378,6 +352,11 @@ function PaymentForm({
                 paying: false
               });
               onError(err);
+            },
+            messages: {
+              title: "DID Connect",
+              scan: "Use following methods to complete this payment",
+              confirm: "Confirm"
             }
           });
         }
@@ -437,13 +416,13 @@ function PaymentForm({
       }
       if (hasDidWallet(session.user)) {
         handleSubmit(onFormSubmit, onFormError)();
-      } else {
-        session.bindWallet(() => {
-          setTimeout(() => {
-            handleSubmit(onFormSubmit, onFormError)();
-          }, 2e3);
-        });
+        return;
       }
+      session.bindWallet(() => {
+        setTimeout(() => {
+          handleSubmit(onFormSubmit, onFormError)();
+        }, 2e3);
+      });
     } else {
       if (isDonationMode) {
         handleSubmit(onFormSubmit, onFormError)();
@@ -570,10 +549,16 @@ function PaymentForm({
               children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
                 name: "payment_currency",
                 control,
-                render: () => /* @__PURE__ */(0, _jsxRuntime.jsx)(_currency.default, {
-                  value: paymentCurrencyIndex,
+                render: ({
+                  field
+                }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_currency.default, {
+                  value: field.value,
                   currencies,
-                  onChange: handleCurrencyChange
+                  onChange: (id, methodId) => {
+                    field.onChange(id);
+                    setValue("payment_method", methodId);
+                    (0, _currency2.saveCurrencyPreference)(id, session?.user?.did);
+                  }
                 })
               })
             }), state.stripePaying && state.stripeContext && /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripe.default, {

package/lib/payment/form/stripe/form.js

@@ -189,9 +189,11 @@ function StripeCheckoutForm({
 
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Content, {
     onSubmit: handleSubmit,
-    children: [(!state.paymentMethod || state.paymentMethod === "card") && /* @__PURE__ */(0, _jsxRuntime.jsx)(LinkAuthenticationElement, {
+    children: [(!state.paymentMethod || ["link", "card"].includes(state.paymentMethod)) && /* @__PURE__ */(0, _jsxRuntime.jsx)(LinkAuthenticationElement, {
       options: {
-        defaultEmail: customer.email
+        defaultValues: {
+          email: customer.email
+        }
       }
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(PaymentElementContainer, {
       className: !state.isTransitioning ? "visible" : "",

package/lib/payment/index.js

@@ -116,6 +116,14 @@ function PaymentInner({
       })
     }
   });
+  (0, _react.useEffect)(() => {
+    if (defaultCurrencyId) {
+      methods.setValue("payment_currency", defaultCurrencyId);
+    }
+    if (defaultMethodId) {
+      methods.setValue("payment_method", defaultMethodId);
+    }
+  }, [defaultCurrencyId, defaultMethodId]);
   (0, _react.useEffect)(() => {
     if (!(0, _util2.isMobileSafari)()) {
       return () => {};
@@ -258,7 +266,7 @@ function PaymentInner({
             billingThreshold: Math.max(state.checkoutSession.subscription_data?.billing_threshold_amount || 0,
             // @ts-ignore
             state.checkoutSession.subscription_data?.min_stake_amount || 0),
-            showStaking: method.type === "arcblock",
+            showStaking: method.type === "arcblock" && !state.checkoutSession.subscription_data?.no_stake,
             currency,
             onUpsell,
             onDownsell,
@@ -289,6 +297,7 @@ function PaymentInner({
           action: state.checkoutSession.mode,
           invoiceId: state.checkoutSession.invoice_id,
           subscriptionId: state.checkoutSession.subscription_id,
+          subscriptions: state.checkoutSession.subscriptions,
           message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${state.checkoutSession.submit_type === "donate" ? "donate" : state.checkoutSession.mode}`)
         }), !completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
           currencyId,

package/lib/payment/success.d.ts

@@ -5,12 +5,14 @@ type Props = {
     payee: string;
     invoiceId?: string;
     subscriptionId?: string;
+    subscriptions?: any[];
 };
-declare function PaymentSuccess({ mode, message, action, payee, invoiceId, subscriptionId }: Props): import("react").JSX.Element;
+declare function PaymentSuccess({ mode, message, action, payee, invoiceId, subscriptionId, subscriptions, }: Props): import("react").JSX.Element;
 declare namespace PaymentSuccess {
     var defaultProps: {
         invoiceId: string;
         subscriptionId: string;
+        subscriptions: never[];
     };
 }
 export default PaymentSuccess;

package/lib/payment/success.js

@@ -9,6 +9,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _ufo = require("ufo");
+var _ux = require("@arcblock/ux");
 var _payment = require("../contexts/payment");
 function PaymentSuccess({
   mode,
@@ -16,7 +17,8 @@ function PaymentSuccess({
   action,
   payee,
   invoiceId,
-  subscriptionId
+  subscriptionId,
+  subscriptions
 }) {
   const {
     t
@@ -25,19 +27,69 @@ function PaymentSuccess({
     prefix
   } = (0, _payment.usePaymentContext)();
   let next = null;
-  if (["subscription", "setup"].includes(action) && subscriptionId) {
-    next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      textAlign: "center",
-      sx: {
-        mt: 2
-      },
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
-        href: (0, _ufo.joinURL)(prefix, `/customer/subscription/${subscriptionId}`),
-        children: t("payment.checkout.next.subscription", {
-          payee
+  if (["subscription", "setup"].includes(action)) {
+    if (subscriptions && subscriptions.length > 1) {
+      next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Paper, {
+        elevation: 0,
+        sx: {
+          p: 3,
+          backgroundColor: "grey.50",
+          borderRadius: 2,
+          width: "100%",
+          mt: 2,
+          display: "flex",
+          flexDirection: "column",
+          gap: 2
+        },
+        children: subscriptions.map(subscription => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.secondary",
+              fontWeight: 500
+            },
+            children: subscription.description
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              flex: 1,
+              borderBottom: "1px dashed",
+              borderColor: "grey.300",
+              mx: 2
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Button, {
+            variant: "text",
+            color: "primary",
+            size: "small",
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
+              href: (0, _ufo.joinURL)(prefix, `/customer/subscription/${subscription.id}`),
+              sx: {
+                color: "text.secondary"
+              },
+              children: t("payment.checkout.next.view")
+            })
+          })]
+        }, subscription.id))
+      });
+    } else if (subscriptionId) {
+      next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Button, {
+        variant: "outlined",
+        color: "primary",
+        sx: {
+          mt: 2
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
+          href: (0, _ufo.joinURL)(prefix, `/customer/subscription/${subscriptionId}`),
+          children: t("payment.checkout.next.subscription", {
+            payee
+          })
         })
-      })
-    });
+      });
+    }
   } else if (invoiceId) {
     next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       textAlign: "center",
@@ -59,7 +111,7 @@ function PaymentSuccess({
       alignItems: "center",
       justifyContent: mode === "standalone" ? "center" : "flex-start",
       sx: {
-        height: mode === "standalone" ? 360 : 300
+        height: mode === "standalone" ? "fit-content" : 300
       },
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(Div, {
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
@@ -95,7 +147,8 @@ function PaymentSuccess({
 }
 PaymentSuccess.defaultProps = {
   invoiceId: "",
-  subscriptionId: ""
+  subscriptionId: "",
+  subscriptions: []
 };
 const Div = (0, _system.styled)("div")`
   width: 80px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.30",
+  "version": "1.18.31",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,15 +54,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.13.1",
-    "@arcblock/ux": "^2.13.1",
-    "@arcblock/ws": "^1.20.0",
-    "@blocklet/ui-react": "^2.13.1",
+    "@arcblock/did-connect": "^2.13.5",
+    "@arcblock/ux": "^2.13.5",
+    "@arcblock/ws": "^1.20.1",
+    "@blocklet/ui-react": "^2.13.5",
     "@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.20.0",
+    "@ocap/util": "^1.20.1",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.30",
+    "@blocklet/payment-types": "1.18.31",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -124,5 +124,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "ed1753c48ee405a104cd2a0cab87cccb21e70ba8"
+  "gitHead": "c9b1eff248ecd07bc1f606df039464dafa786914"
 }

package/src/checkout/donate.tsx

@@ -368,7 +368,17 @@ function SupporterSimple({ supporters = [], totalAmount = '0', currency, method
           })
         )}
       </Typography>
-      <AvatarGroup total={customersNum} max={10}>
+      <AvatarGroup
+        total={customersNum}
+        max={10}
+        spacing={4}
+        sx={{
+          '& .MuiAvatar-root': {
+            width: 24,
+            height: 24,
+            fontSize: '0.6rem',
+          },
+        }}>
         {customers.map((x) => (
           <Avatar
             key={x.id}
@@ -376,7 +386,6 @@ function SupporterSimple({ supporters = [], totalAmount = '0', currency, method
             alt={x.customer?.metadata?.anonymous ? '' : x.customer?.name}
             src={getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : '', 48)}
             variant="circular"
-            sx={{ width: 24, height: 24 }}
           />
         ))}
       </AvatarGroup>
@@ -708,7 +717,17 @@ function CheckoutDonateInner({
           toolbar={
             isMobile ? null : (
               <Box display="flex" alignItems="center" gap={1} sx={{ color: 'text.secondary' }}>
-                <AvatarGroup total={customers?.length} max={5}>
+                <AvatarGroup
+                  total={customers?.length}
+                  max={5}
+                  spacing={4}
+                  sx={{
+                    '& .MuiAvatar-root': {
+                      width: 18,
+                      height: 18,
+                      fontSize: '0.6rem',
+                    },
+                  }}>
                   {customers.map((x: any) => (
                     <Avatar
                       key={x.id}
@@ -716,10 +735,9 @@ function CheckoutDonateInner({
                       src={getCustomerAvatar(
                         x.customer?.did,
                         x?.updated_at ? new Date(x.updated_at).toISOString() : '',
-                        18
+                        24
                       )}
                       variant="circular"
-                      sx={{ width: 18, height: 18 }}
                     />
                   ))}
                 </AvatarGroup>

package/src/components/country-select.tsx

@@ -230,6 +230,7 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(({ value, o
       }}
       sx={{
         width: '100%',
+        minWidth: '60px',
         fieldset: {
           display: 'none',
         },