修复(#122): 补齐促销价档位提交

apps/admin/public/assets/locales/en-US/menu.json

@@ -21,6 +21,7 @@
   "Order Management": "Order Management",
   "Payment Config": "Payment Config",
   "Product Management": "Product Management",
+  "Promo Management": "Promo Management",
   "Redemption Management": "Redemption Management",
   "Register": "Register",
   "Reset Subscribe": "Reset Subscribe",

apps/admin/public/assets/locales/en-US/promo.json

@@ -0,0 +1,70 @@
+{
+  "cancel": "Cancel",
+  "confirm": "Confirm",
+  "confirmDelete": "Are you sure you want to delete?",
+  "createPrice": "Create Promo Price",
+  "createRule": "Create Rule",
+  "createSuccess": "Create Success",
+  "delete": "Delete",
+  "deleteSuccess": "Delete Success",
+  "deleteWarning": "Once deleted, data cannot be recovered. Please proceed with caution.",
+  "detail": "Detail",
+  "edit": "Edit",
+  "editRule": "Edit Rule",
+  "emptyPrices": "No promo prices",
+  "emptyRules": "No promo rules",
+  "emptyUsage": "No promo usage records",
+  "enabled": "Enabled",
+  "endTime": "End Time",
+  "form": {
+    "enterPromoPrice": "Enter price",
+    "inactiveMonths": "Inactive Months",
+    "inactiveMonthsPlaceholder": "Months without purchase",
+    "name": "Name",
+    "namePlaceholder": "Rule name",
+    "noDiscounts": "This subscribe has no discount quantities and cannot be configured.",
+    "promoPriceLessThanOriginalPrice": "Promo price must be lower than original price",
+    "promoPriceLessThanUnitPrice": "Promo price must be lower than unit price",
+    "selectEndTime": "Select time",
+    "selectRule": "Select rule",
+    "selectStartTime": "Select time",
+    "selectQuantity": "Select discount quantity",
+    "selectSubscribe": "Select subscribe",
+    "type": "Rule Type",
+    "windowHours": "Window Hours",
+    "windowHoursPlaceholder": "Hours after registration"
+  },
+  "loadErrorDescription": "Refresh the table or try again later.",
+  "loadPricesError": "Failed to load promo prices",
+  "loadRulesError": "Failed to load promo rules",
+  "loadUsageError": "Failed to load promo usage",
+  "name": "Name",
+  "no": "No",
+  "orderNo": "Order No.",
+  "originalPriceHint": "Original price",
+  "params": "Params",
+  "prices": "Prices",
+  "priority": "Priority",
+  "promoPrice": "Promo Price",
+  "quantity": "Quantity",
+  "rule": "Rule",
+  "ruleDetail": "Rule Detail",
+  "rules": "Rules",
+  "searchRule": "Rule name",
+  "startTime": "Start Time",
+  "subscribe": "Subscribe",
+  "type": "Type",
+  "types": {
+    "campaign": "Campaign",
+    "inactive_user": "Inactive User",
+    "new_user": "New User"
+  },
+  "unitPrice": "Unit Price",
+  "unitPriceHint": "Unit price",
+  "updateSuccess": "Update Success",
+  "usage": "Usage",
+  "usedAt": "Used At",
+  "userId": "User ID",
+  "validityPeriod": "Validity Period",
+  "yes": "Yes"
+}

apps/admin/public/assets/locales/zh-CN/menu.json

@@ -21,6 +21,7 @@
   "Order Management": "订单管理",
   "Payment Config": "支付配置",
   "Product Management": "商品管理",
+  "Promo Management": "促销管理",
   "Redemption Management": "兑换码管理",
   "Register": "注册",
   "Reset Subscribe": "重置订阅",

apps/admin/public/assets/locales/zh-CN/promo.json

@@ -0,0 +1,70 @@
+{
+  "cancel": "取消",
+  "confirm": "确认",
+  "confirmDelete": "确定要删除吗？",
+  "createPrice": "创建促销价",
+  "createRule": "创建规则",
+  "createSuccess": "创建成功",
+  "delete": "删除",
+  "deleteSuccess": "删除成功",
+  "deleteWarning": "删除后数据无法恢复，请谨慎操作。",
+  "detail": "详情",
+  "edit": "编辑",
+  "editRule": "编辑规则",
+  "emptyPrices": "暂无商品促销价",
+  "emptyRules": "暂无促销规则",
+  "emptyUsage": "暂无促销使用记录",
+  "enabled": "启用",
+  "endTime": "结束时间",
+  "form": {
+    "enterPromoPrice": "输入价格",
+    "inactiveMonths": "未活跃月数",
+    "inactiveMonthsPlaceholder": "未购买的月数",
+    "name": "名称",
+    "namePlaceholder": "规则名称",
+    "noDiscounts": "该订阅没有 discount 档位，不能配置促销价。",
+    "promoPriceLessThanOriginalPrice": "促销价必须低于原价",
+    "promoPriceLessThanUnitPrice": "促销价必须低于原价",
+    "selectEndTime": "选择时间",
+    "selectRule": "选择规则",
+    "selectStartTime": "选择时间",
+    "selectQuantity": "选择 discount 档位",
+    "selectSubscribe": "选择订阅",
+    "type": "规则类型",
+    "windowHours": "新用户窗口小时数",
+    "windowHoursPlaceholder": "注册后的小时数"
+  },
+  "loadErrorDescription": "请刷新表格或稍后重试。",
+  "loadPricesError": "促销价加载失败",
+  "loadRulesError": "促销规则加载失败",
+  "loadUsageError": "促销使用记录加载失败",
+  "name": "名称",
+  "no": "否",
+  "orderNo": "订单号",
+  "originalPriceHint": "原价",
+  "params": "参数",
+  "prices": "商品促销价",
+  "priority": "优先级",
+  "promoPrice": "促销价",
+  "quantity": "档位",
+  "rule": "规则",
+  "ruleDetail": "规则详情",
+  "rules": "促销规则",
+  "searchRule": "规则名称",
+  "startTime": "开始时间",
+  "subscribe": "订阅",
+  "type": "类型",
+  "types": {
+    "campaign": "活动",
+    "inactive_user": "回归用户",
+    "new_user": "新用户"
+  },
+  "unitPrice": "原价",
+  "unitPriceHint": "原价",
+  "updateSuccess": "更新成功",
+  "usage": "使用记录",
+  "usedAt": "使用时间",
+  "userId": "用户 ID",
+  "validityPeriod": "有效期",
+  "yes": "是"
+}

apps/admin/src/layout/navs.ts

@@ -49,6 +49,11 @@ export function useNavs() {
             url: "/dashboard/product",
             icon: "flat-color-icons:shop",
           },
+          {
+            title: t("Promo Management", "Promo Management"),
+            url: "/dashboard/promo",
+            icon: "flat-color-icons:briefcase",
+          },
         ],
       },
 

apps/admin/src/main.tsx

