@blocklet/payment-react 1.14.27 → 1.14.29

package/src/components/pricing-table.tsx

@@ -23,6 +23,7 @@ import { useSetState } from 'ahooks';
 import { useEffect, useMemo, useState } from 'react';
 
 import { BN } from '@ocap/util';
+import { isEmpty } from 'lodash';
 import { usePaymentContext } from '../contexts/payment';
 import {
   formatError,
@@ -32,6 +33,16 @@ import {
   getPriceUintAmountByCurrency,
 } from '../libs/util';
 import Amount from '../payment/amount';
+import { useMobile } from '../hooks/mobile';
+
+type SortOrder = { [key: string]: number };
+
+const sortOrder: SortOrder = {
+  year: 1,
+  month: 2,
+  day: 3,
+  hour: 4,
+};
 
 const groupItemsByRecurring = (items: TPricingTableItem[], currency: { id: string; symbol: string }) => {
   const grouped: { [key: string]: TPricingTableItem[] } = {};
@@ -39,7 +50,7 @@ const groupItemsByRecurring = (items: TPricingTableItem[], currency: { id: strin
 
   items.forEach((x) => {
     const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join('-');
-    if (x.price.currency_options.find((c: PriceCurrency) => c.currency_id === currency.id)) {
+    if (x.price.currency_options?.find((c: PriceCurrency) => c.currency_id === currency.id)) {
       recurring[key] = x.price.recurring as PriceRecurring;
     }
     if (!grouped[key]) {
@@ -69,11 +80,30 @@ PricingTable.defaultProps = {
 
 export default function PricingTable({ table, alignItems, interval, mode, onSelect }: Props) {
   const { t, locale } = useLocaleContext();
+  const { isMobile } = useMobile();
   const {
     settings: { paymentMethods = [] },
   } = usePaymentContext();
   const [currency, setCurrency] = useState(table.currency || {});
   const { recurring, grouped } = useMemo(() => groupItemsByRecurring(table.items, currency), [table.items, currency]);
+  const recurringKeysList = useMemo(() => {
+    if (isEmpty(recurring)) {
+      return [];
+    }
+    return Object.keys(recurring).sort((a, b) => {
+      const [aType, aValue] = a.split('-');
+      const [bType, bValue] = b.split('-');
+      if (sortOrder[aType] !== sortOrder[bType]) {
+        return sortOrder[aType] - sortOrder[bType];
+      }
+      if (aValue && bValue) {
+        // @ts-ignore
+        return bValue - aValue;
+      }
+      // @ts-ignore
+      return b - a;
+    });
+  }, [recurring]);
   const [state, setState] = useSetState({ interval });
   const currencyMap = useMemo(() => {
     if (!paymentMethods || paymentMethods.length === 0) {
@@ -137,12 +167,12 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       gap: 20px;
     }
     @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
-      .price-table-item {
-        width: 90% !important;
-      }
-      .btn-row {
-        padding: 0 20px;
-      }
+      // .price-table-item {
+      //   width: 90% !important;
+      // }
+      // .btn-row {
+      //   padding: 0 20px;
+      // }
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
       .price-table-wrap:has(> div:nth-child(1)) {
@@ -167,45 +197,63 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
             sm: mode === 'select' ? 3 : 5,
           },
         }}>
-        <div className="btn-row">
-          {Object.keys(recurring).length > 0 && (
-            <ToggleButtonGroup
-              size="small"
-              value={state.interval}
-              sx={{
-                padding: '4px',
-                borderRadius: '36px',
-                height: '40px',
-                boxSizing: 'border-box',
-                backgroundColor: '#f1f3f5',
-                border: 0,
-              }}
-              onChange={(_, value) => {
-                if (value !== null) {
-                  setState({ interval: value });
-                }
-              }}
-              exclusive>
-              {Object.keys(recurring).map((x) => (
-                <ToggleButton
+        <Stack className="btn-row" flexDirection="row">
+          {recurringKeysList.length > 0 && (
+            <Box>
+              {isMobile && recurringKeysList.length > 1 ? (
+                <Select
+                  value={state.interval}
+                  onChange={(e) => setState({ interval: e.target.value })}
                   size="small"
-                  key={x}
-                  value={x}
+                  sx={{ m: 1 }}>
+                  {recurringKeysList.map((x) => (
+                    <MenuItem key={x} value={x}>
+                      <Typography color={x === state.interval ? 'text.primary' : 'text.secondary'}>
+                        {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
+                      </Typography>
+                    </MenuItem>
+                  ))}
+                </Select>
+              ) : (
+                <ToggleButtonGroup
+                  size="small"
+                  value={state.interval}
                   sx={{
-                    textTransform: 'capitalize',
-                    padding: '5px 12px',
-                    fontSize: '13px',
-                    backgroundColor: x === state.interval ? '#fff !important' : '#f1f3f5 !important',
-                    border: '0px',
-                    '&.Mui-selected': {
-                      borderRadius: '9999px !important',
-                      border: '1px solid #e5e7eb',
-                    },
-                  }}>
-                  {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
-                </ToggleButton>
-              ))}
-            </ToggleButtonGroup>
+                    padding: '4px',
+                    borderRadius: '36px',
+                    height: '40px',
+                    boxSizing: 'border-box',
+                    backgroundColor: '#f1f3f5',
+                    border: 0,
+                  }}
+                  onChange={(_, value) => {
+                    if (value !== null) {
+                      setState({ interval: value });
+                    }
+                  }}
+                  exclusive>
+                  {recurringKeysList.map((x) => (
+                    <ToggleButton
+                      size="small"
+                      key={x}
+                      value={x}
+                      sx={{
+                        textTransform: 'capitalize',
+                        padding: '5px 12px',
+                        fontSize: '13px',
+                        backgroundColor: x === state.interval ? '#fff !important' : '#f1f3f5 !important',
+                        border: '0px',
+                        '&.Mui-selected': {
+                          borderRadius: '9999px !important',
+                          border: '1px solid #e5e7eb',
+                        },
+                      }}>
+                      {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
+                    </ToggleButton>
+                  ))}
+                </ToggleButtonGroup>
+              )}
+            </Box>
           )}
           {currencyList.length > 0 && (
             <Select
@@ -222,7 +270,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
               ))}
             </Select>
           )}
-        </div>
+        </Stack>
         <Stack
           flexWrap="wrap"
           direction="row"
@@ -258,7 +306,10 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
                     boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
                   },
-                  width: '320px',
+                  width: {
+                    xs: '100%',
+                    md: '320px',
+                  },
                   maxWidth: '360px',
 
                   padding: '20px',
@@ -377,8 +428,12 @@ function Subscribe({ x, action, onSelect, currencyId }: any) {
       fullWidth
       size="medium"
       variant="contained"
-      color={x.is_highlight || x.is_selected ? 'primary' : 'info'}
-      sx={{ fontSize: '16px', padding: '10px 20px', lineHeight: '28px' }}
+      color={x.is_highlight || x.is_selected ? 'info' : 'primary'}
+      sx={{
+        fontSize: '16px',
+        padding: '10px 20px',
+        lineHeight: '28px',
+      }}
       loading={state.loading === x.price_id && !state.loaded}
       disabled={x.is_disabled}
       onClick={() => handleSelect(x.price_id)}

package/src/components/table.tsx

@@ -93,7 +93,7 @@ const Wrapped = styled(Datatable)`
   }
 
   tr.MuiTableRow-root:not(.MuiTableRow-footer):hover {
-    background: #f5f5f5;
+    background: var(--backgrounds-bg-highlight, #eff6ff);
   }
   tr.MuiTableRow-root:last-of-type td:first-of-type {
     border-bottom-left-radius: 8px;

package/src/history/invoice/list.tsx

@@ -124,39 +124,40 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
 
   const columns = [
     {
-      label: t('payment.customer.invoice.invoiceNumber'),
-      name: 'number',
+      label: t('common.amount'),
+      name: 'total',
+      width: 60,
+      align: 'right',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const invoice = data?.list[index] as TInvoiceExpanded;
           const link = getInvoiceLink(invoice, action);
           return (
             <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
-              {invoice?.number}
+              <Typography>
+                {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
+                {invoice.paymentCurrency.symbol}
+              </Typography>
             </a>
           );
         },
       },
     },
     {
-      label: t('common.amount'),
-      name: 'total',
+      label: t('payment.customer.invoice.invoiceNumber'),
+      name: 'number',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const invoice = data?.list[index] as TInvoiceExpanded;
           const link = getInvoiceLink(invoice, action);
           return (
             <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
-              <Typography>
-                {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
-                {invoice.paymentCurrency.symbol}
-              </Typography>
+              {invoice?.number}
             </a>
           );
         },
       },
     },
-
     {
       label: t('common.updatedAt'),
       name: 'name',

package/src/libs/util.ts

@@ -1035,3 +1035,10 @@ export function formatAmountPrecisionLimit(amount: string, locale = 'en', precis
   }
   return '';
 }
+
+export function getWordBreakStyle(value: any): 'break-word' | 'break-all' {
+  if (typeof value === 'string' && /\s/.test(value)) {
+    return 'break-word';
+  }
+  return 'break-all';
+}

package/src/locales/en.tsx

@@ -90,6 +90,7 @@ export default flat({
     quantityLimitPerCheckout: 'Exceed purchase limit',
     quantityNotEnough: 'Exceed inventory',
     amountPrecisionLimit: 'Amount decimal places must be less than or equal to {precision}',
+    saveAsDefaultPriceSuccess: 'Set default price successfully',
   },
   payment: {
     checkout: {
@@ -198,7 +199,7 @@ export default flat({
       invoices: 'Invoice History',
       details: 'Details',
       summary: 'Summary',
-      specifics: 'Specifics',
+      products: 'Products',
       update: 'Update Information',
       empty: 'Seems you do not have any subscriptions or payments here',
       cancel: {
@@ -234,7 +235,8 @@ export default flat({
       recover: {
         button: 'Renew',
         title: 'Renew your subscription',
-        description: 'Your subscription will no longer be canceled, it will renew on {date}',
+        description:
+          'Your subscription will not be canceled and will be automatically renewed on {date}, please confirm to continue',
       },
       changePlan: {
         button: 'Update',

package/src/locales/zh.tsx

@@ -90,6 +90,7 @@ export default flat({
     quantityLimitPerCheckout: '超出购买限制',
     quantityNotEnough: '库存不足',
     amountPrecisionLimit: '金额小数位数必须在 {precision} 位以内',
+    saveAsDefaultPriceSuccess: '设置默认价格成功',
   },
   payment: {
     checkout: {
@@ -112,9 +113,9 @@ export default flat({
         subscription: '查看订阅',
         invoice: '查看账单',
       },
-      paymentRequired: '支付数量',
+      paymentRequired: '支付金额',
       staking: {
-        title: '质押数量',
+        title: '质押金额',
         tooltip: '质押相当于保证金，用于确保未来的账单能够正常扣款，如果你从 DID Wallet 撤销质押，订阅也会被取消。',
       },
       stakingConfirm: '在此支付中，质押金额与产品费用分开',
@@ -195,7 +196,7 @@ export default flat({
       invoices: '账单历史',
       details: '账户详情',
       summary: '计费摘要',
-      specifics: '具体信息',
+      products: '产品信息',
       update: '更新客户信息',
       empty: '看起来您在这里没有任何订阅或支付',
       cancel: {
@@ -228,7 +229,7 @@ export default flat({
       recover: {
         button: '续订',
         title: '续订您的订阅',
-        description: '您的订阅将不再被取消，将在{date}续订',
+        description: '您的订阅将不会被取消，并将在{date}自动续订，请确认是否继续',
       },
       changePlan: {
         button: '更新',

package/src/payment/form/address.tsx

@@ -33,7 +33,7 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
                 placeholder={t('payment.checkout.billing.postal_code')}
                 InputProps={{
                   startAdornment: (
-                    <InputAdornment position="start">
+                    <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
                       <Controller
                         name="billing_address.country"
                         control={control}

package/src/payment/index.tsx

@@ -248,7 +248,7 @@ export default function Payment({
   paymentLink,
   customer,
   completed,
-  // error,
+  error,
   mode,
   onPaid,
   onError,
@@ -281,6 +281,9 @@ export default function Payment({
   }, [checkoutSession, livemode, setLivemode, refresh]);
 
   const renderContent = () => {
+    if (error) {
+      return <PaymentError mode={mode} title="Oops" description={formatError(error)} />;
+    }
     if (!checkoutSession || !delay) {
       return (
         <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : mode === 'inline' ? 4 : 8 } }}>

package/src/payment/product-card.tsx

@@ -33,7 +33,7 @@ export default function ProductCard({ size, variant, name, logo, description, ex
           className="cko-ellipsis"
           variant="body1"
           title={name}
-          sx={{ fontWeight: 500, mb: 0.5, lineHeight: 1, fontSize: 16 }}
+          sx={{ fontWeight: 500, mb: 0.5, lineHeight: 1.2, fontSize: 16 }}
           color="text.primary">
           {name}
         </Typography>
@@ -41,7 +41,7 @@ export default function ProductCard({ size, variant, name, logo, description, ex
           <Typography
             variant="body1"
             title={description}
-            sx={{ fontSize: '0.85rem', mb: 0.5, lineHeight: 1, textAlign: 'left' }}
+            sx={{ fontSize: '0.85rem', mb: 0.5, lineHeight: 1.2, textAlign: 'left' }}
             color="text.lighter">
             {description}
           </Typography>

package/src/payment/skeleton/overview.tsx

@@ -5,16 +5,15 @@ export default function OverviewSkeleton() {
     <Fade in>
       <Stack direction="column">
         <Stack direction="row" alignItems="center" spacing={2}>
-          <Skeleton variant="circular" width={32} height={32} />
           <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
         </Stack>
+        <Skeleton sx={{ mt: 2 }} variant="rounded" height={100} />
         <Typography mt={2} component="div" variant="h4">
           <Skeleton />
         </Typography>
         <Typography component="div" variant="h2">
           <Skeleton />
         </Typography>
-        <Skeleton sx={{ mt: 2 }} variant="rounded" width={200} height={200} />
       </Stack>
     </Fade>
   );

package/src/payment/skeleton/payment.tsx

@@ -3,28 +3,27 @@ import { Box, Fade, Skeleton, Stack, Typography } from '@mui/material';
 export default function PaymentSkeleton() {
   return (
     <Fade in>
-      <Stack direction="column" spacing={2}>
+      <Stack direction="column">
         <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
-        <Box>
-          <Typography component="div" variant="h4">
+        <Skeleton sx={{ mt: 2 }} variant="rounded" height={68} />
+        <Box mt={1}>
+          <Typography component="div" variant="h4" mb={-1}>
             <Skeleton />
           </Typography>
-          <Typography component="div" variant="h1">
-            <Skeleton />
+          <Typography component="div">
+            <Skeleton height={60} />
           </Typography>
         </Box>
         <Box>
-          <Typography component="div" variant="h4">
+          <Typography component="div" variant="h4" mb={-1}>
             <Skeleton />
           </Typography>
-          <Typography component="div" variant="h1">
-            <Skeleton />
+          <Typography component="div">
+            <Skeleton height={60} />
           </Typography>
         </Box>
         <Box>
-          <Typography component="div" variant="h4">
-            <Skeleton />
-          </Typography>
+          <Skeleton height={60} />
         </Box>
       </Stack>
     </Fade>