@blocklet/payment-react 1.13.127 → 1.13.129

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

@@ -0,0 +1,165 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { Paginated, TInvoiceExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
+import { Box, Button, CircularProgress, Divider, List, ListItem, ListSubheader, Typography } from '@mui/material';
+import { fromUnitToToken } from '@ocap/util';
+import { useInfiniteScroll } from 'ahooks';
+
+import api from '../../api';
+import Status from '../../components/status';
+import {
+  formatSubscriptionProduct,
+  formatTime,
+  formatToDate,
+  getInvoiceStatusColor,
+  getSubscriptionStatusColor,
+} from '../../util';
+
+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 = {
+  subscription: TSubscriptionExpanded;
+};
+
+const pageSize = 10;
+
+export default function MiniInvoiceList({ subscription }: Props) {
+  const { t } = useLocaleContext();
+
+  const { data, loading } = useInfiniteScroll<Paginated<TInvoiceExpanded>>(
+    (d) => {
+      const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
+      return fetchData({ page, pageSize, status: 'open,paid,uncollectible', subscription_id: subscription.id });
+    },
+    {
+      reloadDeps: [subscription.id],
+    }
+  );
+
+  if (loading || !data) {
+    return (
+      <Position>
+        <CircularProgress />
+      </Position>
+    );
+  }
+
+  if (data && data.list.length === 0) {
+    return (
+      <Position>
+        <Typography color="text.secondary">{t('payment.customer.invoice.empty')}</Typography>
+      </Position>
+    );
+  }
+
+  const infoList = [
+    {
+      name: t('payment.customer.subscriptions.plan'),
+      value: (
+        <Typography fontWeight={600} sx={{ marginRight: '10px' }}>
+          {formatSubscriptionProduct(subscription.items)}
+        </Typography>
+      ),
+    },
+    {
+      name: t('payment.common.status'),
+      value: <Status label={subscription.status} color={getSubscriptionStatusColor(subscription.status)} />,
+    },
+
+    {
+      name: t('payment.customer.subscriptions.nextInvoice'),
+      value: (
+        <Typography
+          sx={{
+            color: '#34BE74',
+            fontWeight: 'bold',
+          }}>
+          {formatTime(subscription.current_period_end * 1000)}
+        </Typography>
+      ),
+    },
+  ];
+
+  return (
+    <Position>
+      <Typography title={t('payment.checkout.subscription')} />
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItem: 'center',
+          justifyContent: 'flex-start',
+          padding: '16px',
+          width: '100%',
+          height: '100%',
+        }}>
+        <Typography component="h3" sx={{ textAlign: 'center' }} variant="h5" gutterBottom>
+          {t('payment.customer.subscriptions.current')}
+        </Typography>
+        <Box sx={{ marginTop: '12px' }}>
+          <List>
+            {infoList.map(({ name, value }) => {
+              return (
+                <ListItem key={name} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <Typography component="span">{name}</Typography>
+                  <Typography component="span">{value}</Typography>
+                </ListItem>
+              );
+            })}
+          </List>
+        </Box>
+        <Divider />
+        <Box sx={{ marginTop: '12px' }}>
+          <List sx={{ overflow: 'auto', maxHeight: { xs: '240px', md: '360px', padding: 0 } }}>
+            <ListSubheader disableGutters sx={{ padding: 0 }}>
+              <Typography component="h2" variant="h6" fontSize="16px">
+                {t('payment.customer.invoices')}
+              </Typography>
+            </ListSubheader>
+            {(data.list || []).map((item: any) => {
+              return (
+                <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <Typography component="span">{formatToDate(item.created_at)}</Typography>
+                  <Typography component="span">
+                    {fromUnitToToken(item.total, item.paymentCurrency.decimal)}&nbsp;
+                    {item.paymentCurrency.symbol}
+                  </Typography>
+                  <Status label={item.status} color={getInvoiceStatusColor(item.status)} />
+                </ListItem>
+              );
+            })}
+          </List>
+        </Box>
+        <Button target="_top" variant="contained" sx={{ marginTop: 'auto', width: '100%' }} href="">
+          {t('payment.customer.subscriptions.title')}
+        </Button>
+      </Box>
+    </Position>
+  );
+}
+
+function Position({ children }: any) {
+  return (
+    <Box
+      className="mini-invoice-box" // 预留 class 用于设置定位
+      sx={{
+        position: 'absolute',
+        right: 0,
+        top: '30px',
+        justifyContent: 'center',
+        padding: '8px',
+        minWidth: '400px',
+        background: '#fff',
+        zIndex: 9,
+        boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
+      }}>
+      {children}
+    </Box>
+  );
+}

package/src/{portal → histroy}/payment/list.tsx

