payment-kit 1.21.13 → 1.21.15

package/src/components/product/form.tsx

@@ -2,12 +2,14 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { FormInput, FormLabel, Collapse } from '@blocklet/payment-react';
 import type { InferFormType, TProduct } from '@blocklet/payment-types';
-import { Box, Stack, Typography, Select, MenuItem } from '@mui/material';
+import { Box, Stack, Typography, Select, MenuItem, Link } from '@mui/material';
 import { useFormContext, useWatch, Controller } from 'react-hook-form';
+import { Link as RouterLink } from 'react-router-dom';
 
 import MetadataForm from '../metadata/form';
 import type { Price } from '../price/form';
 import Uploader from '../uploader';
+import TaxCodeSelect from '../tax/tax-code-select';
 import ProductFeatures from './features';
 import VendorConfig from './vendor-config';
 
@@ -52,10 +54,56 @@ export default function ProductForm({ simple = false }: Props) {
         render={({ field }) => (
           <Box sx={{ width: '100%' }}>
             <FormLabel sx={{ color: 'text.primary', fontSize: '0.875rem' }}>{t('admin.product.type.label')}</FormLabel>
-            <Select {...field} fullWidth size="small">
-              <MenuItem value="good">{t('admin.product.type.good')}</MenuItem>
-              <MenuItem value="service">{t('admin.product.type.service')}</MenuItem>
-              <MenuItem value="credit">{t('admin.product.type.credit')}</MenuItem>
+            <Select
+              {...field}
+              fullWidth
+              size="small"
+              renderValue={(value) => {
+                const typeMap: Record<string, string> = {
+                  good: t('admin.product.type.good'),
+                  service: t('admin.product.type.service'),
+                  credit: t('admin.product.type.credit'),
+                };
+                return typeMap[value as string] || value;
+              }}>
+              <MenuItem value="good">
+                <Box>
+                  <Typography variant="body2">{t('admin.product.type.good')}</Typography>
+                  <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                    {t('admin.product.type.goodDesc')}
+                  </Typography>
+                </Box>
+              </MenuItem>
+              <MenuItem value="service">
+                <Box>
+                  <Typography variant="body2">{t('admin.product.type.service')}</Typography>
+                  <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                    {t('admin.product.type.serviceDesc')}
+                  </Typography>
+                </Box>
+              </MenuItem>
+              <MenuItem value="credit">
+                <Box>
+                  <Typography variant="body2">{t('admin.product.type.credit')}</Typography>
+                  <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                    {t('admin.product.type.creditDesc')}
+                    {' - '}
+                    <Link
+                      component={RouterLink}
+                      to="/admin/billing/meters"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      sx={{
+                        color: 'primary.main',
+                        fontWeight: 500,
+                        '&:hover': { textDecoration: 'underline' },
+                      }}
+                      onClick={(e) => e.stopPropagation()}>
+                      {t('admin.product.type.creditDescLink')}
+                    </Link>
+                  </Typography>
+                </Box>
+              </MenuItem>
             </Select>
           </Box>
         )}
@@ -120,6 +168,32 @@ export default function ProductForm({ simple = false }: Props) {
         </Box>
       </Stack>
       <Stack sx={{ '& .vendor-config': { mt: 2 } }}>
+        <Box sx={{ mb: 2 }}>
+          <FormLabel
+            description={
+              <>
+                {t('admin.taxRate.taxCodeDescription')}
+                <Link
+                  component={RouterLink}
+                  to="/admin/tax"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  sx={{
+                    textDecoration: 'none',
+                    color: 'primary.main',
+                    mx: 0.5,
+                    fontWeight: 500,
+                    '&:hover': { textDecoration: 'underline' },
+                  }}>
+                  {t('admin.taxRate.taxCodeDescriptionLink')}
+                </Link>
+                {t('admin.taxRate.taxCodeDescriptionSuffix')}
+              </>
+            }>
+            {t('admin.taxRate.taxCode')}
+          </FormLabel>
+          <TaxCodeSelect label="" />
+        </Box>
         <Collapse trigger={t('admin.product.vendorConfig.title')}>
           <VendorConfig />
         </Collapse>

package/src/components/refund/list.tsx

@@ -11,14 +11,14 @@ 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 } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 
 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();
@@ -39,6 +39,7 @@ type SearchProps = {
   pageSize: number;
   page: number;
   customer_id?: string;
+  currency_id?: string;
   invoice_id?: string;
   subscription_id?: string;
   payment_intent_id?: string;
@@ -90,9 +91,12 @@ export default function RefundList({
   payment_intent_id = '',
 }: ListProps) {
   const { t } = useLocaleContext();
+  const [searchParams] = useSearchParams();
+
   const listKey = getListKey({ customer_id, invoice_id, subscription_id, payment_intent_id });
   const defaultPageSize = useDefaultPageSize(20);
-  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+
+  const [search, setSearch] = useCacheState<SearchProps>(listKey, {
     defaultValue: {
       status: status as string,
       customer_id,
@@ -102,6 +106,19 @@ 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;
+    },
   });
 
   const [data, setData] = useState({}) as any;

package/src/components/subscription/items/actions.tsx

@@ -7,27 +7,37 @@ import ClickBoundary from '../../click-boundary';
 
 type Props = {
   data: TLineItemExpanded;
+  mode?: 'admin' | 'portal';
 };
 
-export default function LineItemActions(props: Props) {
+export default function LineItemActions({ data, mode = 'portal' }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
+  const isAdmin = mode === 'admin';
+  const taxRateId = (data as any).tax_rate_id;
+
+  const actions = [
+    {
+      label: t('admin.price.view'),
+      handler: () => navigate(`/admin/products/${data.price_id}`),
+      color: 'primary',
+    },
+    {
+      label: t('admin.product.view'),
+      handler: () => navigate(`/admin/products/${data.product_id || data.price.product_id}`),
+      color: 'primary',
+    },
+    isAdmin &&
+      taxRateId && {
+        label: t('admin.taxRate.view'),
+        handler: () => navigate(`/admin/tax/${taxRateId}`),
+        color: 'primary',
+      },
+  ].filter(Boolean);
+
   return (
     <ClickBoundary>
-      <Actions
-        actions={[
-          {
-            label: t('admin.price.view'),
-            handler: () => navigate(`/admin/products/${props.data.price_id}`),
-            color: 'primary',
-          },
-          {
-            label: t('admin.product.view'),
-            handler: () => navigate(`/admin/products/${props.data.product_id || props.data.price.product_id}`),
-            color: 'primary',
-          },
-        ]}
-      />
+      <Actions actions={actions} />
     </ClickBoundary>
   );
 }

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 } from 'react-router-dom';
+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';
@@ -64,11 +64,13 @@ export default function SubscriptionList({
   },
   status = '',
 }: ListProps) {
+  const [searchParams] = useSearchParams();
   const listKey = getListKey({ customer_id });
 
   const { t } = useLocaleContext();
   const defaultPageSize = useDefaultPageSize(20);
-  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+
+  const [search, setSearch] = useCacheState<SearchProps>(listKey, {
     defaultValue: {
       status: (status || 'active') as string,
       customer_id,
@@ -76,6 +78,16 @@ 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;
+    },
   });
 
   const [data, setData] = useState({}) as any;

package/src/components/tax/actions.tsx

@@ -0,0 +1,140 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import ClickBoundary from '../click-boundary';
+import Actions from '../actions';
+import TaxRateEdit from '../../pages/admin/tax/edit';
+
+type TaxRate = {
+  id: string;
+  display_name: string;
+  description?: string;
+  country: string;
+  state?: string;
+  postal_code?: string;
+  tax_code?: string;
+  percentage: number;
+  active: boolean;
+  invoice_count?: number;
+  metadata?: Record<string, any>;
+  created_at?: string;
+  updated_at?: string;
+};
+
+type Props = {
+  data: TaxRate;
+  onChange?: () => void;
+};
+
+export default function TaxRateActions({ data, onChange = () => {} }: Props) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const [state, setState] = useState<{ action: '' | 'toggle' | 'delete' | 'edit'; loading: boolean }>({
+    action: '',
+    loading: false,
+  });
+
+  const finish = () => {
+    setState({ action: '', loading: false });
+    onChange();
+  };
+
+  const handleToggle = async () => {
+    try {
+      setState({ action: 'toggle', loading: true });
+      await api.put(`/api/tax-rates/${data.id}`, { active: !data.active });
+      Toast.success(t('admin.taxRate.updated'));
+      finish();
+    } catch (error) {
+      console.error(error);
+      Toast.error(formatError(error));
+      setState({ action: '', loading: false });
+    }
+  };
+
+  const handleDelete = async () => {
+    try {
+      setState({ action: 'delete', loading: true });
+      await api.delete(`/api/tax-rates/${data.id}`);
+      Toast.success(t('admin.taxRate.deleted'));
+      finish();
+    } catch (error) {
+      console.error(error);
+      Toast.error(formatError(error));
+      setState({ action: '', loading: false });
+    }
+  };
+
+  const invoiceCount = Number(data.invoice_count) || 0;
+  const canDelete = invoiceCount === 0;
+
+  const actions = [
+    {
+      label: t('common.view'),
+      color: 'primary',
+      handler: () => navigate(`/admin/tax/${data.id}`),
+    },
+    {
+      label: t('common.edit'),
+      color: 'primary',
+      handler: () => setState({ action: 'edit', loading: false }),
+    },
+    data.active
+      ? {
+          label: t('common.deactivate'),
+          color: 'secondary',
+          handler: () => setState({ action: 'toggle', loading: false }),
+        }
+      : {
+          label: t('common.activate'),
+          color: 'secondary',
+          handler: () => setState({ action: 'toggle', loading: false }),
+        },
+    canDelete
+      ? {
+          label: t('common.delete'),
+          color: 'error',
+          handler: () => setState({ action: 'delete', loading: false }),
+          divider: true,
+        }
+      : null,
+  ].filter(Boolean) as any[];
+
+  return (
+    <ClickBoundary>
+      <Actions actions={actions} variant="compact" />
+      {state.action === 'edit' && (
+        <TaxRateEdit
+          id={data.id}
+          initialData={data}
+          onClose={() => setState({ action: '', loading: false })}
+          onChange={onChange}
+        />
+      )}
+      {state.action === 'toggle' && (
+        <ConfirmDialog
+          onConfirm={handleToggle}
+          onCancel={() => setState({ action: '', loading: false })}
+          loading={state.loading}
+          title={data.active ? t('admin.taxRate.deactivateTitle') : t('admin.taxRate.activateTitle')}
+          message={
+            data.active
+              ? t('admin.taxRate.deactivateMessage', { name: data.display_name })
+              : t('admin.taxRate.activateMessage', { name: data.display_name })
+          }
+        />
+      )}
+      {state.action === 'delete' && (
+        <ConfirmDialog
+          onConfirm={handleDelete}
+          onCancel={() => setState({ action: '', loading: false })}
+          loading={state.loading}
+          title={t('admin.taxRate.deleteTitle')}
+          message={t('admin.taxRate.deleteMessage', { name: data.display_name })}
+        />
+      )}
+    </ClickBoundary>
+  );
+}

package/src/components/tax/filter-toolbar.tsx

@@ -0,0 +1,230 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Add, Close } from '@mui/icons-material';
+import { Box, Button, ListItemIcon, ListItemText, Menu, MenuItem, TextField, styled } from '@mui/material';
+import { defaultCountries, parseCountry, FlagEmoji } from 'react-international-phone';
+import type { CountryIso2 } from 'react-international-phone';
+import { useMemo, useState } from 'react';
+
+type SearchState = {
+  active?: string;
+  country?: string;
+  q?: string;
+};
+
+type Props = {
+  search?: SearchState | null;
+  onFilterChange: (key: keyof SearchState, value: string) => void;
+};
+
+const Root = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  @media (min-width: 960px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .filters {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .filter-trigger {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 24px;
+    background-color: ${({ theme }) => theme.palette.grey[100]};
+    color: ${({ theme }) => theme.palette.text.secondary};
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 20px;
+    text-transform: none;
+  }
+
+  .filter-trigger span {
+    color: ${({ theme }) => theme.palette.primary.main};
+    padding-left: 4px;
+  }
+`;
+
+export default function TaxFilterToolbar({ search = {}, onFilterChange }: Props) {
+  const { t } = useLocaleContext();
+  const [statusAnchor, setStatusAnchor] = useState<null | HTMLElement>(null);
+  const [countryAnchor, setCountryAnchor] = useState<null | HTMLElement>(null);
+  const [countrySearch, setCountrySearch] = useState('');
+
+  const statusLabel = useMemo(() => {
+    if (!search?.active) return '';
+    if (search.active === 'active') return t('common.active');
+    if (search.active === 'inactive') return t('common.inactive');
+    return '';
+  }, [search?.active, t]);
+
+  type ParsedCountry = ReturnType<typeof parseCountry>;
+
+  const countries = useMemo<ParsedCountry[]>(() => {
+    const term = countrySearch.trim().toLowerCase();
+    if (!term) {
+      return defaultCountries.map((country) => parseCountry(country));
+    }
+    return defaultCountries
+      .map((country) => parseCountry(country))
+      .filter(
+        (country) =>
+          country.name.toLowerCase().includes(term) ||
+          country.iso2.toLowerCase().includes(term) ||
+          `+${country.dialCode}`.includes(term)
+      );
+  }, [countrySearch]);
+
+  const selectedCountry = useMemo<ParsedCountry | { iso2: CountryIso2; name: string; dialCode: string } | null>(() => {
+    if (!search?.country) return null;
+    const match = defaultCountries.find((item) => item[1] === search.country);
+    if (!match) {
+      return {
+        iso2: search.country.toLowerCase() as CountryIso2,
+        name: search.country.toUpperCase(),
+        dialCode: '',
+      };
+    }
+    return parseCountry(match);
+  }, [search?.country]);
+
+  const closeCountryMenu = () => {
+    setCountrySearch('');
+    setCountryAnchor(null);
+  };
+
+  return (
+    <Root>
+      <Box className="filters">
+        <Button
+          className="filter-trigger"
+          variant="text"
+          onClick={(event) => setStatusAnchor(event.currentTarget as HTMLElement)}>
+          {search?.active ? (
+            <Close
+              sx={{ fontSize: 18, mr: 1 }}
+              onClick={(event) => {
+                event.stopPropagation();
+                onFilterChange('active', '');
+              }}
+            />
+          ) : (
+            <Add sx={{ fontSize: 18, mr: 1 }} />
+          )}
+          {t('common.status')}
+          {statusLabel && <span>{statusLabel}</span>}
+        </Button>
+        <Menu
+          anchorEl={statusAnchor}
+          open={Boolean(statusAnchor)}
+          onClose={() => setStatusAnchor(null)}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'left' }}>
+          <MenuItem
+            onClick={() => {
+              onFilterChange('active', 'active');
+              setStatusAnchor(null);
+            }}>
+            {t('common.active')}
+          </MenuItem>
+          <MenuItem
+            onClick={() => {
+              onFilterChange('active', 'inactive');
+              setStatusAnchor(null);
+            }}>
+            {t('common.inactive')}
+          </MenuItem>
+        </Menu>
+
+        <Button
+          className="filter-trigger"
+          variant="text"
+          onClick={(event) => {
+            setCountrySearch('');
+            setCountryAnchor(event.currentTarget as HTMLElement);
+          }}>
+          {search?.country ? (
+            <Close
+              sx={{ fontSize: 18, mr: 1 }}
+              onClick={(event) => {
+                event.stopPropagation();
+                onFilterChange('country', '');
+              }}
+            />
+          ) : (
+            <Add sx={{ fontSize: 18, mr: 1 }} />
+          )}
+          {t('admin.taxRate.country')}
+          {selectedCountry && (
+            <Box
+              sx={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 0.75,
+                ml: 0.5,
+                color: 'primary.main',
+              }}>
+              <FlagEmoji iso2={selectedCountry.iso2 as CountryIso2} style={{ fontSize: 16 }} />
+              {selectedCountry.name}
+            </Box>
+          )}
+        </Button>
+        <Menu
+          anchorEl={countryAnchor}
+          open={Boolean(countryAnchor)}
+          onClose={() => closeCountryMenu()}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'left' }}>
+          <Box
+            sx={{
+              p: 2,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 1.5,
+            }}>
+            <TextField
+              size="small"
+              placeholder={t('admin.taxRate.searchCountry')}
+              value={countrySearch}
+              onChange={(event) => setCountrySearch(event.target.value)}
+              autoFocus
+            />
+            <Box
+              sx={{
+                maxHeight: 260,
+                overflowY: 'auto',
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: 1,
+              }}>
+              {countries.map((country) => (
+                <MenuItem
+                  key={country.iso2}
+                  selected={country.iso2 === search?.country}
+                  onClick={() => {
+                    onFilterChange('country', country.iso2);
+                    closeCountryMenu();
+                  }}>
+                  <ListItemIcon sx={{ minWidth: 32, fontSize: 18, color: 'text.secondary' }}>
+                    <FlagEmoji iso2={country.iso2 as CountryIso2} />
+                  </ListItemIcon>
+                  <ListItemText primary={country.name} />
+                </MenuItem>
+              ))}
+              {!countries.length && (
+                <Box sx={{ py: 1.5, px: 2, fontSize: 14, color: 'text.secondary' }}>{t('common.noData')}</Box>
+              )}
+            </Box>
+          </Box>
+        </Menu>
+      </Box>
+    </Root>
+  );
+}