payment-kit 1.15.22 → 1.15.24

package/api/src/routes/invoices.ts

@@ -10,7 +10,7 @@ import { createListParamSchema, getWhereFromKvQuery, MetadataSchema } from '../l
 import { authenticate } from '../libs/security';
 import { expandLineItems } from '../libs/session';
 import { formatMetadata } from '../libs/util';
-import { Refund } from '../store/models';
+import { Refund, SetupIntent } from '../store/models';
 import { Customer } from '../store/models/customer';
 import { Invoice } from '../store/models/invoice';
 import { InvoiceItem } from '../store/models/invoice-item';
@@ -131,23 +131,27 @@ router.get('/', authMine, async (req, res) => {
         subscription = await Subscription.findByPk(query.subscription_id);
         if (subscription?.payment_details?.arcblock?.staking?.tx_hash) {
           const method = await PaymentMethod.findOne({ where: { type: 'arcblock', livemode: subscription.livemode } });
-          if (method) {
+          const setup = await SetupIntent.findOne({
+            where: {
+              customer_id: subscription.customer_id,
+              payment_method_id: method?.id,
+              metadata: { subscription_id: subscription.id },
+            },
+            order: [['created_at', 'ASC']],
+          });
+          const currencyId = setup?.currency_id || subscription.currency_id;
+          const currency = await PaymentCurrency.findByPk(currencyId);
+          if (method && currency) {
             const { address } = subscription.payment_details.arcblock.staking;
             const firstInvoice = await Invoice.findOne({
-              where: { subscription_id: subscription.id },
+              where: { subscription_id: subscription.id, currency_id: currencyId },
               order: [['created_at', 'ASC']],
               include: [{ model: PaymentCurrency, as: 'paymentCurrency' }],
             });
-            const last = query.o === 'asc' ? list?.[list.length - 1] : list?.[0];
-            if (subscription.payment_details.arcblock.staking.tx_hash && firstInvoice) {
+            if (firstInvoice) {
               const customer = await Customer.findByPk(firstInvoice.customer_id);
-              const currency =
-                // @ts-ignore
-                firstInvoice?.paymentCurrency ||
-                (await PaymentCurrency.findOne({
-                  where: { payment_method_id: method.id, is_base_currency: true },
-                }));
               const stakeAmountResult = await getSubscriptionStakeAmountSetup(subscription, method);
+              // @ts-ignore
               const stakeAmount = stakeAmountResult?.[currency?.contract] || '0';
 
               list.push({
@@ -187,7 +191,6 @@ router.get('/', authMine, async (req, res) => {
               const stakeRefundRecord = await Refund.findOne({
                 where: { subscription_id: subscription.id, status: 'succeeded', type: 'stake_return' },
               });
-
               if (stakeRefundRecord) {
                 list.unshift({
                   id: address as string,
@@ -198,18 +201,15 @@ router.get('/', authMine, async (req, res) => {
                   amount_due: '0',
                   amount_paid: stakeRefundRecord.amount,
                   amount_remaining: '0',
-                  ...pick(last, [
-                    'number',
-                    'paid',
-                    'auto_advance',
-                    'currency_id',
-                    'customer_id',
-                    'subscription_id',
-                    'period_start',
-                    'period_end',
-                    'created_at',
-                    'updated_at',
-                  ]),
+                  created_at: stakeRefundRecord.created_at,
+                  updated_at: stakeRefundRecord.updated_at,
+                  currency_id: stakeRefundRecord.currency_id,
+                  customer_id: stakeRefundRecord.customer_id,
+                  subscription_id: subscription.id,
+                  period_start: subscription.current_period_start,
+                  period_end: subscription.current_period_end,
+                  paid: true,
+                  ...pick(firstInvoice, ['number', 'auto_advance']),
                   // @ts-ignore
                   paymentCurrency: currency,
                   paymentMethod: method,

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

package/index.html

@@ -1,14 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico?imageFilter=resize&w=32" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
-    <meta name="theme-color" content="#4F6AF5" />
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app. </noscript>
-    <div id="app"></div>
-    <script type="module" src="/src/index.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico?imageFilter=resize&w=32" />
+  <link rel="preconnect" href="https://unpkg.com" crossorigin />
+  <link rel="preconnect" href="https://js.stripe.com" crossorigin />
+  <link rel="dns-prefetch" href="https://js.stripe.com" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+  <meta name="theme-color" content="#4F6AF5" />
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app. </noscript>
+  <div id="app"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.15.22",
+  "version": "1.15.24",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -13,6 +13,7 @@
     "clean": "node scripts/build-clean.js",
     "bundle": "tsc --noEmit && npm run bundle:client && npm run bundle:api",
     "bundle:client": "vite build",
+    "bundle:analyze": "cross-env ANALYZE=true vite build",
     "bundle:api": "npm run clean && tsc -p tsconfig.api.json && blocklet bundle --compact --monorepo --create-release --changelog",
     "build": "npm run clean && tsc -p tsconfig.api.json && npm run bundle:client",
     "types": "rm -rf types && tsc -p tsconfig.types.json && rm -f ../../packages/types/lib/*.d.ts && cp -f types/store/models/*.d.ts ../../packages/types/lib",
@@ -43,30 +44,29 @@
   },
   "dependencies": {
     "@abtnode/cron": "^1.16.32",
-    "@arcblock/did": "^1.18.136",
+    "@arcblock/did": "^1.18.137",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.10.51",
-    "@arcblock/did-util": "^1.18.136",
-    "@arcblock/jwt": "^1.18.136",
-    "@arcblock/ux": "^2.10.51",
-    "@arcblock/validator": "^1.18.136",
+    "@arcblock/did-connect": "^2.10.55",
+    "@arcblock/did-util": "^1.18.137",
+    "@arcblock/jwt": "^1.18.137",
+    "@arcblock/ux": "^2.10.55",
+    "@arcblock/validator": "^1.18.137",
     "@blocklet/js-sdk": "^1.16.32",
     "@blocklet/logger": "^1.16.32",
-    "@blocklet/payment-react": "1.15.22",
+    "@blocklet/payment-react": "1.15.24",
     "@blocklet/sdk": "^1.16.32",
-    "@blocklet/ui-react": "^2.10.51",
-    "@blocklet/uploader": "^0.1.46",
+    "@blocklet/ui-react": "^2.10.55",
+    "@blocklet/uploader": "^0.1.51",
     "@blocklet/xss": "^0.1.12",
     "@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.18.136",
-    "@ocap/client": "^1.18.136",
-    "@ocap/mcrypto": "^1.18.136",
-    "@ocap/util": "^1.18.136",
-    "@ocap/wallet": "^1.18.136",
-    "@react-pdf/renderer": "^3.4.4",
+    "@ocap/asset": "^1.18.137",
+    "@ocap/client": "^1.18.137",
+    "@ocap/mcrypto": "^1.18.137",
+    "@ocap/util": "^1.18.137",
+    "@ocap/wallet": "^1.18.137",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.0",
@@ -87,9 +87,11 @@
     "fastq": "^1.17.1",
     "flat": "^5.0.2",
     "google-libphonenumber": "^3.2.38",
+    "html2canvas": "^1.4.1",
     "iframe-resizer-react": "^1.1.1",
     "joi": "^17.13.3",
     "json-stable-stringify": "^1.1.1",
+    "jspdf": "^2.5.2",
     "lodash": "^4.17.21",
     "morgan": "^1.10.0",
     "mui-daterange-picker": "^1.0.5",
@@ -118,7 +120,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.32",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.15.22",
+    "@blocklet/payment-types": "1.15.24",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -128,6 +130,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "babel-plugin-lodash": "^3.3.4",
     "bumpp": "^8.2.1",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
@@ -138,12 +141,14 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3",
     "prettier-plugin-import-sort": "^0.0.7",
+    "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "type-fest": "^4.23.0",
     "typescript": "^4.9.5",
     "vite": "^5.3.5",
     "vite-node": "^2.0.4",
+    "vite-plugin-babel-import": "^2.0.5",
     "vite-plugin-blocklet": "^0.9.11",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
@@ -160,5 +165,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "12a3cbcf04d0c8bdbbf33c04d07cecfb24bd3e9b"
+  "gitHead": "8139f401d570847d397f27caeea4690d550b21b4"
 }

package/src/app.tsx

@@ -1,6 +1,7 @@
 import './global.css';
 
 import Center from '@arcblock/ux/lib/Center';
+import withTracker from '@arcblock/ux/lib/withTracker';
 import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
 // import { createTheme } from '@arcblock/ux/lib/Theme';
 import { ToastProvider } from '@arcblock/ux/lib/Toast';
@@ -143,6 +144,8 @@ function App() {
   );
 }
 
+const AppWithTracker = withTracker(App);
+
 export default function WrappedApp() {
   // While the blocklet is deploy to a sub path, this will be work properly.
   const prefix = window?.blocklet?.prefix || '/';
@@ -153,7 +156,7 @@ export default function WrappedApp() {
         serviceHost={prefix}
         protectedRoutes={['/admin/*', '/customer/*'].map((item) => joinURL(prefix, item))}>
         <Router basename={prefix}>
-          <App />
+          <AppWithTracker />
         </Router>
       </SessionProvider>
     </ToastProvider>

package/src/components/copyable.tsx

@@ -7,6 +7,7 @@ export default function Copyable({ text, children, style }: { text: string; chil
   const { locale } = useLocaleContext();
   return (
     <CopyButton
+      showTooltip={false}
       content={text}
       locale={locale}
       style={style}

package/src/components/customer/form.tsx

@@ -1,14 +1,11 @@
 import 'react-international-phone/style.css';
 
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { FormInput, PhoneInput, CountrySelect } from '@blocklet/payment-react';
+import { FormInput, PhoneInput, CountrySelect, validatePhoneNumber } from '@blocklet/payment-react';
 import { FormLabel, Stack } from '@mui/material';
-import { PhoneNumberUtil } from 'google-libphonenumber';
 import { Controller, useFormContext } from 'react-hook-form';
 import isEmail from 'validator/es/lib/isEmail';
 
-const phoneUtil = PhoneNumberUtil.getInstance();
-
 export default function CustomerForm() {
   const { t } = useLocaleContext();
   const { control } = useFormContext();
@@ -63,14 +60,9 @@ export default function CustomerForm() {
         placeholder={t('payment.checkout.customer.phonePlaceholder')}
         rules={{
           required: t('payment.checkout.required'),
-          validate: (x: string) => {
-            try {
-              const parsed = phoneUtil.parseAndKeepRawInput(x);
-              return phoneUtil.isValidNumber(parsed) ? true : t('payment.checkout.invalid');
-            } catch (err) {
-              console.error(err, x);
-              return t('payment.checkout.invalid');
-            }
+          validate: async (x: string) => {
+            const isValid = await validatePhoneNumber(x);
+            return isValid ? true : t('payment.checkout.invalid');
           },
         }}
       />

package/src/components/invoice-pdf/pdf.tsx

@@ -1,185 +1,118 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { formatTime, getPrefix } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
-import { Button } from '@mui/material';
-import {
-  Font,
-  PDFDownloadLink,
-  Document as PdfDocument,
-  Image as PdfImage,
-  Page as PdfPage,
-  Text as PdfText,
-  View as PdfView,
-} from '@react-pdf/renderer';
-import { joinURL } from 'ufo';
+import { Box, Button, CircularProgress } from '@mui/material';
+import JsPDF from 'jspdf';
+import { useEffect, useState } from 'react';
 
-import { getInvoiceRows } from '../invoice/table';
-import compose from './compose';
+import { loadFont, loadImage } from './utils';
+import { InvoiceTemplate } from './template';
 
-Font.register({
-  family: 'Noto Sans SC',
-  src: joinURL(getPrefix(), '/fonts/noto-sans-sc-chinese-simplified-500-normal.ttf'),
-});
+export function Download({ data }: { data: TInvoiceExpanded }) {
+  const { t } = useLocaleContext();
+  const [isReady, setIsReady] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
 
-function Document({ children }: any) {
-  return <PdfDocument>{children}</PdfDocument>;
-}
+  useEffect(() => {
+    const preload = async () => {
+      try {
+        const [fontLoaded] = await Promise.all([loadFont(), loadImage(window.blocklet.appLogo?.split('?')[0] || '')]);
+        setIsReady(fontLoaded);
+      } catch (error) {
+        console.error('Resource loading failed:', error);
+      }
+    };
+    preload();
+  }, []);
 
-function Text2({ className, value }: any) {
-  return <PdfText style={compose(`span ${className || ''}`)}>{value}</PdfText>;
-}
+  const generatePDF = async () => {
+    if (!isReady || isGenerating) return;
 
-function Text({ className, children }: any) {
-  return <PdfText style={compose(`span ${className || ''}`)}>{children}</PdfText>;
-}
+    try {
+      setIsGenerating(true);
 
-function View({ className, children }: any) {
-  return <PdfView style={compose(`view ${className || ''}`)}>{children}</PdfView>;
-}
+      const element = document.getElementById('invoice-template');
+      if (!element) return;
+      const html2canvas = (await import(/* webpackChunkName: "html2canvas" */ 'html2canvas')).default;
+      const canvas = await html2canvas(element, {
+        scale: 5,
+        useCORS: true,
+        logging: false,
+        windowWidth: 794,
+        windowHeight: 1123,
+        allowTaint: true,
+        backgroundColor: '#ffffff',
+        imageTimeout: 15000,
+        removeContainer: true,
+        onclone: (clonedDoc) => {
+          const clonedElement = clonedDoc.getElementById('invoice-template');
+          if (clonedElement) {
+            clonedElement.style.position = 'relative';
+            clonedElement.style.left = '0';
+            clonedElement.style.transform = 'scale(1)';
+            clonedElement.style.transformOrigin = 'top left';
+            clonedElement.style.textRendering = 'geometricPrecision';
+            (clonedElement.style as any)['-webkit-font-smoothing'] = 'antialiased';
+            (clonedElement.style as any)['-moz-osx-font-smoothing'] = 'grayscale';
+          }
+        },
+      });
 
-function Page({ className, children }: any) {
-  return (
-    <PdfPage size="A4" style={compose(`page ${className || ''}`)}>
-      {children}
-    </PdfPage>
-  );
-}
+      const pdf = new JsPDF({
+        orientation: 'portrait',
+        unit: 'pt',
+        format: 'a4',
+        compress: true,
+        precision: 32,
+        hotfixes: ['px_scaling'],
+      });
 
-export function Download({ data }: { data: TInvoiceExpanded }) {
-  const { t } = useLocaleContext();
-  const title = data.number;
-  return (
-    <div className="download-pdf ">
-      <PDFDownloadLink
-        key="pdf"
-        document={<InvoicePage data={data} t={t} />}
-        fileName={`${title}.pdf`}
-        aria-label="Save PDF"
-        title="Save PDF"
-        className="download-pdf__pdf">
-        <Button
-          variant="outlined"
-          color="primary"
-          size="small"
-          sx={{ borderColor: 'var(--stroke-border-base, #EFF1F5)' }}>
-          {t('payment.customer.invoice.download')}
-        </Button>
-      </PDFDownloadLink>
-    </div>
-  );
-}
-
-function InvoicePage({ data, t }: { data: TInvoiceExpanded; t: any }) {
-  const { detail, summary } = getInvoiceRows(data);
+      const imgWidth = canvas.width;
+      const imgHeight = canvas.height;
+      const pdfWidth = pdf.internal.pageSize.getWidth();
+      const pdfHeight = pdf.internal.pageSize.getHeight();
+      const ratio = Math.min(pdfWidth / imgWidth, pdfHeight / imgHeight);
 
-  return (
-    <Document>
-      <Page className="invoice-wrapper">
-        <View className="flex">
-          <View className="w-50 flex-1">
-            <Text2 className="fs-20 bold" value={t('admin.invoice.name')} />
-          </View>
-          <View className="right">
-            <PdfImage
-              style={{
-                ...compose('image logo center'),
-              }}
-              src={window.blocklet.appLogo.split('?')[0]}
-            />
-            <Text2 value={window.blocklet.appName} className="center p-10" />
-          </View>
-        </View>
-
-        <View className="flex mt-40">
-          <View className="w-60">
-            <Text2 className="bold dark mb-5" value={t('admin.invoice.billTo')} />
-            <Text2 value={data.customer.name} />
-            <Text2 className="bold fs-12" value={`DID:ABT:${data.customer.did}`} />
-          </View>
-          <View className="w-45">
-            <View className="flex mb-5">
-              <View className="w-45">
-                <Text2 className="bold" value={t('admin.invoice.number')} />
-              </View>
-              <View className="w-60">
-                <Text2 value={data.number} className="gray" />
-              </View>
-            </View>
-            <View className="flex mb-5">
-              <View className="w-45">
-                <Text2 className="bold" value={t('admin.invoice.paidAt')} />
-              </View>
-              <View className="w-60">
-                <Text2 value={formatTime(data.period_start * 1000)} className="gray" />
-              </View>
-            </View>
-            <View className="flex mb-5">
-              <View className="w-45">
-                <Text2 className="bold" value={t('admin.invoice.dueDate')} />
-              </View>
-              <View className="w-60">
-                <Text2 value={formatTime(data.period_end * 1000)} className="gray" />
-              </View>
-            </View>
-          </View>
-        </View>
-
-        <View className="mt-30 row flex">
-          <View className="w-48 p-4-8">
-            <Text2 className="bold" value={t('admin.subscription.product')} />
-          </View>
-          <View className="w-17 p-4-8">
-            <Text2 className="bold right" value={t('common.quantity')} />
-          </View>
-          <View className="w-17 p-4-8">
-            <Text2 className="bold right" value={t('payment.customer.invoice.unitPrice')} />
-          </View>
-          <View className="w-18 p-4-8">
-            <Text2 className="bold right" value={t('common.amount')} />
-          </View>
-        </View>
+      pdf.addImage(
+        canvas.toDataURL('image/png', 1.0),
+        'PNG',
+        0,
+        0,
+        imgWidth * ratio,
+        imgHeight * ratio,
+        undefined,
+        'FAST'
+      );
 
-        {detail.map((line) => {
-          return (
-            <View key={line.id} className="row flex">
-              <View className="w-48 p-4-8 pb-10">
-                <Text2 className="dark" value={line.product} />
-              </View>
-              <View className="w-17 p-4-8 pb-10">
-                <Text2 className="dark right" value={line.quantity} />
-              </View>
-              <View className="w-17 p-4-8 pb-10">
-                <Text className="dark right">{line.price ? `${line.price} ${data.paymentCurrency.symbol}` : ''}</Text>
-              </View>
-              <View className="w-18 p-4-8 pb-10">
-                <Text className="dark right">
-                  {line.amount} {data.paymentCurrency.symbol}
-                </Text>
-              </View>
-            </View>
-          );
-        })}
+      pdf.save(`${data.number}.pdf`);
+    } catch (error) {
+      console.error('PDF generation failed:', error);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
 
-        <View className="flex">
-          <View className="w-50 mt-10" />
-          <View className="w-50 mt-20">
-            {summary.map((line) => (
-              <View className="flex" key={line.key}>
-                <View className="w-50 p-5">
-                  <Text2 value={t(line.key)} className="bold" />
-                </View>
-                <View className="w-50 p-5">
-                  <Text className="right bold dark">
-                    {line.value} {data.paymentCurrency.symbol}
-                  </Text>
-                </View>
-              </View>
-            ))}
-          </View>
-        </View>
-      </Page>
-    </Document>
+  return (
+    <div className="download-pdf">
+      <Button
+        variant="outlined"
+        color="primary"
+        size="small"
+        onClick={generatePDF}
+        disabled={!isReady || isGenerating}
+        sx={{ borderColor: 'var(--stroke-border-base, #EFF1F5)' }}>
+        {isGenerating ? (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <CircularProgress size={16} sx={{ color: 'inherit' }} />
+            {t('payment.customer.invoice.download')}
+          </Box>
+        ) : (
+          t('payment.customer.invoice.download')
+        )}
+      </Button>
+      <InvoiceTemplate data={data} t={t} />
+    </div>
   );
 }
 
-export default InvoicePage;
+export default Download;