payment-kit 1.13.216 → 1.13.217

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.216",
+  "version": "1.13.217",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -51,7 +51,7 @@
     "@arcblock/ux": "^2.9.66",
     "@arcblock/validator": "^1.18.115",
     "@blocklet/logger": "1.16.25",
-    "@blocklet/payment-react": "1.13.216",
+    "@blocklet/payment-react": "1.13.217",
     "@blocklet/sdk": "1.16.25",
     "@blocklet/ui-react": "^2.9.66",
     "@blocklet/uploader": "^0.0.76",
@@ -65,6 +65,7 @@
     "@ocap/mcrypto": "^1.18.115",
     "@ocap/util": "^1.18.115",
     "@ocap/wallet": "^1.18.115",
+    "@react-pdf/renderer": "^3.4.2",
     "@stripe/react-stripe-js": "^2.4.0",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.7.10",
@@ -114,7 +115,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.25",
     "@arcblock/eslint-config-ts": "^0.3.0",
-    "@blocklet/payment-types": "1.13.216",
+    "@blocklet/payment-types": "1.13.217",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -153,5 +154,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "bc5219c800ae2b18883ac598bf91d4c1c2e71523"
+  "gitHead": "3ce8954d7c26c881e0a7a46925447318954adca9"
 }

package/src/components/invoice/action.tsx

@@ -48,12 +48,6 @@ export default function InvoiceActions({ data, variant, onChange, mode }: Props)
   const isAdmin = mode === 'admin';
 
   const actions = [
-    {
-      label: t('admin.invoice.download'),
-      handler: () => setState({ action: 'download' }),
-      color: 'primary',
-      disabled: data.status !== 'paid',
-    },
     isAdmin && {
       label: t('admin.invoice.edit'),
       handler: () => setState({ action: 'edit' }),

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

@@ -0,0 +1,172 @@
+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',
+  },
+};
+
+export default compose;

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

@@ -0,0 +1,222 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { formatAmount, formatTime, getPrefix, getPriceUintAmountByCurrency } from '@blocklet/payment-react';
+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 { useEffect, useState } from 'react';
+import { joinURL } from 'ufo';
+
+import compose from './compose';
+
+Font.register({
+  family: 'Noto Sans SC',
+  src: joinURL(getPrefix(), '/fonts/noto-sans-sc-chinese-simplified-500-normal.ttf'),
+});
+
+function Document({ children }: any) {
+  return <PdfDocument>{children}</PdfDocument>;
+}
+
+function Text2({ className, value }: any) {
+  return <PdfText style={compose(`span ${className || ''}`)}>{value}</PdfText>;
+}
+
+function Text({ className, children }: any) {
+  return <PdfText style={compose(`span ${className || ''}`)}>{children}</PdfText>;
+}
+
+function View({ className, children }: any) {
+  return <PdfView style={compose(`view ${className || ''}`)}>{children}</PdfView>;
+}
+
+function Page({ className, children }: any) {
+  return (
+    <PdfPage size="A4" style={compose(`page ${className || ''}`)}>
+      {children}
+    </PdfPage>
+  );
+}
+
+export function Download({ data }: any) {
+  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="contained" color="primary" size="small">
+          {t('payment.customer.invoice.download')}
+        </Button>
+      </PDFDownloadLink>
+    </div>
+  );
+}
+
+function InvoicePage({ data, t }: any) {
+  const [subTotal, setSubTotal] = useState(0);
+
+  const calculateAmount = (quantity: string, rate: string) => {
+    const quantityNumber = parseFloat(quantity);
+    const rateNumber = parseFloat(rate);
+    const amount = quantityNumber && rateNumber ? quantityNumber * rateNumber : 0;
+    return amount.toFixed(2);
+  };
+
+  useEffect(() => {
+    let temp = 0;
+
+    data.productLines.forEach((productLine: any) => {
+      const quantityNumber = parseFloat(productLine.quantity);
+      const rateNumber = parseFloat(productLine.rate);
+      const amount = quantityNumber && rateNumber ? quantityNumber * rateNumber : 0;
+
+      temp += amount;
+    });
+
+    setSubTotal(temp);
+  }, [data.productLines]);
+
+  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}
+            />
+            <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="blod 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>
+
+        {data.lines
+          .map((line: any) => {
+            return {
+              description:
+                line.description + (line.price.product.unit_label ? ` (per ${line.price.product.unit_label})` : ''),
+              quantity: line.quantity,
+              rate: !line.proration
+                ? formatAmount(getPriceUintAmountByCurrency(line.price, data.paymentCurrency) || line.amount, data.paymentCurrency.decimal) // prettier-ignore
+                : '',
+            };
+          })
+          .map((productLine: any) => {
+            return (
+              <View key={productLine.description} className="row flex">
+                <View className="w-48 p-4-8 pb-10">
+                  <Text2 className="dark" value={productLine.description} />
+                </View>
+                <View className="w-17 p-4-8 pb-10">
+                  <Text2 className="dark right" value={productLine.quantity} />
+                </View>
+                <View className="w-17 p-4-8 pb-10">
+                  <Text className="dark right">
+                    {productLine.rate} {data.paymentCurrency.symbol}
+                  </Text>
+                </View>
+                <View className="w-18 p-4-8 pb-10">
+                  <Text className="dark right">
+                    {calculateAmount(productLine.quantity, productLine.rate)} {data.paymentCurrency.symbol}
+                  </Text>
+                </View>
+              </View>
+            );
+          })}
+
+        <View className="flex">
+          <View className="w-50 mt-10" />
+          <View className="w-50 mt-20">
+            <View className="flex">
+              <View className="w-50 p-5">
+                <Text2 value={t('common.subtotal')} className="bold" />
+              </View>
+              <View className="w-50 p-5">
+                <Text className="right bold dark">
+                  {subTotal?.toFixed(2)} {data.paymentCurrency.symbol}
+                </Text>
+              </View>
+            </View>
+            <View className="flex">
+              <View className="w-50 p-5">
+                <Text2 className="bold" value={t('common.total')} />
+              </View>
+              <View className="w-50 p-5">
+                <Text className="right bold dark">
+                  {(typeof subTotal !== 'undefined' ? subTotal : 0).toFixed(2)} {data.paymentCurrency.symbol}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </Page>
+    </Document>
+  );
+}
+
+export default InvoicePage;

