payment-kit 1.15.23 → 1.15.24

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

@@ -0,0 +1,127 @@
+import { formatTime } from '@blocklet/payment-react';
+import { useEffect } from 'react';
+import type { InvoicePDFProps } from './types';
+import { composeStyles } from './utils';
+import { getInvoiceRows } from '../invoice/table';
+import { applyStyles } from './styles';
+
+export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
+  const { detail, summary } = getInvoiceRows(data);
+
+  useEffect(() => {
+    applyStyles();
+  }, []);
+
+  return (
+    <div id="invoice-template" style={composeStyles('template')}>
+      {/* Header */}
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          gap: '20px',
+          marginBottom: '40px',
+        }}>
+        <div style={composeStyles('fs-20 bold')}>{t('admin.invoice.name')}</div>
+        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+          <img src={window.blocklet.appLogo.split('?')[0]} style={composeStyles('logo')} alt="logo" />
+          <span style={composeStyles('block p-10')}>{window.blocklet.appName}</span>
+        </div>
+      </div>
+
+      {/* Bill Info */}
+      <div style={composeStyles('flex mt-60')}>
+        <div style={composeStyles('w-60')}>
+          <span style={composeStyles('bold dark mb-5')}>{t('admin.invoice.billTo')}</span>
+          <span style={composeStyles('block mb-5')}>{data.customer.name}</span>
+          <span style={composeStyles('bold fs-12')}>{`DID:ABT:${data.customer.did}`}</span>
+        </div>
+        <div style={composeStyles('w-40')}>
+          <div style={composeStyles('flex mb-5')}>
+            <div style={composeStyles('w-40')}>
+              <span style={composeStyles('bold')}>{t('admin.invoice.number')}</span>
+            </div>
+            <div style={composeStyles('w-60')}>
+              <span style={composeStyles('gray')}>{data.number}</span>
+            </div>
+          </div>
+          <div style={composeStyles('flex mb-5')}>
+            <div style={composeStyles('w-40')}>
+              <span style={composeStyles('bold')}>{t('admin.invoice.paidAt')}</span>
+            </div>
+            <div style={composeStyles('w-60')}>
+              <span style={composeStyles('gray')}>{formatTime(data.period_start * 1000)}</span>
+            </div>
+          </div>
+          <div style={composeStyles('flex mb-5')}>
+            <div style={composeStyles('w-40')}>
+              <span style={composeStyles('bold')}>{t('admin.invoice.dueDate')}</span>
+            </div>
+            <div style={composeStyles('w-60')}>
+              <span style={composeStyles('gray')}>{formatTime(data.period_end * 1000)}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Table Header */}
+      <div style={composeStyles('mt-40 row flex')}>
+        <div style={composeStyles('w-48 p-4-8')}>
+          <span style={composeStyles('bold')}>{t('admin.subscription.product')}</span>
+        </div>
+        <div style={composeStyles('w-17 p-4-8')}>
+          <span style={composeStyles('bold right')}>{t('common.quantity')}</span>
+        </div>
+        <div style={composeStyles('w-17 p-4-8')}>
+          <span style={composeStyles('bold right')}>{t('payment.customer.invoice.unitPrice')}</span>
+        </div>
+        <div style={composeStyles('w-18 p-4-8')}>
+          <span style={composeStyles('bold right')}>{t('common.amount')}</span>
+        </div>
+      </div>
+
+      {/* Table Content */}
+      {detail.map((line) => (
+        <div key={line.id} style={composeStyles('row flex')}>
+          <div style={composeStyles('w-48 p-4-8 pb-15')}>
+            <span style={composeStyles('dark')}>{line.product}</span>
+          </div>
+          <div style={composeStyles('w-17 p-4-8 pb-15')}>
+            <span style={composeStyles('dark right')}>{line.quantity}</span>
+          </div>
+          <div style={composeStyles('w-17 p-4-8 pb-15')}>
+            <span style={composeStyles('dark right')}>
+              {line.price ? `${line.price} ${data.paymentCurrency.symbol}` : ''}
+            </span>
+          </div>
+          <div style={composeStyles('w-18 p-4-8 pb-15')}>
+            <span style={composeStyles('dark right')}>
+              {line.amount} {data.paymentCurrency.symbol}
+            </span>
+          </div>
+        </div>
+      ))}
+
+      {/* Summary */}
+      <div style={composeStyles('flex')}>
+        <div style={composeStyles('w-60 mt-20')} />
+        <div style={composeStyles('w-40 mt-20')}>
+          {summary.map((line) => (
+            <div style={composeStyles('flex')} key={line.key}>
+              <div style={composeStyles('w-60 p-5')}>
+                <span style={composeStyles('bold')}>{t(line.key)}</span>
+              </div>
+              <div style={composeStyles('w-40 p-5')}>
+                <span style={composeStyles('right bold dark')}>
+                  {line.value} {data.paymentCurrency.symbol}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/invoice-pdf/types.ts

@@ -0,0 +1,11 @@
+import type { TInvoiceExpanded } from '@blocklet/payment-types';
+import type { CSSProperties } from 'react';
+
+export interface InvoiceStyles {
+  [key: string]: CSSProperties;
+}
+
+export interface InvoicePDFProps {
+  data: TInvoiceExpanded;
+  t: (key: string) => string;
+}

package/src/components/invoice-pdf/utils.ts

@@ -0,0 +1,41 @@
+import { getPrefix } from '@blocklet/payment-react';
+import { joinURL } from 'ufo';
+import { pdfStyles } from './styles';
+
+const fontUrl = joinURL(getPrefix(), '/fonts/noto-sans-sc-chinese-simplified-500-normal.ttf');
+export const fontFamily = 'Noto Sans SC';
+
+export async function loadFont(): Promise<boolean> {
+  try {
+    const font = new FontFace(fontFamily, `url(${fontUrl})`);
+    const loadedFont = await font.load();
+    document.fonts.add(loadedFont);
+    return true;
+  } catch (error) {
+    console.error('Font loading failed:', error);
+    return false;
+  }
+}
+
+export function loadImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = url;
+  });
+}
+
+export function composeStyles(classNames: string): React.CSSProperties {
+  return classNames
+    .split(' ')
+    .filter(Boolean)
+    .reduce(
+      (acc, className) => ({
+        ...acc,
+        ...pdfStyles[className],
+      }),
+      {}
+    );
+}

