payment-kit 1.21.14 → 1.21.15

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.21.14",
+  "version": "1.21.15",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -56,9 +56,9 @@
     "@blocklet/error": "^0.2.5",
     "@blocklet/js-sdk": "^1.16.53-beta-20251011-054719-4ed2f6b7",
     "@blocklet/logger": "^1.16.53-beta-20251011-054719-4ed2f6b7",
-    "@blocklet/payment-broker-client": "1.21.14",
-    "@blocklet/payment-react": "1.21.14",
-    "@blocklet/payment-vendor": "1.21.14",
+    "@blocklet/payment-broker-client": "1.21.15",
+    "@blocklet/payment-react": "1.21.15",
+    "@blocklet/payment-vendor": "1.21.15",
     "@blocklet/sdk": "^1.16.53-beta-20251011-054719-4ed2f6b7",
     "@blocklet/ui-react": "^3.1.46",
     "@blocklet/uploader": "^0.2.15",
@@ -128,7 +128,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.53-beta-20251011-054719-4ed2f6b7",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.21.14",
+    "@blocklet/payment-types": "1.21.15",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -175,5 +175,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "31f93a8310fe5184be8dd4ff23b362906c8a66cf"
+  "gitHead": "fd48f9233f19514b537e30b013e09a7d9f7a9f48"
 }

package/src/components/invoice/list.tsx

@@ -13,9 +13,9 @@ import {
 } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { Avatar, CircularProgress, Typography } from '@mui/material';
-import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
+import { useCacheState } from '../../hooks/cache-state';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
 import InvoiceActions from './action';
