payment-kit 1.27.2 → 1.29.0

package/cloudflare/wrangler.json

@@ -0,0 +1,63 @@
+{
+  "name": "payment-kit",
+  "main": "dist/worker.js",
+  "compatibility_date": "2024-12-01",
+  "compatibility_flags": ["nodejs_compat"],
+  "assets": {
+    "directory": "public",
+    "binding": "ASSETS",
+    "html_handling": "auto-trailing-slash",
+    "not_found_handling": "single-page-application"
+  },
+  "d1_databases": [
+    {
+      "binding": "DB",
+      "database_name": "payment-kit-prod",
+      "database_id": "ea6c75d0-39b8-40cd-a0ae-a2062e77c4b9",
+      "migrations_dir": "migrations"
+    }
+  ],
+  "kv_namespaces": [
+    {
+      "binding": "DID_CONNECT_KV",
+      "id": "ca0bd29c73864115b713e1db11d97cd2"
+    }
+  ],
+  "services": [
+    {
+      "binding": "MEDIA_KIT",
+      "service": "media-kit"
+    },
+    {
+      "binding": "AUTH_SERVICE",
+      "service": "blocklet-service",
+      "entrypoint": "BlockletServiceRPC"
+    }
+  ],
+  "vars": {
+    "APP_NAME": "Payment Kit",
+    "APP_PID": "zNKuN3XwXN7xq2NsJQjjfwujyqCxx26DhwgV",
+    "COMPONENT_DID": "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk",
+    "MEDIA_KIT_URL": "https://media-kit.yexiaofang.workers.dev"
+  },
+  "queues": {
+    "producers": [
+      {
+        "binding": "JOB_QUEUE",
+        "queue": "payment-kit-jobs"
+      }
+    ],
+    "consumers": [
+      {
+        "queue": "payment-kit-jobs",
+        "max_batch_size": 10,
+        "max_batch_timeout": 5,
+        "max_retries": 3,
+        "dead_letter_queue": "payment-kit-jobs-dlq"
+      }
+    ]
+  },
+  "triggers": {
+    "crons": ["*/5 * * * *"]
+  }
+}

package/cloudflare/wrangler.jsonc

@@ -0,0 +1,75 @@
+{
+  "name": "payment-kit",
+  "main": "dist/worker.js",
+  "compatibility_date": "2024-12-01",
+  "compatibility_flags": ["nodejs_compat"],
+  "placement": { "mode": "smart" },
+  "assets": {
+    "directory": "public",
+    "binding": "ASSETS",
+    "html_handling": "auto-trailing-slash",
+    "not_found_handling": "single-page-application"
+  },
+  "d1_databases": [
+    {
+      "binding": "DB",
+      "database_name": "payment-kit-prod",
+      "database_id": "ea6c75d0-39b8-40cd-a0ae-a2062e77c4b9"
+    }
+  ],
+  "kv_namespaces": [
+    {
+      "binding": "DID_CONNECT_KV",
+      "id": "ca0bd29c73864115b713e1db11d97cd2"
+    }
+  ],
+  "hyperdrive": [
+    {
+      "binding": "HYPERDRIVE",
+      "id": "18184fbdb1554c6a9f916d57fbc5d43e"
+    }
+  ],
+  "services": [
+    {
+      "binding": "MEDIA_KIT",
+      "service": "media-kit"
+    },
+    {
+      "binding": "AUTH_SERVICE",
+      "service": "blocklet-service",
+      "entrypoint": "BlockletServiceRPC"
+    }
+  ],
+  "vars": {
+    "APP_NAME": "Payment Kit",
+    "APP_PID": "zNKuN3XwXN7xq2NsJQjjfwujyqCxx26DhwgV",
+    "COMPONENT_DID": "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk",
+    "MEDIA_KIT_URL": "https://media-kit.yexiaofang.workers.dev"
+  },
+  "queues": {
+    "producers": [
+      {
+        "binding": "JOB_QUEUE",
+        "queue": "payment-kit-jobs"
+      }
+    ],
+    "consumers": [
+      {
+        "queue": "payment-kit-jobs",
+        "max_batch_size": 10,
+        "max_batch_timeout": 5,
+        "max_retries": 3,
+        "dead_letter_queue": "payment-kit-jobs-dlq"
+      }
+    ]
+  },
+  "triggers": {
+    "crons": ["* * * * *"]
+  },
+  // Batch crons (subscription scans, queue dispatch, retry backstops) all run in
+  // one scheduled() invocation each minute; raise the per-invocation CPU ceiling
+  // so they aren't killed mid-run ("Exceeded CPU Limit") on Workers Paid. The
+  // structural fix (offload to a Consumer Worker / Paid Queue throughput) is
+  // tracked in task-44. No effect on Workers Free (CPU limit is fixed there).
+  "limits": { "cpu_ms": 300000 }
+}