package/src/components/pricing-table/payment-settings.tsx

@@ -230,9 +230,13 @@ export function ProductPaymentSettings({ product, prices }: { product: TProduct;
         expanded
         trigger={<Typography variant="h6">{product.name}</Typography>}
         style={{ py: 1 }}>
+        {/* @ts-ignore */}
         <Tabs
+          // @ts-ignore
           tabs={tabs}
+          // @ts-ignore
           current={current}
+          // @ts-ignore
           onChange={(v: string) => setCurrent(v)}
           style={{ width: '100%' }}
           scrollButtons="auto"

package/src/components/uploader.tsx

@@ -1,9 +1,13 @@
 import { Avatar, Box, Button } from '@mui/material';
 import { Stack, styled } from '@mui/system';
-import { lazy, useCallback, useEffect, useRef } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useRef } from 'react';
 import { CloudUpload, Delete, Edit } from '@mui/icons-material';
 
-const UploaderComponent = lazy(() => import('@blocklet/uploader/react').then((res) => ({ default: res.Uploader })));
+const UploaderComponent = lazy(() =>
+  import(/* webpackChunkName: "blocklet-uploader" */ '@blocklet/uploader').then((res) => ({
+    default: res.Uploader,
+  }))
+);
 
 type Props = {
   onUploaded: (result: any) => void;
@@ -95,30 +99,32 @@ export default function Uploader({ onUploaded, preview, maxFileSize, maxNumberOf
         </Div>
       )}
 
-      <UploaderComponent
-        // @ts-ignore
-        ref={uploaderRef}
-        popup
-        onUploadFinish={(result: any) => onUploaded({ url: result.data.url })}
-        uploadedProps={{
-          onSelectedFiles: (files: any[]) => {
-            if (files.length) {
-              onUploaded({ url: files[0].fileUrl });
-            }
-          },
-        }}
-        coreProps={{
-          restrictions: {
-            allowedFileExts,
-            maxFileSize,
-            maxNumberOfFiles,
-          },
-        }}
-        apiPathProps={{
-          uploader: '/api/uploads',
-          companion: '/api/companion',
-        }}
-      />
+      <Suspense fallback={null}>
+        <UploaderComponent
+          // @ts-ignore
+          ref={uploaderRef}
+          popup
+          onUploadFinish={(result: any) => onUploaded({ url: result.data.url })}
+          uploadedProps={{
+            onSelectedFiles: (files: any[]) => {
+              if (files.length) {
+                onUploaded({ url: files[0].fileUrl });
+              }
+            },
+          }}
+          coreProps={{
+            restrictions: {
+              allowedFileExts,
+              maxFileSize,
+              maxNumberOfFiles,
+            },
+          }}
+          apiPathProps={{
+            uploader: '/api/uploads',
+            companion: '/api/companion',
+          }}
+        />
+      </Suspense>
     </>
   );
 }

