payment-kit 1.13.72 → 1.13.74

package/src/pages/admin/customers/customers/detail.tsx

@@ -2,10 +2,11 @@
 import DidAddress from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TCustomerExpanded } from '@did-pay/types';
+import type { TCustomerExpanded, TPaymentMethodExpanded } from '@did-pay/types';
 import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
+import { fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
 import { isEmpty } from 'lodash';
 import { FlagEmoji } from 'react-international-phone';
@@ -22,6 +23,7 @@ import MetadataEditor from '../../../../components/metadata/editor';
 import PaymentList from '../../../../components/payment-intent/list';
 import SectionHeader from '../../../../components/section/header';
 import SubscriptionList from '../../../../components/subscription/list';
+import { useSettingsContext } from '../../../../contexts/settings';
 import api from '../../../../libs/api';
 import { formatError, formatTime } from '../../../../libs/util';
 
@@ -29,9 +31,43 @@ const fetchData = (id: string): Promise<TCustomerExpanded> => {
   return api.get(`/api/customers/${id}`).then((res) => res.data);
 };
 
+function getTokenBalances(customer: TCustomerExpanded, paymentMethods: TPaymentMethodExpanded[]) {
+  const tokens: { currency: string; balance: string }[] = [];
+  // @ts-ignore
+  const currencies = paymentMethods.reduce((acc, x) => acc.concat(x.payment_currencies), []);
+
+  if (customer.balance) {
+    const currency = currencies.find((x: any) => x.symbol === 'USD');
+    tokens.push({
+      // @ts-ignore
+      currency: currency.symbol,
+      // @ts-ignore
+      balance: fromUnitToToken(customer.balance, currency.decimal),
+    });
+  }
+
+  if (customer.token_balance) {
+    Object.keys(customer.token_balance).forEach((currencyId) => {
+      const currency = currencies.find((x: any) => x.id === currencyId);
+      // @ts-ignore
+      if (currency && customer.token_balance[currencyId] !== '0') {
+        tokens.push({
+          // @ts-ignore
+          currency: currency.symbol,
+          // @ts-ignore
+          balance: fromUnitToToken(customer.token_balance[currencyId], currency.decimal),
+        });
+      }
+    });
+  }
+
+  return tokens;
+}
+
 export default function CustomerDetail(props: { id: string }) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
+  const { settings } = useSettingsContext();
   const [state, setState] = useSetState({
     adding: {
       price: false,
@@ -92,6 +128,8 @@ export default function CustomerDetail(props: { id: string }) {
     }
   };
 
+  const tokenBalances = getTokenBalances(data, settings.paymentMethods);
+
   return (
     <Root direction="column" spacing={4} sx={{ mb: 4 }}>
       <Box>
@@ -123,8 +161,14 @@ export default function CustomerDetail(props: { id: string }) {
             <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
             <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} divider />
             <InfoMetric label={t('admin.customer.spent')} value={0} divider />
-            <InfoMetric label={t('admin.customer.refund')} value={0} divider />
-            <InfoMetric label={t('admin.customer.dispute')} value={0} divider />
+            {tokenBalances.map((x) => (
+              <InfoMetric
+                key={x.currency}
+                label={t('admin.customer.balance', { currency: x.currency })}
+                value={x.balance}
+                divider
+              />
+            ))}
           </Stack>
         </Box>
       </Box>

package/src/pages/admin/overview.tsx

@@ -1,3 +1,23 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Button, Stack } from '@mui/material';
+import { Link } from 'react-router-dom';
+
 export default function Overview() {
-  return <div>Overview</div>;
+  const { t } = useLocaleContext();
+  return (
+    <Stack direction="row" spacing={2}>
+      <Button component={Link} variant="outlined" to="/admin/products">
+        {t('admin.products')}
+      </Button>
+      <Button component={Link} variant="outlined" to="/admin/payments">
+        {t('admin.payments')}
+      </Button>
+      <Button component={Link} variant="outlined" to="/admin/customers">
+        {t('admin.customers')}
+      </Button>
+      <Button component={Link} variant="outlined" to="/admin/billing/subscriptions">
+        {t('admin.subscriptions')}
+      </Button>
+    </Stack>
+  );
 }

package/src/pages/admin/payments/intents/detail.tsx

@@ -2,8 +2,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TPaymentIntentExpanded } from '@did-pay/types';
-import { ArrowBackOutlined, Edit } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { ArrowBackOutlined, Edit, InfoOutlined } from '@mui/icons-material';
+import { Alert, Box, Button, CircularProgress, Stack, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
@@ -118,7 +118,16 @@ export default function PaymentIntentDetail(props: { id: string }) {
           <InfoRow label={t('common.amount')} value={amount} />
           <InfoRow
             label={t('common.status')}
-            value={<Status label={data.status} color={getPaymentIntentStatusColor(data.status)} />}
+            value={
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Status label={data.status} color={getPaymentIntentStatusColor(data.status)} />
+                {data.last_payment_error && (
+                  <Tooltip title={<pre>{JSON.stringify(data.last_payment_error, null, 2)}</pre>}>
+                    <InfoOutlined fontSize="small" color="error" />
+                  </Tooltip>
+                )}
+              </Stack>
+            }
           />
           <InfoRow label={t('common.description')} value={data.description} />
           <InfoRow label={t('common.statementDescriptor')} value={data.statement_descriptor} />

package/src/pages/customer/invoice.tsx

@@ -5,7 +5,8 @@ import type { TInvoiceExpanded } from '@did-pay/types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
-import { Link, useParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { Link, useParams, useSearchParams } from 'react-router-dom';
 
 import TxLink from '../../components/blockchain/tx';
 import Currency from '../../components/currency';
@@ -24,6 +25,7 @@ const fetchData = (id: string): Promise<TInvoiceExpanded> => {
 // TODO: download feature using: https://react-pdf.org/
 export default function CustomerHome() {
   const { t } = useLocaleContext();
+  const [searchParams] = useSearchParams();
   const { connectApi } = useSessionContext();
   const params = useParams<{ id: string }>();
   const [state, setState] = useSetState({
@@ -39,6 +41,11 @@ export default function CustomerHome() {
       connectApi.open({
         action: 'collect',
         timeout: 5 * 60 * 1000,
+        messages: {
+          title: t('customer.invoice.pay'),
+          success: t('customer.invoice.paySuccess'),
+          error: t('customer.invoice.payError'),
+        },
         extraParams: { invoiceId: params.id },
         onSuccess: async () => {
           connectApi.close();
@@ -60,6 +67,13 @@ export default function CustomerHome() {
     }
   };
 
+  useEffect(() => {
+    if (searchParams.get('action') === 'pay') {
+      onPay();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   if (error) {
     return <Alert severity="error">{formatError(error)}</Alert>;
   }

package/src/pages/customer/subscription/index.tsx

@@ -70,20 +70,27 @@ export default function CustomerSubscription() {
               value={formatTime(data.start_date ? data.start_date * 1000 : data.created_at)}
               divider
             />
-            {!data.cancel_at && (
+            {data.status === 'active' && !data.cancel_at && (
               <InfoMetric
                 label={t('admin.subscription.nextInvoice')}
                 value={formatTime(data.current_period_end * 1000)}
                 divider
               />
             )}
-            {data.cancel_at && (
+            {['active', 'trailing'].includes(data.status) && data.cancel_at && (
               <InfoMetric
                 label={t('admin.subscription.cancel.schedule')}
                 value={formatTime(data.cancel_at * 1000)}
                 divider
               />
             )}
+            {data.status === 'canceled' && data.canceled_at && (
+              <InfoMetric
+                label={t('admin.subscription.cancel.done')}
+                value={formatTime(data.canceled_at * 1000)}
+                divider
+              />
+            )}
           </Stack>
         </Box>
       </Box>

package/tests/api/libs/subscription.spec.ts

@@ -0,0 +1,45 @@
+import { getDaysUntilDue, getDueUnit } from '../../../api/src/libs/subscription';
+
+describe('getDueUnit', () => {
+  it('should return 60 for recurring interval of "hour"', () => {
+    const result = getDueUnit('hour');
+    expect(result).toBe(60);
+  });
+
+  it('should return 3600 for recurring interval of "day"', () => {
+    const result = getDueUnit('day');
+    expect(result).toBe(3600);
+  });
+
+  it('should return 86400 for recurring interval other than "hour" or "day"', () => {
+    expect(getDueUnit('week')).toBe(86400);
+    expect(getDueUnit('month')).toBe(86400);
+    expect(getDueUnit('year')).toBe(86400);
+  });
+});
+
+describe('getDaysUntilDue', () => {
+  it('should return the number of days from the query when days_until_due is present', () => {
+    const query = { days_until_due: '5' };
+    const result = getDaysUntilDue(query);
+    expect(result).toBe(5);
+  });
+
+  it('should return the number of days from the environment variable when days_until_due is not present in the query', () => {
+    process.env.PAYMENT_DAYS_UNTIL_DUE = '10';
+    const result = getDaysUntilDue({});
+    expect(result).toBe(10);
+    delete process.env.PAYMENT_DAYS_UNTIL_DUE;
+  });
+
+  it('should return null when days_until_due is not present in the query and the environment variable', () => {
+    const result = getDaysUntilDue({});
+    expect(result).toBe(null);
+  });
+
+  it('should return null when days_until_due is not a number', () => {
+    const query = { days_until_due: 'not a number' };
+    const result = getDaysUntilDue(query);
+    expect(result).toBe(null);
+  });
+});