修复(#22): 收口后台订单状态6退款入口

Squash merge of fix/134-促销前端展示对齐 (4702dee).

HIF-79/HIF-113 落地后前端有三处对齐缺失：

- promo-info.tsx 仍读 promo.end_time，但后端 SubscribeDiscountPromo
  JSON 字段是 expires_at（×2 处）
- billing.tsx 缺 Promo Discount 行，PreOrderResponse 拿到 promo_discount
  时无处可渲染
- typings.d.ts: SubscribeDiscountPromo 缺 expires_at/rule_type,
  PreOrderResponse 缺 promo_discount

本次仅修字段对齐与展示行，不动业务逻辑、不动 OrderDetail 类型 (后端
当前未透出 promo_discount)。新增 billing.promoDiscount 中英文文案。

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

@@ -16,10 +16,11 @@
     "0": "Status",
     "1": "Pending",
     "2": "Paid",
-    "3": "Cancelled",
-    "4": "Closed",
-    "5": "Completed",
-    "6": "Refunded"
+    "3": "Closed",
+    "4": "Failed",
+    "5": "Finished",
+    "6": "Claimed",
+    "7": "Refunded"
   },
   "subscribe": "Subscribe",
   "subscribePrice": "Subscription Price",
@@ -33,5 +34,8 @@
     "4": "Recharge"
   },
   "updateTime": "Update Time",
-  "user": "User"
+  "user": "User",
+  "refundFailed": "Refund failed. Please try again.",
+  "statusClaimedBlocked": "Claimed and refunded states must use the dedicated processing flow.",
+  "statusUpdateFailed": "Status update failed. Please try again."
 }

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

@@ -22,10 +22,13 @@
     "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",
@@ -38,10 +41,12 @@
   "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",

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

@@ -16,10 +16,11 @@
     "0": "状态",
     "1": "待支付",
     "2": "已支付",
-    "3": "已取消",
-    "4": "已关闭",
+    "3": "已关闭",
+    "4": "失败",
     "5": "已完成",
-    "6": "已退费"
+    "6": "处理中",
+    "7": "已退费"
   },
   "subscribe": "订阅",
   "subscribePrice": "订阅价格",
@@ -33,5 +34,8 @@
     "4": "充值"
   },
   "updateTime": "更新时间",
-  "user": "用户"
+  "user": "用户",
+  "refundFailed": "退费失败，请重试。",
+  "statusClaimedBlocked": "处理中和已退费状态必须走专用流程，不能通过通用改状态提交。",
+  "statusUpdateFailed": "状态更新失败，请重试。"
 }

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

@@ -22,10 +22,13 @@
     "inactiveMonthsPlaceholder": "未购买的月数",
     "name": "名称",
     "namePlaceholder": "规则名称",
+    "noDiscounts": "该订阅没有 discount 档位，不能配置促销价。",
+    "promoPriceLessThanOriginalPrice": "促销价必须低于原价",
     "promoPriceLessThanUnitPrice": "促销价必须低于原价",
     "selectEndTime": "选择时间",
     "selectRule": "选择规则",
     "selectStartTime": "选择时间",
+    "selectQuantity": "选择 discount 档位",
     "selectSubscribe": "选择订阅",
     "type": "规则类型",
     "windowHours": "新用户窗口小时数",
@@ -38,10 +41,12 @@
   "name": "名称",
   "no": "否",
   "orderNo": "订单号",
+  "originalPriceHint": "原价",
   "params": "参数",
   "prices": "商品促销价",
   "priority": "优先级",
   "promoPrice": "促销价",
+  "quantity": "档位",
   "rule": "规则",
   "ruleDetail": "规则详情",
   "rules": "促销规则",

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