package/cloudflare/wrangler.staging.json

@@ -0,0 +1,67 @@
+{
+  "name": "staging-aigne-hub-payment-kit",
+  "main": "dist/worker.js",
+  "compatibility_date": "2024-12-01",
+  "compatibility_flags": ["nodejs_compat"],
+  "placement": { "mode": "smart" },
+  "assets": {
+    "directory": "public",
+    "binding": "ASSETS",
+    "html_handling": "auto-trailing-slash",
+    "not_found_handling": "single-page-application"
+  },
+  "d1_databases": [
+    {
+      "binding": "DB",
+      "database_name": "staging-aigne-hub-payment-kit",
+      "database_id": "978e726b-ad9d-4dcc-bc66-f0d3fb01a1dd",
+      "migrations_dir": "migrations"
+    }
+  ],
+  "kv_namespaces": [
+    {
+      "binding": "DID_CONNECT_KV",
+      "id": "a2c98f81bc974fcabc191766698d170f"
+    }
+  ],
+  "services": [
+    {
+      "binding": "MEDIA_KIT",
+      "service": "staging-aigne-hub-media-kit"
+    },
+    {
+      "binding": "AUTH_SERVICE",
+      "service": "blocklet-service-staging",
+      "entrypoint": "BlockletServiceRPC"
+    }
+  ],
+  "vars": {
+    "APP_NAME": "AIGNE Hub Payment Kit (staging)",
+    "APP_PID": "zNKWm5HBgaTLptTZBzjHo6PPFAp8X3n8pabY",
+    "APP_URL": "https://staging-aigne-hub-payment-kit.arcblock.workers.dev",
+    "COMPONENT_DID": "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk",
+    "MEDIA_KIT_URL": "https://staging-aigne-hub-media-kit.arcblock.workers.dev/image-bin",
+    "PAYMENT_CHANGE_LOCKED_PRICE": "1"
+  },
+  "queues": {
+    "producers": [
+      {
+        "binding": "JOB_QUEUE",
+        "queue": "staging-aigne-hub-payment-kit-jobs"
+      }
+    ],
+    "consumers": [
+      {
+        "queue": "staging-aigne-hub-payment-kit-jobs",
+        "max_batch_size": 10,
+        "max_batch_timeout": 5,
+        "max_retries": 3,
+        "dead_letter_queue": "staging-aigne-hub-payment-kit-jobs-dlq"
+      }
+    ]
+  },
+  "triggers": {
+    "crons": ["* * * * *"]
+  },
+  "limits": { "cpu_ms": 300000 }
+}

package/cloudflare/wrangler.toml

@@ -0,0 +1,28 @@
+name = "payment-kit"
+main = "dist/worker.js"
+compatibility_date = "2024-12-01"
+compatibility_flags = ["nodejs_compat"]
+
+[build]
+command = "node run-build.js"
+
+[[d1_databases]]
+binding = "DB"
+database_name = "payment-kit-prod"
+database_id = "ea6c75d0-39b8-40cd-a0ae-a2062e77c4b9"
+migrations_dir = "migrations"
+
+# Service Binding to DID Connect Auth Worker (blocklet-service)
+[[services]]
+binding = "AUTH_SERVICE"
+service = "blocklet-service"
+entrypoint = "BlockletServiceRPC"
+
+[triggers]
+crons = ["* * * * *"]
+
+[vars]
+APP_URL = "http://localhost:8787"
+APP_NAME = "Payment Kit"
+APP_PID = "payment-kit-dev"
+COMPONENT_DID = "did:abt:test"