package/src/components/progress-bar.tsx

@@ -44,7 +44,6 @@ const Transition = React.createContext({} as any);
 
 export function TransitionProvider({ children }: { children: React.ReactNode }) {
   const [isPending, startTransition] = React.useTransition();
-
   const memoObj = React.useMemo(() => ({ isPending, startTransition }), [isPending]);
   return <Transition.Provider value={memoObj}>{children}</Transition.Provider>;
 }

package/src/locales/en.tsx

@@ -356,7 +356,7 @@ export default flat({
       finalizedAt: 'Finalized At',
       paidAt: 'Payment Date',
       summary: 'Summary',
-      customer: 'Billed to',
+      billTo: 'Billed to',
       billing: 'Billing Method',
       download: 'Download PDF',
       edit: 'Edit Invoice',

package/src/locales/zh.tsx

@@ -347,7 +347,7 @@ export default flat({
       finalizedAt: '已完成时间',
       paidAt: '支付日期',
       summary: '摘要',
-      customer: '开具给',
+      billTo: '开具给',
       billing: '计费方式',
       download: '下载PDF',
       edit: '编辑账单',

package/src/pages/admin/billing/invoices/detail.tsx

@@ -22,6 +22,7 @@ import Currency from '../../../../components/currency';
 import CustomerLink from '../../../../components/customer/link';
 import EventList from '../../../../components/event/list';
 import InfoRow from '../../../../components/info-row';
+import { Download } from '../../../../components/invoice-pdf/pdf';
 import InvoiceActions from '../../../../components/invoice/action';
 import InvoiceTable from '../../../../components/invoice/table';
 import MetadataEditor from '../../../../components/metadata/editor';
@@ -103,7 +104,10 @@ export default function InvoiceDetail(props: { id: string }) {
               </Typography>
               <Status label={data.status} color={getInvoiceStatusColor(data.status)} sx={{ ml: 1 }} />
             </Stack>
-            <InvoiceActions data={data} onChange={runAsync} variant="normal" />
+            <Box style={{ display: 'flex', gap: '10px' }}>
+              <Download data={data} />
+              <InvoiceActions data={data} onChange={runAsync} variant="normal" />
+            </Box>
           </Stack>
         </Box>
       </Box>
@@ -111,7 +115,7 @@ export default function InvoiceDetail(props: { id: string }) {
         <SectionHeader title={t('admin.details')} />
         <Stack>
           <InfoRow label={t('admin.invoice.number')} value={data.number} />
-          <InfoRow label={t('admin.invoice.customer')} value={<CustomerLink customer={data.customer} />} />
+          <InfoRow label={t('admin.invoice.billTo')} value={<CustomerLink customer={data.customer} />} />
           <InfoRow
             label={t('admin.subscription.currentPeriod')}
             value={

package/src/pages/customer/invoice/detail.tsx

@@ -13,6 +13,7 @@ import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import Currency from '../../../components/currency';
 import CustomerLink from '../../../components/customer/link';
 import InfoRow from '../../../components/info-row';
+import { Download } from '../../../components/invoice-pdf/pdf';
 import InvoiceTable from '../../../components/invoice/table';
 import SectionHeader from '../../../components/section/header';
 import { useSessionContext } from '../../../contexts/session';
@@ -114,16 +115,7 @@ export default function CustomerInvoiceDetail() {
           </Typography>
         </Stack>
         <Stack direction="row" spacing={1} justifyContent="flex-end" alignItems="center">
-          {['open', 'paid', 'uncollectible'].includes(data.status) && (
-            <Button
-              variant="contained"
-              color="secondary"
-              size="small"
-              disabled={state.downloading}
-              onClick={() => setState({ downloading: true })}>
-              {t('payment.customer.invoice.download')}
-            </Button>
-          )}
+          {['open', 'paid', 'uncollectible'].includes(data.status) && <Download data={data} />}
           {['open', 'uncollectible'].includes(data.status) && (
             <Button variant="contained" color="primary" size="small" disabled={state.paying} onClick={onPay}>
               {t('payment.customer.invoice.pay')}
@@ -171,10 +163,7 @@ export default function CustomerInvoiceDetail() {
               }
             />
           )}
-          <InfoRow
-            label={t('admin.invoice.customer')}
-            value={<CustomerLink customer={data.customer} linked={false} />}
-          />
+          <InfoRow label={t('admin.invoice.billTo')} value={<CustomerLink customer={data.customer} linked={false} />} />
         </Stack>
       </Root>
       <Box>