payment-kit 1.14.34 → 1.14.36

package/api/src/libs/subscription.ts

@@ -110,29 +110,35 @@ export const getMinRetryMail = (interval: string) => {
   return 15; // 18 hours
 };
 
+const ZERO = new BN(0);
 export function getSubscriptionStakeSetup(items: TLineItemExpanded[], currencyId: string, billingThreshold = '0') {
   const staking = {
     licensed: new BN(0),
     metered: new BN(0),
   };
 
-  items.forEach((x) => {
-    const price = getSubscriptionItemPrice(x);
-    const unit = getPriceUintAmountByCurrency(price, currencyId);
-    const amount = new BN(unit).mul(new BN(x.quantity));
-    if (price.type === 'recurring' && price.recurring) {
-      if (price.recurring.usage_type === 'licensed') {
-        staking.licensed = staking.licensed.add(amount);
-      }
-      if (price.recurring.usage_type === 'metered') {
-        if (+billingThreshold) {
-          staking.metered = new BN(billingThreshold);
-        } else {
-          staking.metered = staking.metered.add(amount);
+  const recurringItems = items
+    .map((x) => x.upsell_price || x.price)
+    .filter((x) => x.type === 'recurring' && x.recurring);
+  if (recurringItems.length > 0) {
+    if (new BN(billingThreshold).gt(ZERO)) {
+      staking.licensed = new BN(billingThreshold);
+    } else {
+      items.forEach((x) => {
+        const price = getSubscriptionItemPrice(x);
+        const unit = getPriceUintAmountByCurrency(price, currencyId);
+        const amount = new BN(unit).mul(new BN(x.quantity));
+        if (price.type === 'recurring' && price.recurring) {
+          if (price.recurring.usage_type === 'licensed') {
+            staking.licensed = staking.licensed.add(amount);
+          }
+          if (price.recurring.usage_type === 'metered') {
+            staking.metered = staking.metered.add(amount);
+          }
         }
-      }
+      });
     }
-  });
+  }
 
   return staking;
 }
@@ -660,10 +666,37 @@ export async function getRemainingStakes(subscriptionIds: string[], subscription
   return total.toString();
 }
 
+export async function getSubscriptionStakeSlashSetup(
+  subscription: Subscription,
+  address: string,
+  paymentMethod: PaymentMethod
+) {
+  const lastInvoice = await Invoice.findByPk(subscription.latest_invoice_id);
+  const result = await getSubscriptionRemainingStakeSetup(subscription, address, paymentMethod, 'slash');
+  return {
+    ...result,
+    lastInvoice,
+  };
+}
+
 export async function getSubscriptionStakeReturnSetup(
   subscription: Subscription,
   address: string,
   paymentMethod: PaymentMethod
+) {
+  const lastInvoice = await Invoice.findByPk(subscription.latest_invoice_id);
+  const result = await getSubscriptionRemainingStakeSetup(subscription, address, paymentMethod, 'return');
+  return {
+    ...result,
+    lastInvoice,
+  };
+}
+
+export async function getSubscriptionRemainingStakeSetup(
+  subscription: Subscription,
+  address: string,
+  paymentMethod: PaymentMethod,
+  action: 'return' | 'slash' = 'return'
 ) {
   const client = paymentMethod.getOcapClient();
   const { state } = await client.getStakeState({ address });
@@ -675,7 +708,12 @@ export async function getSubscriptionStakeReturnSetup(
       sender: '',
     };
   }
-  const total = new BN(state.tokens.find((x: any) => x.address === currency.contract)?.value || '0');
+  let total = new BN(state.tokens.find((x: any) => x.address === currency.contract)?.value || '0');
+  if (action === 'slash') {
+    // add revoked tokens to total
+    const revoked = state.revokedTokens?.find((x: any) => x.address === currency.contract);
+    total = total.add(new BN(revoked?.value || '0'));
+  }
   const [summary] = await Invoice.getUncollectibleAmount({
     subscriptionId: subscription.id,
     currencyId: subscription.currency_id,
@@ -684,14 +722,12 @@ export async function getSubscriptionStakeReturnSetup(
   const subscriptionInitStakes = JSON.parse(state.data?.value || '{}');
   const initStake = subscriptionInitStakes[subscription.id];
   const uncollectibleAmountBN = new BN(summary?.[subscription.currency_id] || '0');
-  const lastInvoice = await Invoice.findByPk(subscription.latest_invoice_id);
   if (state.nonce) {
     const returnStake = total.sub(uncollectibleAmountBN);
     return {
       total: total.toString(),
       return_amount: returnStake.lt(new BN(0)) ? '0' : returnStake.toString(),
       sender: state.sender,
-      lastInvoice,
     };
   }
   const getReturnState = async () => {
@@ -709,7 +745,6 @@ export async function getSubscriptionStakeReturnSetup(
     total: initStake,
     return_amount: returnStake.lt(new BN(0)) ? '0' : returnStake.toString(),
     sender: state.sender,
-    lastInvoice,
   };
 }
 
@@ -729,14 +764,22 @@ export async function checkRemainingStake(
   const client = paymentMethod.getOcapClient();
   const { state } = await client.getStakeState({ address });
 
-  const staked = state.tokens.find((x: any) => x.address === paymentCurrency.contract);
-  const revoked = state.revokedTokens.find((x: any) => x.address === paymentCurrency.contract);
+  if (!state) {
+    logger.warn('getStakeState failed in checkRemainingStake', { address, paymentMethod, paymentCurrency });
+    return {
+      enough: false,
+      staked: '0',
+      revoked: '0',
+    };
+  }
+  const staked = state.tokens?.find((x: any) => x.address === paymentCurrency.contract);
+  const revoked = state.revokedTokens?.find((x: any) => x.address === paymentCurrency.contract);
   let total = new BN(0);
   if (staked) {
-    total = total.add(new BN(staked.value));
+    total = total.add(new BN(staked?.value || '0'));
   }
   if (revoked) {
-    total = total.add(new BN(revoked.value));
+    total = total.add(new BN(revoked?.value || '0'));
   }
   return {
     enough: total.gte(new BN(amount)),

package/api/src/queues/invoice.ts

@@ -165,6 +165,11 @@ export const handleInvoice = async (job: InvoiceJob) => {
       return;
     }
 
+    const existJob = await paymentQueue.get(paymentIntent.id);
+    if (existJob) {
+      logger.warn('Payment job already scheduled', { invoice: invoice.id, paymentIntent: paymentIntent.id });
+      return;
+    }
     logger.info('Payment job scheduled', { invoice: invoice.id, paymentIntent: paymentIntent.id });
     if (job.waitForPayment) {
       await paymentQueue.pushAndWait({

package/api/src/queues/subscription.ts

@@ -16,6 +16,7 @@ import {
   getSubscriptionCycleAmount,
   getSubscriptionCycleSetup,
   getSubscriptionStakeReturnSetup,
+  getSubscriptionStakeSlashSetup,
   shouldCancelSubscription,
 } from '../libs/subscription';
 import { ensureInvoiceAndItems } from '../routes/connect/shared';
@@ -538,7 +539,7 @@ const slashStakeOnCancel = async (subscription: Subscription) => {
     });
     return;
   }
-  const result = await getSubscriptionStakeReturnSetup(subscription, address, paymentMethod);
+  const result = await getSubscriptionStakeSlashSetup(subscription, address, paymentMethod);
   const stakeEnough = await checkRemainingStake(paymentMethod, currency, address, result.return_amount);
   if (!stakeEnough.enough) {
     logger.warn('Stake slashing aborted because no enough staking', {

package/api/src/routes/checkout-sessions.ts

@@ -46,7 +46,7 @@ import {
 import { CHECKOUT_SESSION_TTL, formatAmountPrecisionLimit, formatMetadata, getDataObjectFromQuery } from '../libs/util';
 import { invoiceQueue } from '../queues/invoice';
 import { paymentQueue } from '../queues/payment';
-import type { LineItem, TPriceExpanded, TProductExpanded } from '../store/models';
+import type { LineItem, SubscriptionData, TPriceExpanded, TProductExpanded } from '../store/models';
 import { CheckoutSession } from '../store/models/checkout-session';
 import { Customer } from '../store/models/customer';
 import { PaymentCurrency } from '../store/models/payment-currency';
@@ -378,10 +378,20 @@ export async function startCheckoutSessionFromPaymentLink(id: string, req: Reque
     raw.submit_type = link.submit_type;
     raw.currency_id = link.currency_id || req.currency.id;
     raw.payment_link_id = link.id;
-    raw.subscription_data = merge(link.subscription_data, getDataObjectFromQuery(req.query, 'subscription_data'), {
-      billing_threshold_amount: getBillingThreshold(link.subscription_data),
-      min_stake_amount: getMinStakeAmount(link.subscription_data),
-    });
+
+    // Settings priority: PaymentLink.subscription_data > req.query > environments
+    const protectedSettings: Partial<SubscriptionData> = {};
+    if (link.subscription_data?.min_stake_amount) {
+      protectedSettings.min_stake_amount = getMinStakeAmount(link.subscription_data);
+    }
+    if (link.subscription_data?.billing_threshold_amount) {
+      protectedSettings.billing_threshold_amount = getBillingThreshold(link.subscription_data);
+    }
+    raw.subscription_data = merge(
+      link.subscription_data,
+      getDataObjectFromQuery(req.query, 'subscription_data'),
+      protectedSettings
+    );
 
     if (link.after_completion?.hosted_confirmation?.custom_message) {
       raw.payment_intent_data = {

package/api/src/routes/connect/shared.ts

@@ -740,6 +740,7 @@ export async function getStakeTxClaim({
   const threshold = fromTokenToUnit(Math.max(billingThreshold, minStakeAmount), paymentCurrency.decimal);
   const staking = getSubscriptionStakeSetup(items, paymentCurrency.id, threshold.toString());
   const amount = staking.licensed.add(staking.metered).toString();
+  logger.info('getStakeTxClaim', { subscriptionId: subscription.id, billingThreshold, minStakeAmount, threshold: threshold.toString(), staking, amount: amount.toString() });
 
   if (paymentMethod.type === 'arcblock') {
     // create staking data

package/api/src/routes/invoices.ts

@@ -147,7 +147,7 @@ router.get('/', authMine, async (req, res) => {
 
               let stakeAmount = data[subscription.id];
               if (state.nonce) {
-                stakeAmount = state.tokens.find((x: any) => x.address === currency?.contract)?.value;
+                stakeAmount = state.tokens?.find((x: any) => x.address === currency?.contract)?.value;
                 // stakeAmount should not be zero if nonce exist
                 if (!Number(stakeAmount)) {
                   if (subscription.cancelation_details?.return_stake) {

package/api/src/routes/subscriptions.ts

@@ -21,11 +21,12 @@ import {
   getSubscriptionCreateSetup,
   getSubscriptionRefundSetup,
   getSubscriptionStakeReturnSetup,
+  getSubscriptionStakeSlashSetup,
   getUpcomingInvoiceAmount,
 } from '../libs/subscription';
 import { MAX_SUBSCRIPTION_ITEM_COUNT, formatMetadata } from '../libs/util';
 import { invoiceQueue } from '../queues/invoice';
-import { addSubscriptionJob, subscriptionQueue } from '../queues/subscription';
+import { addSubscriptionJob, slashStakeQueue, subscriptionQueue } from '../queues/subscription';
 import type { TLineItemExpanded } from '../store/models';
 import { Customer } from '../store/models/customer';
 import { Invoice } from '../store/models/invoice';
@@ -1235,9 +1236,6 @@ router.get('/:id/staking', authPortal, async (req, res) => {
     if (!subscription) {
       return res.status(404).json({ error: 'Subscription not found' });
     }
-    if (subscription.isActive() === false) {
-      return res.status(400).json({ error: 'Subscription is not active' });
-    }
 
     const paymentMethod = await PaymentMethod.findByPk(subscription.default_payment_method_id);
     if (paymentMethod?.type !== 'arcblock') {
@@ -1249,12 +1247,15 @@ router.get('/:id/staking', authPortal, async (req, res) => {
     if (!address) {
       return res.status(400).json({ error: 'Staking not found on subscription payment detail' });
     }
-    const result = await getSubscriptionStakeReturnSetup(subscription, address, paymentMethod);
+    const returnResult = await getSubscriptionStakeReturnSetup(subscription, address, paymentMethod);
+    const slashResult = await getSubscriptionStakeSlashSetup(subscription, address, paymentMethod);
     return res.json({
-      return_amount: result.return_amount,
-      total: result.total,
+      return_amount: returnResult.return_amount,
+      total: returnResult.total,
+      slash_amount: slashResult.return_amount,
     });
   } catch (err) {
+    logger.error('subscription staking simulation failed', { error: err });
     console.error(err);
     return res.status(400).json({ error: err.message });
   }
@@ -1608,4 +1609,43 @@ router.get('/:id/upcoming', authPortal, async (req, res) => {
   }
 });
 
+// slash stake
+router.put('/:id/slash-stake', auth, async (req, res) => {
+  const subscription = await Subscription.findByPk(req.params.id);
+  if (!subscription) {
+    return res.status(404).json({ error: 'Subscription not found' });
+  }
+
+  if (subscription.status !== 'canceled') {
+    return res.status(400).json({ error: `Subscription for ${subscription.id} not canceled` });
+  }
+
+  const paymentMethod = await PaymentMethod.findByPk(subscription.default_payment_method_id);
+  if (paymentMethod?.type !== 'arcblock') {
+    return res
+      .status(400)
+      .json({ error: `Stake slash not supported for subscription with payment method ${paymentMethod?.type}` });
+  }
+  const address = subscription?.payment_details?.arcblock?.staking?.address ?? undefined;
+  if (!address) {
+    return res.status(400).json({ error: 'Staking not found on subscription payment detail' });
+  }
+  try {
+    await subscription.update({
+      // @ts-ignore
+      cancelation_details: {
+        ...subscription.cancelation_details,
+        slash_stake: true,
+      },
+    });
+    const result = await slashStakeQueue.pushAndWait({
+      id: `slash-stake-${subscription.id}`,
+      job: { subscriptionId: subscription.id },
+    });
+    return res.json(result);
+  } catch (err) {
+    logger.error('subscription slash stake failed', { subscription: subscription.id, error: err.message });
+    return res.status(400).json({ error: err.message });
+  }
+});
 export default router;

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.14.34
+version: 1.14.36
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.14.34",
+  "version": "1.14.36",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -52,7 +52,7 @@
     "@arcblock/validator": "^1.18.132",
     "@blocklet/js-sdk": "1.16.30",
     "@blocklet/logger": "1.16.30",
-    "@blocklet/payment-react": "1.14.34",
+    "@blocklet/payment-react": "1.14.36",
     "@blocklet/sdk": "1.16.30",
     "@blocklet/ui-react": "^2.10.23",
     "@blocklet/uploader": "^0.1.27",
@@ -119,7 +119,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.30",
     "@arcblock/eslint-config-ts": "^0.3.2",
-    "@blocklet/payment-types": "1.14.34",
+    "@blocklet/payment-types": "1.14.36",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -161,5 +161,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "7e2c9a3dd52ccd6880ebbd08a953d93aec715dff"
+  "gitHead": "927e39d554524434d20f22a950eec503166ae529"
 }

package/src/components/actions.tsx

@@ -1,8 +1,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { stopEvent } from '@blocklet/payment-react';
 import { ExpandMoreOutlined, MoreHorizOutlined } from '@mui/icons-material';
-import { Button, IconButton, ListItemText, Menu, MenuItem } from '@mui/material';
-import React, { useState } from 'react';
+import { Button, IconButton, ListItemText, Menu, MenuItem, Skeleton } from '@mui/material';
+import React, { useRef, useState } from 'react';
 import type { LiteralUnion } from 'type-fest';
 
 type ActionItem = {
@@ -18,20 +18,34 @@ export type ActionsProps = {
   actions: ActionItem[];
   variant?: LiteralUnion<'compact' | 'normal', string>;
   sx?: any;
+  onOpenCallback?: Function;
 };
 
 Actions.defaultProps = {
   variant: 'compact',
   sx: {},
+  onOpenCallback: null,
 };
 
 export default function Actions(props: ActionsProps) {
   const { t } = useLocaleContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
+  const anchorRef = useRef(null);
+  const [openLoading, setOpenLoading] = useState(false);
 
   const onOpen = (e: React.SyntheticEvent<any>) => {
     stopEvent(e);
+    anchorRef.current = e.currentTarget;
+    if (props.onOpenCallback && typeof props.onOpenCallback === 'function') {
+      const result = props.onOpenCallback();
+      if (result instanceof Promise) {
+        setOpenLoading(true);
+        result.finally(() => {
+          setOpenLoading(false);
+        });
+      }
+    }
     setAnchorEl(e.currentTarget);
   };
 
@@ -62,16 +76,22 @@ export default function Actions(props: ActionsProps) {
         onClose={onClose}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}>
-        {props.actions.map((action) => (
-          <MenuItem
-            key={action.label}
-            divider={!!action.divider}
-            dense={!!action.dense}
-            disabled={!!action.disabled}
-            onClick={(e) => onClose(e, action.handler)}>
-            <ListItemText primary={action.label} primaryTypographyProps={{ color: action.color }} />
-          </MenuItem>
-        ))}
+        {props.actions.map((action) =>
+          openLoading ? (
+            <MenuItem key={action.label} dense disabled>
+              <ListItemText primary={<Skeleton />} primaryTypographyProps={{ width: '56px' }} />
+            </MenuItem>
+          ) : (
+            <MenuItem
+              key={action.label}
+              divider={!!action.divider}
+              dense={!!action.dense}
+              disabled={!!action.disabled}
+              onClick={(e) => onClose(e, action.handler)}>
+              <ListItemText primary={action.label} primaryTypographyProps={{ color: action.color }} />
+            </MenuItem>
+          )
+        )}
       </Menu>
     </>
   );

package/src/components/subscription/actions/cancel.tsx

@@ -10,7 +10,7 @@ const fetchData = (id: string, time: string): Promise<{ total: string; unused: s
   return api.get(`/api/subscriptions/${id}/proration?time=${encodeURIComponent(time)}`).then((res: any) => res.data);
 };
 
-const fetchStakingData = (id: string, time: string): Promise<{ return_amount: string }> => {
+const fetchStakingData = (id: string, time: string): Promise<{ return_amount: string; slash_amount: string }> => {
   return api.get(`/api/subscriptions/${id}/staking?time=${encodeURIComponent(time)}`).then((res: any) => res.data);
 };
 
@@ -153,7 +153,7 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
                 onClick={() => !(loading || !staking) && setValue('cancel.staking', 'slash')}
                 control={<Radio checked={stakingType === 'slash'} />}
                 label={t('admin.subscription.cancel.staking.slash', {
-                  unused: formatAmount(staking?.return_amount || '0', decimal),
+                  unused: formatAmount(staking?.slash_amount || '0', decimal),
                   symbol,
                 })}
               />

package/src/components/subscription/actions/index.tsx

@@ -1,12 +1,13 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatBNStr, formatError } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-import { useSetState } from 'ahooks';
+import { useRequest, useSetState } from 'ahooks';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import type { LiteralUnion } from 'type-fest';
 
+import { useMemo } from 'react';
 import Actions from '../../actions';
 import ClickBoundary from '../../click-boundary';
 import SubscriptionCancelForm from './cancel';
@@ -22,6 +23,10 @@ SubscriptionActionsInner.defaultProps = {
   variant: 'compact',
 };
 
+const fetchStakingData = (id: string, time: string): Promise<{ return_amount: string; slash_amount: string }> => {
+  return api.get(`/api/subscriptions/${id}/staking?time=${encodeURIComponent(time)}`).then((res: any) => res.data);
+};
+
 function SubscriptionActionsInner({ data, variant, onChange }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
@@ -31,6 +36,21 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
     loading: false,
   });
 
+  const {
+    data: stakeResult = {
+      return_amount: '0',
+      total: '0',
+      slash_amount: '0',
+    },
+    runAsync: fetchStakeResultAsync,
+  } = useRequest(() => fetchStakingData(data.id, ''), {
+    manual: true,
+  });
+
+  const stakeValue = useMemo(() => {
+    return formatBNStr(stakeResult?.slash_amount, data?.paymentCurrency?.decimal);
+  }, [stakeResult]);
+
   const createHandler = (action: string) => {
     return async () => {
       const values = getValues();
@@ -79,6 +99,8 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
     color: 'primary',
   };
 
+  const showSlashStake = data.status === 'canceled' && Number(stakeValue) > 0;
+
   const actions = [
     {
       label: t('admin.subscription.update'),
@@ -92,8 +114,20 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
       handler: () => setState({ action: 'cancel' }),
       disabled: data.status === 'canceled',
       color: 'error',
-      divider: true,
+      divider: !showSlashStake,
     },
+    ...(showSlashStake
+      ? [
+          {
+            label: t('admin.subscription.cancel.staking.slashTitle'),
+            handler: () => {
+              setState({ action: 'slashStake' });
+            },
+            color: 'error',
+            divider: true,
+          },
+        ]
+      : []),
     {
       label: t('admin.customer.view'),
       handler: () => navigate(`/admin/customers/${data.customer_id}`),
@@ -111,7 +145,7 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
 
   return (
     <ClickBoundary>
-      <Actions variant={variant} actions={actions} />
+      <Actions variant={variant} actions={actions} onOpenCallback={fetchStakeResultAsync} />
       {state.action === 'cancel' && (
         <ConfirmDialog
           onConfirm={createHandler('cancel')}
@@ -139,6 +173,18 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
           loading={state.loading}
         />
       )}
+      {state.action === 'slashStake' && (
+        <ConfirmDialog
+          onConfirm={createHandler('slash-stake')}
+          onCancel={handleCancel}
+          title={t('admin.subscription.cancel.staking.slashTitle')}
+          message={t('admin.subscription.cancel.staking.slashTip', {
+            unused: stakeValue,
+            symbol: data.paymentCurrency?.symbol,
+          })}
+          loading={state.loading}
+        />
+      )}
     </ClickBoundary>
   );
 }

package/src/locales/en.tsx

@@ -465,6 +465,9 @@ export default flat({
           none: 'No return or slash',
           proration: 'Return Remaining Stake {unused}{symbol}',
           slash: 'Slash Remaining Stake {unused}{symbol}',
+          slashTip:
+            'The remaining stake of this subscription {unused}{symbol} will be slashed, please confirm to continue?',
+          slashTitle: 'Slash stake',
         },
       },
       pause: {

package/src/locales/zh.tsx

@@ -456,6 +456,8 @@ export default flat({
           none: '不退还 / 罚没质押',
           proration: '退还剩余部分 {unused}{symbol}',
           slash: '罚没剩余部分 {unused}{symbol}',
+          slashTip: '该订阅剩余的质押部分 {unused}{symbol} 将被罚没, 请确认是否继续？',
+          slashTitle: '罚没质押',
         },
       },
       pause: {

package/src/pages/admin/customers/customers/index.tsx

@@ -64,7 +64,7 @@ export default function CustomersList() {
                   variant="square"
                   sx={{ borderRadius: 'var(--radius-m, 8px)' }}
                 />
-                <Typography>{item.name}</Typography>
+                <Typography sx={{ wordBreak: 'break-all' }}>{item.name}</Typography>
               </Stack>
             </Link>
           );