payment-kit 1.18.51 → 1.18.53

package/api/src/routes/invoices.ts

@@ -12,6 +12,7 @@ import { createListParamSchema, getOrder, getWhereFromKvQuery, MetadataSchema }
 import { authenticate } from '../libs/security';
 import { expandLineItems } from '../libs/session';
 import { formatMetadata, getBlockletJson, getUserOrAppInfo } from '../libs/util';
+import dayjs from '../libs/dayjs';
 import { Customer } from '../store/models/customer';
 import { Invoice } from '../store/models/invoice';
 import { InvoiceItem } from '../store/models/invoice-item';
@@ -671,4 +672,50 @@ router.put('/:id', authAdmin, async (req, res) => {
   }
 });
 
+router.post('/:id/void', authAdmin, async (req, res) => {
+  const invoice = await Invoice.findByPk(req.params.id as string);
+  if (!invoice) {
+    return res.status(404).json({ error: 'Invoice not found' });
+  }
+  if (['paid', 'void', 'draft'].includes(invoice.status)) {
+    return res.status(400).json({ error: 'Can not void this invoice' });
+  }
+  const paymentMethod = await PaymentMethod.findByPk(invoice.default_payment_method_id);
+  if (!paymentMethod) {
+    return res.status(400).json({ error: 'Payment method not found' });
+  }
+  if (invoice.subscription_id) {
+    const subscription = await Subscription.findByPk(invoice.subscription_id);
+    if (subscription && !subscription.isImmutable()) {
+      return res.status(400).json({ error: 'Subscription is not immutable, can not void invoice' });
+    }
+  }
+  try {
+    if (invoice.payment_intent_id) {
+      const paymentIntent = await PaymentIntent.findByPk(invoice.payment_intent_id);
+      if (paymentIntent && paymentIntent.status !== 'canceled') {
+        await paymentIntent.update({
+          status: 'canceled',
+          canceled_at: dayjs().unix(),
+          cancellation_reason: 'void_invoice',
+        });
+      }
+    }
+    if (paymentMethod.type === 'stripe' && invoice.metadata?.stripe_id) {
+      const client = paymentMethod.getStripeClient();
+      await client.invoices.voidInvoice(invoice.metadata.stripe_id);
+    }
+    await invoice.update({
+      status: 'void',
+      status_transitions: {
+        ...(invoice.status_transitions || {}),
+        voided_at: dayjs().unix(),
+      },
+    });
+    return res.json(invoice);
+  } catch (error) {
+    logger.error('Failed to void invoice', { error, invoiceId: invoice.id });
+    return res.status(400).json({ error: 'Failed to void invoice' });
+  }
+});
 export default router;

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.18.51
+version: 1.18.53
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.51",
+  "version": "1.18.53",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -44,31 +44,31 @@
     ]
   },
   "dependencies": {
-    "@abtnode/cron": "^1.16.43",
-    "@arcblock/did": "^1.20.12",
+    "@abtnode/cron": "^1.16.44",
+    "@arcblock/did": "^1.20.13",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.13.61",
-    "@arcblock/did-util": "^1.20.12",
-    "@arcblock/jwt": "^1.20.12",
-    "@arcblock/ux": "^2.13.61",
-    "@arcblock/validator": "^1.20.12",
+    "@arcblock/did-connect": "^2.13.62",
+    "@arcblock/did-util": "^1.20.13",
+    "@arcblock/jwt": "^1.20.13",
+    "@arcblock/ux": "^2.13.62",
+    "@arcblock/validator": "^1.20.13",
     "@blocklet/did-space-js": "^1.0.57",
-    "@blocklet/js-sdk": "^1.16.43",
-    "@blocklet/logger": "^1.16.43",
-    "@blocklet/payment-react": "1.18.51",
-    "@blocklet/sdk": "^1.16.43",
-    "@blocklet/ui-react": "^2.13.61",
+    "@blocklet/js-sdk": "^1.16.44",
+    "@blocklet/logger": "^1.16.44",
+    "@blocklet/payment-react": "1.18.53",
+    "@blocklet/sdk": "^1.16.44",
+    "@blocklet/ui-react": "^2.13.62",
     "@blocklet/uploader": "^0.1.95",
     "@blocklet/xss": "^0.1.36",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/asset": "^1.20.12",
-    "@ocap/client": "^1.20.12",
-    "@ocap/mcrypto": "^1.20.12",
-    "@ocap/util": "^1.20.12",
-    "@ocap/wallet": "^1.20.12",
+    "@ocap/asset": "^1.20.13",
+    "@ocap/client": "^1.20.13",
+    "@ocap/mcrypto": "^1.20.13",
+    "@ocap/util": "^1.20.13",
+    "@ocap/wallet": "^1.20.13",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.0",
@@ -121,9 +121,9 @@
     "web3": "^4.16.0"
   },
   "devDependencies": {
-    "@abtnode/types": "^1.16.43",
+    "@abtnode/types": "^1.16.44",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.51",
+    "@blocklet/payment-types": "1.18.53",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -153,7 +153,7 @@
     "vite": "^5.3.5",
     "vite-node": "^2.0.4",
     "vite-plugin-babel-import": "^2.0.5",
-    "vite-plugin-blocklet": "^0.9.32",
+    "vite-plugin-blocklet": "^0.9.33",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
@@ -169,5 +169,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "7aa2db4015aad46e2eb8529ff013791d5321c7bf"
+  "gitHead": "39ab3a392c2367ceff0441fa968c442074827d92"
 }

