payment-kit 1.27.2 → 1.28.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,69 @@
+{
+  "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": ["* * * * *"]
+  }
+}

package/cloudflare/wrangler.staging.json

@@ -0,0 +1,66 @@
+{
+  "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": ["* * * * *"]
+  }
+}

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.28.0",
   "scripts": {
     "dev": "blocklet dev --open",
     "prelint": "npm run types",
@@ -47,35 +47,36 @@
   },
   "dependencies": {
     "@abtnode/cron": "^1.17.12",
-    "@arcblock/did": "^1.28.5",
-    "@arcblock/did-connect-react": "^3.5.1",
+    "@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.28.0",
+    "@blocklet/payment-react": "1.28.0",
+    "@blocklet/payment-vendor": "1.28.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",
@@ -102,13 +103,16 @@
     "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",
     "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,7 +137,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.17.12",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.27.2",
+    "@blocklet/payment-types": "1.28.0",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -180,5 +184,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "ba98e644bcbf88924039ba8990bba673198e6a61"
+  "gitHead": "1486b54f913b83fb42323a89cce7503814d0685a"
 }

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';

package/src/components/layout/admin.tsx

@@ -1,13 +1,36 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { PaymentProvider } from '@blocklet/payment-react';
 import Dashboard from '@blocklet/ui-react/lib/Dashboard';
 import { styled } from '@mui/system';
 import { useEffect } from 'react';
 
-import { Typography } from '@mui/material';
+import { Box, CircularProgress } from '@mui/material';
 import { useSessionContext } from '../../contexts/session';
 
+function LayoutLoading() {
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <CircularProgress />
+    </Box>
+  );
+}
+
+// window.blocklet is bootstrapped synchronously in public/index.html (CF) but
+// the full payload is overlaid from /__blocklet__.js. Don't render children
+// (which may fire API requests on mount) until the critical fields are in
+// place — otherwise requests go out against a half-initialized config and
+// can cascade into auth failures / unintended redirects.
+function isBlockletReady() {
+  const b = (window as any).blocklet;
+  return !!(b && b.appPid && b.prefix);
+}
+
 const Root = styled(Dashboard)<{ padding: string }>`
   width: 100%;
   background-color: ${({ theme }) => theme.palette.background.default};
@@ -62,12 +85,11 @@ const Root = styled(Dashboard)<{ padding: string }>`
 `;
 
 export default function Layout(props: any) {
-  const { t } = useLocaleContext();
   const { session, connectApi, events } = useSessionContext();
 
   useEffect(() => {
     events.once('logout', () => {
-      window.location.href = '/';
+      window.location.href = window?.blocklet?.prefix || '/';
     });
   }, []);
 
@@ -78,6 +100,14 @@ export default function Layout(props: any) {
     }
   }, [session.initialized]);
 
+  // Show a loading state — not a "Redirecting..." text and not a blank page —
+  // while either window.blocklet or the session is still resolving. Admin
+  // pages fire authenticated API requests on mount, so children must not
+  // render until both are fully in place.
+  if (!isBlockletReady() || !session.initialized) {
+    return <LayoutLoading />;
+  }
+
   if (session.user) {
     return (
       <PaymentProvider session={session} connect={connectApi}>
@@ -86,5 +116,9 @@ export default function Layout(props: any) {
     );
   }
 
-  return <Typography>{t('common.redirecting')}</Typography>;
+  // Session initialized but not logged in: the effect above triggers a
+  // redirect-based login. Keep showing the loading state (instead of a
+  // "Redirecting..." text) so the user isn't confused when the actual
+  // navigation hasn't happened yet.
+  return <LayoutLoading />;
 }