@@ -0,0 +1,466 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import {
+  activateOrder,
+  getOrderList,
+  refundOrder,
+  updateOrderStatus,
+} from "@workspace/ui/services/admin/order";
+import type { AxiosResponse } from "axios";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import Order, { canManuallyUpdateOrderStatus, canRefundOrderStatus } from ".";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (_key: string, fallback: string): string => fallback,
+  }),
+}));
+
+vi.mock("@tanstack/react-router", () => ({
+  useSearch: () => ({}),
+}));
+
+vi.mock("@/stores/global", () => ({
+  useGlobalStore: (
+    selector?: (state: {
+      user: { is_admin: boolean };
+      common: { currency: { currency_symbol: string } };
+    }) => unknown
+  ) => {
+    const state = {
+      user: {
+        is_admin: true,
+      },
+      common: {
+        currency: {
+          currency_symbol: "$",
+        },
+      },
+    };
+
+    return typeof selector === "function" ? selector(state) : state;
+  },
+}));
+
+vi.mock("@/stores/subscribe", () => ({
+  useSubscribe: () => ({
+    subscribes: [
+      {
+        id: 9,
+        name: "Pro Plan",
+      },
+    ],
+    getSubscribeName: (id?: number) => (id === 9 ? "Pro Plan" : "--"),
+  }),
+}));
+
+vi.mock("@/utils/common", () => ({
+  formatDate: (timestamp: number) => `date-${timestamp}`,
+}));
+
+vi.mock("../user/user-detail", () => ({
+  UserDetail: ({ id }: { id: number }) => <span>User #{id}</span>,
+}));
+
+vi.mock("@/components/display", () => ({
+  Display: ({ value }: { value: number }) => <span>{value}</span>,
+}));
+
+const toastSuccess = vi.fn();
+const toastError = vi.fn();
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: (...args: unknown[]) => toastSuccess(...args),
+    error: (...args: unknown[]) => toastError(...args),
+  },
+}));
+
+vi.mock("@workspace/ui/services/admin/order", () => ({
+  activateOrder: vi.fn(),
+  getOrderList: vi.fn(),
+  refundOrder: vi.fn(),
+  updateOrderStatus: vi.fn(),
+}));
+
+vi.mock("@workspace/ui/components/alert-dialog", () => ({
+  AlertDialog: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogTrigger: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogHeader: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogTitle: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogDescription: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogFooter: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogCancel: ({
+    children,
+    ...props
+  }: React.ComponentProps<"button">) => <button {...props}>{children}</button>,
+  AlertDialogAction: ({
+    children,
+    ...props
+  }: React.ComponentProps<"button">) => <button {...props}>{children}</button>,
+}));
+
+vi.mock("@workspace/ui/composed/combobox", () => ({
+  Combobox: ({
+    options = [],
+    value,
+    onChange,
+    placeholder,
+  }: {
+    options?: Array<{ label: string; value: number | string }>;
+    value?: number | string;
+    onChange: (value: number) => void;
+    placeholder?: string;
+  }) => (
+    <label>
+      <span>{placeholder}</span>
+      <select
+        aria-label={placeholder}
+        onChange={(event) => onChange(Number(event.target.value))}
+        value={String(value ?? "")}
+      >
+        {options.map((option) => (
+          <option key={String(option.value)} value={String(option.value)}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  ),
+}));
+
+vi.mock("@workspace/ui/composed/pro-table/pro-table", async () => {
+  const React = await import("react");
+
+  type Column = {
+    accessorKey?: string;
+    cell?: (props: {
+      row: {
+        original: Record<string, unknown>;
+        getValue: (key: string) => unknown;
+      };
+    }) => React.ReactNode;
+  };
+
+  return {
+    ProTable: ({
+      columns,
+      request,
+      actions,
+    }: {
+      columns: Column[];
+      request: (
+        pagination: { page: number; size: number },
+        filter: Record<string, unknown>
+      ) => Promise<{ list: Record<string, unknown>[]; total: number }>;
+      actions?: {
+        render?: (row: Record<string, unknown>) => React.ReactNode[];
+      };
+    }) => {
+      const [state, setState] = React.useState<{
+        data: Record<string, unknown>[];
+        error: boolean;
+        loading: boolean;
+      }>({
+        data: [],
+        error: false,
+        loading: true,
+      });
+
+      React.useEffect(() => {
+        let cancelled = false;
+        request({ page: 1, size: 200 }, {})
+          .then((response) => {
+            if (cancelled) return;
+            setState({
+              data: response.list,
+              error: false,
+              loading: false,
+            });
+          })
+          .catch(() => {
+            if (cancelled) return;
+            setState({
+              data: [],
+              error: true,
+              loading: false,
+            });
+          });
+
+        return () => {
+          cancelled = true;
+        };
+      }, [request]);
+
+      if (state.loading) {
+        return <div aria-label="Loading data" role="status" />;
+      }
+
+      if (state.error) {
+        return <div>Failed to load orders</div>;
+      }
+
+      if (state.data.length === 0) {
+        return <div>No orders</div>;
+      }
+
+      return (
+        <div>
+          {state.data.map((row) => (
+            <article key={String(row.id)}>
+              {columns.map((column, index) => {
+                const value = column.accessorKey
+                  ? row[column.accessorKey]
+                  : undefined;
+                const rowApi = {
+                  original: row,
+                  getValue: (key: string) => row[key],
+                };
+
+                return (
+                  <div key={`${row.id}-${index}`}>
+                    {column.cell
+                      ? column.cell({ row: rowApi })
+                      : typeof value === "object"
+                        ? JSON.stringify(value)
+                        : String(value ?? "")}
+                  </div>
+                );
+              })}
+              <div>{actions?.render?.(row)}</div>
+            </article>
+          ))}
+        </div>
+      );
+    },
+  };
+});
+
+const mockedGetOrderList = vi.mocked(getOrderList);
+const mockedRefundOrder = vi.mocked(refundOrder);
+const mockedUpdateOrderStatus = vi.mocked(updateOrderStatus);
+const mockedActivateOrder = vi.mocked(activateOrder);
+
+function createOrderListResponse(
+  list: API.Order[]
+): AxiosResponse<API.Response & { data?: API.GetOrderListResponse }> {
+  return {
+    data: {
+      code: 200,
+      data: {
+        list,
+        total: list.length,
+      },
+    },
+    status: 200,
+    statusText: "OK",
+    headers: {},
+    config: {
+      headers: {} as AxiosResponse["config"]["headers"],
+    },
+  };
+}
+
+function createSuccessResponse(): AxiosResponse<
+  API.Response & { data?: unknown }
+> {
+  return {
+    data: {
+      code: 200,
+    },
+    status: 200,
+    statusText: "OK",
+    headers: {},
+    config: {
+      headers: {} as AxiosResponse["config"]["headers"],
+    },
+  };
+}
+
+function createOrder(status: number): API.Order {
+  return {
+    id: status,
+    amount: 1999,
+    coupon_discount: 0,
+    discount: 0,
+    fee_amount: 0,
+    order_no: `ORDER-${status}`,
+    payment: {
+      name: "Stripe",
+      platform: "stripe",
+    },
+    price: 1999,
+    quantity: 1,
+    status,
+    status_name:
+      status === 6 ? "claimed" : status === 7 ? "refunded" : "pending",
+    subscribe_id: 9,
+    trade_no: `TRADE-${status}`,
+    type: 1,
+    updated_at: 1_716_800_000,
+    user_id: 88,
+  } as API.Order;
+}
+
+function renderOrderPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <Order />
+    </QueryClientProvider>
+  );
+}
+
+beforeEach(() => {
+  localStorage.setItem("timezone", "UTC");
+});
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("Order", () => {
+  it("uses the dedicated refund endpoint for refundable orders", async () => {
+    mockedGetOrderList.mockResolvedValue(
+      createOrderListResponse([createOrder(2)])
+    );
+    mockedRefundOrder.mockResolvedValue(createSuccessResponse());
+
+    renderOrderPage();
+
+    expect(await screen.findByText("ORDER-2")).not.toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Confirm refund" }));
+
+    await waitFor(() =>
+      expect(mockedRefundOrder).toHaveBeenCalledWith(
+        { id: 2 },
+        { skipErrorHandler: true }
+      )
+    );
+    expect(toastSuccess).toHaveBeenCalledWith("Refund completed.");
+  });
+
+  it("blocks status 6 and 7 from the generic status editor", async () => {
+    mockedGetOrderList.mockResolvedValue(
+      createOrderListResponse([createOrder(1)])
+    );
+    mockedUpdateOrderStatus.mockResolvedValue(createSuccessResponse());
+
+    renderOrderPage();
+
+    const statusSelect = await screen.findByLabelText("Status");
+    const optionValues = Array.from(
+      statusSelect.querySelectorAll("option")
+    ).map((option) => option.textContent);
+
+    expect(optionValues).not.toContain("Claimed");
+    expect(optionValues).not.toContain("Refunded");
+    expect(canManuallyUpdateOrderStatus(6)).toBe(false);
+    expect(canManuallyUpdateOrderStatus(7)).toBe(false);
+
+    fireEvent.change(statusSelect, { target: { value: "2" } });
+
+    await waitFor(() =>
+      expect(mockedUpdateOrderStatus).toHaveBeenCalledWith(
+        { id: 1, status: 2 },
+        { skipErrorHandler: true }
+      )
+    );
+  });
+
+  it("renders loading state while orders are being fetched", () => {
+    mockedGetOrderList.mockReturnValue(
+      new Promise(() => {
+        // Keep the request pending so the loading UI remains visible.
+      }) as ReturnType<typeof getOrderList>
+    );
+
+    renderOrderPage();
+
+    expect(screen.getByRole("status", { name: "Loading data" })).not.toBeNull();
+  });
+
+  it("renders the empty state when there are no orders", async () => {
+    mockedGetOrderList.mockResolvedValue(createOrderListResponse([]));
+
+    renderOrderPage();
+
+    expect(await screen.findByText("No orders")).not.toBeNull();
+  });
+
+  it("shows an error toast when refund fails", async () => {
+    mockedGetOrderList.mockResolvedValue(
+      createOrderListResponse([createOrder(5)])
+    );
+    mockedRefundOrder.mockRejectedValue(new Error("refund failed"));
+
+    renderOrderPage();
+
+    expect(await screen.findByText("ORDER-5")).not.toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Confirm refund" }));
+
+    await waitFor(() =>
+      expect(toastError).toHaveBeenCalledWith(
+        "Refund failed. Please try again."
+      )
+    );
+  });
+
+  it("renders the error state when the order list request fails", async () => {
+    mockedGetOrderList.mockRejectedValue(new Error("network failed"));
+
+    renderOrderPage();
+
+    expect(await screen.findByText("Failed to load orders")).not.toBeNull();
+  });
+
+  it("keeps the order actions visible on a narrow viewport", async () => {
+    window.innerWidth = 375;
+    window.dispatchEvent(new Event("resize"));
+    mockedGetOrderList.mockResolvedValue(
+      createOrderListResponse([createOrder(2), createOrder(6), createOrder(7)])
+    );
+
+    renderOrderPage();
+
+    expect(await screen.findByText("ORDER-2")).not.toBeNull();
+    expect(screen.getByText("Claimed")).not.toBeNull();
+    expect(screen.getAllByText("Refund").length).toBe(1);
+    expect(canRefundOrderStatus(2)).toBe(true);
+    expect(canRefundOrderStatus(6)).toBe(false);
+    expect(canRefundOrderStatus(7)).toBe(false);
+    expect(mockedActivateOrder).not.toHaveBeenCalled();
+  });
+});

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

@@ -40,7 +40,31 @@ import { useSubscribe } from "@/stores/subscribe";
 import { formatDate } from "@/utils/common";
 import { UserDetail } from "../user/user-detail";
 
-const REFUNDED_ORDER_STATUS = 6;
+const ORDER_STATUS_PENDING = 1;
+const ORDER_STATUS_PAID = 2;
+const ORDER_STATUS_CLOSED = 3;
+const ORDER_STATUS_FAILED = 4;
+const ORDER_STATUS_FINISHED = 5;
+const ORDER_STATUS_CLAIMED = 6;
+const ORDER_STATUS_REFUNDED = 7;
+
+const MANUALLY_EDITABLE_ORDER_STATUSES = [
+  ORDER_STATUS_PENDING,
+  ORDER_STATUS_PAID,
+  ORDER_STATUS_CLOSED,
+  ORDER_STATUS_FAILED,
+  ORDER_STATUS_FINISHED,
+] as const;
+
+export function canManuallyUpdateOrderStatus(status: number) {
+  return MANUALLY_EDITABLE_ORDER_STATUSES.includes(
+    status as (typeof MANUALLY_EDITABLE_ORDER_STATUSES)[number]
+  );
+}
+
+export function canRefundOrderStatus(status: number) {
+  return [ORDER_STATUS_PAID, ORDER_STATUS_FINISHED].includes(status);
+}
 
 export default function Order() {
   const { t } = useTranslation("order");
@@ -56,30 +80,46 @@ export default function Order() {
     subscribe_id: sp.subscribe_id || undefined,
   };
 
-  const statusOptions = [
+  const displayStatusOptions = [
     {
-      value: 1,
+      value: ORDER_STATUS_PENDING,
       label: t("status.1", "Pending"),
       className: "bg-orange-500",
     },
-    { value: 2, label: t("status.2", "Paid"), className: "bg-green-500" },
     {
-      value: 3,
-      label: t("status.3", "Cancelled"),
-      className: "bg-gray-500",
-    },
-    { value: 4, label: t("status.4", "Closed"), className: "bg-red-500" },
-    {
-      value: 5,
-      label: t("status.5", "Completed"),
+      value: ORDER_STATUS_PAID,
+      label: t("status.2", "Paid"),
       className: "bg-green-500",
     },
     {
-      value: REFUNDED_ORDER_STATUS,
-      label: t("status.6", "Refunded"),
+      value: ORDER_STATUS_CLOSED,
+      label: t("status.3", "Closed"),
+      className: "bg-gray-500",
+    },
+    {
+      value: ORDER_STATUS_FAILED,
+      label: t("status.4", "Failed"),
+      className: "bg-red-500",
+    },
+    {
+      value: ORDER_STATUS_FINISHED,
+      label: t("status.5", "Finished"),
+      className: "bg-green-500",
+    },
+    {
+      value: ORDER_STATUS_CLAIMED,
+      label: t("status.6", "Claimed"),
+      className: "bg-amber-500",
+    },
+    {
+      value: ORDER_STATUS_REFUNDED,
+      label: t("status.7", "Refunded"),
       className: "bg-red-500",
     },
   ];
+  const editableStatusOptions = displayStatusOptions.filter((option) =>
+    canManuallyUpdateOrderStatus(option.value)
+  );
 
   const typeOptions = [
     { value: 1, label: t("type.1", "New Purchase") },
@@ -95,29 +135,36 @@ export default function Order() {
 
   const refundMutation = useMutation({
     mutationFn: async (order: API.Order) => {
-      await refundOrder({ id: order.id });
+      await refundOrder(
+        { id: order.id },
+        {
+          skipErrorHandler: true,
+        }
+      );
     },
     onSuccess: () => {
       toast.success(t("refundSuccess", "Refund completed."));
       setConfirmingOrderId(null);
       ref.current?.refresh();
     },
-    onError: (error) => {
-      console.error("Refund order failed", error);
+    onError: () => {
+      toast.error(t("refundFailed", "Refund failed. Please try again."));
       setConfirmingOrderId(null);
     },
   });
 
   const isRefundedOrder = (order: API.Order) =>
-    order.status === REFUNDED_ORDER_STATUS ||
-    order.status_name === t("status.6", "Refunded") ||
+    order.status === ORDER_STATUS_REFUNDED ||
+    order.status_name === t("status.7", "Refunded") ||
     order.status_name?.toLowerCase() === "refunded";
 
   const canRefundOrder = (order: API.Order) =>
-    canRefundOrders && !isRefundedOrder(order);
+    canRefundOrders &&
+    canRefundOrderStatus(order.status) &&
+    !isRefundedOrder(order);
 
   return (
-    <ProTable<API.Order, any>
+    <ProTable<API.Order, Record<string, unknown>>
       action={ref}
       actions={{
         render: (order) => {
@@ -173,7 +220,11 @@ export default function Order() {
                     onClick={async (event) => {
                       event.preventDefault();
                       if (isPending) return;
-                      await refundMutation.mutateAsync(order);
+                      try {
+                        await refundMutation.mutateAsync(order);
+                      } catch {
+                        // Errors are surfaced through the mutation onError handler.
+                      }
                     }}
                   >
                     {isPending
@@ -335,26 +386,55 @@ export default function Order() {
           header: t("status.0", "Status"),
           cell: ({ row }) => {
             const order = row.original as API.Order;
-            const option = statusOptions.find(
+            const option = displayStatusOptions.find(
               (opt) => opt.value === order.status
             );
-            if ([1, 3, 4].includes(row.getValue("status"))) {
+            if (
+              [ORDER_STATUS_PENDING, ORDER_STATUS_CLOSED, ORDER_STATUS_FAILED]
+                .map(String)
+                .includes(String(row.getValue("status")))
+            ) {
               return (
                 <div className="flex items-center gap-1">
                   <Combobox<number, false>
                     className={cn(option?.className)}
                     onChange={async (value) => {
-                      await updateOrderStatus({
-                        id: order.id,
-                        status: value,
-                      });
-                      ref.current?.refresh();
+                      if (!canManuallyUpdateOrderStatus(value)) {
+                        toast.error(
+                          t(
+                            "statusClaimedBlocked",
+                            "Claimed and refunded states must use the dedicated processing flow."
+                          )
+                        );
+                        return;
+                      }
+                      try {
+                        await updateOrderStatus(
+                          {
+                            id: order.id,
+                            status: value,
+                          },
+                          {
+                            skipErrorHandler: true,
+                          }
+                        );
+                        ref.current?.refresh();
+                      } catch {
+                        toast.error(
+                          t(
+                            "statusUpdateFailed",
+                            "Status update failed. Please try again."
+                          )
+                        );
+                      }
                     }}
-                    options={statusOptions}
+                    options={editableStatusOptions}
                     placeholder={t("status.0", "Status")}
                     value={order.status}
                   />
-                  {[1, 3].includes(order.status) && (
+                  {[ORDER_STATUS_PENDING, ORDER_STATUS_CLOSED].includes(
+                    order.status
+                  ) && (
                     <Button
                       onClick={async () => {
                         await activateOrder({ order_no: order.order_no });
@@ -387,7 +467,7 @@ export default function Order() {
         {
           key: "status",
           placeholder: t("status.0", "Status"),
-          options: statusOptions.map((item) => ({
+          options: displayStatusOptions.map((item) => ({
             label: item.label,
             value: String(item.value),
           })),

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

@@ -46,7 +46,7 @@ type RuleFilters = {
 };
 
 type PriceFilters = {
-  rule_id?: string;
+  promo_rule_id?: string;
   subscribe_id?: string;
 };
 
@@ -301,12 +301,13 @@ export default function PromoPage() {
             }}
             columns={[
               {
-                accessorKey: "rule_id",
+                accessorKey: "promo_rule_id",
                 header: t("rule", "Rule"),
                 cell: ({ row }) =>
-                  row.original.rule_id
-                    ? rules.find((rule) => rule.id === row.original.rule_id)
-                        ?.name || `#${row.original.rule_id}`
+                  row.original.promo_rule_id
+                    ? rules.find(
+                        (rule) => rule.id === row.original.promo_rule_id
+                      )?.name || `#${row.original.promo_rule_id}`
                     : "--",
               },
               {
@@ -316,6 +317,11 @@ export default function PromoPage() {
                   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"),
@@ -361,7 +367,7 @@ export default function PromoPage() {
             }}
             params={[
               {
-                key: "rule_id",
+                key: "promo_rule_id",
                 placeholder: t("rule", "Rule"),
                 options: rules.map((rule) => ({
                   label: rule.name,
@@ -382,7 +388,7 @@ export default function PromoPage() {
             request={async (pagination, filters) => {
               const { data } = await getPromoPriceList({
                 ...pagination,
-                rule_id: parseOptionalNumber(filters.rule_id),
+                promo_rule_id: parseOptionalNumber(filters.promo_rule_id),
                 subscribe_id: parseOptionalNumber(filters.subscribe_id),
               });
               return {
@@ -398,13 +404,13 @@ export default function PromoPage() {
             action={usageRef}
             columns={[
               {
-                accessorKey: "rule_id",
+                accessorKey: "promo_rule_id",
                 header: t("rule", "Rule"),
                 cell: ({ row }) =>
                   row.original.rule_name ||
-                  rules.find((rule) => rule.id === row.original.rule_id)
+                  rules.find((rule) => rule.id === row.original.promo_rule_id)
                     ?.name ||
-                  `#${row.original.rule_id}`,
+                  `#${row.original.promo_rule_id}`,
               },
               {
                 accessorKey: "user_id",
@@ -418,6 +424,11 @@ export default function PromoPage() {
                   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."),
@@ -447,7 +458,7 @@ export default function PromoPage() {
             }
             params={[
               {
-                key: "rule_id",
+                key: "promo_rule_id",
                 placeholder: t("rule", "Rule"),
                 options: rules.map((rule) => ({
                   label: rule.name,
@@ -470,7 +481,7 @@ export default function PromoPage() {
             request={async (pagination, filters) => {
               const { data } = await getPromoUsageList({
                 ...pagination,
-                rule_id: parseOptionalNumber(filters.rule_id),
+                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,

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

@@ -23,11 +23,16 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
-import { getSubscribeUnitPrice } from "./utils";
+import {
+  formatCurrency,
+  getSubscribeDiscounts,
+  getSubscribeUnitPrice,
+} from "./utils";
 
 const priceSchema = z.object({
-  rule_id: z.number().min(1),
+  promo_rule_id: z.number().min(1),
   subscribe_id: z.number().min(1),
+  quantity: z.number().min(1),
   promo_price: z.number().min(1),
 });
 
@@ -51,26 +56,42 @@ export default function PriceForm({
   const form = useForm<PriceFormValues>({
     resolver: zodResolver(priceSchema),
     defaultValues: {
-      rule_id: 0,
+      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) {
-    if (unitPrice > 0 && values.promo_price >= unitPrice) {
+    const maxPrice = unitPrice * values.quantity;
+    if (maxPrice > 0 && values.promo_price >= maxPrice) {
       form.setError("promo_price", {
         message: t(
-          "form.promoPriceLessThanUnitPrice",
-          "Promo price must be lower than unit price"
+          "form.promoPriceLessThanOriginalPrice",
+          "Promo price must be lower than original price"
         ),
       });
       return;
     }
-    const success = await onSubmit(values);
+    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);
   }
 
@@ -79,7 +100,12 @@ export default function PriceForm({
       <SheetTrigger asChild>
         <Button
           onClick={() => {
-            form.reset({ rule_id: 0, subscribe_id: 0, promo_price: 0 });
+            form.reset({
+              promo_rule_id: 0,
+              subscribe_id: 0,
+              quantity: 0,
+              promo_price: 0,
+            });
             setOpen(true);
           }}
           size="sm"
@@ -99,7 +125,7 @@ export default function PriceForm({
           >
             <FormField
               control={form.control}
-              name="rule_id"
+              name="promo_rule_id"
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>{t("rule", "Rule")}</FormLabel>
@@ -126,7 +152,14 @@ export default function PriceForm({
                   <FormLabel>{t("subscribe", "Subscribe")}</FormLabel>
                   <FormControl>
                     <Combobox<number>
-                      onChange={field.onChange}
+                      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) => ({
@@ -144,6 +177,41 @@ export default function PriceForm({
                 </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"
@@ -165,10 +233,10 @@ export default function PriceForm({
                       value={field.value}
                     />
                   </FormControl>
-                  {unitPrice > 0 && (
+                  {originalPrice > 0 && (
                     <p className="text-muted-foreground text-xs">
-                      {t("unitPriceHint", "Unit price")}:{" "}
-                      {unitConversion("centsToDollars", unitPrice)}
+                      {t("originalPriceHint", "Original price")}:{" "}
+                      {formatCurrency(originalPrice)}
                     </p>
                   )}
                   <FormMessage />
@@ -178,7 +246,11 @@ export default function PriceForm({
           </form>
         </Form>
         <SheetFooter>
-          <Button disabled={loading} form="promo-price-form" type="submit">
+          <Button
+            disabled={loading || (hasSelectedSubscribe && !hasDiscounts)}
+            form="promo-price-form"
+            type="submit"
+          >
             {t("confirm", "Confirm")}
           </Button>
         </SheetFooter>

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

@@ -20,3 +20,9 @@ export function parseOptionalNumber(value?: string) {
 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

@@ -9,6 +9,7 @@
     "originalPrice": "Original Price (Monthly)",
     "price": "Price",
     "productDiscount": "Product Discount",
+    "promoDiscount": "Promo Discount",
     "total": "Total"
   },
   "buy": "Buy",
@@ -37,6 +38,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

@@ -9,6 +9,7 @@
     "originalPrice": "原价（按月）",
     "price": "价格",
     "productDiscount": "商品折扣",
+    "promoDiscount": "促销优惠",
     "total": "总价"
   },
   "buy": "购买",
@@ -37,6 +38,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/billing.tsx

@@ -10,6 +10,7 @@ interface SubscribeBillingProps {
       unit_price: number;
       unit_time: string;
       subscribe_discount: number;
+      promo_discount: number;
       show_original_price?: boolean;
     }
   >;
@@ -66,6 +67,14 @@ export function SubscribeBilling({ order }: Readonly<SubscribeBillingProps>) {
             <Display type="currency" value={order?.discount} />
           </span>
         </li>
+        <li>
+          <span className="text-muted-foreground">
+            {t("billing.promoDiscount", "Promo Discount")}
+          </span>
+          <span>
+            <Display type="currency" value={order?.promo_discount} />
+          </span>
+        </li>
         <li>
           <span className="text-muted-foreground">
             {t("billing.couponDiscount", "Coupon Discount")}

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.expires_at && (
+          <span className="text-muted-foreground text-xs">
+            {t("promo.validUntil", "Valid until")}:{" "}
+            {new Date(promo.expires_at * 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/typings.d.ts

@@ -307,27 +307,34 @@ declare namespace API {
 
   type PromoPrice = {
     id: number;
-    rule_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 CreatePromoPriceRequest = {
-    rule_id: number;
+  type CreatePromoPriceItem = {
     subscribe_id: number;
+    quantity: number;
     promo_price: number;
   };
 
+  type CreatePromoPriceRequest = {
+    promo_rule_id: number;
+    items: CreatePromoPriceItem[];
+  };
+
   type PromoUsage = {
     id: number;
-    rule_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;
@@ -1020,7 +1027,7 @@ declare namespace API {
   type GetPromoPriceListParams = {
     page: number;
     size: number;
-    rule_id?: number;
+    promo_rule_id?: number;
     subscribe_id?: number;
   };
 
@@ -1036,7 +1043,7 @@ declare namespace API {
   type GetPromoUsageListParams = {
     page: number;
     size: number;
-    rule_id?: number;
+    promo_rule_id?: number;
     subscribe_id?: number;
     user_id?: number;
     order_no?: string;
@@ -2219,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

@@ -548,6 +548,7 @@ declare namespace API {
     price: number;
     amount: number;
     discount: number;
+    promo_discount: number;
     gift_amount: number;
     coupon: string;
     coupon_discount: number;
@@ -1019,6 +1020,14 @@ declare namespace API {
     quantity: number;
     discount: number;
     map_apple?: string;
+    promo?: SubscribeDiscountPromo;
+  };
+
+  type SubscribeDiscountPromo = {
+    rule_name?: string;
+    rule_type?: string;
+    promo_price: number;
+    expires_at?: number;
   };
 
   type SubscribeGroup = {