@@ -42,6 +42,7 @@ initializeI18n({
     "nodes",
     "order",
     "payment",
+    "promo",
     "product",
     "servers",
     "subscribe",

apps/admin/src/routeTree.gen.ts

@@ -34,6 +34,8 @@ const DashboardSubscribeIndexLazyRouteImport = createFileRoute(
 const DashboardRedemptionIndexLazyRouteImport = createFileRoute(
   '/dashboard/redemption/',
 )()
+const DashboardPromoIndexLazyRouteImport =
+  createFileRoute('/dashboard/promo/')()
 const DashboardProductIndexLazyRouteImport = createFileRoute(
   '/dashboard/product/',
 )()
@@ -186,6 +188,13 @@ const DashboardRedemptionIndexLazyRoute =
   } as any).lazy(() =>
     import('./routes/dashboard/redemption/index.lazy').then((d) => d.Route),
   )
+const DashboardPromoIndexLazyRoute = DashboardPromoIndexLazyRouteImport.update({
+  id: '/promo/',
+  path: '/promo/',
+  getParentRoute: () => DashboardRouteLazyRoute,
+} as any).lazy(() =>
+  import('./routes/dashboard/promo/index.lazy').then((d) => d.Route),
+)
 const DashboardProductIndexLazyRoute =
   DashboardProductIndexLazyRouteImport.update({
     id: '/product/',
@@ -406,6 +415,7 @@ export interface FileRoutesByFullPath {
   '/dashboard/order': typeof DashboardOrderIndexLazyRoute
   '/dashboard/payment': typeof DashboardPaymentIndexLazyRoute
   '/dashboard/product': typeof DashboardProductIndexLazyRoute
+  '/dashboard/promo': typeof DashboardPromoIndexLazyRoute
   '/dashboard/redemption': typeof DashboardRedemptionIndexLazyRoute
   '/dashboard/subscribe': typeof DashboardSubscribeIndexLazyRoute
   '/dashboard/system': typeof DashboardSystemIndexLazyRoute
@@ -442,6 +452,7 @@ export interface FileRoutesByTo {
   '/dashboard/order': typeof DashboardOrderIndexLazyRoute
   '/dashboard/payment': typeof DashboardPaymentIndexLazyRoute
   '/dashboard/product': typeof DashboardProductIndexLazyRoute
+  '/dashboard/promo': typeof DashboardPromoIndexLazyRoute
   '/dashboard/redemption': typeof DashboardRedemptionIndexLazyRoute
   '/dashboard/subscribe': typeof DashboardSubscribeIndexLazyRoute
   '/dashboard/system': typeof DashboardSystemIndexLazyRoute
@@ -481,6 +492,7 @@ export interface FileRoutesById {
   '/dashboard/order/': typeof DashboardOrderIndexLazyRoute
   '/dashboard/payment/': typeof DashboardPaymentIndexLazyRoute
   '/dashboard/product/': typeof DashboardProductIndexLazyRoute
+  '/dashboard/promo/': typeof DashboardPromoIndexLazyRoute
   '/dashboard/redemption/': typeof DashboardRedemptionIndexLazyRoute
   '/dashboard/subscribe/': typeof DashboardSubscribeIndexLazyRoute
   '/dashboard/system/': typeof DashboardSystemIndexLazyRoute
@@ -521,6 +533,7 @@ export interface FileRouteTypes {
     | '/dashboard/order'
     | '/dashboard/payment'
     | '/dashboard/product'
+    | '/dashboard/promo'
     | '/dashboard/redemption'
     | '/dashboard/subscribe'
     | '/dashboard/system'
@@ -557,6 +570,7 @@ export interface FileRouteTypes {
     | '/dashboard/order'
     | '/dashboard/payment'
     | '/dashboard/product'
+    | '/dashboard/promo'
     | '/dashboard/redemption'
     | '/dashboard/subscribe'
     | '/dashboard/system'
@@ -595,6 +609,7 @@ export interface FileRouteTypes {
     | '/dashboard/order/'
     | '/dashboard/payment/'
     | '/dashboard/product/'
+    | '/dashboard/promo/'
     | '/dashboard/redemption/'
     | '/dashboard/subscribe/'
     | '/dashboard/system/'
@@ -694,6 +709,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DashboardRedemptionIndexLazyRouteImport
       parentRoute: typeof DashboardRouteLazyRoute
     }
+    '/dashboard/promo/': {
+      id: '/dashboard/promo/'
+      path: '/promo'
+      fullPath: '/dashboard/promo'
+      preLoaderRoute: typeof DashboardPromoIndexLazyRouteImport
+      parentRoute: typeof DashboardRouteLazyRoute
+    }
     '/dashboard/product/': {
       id: '/dashboard/product/'
       path: '/product'
@@ -908,6 +930,7 @@ interface DashboardRouteLazyRouteChildren {
   DashboardOrderIndexLazyRoute: typeof DashboardOrderIndexLazyRoute
   DashboardPaymentIndexLazyRoute: typeof DashboardPaymentIndexLazyRoute
   DashboardProductIndexLazyRoute: typeof DashboardProductIndexLazyRoute
+  DashboardPromoIndexLazyRoute: typeof DashboardPromoIndexLazyRoute
   DashboardRedemptionIndexLazyRoute: typeof DashboardRedemptionIndexLazyRoute
   DashboardSubscribeIndexLazyRoute: typeof DashboardSubscribeIndexLazyRoute
   DashboardSystemIndexLazyRoute: typeof DashboardSystemIndexLazyRoute
@@ -945,6 +968,7 @@ const DashboardRouteLazyRouteChildren: DashboardRouteLazyRouteChildren = {
   DashboardOrderIndexLazyRoute: DashboardOrderIndexLazyRoute,
   DashboardPaymentIndexLazyRoute: DashboardPaymentIndexLazyRoute,
   DashboardProductIndexLazyRoute: DashboardProductIndexLazyRoute,
+  DashboardPromoIndexLazyRoute: DashboardPromoIndexLazyRoute,
   DashboardRedemptionIndexLazyRoute: DashboardRedemptionIndexLazyRoute,
   DashboardSubscribeIndexLazyRoute: DashboardSubscribeIndexLazyRoute,
   DashboardSystemIndexLazyRoute: DashboardSystemIndexLazyRoute,

apps/admin/src/routes/dashboard/promo/index.lazy.tsx

@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import PromoPage from "@/sections/promo";
+
+export const Route = createLazyFileRoute("/dashboard/promo/")({
+  component: PromoPage,
+});

apps/admin/src/sections/promo/index.test.tsx

@@ -0,0 +1,155 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { getPromoRuleList } from "@workspace/ui/services/admin/promo";
+import type { AxiosResponse } from "axios";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import PromoPage from ".";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (_key: string, fallback: string): string => fallback,
+  }),
+}));
+
+vi.mock("@/stores/subscribe", () => ({
+  useSubscribe: () => ({
+    subscribes: [
+      {
+        id: 8,
+        name: "Monthly Plan",
+        unit_price: 1200,
+        sold: 0,
+      },
+    ],
+    getSubscribeName: (id?: number) => (id === 8 ? "Monthly Plan" : "--"),
+  }),
+}));
+
+vi.mock("@/utils/common", () => ({
+  formatDate: (timestamp: number) => `date-${timestamp}`,
+}));
+
+vi.mock("@workspace/ui/services/admin/promo", () => ({
+  createPromoPrice: vi.fn(),
+  createPromoRule: vi.fn(),
+  deletePromoPrice: vi.fn(),
+  deletePromoRule: vi.fn(),
+  getPromoPriceList: vi.fn(),
+  getPromoRuleList: vi.fn(),
+  getPromoUsageList: vi.fn(),
+  updatePromoRule: vi.fn(),
+}));
+
+const mockedGetPromoRuleList = vi.mocked(getPromoRuleList);
+
+function createRuleListResponse(
+  data: API.GetPromoRuleListResponse
+): AxiosResponse<API.Response & { data?: API.GetPromoRuleListResponse }> {
+  return {
+    data: {
+      code: 200,
+      data,
+    },
+    status: 200,
+    statusText: "OK",
+    headers: {},
+    config: {
+      headers: {} as AxiosResponse["config"]["headers"],
+    },
+  };
+}
+
+beforeEach(() => {
+  localStorage.setItem("timezone", "UTC");
+});
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("PromoPage", () => {
+  it("renders promo rules with type, priority, status, and validity period", async () => {
+    mockedGetPromoRuleList.mockResolvedValue(
+      createRuleListResponse({
+        total: 1,
+        list: [
+          {
+            id: 1,
+            name: "Return User Price",
+            type: "inactive_user",
+            params: { inactive_months: 3 },
+            priority: 5,
+            enabled: true,
+            start_time: 1_716_800_000,
+            end_time: 1_716_900_000,
+          },
+        ],
+      })
+    );
+
+    render(<PromoPage />);
+
+    await waitFor(() =>
+      expect(mockedGetPromoRuleList).toHaveBeenCalledWith({
+        page: 1,
+        size: 200,
+        search: undefined,
+        type: undefined,
+        enabled: undefined,
+      })
+    );
+    expect(await screen.findByText("Return User Price")).not.toBeNull();
+    expect(screen.getByText("inactive_user")).not.toBeNull();
+    expect(screen.getByText("5")).not.toBeNull();
+    expect(screen.getByText("date-1716800000")).not.toBeNull();
+    expect(screen.getByText("date-1716900000")).not.toBeNull();
+  });
+
+  it("shows the empty state when there are no promo rules", async () => {
+    mockedGetPromoRuleList.mockResolvedValue(
+      createRuleListResponse({
+        total: 0,
+        list: [],
+      })
+    );
+
+    render(<PromoPage />);
+
+    expect(await screen.findByText("No promo rules")).not.toBeNull();
+  });
+
+  it("shows a loading state while promo rules are being fetched", () => {
+    let resolveRequest:
+      | ((
+          value: AxiosResponse<
+            API.Response & { data?: API.GetPromoRuleListResponse }
+          >
+        ) => void)
+      | undefined;
+    mockedGetPromoRuleList.mockReturnValue(
+      new Promise((resolve) => {
+        resolveRequest = resolve;
+      })
+    );
+
+    render(<PromoPage />);
+
+    expect(screen.getByRole("status", { name: "Loading data" })).not.toBeNull();
+    expect(resolveRequest).toBeTypeOf("function");
+  });
+
+  it("shows an error state when promo rules fail to load", async () => {
+    mockedGetPromoRuleList.mockRejectedValue(new Error("network failed"));
+
+    render(<PromoPage />);
+
+    await waitFor(() => expect(mockedGetPromoRuleList).toHaveBeenCalled());
+    expect(
+      await screen.findByText("Failed to load promo rules")
+    ).not.toBeNull();
+    expect(screen.queryByText("No promo rules")).toBeNull();
+  });
+});

apps/admin/src/sections/promo/index.tsx

@@ -0,0 +1,504 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@workspace/ui/components/alert";
+import { Badge } from "@workspace/ui/components/badge";
+import { Button } from "@workspace/ui/components/button";
+import { Switch } from "@workspace/ui/components/switch";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@workspace/ui/components/tabs";
+import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
+import Empty from "@workspace/ui/composed/empty";
+import {
+  ProTable,
+  type ProTableActions,
+} from "@workspace/ui/composed/pro-table/pro-table";
+import {
+  createPromoPrice,
+  createPromoRule,
+  deletePromoPrice,
+  deletePromoRule,
+  getPromoPriceList,
+  getPromoRuleList,
+  getPromoUsageList,
+  updatePromoRule,
+} from "@workspace/ui/services/admin/promo";
+import { CircleAlert } from "lucide-react";
+import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useSubscribe } from "@/stores/subscribe";
+import { formatDate } from "@/utils/common";
+import PriceForm from "./price-form";
+import RuleDetail from "./rule-detail";
+import RuleForm from "./rule-form";
+import { formatCurrency, parseOptionalNumber, promoRuleTypes } from "./utils";
+
+type RuleFilters = {
+  search?: string;
+  type?: API.PromoRuleType;
+  enabled?: string;
+};
+
+type PriceFilters = {
+  promo_rule_id?: string;
+  subscribe_id?: string;
+};
+
+type UsageFilters = PriceFilters & {
+  user_id?: string;
+  order_no?: string;
+};
+
+function ErrorState({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <Alert className="mx-auto max-w-md" variant="destructive">
+      <CircleAlert aria-hidden="true" />
+      <AlertTitle>{title}</AlertTitle>
+      <AlertDescription>{description}</AlertDescription>
+    </Alert>
+  );
+}
+
+export default function PromoPage() {
+  const { t } = useTranslation("promo");
+  const { subscribes, getSubscribeName } = useSubscribe();
+  const [loading, setLoading] = useState(false);
+  const [rules, setRules] = useState<API.PromoRule[]>([]);
+  const [detailRule, setDetailRule] = useState<API.PromoRule>();
+  const [detailOpen, setDetailOpen] = useState(false);
+  const ruleRef = useRef<ProTableActions>(null);
+  const priceRef = useRef<ProTableActions>(null);
+  const usageRef = useRef<ProTableActions>(null);
+
+  return (
+    <>
+      <Tabs className="space-y-4" defaultValue="rules">
+        <TabsList className="grid w-full grid-cols-3 md:w-fit">
+          <TabsTrigger value="rules">{t("rules", "Rules")}</TabsTrigger>
+          <TabsTrigger value="prices">{t("prices", "Prices")}</TabsTrigger>
+          <TabsTrigger value="usage">{t("usage", "Usage")}</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="rules">
+          <ProTable<API.PromoRule, RuleFilters>
+            action={ruleRef}
+            actions={{
+              render: (row) => [
+                <Button
+                  key="detail"
+                  onClick={() => {
+                    setDetailRule(row);
+                    setDetailOpen(true);
+                  }}
+                  size="sm"
+                  variant="outline"
+                >
+                  {t("detail", "Detail")}
+                </Button>,
+                <RuleForm
+                  initialValues={row}
+                  key="edit"
+                  loading={loading}
+                  onSubmit={async (values) => {
+                    setLoading(true);
+                    try {
+                      await updatePromoRule({ id: row.id }, values);
+                      toast.success(t("updateSuccess", "Update Success"));
+                      ruleRef.current?.refresh();
+                      setLoading(false);
+                      return true;
+                    } catch (_error) {
+                      setLoading(false);
+                      return false;
+                    }
+                  }}
+                  title={t("editRule", "Edit Rule")}
+                  trigger={t("edit", "Edit")}
+                />,
+                <ConfirmButton
+                  cancelText={t("cancel", "Cancel")}
+                  confirmText={t("confirm", "Confirm")}
+                  description={t(
+                    "deleteWarning",
+                    "Once deleted, data cannot be recovered. Please proceed with caution."
+                  )}
+                  key="delete"
+                  onConfirm={async () => {
+                    await deletePromoRule({ id: row.id });
+                    toast.success(t("deleteSuccess", "Delete Success"));
+                    ruleRef.current?.refresh();
+                  }}
+                  title={t("confirmDelete", "Are you sure you want to delete?")}
+                  trigger={
+                    <Button size="sm" variant="destructive">
+                      {t("delete", "Delete")}
+                    </Button>
+                  }
+                />,
+              ],
+            }}
+            columns={[
+              {
+                accessorKey: "name",
+                header: t("name", "Name"),
+              },
+              {
+                accessorKey: "type",
+                header: t("type", "Type"),
+                cell: ({ row }) => (
+                  <Badge variant="outline">
+                    {t(`types.${row.original.type}`, row.original.type)}
+                  </Badge>
+                ),
+              },
+              {
+                accessorKey: "priority",
+                header: t("priority", "Priority"),
+              },
+              {
+                accessorKey: "enabled",
+                header: t("enabled", "Enabled"),
+                cell: ({ row }) => (
+                  <Switch
+                    defaultChecked={row.original.enabled}
+                    onCheckedChange={async (checked) => {
+                      await updatePromoRule(
+                        { id: row.original.id },
+                        { ...row.original, enabled: checked }
+                      );
+                      toast.success(t("updateSuccess", "Update Success"));
+                      ruleRef.current?.refresh();
+                    }}
+                  />
+                ),
+              },
+              {
+                accessorKey: "start_time",
+                header: t("startTime", "Start Time"),
+                cell: ({ row }) =>
+                  row.original.start_time
+                    ? formatDate(row.original.start_time)
+                    : "--",
+              },
+              {
+                accessorKey: "end_time",
+                header: t("endTime", "End Time"),
+                cell: ({ row }) =>
+                  row.original.end_time
+                    ? formatDate(row.original.end_time)
+                    : "--",
+              },
+            ]}
+            empty={<Empty description={t("emptyRules", "No promo rules")} />}
+            error={
+              <ErrorState
+                description={t(
+                  "loadErrorDescription",
+                  "Refresh the table or try again later."
+                )}
+                title={t("loadRulesError", "Failed to load promo rules")}
+              />
+            }
+            header={{
+              toolbar: (
+                <RuleForm
+                  loading={loading}
+                  onSubmit={async (values) => {
+                    setLoading(true);
+                    try {
+                      await createPromoRule(values);
+                      toast.success(t("createSuccess", "Create Success"));
+                      ruleRef.current?.refresh();
+                      setLoading(false);
+                      return true;
+                    } catch (_error) {
+                      setLoading(false);
+                      return false;
+                    }
+                  }}
+                  title={t("createRule", "Create Rule")}
+                  trigger={t("createRule", "Create Rule")}
+                />
+              ),
+            }}
+            params={[
+              { key: "search", placeholder: t("searchRule", "Rule name") },
+              {
+                key: "type",
+                placeholder: t("type", "Type"),
+                options: promoRuleTypes.map((type) => ({
+                  label: t(`types.${type}`, type),
+                  value: type,
+                })),
+              },
+              {
+                key: "enabled",
+                placeholder: t("enabled", "Enabled"),
+                options: [
+                  { label: t("yes", "Yes"), value: "true" },
+                  { label: t("no", "No"), value: "false" },
+                ],
+              },
+            ]}
+            request={async (pagination, filters) => {
+              const { data } = await getPromoRuleList({
+                ...pagination,
+                search: filters.search?.trim() || undefined,
+                type: filters.type,
+                enabled:
+                  filters.enabled === undefined || filters.enabled === ""
+                    ? undefined
+                    : filters.enabled === "true",
+              });
+              const list = data.data?.list || [];
+              setRules(list);
+              return {
+                list,
+                total: data.data?.total || 0,
+              };
+            }}
+          />
+        </TabsContent>
+
+        <TabsContent value="prices">
+          <ProTable<API.PromoPrice, PriceFilters>
+            action={priceRef}
+            actions={{
+              render: (row) => [
+                <ConfirmButton
+                  cancelText={t("cancel", "Cancel")}
+                  confirmText={t("confirm", "Confirm")}
+                  description={t(
+                    "deleteWarning",
+                    "Once deleted, data cannot be recovered. Please proceed with caution."
+                  )}
+                  key="delete"
+                  onConfirm={async () => {
+                    await deletePromoPrice({ id: row.id });
+                    toast.success(t("deleteSuccess", "Delete Success"));
+                    priceRef.current?.refresh();
+                  }}
+                  title={t("confirmDelete", "Are you sure you want to delete?")}
+                  trigger={
+                    <Button size="sm" variant="destructive">
+                      {t("delete", "Delete")}
+                    </Button>
+                  }
+                />,
+              ],
+            }}
+            columns={[
+              {
+                accessorKey: "promo_rule_id",
+                header: t("rule", "Rule"),
+                cell: ({ row }) =>
+                  row.original.promo_rule_id
+                    ? rules.find(
+                        (rule) => rule.id === row.original.promo_rule_id
+                      )?.name || `#${row.original.promo_rule_id}`
+                    : "--",
+              },
+              {
+                accessorKey: "subscribe_id",
+                header: t("subscribe", "Subscribe"),
+                cell: ({ row }) =>
+                  row.original.subscribe_name ||
+                  getSubscribeName(row.original.subscribe_id),
+              },
+              {
+                accessorKey: "quantity",
+                header: t("quantity", "Quantity"),
+                cell: ({ row }) => row.original.quantity || "--",
+              },
+              {
+                accessorKey: "unit_price",
+                header: t("unitPrice", "Unit Price"),
+                cell: ({ row }) => formatCurrency(row.original.unit_price),
+              },
+              {
+                accessorKey: "promo_price",
+                header: t("promoPrice", "Promo Price"),
+                cell: ({ row }) => formatCurrency(row.original.promo_price),
+              },
+            ]}
+            empty={<Empty description={t("emptyPrices", "No promo prices")} />}
+            error={
+              <ErrorState
+                description={t(
+                  "loadErrorDescription",
+                  "Refresh the table or try again later."
+                )}
+                title={t("loadPricesError", "Failed to load promo prices")}
+              />
+            }
+            header={{
+              toolbar: (
+                <PriceForm
+                  loading={loading}
+                  onSubmit={async (values) => {
+                    setLoading(true);
+                    try {
+                      await createPromoPrice(values);
+                      toast.success(t("createSuccess", "Create Success"));
+                      priceRef.current?.refresh();
+                      setLoading(false);
+                      return true;
+                    } catch (_error) {
+                      setLoading(false);
+                      return false;
+                    }
+                  }}
+                  rules={rules}
+                  subscribes={subscribes}
+                />
+              ),
+            }}
+            params={[
+              {
+                key: "promo_rule_id",
+                placeholder: t("rule", "Rule"),
+                options: rules.map((rule) => ({
+                  label: rule.name,
+                  value: String(rule.id),
+                })),
+              },
+              {
+                key: "subscribe_id",
+                placeholder: t("subscribe", "Subscribe"),
+                options: subscribes
+                  .filter((item) => typeof item.id === "number")
+                  .map((item) => ({
+                    label: item.name || `#${item.id}`,
+                    value: String(item.id),
+                  })),
+              },
+            ]}
+            request={async (pagination, filters) => {
+              const { data } = await getPromoPriceList({
+                ...pagination,
+                promo_rule_id: parseOptionalNumber(filters.promo_rule_id),
+                subscribe_id: parseOptionalNumber(filters.subscribe_id),
+              });
+              return {
+                list: data.data?.list || [],
+                total: data.data?.total || 0,
+              };
+            }}
+          />
+        </TabsContent>
+
+        <TabsContent value="usage">
+          <ProTable<API.PromoUsage, UsageFilters>
+            action={usageRef}
+            columns={[
+              {
+                accessorKey: "promo_rule_id",
+                header: t("rule", "Rule"),
+                cell: ({ row }) =>
+                  row.original.rule_name ||
+                  rules.find((rule) => rule.id === row.original.promo_rule_id)
+                    ?.name ||
+                  `#${row.original.promo_rule_id}`,
+              },
+              {
+                accessorKey: "user_id",
+                header: t("userId", "User ID"),
+                cell: ({ row }) => `#${row.original.user_id}`,
+              },
+              {
+                accessorKey: "subscribe_id",
+                header: t("subscribe", "Subscribe"),
+                cell: ({ row }) =>
+                  row.original.subscribe_name ||
+                  getSubscribeName(row.original.subscribe_id),
+              },
+              {
+                accessorKey: "quantity",
+                header: t("quantity", "Quantity"),
+                cell: ({ row }) => row.original.quantity || "--",
+              },
+              {
+                accessorKey: "order_no",
+                header: t("orderNo", "Order No."),
+              },
+              {
+                accessorKey: "promo_price",
+                header: t("promoPrice", "Promo Price"),
+                cell: ({ row }) => formatCurrency(row.original.promo_price),
+              },
+              {
+                accessorKey: "used_at",
+                header: t("usedAt", "Used At"),
+                cell: ({ row }) => formatDate(row.original.used_at),
+              },
+            ]}
+            empty={
+              <Empty description={t("emptyUsage", "No promo usage records")} />
+            }
+            error={
+              <ErrorState
+                description={t(
+                  "loadErrorDescription",
+                  "Refresh the table or try again later."
+                )}
+                title={t("loadUsageError", "Failed to load promo usage")}
+              />
+            }
+            params={[
+              {
+                key: "promo_rule_id",
+                placeholder: t("rule", "Rule"),
+                options: rules.map((rule) => ({
+                  label: rule.name,
+                  value: String(rule.id),
+                })),
+              },
+              {
+                key: "subscribe_id",
+                placeholder: t("subscribe", "Subscribe"),
+                options: subscribes
+                  .filter((item) => typeof item.id === "number")
+                  .map((item) => ({
+                    label: item.name || `#${item.id}`,
+                    value: String(item.id),
+                  })),
+              },
+              { key: "user_id", placeholder: t("userId", "User ID") },
+              { key: "order_no", placeholder: t("orderNo", "Order No.") },
+            ]}
+            request={async (pagination, filters) => {
+              const { data } = await getPromoUsageList({
+                ...pagination,
+                promo_rule_id: parseOptionalNumber(filters.promo_rule_id),
+                subscribe_id: parseOptionalNumber(filters.subscribe_id),
+                user_id: parseOptionalNumber(filters.user_id),
+                order_no: filters.order_no?.trim() || undefined,
+              });
+              return {
+                list: data.data?.list || [],
+                total: data.data?.total || 0,
+              };
+            }}
+          />
+        </TabsContent>
+      </Tabs>
+      <RuleDetail
+        onOpenChange={setDetailOpen}
+        open={detailOpen}
+        rule={detailRule}
+      />
+    </>
+  );
+}

apps/admin/src/sections/promo/price-form.test.tsx

@@ -0,0 +1,152 @@
+/**
+ * @vitest-environment jsdom
+ */
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import PriceForm from "./price-form";
+
+globalThis.ResizeObserver = class ResizeObserver {
+  observe() {
+    return;
+  }
+  unobserve() {
+    return;
+  }
+  disconnect() {
+    return;
+  }
+};
+Element.prototype.scrollIntoView = function scrollIntoView() {
+  return;
+};
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (_key: string, fallback: string): string => fallback,
+  }),
+}));
+
+const rules: API.PromoRule[] = [
+  {
+    id: 1,
+    name: "Campaign Rule",
+    type: "campaign",
+    params: {},
+    priority: 1,
+    enabled: true,
+  },
+];
+
+const subscribes: API.SubscribeItem[] = [
+  {
+    id: 8,
+    name: "Monthly Plan",
+    unit_price: 1200,
+    unit_time: "Month",
+    sold: 0,
+    discount: [
+      {
+        quantity: 3,
+        discount: 90,
+      },
+    ],
+  },
+];
+const subscribesWithoutDiscounts: API.SubscribeItem[] = [
+  {
+    id: 8,
+    name: "Monthly Plan",
+    unit_price: 1200,
+    unit_time: "Month",
+    sold: 0,
+    discount: [],
+  },
+];
+
+async function selectCombobox(index: number, option: string) {
+  const combobox = screen.getAllByRole("combobox")[index];
+  if (!combobox) throw new Error(`Combobox ${index} not found`);
+  fireEvent.click(combobox);
+  fireEvent.click(await screen.findByText(option));
+}
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("PriceForm", () => {
+  it("submits promo price with promo_rule_id and selected quantity item", async () => {
+    const onSubmit = vi.fn().mockResolvedValue(true);
+    render(
+      <PriceForm onSubmit={onSubmit} rules={rules} subscribes={subscribes} />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Create Promo Price" }));
+    await selectCombobox(0, "Campaign Rule");
+    await selectCombobox(1, "Monthly Plan");
+    await selectCombobox(2, "3 x Month");
+    fireEvent.change(screen.getByPlaceholderText("Enter price"), {
+      target: { value: "20" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+
+    await waitFor(() =>
+      expect(onSubmit).toHaveBeenCalledWith({
+        promo_rule_id: 1,
+        items: [{ subscribe_id: 8, quantity: 3, promo_price: 2000 }],
+      })
+    );
+  });
+
+  it("blocks submit when subscribe has no discount quantities", async () => {
+    const onSubmit = vi.fn();
+    render(
+      <PriceForm
+        onSubmit={onSubmit}
+        rules={rules}
+        subscribes={subscribesWithoutDiscounts}
+      />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Create Promo Price" }));
+    await selectCombobox(1, "Monthly Plan");
+
+    expect(
+      screen.getByText(
+        "This subscribe has no discount quantities and cannot be configured."
+      )
+    ).not.toBeNull();
+    expect(screen.getByRole("button", { name: "Confirm" })).toHaveProperty(
+      "disabled",
+      true
+    );
+  });
+
+  it("keeps the form open and shows an error when promo price reaches original price", async () => {
+    const onSubmit = vi.fn();
+    render(
+      <PriceForm onSubmit={onSubmit} rules={rules} subscribes={subscribes} />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Create Promo Price" }));
+    await selectCombobox(0, "Campaign Rule");
+    await selectCombobox(1, "Monthly Plan");
+    await selectCombobox(2, "3 x Month");
+    fireEvent.change(screen.getByPlaceholderText("Enter price"), {
+      target: { value: "36" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+
+    expect(
+      await screen.findByText("Promo price must be lower than original price")
+    ).not.toBeNull();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+});

apps/admin/src/sections/promo/price-form.tsx

@@ -0,0 +1,260 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@workspace/ui/components/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@workspace/ui/components/form";
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@workspace/ui/components/sheet";
+import { Combobox } from "@workspace/ui/composed/combobox";
+import { EnhancedInput } from "@workspace/ui/composed/enhanced-input";
+import { unitConversion } from "@workspace/ui/utils/unit-conversions";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { z } from "zod";
+import {
+  formatCurrency,
+  getSubscribeDiscounts,
+  getSubscribeUnitPrice,
+} from "./utils";
+
+const priceSchema = z.object({
+  promo_rule_id: z.number().min(1),
+  subscribe_id: z.number().min(1),
+  quantity: z.number().min(1),
+  promo_price: z.number().min(1),
+});
+
+type PriceFormValues = z.infer<typeof priceSchema>;
+
+interface PriceFormProps {
+  loading?: boolean;
+  rules: API.PromoRule[];
+  subscribes: API.SubscribeItem[];
+  onSubmit: (data: API.CreatePromoPriceRequest) => Promise<boolean> | boolean;
+}
+
+export default function PriceForm({
+  loading,
+  rules,
+  subscribes,
+  onSubmit,
+}: PriceFormProps) {
+  const { t } = useTranslation("promo");
+  const [open, setOpen] = useState(false);
+  const form = useForm<PriceFormValues>({
+    resolver: zodResolver(priceSchema),
+    defaultValues: {
+      promo_rule_id: 0,
+      subscribe_id: 0,
+      quantity: 0,
+      promo_price: 0,
+    },
+  });
+  const subscribeId = form.watch("subscribe_id");
+  const quantity = form.watch("quantity");
+  const subscribe = subscribes.find((item) => item.id === subscribeId);
+  const discounts = getSubscribeDiscounts(subscribe);
+  const unitPrice = getSubscribeUnitPrice(subscribe);
+  const originalPrice = unitPrice * quantity;
+  const hasSelectedSubscribe = subscribeId > 0;
+  const hasDiscounts = discounts.length > 0;
+
+  async function handleSubmit(values: PriceFormValues) {
+    const maxPrice = unitPrice * values.quantity;
+    if (maxPrice > 0 && values.promo_price >= maxPrice) {
+      form.setError("promo_price", {
+        message: t(
+          "form.promoPriceLessThanOriginalPrice",
+          "Promo price must be lower than original price"
+        ),
+      });
+      return;
+    }
+    const success = await onSubmit({
+      promo_rule_id: values.promo_rule_id,
+      items: [
+        {
+          subscribe_id: values.subscribe_id,
+          quantity: values.quantity,
+          promo_price: values.promo_price,
+        },
+      ],
+    });
+    if (success) setOpen(false);
+  }
+
+  return (
+    <Sheet onOpenChange={setOpen} open={open}>
+      <SheetTrigger asChild>
+        <Button
+          onClick={() => {
+            form.reset({
+              promo_rule_id: 0,
+              subscribe_id: 0,
+              quantity: 0,
+              promo_price: 0,
+            });
+            setOpen(true);
+          }}
+          size="sm"
+        >
+          {t("createPrice", "Create Promo Price")}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="w-[520px] max-w-full md:max-w-screen-md">
+        <SheetHeader>
+          <SheetTitle>{t("createPrice", "Create Promo Price")}</SheetTitle>
+        </SheetHeader>
+        <Form {...form}>
+          <form
+            className="space-y-4 px-6 pt-4"
+            id="promo-price-form"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FormField
+              control={form.control}
+              name="promo_rule_id"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("rule", "Rule")}</FormLabel>
+                  <FormControl>
+                    <Combobox<number>
+                      onChange={field.onChange}
+                      options={rules.map((rule) => ({
+                        label: rule.name,
+                        value: rule.id,
+                      }))}
+                      placeholder={t("form.selectRule", "Select rule")}
+                      value={field.value}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="subscribe_id"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("subscribe", "Subscribe")}</FormLabel>
+                  <FormControl>
+                    <Combobox<number>
+                      onChange={(value) => {
+                        field.onChange(value);
+                        form.setValue("quantity", 0, {
+                          shouldDirty: true,
+                          shouldValidate: true,
+                        });
+                        form.clearErrors(["quantity", "promo_price"]);
+                      }}
+                      options={subscribes
+                        .filter((item) => typeof item.id === "number")
+                        .map((item) => ({
+                          label: item.name || `#${item.id}`,
+                          value: item.id as number,
+                        }))}
+                      placeholder={t(
+                        "form.selectSubscribe",
+                        "Select subscribe"
+                      )}
+                      value={field.value}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="quantity"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("quantity", "Quantity")}</FormLabel>
+                  <FormControl>
+                    <Combobox<number>
+                      onChange={field.onChange}
+                      options={discounts.map((item) => ({
+                        label: `${item.quantity} x ${t(
+                          subscribe?.unit_time || "Month",
+                          subscribe?.unit_time || "Month"
+                        )}`,
+                        value: item.quantity,
+                      }))}
+                      placeholder={t(
+                        "form.selectQuantity",
+                        "Select discount quantity"
+                      )}
+                      value={field.value}
+                    />
+                  </FormControl>
+                  {hasSelectedSubscribe && !hasDiscounts && (
+                    <p className="text-destructive text-xs">
+                      {t(
+                        "form.noDiscounts",
+                        "This subscribe has no discount quantities and cannot be configured."
+                      )}
+                    </p>
+                  )}
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="promo_price"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("promoPrice", "Promo Price")}</FormLabel>
+                  <FormControl>
+                    <EnhancedInput
+                      formatInput={(value) =>
+                        unitConversion("centsToDollars", value)
+                      }
+                      formatOutput={(value) =>
+                        unitConversion("dollarsToCents", value)
+                      }
+                      min={0.01}
+                      onValueChange={(value) => field.onChange(value)}
+                      placeholder={t("form.enterPromoPrice", "Enter price")}
+                      type="number"
+                      value={field.value}
+                    />
+                  </FormControl>
+                  {originalPrice > 0 && (
+                    <p className="text-muted-foreground text-xs">
+                      {t("originalPriceHint", "Original price")}:{" "}
+                      {formatCurrency(originalPrice)}
+                    </p>
+                  )}
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+        <SheetFooter>
+          <Button
+            disabled={loading || (hasSelectedSubscribe && !hasDiscounts)}
+            form="promo-price-form"
+            type="submit"
+          >
+            {t("confirm", "Confirm")}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/src/sections/promo/rule-detail.tsx

@@ -0,0 +1,84 @@
+import { Badge } from "@workspace/ui/components/badge";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@workspace/ui/components/sheet";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+} from "@workspace/ui/components/table";
+import { useTranslation } from "react-i18next";
+import { formatDate } from "@/utils/common";
+
+interface RuleDetailProps {
+  open: boolean;
+  rule?: API.PromoRule;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function RuleDetail({
+  open,
+  rule,
+  onOpenChange,
+}: RuleDetailProps) {
+  const { t } = useTranslation("promo");
+
+  return (
+    <Sheet onOpenChange={onOpenChange} open={open}>
+      <SheetContent className="w-[520px] max-w-full md:max-w-screen-md">
+        <SheetHeader>
+          <SheetTitle>
+            {rule?.name || t("ruleDetail", "Rule Detail")}
+          </SheetTitle>
+        </SheetHeader>
+        {rule && (
+          <div className="px-6 pt-4">
+            <Table>
+              <TableBody>
+                <TableRow>
+                  <TableCell>{t("type", "Type")}</TableCell>
+                  <TableCell>
+                    <Badge variant="outline">
+                      {t(`types.${rule.type}`, rule.type)}
+                    </Badge>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>{t("priority", "Priority")}</TableCell>
+                  <TableCell>{rule.priority}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>{t("enabled", "Enabled")}</TableCell>
+                  <TableCell>
+                    {rule.enabled ? t("yes", "Yes") : t("no", "No")}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>{t("params", "Params")}</TableCell>
+                  <TableCell>
+                    <code className="whitespace-pre-wrap rounded bg-muted px-2 py-1 text-xs">
+                      {JSON.stringify(rule.params || {}, null, 2)}
+                    </code>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>
+                    {t("validityPeriod", "Validity Period")}
+                  </TableCell>
+                  <TableCell>
+                    {rule.start_time ? formatDate(rule.start_time) : "--"} -{" "}
+                    {rule.end_time ? formatDate(rule.end_time) : "--"}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/src/sections/promo/rule-form.tsx

@@ -0,0 +1,353 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@workspace/ui/components/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@workspace/ui/components/form";
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@workspace/ui/components/radio-group";
+import { ScrollArea } from "@workspace/ui/components/scroll-area";
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@workspace/ui/components/sheet";
+import { Switch } from "@workspace/ui/components/switch";
+import { DatePicker } from "@workspace/ui/composed/date-picker";
+import { EnhancedInput } from "@workspace/ui/composed/enhanced-input";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { z } from "zod";
+import { promoRuleTypes } from "./utils";
+
+const ruleSchema = z
+  .object({
+    name: z.string().min(1),
+    type: z.enum(["new_user", "inactive_user", "campaign"]),
+    inactive_months: z.number().optional(),
+    window_hours: z.number().optional(),
+    priority: z.number().min(0),
+    enabled: z.boolean(),
+    start_time: z.number().optional(),
+    end_time: z.number().optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (
+      data.start_time !== undefined &&
+      data.end_time !== undefined &&
+      data.start_time >= data.end_time
+    ) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "End time must be later than start time",
+        path: ["end_time"],
+      });
+    }
+    if (
+      data.type === "inactive_user" &&
+      (!data.inactive_months || data.inactive_months <= 0)
+    ) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Inactive months must be greater than 0",
+        path: ["inactive_months"],
+      });
+    }
+    if (
+      data.type === "new_user" &&
+      (!data.window_hours || data.window_hours <= 0)
+    ) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Window hours must be greater than 0",
+        path: ["window_hours"],
+      });
+    }
+  });
+
+type RuleFormValues = z.infer<typeof ruleSchema>;
+
+interface RuleFormProps {
+  initialValues?: API.PromoRule;
+  loading?: boolean;
+  onSubmit: (data: API.CreatePromoRuleRequest) => Promise<boolean> | boolean;
+  title: string;
+  trigger: string;
+}
+
+function toFormValues(rule?: API.PromoRule): RuleFormValues {
+  return {
+    name: rule?.name ?? "",
+    type: rule?.type ?? "inactive_user",
+    inactive_months: rule?.params?.inactive_months,
+    window_hours: rule?.params?.window_hours,
+    priority: rule?.priority ?? 0,
+    enabled: rule?.enabled ?? false,
+    start_time: rule?.start_time,
+    end_time: rule?.end_time,
+  };
+}
+
+function toRequest(values: RuleFormValues): API.CreatePromoRuleRequest {
+  const params: API.PromoRuleParams =
+    values.type === "inactive_user"
+      ? { inactive_months: values.inactive_months }
+      : values.type === "new_user"
+        ? { window_hours: values.window_hours }
+        : {};
+
+  return {
+    name: values.name.trim(),
+    type: values.type,
+    params,
+    priority: values.priority,
+    enabled: values.enabled,
+    start_time: values.start_time || undefined,
+    end_time: values.end_time || undefined,
+  };
+}
+
+export default function RuleForm({
+  initialValues,
+  loading,
+  onSubmit,
+  title,
+  trigger,
+}: RuleFormProps) {
+  const { t } = useTranslation("promo");
+  const [open, setOpen] = useState(false);
+  const form = useForm<RuleFormValues>({
+    resolver: zodResolver(ruleSchema),
+    defaultValues: toFormValues(initialValues),
+  });
+  const type = form.watch("type");
+
+  useEffect(() => {
+    form.reset(toFormValues(initialValues));
+  }, [form, initialValues]);
+
+  async function handleSubmit(values: RuleFormValues) {
+    const success = await onSubmit(toRequest(values));
+    if (success) setOpen(false);
+  }
+
+  return (
+    <Sheet onOpenChange={setOpen} open={open}>
+      <SheetTrigger asChild>
+        <Button
+          onClick={() => {
+            form.reset(toFormValues(initialValues));
+            setOpen(true);
+          }}
+          size="sm"
+        >
+          {trigger}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="w-[520px] max-w-full md:max-w-screen-md">
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className="h-[calc(100vh-48px-36px-36px-env(safe-area-inset-top))]">
+          <Form {...form}>
+            <form
+              className="space-y-4 px-6 pt-4"
+              id="promo-rule-form"
+              onSubmit={form.handleSubmit(handleSubmit)}
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("form.name", "Name")}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        onValueChange={(value) => field.onChange(value)}
+                        placeholder={t("form.namePlaceholder", "Rule name")}
+                        value={field.value}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("form.type", "Rule Type")}</FormLabel>
+                    <FormControl>
+                      <RadioGroup
+                        className="grid gap-2 sm:grid-cols-3"
+                        onValueChange={(value) =>
+                          field.onChange(value as API.PromoRuleType)
+                        }
+                        value={field.value}
+                      >
+                        {promoRuleTypes.map((item) => (
+                          <FormItem
+                            className="flex items-center space-x-2 space-y-0"
+                            key={item}
+                          >
+                            <FormControl>
+                              <RadioGroupItem value={item} />
+                            </FormControl>
+                            <FormLabel className="font-normal">
+                              {t(`types.${item}`, item)}
+                            </FormLabel>
+                          </FormItem>
+                        ))}
+                      </RadioGroup>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {type === "inactive_user" && (
+                <FormField
+                  control={form.control}
+                  name="inactive_months"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {t("form.inactiveMonths", "Inactive Months")}
+                      </FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          min={1}
+                          onValueChange={(value) => field.onChange(value)}
+                          placeholder={t(
+                            "form.inactiveMonthsPlaceholder",
+                            "Months without purchase"
+                          )}
+                          type="number"
+                          value={field.value}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              {type === "new_user" && (
+                <FormField
+                  control={form.control}
+                  name="window_hours"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {t("form.windowHours", "Window Hours")}
+                      </FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          min={1}
+                          onValueChange={(value) => field.onChange(value)}
+                          placeholder={t(
+                            "form.windowHoursPlaceholder",
+                            "Hours after registration"
+                          )}
+                          type="number"
+                          value={field.value}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              <FormField
+                control={form.control}
+                name="priority"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("priority", "Priority")}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        min={0}
+                        onValueChange={(value) => field.onChange(value)}
+                        placeholder="0"
+                        type="number"
+                        value={field.value}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="grid gap-4 sm:grid-cols-2">
+                <FormField
+                  control={form.control}
+                  name="start_time"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("startTime", "Start Time")}</FormLabel>
+                      <FormControl>
+                        <DatePicker
+                          onChange={(value) => field.onChange(value)}
+                          placeholder={t("form.selectStartTime", "Select time")}
+                          value={field.value}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="end_time"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("endTime", "End Time")}</FormLabel>
+                      <FormControl>
+                        <DatePicker
+                          onChange={(value) => field.onChange(value)}
+                          placeholder={t("form.selectEndTime", "Select time")}
+                          value={field.value}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <FormItem className="flex items-center justify-between rounded-md border p-3">
+                    <div>
+                      <FormLabel>{t("enabled", "Enabled")}</FormLabel>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter>
+          <Button disabled={loading} form="promo-rule-form" type="submit">
+            {t("confirm", "Confirm")}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/src/sections/promo/utils.ts

@@ -0,0 +1,28 @@
+import { unitConversion } from "@workspace/ui/utils/unit-conversions";
+
+export const promoRuleTypes: API.PromoRuleType[] = [
+  "inactive_user",
+  "new_user",
+  "campaign",
+];
+
+export function formatCurrency(value?: number) {
+  if (typeof value !== "number") return "--";
+  return `$${unitConversion("centsToDollars", value)}`;
+}
+
+export function parseOptionalNumber(value?: string) {
+  if (!value) return;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+export function getSubscribeUnitPrice(subscribe?: API.SubscribeItem) {
+  return typeof subscribe?.unit_price === "number" ? subscribe.unit_price : 0;
+}
+
+export function getSubscribeDiscounts(subscribe?: API.SubscribeItem) {
+  return (subscribe?.discount || []).filter(
+    (item) => typeof item.quantity === "number" && item.quantity > 0
+  );
+}

apps/user/public/assets/locales/en-US/subscribe.json

@@ -37,6 +37,10 @@
   "passwordHint": "If you do not enter a password, we will automatically generate one and send it to your email.",
   "paymentMethod": "Payment Method",
   "productDescription": "productDescription",
+  "promo": {
+    "available": "Promo Available",
+    "validUntil": "Valid until"
+  },
   "purchaseDuration": "Purchase Duration",
   "recharge": "Recharge",
   "rechargeAmount": "Recharge Amount",

apps/user/public/assets/locales/zh-CN/subscribe.json

@@ -37,6 +37,10 @@
   "passwordHint": "如果您不输入密码，我们将自动生成一个并发送到您的邮箱。",
   "paymentMethod": "支付方式",
   "productDescription": "商品描述",
+  "promo": {
+    "available": "促销可用",
+    "validUntil": "有效期至"
+  },
   "purchaseDuration": "购买时长",
   "recharge": "充值",
   "rechargeAmount": "充值金额",

apps/user/src/sections/purchasing/content.tsx

@@ -17,6 +17,7 @@ import CouponInput from "@/sections/subscribe/coupon-input";
 import { SubscribeDetail } from "@/sections/subscribe/detail";
 import DurationSelector from "@/sections/subscribe/duration-selector";
 import PaymentMethods from "@/sections/subscribe/payment-methods";
+import { PromoInfo } from "@/sections/subscribe/promo-info";
 import { useGlobalStore } from "@/stores/global";
 
 export default function Content({
@@ -49,6 +50,9 @@ export default function Content({
     valid: false,
     message: "",
   });
+  const selectedDiscount = subscription?.discount?.find(
+    (item) => item.quantity === params.quantity
+  );
 
   const { data: order } = useQuery({
     enabled: !!subscription?.id && !!params.payment,
@@ -103,7 +107,10 @@ export default function Content({
           navigate({ to: "/purchasing/order", search: { order_no } });
         }
       } catch (error) {
-        console.log(error);
+        setIsEmailValid((prev) => ({
+          ...prev,
+          message: error instanceof Error ? error.message : prev.message,
+        }));
       }
     });
   }, [params, navigate]);
@@ -285,6 +292,7 @@ export default function Content({
                 show_original_price: subscription?.show_original_price,
               }}
             />
+            <PromoInfo discount={selectedDiscount} />
           </CardContent>
         </Card>
       </div>

apps/user/src/sections/subscribe/promo-info.tsx

@@ -0,0 +1,33 @@
+import { Badge } from "@workspace/ui/components/badge";
+import { useTranslation } from "react-i18next";
+import { Display } from "@/components/display";
+
+interface PromoInfoProps {
+  discount?: API.SubscribeDiscount;
+}
+
+export function PromoInfo({ discount }: Readonly<PromoInfoProps>) {
+  const { t } = useTranslation("subscribe");
+  const promo = discount?.promo;
+
+  if (!promo) return null;
+
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/40 p-3 text-sm">
+      <div className="grid gap-1">
+        <span className="font-medium">
+          {promo.rule_name || t("promo.available", "Promo Available")}
+        </span>
+        {promo.end_time && (
+          <span className="text-muted-foreground text-xs">
+            {t("promo.validUntil", "Valid until")}:{" "}
+            {new Date(promo.end_time * 1000).toLocaleString()}
+          </span>
+        )}
+      </div>
+      <Badge variant="secondary">
+        <Display type="currency" value={promo.promo_price} />
+      </Badge>
+    </div>
+  );
+}

apps/user/src/sections/subscribe/purchase.tsx

@@ -18,6 +18,7 @@ import { useTranslation } from "react-i18next";
 import CouponInput from "@/sections/subscribe/coupon-input";
 import DurationSelector from "@/sections/subscribe/duration-selector";
 import PaymentMethods from "@/sections/subscribe/payment-methods";
+import { PromoInfo } from "@/sections/subscribe/promo-info";
 import { useGlobalStore } from "@/stores/global";
 import { SubscribeBilling } from "./billing";
 import { SubscribeDetail } from "./detail";
@@ -41,7 +42,12 @@ export default function Purchase({
     coupon: "",
   });
   const [loading, startTransition] = useTransition();
-  const lastSuccessOrderRef = useRef<any>(null);
+  const lastSuccessOrderRef = useRef<API.PreOrderResponse | undefined>(
+    undefined
+  );
+  const selectedDiscount = subscribe?.discount?.find(
+    (item) => item.quantity === params.quantity
+  );
 
   const { data: order } = useQuery({
     enabled: !!subscribe?.id,
@@ -140,6 +146,7 @@ export default function Purchase({
                   show_original_price: subscribe?.show_original_price,
                 }}
               />
+              <PromoInfo discount={selectedDiscount} />
             </CardContent>
           </Card>
           <div className="flex flex-col justify-between text-sm">

packages/ui/src/services/admin/index.ts

@@ -15,6 +15,7 @@ import * as log from "./log";
 import * as marketing from "./marketing";
 import * as order from "./order";
 import * as payment from "./payment";
+import * as promo from "./promo";
 import * as redemption from "./redemption";
 import * as server from "./server";
 import * as subscribe from "./subscribe";
@@ -37,6 +38,7 @@ export default {
   marketing,
   order,
   payment,
+  promo,
   redemption,
   server,
   subscribe,

packages/ui/src/services/admin/promo.ts

@@ -0,0 +1,150 @@
+/* eslint-disable */
+import request from "@workspace/ui/lib/request";
+
+/** Create promo rule POST /v1/admin/promo/rule */
+export async function createPromoRule(
+  body: API.CreatePromoRuleRequest,
+  options?: Record<string, unknown>
+) {
+  return request<API.Response & { data?: API.PromoRule }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/promo/rule`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+      ...(options || {}),
+    }
+  );
+}
+
+/** Get promo rule list GET /v1/admin/promo/rule/list */
+export async function getPromoRuleList(
+  params: API.GetPromoRuleListParams,
+  options?: Record<string, unknown>
+) {
+  return request<API.Response & { data?: API.GetPromoRuleListResponse }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/promo/rule/list`,
+    {
+      method: "GET",
+      params: {
+        ...params,
+      },
+      ...(options || {}),
+    }
+  );
+}
+
+/** Get promo rule detail GET /v1/admin/promo/rule/:id */
+export async function getPromoRuleDetail(
+  params: API.GetPromoRuleDetailParams,
+  options?: Record<string, unknown>
+) {
+  return request<API.Response & { data?: API.PromoRule }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/promo/rule/${params.id}`,
+    {
+      method: "GET",
+      ...(options || {}),
+    }
+  );
+}
+
+/** Update promo rule PUT /v1/admin/promo/rule/:id */
+export async function updatePromoRule(
+  params: API.UpdatePromoRuleParams,
+  body: API.UpdatePromoRuleRequest,
+  options?: Record<string, unknown>
+) {
+  return request<API.Response & { data?: API.PromoRule }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/promo/rule/${params.id}`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+      ...(options || {}),
+    }
+  );
+}
+
+/** Delete promo rule DELETE /v1/admin/promo/rule/:id */
+export async function deletePromoRule(
+  params: API.DeletePromoRuleParams,
+  options?: Record<string, unknown>
+) {
+  return request<API.Response & { data?: unknown }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/promo/rule/${params.id}`,
+    {
+      method: "DELETE",
+      ...(options || {}),
+    }
+  );
+}
+
+/** Create promo price POST /v1/admin/promo/price */
+export async function createPromoPrice(
+  body: API.CreatePromoPriceRequest,
+  options?: Record<string, unknown>
+) {
+  return request<API.Response & { data?: API.PromoPrice }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/promo/price`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+      ...(options || {}),
+    }
+  );
+}
+
+/** Get promo price list GET /v1/admin/promo/price/list */
+export async function getPromoPriceList(
+  params: API.GetPromoPriceListParams,
+  options?: Record<string, unknown>
+) {
+  return request<API.Response & { data?: API.GetPromoPriceListResponse }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/promo/price/list`,
+    {
+      method: "GET",
+      params: {
+        ...params,
+      },
+      ...(options || {}),
+    }
+  );
+}
+
+/** Delete promo price DELETE /v1/admin/promo/price/:id */
+export async function deletePromoPrice(
+  params: API.DeletePromoPriceParams,
+  options?: Record<string, unknown>
+) {
+  return request<API.Response & { data?: unknown }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/promo/price/${params.id}`,
+    {
+      method: "DELETE",
+      ...(options || {}),
+    }
+  );
+}
+
+/** Get promo usage list GET /v1/admin/promo/usage/list */
+export async function getPromoUsageList(
+  params: API.GetPromoUsageListParams,
+  options?: Record<string, unknown>
+) {
+  return request<API.Response & { data?: API.GetPromoUsageListResponse }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/promo/usage/list`,
+    {
+      method: "GET",
+      params: {
+        ...params,
+      },
+      ...(options || {}),
+    }
+  );
+}

packages/ui/src/services/admin/typings.d.ts

@@ -272,6 +272,76 @@ declare namespace API {
     enabled: boolean;
   };
 
+  type PromoRuleType = "new_user" | "inactive_user" | "campaign";
+
+  type PromoRuleParams = {
+    inactive_months?: number;
+    window_hours?: number;
+    [key: string]: unknown;
+  };
+
+  type PromoRule = {
+    id: number;
+    name: string;
+    type: PromoRuleType;
+    params: PromoRuleParams;
+    priority: number;
+    enabled: boolean;
+    start_time?: number;
+    end_time?: number;
+    created_at?: number;
+    updated_at?: number;
+  };
+
+  type CreatePromoRuleRequest = {
+    name: string;
+    type: PromoRuleType;
+    params: PromoRuleParams;
+    priority: number;
+    enabled: boolean;
+    start_time?: number;
+    end_time?: number;
+  };
+
+  type UpdatePromoRuleRequest = CreatePromoRuleRequest;
+
+  type PromoPrice = {
+    id: number;
+    promo_rule_id: number;
+    subscribe_id: number;
+    subscribe_name?: string;
+    quantity: number;
+    unit_price: number;
+    promo_price: number;
+    created_at?: number;
+    updated_at?: number;
+  };
+
+  type CreatePromoPriceItem = {
+    subscribe_id: number;
+    quantity: number;
+    promo_price: number;
+  };
+
+  type CreatePromoPriceRequest = {
+    promo_rule_id: number;
+    items: CreatePromoPriceItem[];
+  };
+
+  type PromoUsage = {
+    id: number;
+    promo_rule_id: number;
+    rule_name?: string;
+    subscribe_id: number;
+    subscribe_name?: string;
+    quantity: number;
+    user_id: number;
+    order_no: string;
+    unit_price: number;
+    promo_price: number;
+    used_at: number;
+  };
+
   type CreateOrderRequest = {
     user_id: number;
     type: number;
@@ -929,6 +999,61 @@ declare namespace API {
     list: Coupon[];
   };
 
+  type GetPromoRuleListParams = {
+    page: number;
+    size: number;
+    type?: PromoRuleType;
+    enabled?: boolean;
+    search?: string;
+  };
+
+  type GetPromoRuleListResponse = {
+    total: number;
+    list: PromoRule[];
+  };
+
+  type GetPromoRuleDetailParams = {
+    id: number;
+  };
+
+  type UpdatePromoRuleParams = {
+    id: number;
+  };
+
+  type DeletePromoRuleParams = {
+    id: number;
+  };
+
+  type GetPromoPriceListParams = {
+    page: number;
+    size: number;
+    promo_rule_id?: number;
+    subscribe_id?: number;
+  };
+
+  type GetPromoPriceListResponse = {
+    total: number;
+    list: PromoPrice[];
+  };
+
+  type DeletePromoPriceParams = {
+    id: number;
+  };
+
+  type GetPromoUsageListParams = {
+    page: number;
+    size: number;
+    promo_rule_id?: number;
+    subscribe_id?: number;
+    user_id?: number;
+    order_no?: string;
+  };
+
+  type GetPromoUsageListResponse = {
+    total: number;
+    list: PromoUsage[];
+  };
+
   type GetDetailRequest = {
     id: number;
   };
@@ -2101,6 +2226,13 @@ declare namespace API {
     quantity: number;
     discount: number;
     map_apple?: string;
+    promo?: SubscribeDiscountPromo;
+  };
+
+  type SubscribeDiscountPromo = {
+    rule_name?: string;
+    promo_price: number;
+    end_time?: number;
   };
 
   type SubscribeGroup = {

packages/ui/src/services/common/typings.d.ts

@@ -910,6 +910,13 @@ declare namespace API {
     quantity: number;
     discount: number;
     map_apple?: string;
+    promo?: SubscribeDiscountPromo;
+  };
+
+  type SubscribeDiscountPromo = {
+    rule_name?: string;
+    promo_price: number;
+    end_time?: number;
   };
 
   type SubscribeGroup = {

packages/ui/src/services/user/typings.d.ts

@@ -1019,6 +1019,13 @@ declare namespace API {
     quantity: number;
     discount: number;
     map_apple?: string;
+    promo?: SubscribeDiscountPromo;
+  };
+
+  type SubscribeDiscountPromo = {
+    rule_name?: string;
+    promo_price: number;
+    end_time?: number;
   };
 
   type SubscribeGroup = {