payment-kit 1.21.13 → 1.21.14

package/src/pages/admin/tax/edit.tsx

@@ -0,0 +1,126 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { api, formatError } from '@blocklet/payment-react';
+import { CircularProgress, Stack, Button } from '@mui/material';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { dispatch } from 'use-bus';
+
+import { EditOutlined } from '@mui/icons-material';
+import DrawerForm from '../../../components/drawer-form';
+import TaxRateForm, { TaxRateFormValues, generateTaxRateDisplayName } from '../../../components/tax/tax-rate-form';
+
+type FormData = TaxRateFormValues & {
+  metadata: Array<{ key: string; value: string }>;
+};
+
+type TaxRateData = {
+  id: string;
+  display_name: string;
+  description?: string;
+  country: string;
+  state?: string;
+  postal_code?: string;
+  tax_code?: string;
+  percentage: number;
+  metadata?: Record<string, any>;
+};
+
+export default function TaxRateEdit({
+  id,
+  initialData,
+  onClose = undefined,
+  onChange = () => {},
+}: {
+  id: string;
+  initialData: TaxRateData;
+  onClose?: () => void;
+  onChange?: () => void;
+}) {
+  const { t, locale } = useLocaleContext();
+  const navigate = useNavigate();
+
+  const methods = useForm<FormData>({
+    mode: 'onChange',
+    defaultValues: {
+      display_name: initialData.display_name,
+      description: initialData.description || '',
+      country: (initialData.country || '').toLowerCase(),
+      state: initialData.state || '',
+      postal_code: initialData.postal_code || '',
+      tax_code: initialData.tax_code || '',
+      percentage: initialData.percentage,
+      metadata: initialData.metadata || {},
+    },
+  });
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      navigate(`/admin/tax/${id}`);
+    }
+  };
+
+  const onSubmit = async (values: FormData) => {
+    try {
+      const displayName =
+        values.display_name ||
+        generateTaxRateDisplayName(
+          values.country,
+          values.state,
+          values.postal_code,
+          Number(values.percentage),
+          values.tax_code,
+          locale
+        );
+
+      await api.put(`/api/tax-rates/${id}`, {
+        display_name: displayName,
+        description: values.description,
+        country: values.country,
+        state: values.state || null,
+        postal_code: values.postal_code || null,
+        tax_code: values.tax_code || null,
+        percentage: Number(values.percentage),
+        metadata: values.metadata,
+      });
+      Toast.success(t('admin.taxRate.updated'));
+      dispatch('tax-rate.updated');
+      onChange();
+      handleClose();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
+  return (
+    <DrawerForm
+      icon={<EditOutlined />}
+      open
+      onClose={handleClose}
+      text={t('admin.taxRate.editTitle')}
+      hideLiveMode
+      width={720}
+      addons={
+        <Stack direction="row" spacing={1}>
+          <Button variant="text" color="inherit" onClick={handleClose}>
+            {t('common.cancel')}
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={methods.handleSubmit(onSubmit)}
+            disabled={methods.formState.isSubmitting}>
+            {methods.formState.isSubmitting && <CircularProgress size={16} sx={{ mr: 1 }} />}
+            {t('common.save')}
+          </Button>
+        </Stack>
+      }>
+      <FormProvider {...methods}>
+        <TaxRateForm isEdit />
+      </FormProvider>
+    </DrawerForm>
+  );
+}

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

@@ -0,0 +1,86 @@
+import Tabs from '@arcblock/ux/lib/Tabs';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Box, Stack } from '@mui/material';
+import React, { isValidElement } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { useTransitionContext } from '../../../components/progress-bar';
+import TaxRateCreate from './create';
+
+const TaxRatesList = React.lazy(() => import('./list'));
+const TaxRateDetail = React.lazy(() => import('./detail'));
+
+const pages = {
+  rates: TaxRatesList,
+};
+
+export default function TaxIndex() {
+  const navigate = useNavigate();
+  const { t } = useLocaleContext();
+  const { page = 'rates' } = useParams();
+  const { startTransition } = useTransitionContext();
+
+  if (page.startsWith('txr_')) {
+    return <TaxRateDetail id={page} />;
+  }
+
+  // @ts-ignore
+  const TabComponent = pages[page] || pages.rates;
+
+  const tabs = [{ label: t('admin.taxRates'), value: 'rates' }];
+
+  const onTabChange = (newTab: string) => {
+    startTransition(() => {
+      navigate(`/admin/tax/${newTab}`);
+    });
+  };
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          alignItems: 'flex-start',
+          justifyContent: 'end',
+          flexWrap: 'wrap',
+        }}>
+        {/* @ts-ignore */}
+        <Tabs
+          // @ts-ignore
+          tabs={tabs}
+          // @ts-ignore
+          current={page}
+          // @ts-ignore
+          onChange={onTabChange}
+          scrollButtons="auto"
+          variant="scrollable"
+          sx={{
+            flex: '1 0 auto',
+            maxWidth: '100%',
+            '.MuiTab-root': {
+              color: 'text.lighter',
+            },
+            '.MuiTabs-indicator': {
+              display: 'none',
+            },
+            '.Mui-selected': {
+              fontSize: 24,
+              color: 'text.primary',
+            },
+            '.MuiTabs-hideScrollbar': {
+              border: 'none !important',
+            },
+            '.MuiTouchRipple-root': {
+              display: 'none',
+            },
+          }}
+        />
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <TaxRateCreate />
+        </Box>
+      </Stack>
+      {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
+    </>
+  );
+}

