@blocklet/payment-react 1.13.123 → 1.13.125

package/src/components/pricing-table.tsx

@@ -17,6 +17,7 @@ import {
   ToggleButtonGroup,
   Typography,
 } from '@mui/material';
+import { styled } from '@mui/system';
 import { useSetState } from 'ahooks';
 import { useEffect } from 'react';
 
@@ -83,123 +84,134 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     }
   };
 
+  const Root = styled(Box)`
+    @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
+      .price-table-item {
+        width: 90% !important;
+      }
+    }
+  `;
   return (
-    <Stack
-      direction="column"
-      alignItems={alignItems === 'center' ? 'center' : 'flex-start'}
-      sx={{
-        pt: {
-          xs: 4,
-          sm: 2,
-        },
-        gap: {
-          xs: 3,
-          sm: mode === 'select' ? 3 : 5,
-        },
-      }}>
-      {Object.keys(recurring).length > 1 && (
-        <ToggleButtonGroup
-          color="primary"
-          value={state.interval}
-          onChange={(_, value) => {
-            if (value !== null) {
-              setState({ interval: value });
-            }
-          }}
-          exclusive>
-          {Object.keys(recurring).map((x) => (
-            <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
-              {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
-            </ToggleButton>
-          ))}
-        </ToggleButtonGroup>
-      )}
+    <Root>
       <Stack
-        flexWrap="wrap"
-        direction="row"
-        gap={{ xs: 3, sm: 5, md: mode === 'checkout' ? 10 : 5 }}
-        justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}>
-        {grouped[state.interval as string]?.map((x: TPricingTableItem) => {
-          let action = x.subscription_data?.trial_period_days
-            ? t('payment.checkout.try')
-            : t('payment.checkout.subscription');
-          if (mode === 'select') {
-            action = x.is_selected ? t('payment.checkout.selected') : t('payment.checkout.select');
-          }
+        direction="column"
+        alignItems={alignItems === 'center' ? 'center' : 'flex-start'}
+        sx={{
+          pt: {
+            xs: 4,
+            sm: 2,
+          },
+          gap: {
+            xs: 3,
+            sm: mode === 'select' ? 3 : 5,
+          },
+        }}>
+        {Object.keys(recurring).length > 1 && (
+          <ToggleButtonGroup
+            color="primary"
+            value={state.interval}
+            onChange={(_, value) => {
+              if (value !== null) {
+                setState({ interval: value });
+              }
+            }}
+            exclusive>
+            {Object.keys(recurring).map((x) => (
+              <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
+                {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        )}
+        <Stack
+          flexWrap="wrap"
+          direction="row"
+          gap="calc(10px + 3%)"
+          justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}>
+          {grouped[state.interval as string]?.map(
+            (x: TPricingTableItem & { is_selected?: boolean; is_disabled?: boolean }) => {
+              let action = x.subscription_data?.trial_period_days
+                ? t('payment.checkout.try')
+                : t('payment.checkout.subscription');
+              if (mode === 'select') {
+                action = x.is_selected ? t('payment.checkout.selected') : t('payment.checkout.select');
+              }
 
-          return (
-            <Fade key={x.price_id} in>
-              <Stack
-                padding={4}
-                spacing={2}
-                direction="column"
-                alignItems="center"
-                sx={{
-                  width: 320,
-                  cursor: 'pointer',
-                  borderWidth: '1px',
-                  borderStyle: 'solid',
-                  borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#eee',
-                  borderRadius: 1,
-                  transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
-                  boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
-                  '&:hover': {
-                    borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
-                    boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
-                  },
-                }}>
-                <Box textAlign="center">
-                  <Stack direction="row" alignItems="center" spacing={1}>
-                    <Typography variant="h5" color="text.primary" fontWeight={600}>
-                      {x.product.name}
-                    </Typography>
-                    {x.is_highlight && <Chip label={x.highlight_text} color="default" size="small" />}
+              return (
+                <Fade key={x.price_id} in>
+                  <Stack
+                    padding={4}
+                    spacing={2}
+                    direction="column"
+                    alignItems="center"
+                    className="price-table-item"
+                    sx={{
+                      width: '30%',
+                      cursor: 'pointer',
+                      borderWidth: '1px',
+                      borderStyle: 'solid',
+                      borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#eee',
+                      borderRadius: 1,
+                      transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
+                      boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
+                      '&:hover': {
+                        borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
+                        boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
+                      },
+                    }}>
+                    <Box textAlign="center">
+                      <Stack direction="row" alignItems="center" spacing={1}>
+                        <Typography variant="h5" color="text.primary" fontWeight={600}>
+                          {x.product.name}
+                        </Typography>
+                        {x.is_highlight && <Chip label={x.highlight_text} color="default" size="small" />}
+                      </Stack>
+                      <Typography color="text.secondary">{x.product.description}</Typography>
+                    </Box>
+                    <Stack direction="row" alignItems="center" spacing={1}>
+                      <Amount amount={formatPriceAmount(x.price, table.currency, x.product.unit_label)} />
+                      <Stack direction="column" alignItems="flex-start">
+                        <Typography component="span" color="text.secondary" fontSize="0.8rem">
+                          {t('payment.checkout.per')}
+                        </Typography>
+                        <Typography component="span" color="text.secondary" fontSize="0.8rem">
+                          {formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
+                        </Typography>
+                      </Stack>
+                    </Stack>
+                    <LoadingButton
+                      fullWidth
+                      size="large"
+                      variant={x.is_highlight || x.is_selected ? 'contained' : 'outlined'}
+                      color={x.is_highlight || x.is_selected ? 'primary' : 'info'}
+                      sx={{ fontSize: '1.2rem' }}
+                      loading={state.loading === x.price_id}
+                      disabled={x.is_disabled}
+                      onClick={() => handleSelect(x.price_id)}>
+                      {action}
+                    </LoadingButton>
+                    {x.product.features.length > 0 && (
+                      <Box>
+                        <Typography>{t('payment.checkout.include')}</Typography>
+                        <List dense>
+                          {x.product.features.map((f: any) => (
+                            <ListItem key={f.name} disableGutters disablePadding>
+                              <ListItemIcon sx={{ minWidth: 25 }}>
+                                <CheckOutlined color="success" fontSize="small" />
+                              </ListItemIcon>
+                              <ListItemText primary={f.name} />
+                            </ListItem>
+                          ))}
+                        </List>
+                      </Box>
+                    )}
                   </Stack>
-                  <Typography color="text.secondary">{x.product.description}</Typography>
-                </Box>
-                <Stack direction="row" alignItems="center" spacing={1}>
-                  <Amount amount={formatPriceAmount(x.price, table.currency, x.product.unit_label)} />
-                  <Stack direction="column" alignItems="flex-start">
-                    <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                      {t('payment.checkout.per')}
-                    </Typography>
-                    <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                      {formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
-                    </Typography>
-                  </Stack>
-                </Stack>
-                <LoadingButton
-                  fullWidth
-                  size="large"
-                  loadingPosition="end"
-                  variant={x.is_highlight || x.is_selected ? 'contained' : 'outlined'}
-                  color={x.is_highlight || x.is_selected ? 'primary' : 'info'}
-                  sx={{ fontSize: '1.2rem' }}
-                  loading={state.loading === x.price_id}
-                  disabled={x.is_disabled}
-                  onClick={() => handleSelect(x.price_id)}>
-                  {action}
-                </LoadingButton>
-                {x.product.features.length > 0 && (
-                  <Box>
-                    <Typography>{t('payment.checkout.include')}</Typography>
-                    <List dense>
-                      {x.product.features.map((f: any) => (
-                        <ListItem key={f.name} disableGutters disablePadding>
-                          <ListItemIcon sx={{ minWidth: 25 }}>
-                            <CheckOutlined color="success" fontSize="small" />
-                          </ListItemIcon>
-                          <ListItemText primary={f.name} />
-                        </ListItem>
-                      ))}
-                    </List>
-                  </Box>
-                )}
-              </Stack>
-            </Fade>
-          );
-        })}
+                </Fade>
+              );
+            }
+          )}
+        </Stack>
       </Stack>
-    </Stack>
+    </Root>
   );
 }

package/src/contexts/payment.tsx

@@ -16,8 +16,8 @@ export interface Settings {
 
 export type PaymentContextType = {
   livemode: boolean;
-  session: any;
-  connect: any;
+  session: import('@arcblock/did-connect/lib/types').SessionContext['session'] & { user: any };
+  connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
   prefix: string;
   settings: Settings;
   refresh: () => void;

package/src/index.ts

@@ -1,6 +1,7 @@
 import api from './api';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
+import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
@@ -11,6 +12,8 @@ import Amount from './payment/amount';
 import PhoneInput from './payment/form/phone';
 import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
+import CustomerInvoiceList from './portal/invoice/list';
+import CustomerPaymentList from './portal/payment/list';
 
 export * from './util';
 export * from './contexts/payment';
@@ -25,10 +28,13 @@ export {
   Status,
   Livemode,
   Switch,
+  ConfirmDialog,
   CheckoutForm,
   CheckoutTable,
   Payment,
   PricingTable,
   ProductSkeleton,
   Amount,
+  CustomerInvoiceList,
+  CustomerPaymentList,
 };

package/src/locales/en.tsx

@@ -150,6 +150,7 @@ export default flat({
       },
     },
     customer: {
+      payments: 'Payment History',
       invoices: 'Invoice History',
       details: 'Billing Details',
       update: 'Update Information',
@@ -206,7 +207,10 @@ export default flat({
         pay: 'Pay this invoice',
         paySuccess: 'You have successfully paid the invoice',
         payError: 'Failed to paid the invoice',
-        empty: 'Seems you do not have any payments here',
+        empty: 'Seems you do not have any invoice here',
+      },
+      payment: {
+        empty: 'Seems you do not have any payment here',
       },
       subscriptions: {
         title: 'Manage subscriptions',

package/src/locales/zh.tsx

@@ -147,6 +147,7 @@ export default flat({
       },
     },
     customer: {
+      payments: '支付历史',
       invoices: '发票历史',
       details: '计费详情',
       update: '更新客户信息',
@@ -202,6 +203,9 @@ export default flat({
         pay: '支付此发票',
         paySuccess: '支付成功',
         payError: '支付失败',
+        empty: '你没有任何发票',
+      },
+      payment: {
         empty: '你没有任何支付',
       },
       subscriptions: {

package/src/payment/form/index.tsx

@@ -225,10 +225,11 @@ export default function PaymentForm({
         if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
           await handleConnected();
         } else {
+          // @FIXME: 需要考虑如何正确地适配前端组件的使用 @wangshijun
           connect.open({
+            containerEl: undefined as unknown as Element,
             action: checkoutSession.mode,
-            prefix: joinURL(getPrefix(), '/api/did'),
-            timeout: 5 * 60 * 1000,
+            prefix: joinURL(window.location.origin, getPrefix(), '/api/did'),
             extraParams: { checkoutSessionId: checkoutSession.id },
             onSuccess: async () => {
               connect.close();
@@ -242,7 +243,7 @@ export default function PaymentForm({
               setState({ submitting: false, paying: false });
               onError(err);
             },
-          });
+          } as any);
         }
       }
       if (['stripe'].includes(method.type)) {
@@ -266,6 +267,7 @@ export default function PaymentForm({
     if (session?.user) {
       handleSubmit(onSubmit)();
     } else {
+      // @ts-ignored
       session?.login({
         onSuccess: onUserLoggedIn,
         extraParams: {},

package/src/payment/index.tsx

@@ -350,18 +350,18 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   }
 
   .cko-payment-card-unselect {
-    border: 2px solid #bbb;
+    border: 2px solid #ddd;
     padding: 5px 10px;
     margin: 5px 0;
     cursor: pointer;
   }
 
   .cko-payment-card:nth-child(odd) {
-    margin-right: 5px;
+    margin-right: 16px;
   }
 
   .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: 5px;
+    margin-right: 16px;
   }
 
   .cko-payment-card::after {

package/src/portal/invoice/list.tsx

@@ -0,0 +1,122 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { Paginated, TInvoiceExpanded } from '@blocklet/payment-types';
+import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { fromUnitToToken } from '@ocap/util';
+import { useInfiniteScroll } from 'ahooks';
+
+import api from '../../api';
+import Status from '../../components/status';
+import { formatToDate, getInvoiceStatusColor } from '../../util';
+
+const groupByDate = (items: TInvoiceExpanded[]) => {
+  const grouped: { [key: string]: TInvoiceExpanded[] } = {};
+  items.forEach((item) => {
+    const date = new Date(item.created_at).toLocaleDateString();
+    if (!grouped[date]) {
+      grouped[date] = [];
+    }
+    grouped[date]?.push(item);
+  });
+  return grouped;
+};
+
+const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/invoices?${search.toString()}`).then((res: any) => res.data);
+};
+
+type Props = {
+  customer_id: string;
+};
+
+const pageSize = 10;
+
+export default function CustomerInvoiceList({ customer_id }: Props) {
+  const { t } = useLocaleContext();
+
+  const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TInvoiceExpanded>>(
+    (d) => {
+      const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
+      return fetchData({ page, pageSize, status: 'open,paid,uncollectible', customer_id });
+    },
+    {
+      reloadDeps: [customer_id],
+    }
+  );
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  if (data && data.list.length === 0) {
+    return <Typography color="text.secondary">{t('payment.customer.invoice.empty')}</Typography>;
+  }
+
+  const hasMore = data && data.list.length < data.count;
+
+  const grouped = groupByDate(data.list as any);
+
+  return (
+    <Stack direction="column" gap={1} sx={{ mt: 1 }}>
+      {Object.entries(grouped).map(([date, invoices]) => (
+        <Box key={date}>
+          <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2, mb: 1 }}>{date}</Typography>
+          {invoices.map((invoice) => (
+            <Stack
+              key={invoice.id}
+              direction={{
+                xs: 'column',
+                sm: 'row',
+              }}
+              sx={{ my: 1 }}
+              gap={{
+                xs: 0.5,
+                sm: 1.5,
+                md: 3,
+              }}
+              flexWrap="nowrap">
+              <Box flex={3}>
+                <a href={`/customer/invoice/${invoice.id}`}>
+                  <Typography component="span">{invoice.number}</Typography>
+                </a>
+              </Box>
+              <Box flex={3}>
+                <Typography>{formatToDate(invoice.created_at)}</Typography>
+              </Box>
+              <Box flex={2}>
+                <Typography textAlign="right">
+                  {fromUnitToToken(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
+                  {invoice.paymentCurrency.symbol}
+                </Typography>
+              </Box>
+              <Box flex={2}>
+                <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+              </Box>
+              <Box flex={4}>
+                <Typography>{invoice.description || invoice.id}</Typography>
+              </Box>
+            </Stack>
+          ))}
+        </Box>
+      ))}
+      <Box>
+        {hasMore && (
+          <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
+            {loadingMore
+              ? t('common.loadingMore', { resource: t('payment.customer.invoices') })
+              : t('common.loadMore', { resource: t('payament.customer.invoices') })}
+          </Button>
+        )}
+        {!hasMore && data.count > pageSize && (
+          <Typography color="text.secondary">
+            {t('common.noMore', { resource: t('payment.customer.invoices') })}
+          </Typography>
+        )}
+      </Box>
+    </Stack>
+  );
+}

package/src/portal/payment/list.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { Paginated, TPaymentIntentExpanded } from '@blocklet/payment-types';
+import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { fromUnitToToken } from '@ocap/util';
+import { useInfiniteScroll } from 'ahooks';
+
+import api from '../../api';
+import Status from '../../components/status';
+import { formatToDate, getPaymentIntentStatusColor } from '../../util';
+
+const groupByDate = (items: TPaymentIntentExpanded[]) => {
+  const grouped: { [key: string]: TPaymentIntentExpanded[] } = {};
+  items.forEach((item) => {
+    const date = new Date(item.created_at).toLocaleDateString();
+    if (!grouped[date]) {
+      grouped[date] = [];
+    }
+    grouped[date]?.push(item);
+  });
+  return grouped;
+};
+
+const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TPaymentIntentExpanded>> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/payment-intents?${search.toString()}`).then((res: any) => res.data);
+};
+
+type Props = {
+  customer_id: string;
+};
+
+const pageSize = 10;
+
+export default function CustomerPaymentList({ customer_id }: Props) {
+  const { t } = useLocaleContext();
+
+  const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TPaymentIntentExpanded>>(
+    (d) => {
+      const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
+      return fetchData({ page, pageSize, customer_id });
+    },
+    {
+      reloadDeps: [customer_id],
+    }
+  );
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  if (data && data.list.length === 0) {
+    return <Typography color="text.secondary">{t('payment.customer.payment.empty')}</Typography>;
+  }
+
+  const hasMore = data && data.list.length < data.count;
+
+  const grouped = groupByDate(data.list as any);
+
+  return (
+    <Stack direction="column" gap={1} sx={{ mt: 1 }}>
+      {Object.entries(grouped).map(([date, payments]) => (
+        <Box key={date}>
+          <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2, mb: 1 }}>{date}</Typography>
+          {payments.map((item) => (
+            <Stack
+              key={item.id}
+              direction={{
+                xs: 'column',
+                sm: 'row',
+              }}
+              sx={{ my: 1 }}
+              gap={{
+                xs: 0.5,
+                sm: 1.5,
+                md: 3,
+              }}
+              flexWrap="nowrap">
+              <Box flex={3} sx={{ minWidth: '220px' }}>
+                <Typography component="span">{item.id}</Typography>
+              </Box>
+              <Box flex={3}>
+                <Typography>{formatToDate(item.created_at)}</Typography>
+              </Box>
+              <Box flex={2}>
+                <Typography textAlign="right">
+                  {fromUnitToToken(item.amount, item.paymentCurrency.decimal)}&nbsp;
+                  {item.paymentCurrency.symbol}
+                </Typography>
+              </Box>
+              <Box flex={3}>
+                <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />
+              </Box>
+              <Box flex={4}>
+                <Typography>{item.description || item.id}</Typography>
+              </Box>
+            </Stack>
+          ))}
+        </Box>
+      ))}
+      <Box>
+        {hasMore && (
+          <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
+            {loadingMore
+              ? t('common.loadingMore', { resource: t('payment.customer.payments') })
+              : t('common.loadMore', { resource: t('payment.customer.payments') })}
+          </Button>
+        )}
+        {!hasMore && data.count > pageSize && (
+          <Typography color="text.secondary">
+            {t('common.noMore', { resource: t('payment.customer.payments') })}
+          </Typography>
+        )}
+      </Box>
+    </Stack>
+  );
+}