payment-kit 1.13.255 → 1.13.256

package/api/src/routes/invoices.ts

@@ -116,57 +116,61 @@ router.get('/', authMine, async (req, res) => {
 
     // push staking info as first invoice if we are on the last page
     let subscription;
-    if (where.subscription_id && include_staking) {
-      subscription = await Subscription.findByPk(where.subscription_id);
-      if (subscription?.payment_details?.arcblock?.staking?.tx_hash && page === Math.ceil((count || 1) / pageSize)) {
-        const method = await PaymentMethod.findOne({ where: { type: 'arcblock', livemode: subscription.livemode } });
-        if (method) {
-          const client = method.getOcapClient();
-          const { address } = subscription.payment_details.arcblock.staking;
-          const { state } = await client.getStakeState({ address });
-          const last =
-            list[list.length - 1] ||
-            (await Invoice.findOne({ where: { subscription_id: subscription.id }, order: [['created_at', 'ASC']] }));
+    if (where.subscription_id && include_staking && page === Math.ceil((count || 1) / pageSize)) {
+      try {
+        subscription = await Subscription.findByPk(where.subscription_id);
+        if (subscription?.payment_details?.arcblock?.staking?.tx_hash) {
+          const method = await PaymentMethod.findOne({ where: { type: 'arcblock', livemode: subscription.livemode } });
+          if (method) {
+            const client = method.getOcapClient();
+            const { address } = subscription.payment_details.arcblock.staking;
+            const { state } = await client.getStakeState({ address });
+            const last =
+              list[list.length - 1] ||
+              (await Invoice.findOne({ where: { subscription_id: subscription.id }, order: [['created_at', 'ASC']] }));
 
-          if (state && last) {
-            const data = JSON.parse(state.data?.value || '{}');
-            list.push({
-              id: address as string,
-              status: 'paid',
-              description: 'Subscription staking',
-              billing_reason: 'subscription_create',
-              total: data[subscription.id],
-              amount_due: '0',
-              amount_paid: data[subscription.id],
-              amount_remaining: '0',
-              ...pick(last, [
-                'number',
-                'paid',
-                'auto_advance',
-                'currency_id',
-                'customer_id',
-                'subscription_id',
-                'period_start',
-                'period_end',
-                'created_at',
-                'updated_at',
-              ]),
-              // @ts-ignore
-              paymentCurrency: await PaymentCurrency.findByPk(last.currency_id),
-              paymentMethod: method,
-              // @ts-ignore
-              customer: await Customer.findByPk(last.customer_id),
-              metadata: {
-                payment_details: {
-                  arcblock: {
-                    tx_hash: subscription.payment_details.arcblock.staking.tx_hash,
-                    payer: subscription.payment_details.arcblock.payer,
+            if (state && last) {
+              const data = JSON.parse(state.data?.value || '{}');
+              list.push({
+                id: address as string,
+                status: 'paid',
+                description: 'Subscription staking',
+                billing_reason: 'subscription_create',
+                total: data[subscription.id],
+                amount_due: '0',
+                amount_paid: data[subscription.id],
+                amount_remaining: '0',
+                ...pick(last, [
+                  'number',
+                  'paid',
+                  'auto_advance',
+                  'currency_id',
+                  'customer_id',
+                  'subscription_id',
+                  'period_start',
+                  'period_end',
+                  'created_at',
+                  'updated_at',
+                ]),
+                // @ts-ignore
+                paymentCurrency: await PaymentCurrency.findByPk(last.currency_id),
+                paymentMethod: method,
+                // @ts-ignore
+                customer: await Customer.findByPk(last.customer_id),
+                metadata: {
+                  payment_details: {
+                    arcblock: {
+                      tx_hash: subscription.payment_details.arcblock.staking.tx_hash,
+                      payer: subscription.payment_details.arcblock.payer,
+                    },
                   },
                 },
-              },
-            });
+              });
+            }
           }
         }
+      } catch (err) {
+        console.error('Failed to include staking record in invoice list', err);
       }
     }
 

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.13.255
+version: 1.13.256
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.255",
+  "version": "1.13.256",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -51,7 +51,7 @@
     "@arcblock/ux": "^2.9.79",
     "@arcblock/validator": "^1.18.117",
     "@blocklet/logger": "1.16.26",
-    "@blocklet/payment-react": "1.13.255",
+    "@blocklet/payment-react": "1.13.256",
     "@blocklet/sdk": "1.16.26",
     "@blocklet/ui-react": "^2.9.79",
     "@blocklet/uploader": "^0.1.6",
@@ -116,7 +116,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.26",
     "@arcblock/eslint-config-ts": "^0.3.0",
-    "@blocklet/payment-types": "1.13.255",
+    "@blocklet/payment-types": "1.13.256",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -155,5 +155,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "79416ada68496df6d233a59244a0cec245414813"
+  "gitHead": "5534c9d95122867a83c0d67eb3d1a27675c370b7"
 }

package/src/app.tsx

@@ -4,7 +4,6 @@ import Center from '@arcblock/ux/lib/Center';
 import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
 import { ThemeProvider, createTheme } from '@arcblock/ux/lib/Theme';
 import { ToastProvider } from '@arcblock/ux/lib/Toast';
-import { MiniInvoiceList } from '@blocklet/payment-react';
 import { CircularProgress } from '@mui/material';
 import React, { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -24,6 +23,7 @@ const CustomerHome = React.lazy(() => import('./pages/customer/index'));
 const CustomerInvoiceDetail = React.lazy(() => import('./pages/customer/invoice/detail'));
 const CustomerInvoicePastDue = React.lazy(() => import('./pages/customer/invoice/past-due'));
 const CustomerSubscriptionDetail = React.lazy(() => import('./pages/customer/subscription/detail'));
+const CustomerSubscriptionEmbed = React.lazy(() => import('./pages/customer/subscription/embed'));
 const CustomerSubscriptionChangePlan = React.lazy(() => import('./pages/customer/subscription/change-plan'));
 const CustomerSubscriptionChangePayment = React.lazy(() => import('./pages/customer/subscription/change-payment'));
 
@@ -91,8 +91,18 @@ function App() {
                     </Layout>
                   }
                 />
-                <Route key="customer-embed" path="/customer/embed/subscription" element={<MiniInvoiceList />} />,
-                <Route key="subscription-embed" path="/embed/customer/subscription" element={<MiniInvoiceList />} />,
+                <Route
+                  key="customer-embed"
+                  path="/customer/embed/subscription"
+                  element={<CustomerSubscriptionEmbed />}
+                />
+                ,
+                <Route
+                  key="subscription-embed"
+                  path="/embed/customer/subscription"
+                  element={<CustomerSubscriptionEmbed />}
+                />
+                ,
                 <Route
                   key="customer-due"
                   path="/customer/invoice/past-due"

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

@@ -0,0 +1,232 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import {
+  Status,
+  api,
+  formatBNStr,
+  formatError,
+  formatSubscriptionProduct,
+  formatTime,
+  formatToDate,
+  getDidConnectQueryParams,
+  getInvoiceStatusColor,
+  getPrefix,
+  getSubscriptionStatusColor,
+} from '@blocklet/payment-react';
+import type { Paginated, TInvoiceExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Divider,
+  Link,
+  List,
+  ListItem,
+  ListSubheader,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { useRequest } from 'ahooks';
+import { useMemo } from 'react';
+import { joinURL, withQuery } from 'ufo';
+
+const fetchInvoiceData = (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);
+};
+
+const fetchSubscriptionData = (id: string, authToken: string): Promise<TSubscriptionExpanded> => {
+  if (!id) {
+    throw new Error('Subscription ID is missing');
+  }
+
+  return api.get(`/api/subscriptions/${id}?authToken=${authToken}`).then((res) => res.data);
+};
+
+export default function SubscriptionEmbed() {
+  const { t, locale } = useLocaleContext();
+  const params = new URL(window.location.href).searchParams;
+
+  const subscriptionId = params.get('id') || '';
+  const authToken = params.get('authToken') || '';
+
+  const { data: subscription, error, loading } = useRequest(() => fetchSubscriptionData(subscriptionId, authToken));
+  const { data } = useRequest(() =>
+    fetchInvoiceData({
+      page: 1,
+      pageSize: 20,
+      status: 'open,paid,uncollectible',
+      subscription_id: subscriptionId,
+      authToken,
+      ignore_zero: true,
+      include_staking: true,
+    })
+  );
+
+  const subscriptionPageUrl: string = useMemo(() => {
+    if (!subscription) {
+      return '#';
+    }
+
+    const pageUrl: string = joinURL(getPrefix(), `/customer/subscription/${subscription.id}`);
+
+    return withQuery(pageUrl, {
+      source: 'embed',
+      ...getDidConnectQueryParams({ forceConnected: subscription.customer.did }),
+    });
+  }, [subscription]);
+
+  if (error) {
+    return (
+      <Position>
+        <Alert severity="error">{formatError(error)}</Alert>
+      </Position>
+    );
+  }
+  if (!subscription || loading) {
+    return (
+      <Position>
+        <CircularProgress />
+      </Position>
+    );
+  }
+
+  const invoices = data?.list || [];
+
+  const infoList = [
+    {
+      name: t('payment.customer.subscriptions.plan'),
+      value: (
+        <Typography fontWeight={600} sx={{ marginRight: '10px' }}>
+          {formatSubscriptionProduct(subscription.items)}
+        </Typography>
+      ),
+    },
+    {
+      name: t('common.status'),
+      value: <Status label={subscription.status} color={getSubscriptionStatusColor(subscription.status)} />,
+    },
+  ];
+
+  if (subscription.status === 'active' || subscription.status === 'trialing') {
+    infoList.push({
+      name: t('payment.customer.subscriptions.nextInvoice'),
+      value: (
+        <Typography
+          sx={{
+            color: 'success.main',
+            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',
+          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', 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>
+            {(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, locale, 'YYYY-MM-DD')}
+                    </Typography>
+                    <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
+                      {formatBNStr(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)} />
+                    </Typography>
+                  </ListItem>
+                );
+              })
+            )}
+          </List>
+        </Box>
+        <Stack direction="row" justifyContent="center" spacing={2} sx={{ mt: 2 }}>
+          {subscription.service_actions?.map((x) => (
+            // @ts-ignore
+            <Button
+              component={Link}
+              key={x.name}
+              variant={x.variant}
+              color={x.color}
+              href={x.link}
+              size="small"
+              target="_blank"
+              sx={{ textDecoration: 'none !important' }}>
+              {x.text[locale] || x.text.en || x.name}
+            </Button>
+          ))}
+          <Button
+            variant="contained"
+            sx={{ color: '#fff!important', width: subscription.service_actions?.length ? 'auto' : '100%' }}
+            target="_blank"
+            href={subscriptionPageUrl}>
+            {t('payment.customer.subscriptions.view')}
+          </Button>
+        </Stack>
+      </Box>
+    </Position>
+  );
+}
+
+function Position({ children }: any) {
+  return (
+    <Box
+      className="mini-invoice-box" // 预留 class 用于设置定位
+      sx={{
+        padding: '8px',
+        width: '100%',
+        maxWidth: '500px',
+        background: '#fff',
+        margin: '0 auto',
+      }}>
+      {children}
+    </Box>
+  );
+}