package/src/pages/admin/tax/list.tsx

@@ -0,0 +1,334 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { getDurableData } from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Status, Table, api, formatTime } from '@blocklet/payment-react';
+import { Box, Button, Tooltip, Typography } from '@mui/material';
+import { useLocalStorageState, useRequest, useUpdateEffect } from 'ahooks';
+import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import useBus from 'use-bus';
+import { FlagEmoji } from 'react-international-phone';
+
+import Copyable from '../../../components/copyable';
+import TaxRateActions from '../../../components/tax/actions';
+import TaxFilterToolbar from '../../../components/tax/filter-toolbar';
+import { getTaxCodeInfo, getCountryInfo } from '../../../components/tax/tax-utils';
+
+type SearchProps = {
+  page: number;
+  pageSize: number;
+  active?: string;
+  country?: string;
+  q?: string;
+};
+
+const fetchTaxRates = (params: Record<string, any> = {}): Promise<{ list: any[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    const value = params[key];
+    if (value === undefined || value === null || value === '') {
+      return;
+    }
+    if (key === 'q' && value) {
+      search.set('q', value);
+      return;
+    }
+    search.set(key, String(value));
+  });
+
+  return api.get(`/api/tax-rates?${search.toString()}`).then((res) => res.data);
+};
+
+export default function TaxRatesList() {
+  const listKey = 'tax-rates';
+  const persisted = getDurableData(listKey);
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+
+  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+    defaultValue: {
+      page: persisted.page ? persisted.page + 1 : 1,
+      pageSize: persisted.rowsPerPage || 20,
+      active: '',
+      country: '',
+      q: '',
+    },
+  });
+
+  const query = useMemo(() => {
+    const params: Record<string, any> = {
+      page: search?.page,
+      pageSize: search?.pageSize,
+      sort: '-createdAt', // 按创建时间倒序
+    };
+
+    if (search?.active) {
+      params.active = search.active === 'active';
+    }
+    if (search?.country) {
+      params.country = search.country;
+    }
+    if (search?.q) {
+      const term = encodeURIComponent(search.q);
+      const parts = [
+        `like-display_name:${term}`,
+        `like-description:${term}`,
+        `like-state:${term}`,
+        `like-postal_code:${term}`,
+        `like-tax_code:${term}`,
+        `like-country:${term}`,
+        `like-percentage:${term}`,
+      ];
+      params.q = parts.join(' ');
+    }
+
+    return params;
+  }, [search]);
+
+  const {
+    data = {
+      list: [],
+      count: 0,
+    },
+    refresh,
+    loading,
+  } = useRequest(() => fetchTaxRates(query), {
+    refreshDeps: [query],
+  });
+
+  useBus('tax-rate.created', () => refresh(), []);
+  useBus('tax-rate.updated', () => refresh(), []);
+  useBus('tax-rate.deleted', () => refresh(), []);
+
+  useUpdateEffect(() => {
+    refresh();
+  }, [search?.page, search?.pageSize]);
+
+  const taxRates = data.list || [];
+  const { locale } = useLocaleContext();
+
+  const columns = [
+    {
+      label: t('common.id'),
+      name: 'id',
+      options: {
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = taxRates[index];
+          return <Copyable text={item.id} style={{ fontSize: '0.875rem' }} />;
+        },
+      },
+    },
+    {
+      label: t('admin.taxRate.displayName'),
+      name: 'display_name',
+      options: {
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = taxRates[index];
+          return (
+            <Button
+              variant="text"
+              sx={{ p: 0, minWidth: 'unset', textTransform: 'none', textAlign: 'left' }}
+              onClick={() => navigate(`/admin/tax/${item.id}`)}>
+              {item.display_name}
+            </Button>
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.taxRate.location'),
+      name: 'location',
+      options: {
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = taxRates[index];
+          if (!item.country) {
+            return '—';
+          }
+
+          const countryInfo = getCountryInfo(item.country);
+          const parts = [];
+          if (item.state) {
+            parts.push(item.state);
+          }
+          if (item.postal_code) {
+            parts.push(item.postal_code);
+          }
+
+          return (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <FlagEmoji iso2={item.country.toLowerCase()} style={{ width: 24 }} />
+              <Typography variant="body2">
+                {countryInfo?.name}
+                {parts.length > 0 && ` · ${parts.join(' · ')}`}
+              </Typography>
+            </Box>
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.taxRate.percentage'),
+      name: 'percentage',
+      options: {
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = taxRates[index];
+          return `${item.percentage}%`;
+        },
+      },
+    },
+    {
+      label: t('admin.taxRate.taxCode'),
+      name: 'tax_code',
+      options: {
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = taxRates[index];
+          if (!item.tax_code) {
+            return '—';
+          }
+
+          const taxCodeInfo = getTaxCodeInfo(item.tax_code, locale);
+          if (!taxCodeInfo) {
+            return item.tax_code;
+          }
+
+          return (
+            <Tooltip title={taxCodeInfo.description} arrow>
+              <Box>
+                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                  {taxCodeInfo.name}
+                </Typography>
+                <Typography
+                  variant="caption"
+                  sx={{
+                    color: 'text.secondary',
+                  }}>
+                  {taxCodeInfo.id}
+                </Typography>
+              </Box>
+            </Tooltip>
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.taxRate.relatedInvoiceNum'),
+      name: 'invoice_count',
+      options: {
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = taxRates[index];
+          const count = Number(item.invoice_count) || 0;
+
+          return (
+            <Typography
+              variant="body2"
+              sx={{
+                color: count > 0 ? 'text.primary' : 'text.secondary',
+              }}>
+              {count > 0 ? count : t('admin.taxRate.notUsed')}
+            </Typography>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'active',
+      options: {
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = taxRates[index];
+          return (
+            <Status
+              label={item.active ? t('common.active') : t('common.inactive')}
+              color={item.active ? 'success' : 'default'}
+            />
+          );
+        },
+      },
+    },
+    {
+      label: t('common.createdAt'),
+      name: 'created_at',
+      options: {
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = taxRates[index];
+          return formatTime(item.created_at);
+        },
+      },
+    },
+    {
+      label: t('common.actions'),
+      name: 'actions',
+      width: 80,
+      options: {
+        sort: false,
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = taxRates[index];
+          return <TaxRateActions data={item} onChange={() => refresh()} />;
+        },
+      },
+    },
+  ];
+
+  const handleTableChange = ({ page, rowsPerPage }: any) => {
+    if (search!.pageSize !== rowsPerPage) {
+      setSearch((prev) => ({ ...(prev || {}), page: 1, pageSize: rowsPerPage }));
+    } else if (search!.page !== page + 1) {
+      // @ts-ignore
+      setSearch((prev) => ({ ...(prev || {}), page: page + 1 }));
+    }
+  };
+
+  const handleSearchChange = (value: string) => {
+    // @ts-ignore
+    setSearch((prev) => ({
+      ...(prev || {}),
+      q: value,
+      page: 1,
+    }));
+  };
+
+  const handleFilterChange = (key: keyof SearchProps, value: string) => {
+    // @ts-ignore
+    setSearch((prev) => ({
+      ...(prev || {}),
+      [key]: value,
+      page: 1,
+    }));
+  };
+
+  const title = (
+    <TaxFilterToolbar
+      search={search}
+      onFilterChange={(key, value) => handleFilterChange(key as keyof SearchProps, value)}
+    />
+  );
+
+  return (
+    <Table
+      hasRowLink={false}
+      durable={`__${listKey}__`}
+      durableKeys={['page', 'rowsPerPage', 'searchText']}
+      title={title}
+      data={taxRates}
+      columns={columns}
+      loading={loading}
+      options={{
+        count: data.count,
+        page: (search?.page || 1) - 1,
+        rowsPerPage: search?.pageSize || 20,
+        onSearchChange: handleSearchChange,
+      }}
+      onChange={handleTableChange}
+      mobileTDFlexDirection="row"
+    />
+  );
+}

package/src/pages/customer/subscription/change-payment.tsx

@@ -276,7 +276,7 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
         />
         {subscription.paymentMethod.type !== 'stripe' && (
           <Stack direction="column" className="cko-payment-form" spacing={0}>
-            <AddressForm mode="auto" stripe={method?.type === 'stripe'} />
+            <AddressForm mode="auto" />
           </Stack>
         )}
       </Stack>

package/src/pages/home.tsx

@@ -3,7 +3,10 @@ import { Avatar, Button, Stack, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
 import Typewriter from 'typewriter-effect';
 
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
 function Home() {
+  const { t } = useLocaleContext();
   return (
     <div>
       <Header
@@ -50,7 +53,7 @@ function Home() {
               }}>
               <Typewriter
                 options={{
-                  strings: ['The decentralized stripe alike payment solution for blocklets'],
+                  strings: [t('common.homeTagline')],
                   autoStart: true,
                   loop: true,
                 }}
@@ -59,7 +62,7 @@ function Home() {
           </Stack>
           <Stack direction="row" spacing={3}>
             <Button variant="outlined" color="secondary" size="large" component={Link} to="/integrations">
-              Admin Dashboard
+              {t('common.adminDashboard')}
             </Button>
             <Button
               variant="outlined"
@@ -68,7 +71,7 @@ function Home() {
               component={Link}
               to="/customer"
               sx={{ background: 'transparent' }}>
-              Customer Portal
+              {t('common.customerPortal')}
             </Button>
           </Stack>
         </Stack>