payment-kit 1.20.11 → 1.20.13

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

@@ -1,5 +1,212 @@
-import { Alert } from '@mui/material';
+/* eslint-disable react/no-unstable-nested-components */
+import { getDurableData } from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Status, api, formatTime, usePaymentContext, Table, findCurrency, formatAmount } from '@blocklet/payment-react';
+import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import useBus from 'use-bus';
 
-export default function Coupons() {
-  return <Alert severity="info">This feature is planned, but not implemented yet.</Alert>;
+import { useLocalStorageState, useRequest } from 'ahooks';
+import FilterToolbar from '../../../../components/filter-toolbar';
+
+const fetchData = (params: Record<string, any> = {}): Promise<{ list: any[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    let v = params[key];
+    if (key === 'q') {
+      v = Object.entries(v)
+        .map((x) => x.join(':'))
+        .join(' ');
+    }
+    if (key === 'status' && ['active', 'inactive'].includes(v)) {
+      search.set('valid', v === 'active' ? 'true' : 'false');
+      return;
+    }
+    search.set(key, String(v));
+  });
+  return api.get(`/api/coupons?${search.toString()}`).then((res) => res.data);
+};
+
+type SearchProps = {
+  valid: string;
+  pageSize: number;
+  page: number;
+  q?: any;
+  o?: string;
+};
+
+export default function CouponsList() {
+  const listKey = 'coupons';
+  const persisted = getDurableData(listKey);
+
+  const { t } = useLocaleContext();
+  const { settings } = usePaymentContext();
+  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+    defaultValue: {
+      valid: '',
+      pageSize: persisted.rowsPerPage || 20,
+      page: persisted.page ? persisted.page + 1 : 1,
+    },
+  });
+
+  const {
+    data = {
+      list: [],
+      count: 0,
+    },
+    refresh,
+  } = useRequest(() => fetchData(search), {
+    refreshDeps: [search],
+  });
+
+  const couponList = data?.list || [];
+  useBus('coupon.created', () => refresh(), []);
+  useBus('coupon.updated', () => refresh(), []);
+  useBus('coupon.deleted', () => refresh(), []);
+
+  useEffect(() => {
+    refresh();
+  }, [search]);
+
+  const formatCouponTerms = (coupon: any) => {
+    let couponOff = '';
+    if (coupon.percent_off && coupon.percent_off > 0) {
+      couponOff = `${coupon.percent_off}%`;
+    }
+    if (coupon.amount_off && coupon.amount_off !== '0') {
+      const currency = findCurrency(settings.paymentMethods, coupon.currency_id) || settings.baseCurrency;
+      couponOff = `${formatAmount(coupon.amount_off, currency.decimal)} ${currency.symbol}`;
+    }
+    if (couponOff) {
+      return t(`admin.coupon.couponTerms.${coupon.duration}`, { couponOff, months: coupon.duration_in_months });
+    }
+    return t('admin.coupon.noDiscount');
+  };
+
+  const columns = [
+    {
+      label: t('admin.coupon.listTitle'),
+      name: 'name',
+      options: {
+        filter: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = couponList[index];
+          return <Link to={`/admin/products/coupons/${item.id}`}>{item.name}</Link>;
+        },
+      },
+    },
+    {
+      label: t('admin.coupon.terms'),
+      name: 'terms',
+      options: {
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = couponList[index];
+          return <Link to={`/admin/products/coupons/${item.id}`}>{formatCouponTerms(item)}</Link>;
+        },
+      },
+    },
+    {
+      label: t('admin.coupon.redemptions'),
+      name: 'redemptions',
+      options: {
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = couponList[index];
+          const maxRedemptions = item.max_redemptions || t('admin.coupon.unlimited');
+          const timesRedeemed = item.times_redeemed || 0;
+          return (
+            <Link to={`/admin/products/coupons/${item.id}`}>
+              {timesRedeemed} / {maxRedemptions}
+            </Link>
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.coupon.expires'),
+      name: 'expires',
+      options: {
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = couponList[index];
+          if (item.redeem_by) {
+            return <Link to={`/admin/products/coupons/${item.id}`}>{formatTime(item.redeem_by * 1000)}</Link>;
+          }
+          return <Link to={`/admin/products/coupons/${item.id}`}>—</Link>;
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'valid',
+      options: {
+        filter: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = couponList[index];
+          return (
+            <Link to={`/admin/products/coupons/${item.id}`}>
+              <Status
+                label={item?.valid ? t('common.active') : t('common.inactive')}
+                color={item?.valid ? 'success' : 'default'}
+              />
+            </Link>
+          );
+        },
+      },
+    },
+  ];
+
+  const onTableChange = ({ page, rowsPerPage }: any) => {
+    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 (
+    <Table
+      hasRowLink
+      durable={`__${listKey}__`}
+      durableKeys={['page', 'rowsPerPage', 'searchText']}
+      title={<FilterToolbar setSearch={setSearch} search={search} status={['active', 'inactive']} />}
+      data={couponList}
+      columns={columns}
+      options={{
+        count: data.count,
+        page: search!.page - 1,
+        rowsPerPage: search!.pageSize,
+        onColumnSortChange(_: any, order: any) {
+          setSearch({
+            ...search!,
+            q: search!.q || {},
+            o: order,
+          });
+        },
+        onSearchChange: (text: string) => {
+          if (text) {
+            setSearch({
+              ...search!,
+              q: {
+                'like-name': text,
+                'like-id': text,
+              },
+              pageSize: 100,
+              page: 1,
+            });
+          } else {
+            setSearch({
+              ...search!,
+              pageSize: 100,
+              page: 1,
+              q: {},
+            });
+          }
+        },
+      }}
+      loading={!couponList}
+      onChange={onTableChange}
+    />
+  );
 }

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

@@ -5,6 +5,7 @@ import React, { isValidElement, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { useTransitionContext } from '../../../components/progress-bar';
+import CouponCreate from './coupons/create';
 
 const ProductCreate = React.lazy(() => import('./products/create'));
 const ProductDetail = React.lazy(() => import('./products/detail'));
@@ -13,24 +14,28 @@ const PaymentLinkCreate = React.lazy(() => import('./links/create'));
 const PaymentLinkDetail = React.lazy(() => import('./links/detail'));
 const PricingTableCreate = React.lazy(() => import('./pricing-tables/create'));
 const PricingTableDetail = React.lazy(() => import('./pricing-tables/detail'));
+const CouponDetail = React.lazy(() => import('./coupons/detail'));
+const PromotionCodeDetail = React.lazy(() => import('./promotion-codes/detail'));
 const VendorCreate = React.lazy(() => import('./vendors/create'));
 
 const pages = {
   products: React.lazy(() => import('./products')),
+  coupons: React.lazy(() => import('./coupons')),
   links: React.lazy(() => import('./links')),
   'pricing-tables': React.lazy(() => import('./pricing-tables')),
   passports: React.lazy(() => import('./passports')),
   vendors: React.lazy(() => import('./vendors')),
-  // coupons: React.lazy(() => import('./coupons')),
 };
 
 export default function Products() {
   const navigate = useNavigate();
   const { t } = useLocaleContext();
-  const { page = 'products' } = useParams();
+  const { page = 'products', id, subpage } = useParams();
   const [createProduct, setCreateProduct] = useState(false);
+  const [createCoupon, setCreateCoupon] = useState(false);
   const { startTransition } = useTransitionContext();
 
+  // Handle old-style routing where ID is passed as page parameter
   if (page.startsWith('prod_')) {
     return <ProductDetail id={page} />;
   }
@@ -47,6 +52,18 @@ export default function Products() {
     return <PaymentLinkDetail id={page} />;
   }
 
+  if (page === 'coupons' && subpage === 'promotion-codes' && id) {
+    return <PromotionCodeDetail id={id} />;
+  }
+
+  if (page === 'coupons' && id && !subpage) {
+    return <CouponDetail id={id} />;
+  }
+
+  if (page === 'promotion-codes' && id) {
+    return <PromotionCodeDetail id={id} />;
+  }
+
   // @ts-ignore
   const TabComponent = pages[page] || pages.products;
 
@@ -56,11 +73,11 @@ export default function Products() {
   }
   const tabs = [
     { label: t('admin.products'), value: 'products' },
+    { label: t('admin.coupons'), value: 'coupons' },
     { label: t('admin.paymentLinks'), value: 'links' },
     { label: t('admin.pricingTables'), value: 'pricing-tables' },
     { label: t('admin.passports'), value: 'passports' },
     { label: t('admin.vendors'), value: 'vendors' },
-    // { label: t('admin.coupons'), value: 'coupons' },
   ];
 
   let extra = null;
@@ -70,6 +87,8 @@ export default function Products() {
     extra = <PaymentLinkCreate />;
   } else if (page === 'pricing-tables') {
     extra = <PricingTableCreate />;
+  } else if (page === 'coupons') {
+    extra = <CouponCreate open={createCoupon} onClose={() => setCreateCoupon(false)} />;
   } else if (page === 'vendors') {
     extra = <VendorCreate open={createProduct} onClose={() => setCreateProduct(false)} />;
   }

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

@@ -430,7 +430,12 @@ export default function ProductDetail(props: { id: string }) {
                             borderRadius: 1,
                             backgroundColor: 'background.paper',
                           }}>
-                          <Stack direction="row" justifyContent="space-between" alignItems="center">
+                          <Stack
+                            direction="row"
+                            sx={{
+                              justifyContent: 'space-between',
+                              alignItems: 'center',
+                            }}>
                             <Box>
                               <Typography variant="body1" sx={{ color: 'text.primary', fontWeight: 500 }}>
                                 {vendor.name || vendor.vendor_key || vendor.vendor_id}
@@ -441,7 +446,12 @@ export default function ProductDetail(props: { id: string }) {
                                 </Typography>
                               )}
                             </Box>
-                            <Stack direction="row" spacing={3} alignItems="center">
+                            <Stack
+                              direction="row"
+                              spacing={3}
+                              sx={{
+                                alignItems: 'center',
+                              }}>
                               <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                                 {vendor.commission_type === 'percentage'
                                   ? t('admin.vendor.percentage')

package/src/pages/admin/products/promotion-codes/actions.tsx

@@ -0,0 +1,103 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
+import { useSetState } from 'ahooks';
+import { dispatch } from 'use-bus';
+import Actions from '../../../../components/actions';
+
+type Props = {
+  data: any;
+  onChange: Function;
+  variant?: string;
+};
+
+export default function PromotionCodeActions({ data, onChange, variant = 'compact' }: Props) {
+  const { t } = useLocaleContext();
+
+  const canEdit = !data.locked && data.active;
+  const canDelete = !data.locked;
+  const canArchive = data.active;
+
+  const [state, setState] = useSetState({
+    action: '',
+    loading: false,
+  });
+
+  const onArchivePromotionCode = async () => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/promotion-codes/${data.id}/archive`).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      dispatch('promotion-code.updated');
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+
+  const onDeletePromotionCode = async () => {
+    try {
+      setState({ loading: true });
+      await api.delete(`/api/promotion-codes/${data.id}`).then((res) => res.data);
+      Toast.success(t('common.removed'));
+      dispatch('promotion-code.deleted');
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+
+  const onEditPromotionCode = () => {
+    setState({ action: 'edit' });
+    onChange('edit', data);
+  };
+
+  const actions = [
+    {
+      label: t('admin.promotionCode.edit'),
+      handler: onEditPromotionCode,
+      color: canEdit ? 'text.primary' : 'text.disabled',
+      disabled: !canEdit,
+    },
+    {
+      label: t('admin.promotionCode.archive'),
+      handler: () => setState({ action: 'archive' }),
+      color: canArchive ? 'text.primary' : 'text.disabled',
+      disabled: !canArchive,
+    },
+    {
+      label: t('admin.promotionCode.delete'),
+      handler: () => setState({ action: 'delete' }),
+      color: canDelete ? 'error.main' : 'text.disabled',
+      disabled: !canDelete,
+    },
+  ];
+
+  return (
+    <>
+      <Actions variant={variant} actions={actions} />
+      {state.action === 'archive' && (
+        <ConfirmDialog
+          onConfirm={onArchivePromotionCode}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.promotionCode.archive')}
+          message={t('admin.promotionCode.archiveTip')}
+        />
+      )}
+      {state.action === 'delete' && (
+        <ConfirmDialog
+          onConfirm={onDeletePromotionCode}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.promotionCode.delete')}
+          message={t('admin.promotionCode.deleteTip')}
+        />
+      )}
+    </>
+  );
+}

package/src/pages/admin/products/promotion-codes/create.tsx

@@ -0,0 +1,235 @@
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { api, formatError, findCurrency, usePaymentContext } from '@blocklet/payment-react';
+import { Button, Box, Typography, CircularProgress, Stack } from '@mui/material';
+import { FormProvider, useForm } from 'react-hook-form';
+import { dispatch } from 'use-bus';
+import { useEffect } from 'react';
+import { fromUnitToToken } from '@ocap/util';
+
+import PromotionCodeForm, {
+  PromotionCodeData,
+  DEFAULT_PROMOTION_CODE,
+} from '../../../../components/promotion/promotion-code-form';
+
+type PromotionCodeFormData = PromotionCodeData;
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onSubmit?: () => void;
+  couponId: string;
+  promotionCode?: any; // For editing
+  isEditing?: boolean;
+  couponType?: 'percentage' | 'fixed_amount';
+  availableCurrencies?: Array<{ id: string; symbol: string; name: string }>;
+}
+
+export default function PromotionCodeModal({
+  open,
+  onClose,
+  onSubmit: onSubmitCallback = () => {},
+  couponId,
+  promotionCode = null,
+  isEditing = false,
+  availableCurrencies = [],
+}: Omit<Props, 'couponType'>) {
+  const { t } = useLocaleContext();
+  const { settings } = usePaymentContext();
+
+  const methods = useForm<PromotionCodeFormData>({
+    mode: 'onChange',
+    defaultValues: DEFAULT_PROMOTION_CODE,
+  });
+
+  const {
+    handleSubmit,
+    reset,
+    formState: { isSubmitting },
+  } = methods;
+
+  // Reset form when modal opens or promotion code changes
+  useEffect(() => {
+    if (open) {
+      if (isEditing && promotionCode) {
+        // Keep currency_options in object format for direct use
+        const convertedCurrencyOptions: Record<string, { minimum_amount: number }> = {};
+        const minimumAmountCurrency = promotionCode.restrictions?.minimum_amount_currency
+          ? findCurrency(settings.paymentMethods, promotionCode.restrictions.minimum_amount_currency)
+          : null;
+        const minimumAmount = promotionCode.restrictions?.minimum_amount
+          ? parseFloat(fromUnitToToken(promotionCode.restrictions.minimum_amount, minimumAmountCurrency?.decimal || 0))
+          : undefined;
+        let requireMinimumAmount = false;
+
+        if (promotionCode.restrictions?.currency_options) {
+          const currencyEntries = Object.entries(promotionCode.restrictions.currency_options);
+          requireMinimumAmount = currencyEntries.length > 0;
+          currencyEntries.forEach(([currencyId, optionData]) => {
+            const currency = findCurrency(settings.paymentMethods, currencyId);
+            let amount = 0;
+            if (optionData && typeof optionData === 'object' && 'minimum_amount' in optionData) {
+              const optionMinimumAmount = (optionData as any).minimum_amount;
+              if (currency && optionMinimumAmount) {
+                amount = parseFloat(fromUnitToToken(optionMinimumAmount || '0', currency.decimal));
+              } else {
+                amount = optionMinimumAmount || 0;
+              }
+            }
+
+            convertedCurrencyOptions[currencyId] = {
+              minimum_amount: amount,
+            };
+          });
+        }
+
+        // Populate form with existing data for editing
+        reset({
+          code: promotionCode.code || '',
+          active: promotionCode.active ?? true,
+          max_redemptions: promotionCode.max_redemptions || undefined,
+          description: promotionCode.description || '',
+          expires_at: promotionCode.expires_at
+            ? new Date(promotionCode.expires_at * 1000).toISOString().slice(0, 16)
+            : '',
+          verification_type: promotionCode.verification_type || 'code',
+          limit_number_redemptions: !!promotionCode.max_redemptions,
+          add_expiration_date: !!promotionCode.expires_at,
+          restrictions: {
+            first_time_transaction: promotionCode.restrictions?.first_time_transaction || false,
+            require_minimum_amount: requireMinimumAmount,
+            minimum_amount: minimumAmount,
+            minimum_amount_currency: minimumAmountCurrency?.id,
+            currency_options: convertedCurrencyOptions,
+          },
+          customer_dids: promotionCode.customer_dids || [],
+          nft_addresses: promotionCode.nft_config?.addresses || [],
+          nft_tags: promotionCode.nft_config?.tags || [],
+          trusted_issuers: promotionCode.nft_config?.trusted_issuers || [],
+          trusted_parents: promotionCode.nft_config?.trusted_parents || [],
+          min_balance: promotionCode.nft_config?.min_balance || 1,
+          vc_roles: promotionCode.vc_config?.roles || [],
+          vc_trusted_issuers: promotionCode.vc_config?.trusted_issuers || [],
+        });
+      } else {
+        // Reset to default values for creating
+        reset(DEFAULT_PROMOTION_CODE);
+      }
+    }
+  }, [open, isEditing, promotionCode, reset, settings.paymentMethods]);
+
+  const onSubmit = async (data: PromotionCodeFormData) => {
+    try {
+      const payload: any = {
+        active: data.active,
+        verification_type: data.verification_type,
+        restrictions: data.restrictions,
+        description: data.description,
+        metadata: {},
+      };
+
+      if (!isEditing) {
+        payload.coupon_id = couponId;
+      }
+
+      // Only include custom code if provided, otherwise let backend generate
+      if (data.code && data.code.trim()) {
+        payload.code = data.code;
+      }
+
+      if (data.limit_number_redemptions && data.max_redemptions) {
+        payload.max_redemptions = data.max_redemptions;
+      }
+
+      if (data.expires_at) {
+        payload.expires_at = Math.floor(new Date(data.expires_at).getTime() / 1000);
+      }
+
+      // Add verification configurations based on type
+      if (data.verification_type === 'nft') {
+        payload.nft_config = {
+          addresses: data.nft_addresses?.filter((addr) => addr.trim()) || [],
+          tags: data.nft_tags?.filter((tag) => tag.trim()) || [],
+          trusted_issuers: data.trusted_issuers?.filter((issuer) => issuer.trim()) || [],
+          trusted_parents: data.trusted_parents?.filter((parent) => parent.trim()) || [],
+          min_balance: data.min_balance || 1,
+        };
+      } else if (data.verification_type === 'vc') {
+        payload.vc_config = {
+          roles: data.vc_roles?.filter((role) => role.trim()) || [],
+          trusted_issuers: data.vc_trusted_issuers?.filter((issuer) => issuer.trim()) || [],
+        };
+      } else if (data.verification_type === 'user_restricted') {
+        payload.customer_dids = data.customer_dids?.filter((did) => did.trim()) || [];
+      }
+
+      if (isEditing && promotionCode) {
+        await api.put(`/api/promotion-codes/${promotionCode.id}`, payload);
+        Toast.success(t('common.saved'));
+        dispatch('promotion-code.updated');
+      } else {
+        await api.post('/api/promotion-codes', payload);
+        Toast.success(t('admin.coupon.saved'));
+        dispatch('promotion-code.created');
+      }
+
+      if (onSubmitCallback) {
+        onSubmitCallback();
+      }
+      onClose();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
+  const handleCancel = () => {
+    reset();
+    onClose();
+  };
+
+  const title = isEditing ? t('admin.promotionCode.edit') : t('admin.coupon.createPromotionCode');
+
+  return (
+    <Dialog
+      open={open}
+      disableEscapeKeyDown
+      fullWidth
+      maxWidth="sm"
+      className="base-dialog"
+      onClose={handleCancel}
+      showCloseButton={false}
+      title={title}
+      actions={
+        <Stack direction="row">
+          <Button size="small" sx={{ mr: 2 }} onClick={handleCancel} disabled={isSubmitting}>
+            {t('common.cancel')}
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            size="small"
+            disabled={isSubmitting}
+            onClick={handleSubmit(onSubmit)}>
+            {isSubmitting && <CircularProgress size={16} sx={{ mr: 1 }} />}
+            {isEditing ? t('common.save') : t('admin.coupon.createPromotionCode')}
+          </Button>
+        </Stack>
+      }>
+      <FormProvider {...methods}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'text.secondary',
+            }}>
+            {t('admin.coupon.promotionCodeDescription')}
+          </Typography>
+
+          <PromotionCodeForm showCodeInput showExpandedOptions availableCurrencies={availableCurrencies} />
+        </Box>
+      </FormProvider>
+    </Dialog>
+  );
+}