payment-kit 1.18.2 → 1.18.4

package/src/locales/en.tsx

@@ -10,7 +10,7 @@ export default flat({
       add: 'Add more metadata',
       edit: 'Edit metadata',
       empty: 'No metadata',
-      emptyTip: 'You haven’t added any metadata you can add it',
+      emptyTip: "You haven't added any metadata you can add it",
     },
     price: 'Price',
     add: 'Add',
@@ -27,6 +27,16 @@ export default flat({
     custom: 'Custom',
     estimatedDuration: '{duration} est.',
     detail: 'Detail',
+    setting: 'Setting',
+    welcome: 'Welcome to Payment Kit',
+    welcomeDesc: 'Start accepting payments in minutes with Payment Kit. Choose a feature to get started.',
+    quickStart: 'Quick Start Guides',
+    advancedFeatures: 'Advanced Features',
+    quickStarts: 'Quick Starts',
+    copy: 'Copy',
+    copySuccess: 'Copy Success',
+    copyFailed: 'Copy Failed',
+    copyTip: 'Please copy manually',
   },
   admin: {
     balances: 'Balances',
@@ -645,6 +655,64 @@ export default flat({
         quantity: 'Quantity',
       },
     },
+    donate: {
+      title: 'Donation Settings',
+      mountLocation: 'Mount Location',
+      component: 'Component',
+      description: 'Description',
+      status: {
+        title: 'Status',
+        active: 'Enable',
+        inactive: 'Disable',
+        inactiveTip:
+          'After disabling donations, the donation button will no longer be displayed and users cannot use the donation feature. Are you sure you want to disable it?',
+        inactiveTitle: 'Disable Donation',
+        activeSuccess: 'Donation feature has been enabled',
+        inactiveSuccess: 'Donation feature has been disabled',
+      },
+      editTitle: 'Edit Donation Settings',
+      updateSuccess: 'Donation settings have been updated',
+      amountSettings: 'Amount Settings',
+      presets: 'Preset Amounts',
+      presetsHelper: 'Enter preset amounts, separated by commas (e.g., 1,5,10)',
+      preset: 'Default Amount',
+      presetHelper: 'Default selected amount (must be one of the presets)',
+      custom: 'Allow Custom Amount',
+      minimum: 'Minimum Amount',
+      maximum: 'Maximum Amount',
+      amountRange: 'Amount Range: {min} - {max}',
+      customAmount: 'Custom Amount',
+      buttonSettings: 'Donation Button Settings',
+      btn: {
+        text: 'Button Text',
+        helper: 'Set the text displayed on the donation button',
+        preview: 'Button Preview',
+      },
+      dialog: {
+        preview: 'Donation Dialog Preview',
+        confirmButton: 'Confirm Donation {amount}',
+      },
+      previewTitle: 'Live Preview',
+      validation: {
+        invalidPreset: 'Default amount must be one of the presets',
+        invalidRange: 'Minimum amount must be less than maximum amount',
+        invalidAmount: 'Amount must be within allowed range',
+      },
+      historyType: {
+        title: 'Donation History Display',
+        avatar: 'Avatar Wall',
+        list: 'List',
+      },
+      intro:
+        'Configure the display effect of the donation button and donation dialog, and the donation feature will take effect after completion.',
+      usage: {
+        viewExample: 'View Usage Example',
+        title: 'Donation Component Usage Example',
+        description:
+          'To use the donation feature, you need to correctly configure PaymentProvider and DonateProvider in the component. Here is a basic example:',
+        note: 'Note: mountLocation must be unique, used to identify the donation instance. After configuration, the instance will appear in the list, and you can make further settings.',
+      },
+    },
   },
   empty: {
     image: 'No Image',
@@ -746,4 +814,35 @@ export default flat({
       title: 'Revenue',
     },
   },
+  integrations: {
+    basicFeatures: 'Basic Features',
+    advancedFeatures: 'Advanced Features',
+    features: {
+      products: {
+        title: 'Create Products',
+        intro: 'Create and manage your products or services',
+      },
+      paymentLinks: {
+        title: 'Payment Links',
+        intro: 'Create shareable payment links for quick checkout',
+      },
+      pricingTables: {
+        title: 'Pricing Tables',
+        intro: 'Create beautiful pricing tables for your products',
+      },
+      donate: {
+        title: 'Donation',
+        intro: 'Add donation button to your application with <CheckoutDonate />',
+      },
+      paymentMethods: {
+        title: 'Payment Methods',
+        intro: 'Configure multiple payment methods and currencies',
+      },
+      api: {
+        title: 'API Integration',
+        intro: 'Integrate with our JavaScript SDK for custom solutions',
+        link: 'https://www.npmjs.com/package/@blocklet/payment-js',
+      },
+    },
+  },
 });

package/src/locales/zh.tsx

@@ -26,6 +26,16 @@ export default flat({
     custom: '自定义',
     estimatedDuration: '预计可用 {duration}',
     detail: '详情',
+    setting: '配置',
+    welcome: '欢迎使用 Payment Kit',
+    welcomeDesc: '从基础功能开始，轻松接入支付功能。选择下方任意功能，立即开始使用。',
+    quickStart: '快速入门指南',
+    advancedFeatures: '高级功能',
+    quickStarts: '快速入门',
+    copy: '复制',
+    copySuccess: '复制成功',
+    copyFailed: '复制失败',
+    copyTip: '请手动复制',
   },
   admin: {
     balances: '余额',
@@ -631,6 +641,61 @@ export default flat({
         quantity: '数量',
       },
     },
+    donate: {
+      title: '打赏配置',
+      mountLocation: '名称',
+      component: '组件',
+      description: '描述',
+      status: {
+        title: '启用状态',
+        active: '启用',
+        inactive: '关闭',
+        inactiveTip: '关闭打赏后，打赏按钮将不再显示，用户无法使用打赏功能，请确认是否关闭？',
+        inactiveTitle: '关闭打赏',
+        activeSuccess: '打赏功能已启用',
+        inactiveSuccess: '打赏功能已关闭',
+      },
+      editTitle: '编辑打赏配置',
+      updateSuccess: '打赏配置已更新',
+      amountSettings: '金额设置',
+      presets: '预设金额',
+      presetsHelper: '请输入预设金额,用英文逗号分隔(例如:1,5,10)',
+      preset: '默认金额',
+      presetHelper: '默认选中的金额（必须是预设金额之一）',
+      custom: '允许自定义金额',
+      minimum: '最小金额',
+      maximum: '最大金额',
+      amountRange: '金额范围：{min} - {max}',
+      customAmount: '自定义金额',
+      buttonSettings: '打赏按钮设置',
+      btn: {
+        text: '按钮文本',
+        helper: '设置打赏按钮显示的文字',
+        preview: '按钮预览',
+      },
+      dialog: {
+        preview: '打赏弹窗预览',
+        confirmButton: '确认打赏 {amount}',
+      },
+      previewTitle: '实时预览',
+      validation: {
+        invalidPreset: '默认金额必须是预设金额之一',
+        invalidRange: '最小金额必须小于最大金额',
+        invalidAmount: '金额必须在允许范围内',
+      },
+      historyType: {
+        title: '打赏记录显示方式',
+        avatar: '头像墙',
+        list: '列表',
+      },
+      intro: '配置打赏按钮和打赏弹窗的展示效果，完成配置后打赏功能将自动生效。',
+      usage: {
+        viewExample: '查看使用示例',
+        title: '打赏组件使用示例',
+        description: '要使用打赏功能，您需要先在组件中正确配置 PaymentProvider 和 DonateProvider。以下是一个基本示例：',
+        note: '注意：mountLocation 必须是唯一的，用于标识打赏实例。配置完成后，该实例将出现在列表中，您可以进行进一步的设置。',
+      },
+    },
   },
   empty: {
     image: '无图片',
@@ -727,4 +792,35 @@ export default flat({
       title: '收款记录',
     },
   },
+  integrations: {
+    basicFeatures: '基础功能',
+    advancedFeatures: '高级功能',
+    features: {
+      products: {
+        title: '创建产品',
+        intro: '创建和管理您的产品或服务',
+      },
+      paymentLinks: {
+        title: '支付链接',
+        intro: '创建可分享的支付链接，快速完成收款',
+      },
+      pricingTables: {
+        title: '定价表',
+        intro: '为您的产品创建美观的定价表',
+      },
+      donate: {
+        title: '打赏功能',
+        intro: '使用 <CheckoutDonate /> 组件为应用添加打赏按钮',
+      },
+      paymentMethods: {
+        title: '支付方式',
+        intro: '配置多种支付方式和货币支持',
+      },
+      api: {
+        title: 'API 集成',
+        intro: '使用我们的 JavaScript SDK 实现自定义解决方案',
+        link: 'https://www.npmjs.com/package/@blocklet/payment-js',
+      },
+    },
+  },
 });

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

@@ -5,6 +5,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, formatTime, getCustomerAvatar, Table } from '@blocklet/payment-react';
 import type { TCustomer } from '@blocklet/payment-types';
 import { Avatar, CircularProgress, Stack, Typography } from '@mui/material';