package/src/components/invoice/action.tsx

@@ -68,6 +68,10 @@ export default function InvoiceActions({ data, variant, onChange, mode }: Props)
           Toast.error(result.error);
         }
       }
+      if (state.action === 'void') {
+        await api.post(`/api/invoices/${data.id}/void`).then((res) => res.data);
+        Toast.success(t('admin.invoice.void.success'));
+      }
       onChange(state.action);
     } catch (err) {
       console.error(err);
@@ -99,6 +103,13 @@ export default function InvoiceActions({ data, variant, onChange, mode }: Props)
         color: 'primary',
         divider: true,
       },
+    isAdmin &&
+      !['paid', 'void', 'draft'].includes(data.status) && {
+        label: t('admin.invoice.void.title'),
+        handler: () => setState({ action: 'void' }),
+        color: 'primary',
+        divider: true,
+      },
     {
       label: t('admin.customer.view'),
       handler: () => {
@@ -138,6 +149,15 @@ export default function InvoiceActions({ data, variant, onChange, mode }: Props)
           loading={state.loading}
         />
       )}
+      {state.action === 'void' && (
+        <ConfirmDialog
+          onConfirm={handleAction}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.invoice.void.title')}
+          message={t('admin.invoice.void.tip')}
+          loading={state.loading}
+        />
+      )}
     </ClickBoundary>
   );
 }

package/src/components/invoice/list.tsx