package/jest.config.js

@@ -10,19 +10,11 @@ module.exports = {
   globalTeardown: '../../tools/jest-teardown.js',
   transform: {
     '^.+\\.ts$': 'ts-jest',
-    '^.+\\.js$': [
-      'ts-jest',
-      {
-        tsconfig: {
-          allowJs: true,
-          module: 'commonjs',
-          target: 'es2019',
-        },
-        diagnostics: false,
-      },
-    ],
+    '^.+\\.js$': ['babel-jest', { presets: [['@babel/preset-env', { targets: { node: 'current' } }]] }],
   },
-  transformIgnorePatterns: ['/node_modules/(?!.*(@scure|@noble)/)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!.*(@noble|@scure|string-width|strip-ansi|ansi-regex)/)',
+  ],
   testMatch: ['**/tests/**/*.spec.ts'],
   collectCoverageFrom: ['api/src/**/*.ts'],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.27.2",
+  "version": "1.29.0",
   "scripts": {
     "dev": "blocklet dev --open",
     "prelint": "npm run types",
@@ -47,35 +47,37 @@
   },
   "dependencies": {
     "@abtnode/cron": "^1.17.12",
-    "@arcblock/did": "^1.28.5",
-    "@arcblock/did-connect-react": "^3.5.1",
+    "@apple/app-store-server-library": "^3.1.0",
+    "@arcblock/did": "^1.30.9",
+    "@arcblock/did-connect-js": "4.0.0",
+    "@arcblock/did-connect-react": "^3.5.2",
     "@arcblock/did-connect-storage-nedb": "^1.8.0",
-    "@arcblock/did-util": "^1.28.5",
-    "@arcblock/jwt": "^1.28.5",
-    "@arcblock/react-hooks": "^3.5.1",
-    "@arcblock/ux": "^3.5.1",
-    "@arcblock/validator": "^1.28.5",
-    "@arcblock/vc": "^1.28.5",
+    "@arcblock/did-util": "^1.30.9",
+    "@arcblock/jwt": "^1.30.9",
+    "@arcblock/react-hooks": "^3.5.2",
+    "@arcblock/ux": "^3.5.2",
+    "@arcblock/validator": "^1.30.9",
+    "@arcblock/vc": "^1.30.9",
     "@blocklet/did-space-js": "^1.2.23",
     "@blocklet/error": "^0.3.5",
     "@blocklet/js-sdk": "^1.17.12",
     "@blocklet/logger": "^1.17.12",
-    "@blocklet/payment-broker-client": "1.27.2",
-    "@blocklet/payment-react": "1.27.2",
-    "@blocklet/payment-vendor": "1.27.2",
+    "@blocklet/payment-broker-client": "1.29.0",
+    "@blocklet/payment-react": "1.29.0",
+    "@blocklet/payment-vendor": "1.29.0",
     "@blocklet/sdk": "^1.17.12",
-    "@blocklet/ui-react": "^3.5.1",
-    "@blocklet/uploader": "^0.3.19",
+    "@blocklet/ui-react": "^3.5.2",
+    "@blocklet/uploader": "^0.3.20",
     "@blocklet/xss": "^0.3.16",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/asset": "^1.28.5",
-    "@ocap/client": "^1.28.5",
-    "@ocap/mcrypto": "^1.28.5",
-    "@ocap/util": "^1.28.5",
-    "@ocap/wallet": "^1.28.5",
+    "@ocap/asset": "^1.30.9",
+    "@ocap/client": "^1.30.9",
+    "@ocap/mcrypto": "^1.30.9",
+    "@ocap/util": "^1.30.9",
+    "@ocap/wallet": "^1.30.9",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.5",
@@ -97,18 +99,23 @@
     "fastq": "^1.19.1",
     "flat": "^5.0.2",
     "google-libphonenumber": "^3.2.42",
+    "google-play-billing-validator": "^2.1.3",
     "html2canvas": "^1.4.1",
     "iframe-resizer-react": "^1.1.1",
     "joi": "17.12.2",
     "json-stable-stringify": "^1.3.0",
     "jspdf": "^4.2.1",
-    "lodash": "^4.18.1",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.18.1",
     "morgan": "^1.10.0",
     "mui-daterange-picker": "^1.0.5",
     "nanoid": "^3.3.11",
+    "node-apple-receipt-verify": "^1.15.0",
     "numbro": "^2.5.0",
     "p-all": "3.0.0",
     "p-wait-for": "^3.2.0",
+    "pg": "^8.20.0",
+    "postgres": "^3.4.8",
     "pretty-ms-i18n": "^1.0.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -133,13 +140,14 @@
   "devDependencies": {
     "@abtnode/types": "^1.17.12",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.27.2",
+    "@blocklet/payment-types": "1.29.0",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
     "@types/dotenv-flow": "^3.3.3",
     "@types/express": "^4.17.23",
     "@types/node": "^18.19.112",
+    "@types/node-apple-receipt-verify": "^1.7.5",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^4.6.0",
@@ -180,5 +188,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "ba98e644bcbf88924039ba8990bba673198e6a61"
+  "gitHead": "02334964fbf505ea2fd27081039542d1f9868d57"
 }

package/scripts/seed-google-play.ts

@@ -0,0 +1,79 @@
+#!/usr/bin/env tsx
+/* eslint-disable no-console */
+//
+// Seed a `google_play` PaymentMethod from a service account JSON file.
+//
+// Usage:
+//   GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_PATH=/path/to/sa.json \
+//   GOOGLE_PLAY_PACKAGE_NAME=io.arcblock.aistro \
+//   tsx scripts/seed-google-play.ts
+//
+// Optional:
+//   PAYMENT_METHOD_ID            existing id to update; otherwise a new one is created
+//   PAYMENT_METHOD_LIVEMODE      "true" (default) | "false"
+//
+// The JSON contents are stored encrypted via PaymentMethod.encryptSettings.
+
+import 'dotenv-flow/config';
+import { readFileSync } from 'fs';
+
+import { PaymentMethod } from '../api/src/store/models';
+import { sequelize } from '../api/src/store/sequelize';
+import migrate from '../api/src/store/migrate';
+import { initialize } from '../api/src/store/models';
+
+async function main(): Promise<void> {
+  const jsonPath = process.env.GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_PATH;
+  const packageName = process.env.GOOGLE_PLAY_PACKAGE_NAME;
+  if (!jsonPath || !packageName) {
+    console.error('Missing GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_PATH or GOOGLE_PLAY_PACKAGE_NAME');
+    process.exit(1);
+  }
+  const livemode = process.env.PAYMENT_METHOD_LIVEMODE !== 'false';
+  const existingId = process.env.PAYMENT_METHOD_ID;
+
+  const raw = readFileSync(jsonPath, 'utf8');
+  // Validate JSON shape early
+  const parsed = JSON.parse(raw);
+  if (!parsed.client_email || !parsed.private_key) {
+    throw new Error('service account JSON missing client_email or private_key');
+  }
+
+  initialize(sequelize);
+  await migrate();
+
+  const settings = PaymentMethod.encryptSettings({
+    google_play: {
+      package_name: packageName,
+      service_account_json: raw,
+      pubsub_topic_name: '',
+    },
+  });
+
+  if (existingId) {
+    const method = await PaymentMethod.findByPk(existingId);
+    if (!method) throw new Error(`PaymentMethod ${existingId} not found`);
+    await method.update({ settings, active: true, livemode });
+    console.log('updated PaymentMethod', method.id);
+  } else {
+    const method = await PaymentMethod.create({
+      type: 'google_play',
+      name: `Google Play (${packageName})`,
+      description: 'In-App Billing via Google Play Console',
+      logo: '',
+      active: true,
+      livemode,
+      confirmation: { type: 'callback' },
+      settings,
+      features: { recurring: true, refund: true, dispute: false },
+    } as any);
+    console.log('created PaymentMethod', method.id, `client_email=${parsed.client_email}`);
+  }
+
+  await sequelize.close();
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/src/app.tsx

@@ -1,22 +1,26 @@
 import './global.css';
+import './libs/patch-user-card';
 
 import Center from '@arcblock/ux/lib/Center';
 import withTracker from '@arcblock/ux/lib/withTracker';
 import { ConfigProvider } from '@arcblock/ux/lib/Config';
 import { ToastProvider } from '@arcblock/ux/lib/Toast';
 import { CircularProgress } from '@mui/material';
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { PaymentThemeProvider, usePreventWheel } from '@blocklet/payment-react';
-import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import { Navigate, Route, BrowserRouter as Router, Routes, useNavigate } from 'react-router-dom';
 import { joinURL } from 'ufo';
 
 import ErrorFallback from './components/error-fallback';
-import UserLayout from './components/layout/user';
+import UserLayoutDefault from './components/layout/user';
+import UserLayoutCF from './components/layout/user-cf';
 import { TransitionProvider } from './components/progress-bar';
 import { SessionProvider } from './contexts/session';
 import { translations } from './locales';
 
+const UserLayout = (window as any).blocklet?.cloudflareWorker ? UserLayoutCF : UserLayoutDefault;
+
 const HomePage = React.lazy(() => import('./pages/home'));
 const CheckoutPage = React.lazy(() => import('./pages/checkout'));
 const AdminPage = React.lazy(() => import('./pages/admin'));
@@ -43,10 +47,63 @@ const CustomerBalanceRecharge = React.lazy(() => import('./pages/customer/rechar
 //   },
 // });
 
+/**
+ * Intercept anchor clicks on internal URLs and do client-side navigation.
+ *
+ * Some third-party components (e.g. @blocklet/ui-react Dashboard sidebar) render
+ * navigation items as `<a href="/admin">` with `external: true`, which triggers
+ * a full page reload on click. That reload re-runs session bootstrap and races
+ * with page-level auth checks, sometimes redirecting the user back to "/".
+ *
+ * This handler catches all left-clicks on `<a>` elements with same-origin URLs
+ * and converts them into React Router navigation. Modified clicks (cmd/ctrl/shift),
+ * target="_blank", and external URLs are left untouched.
+ */
+function useInternalLinkInterceptor() {
+  const navigate = useNavigate();
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      // Only primary button, no modifier keys (so cmd+click still opens in new tab)
+      if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+      const anchor = (e.target as HTMLElement | null)?.closest('a');
+      if (!anchor) return;
+      // Skip if not a real anchor with href
+      const href = anchor.getAttribute('href');
+      if (!href) return;
+      // Skip target="_blank" / download / rel=external
+      if (anchor.target && anchor.target !== '' && anchor.target !== '_self') return;
+      if (anchor.hasAttribute('download')) return;
+      // Skip non-http(s) schemes: mailto:, tel:, javascript:, #hash, etc.
+      if (/^[a-z]+:/i.test(href) && !/^https?:/i.test(href)) return;
+      if (href.startsWith('#')) return;
+      // Resolve to absolute URL and check same-origin
+      let url: URL;
+      try {
+        url = new URL(href, window.location.href);
+      } catch {
+        return;
+      }
+      if (url.origin !== window.location.origin) return;
+      // Convert to client-side navigation — strip basename prefix so React Router
+      // doesn't double it (e.g. /payment/integrations → /integrations when basename="/payment/")
+      e.preventDefault();
+      const prefix = window?.blocklet?.prefix || '/';
+      let navPath = url.pathname + url.search + url.hash;
+      if (prefix !== '/' && navPath.startsWith(prefix.replace(/\/$/, ''))) {
+        navPath = navPath.slice(prefix.replace(/\/$/, '').length) || '/';
+      }
+      navigate(navPath);
+    };
+    document.addEventListener('click', handler);
+    return () => document.removeEventListener('click', handler);
+  }, [navigate]);
+}
+
 function App() {
+  useInternalLinkInterceptor();
   return (
     <TransitionProvider>
-      <ErrorBoundary FallbackComponent={ErrorFallback} onReset={window.location.reload}>
+      <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => window.location.reload()}>
         <Suspense
           fallback={
             <Center>
@@ -194,6 +251,7 @@ export default function WrappedApp() {
         <PaymentThemeProvider>
           <SessionProvider
             serviceHost={prefix}
+            useSocket={!(window as any).blocklet?.cloudflareWorker}
             protectedRoutes={['/admin/*', '/customer/*', '/integrations/*'].map((item) => joinURL(prefix, item))}>
             <Router basename={prefix}>
               <AppWithTracker />

package/src/components/customer/link.tsx

@@ -51,19 +51,15 @@ export default function CustomerLink({
       popupInfoType={InfoType.Minimal}
       showDid={size !== 'small'}
       popupShowDid
-      {...(customer?.metadata?.anonymous === true
-        ? {
-            user: {
-              fullName: customer.name || customer.email,
-              did: customer.did,
-              email: customer.email,
-              avatar: getCustomerAvatar(
-                customer?.did,
-                customer?.updated_at ? new Date(customer.updated_at).toISOString() : ''
-              ),
-            },
-          }
-        : {})}
+      user={{
+        fullName: customer.name || customer.email,
+        did: customer.did,
+        email: customer.email,
+        avatar: getCustomerAvatar(
+          customer?.did,
+          customer?.updated_at ? new Date(customer.updated_at).toISOString() : ''
+        ),
+      }}
       {...cardProps}
     />
   );

package/src/components/customer/notification-preference.tsx

@@ -18,7 +18,7 @@ import {
   ClickAwayListener,
 } from '@mui/material';
 import { useRequest } from 'ahooks';
-import { FormProvider, useForm, Controller, Control } from 'react-hook-form';
+import { FormProvider, useForm, Controller } from 'react-hook-form';
 import { useMobile } from '@blocklet/payment-react';
 import api from '../../libs/api';
 
@@ -61,7 +61,8 @@ function TimeSelector({
   timeFormatErrorMessage,
 }: {
   name: string;
-  control: Control<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  control: any;
   required: boolean;
   timeFormatErrorMessage: string;
 }) {

package/src/components/filter-toolbar.tsx

@@ -309,6 +309,10 @@ function SearchCustomers({ setSearch, search = defaultProps.search }: Pick<Props
               e.stopPropagation();
             }}
             onClick={(e) => e.stopPropagation()}
+            // Stop MUI <Menu>'s built-in letter-key navigation from stealing keystrokes
+            // (it jumps to a MenuItem starting with the typed letter, which makes the
+            // search field appear to "swallow" inputs like 'a'/'w'). See #1357.
+            onKeyDown={(e) => e.stopPropagation()}
           />
         </Box>
         {customers.map((x: any) => (

package/src/components/invoice/list.tsx

@@ -431,7 +431,15 @@ export default function InvoiceList({
         sort: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
-          return <InvoiceLink invoice={item}>{formatTime(item.updated_at)}</InvoiceLink>;
+          const hasPeriod = item.period_start > 0 && item.period_end > 0;
+          const content = <InvoiceLink invoice={item}>{formatTime(item.updated_at)}</InvoiceLink>;
+          if (!hasPeriod) return content;
+          return (
+            <Tooltip
+              title={`${t('common.billingPeriod')}: ${formatTime(item.period_start * 1000)} ~ ${formatTime(item.period_end * 1000)}`}>
+              {content}
+            </Tooltip>
+          );
         },
       },
     },

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

@@ -17,7 +17,8 @@ export async function loadFont(): Promise<boolean> {
   }
 }
 
-export function loadImage(url: string): Promise<HTMLImageElement> {
+export function loadImage(url: string): Promise<HTMLImageElement | null> {
+  if (!url) return Promise.resolve(null);
   return new Promise((resolve, reject) => {
     const img = new Image();
     img.crossOrigin = 'anonymous';