package/src/components/webhook/attempts.tsx

@@ -168,10 +168,12 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
             <Typography variant="h6">{event_id ? selected.endpoint.url : selected.event.type}</Typography>
             <Box>
               <Typography variant="h6">Response ({selected.response_status})</Typography>
+              {/* @ts-ignore */}
               <CodeBlock language="json">{JSON.stringify(selected.response_body, null, 2)}</CodeBlock>
             </Box>
             <Box>
               <Typography variant="h6">Request</Typography>
+              {/* @ts-ignore */}
               <CodeBlock language="json">{JSON.stringify(selected.event, null, 2)}</CodeBlock>
             </Box>
           </Stack>
@@ -266,6 +268,7 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
                 </Popper>
               </>
             </Stack>
+            {/* @ts-ignore */}
             <CodeBlock language="json">{JSON.stringify(event.data, null, 2)}</CodeBlock>
           </Box>
         )}

package/src/pages/admin/billing/index.tsx

@@ -46,9 +46,13 @@ export default function BillingIndex() {
       {/* <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
         {t('admin.billing')}
       </Typography> */}
+      {/* @ts-ignore */}
       <Tabs
+        // @ts-ignore
         tabs={tabs}
+        // @ts-ignore
         current={page}
+        // @ts-ignore
         onChange={onTabChange}
         scrollButtons="auto"
         sx={{

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

@@ -33,9 +33,13 @@ export default function CustomerIndex() {
 
   return (
     <div>
+      {/* @ts-ignore */}
       <Tabs
+        // @ts-ignore
         tabs={tabs}
+        // @ts-ignore
         current={page}
+        // @ts-ignore
         onChange={onTabChange}
         scrollButtons="auto"
         variant="scrollable"

package/src/pages/admin/developers/index.tsx

@@ -50,7 +50,16 @@ export default function DevelopersIndex() {
       <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
         {t('admin.developers')}
       </Typography>
-      <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
+      {/* @ts-ignore */}
+      <Tabs
+        // @ts-ignore
+        tabs={tabs}
+        // @ts-ignore
+        current={page}
+        // @ts-ignore
+        onChange={onTabChange}
+        scrollButtons="auto"
+      />
       {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
     </div>
   );

package/src/pages/admin/index.tsx

@@ -75,9 +75,13 @@ function Admin() {
       <ProgressBar pending={isPending} />
       <Stack direction="row" alignItems="center" justifyContent="end" flexWrap="wrap" spacing={1} sx={{ mt: 1, pb: 2 }}>
         {/* <Box>{renderNav(group, onTabChange, group1)}</Box> */}
+        {/* @ts-ignore */}
         <Tabs
+          // @ts-ignore
           tabs={group1}
+          // @ts-ignore
           current={group}
+          // @ts-ignore
           onChange={onTabChange}
           scrollButtons="auto"
           variant="scrollable"

package/src/pages/admin/payments/index.tsx

@@ -49,9 +49,13 @@ export default function PaymentIndex() {
 
   return (
     <div>
+      {/* @ts-ignore */}
       <Tabs
+        // @ts-ignore
         tabs={tabs}
+        // @ts-ignore
         current={page}
+        // @ts-ignore
         onChange={onTabChange}
         scrollButtons="auto"
         variant="scrollable"

package/src/pages/admin/products/index.tsx

@@ -66,9 +66,13 @@ export default function Products() {
   return (
     <>
       <Stack direction="row" alignItems="flex-start" justifyContent="end" flexWrap="wrap" spacing={1}>
+        {/* @ts-ignore */}
         <Tabs
+          // @ts-ignore
           tabs={tabs}
+          // @ts-ignore
           current={page}
+          // @ts-ignore
           onChange={(newTab: string) => startTransition(() => navigate(`/admin/products/${newTab}`))}
           scrollButtons="auto"
           variant="scrollable"

package/src/pages/admin/products/links/create.tsx

@@ -153,9 +153,13 @@ export default function CreatePaymentLink() {
             <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
               {t('common.setup')}
             </Typography>
+            {/* @ts-ignore */}
             <Tabs
+              // @ts-ignore
               tabs={tabs}
+              // @ts-ignore
               current={current}
+              // @ts-ignore
               onChange={(v: string) => setCurrent(v)}
               style={{ width: '100%' }}
               scrollButtons="auto"

package/src/pages/admin/settings/index.tsx

@@ -42,9 +42,13 @@ export default function SettingsIndex() {
   return (
     <>
       <Stack direction="row" alignItems="flex-start" justifyContent="end" flexWrap="wrap" spacing={1}>
+        {/* @ts-ignore */}
         <Tabs
+          // @ts-ignore
           tabs={tabs}
+          // @ts-ignore
           current={page}
+          // @ts-ignore
           onChange={onTabChange}
           scrollButtons="auto"
           variant="scrollable"

package/src/pages/customer/index.tsx

@@ -22,11 +22,11 @@ import {
   Grid,
   MenuItem,
   Select,
-  SelectChangeEvent,
   Stack,
   Tooltip,
   Typography,
 } from '@mui/material';
+import type { SelectChangeEvent } from '@mui/material/Select';
 import { styled, SxProps } from '@mui/system';
 import { useSetState } from 'ahooks';
 import { flatten, isEmpty } from 'lodash';

package/vite.config.ts

@@ -4,18 +4,59 @@ import { defineConfig } from 'vite';
 import { createBlockletPlugin } from 'vite-plugin-blocklet';
 import svgr from 'vite-plugin-svgr';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import { visualizer } from 'rollup-plugin-visualizer';
 import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
+  const isProduction = mode === 'production';
   return {
-    plugins: [tsconfigPaths(), react(), createBlockletPlugin(), svgr()],
+    plugins: [
+      tsconfigPaths(),
+      react({
+        babel: {
+          plugins: isProduction ? [['lodash']] : [],
+        },
+      }),
+      createBlockletPlugin(),
+      svgr(),
+      process.env.ANALYZE && visualizer({ open: true, gzipSize: true, brotliSize: true }),
+    ].filter(Boolean),
+
     build: {
-      // 禁止 preload 可以解决 js 的请求没有 referer 的问题
       cssCodeSplit: false,
+      minify: 'terser',
+      terserOptions: {
+        compress: {
+          drop_debugger: true,
+          pure_funcs: ['assert', 'debug'],
+        },
+      },
+      reportCompressedSize: false,
+      chunkSizeWarningLimit: 1000,
       commonjsOptions: {
+        include: [/node_modules/],
         transformMixedEsModules: true,
       },
+      rollupOptions: {
+        external: [],
+        output: {
+          manualChunks: {
+            'vendor-react': ['react', 'react-dom', 'react-router-dom'],
+            'vendor-mui': ['@mui/material', '@mui/system', '@mui/icons-material'],
+            utils: ['dayjs', 'numbro', 'bn.js'],
+            hooks: ['ahooks', 'use-bus'],
+            'vendor-arcblock': ['@arcblock/did-connect'],
+          },
+        },
+      },
+    },
+    optimizeDeps: {
+      include: ['react', 'react-dom', 'react/jsx-runtime'],
+      esbuildOptions: {
+        mainFields: ['module', 'main'],
+        resolveExtensions: ['.ts', '.tsx', '.js', '.jsx'],
+      },
     },
     ...(mode === 'development' && {
       resolve: {

package/src/components/invoice-pdf/compose.ts

@@ -1,173 +0,0 @@
-const compose = (classes: string) => {
-  const css = {};
-
-  const classesArray: string[] = classes.replace(/\s+/g, ' ').split(' ');
-
-  classesArray.forEach((className) => {
-    if (typeof styles[className] !== undefined) {
-      Object.assign(css, styles[className]);
-    }
-  });
-
-  return css;
-};
-
-const colorDark = '#222';
-const colorDark2 = '#888';
-const colorGray = '#e3e3e3';
-const colorWhite = '#fff';
-
-const styles: any = {
-  dark: {
-    color: colorDark,
-  },
-
-  white: {
-    color: colorWhite,
-  },
-
-  gray: {
-    color: colorDark2,
-  },
-
-  'bg-dark': {
-    backgroundColor: colorDark2,
-  },
-
-  'bg-gray': {
-    backgroundColor: colorGray,
-  },
-
-  flex: {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'nowrap',
-    alignItems: 'start',
-  },
-
-  bold: {
-    fontWeight: 'bold',
-  },
-
-  'w-auto': {
-    flex: 1,
-    paddingRight: '8px',
-  },
-
-  'flex-1': {
-    flex: 1,
-  },
-
-  'w-100': {
-    width: '100%',
-  },
-
-  'w-50': {
-    width: '50%',
-  },
-
-  'w-55': {
-    width: '55%',
-  },
-
-  'w-45': {
-    width: '45%',
-  },
-
-  'w-60': {
-    width: '60%',
-  },
-
-  'w-40': {
-    width: '30%',
-  },
-
-  'w-48': {
-    width: '48%',
-  },
-
-  'w-17': {
-    width: '17%',
-  },
-
-  'w-18': {
-    width: '18%',
-  },
-
-  row: {
-    borderBottom: `1px solid ${colorGray}`,
-  },
-
-  'mt-40': {
-    marginTop: '40px',
-  },
-
-  'mt-30': {
-    marginTop: '30px',
-  },
-
-  'mt-20': {
-    marginTop: '20px',
-  },
-
-  'mt-10': {
-    marginTop: '10px',
-  },
-
-  'mb-5': {
-    marginBottom: '5px',
-  },
-
-  'p-4-8': {
-    padding: '4px 8px',
-  },
-
-  'p-5': {
-    padding: '5px',
-  },
-
-  'pb-10': {
-    paddingBottom: '10px',
-  },
-
-  right: {
-    textAlign: 'right',
-  },
-  center: {
-    textAlign: 'right',
-  },
-
-  'fs-20': {
-    fontSize: '20px',
-  },
-
-  'fs-30': {
-    fontSize: '30px',
-  },
-
-  'fs-12': {
-    fontSize: '11px',
-  },
-
-  page: {
-    fontFamily: 'Noto Sans SC',
-    fontSize: '11px',
-    color: '#555',
-    padding: '40px 35px',
-    fontWeight: 'bold',
-  },
-
-  span: {
-    padding: '4px 12px 4px 0',
-  },
-
-  logo: {
-    display: 'block',
-    borderRadius: '10px',
-    width: '60px',
-    height: '60px',
-    textAlign: 'center',
-  },
-};
-
-export default compose;