@blocklet/payment-react 1.13.239 → 1.13.241

package/src/contexts/payment.tsx

@@ -4,8 +4,8 @@ import { useLocalStorageState, useRequest } from 'ahooks';
 import type { Axios } from 'axios';
 import { createContext, useContext } from 'react';
 
-import api from '../api';
-import { getPrefix } from '../util';
+import api from '../libs/api';
+import { getPrefix } from '../libs/util';
 
 const prefix = getPrefix();
 

package/src/history/invoice/list.tsx

@@ -1,15 +1,28 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
 import type { Paginated, TInvoiceExpanded, TSubscription } from '@blocklet/payment-types';
 import { OpenInNewOutlined } from '@mui/icons-material';
 import { Box, Button, CircularProgress, Hidden, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
-import { useInfiniteScroll } from 'ahooks';
+import { useInfiniteScroll, useSetState } from 'ahooks';
+import { useEffect } from 'react';
 import { joinURL } from 'ufo';
 
-import api from '../../api';
 import Status from '../../components/status';
-import { formatBNStr, formatToDate, formatToDatetime, getInvoiceStatusColor, getPrefix, getTxLink } from '../../util';
+import { usePaymentContext } from '../../contexts/payment';
+import { useSubscription } from '../../hooks/subscription';
+import api from '../../libs/api';
+import {
+  formatBNStr,
+  formatError,
+  formatToDate,
+  formatToDatetime,
+  getInvoiceStatusColor,
+  getPrefix,
+  getTxLink,
+} from '../../libs/util';
 
 type Result = Paginated<TInvoiceExpanded> & { subscription: TSubscription };
 
@@ -50,6 +63,7 @@ const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
   if (invoice.id.startsWith('in_')) {
     return {
       external: false,
+      connect: invoice.status === 'uncollectible',
       url: joinURL(
         window.location.origin,
         getPrefix(),
@@ -60,6 +74,7 @@ const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
 
   return {
     external: true,
+    connect: false,
     url: getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link,
   };
 };
@@ -74,10 +89,14 @@ export default function CustomerInvoiceList({
   target,
   action,
 }: Props) {
-  const { t, locale } = useLocaleContext();
   const size = pageSize || 10;
 
-  const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Result>(
+  const subscription = useSubscription('events');
+  const { t, locale } = useLocaleContext();
+  const { connect } = usePaymentContext();
+  const [state, setState] = useSetState({ paying: '' });
+
+  const { data, loadMore, loadingMore, loading, reloadAsync } = useInfiniteScroll<Result>(
     (d) => {
       const page = d ? Math.ceil(d.list.length / size) + 1 : 1;
       return fetchData({
@@ -92,10 +111,52 @@ export default function CustomerInvoiceList({
       });
     },
     {
-      reloadDeps: [customer_id, subscription_id, status],
+      reloadDeps: [customer_id, subscription_id, status, include_staking],
     }
   );
 
+  // Listen to invoice.paid event and refresh data
+  useEffect(() => {
+    if (subscription && customer_id) {
+      subscription.on('invoice.paid', async ({ response }: { response: TInvoiceExpanded }) => {
+        if (response.customer_id === customer_id) {
+          await reloadAsync();
+        }
+      });
+    }
+  }, [subscription]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onPay = (invoiceId: string) => {
+    if (state.paying) {
+      return;
+    }
+
+    setState({ paying: invoiceId });
+    connect.open({
+      action: 'collect',
+      messages: {
+        scan: '',
+        title: t(`payment.customer.invoice.${action || 'pay'}`),
+        success: t(`payment.customer.invoice.${action || 'pay'}Success`),
+        error: t(`payment.customer.invoice.${action || 'pay'}Error`),
+        confirm: '',
+      } as any,
+      extraParams: { invoiceId, action },
+      onSuccess: () => {
+        connect.close();
+        setState({ paying: '' });
+      },
+      onClose: () => {
+        connect.close();
+        setState({ paying: '' });
+      },
+      onError: (err: any) => {
+        setState({ paying: '' });
+        Toast.error(formatError(err));
+      },
+    });
+  };
+
   if (loading || !data) {
     return <CircularProgress />;
   }
@@ -169,16 +230,22 @@ export default function CustomerInvoiceList({
                 )}
                 <Box flex={1} textAlign="right">
                   {action ? (
-                    <Button
-                      component="a"
-                      variant="contained"
-                      color="primary"
-                      size="small"
-                      href={link.url}
-                      target={link.external ? '_blank' : target}
-                      rel="noreferrer">
-                      {t('payment.customer.invoice.pay')}
-                    </Button>
+                    link.connect ? (
+                      <Button variant="contained" color="primary" size="small" onClick={() => onPay(invoice.id)}>
+                        {t('payment.customer.invoice.pay')}
+                      </Button>
+                    ) : (
+                      <Button
+                        component="a"
+                        variant="contained"
+                        color="primary"
+                        size="small"
+                        href={link.url}
+                        target={link.external ? '_blank' : target}
+                        rel="noreferrer">
+                        {t('payment.customer.invoice.pay')}
+                      </Button>
+                    )
                   ) : (
                     <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
                   )}
@@ -222,9 +289,6 @@ const Root = styled(Stack)`
     .invoice-description {
       display: none !important;
     }
-    svg[data-testid='OpenInNewOutlinedIcon'] {
-      display: none !important;
-    }
   }
 
   a.MuiButton-root {

package/src/history/mini-invoice/list.tsx

@@ -15,10 +15,12 @@ import {
   Typography,
 } from '@mui/material';
 import { useRequest } from 'ahooks';
-import { joinURL } from 'ufo';
+import { useMemo } from 'react';
+import { joinURL, withQuery } from 'ufo';
 
-import api from '../../api';
 import Status from '../../components/status';
+import api from '../../libs/api';
+import { getDidConnectQueryParams } from '../../libs/did-connect';
 import {
   formatBNStr,
   formatError,
@@ -28,7 +30,7 @@ import {
   getInvoiceStatusColor,
   getPrefix,
   getSubscriptionStatusColor,
-} from '../../util';
+} from '../../libs/util';
 
 const fetchInvoiceData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
   const search = new URLSearchParams();
@@ -66,6 +68,19 @@ export default function MiniInvoiceList() {
     })
   );
 
+  const subscriptionPageUrl: string = useMemo(() => {
+    if (!subscription) {
+      return '#';
+    }
+
+    const pageUrl: string = joinURL(window.location.origin, getPrefix(), `/customer/subscription/${subscription.id}`);
+
+    return withQuery(pageUrl, {
+      source: 'embed',
+      ...getDidConnectQueryParams({ forceConnected: subscription.customer.did }),
+    });
+  }, [subscription]);
+
   if (error) {
     return (
       <Position>
@@ -192,11 +207,7 @@ export default function MiniInvoiceList() {
             variant="contained"
             sx={{ color: '#fff!important', width: subscription.service_actions?.length ? 'auto' : '100%' }}
             target="_blank"
-            href={joinURL(
-              window.location.origin,
-              getPrefix(),
-              `/customer/subscription/${subscription.id}?source=embed`
-            )}>
+            href={subscriptionPageUrl}>
             {t('payment.customer.subscriptions.view')}
           </Button>
         </Stack>

package/src/history/payment/list.tsx

@@ -4,10 +4,10 @@ import type { Paginated, TPaymentIntentExpanded } from '@blocklet/payment-types'
 import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { useInfiniteScroll } from 'ahooks';
 
-import api from '../../api';
 import TxLink from '../../components/blockchain/tx';
 import Status from '../../components/status';
-import { formatBNStr, formatToDate, getPaymentIntentStatusColor } from '../../util';
+import api from '../../libs/api';
+import { formatBNStr, formatToDate, getPaymentIntentStatusColor } from '../../libs/util';
 
 const groupByDate = (items: TPaymentIntentExpanded[]) => {
   const grouped: { [key: string]: TPaymentIntentExpanded[] } = {};

package/src/hooks/subscription.ts

@@ -0,0 +1,68 @@
+import { WsClient } from '@arcblock/ws';
+import get from 'lodash/get';
+import { useEffect, useRef } from 'react';
+
+const RELAY_SOCKET_PREFIX = '/.well-known/service/relay';
+const getAppId = () => get(window, 'blocklet.appPid') || get(window, 'blocklet.appId') || '';
+const getRelayChannel = (token: string) => `relay:${getAppId()}:${token}`;
+const getRelayProtocol = () => (window.location.protocol === 'https:' ? 'wss:' : 'ws:');
+const getSocketHost = () => new URL(window.location.href).host;
+
+/**
+ * @description channel 的值不能包含分隔符 / . : 等，否则前端接受不到事件
+ * @export
+ * @param {string} channel
+ * @return {*}
+ */
+export function useSubscription(channel: string) {
+  const socket = useRef<typeof WsClient>(null);
+  const subscription = useRef<any>(null);
+
+  useEffect(() => {
+    if (getAppId()) {
+      const needReconnect = !socket.current || socket.current.isConnected() === false;
+      if (needReconnect) {
+        socket.current = new WsClient(`${getRelayProtocol()}//${getSocketHost()}${RELAY_SOCKET_PREFIX}`, {
+          longpollerTimeout: 5000, // connection timeout
+          heartbeatIntervalMs: 30 * 1000,
+        });
+        socket.current.connect();
+      }
+    }
+
+    return () => {
+      if (socket.current) {
+        socket.current.disconnect();
+        socket.current = null;
+      }
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (channel) {
+      let needSubscription = false;
+      if (subscription.current) {
+        if (subscription.current.channel !== channel) {
+          socket.current?.unsubscribe(getRelayChannel(subscription.current.channel));
+          needSubscription = true;
+        }
+      } else {
+        needSubscription = true;
+      }
+
+      if (needSubscription) {
+        subscription.current = socket.current.subscribe(getRelayChannel(channel));
+        subscription.current.channel = channel;
+      }
+    }
+
+    return () => {
+      if (subscription.current) {
+        socket.current?.unsubscribe(getRelayChannel(subscription.current.channel));
+        subscription.current = null;
+      }
+    };
+  }, [channel]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return subscription.current;
+}

package/src/index.ts

@@ -1,4 +1,3 @@
-import api from './api';
 import CheckoutDonate from './checkout/donate';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
@@ -11,10 +10,11 @@ import PricingTable from './components/pricing-table';
 import SafeGuard from './components/safe-guard';
 import Status from './components/status';
 import Switch from './components/switch-button';
-import dayjs from './dayjs';
 import CustomerInvoiceList from './history/invoice/list';
 import MiniInvoiceList from './history/mini-invoice/list';
 import CustomerPaymentList from './history/payment/list';
+import api from './libs/api';
+import dayjs from './libs/dayjs';
 import Amount from './payment/amount';
 import AddressForm from './payment/form/address';
 import CurrencySelector from './payment/form/currency';
@@ -24,8 +24,9 @@ import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
 
-export * from './util';
+export * from './libs/util';
 export * from './contexts/payment';
+export * from './hooks/subscription';
 
 export { translations, createTranslator } from './locales';
 

package/src/{api.ts → libs/api.ts}

@@ -12,9 +12,14 @@ api.interceptors.request.use(
     // 'https://storage.staging.abtnet.io/app/payment-kit/.well-known/service'
     config.baseURL = prefix || '';
 
-    const livemode = localStorage.getItem('livemode');
     const locale = getLocale(window.blocklet?.languages);
-    config.params = { ...(config.params || {}), livemode: isNull(livemode) ? true : JSON.parse(livemode), locale };
+    const query = new URLSearchParams(config.url?.split('?').pop());
+    config.params = { ...(config.params || {}), locale };
+    // If we do not have livemode neither in config nor in query params, we will use the value from localStorage
+    if (typeof config.params.livemode === 'undefined' && query.has('livemode') === false) {
+      const livemode = localStorage.getItem('livemode');
+      config.params.livemode = isNull(livemode) ? true : JSON.parse(livemode);
+    }
 
     return config;
   },

package/src/libs/did-connect.ts

@@ -0,0 +1,20 @@
+export interface DIDConnectCustomQuery {
+  forceConnected: string; // 填写用户的 DID
+  sourceAppPid?: string; // 应用程序 PID
+  switchBehavior?: 'auto' | 'disabled' | 'required'; // auto 代表引导切换，disabled 代表不提示，required 代表强制要求切换
+  showClose?: boolean; // 是否显示关闭按钮
+}
+
+function getDidConnectQueryParams(params: DIDConnectCustomQuery) {
+  const didConnectQueryParams: DIDConnectCustomQuery = {
+    switchBehavior: 'auto',
+    showClose: false,
+    ...params,
+  };
+
+  return {
+    '__did-connect__': Buffer.from(JSON.stringify(didConnectQueryParams), 'utf8').toString('base64'),
+  };
+}
+
+export { getDidConnectQueryParams };

package/src/{util.ts → libs/util.ts}

@@ -13,6 +13,7 @@ import type {
   TSubscriptionExpanded,
   TSubscriptionItemExpanded,
 } from '@blocklet/payment-types';
+import type { TComponent } from '@blocklet/sdk/lib/config';
 import { BN, fromUnitToToken } from '@ocap/util';
 import omit from 'lodash/omit';
 import trimEnd from 'lodash/trimEnd';
@@ -20,8 +21,8 @@ import numbro from 'numbro';
 import { defaultCountries } from 'react-international-phone';
 import { joinURL } from 'ufo';
 
+import { t } from '../locales';
 import dayjs from './dayjs';
-import { t } from './locales';
 
 export const PAYMENT_KIT_DID = 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk';
 
@@ -29,12 +30,12 @@ export const isPaymentKitMounted = () => {
   return (window.blocklet?.componentMountPoints || []).some((x: any) => x.did === PAYMENT_KIT_DID);
 };
 
-export const getPrefix = () => {
+export const getPrefix = (): string => {
   const componentId = (window?.blocklet?.componentId || '').split('/').pop();
   if (componentId === PAYMENT_KIT_DID) {
     return window.blocklet?.prefix;
   }
-  const component = (window.blocklet?.componentMountPoints || []).find((x: any) => x.did === PAYMENT_KIT_DID);
+  const component = (window.blocklet?.componentMountPoints || []).find((x: TComponent) => x.did === PAYMENT_KIT_DID);
   if (component) {
     return component.mountPoint;
   }

package/src/locales/en.tsx

@@ -274,6 +274,7 @@ export default flat({
         title: 'Manage subscriptions',
         view: 'View Subscription',
         current: 'Current subscription',
+        viewAll: 'View all',
         empty: 'There are no subscriptions here',
         changePayment: 'Change payment method',
       },

package/src/locales/zh.tsx

@@ -266,6 +266,7 @@ export default flat({
         title: '订阅管理',
         view: '管理订阅',
         current: '当前订阅',
+        viewAll: '查看所有',
         empty: '没有任何订阅',
         changePayment: '切换支付方式',
       },

package/src/payment/form/index.tsx

@@ -3,7 +3,13 @@ import 'react-international-phone/style.css';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { useTheme } from '@arcblock/ux/lib/Theme';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import type {
+  TCheckoutSession,
+  TCustomer,
+  TInvoice,
+  TPaymentIntent,
+  TPaymentMethodExpanded,
+} from '@blocklet/payment-types';
 import { LoadingButton } from '@mui/lab';
 import { Fade, InputAdornment, Stack, Typography } from '@mui/material';
 import { useCreation, useMemoizedFn, useSetState, useSize } from 'ahooks';
@@ -15,12 +21,13 @@ import { joinURL } from 'ufo';
 import { dispatch } from 'use-bus';
 import isEmail from 'validator/es/lib/isEmail';
 
-import api from '../../api';
 import ConfirmDialog from '../../components/confirm';
 import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
+import { useSubscription } from '../../hooks/subscription';
+import api from '../../libs/api';
+import { flattenPaymentMethods, formatError, getPrefix, getStatementDescriptor } from '../../libs/util';
 import { CheckoutCallbacks, CheckoutContext } from '../../types';
-import { flattenPaymentMethods, formatError, getPrefix, getStatementDescriptor } from '../../util';
 import UserButtons from './addon';
 import AddressForm from './address';
 import CurrencySelector from './currency';
@@ -85,6 +92,7 @@ export default function PaymentForm({
   const theme = useTheme();
   const { t } = useLocaleContext();
   const { session, connect } = usePaymentContext();
+  const subscription = useSubscription('events');
   const { control, getValues, setValue, handleSubmit } = useFormContext();
   const [state, setState] = useSetState<{
     submitting: boolean;
@@ -113,6 +121,25 @@ export default function PaymentForm({
   const currencies = flattenPaymentMethods(paymentMethods);
   const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(0);
 
+  const onCheckoutComplete = useMemoizedFn(async ({ response }: { response: TCheckoutSession }) => {
+    if (response.id === checkoutSession.id && state.paid === false) {
+      await handleConnected();
+    }
+  });
+
+  const onInvoicePaid = useMemoizedFn(async ({ response }: { response: TInvoice }) => {
+    if (response.customer_id === customer?.id && state.customerLimited) {
+      await onAction();
+    }
+  });
+
+  useEffect(() => {
+    if (subscription) {
+      subscription.on('checkout.session.completed', onCheckoutComplete);
+      subscription.on('invoice.paid', onInvoicePaid);
+    }
+  }, [subscription]); // eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(() => {
     if (session?.user) {
       const values = getValues();
@@ -177,8 +204,10 @@ export default function PaymentForm({
   const handleConnected = async () => {
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
-      setState({ paid: true, paying: false });
-      onPaid(result);
+      if (state.paid === false) {
+        setState({ paid: true, paying: false });
+        onPaid(result);
+      }
     } catch (err) {
       Toast.error(formatError(err));
     } finally {
@@ -230,6 +259,7 @@ export default function PaymentForm({
         stripeContext: result.data.stripeContext,
         customer: result.data.customer,
         submitting: false,
+        customerLimited: false,
       });
 
       if (['arcblock', 'ethereum'].includes(method.type)) {
@@ -440,6 +470,7 @@ export default function PaymentForm({
           confirm={t('payment.customer.pastDue.alert.confirm')}
           title={t('payment.customer.pastDue.alert.title')}
           message={t('payment.customer.pastDue.alert.description')}
+          color="primary"
         />
       )}
     </>

package/src/payment/form/phone.tsx

@@ -6,7 +6,7 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import { CountryIso2, FlagEmoji, defaultCountries, parseCountry, usePhoneInput } from 'react-international-phone';
 
 import FormInput from '../../components/input';
-import { isValidCountry } from '../../util';
+import { isValidCountry } from '../../libs/util';
 
 export default function PhoneInput({ ...props }) {
   const countryFieldName = props.countryFieldName || 'billing_address.country';

package/src/payment/header.tsx

@@ -4,7 +4,7 @@ import { Avatar, Stack, Typography } from '@mui/material';
 import { useCreation, useLocalStorageState, useSize } from 'ahooks';
 
 import Livemode from '../components/livemode';
-import { getStatementDescriptor } from '../util';
+import { getStatementDescriptor } from '../libs/util';
 import UserButtons from './form/addon';
 
 type Props = {

package/src/payment/index.tsx

@@ -17,10 +17,10 @@ import { useEffect, useState } from 'react';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import type { LiteralUnion } from 'type-fest';
 
-import api from '../api';
 import { usePaymentContext } from '../contexts/payment';
+import api from '../libs/api';
+import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from '../libs/util';
 import { CheckoutCallbacks, CheckoutContext, CheckoutFormData } from '../types';
-import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from '../util';
 import PaymentError from './error';
 import CheckoutFooter from './footer';
 import PaymentForm from './form';
@@ -387,6 +387,13 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
     margin-top: ${(props) => (props.mode === 'standalone' ? '64px' : '0')};
   }
   .cko-product-summary {
+    width: 100%;
+  }
+  .cko-ellipsis {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .cko-payment {

package/src/payment/product-card.tsx

@@ -14,7 +14,7 @@ type Props = {
 export default function ProductCard({ size, variant, name, logo, description, extra }: Props) {
   const s = { width: size, height: size };
   return (
-    <Stack direction="row" alignItems="flex-start" spacing={1} flex={2}>
+    <Stack direction="row" alignItems="flex-start" spacing={1} flex={2} sx={{ width: '100%' }}>
       {logo ? (
         // @ts-ignore
         <Avatar src={logo} alt={name} variant={variant} sx={s} />
@@ -24,13 +24,23 @@ export default function ProductCard({ size, variant, name, logo, description, ex
           {name.slice(0, 1)}
         </Avatar>
       )}
-      <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-        <Typography variant="body1" sx={{ fontWeight: 500, mb: 0.5, lineHeight: 1 }} color="text.primary">
+      <Stack
+        direction="column"
+        alignItems="flex-start"
+        justifyContent="space-around"
+        sx={{ flexShrink: 1, overflow: 'hidden' }}>
+        <Typography
+          className="cko-ellipsis"
+          variant="body1"
+          title={name}
+          sx={{ fontWeight: 500, mb: 0.5, lineHeight: 1 }}
+          color="text.primary">
           {name}
         </Typography>
         {description && (
           <Typography
             variant="body1"
+            title={description}
             sx={{ fontSize: '0.85rem', mb: 0.5, lineHeight: 1, textAlign: 'left' }}
             color="text.secondary">
             {description}

package/src/payment/product-item.tsx

@@ -4,7 +4,7 @@ import { Stack, Typography } from '@mui/material';
 
 import Status from '../components/status';
 import Switch from '../components/switch-button';
-import { formatLineItemPricing, formatPrice, formatRecurring, formatUpsellSaving } from '../util';
+import { formatLineItemPricing, formatPrice, formatRecurring, formatUpsellSaving } from '../libs/util';
 import ProductCard from './product-card';
 
 type Props = {
@@ -41,7 +41,12 @@ export default function ProductItem({
   return (
     <Stack direction="column" alignItems="flex-start" spacing={1} sx={{ width: '100%' }}>
       <Stack direction="column" alignItems="flex-end" sx={{ width: '100%' }}>
-        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
+        <Stack
+          direction="row"
+          alignItems="flex-start"
+          spacing={0.5}
+          justifyContent="space-between"
+          sx={{ width: '100%' }}>
           <ProductCard
             logo={item.price.product?.images[0]}
             name={item.price.product?.name}

package/src/payment/summary.tsx

@@ -8,9 +8,9 @@ import { useRequest, useSetState } from 'ahooks';
 import noop from 'lodash/noop';
 import useBus from 'use-bus';
 
-import api from '../api';
 import Status from '../components/status';
-import { formatAmount, formatCheckoutHeadlines, getPriceUintAmountByCurrency } from '../util';
+import api from '../libs/api';
+import { formatAmount, formatCheckoutHeadlines, getPriceUintAmountByCurrency } from '../libs/util';
 import PaymentAmount from './amount';
 import ProductDonation from './product-donation';
 import ProductItem from './product-item';
@@ -177,7 +177,11 @@ export default function PaymentSummary({
     <Fade in>
       <Stack className="cko-product" direction="column" {...rest}>
         <Stack className="cko-product-summary" direction="column" alignItems="flex-start" sx={{ mb: { xs: 1, sm: 3 } }}>
-          <Typography component="div" sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
+          <Typography
+            className="cko-ellipsis"
+            component="div"
+            title={action || headlines.action}
+            sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
             {action || headlines.action}
           </Typography>
           <PaymentAmount amount={headlines.amount} />

package/src/types/shims.d.ts

@@ -13,6 +13,4 @@ declare module '@blocklet/*';
 
 declare module 'pretty-ms-i18n';
 
-declare interface Window {
-  blocklet: any;
-}
+declare var blocklet: import('@blocklet/sdk').WindowBlocklet;