@@ -79,9 +79,6 @@ export default function CustomerPaymentList({ customer_id }: Props) {
                 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>

package/src/index.ts

@@ -8,12 +8,13 @@ import PricingTable from './components/pricing-table';
 import Status from './components/status';
 import Switch from './components/switch-button';
 import dayjs from './dayjs';
+import CustomerInvoiceList from './histroy/invoice/list';
+import MiniInvoiceList from './histroy/mini-invoice/list';
+import CustomerPaymentList from './histroy/payment/list';
 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';
@@ -37,4 +38,5 @@ export {
   Amount,
   CustomerInvoiceList,
   CustomerPaymentList,
+  MiniInvoiceList,
 };

package/src/locales/en.tsx

@@ -213,6 +213,8 @@ export default flat({
         empty: 'Seems you do not have any payment here',
       },
       subscriptions: {
+        plan: 'Plan',
+        nextInvoice: 'Next Invoice',
         title: 'Manage subscriptions',
         current: 'Current subscriptions',
         empty: 'Seems you do not have any subscriptions here',

package/src/locales/zh.tsx

@@ -209,6 +209,8 @@ export default flat({
         empty: '你没有任何支付',
       },
       subscriptions: {
+        plan: '订阅',
+        nextInvoice: '下一张发票',
         title: '订阅管理',
         current: '当前订阅',
         empty: '你还没有任何订阅',

package/src/payment/form/index.tsx

@@ -367,7 +367,7 @@ export default function PaymentForm({
                         <Stack direction="row" alignItems="center">
                           <Avatar src={x.logo} alt={x.name} sx={{ width: 30, height: 30, marginRight: '10px' }} />
                           <div>
-                            <Typography variant="h5" component="div">
+                            <Typography variant="h5" component="div" sx={{ fontSize: '18px' }}>
                               {x.symbol}
                             </Typography>
                             <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>

package/src/payment/index.tsx

@@ -2,10 +2,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TCustomer, TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import { ArrowBackOutlined } from '@mui/icons-material';
 import { Box, Fade, Stack } from '@mui/material';
 import { styled } from '@mui/system';
 import { useSetState } from 'ahooks';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { LiteralUnion } from 'type-fest';
 
@@ -40,9 +41,18 @@ export default function Payment({
   mode,
   onPaid,
   onError,
+  goBack,
 }: Props) {
   const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = usePaymentContext();
+  const [delay, setDelay] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      // 骨架屏 delay
+      setDelay(true);
+    }, 500);
+  }, []);
 
   useEffect(() => {
     if (checkoutSession) {
@@ -59,7 +69,7 @@ export default function Payment({
     return <PaymentError title="Oops" description={formatError(error)} />;
   }
 
-  if (!checkoutSession) {
+  if (!checkoutSession || !delay) {
     return (
       <Root mode={mode}>
         <Stack className="cko-container">
@@ -105,6 +115,7 @@ export default function Payment({
       customer={customer as TCustomer}
       onPaid={onPaid}
       onError={onError}
+      goBack={goBack}
       mode={mode}
     />
   );
@@ -126,6 +137,7 @@ export function PaymentInner({
   mode,
   onPaid,
   onError,
+  goBack,
 }: MainProps) {
   const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
@@ -204,6 +216,13 @@ export function PaymentInner({
   return (
     <FormProvider {...methods}>
       <Root mode={mode}>
+        {mode !== 'standalone' ? (
+          <ArrowBackOutlined
+            sx={{ mr: 0.5, color: 'text.secondary', alignSelf: 'flex-start', margin: '16px 0', cursor: 'pointer' }}
+            onClick={goBack}
+            fontSize="medium"
+          />
+        ) : null}
         <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : 8 } }}>
           <Fade in>
             <Stack className="cko-overview" direction="column">
@@ -357,11 +376,11 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   }
 
   .cko-payment-card:nth-child(odd) {
-    margin-right: 16px;
+    margin-right: 8px;
   }
 
   .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: 16px;
+    margin-right: 8px;
   }
 
   .cko-payment-card::after {

package/src/types/index.ts

@@ -26,4 +26,5 @@ export type CheckoutProps = Partial<CheckoutCallbacks> & {
 export type CheckoutCallbacks = {
   onPaid: (res: CheckoutContext) => void;
   onError: (err: Error) => void;
+  goBack?: () => void;
 };

package/src/util.ts

@@ -9,6 +9,7 @@ import type {
   TPaymentMethodExpanded,
   TPrice,
   TSubscriptionExpanded,
+  TSubscriptionItemExpanded,
 } from '@blocklet/payment-types';
 import { BN, fromUnitToToken } from '@ocap/util';
 import { defaultCountries } from 'react-international-phone';
@@ -551,6 +552,13 @@ export function sleep(ms: number) {
   });
 }
 
+export function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], maxLength = 2) {
+  const names = items.map((x) => x.price.product?.name).filter(Boolean);
+  return (
+    names.slice(0, maxLength).join(', ') + (names.length > maxLength ? ` and ${names.length - maxLength} more` : '')
+  );
+}
+
 export const getSubscriptionTimeSummary = (subscription: TSubscriptionExpanded) => {
   const lines = [`Started on ${formatToDate(subscription.start_date * 1000)}`];
   if (subscription.status === 'active' || subscription.status === 'trialing') {