@blocklet/payment-react 1.13.129 → 1.13.131

package/src/{histroy → history}/mini-invoice/list.tsx

@@ -3,7 +3,8 @@ 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 { useRequest } from 'ahooks';
+import { joinURL } from 'ufo';
 
 import api from '../../api';
 import Status from '../../components/status';
@@ -12,10 +13,11 @@ import {
   formatTime,
   formatToDate,
   getInvoiceStatusColor,
+  getPrefix,
   getSubscriptionStatusColor,
 } from '../../util';
 
-const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
+const fetchInvoiceData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
     search.set(key, String(params[key]));
@@ -23,26 +25,21 @@ const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TInvoice
   return api.get(`/api/invoices?${search.toString()}`).then((res: any) => res.data);
 };
 
-type Props = {
-  subscription: TSubscriptionExpanded;
+const fetchSubscriptionData = (id: string): Promise<TSubscriptionExpanded> => {
+  return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
 };
 
-const pageSize = 10;
-
-export default function MiniInvoiceList({ subscription }: Props) {
+export default function MiniInvoiceList() {
   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],
-    }
+  const subscriptionId = new URL(window.location.href).searchParams.get('id');
+
+  const { data: subscription } = useRequest(() => fetchSubscriptionData(subscriptionId as string));
+  const { data } = useRequest(() =>
+    fetchInvoiceData({ page: 1, pageSize: 10, status: 'open,paid,uncollectible', subscription_id: subscriptionId })
   );
 
-  if (loading || !data) {
+  if (!subscription || !data) {
     return (
       <Position>
         <CircularProgress />
@@ -50,13 +47,7 @@ export default function MiniInvoiceList({ subscription }: Props) {
     );
   }
 
-  if (data && data.list.length === 0) {
-    return (
-      <Position>
-        <Typography color="text.secondary">{t('payment.customer.invoice.empty')}</Typography>
-      </Position>
-    );
-  }
+  const invoices = data.list || [];
 
   const infoList = [
     {
@@ -68,28 +59,32 @@ export default function MiniInvoiceList({ subscription }: Props) {
       ),
     },
     {
-      name: t('payment.common.status'),
+      name: t('common.status'),
       value: <Status label={subscription.status} color={getSubscriptionStatusColor(subscription.status)} />,
     },
+  ];
 
-    {
+  if (subscription.status === 'active' || subscription.status === 'trailing') {
+    infoList.push({
       name: t('payment.customer.subscriptions.nextInvoice'),
       value: (
         <Typography
           sx={{
             color: '#34BE74',
             fontWeight: 'bold',
+            marginRight: '10px',
           }}>
           {formatTime(subscription.current_period_end * 1000)}
         </Typography>
       ),
-    },
-  ];
+    });
+  }
 
   return (
     <Position>
       <Typography title={t('payment.checkout.subscription')} />
       <Box
+        className="mini-invoice-wrap"
         sx={{
           display: 'flex',
           flexDirection: 'column',
@@ -115,28 +110,40 @@ export default function MiniInvoiceList({ subscription }: Props) {
           </List>
         </Box>
         <Divider />
-        <Box sx={{ marginTop: '12px' }}>
-          <List sx={{ overflow: 'auto', maxHeight: { xs: '240px', md: '360px', padding: 0 } }}>
+        <Box sx={{ marginTop: '12px', flex: 1 }}>
+          <List sx={{ overflow: 'auto' }} className="mini-invoice-list">
             <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>
-              );
-            })}
+            {(invoices as any).length === 0 ? (
+              <Typography color="text.secondary">{t('payment.customer.invoice.empty')}</Typography>
+            ) : (
+              (invoices as any).map((item: any) => {
+                return (
+                  <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <Typography component="span" sx={{ flex: 3 }}>
+                      {formatToDate(item.created_at)}
+                    </Typography>
+                    <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
+                      {fromUnitToToken(item.total, item.paymentCurrency.decimal)}&nbsp;
+                      {item.paymentCurrency.symbol}
+                    </Typography>
+                    <Typography component="span" sx={{ flex: 2, textAlign: 'right' }}>
+                      <Status label={item.status} color={getInvoiceStatusColor(item.status)} sx={{ flex: 2 }} />
+                    </Typography>
+                  </ListItem>
+                );
+              })
+            )}
           </List>
         </Box>
-        <Button target="_top" variant="contained" sx={{ marginTop: 'auto', width: '100%' }} href="">
+        <Button
+          target="_blank"
+          variant="contained"
+          sx={{ marginTop: '10px 0', width: '100%', color: '#fff!important' }}
+          href={joinURL(window.location.origin, getPrefix(), `/customer/subscription/${subscription.id}`)}>
           {t('payment.customer.subscriptions.title')}
         </Button>
       </Box>
@@ -149,15 +156,11 @@ function Position({ children }: any) {
     <Box
       className="mini-invoice-box" // 预留 class 用于设置定位
       sx={{
-        position: 'absolute',
-        right: 0,
-        top: '30px',
-        justifyContent: 'center',
         padding: '8px',
-        minWidth: '400px',
+        width: '100%',
+        maxWidth: '500px',
         background: '#fff',
-        zIndex: 9,
-        boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
+        margin: '0 auto',
       }}>
       {children}
     </Box>

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

@@ -6,6 +6,7 @@ import { fromUnitToToken } from '@ocap/util';
 import { useInfiniteScroll } from 'ahooks';
 
 import api from '../../api';
+import TxLink from '../../components/blockchain/tx';
 import Status from '../../components/status';
 import { formatToDate, getPaymentIntentStatusColor } from '../../util';
 
@@ -91,9 +92,18 @@ export default function CustomerPaymentList({ customer_id }: Props) {
               <Box flex={3}>
                 <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />
               </Box>
-              <Box flex={4}>
+              <Box flex={3}>
                 <Typography>{item.description || item.id}</Typography>
               </Box>
+              <Box flex={3} sx={{ minWidth: '220px' }}>
+                {(item as any).payment_details?.arcblock?.tx_hash && (
+                  <TxLink
+                    details={(item as any).payment_details}
+                    method={(item as any).paymentMethod}
+                    mode="customer"
+                  />
+                )}
+              </Box>
             </Stack>
           ))}
         </Box>

package/src/index.ts

@@ -1,6 +1,7 @@
 import api from './api';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
+import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
@@ -8,9 +9,9 @@ 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 CustomerInvoiceList from './history/invoice/list';
+import MiniInvoiceList from './history/mini-invoice/list';
+import CustomerPaymentList from './history/payment/list';
 import Amount from './payment/amount';
 import PhoneInput from './payment/form/phone';
 import Payment from './payment/index';
@@ -39,4 +40,5 @@ export {
   CustomerInvoiceList,
   CustomerPaymentList,
   MiniInvoiceList,
+  TxLink,
 };

package/src/locales/en.tsx

@@ -207,17 +207,17 @@ 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 invoice here',
+        empty: 'There are no invoices here',
       },
       payment: {
-        empty: 'Seems you do not have any payment here',
+        empty: 'There are no payments here',
       },
       subscriptions: {
         plan: 'Plan',
         nextInvoice: 'Next Invoice',
         title: 'Manage subscriptions',
-        current: 'Current subscriptions',
-        empty: 'Seems you do not have any subscriptions here',
+        current: 'Current subscription',
+        empty: 'There are no subscriptions here',
       },
     },
   },