+import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -22,16 +23,25 @@ const fetchData = (params: Record<string, any> = {}): Promise<{ list: TCustomer[
   return api.get(`/api/customers?${search.toString()}`).then((res: any) => res.data);
 };
 
+type SearchProps = {
+  active?: string;
+  pageSize: number;
+  page: number;
+  q?: any;
+  o?: string;
+};
 export default function CustomersList() {
   const listKey = 'customers';
   const persisted = getDurableData(listKey);
 
   const { t } = useLocaleContext();
-  const [search, setSearch] = useState<{ active?: string; pageSize: number; page: number; q?: any; o?: string }>({
-    active: '',
-    o: 'desc',
-    pageSize: persisted.rowsPerPage || 20,
-    page: persisted.page ? persisted.page + 1 : 1,
+  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+    defaultValue: {
+      active: '',
+      o: 'desc',
+      pageSize: persisted.rowsPerPage || 20,
+      page: persisted.page ? persisted.page + 1 : 1,
+    },
   });
 
   const [data, setData] = useState({}) as any;
@@ -123,11 +133,11 @@ export default function CustomersList() {
     },
   ];
 
-  const onTableChange = ({ page, rowsPerPage }: any) => {
-    if (search.pageSize !== rowsPerPage) {
-      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
-    } else if (search.page !== page + 1) {
-      setSearch((x) => ({ ...x, page: page + 1 }));
+  const onTableChange = ({ page, rowsPerPage }: { page: number; rowsPerPage: number }) => {
+    if (search!.pageSize !== rowsPerPage) {
+      setSearch((x: any) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search!.page !== page + 1) {
+      setSearch((x: any) => ({ ...x, page: page + 1 }));
     }
   };
 
@@ -140,18 +150,19 @@ export default function CustomersList() {
       columns={columns}
       options={{
         count: data.count,
-        page: search.page - 1,
-        rowsPerPage: search.pageSize,
+        page: search!.page - 1,
+        rowsPerPage: search!.pageSize,
         onColumnSortChange(_: any, order: any) {
           setSearch({
-            ...search,
-            q: search.q || {},
+            ...search!,
+            q: search!.q || {},
             o: order,
           });
         },
         onSearchChange: (text: string) => {
           if (text) {
             setSearch({
+              ...search!,
               q: {
                 'like-name': text,
                 'like-email': text,
@@ -161,13 +172,13 @@ export default function CustomersList() {
               },
               pageSize: 100,
               page: 1,
-              active: '',
             });
           } else {
             setSearch({
-              active: '',
+              ...search!,
               pageSize: 100,
               page: 1,
+              q: {},
             });
           }
         },

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

@@ -4,8 +4,8 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Status, api, formatTime, Table } from '@blocklet/payment-react';
 import type { TWebhookEndpoint } from '@blocklet/payment-types';
 import { Alert, CircularProgress, Typography } from '@mui/material';
-import { useRequest } from 'ahooks';
-import { useEffect, useState } from 'react';
+import { useLocalStorageState, useRequest } from 'ahooks';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { useTransitionContext } from '../../../../components/progress-bar';
@@ -26,10 +26,12 @@ export default function WebhooksList() {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
   const { startTransition } = useTransitionContext();
-  const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
-    active: '',
-    pageSize: persisted.rowsPerPage || 20,
-    page: persisted.page ? persisted.page + 1 : 1,
+  const [search, setSearch] = useLocalStorageState<{ active: string; pageSize: number; page: number }>(listKey, {
+    defaultValue: {
+      active: '',
+      pageSize: persisted.rowsPerPage || 20,
+      page: persisted.page ? persisted.page + 1 : 1,
+    },
   });
 
   const { loading, error, data, refresh } = useRequest(() => fetchData(search));
@@ -72,10 +74,10 @@ export default function WebhooksList() {
   ];
 
   const onTableChange = ({ page, rowsPerPage }: any) => {
-    if (search.pageSize !== rowsPerPage) {
-      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
-    } else if (search.page !== page + 1) {
-      setSearch((x) => ({ ...x, page: page + 1 }));
+    if (search!.pageSize !== rowsPerPage) {
+      setSearch((x: any) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search!.page !== page + 1) {
+      setSearch((x: any) => ({ ...x, page: page + 1 }));
     }
   };
 
@@ -87,8 +89,8 @@ export default function WebhooksList() {
       columns={columns}
       options={{
         count: data.count,
-        page: search.page - 1,
-        rowsPerPage: search.pageSize,
+        page: search!.page - 1,
+        rowsPerPage: search!.pageSize,
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TWebhookEndpoint;
           startTransition(() => {

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

@@ -4,8 +4,8 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Status, api, formatTime, usePaymentContext, Table, findCurrency } from '@blocklet/payment-react';
 import type { TPaymentLinkExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
-import { useRequest } from 'ahooks';
-import { useEffect, useState } from 'react';
+import { useLocalStorageState, useRequest } from 'ahooks';
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { joinURL } from 'ufo';
 import useBus from 'use-bus';
@@ -29,11 +29,18 @@ function PaymentLinks() {
   const { settings } = usePaymentContext();
 
   const persisted = getDurableData(listKey);
-  const [search, setSearch] = useState<{ active: string; pageSize: number; page: number; donation?: string }>({
-    active: '',
-    pageSize: persisted.rowsPerPage || 20,
-    page: persisted.page ? persisted.page + 1 : 1,
-    donation: 'hide',
+  const [search, setSearch] = useLocalStorageState<{
+    active: string;
+    pageSize: number;
+    page: number;
+    donation?: string;
+  }>(listKey, {
+    defaultValue: {
+      active: '',
+      pageSize: persisted.rowsPerPage || 20,
+      page: persisted.page ? persisted.page + 1 : 1,
+      donation: 'hide',
+    },
   });
 
   const { loading, error, data, refresh } = useRequest(() => fetchData(search));
@@ -128,10 +135,10 @@ function PaymentLinks() {
   ];
 
   const onTableChange = ({ page, rowsPerPage }: any) => {
-    if (search.pageSize !== rowsPerPage) {
-      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
-    } else if (search.page !== page + 1) {
-      setSearch((x) => ({ ...x, page: page + 1 }));
+    if (search!.pageSize !== rowsPerPage) {
+      setSearch((x: any) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search!.page !== page + 1) {
+      setSearch((x: any) => ({ ...x, page: page + 1 }));
     }
   };
 
@@ -143,10 +150,10 @@ function PaymentLinks() {
       title={
         <div className="table-toolbar-left">
           <ToggleButtonGroup
-            value={search.active}
+            value={search!.active}
             onChange={(_, value) => {
               if (value !== null) {
-                setSearch((x) => ({ ...x, active: value }));
+                setSearch((x: any) => ({ ...x, active: value }));
               }
             }}
             exclusive>
@@ -160,8 +167,8 @@ function PaymentLinks() {
       columns={columns}
       options={{
         count: data.count,
-        page: search.page - 1,
-        rowsPerPage: search.pageSize,
+        page: search!.page - 1,
+        rowsPerPage: search!.pageSize,
       }}
       loading={loading}
       onChange={onTableChange}

package/src/pages/admin/products/pricing-tables/index.tsx

@@ -4,8 +4,8 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Status, api, formatTime, Table } from '@blocklet/payment-react';
 import type { TPricingTableExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
-import { useRequest } from 'ahooks';
-import { useEffect, useState } from 'react';
+import { useLocalStorageState, useRequest } from 'ahooks';
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { joinURL } from 'ufo';
 import useBus from 'use-bus';
@@ -27,10 +27,12 @@ function PricingTables() {
   const { t } = useLocaleContext();
 
   const persisted = getDurableData(listKey);
-  const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
-    active: '',
-    pageSize: persisted.rowsPerPage || 20,
-    page: persisted.page ? persisted.page + 1 : 1,
+  const [search, setSearch] = useLocalStorageState<{ active: string; pageSize: number; page: number }>(listKey, {
+    defaultValue: {
+      active: '',
+      pageSize: persisted.rowsPerPage || 20,
+      page: persisted.page ? persisted.page + 1 : 1,
+    },
   });
 
   const { loading, error, data, refresh } = useRequest(() => fetchData(search));
@@ -113,10 +115,10 @@ function PricingTables() {
   ];
 
   const onTableChange = ({ page, rowsPerPage }: any) => {
-    if (search.pageSize !== rowsPerPage) {
-      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
-    } else if (search.page !== page + 1) {
-      setSearch((x) => ({ ...x, page: page + 1 }));
+    if (search!.pageSize !== rowsPerPage) {
+      setSearch((x: any) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search!.page !== page + 1) {
+      setSearch((x: any) => ({ ...x, page: page + 1 }));
     }
   };
 
@@ -128,10 +130,10 @@ function PricingTables() {
       title={
         <div className="table-toolbar-left">
           <ToggleButtonGroup
-            value={search.active}
+            value={search!.active}
             onChange={(_, value) => {
               if (value !== null) {
-                setSearch((x) => ({ ...x, active: value }));
+                setSearch((x: any) => ({ ...x, active: value }));
               }
             }}
             exclusive>
@@ -145,8 +147,8 @@ function PricingTables() {
       columns={columns}
       options={{
         count: data.count,
-        page: search.page - 1,
-        rowsPerPage: search.pageSize,
+        page: search!.page - 1,
+        rowsPerPage: search!.pageSize,
       }}
       loading={loading}
       onChange={onTableChange}

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

@@ -8,6 +8,7 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import useBus from 'use-bus';
 
+import { useLocalStorageState } from 'ahooks';
 import FilterToolbar from '../../../../components/filter-toolbar';
 import InfoCard from '../../../../components/info-card';
 import ProductActions from '../../../../components/product/actions';
@@ -43,11 +44,13 @@ export default function ProductsList() {
 
   const { t, locale } = useLocaleContext();
   const { settings } = usePaymentContext();
-  const [search, setSearch] = useState<SearchProps>({
-    active: '',
-    pageSize: persisted.rowsPerPage || 20,
-    page: persisted.page ? persisted.page + 1 : 1,
-    donation: 'hide',
+  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+    defaultValue: {
+      active: '',
+      pageSize: persisted.rowsPerPage || 20,
+      page: persisted.page ? persisted.page + 1 : 1,
+      donation: 'hide',
+    },
   });
 
   const [data, setData] = useState({}) as any;
@@ -142,10 +145,10 @@ export default function ProductsList() {
   ];
 
   const onTableChange = ({ page, rowsPerPage }: any) => {
-    if (search.pageSize !== rowsPerPage) {
-      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
-    } else if (search.page !== page + 1) {
-      setSearch((x) => ({ ...x, page: page + 1 }));
+    if (search!.pageSize !== rowsPerPage) {
+      setSearch((x: any) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search!.page !== page + 1) {
+      setSearch((x: any) => ({ ...x, page: page + 1 }));
     }
   };
   return (
@@ -165,31 +168,32 @@ export default function ProductsList() {
       columns={columns}
       options={{
         count: data.count,
-        page: search.page - 1,
-        rowsPerPage: search.pageSize,
+        page: search!.page - 1,
+        rowsPerPage: search!.pageSize,
         onColumnSortChange(_: any, order: any) {
           setSearch({
-            ...search,
-            q: search.q || {},
+            ...search!,
+            q: search!.q || {},
             o: order,
           });
         },
         onSearchChange: (text: string) => {
           if (text) {
             setSearch({
+              ...search!,
               q: {
                 'like-description': text,
                 'like-name': text,
               },
-              active: '',
               pageSize: 100,
               page: 1,
             });
           } else {
             setSearch({
-              active: '',
+              ...search!,
               pageSize: 100,
               page: 1,
+              q: {},
             });
           }
         },

package/src/pages/home.tsx

@@ -36,7 +36,7 @@ function Home() {
             </Typography>
           </Stack>
           <Stack direction="row" spacing={3}>
-            <Button variant="outlined" color="secondary" size="large" component={Link} to="/admin/overview">
+            <Button variant="outlined" color="secondary" size="large" component={Link} to="/integrations">
               Admin Dashboard
             </Button>
             <Button