@@ -174,7 +174,10 @@ export default function InvoiceList({
           const item = data.list[index] as TInvoiceExpanded;
           return (
             <InvoiceLink invoice={item}>
-              <Typography component="strong" fontWeight={600}>
+              <Typography
+                component="strong"
+                fontWeight={600}
+                sx={{ textDecoration: item.status === 'void' ? 'line-through' : 'none' }}>
                 {formatBNStr(item?.total, item?.paymentCurrency.decimal)}&nbsp;
                 {item?.paymentCurrency.symbol}
               </Typography>

package/src/components/payment-intent/list.tsx

@@ -117,12 +117,10 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
+          const highlight = item.amount_received === '0' && item.status !== 'canceled';
           return (
             <Link to={`/admin/payments/${item.id}`}>
-              <Typography
-                component="strong"
-                sx={{ color: item.amount_received === '0' ? 'warning.main' : 'inherit' }}
-                fontWeight={600}>
+              <Typography component="strong" sx={{ color: highlight ? 'warning.main' : 'inherit' }} fontWeight={600}>
                 {formatBNStr(
                   item.amount_received === '0' ? item.amount : item.amount_received,
                   item?.paymentCurrency.decimal

package/src/components/payouts/portal/list.tsx

@@ -47,6 +47,7 @@ type ListProps = {
   status?: string;
   customer_id?: string;
   currency_id?: string;
+  setHasRevenues?: (hasRevenues: boolean) => void;
 };
 
 const getListKey = (props: ListProps) => {
@@ -60,9 +61,10 @@ CustomerRevenueList.defaultProps = {
   status: '',
   currency_id: '',
   customer_id: '',
+  setHasRevenues: () => {},
 };
 
-export default function CustomerRevenueList({ currency_id, status, customer_id }: ListProps) {
+export default function CustomerRevenueList({ currency_id, status, customer_id, setHasRevenues }: ListProps) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile('sm');
 
@@ -87,6 +89,9 @@ export default function CustomerRevenueList({ currency_id, status, customer_id }
     debounce(() => {
       fetchData(search).then((res: any) => {
         setData(res);
+        if (setHasRevenues) {
+          setHasRevenues(res.count > 0);
+        }
       });
     }, 300)();
   }, [search]);

package/src/locales/en.tsx

@@ -524,6 +524,11 @@ export default flat({
         tip: 'Are you sure you want to return the stake? This action will return the stake to the customer immediately.',
         success: 'Stake return application has been successfully created',
       },
+      void: {
+        title: 'Void Invoice',
+        tip: 'Are you sure you want to void this invoice? This action will immediately void the invoice.',
+        success: 'Invoice voided',
+      },
     },
     subscription: {
       view: 'View subscription',

package/src/locales/zh.tsx

@@ -513,6 +513,11 @@ export default flat({
         tip: '您确定要退还质押吗？此操作将立即退还质押给客户。',
         success: '质押退还申请已提交',
       },
+      void: {
+        title: '作废账单',
+        tip: '您确定要作废此账单吗？此操作将立即作废账单。',
+        success: '账单作废成功',
+      },
     },
     subscription: {
       view: '查看订阅',

package/src/pages/customer/index.tsx

@@ -197,6 +197,7 @@ export default function CustomerHome() {
   const navigate = useNavigate();
   const [subscriptionStatus, setSubscriptionStatus] = useState(false);
   const [hasSubscriptions, setHasSubscriptions] = useState(false);
+  const [hasRevenues, setHasRevenues] = useState(false);
   const { startTransition } = useTransitionContext();
   const {
     data,
@@ -433,7 +434,7 @@ export default function CustomerHome() {
   );
 
   const InvoiceCard = loadingCard ? (
-    <CardSkeleton height={300} />
+    <CardSkeleton height={200} />
   ) : (
     <Box className="base-card section section-invoices">
       <Box className="section-header">
@@ -460,16 +461,15 @@ export default function CustomerHome() {
     </Box>
   );
 
-  const RevenueCard = loadingCard ? (
-    <CardSkeleton height={200} />
-  ) : (
-    <Box className="base-card section section-revenue">
-      <Box className="section-header">
-        <Typography variant="h3">{t('customer.payout.title')}</Typography>
+  const RevenueCard =
+    loadingCard || !hasRevenues ? null : (
+      <Box className="base-card section section-revenue">
+        <Box className="section-header">
+          <Typography variant="h3">{t('customer.payout.title')}</Typography>
+        </Box>
+        <CustomerRevenueList setHasRevenues={setHasRevenues} />
       </Box>
-      <CustomerRevenueList />
-    </Box>
-  );
+    );
 
   return (
     <Content>

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

@@ -37,11 +37,11 @@ import {
   Typography,
 } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
+import SplitButton from '@arcblock/ux/lib/SplitButton';
 import { useMemo } from 'react';
 import { joinURL, withQuery } from 'ufo';
 import prettyMs from 'pretty-ms-i18n';
 import { isEmpty } from 'lodash';
-import { PaymentOutlined } from '@mui/icons-material';
 import InfoRow from '../../../components/info-row';
 import InfoCard from '../../../components/info-card';
 import { useSessionContext } from '../../../contexts/session';
@@ -82,7 +82,6 @@ export default function SubscriptionEmbed() {
   const [state, setState] = useSetState({
     batchPay: false,
   });
-
   const { session, connectApi } = useSessionContext();
 
   const subscriptionId = params.get('id') || '';
@@ -327,19 +326,30 @@ export default function SubscriptionEmbed() {
                   {x.text[locale] || x.text.en || x.name}
                 </Button>
               ))}
-            <Button
-              variant="contained"
-              sx={{ width: subscription.service_actions?.length ? 'auto' : '100%' }}
-              target="_blank"
-              href={subscriptionPageUrl}>
-              {t('payment.customer.subscriptions.view')}
-            </Button>
-            {hasPastDue && (
-              <Tooltip title={t('admin.subscription.batchPay.button')}>
-                <Button variant="outlined" color="error" onClick={() => setState({ batchPay: true })}>
-                  <PaymentOutlined />
-                </Button>
-              </Tooltip>
+            {hasPastDue ? (
+              <SplitButton
+                size="small"
+                color="error"
+                variant="contained"
+                menu={[
+                  <SplitButton.Item key="view-subscription" component={Link} target="_blank" href={subscriptionPageUrl}>
+                    {t('payment.customer.subscriptions.view')}
+                  </SplitButton.Item>,
+                ]}>
+                {() => (
+                  <Button variant="contained" color="error" onClick={() => setState({ batchPay: true })}>
+                    {t('payment.subscription.overdue.payNow')}
+                  </Button>
+                )}
+              </SplitButton>
+            ) : (
+              <Button
+                variant="contained"
+                sx={{ width: subscription.service_actions?.length ? 'auto' : '100%' }}
+                target="_blank"
+                href={subscriptionPageUrl}>
+                {t('payment.customer.subscriptions.view')}
+              </Button>
             )}
           </Stack>
         </Box>