@@ -129,11 +129,7 @@ export default function InvoiceList({
   const { t, locale } = useLocaleContext();
   const defaultPageSize = useDefaultPageSize(20);
 
-  const urlStatus = searchParams.get('status');
-  const urlCurrencyId = searchParams.get('currency_id');
-  const urlCustomerId = searchParams.get('customer_id');
-
-  const [search, setSearch] = useLocalStorageState<
+  const [search, setSearch] = useCacheState<
     SearchProps & { ignore_zero?: boolean; include_staking?: boolean; include_return_staking?: boolean }
   >(listKey, {
     defaultValue: {
@@ -147,19 +143,21 @@ export default function InvoiceList({
       include_staking: !!include_staking,
       include_return_staking: !!include_return_staking,
     },
+    getUrlParams: () => {
+      const params: Record<string, any> = {};
+      if (searchParams.has('status')) {
+        params.status = searchParams.get('status');
+      }
+      if (searchParams.has('currency_id')) {
+        params.currency_id = searchParams.get('currency_id');
+      }
+      if (searchParams.has('customer_id')) {
+        params.customer_id = searchParams.get('customer_id');
+      }
+      return params;
+    },
   });
 
-  useEffect(() => {
-    if (urlStatus || urlCurrencyId || urlCustomerId) {
-      setSearch((prev) => ({
-        ...prev!,
-        ...(urlStatus && { status: urlStatus }),
-        ...(urlCurrencyId && { currency_id: urlCurrencyId }),
-        ...(urlCustomerId && { customer_id: urlCustomerId }),
-      }));
-    }
-  }, [urlStatus, urlCurrencyId, urlCustomerId, setSearch]);
-
   const [data, setData] = useState({}) as any;
 
   const refresh = () =>

package/src/components/payment-intent/list.tsx

@@ -11,11 +11,11 @@ import {
 } from '@blocklet/payment-react';
 import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
 import { Avatar, CircularProgress, Typography } from '@mui/material';
-import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
 import { debounce } from '../../libs/util';
+import { useCacheState } from '../../hooks/cache-state';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
 import PaymentIntentActions from './actions';
@@ -81,11 +81,7 @@ export default function PaymentList({
   const listKey = getListKey({ customer_id, invoice_id });
   const defaultPageSize = useDefaultPageSize(20);
 
-  const urlStatus = searchParams.get('status');
-  const urlCurrencyId = searchParams.get('currency_id');
-  const urlCustomerId = searchParams.get('customer_id');
-
-  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+  const [search, setSearch] = useCacheState<SearchProps>(listKey, {
     defaultValue: {
       status: '',
       customer_id,
@@ -93,19 +89,21 @@ export default function PaymentList({
       pageSize: defaultPageSize,
       page: 1,
     },
+    getUrlParams: () => {
+      const params: Record<string, any> = {};
+      if (searchParams.has('status')) {
+        params.status = searchParams.get('status');
+      }
+      if (searchParams.has('currency_id')) {
+        params.currency_id = searchParams.get('currency_id');
+      }
+      if (searchParams.has('customer_id')) {
+        params.customer_id = searchParams.get('customer_id');
+      }
+      return params;
+    },
   });
 
-  useEffect(() => {
-    if (urlStatus || urlCurrencyId || urlCustomerId) {
-      setSearch((prev) => ({
-        ...prev!,
-        ...(urlStatus && { status: urlStatus }),
-        ...(urlCurrencyId && { currency_id: urlCurrencyId }),
-        ...(urlCustomerId && { customer_id: urlCustomerId }),
-      }));
-    }
-  }, [urlStatus, urlCurrencyId, urlCustomerId, setSearch]);
-
   const [data, setData] = useState({}) as any;
 
   const fetchListData = () => {

package/src/components/payouts/list.tsx

@@ -11,13 +11,13 @@ import {
 } from '@blocklet/payment-react';
 import type { TPayoutExpanded } from '@blocklet/payment-types';
 import { Avatar, CircularProgress, Typography } from '@mui/material';
-import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
 import DID from '@arcblock/ux/lib/DID';
 import ShortenLabel from '@arcblock/ux/lib/UserCard/Content/shorten-label';
 import { debounce, getAppInfo } from '../../libs/util';
+import { useCacheState } from '../../hooks/cache-state';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
 import PayoutActions from './actions';
@@ -86,11 +86,7 @@ export default function PayoutList({
   const listKey = getListKey({ customer_id, payment_intent_id });
   const defaultPageSize = useDefaultPageSize(20);
 
-  const urlStatus = searchParams.get('status');
-  const urlCurrencyId = searchParams.get('currency_id');
-  const urlCustomerId = searchParams.get('customer_id');
-
-  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+  const [search, setSearch] = useCacheState<SearchProps>(listKey, {
     defaultValue: {
       status: status as string,
       customer_id,
@@ -98,19 +94,21 @@ export default function PayoutList({
       pageSize: defaultPageSize,
       page: 1,
     },
+    getUrlParams: () => {
+      const params: Record<string, any> = {};
+      if (searchParams.has('status')) {
+        params.status = searchParams.get('status');
+      }
+      if (searchParams.has('currency_id')) {
+        params.currency_id = searchParams.get('currency_id');
+      }
+      if (searchParams.has('customer_id')) {
+        params.customer_id = searchParams.get('customer_id');
+      }
+      return params;
+    },
   });
 
-  useEffect(() => {
-    if (urlStatus || urlCurrencyId || urlCustomerId) {
-      setSearch((prev) => ({
-        ...prev!,
-        ...(urlStatus && { status: urlStatus }),
-        ...(urlCurrencyId && { currency_id: urlCurrencyId }),
-        ...(urlCustomerId && { customer_id: urlCustomerId }),
-      }));
-    }
-  }, [urlStatus, urlCurrencyId, urlCustomerId, setSearch]);
-
   const [data, setData] = useState({}) as any;
 
   useEffect(() => {

package/src/components/refund/list.tsx

@@ -11,7 +11,6 @@ import {
 } from '@blocklet/payment-react';
 import type { TRefundExpanded } from '@blocklet/payment-types';
 import { Avatar, CircularProgress, Typography } from '@mui/material';
-import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
@@ -19,6 +18,7 @@ import { capitalize, toLower } from 'lodash';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
 import RefundActions from './actions';
+import { useCacheState } from '../../hooks/cache-state';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TRefundExpanded[]; count: number }> => {
   const search = new URLSearchParams();
@@ -96,11 +96,7 @@ export default function RefundList({
   const listKey = getListKey({ customer_id, invoice_id, subscription_id, payment_intent_id });
   const defaultPageSize = useDefaultPageSize(20);
 
-  const urlStatus = searchParams.get('status');
-  const urlCurrencyId = searchParams.get('currency_id');
-  const urlCustomerId = searchParams.get('customer_id');
-
-  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+  const [search, setSearch] = useCacheState<SearchProps>(listKey, {
     defaultValue: {
       status: status as string,
       customer_id,
@@ -110,19 +106,21 @@ export default function RefundList({
       pageSize: defaultPageSize,
       page: 1,
     },
+    getUrlParams: () => {
+      const params: Record<string, any> = {};
+      if (searchParams.has('status')) {
+        params.status = searchParams.get('status');
+      }
+      if (searchParams.has('currency_id')) {
+        params.currency_id = searchParams.get('currency_id');
+      }
+      if (searchParams.has('customer_id')) {
+        params.customer_id = searchParams.get('customer_id');
+      }
+      return params;
+    },
   });
 
-  useEffect(() => {
-    if (urlStatus || urlCurrencyId || urlCustomerId) {
-      setSearch((prev) => ({
-        ...prev!,
-        ...(urlStatus && { status: urlStatus }),
-        ...(urlCurrencyId && { currency_id: urlCurrencyId }),
-        ...(urlCustomerId && { customer_id: urlCustomerId }),
-      }));
-    }
-  }, [urlStatus, urlCurrencyId, urlCustomerId, setSearch]);
-
   const [data, setData] = useState({}) as any;
 
   const refresh = () =>

package/src/components/subscription/list.tsx

@@ -3,10 +3,10 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Status, api, formatTime, Table, useDefaultPageSize } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { CircularProgress } from '@mui/material';
-import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
+import { useCacheState } from '../../hooks/cache-state';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
 import SubscriptionActions from './actions';
@@ -70,10 +70,7 @@ export default function SubscriptionList({
   const { t } = useLocaleContext();
   const defaultPageSize = useDefaultPageSize(20);
 
-  const urlStatus = searchParams.get('status');
-  const urlCustomerId = searchParams.get('customer_id');
-
-  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+  const [search, setSearch] = useCacheState<SearchProps>(listKey, {
     defaultValue: {
       status: (status || 'active') as string,
       customer_id,
@@ -81,18 +78,18 @@ export default function SubscriptionList({
       page: 1,
       price_id: '',
     },
+    getUrlParams: () => {
+      const params: Record<string, any> = {};
+      if (searchParams.has('status')) {
+        params.status = searchParams.get('status');
+      }
+      if (searchParams.has('customer_id')) {
+        params.customer_id = searchParams.get('customer_id');
+      }
+      return params;
+    },
   });
 
-  useEffect(() => {
-    if (urlStatus || urlCustomerId) {
-      setSearch((prev) => ({
-        ...prev!,
-        ...(urlStatus && { status: urlStatus }),
-        ...(urlCustomerId && { customer_id: urlCustomerId }),
-      }));
-    }
-  }, [urlStatus, urlCustomerId, setSearch]);
-
   const [data, setData] = useState({}) as any;
 
   const refresh = () =>

package/src/hooks/cache-state.ts

@@ -0,0 +1,84 @@
+import { useCallback, useState } from 'react';
+
+type StorageType = 'localStorage' | 'sessionStorage' | 'cookie';
+
+interface CacheStateOptions<T> {
+  defaultValue: T;
+  storage?: StorageType;
+  getUrlParams?: () => Partial<T>;
+  clearUrlParams?: () => void;
+}
+
+const getStorageValue = <T>(key: string, storage: StorageType): T | undefined => {
+  try {
+    if (storage === 'cookie') {
+      const matches = document.cookie.match(
+        new RegExp(`(?:^|; )${key.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1')}=([^;]*)`)
+      );
+      return matches?.[1] ? JSON.parse(decodeURIComponent(matches[1])) : undefined;
+    }
+    const storageObj = storage === 'sessionStorage' ? sessionStorage : localStorage;
+    const value = storageObj.getItem(key);
+    return value ? JSON.parse(value) : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+const setStorageValue = <T>(key: string, value: T, storage: StorageType): void => {
+  try {
+    const serialized = JSON.stringify(value);
+    if (storage === 'cookie') {
+      document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(serialized)}; path=/`;
+      return;
+    }
+    const storageObj = storage === 'sessionStorage' ? sessionStorage : localStorage;
+    storageObj.setItem(key, serialized);
+  } catch (error) {
+    console.error(`Failed to set ${storage} value:`, error);
+  }
+};
+
+const getInitialValue = <T>(
+  key: string,
+  storage: StorageType,
+  defaultValue: T,
+  getUrlParams?: () => Partial<T>,
+  clearUrlParams?: () => void
+): T => {
+  const cachedValue = getStorageValue<T>(key, storage);
+  const urlParams = getUrlParams?.();
+
+  if (urlParams && Object.keys(urlParams).length > 0) {
+    const mergedValue = {
+      ...(cachedValue || defaultValue),
+      ...urlParams,
+    };
+    setStorageValue(key, mergedValue, storage);
+    clearUrlParams?.();
+    return mergedValue;
+  }
+
+  return cachedValue !== undefined ? cachedValue : defaultValue;
+};
+
+export const useCacheState = <T = any>(key: string, options: CacheStateOptions<T>) => {
+  const { defaultValue, storage = 'localStorage', getUrlParams, clearUrlParams } = options;
+
+  const [state, setState] = useState<T>(() =>
+    getInitialValue(key, storage, defaultValue, getUrlParams, clearUrlParams)
+  );
+
+  const setStateAndStorage = useCallback(
+    (value: T | ((prev: T) => T)) => {
+      setState((prevState) => {
+        const nextState = typeof value === 'function' ? (value as (prev: T) => T)(prevState) : value;
+        setStorageValue(key, nextState, storage);
+        return nextState;
+      });
+    },
+    [key, storage]
+  );
+
+  return [state, setStateAndStorage] as const;
+};

package/src/pages/admin/overview.tsx

@@ -1135,7 +1135,7 @@ export default function Overview() {
                         }}>
                         <Typography
                           component={Link}
-                          to={metric.link}
+                          to={`${metric.link}?status=`}
                           sx={{
                             fontSize: '1.5rem',
                             fontWeight: 600,