package/src/locales/zh.tsx

@@ -203,17 +203,17 @@ export default flat({
         pay: '支付此发票',
         paySuccess: '支付成功',
         payError: '支付失败',
-        empty: '你没有任何发票',
+        empty: '没有任何发票',
       },
       payment: {
-        empty: '你没有任何支付',
+        empty: '没有任何支付',
       },
       subscriptions: {
         plan: '订阅',
         nextInvoice: '下一张发票',
         title: '订阅管理',
         current: '当前订阅',
-        empty: '你还没有任何订阅',
+        empty: '没有任何订阅',
       },
     },
   },

package/src/util.ts

@@ -324,11 +324,14 @@ export function getCheckoutAmount(
   upsell = true
 ) {
   let renew = new BN(0);
-
   const total = items
+    .filter((x) => {
+      const price = upsell ? x.upsell_price || x.price : x.price;
+      return price != null;
+    })
     .reduce((acc, x) => {
       const price = upsell ? x.upsell_price || x.price : x.price;
-      if (price.type === 'recurring') {
+      if (price?.type === 'recurring') {
         renew = renew.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
 
         if (includeFreeTrial) {

package/es/histroy/invoice/list.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-type Props = {
-    customer_id: string;
-};
-export default function CustomerInvoiceList({ customer_id }: Props): import("react").JSX.Element;
-export {};

package/es/histroy/mini-invoice/list.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-type Props = {
-    subscription: TSubscriptionExpanded;
-};
-export default function MiniInvoiceList({ subscription }: Props): import("react").JSX.Element;
-export {};

package/lib/histroy/invoice/list.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-type Props = {
-    customer_id: string;
-};
-export default function CustomerInvoiceList({ customer_id }: Props): import("react").JSX.Element;
-export {};

package/lib/histroy/mini-invoice/list.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-type Props = {
-    subscription: TSubscriptionExpanded;
-};
-export default function MiniInvoiceList({ subscription }: Props): import("react").JSX.Element;
-export {};