Compare commits

...

6 Commits

Author SHA1 Message Date
shanshanzhong147 511ce4ff65 Merge branch 'internal' into main
PR Check / Lint, Check, Test and Build (push) Has been cancelled
Build and Release / Build (push) Has been cancelled
2026-06-23 08:49:48 -07:00
shanshanzhong147 64fe23f877 fix: show user subscription speed override
PR Check / Lint, Check, Test and Build (push) Has been cancelled
Build and Release / Build (push) Has been cancelled
2026-06-11 02:39:16 -07:00
shanshanzhong147 09c5216f60 修复(#14): 调整 USDT 提现方式枚举口径
PR Check / Lint, Check, Test and Build (push) Has been cancelled
Build and Release / Build (push) Has been cancelled
2026-06-09 06:37:15 -07:00
shanshanzhong147 4d84095af2 修复(#14): 支持 USDT 提现方式展示 2026-06-09 06:37:14 -07:00
shanshanzhong147 d66b664198 修复(#122): 补齐促销价档位提交
PR Check / Lint, Check, Test and Build (push) Has been cancelled
Build and Release / Build (push) Has been cancelled
2026-05-29 02:36:30 -07:00
shanshanzhong147 a7d89acc7f 新功能(#113): 发布促销管理后台页面到main
PR Check / Lint, Check, Test and Build (push) Has been cancelled
Build and Release / Build (push) Has been cancelled
2026-05-29 00:40:33 -07:00
42 changed files with 2639 additions and 204 deletions
@@ -29,5 +29,6 @@
"users": "Users",
"userTitle": "User Statistics",
"userTraffic": "User Traffic",
"withdrawalManagement": "Withdrawal Management",
"yesterday": "Yesterday"
}
@@ -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",
@@ -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"
}
@@ -100,10 +100,12 @@
"manager": "Administrator",
"memberCount": "Member Count",
"more": "More",
"neverLoggedIn": "Never logged in",
"normal": "Normal",
"next": "Next",
"noInvitedUsers": "No invited users yet",
"notifySettingsTitle": "Notify Settings",
"inactive": "Inactive",
"offline": "Offline",
"online": "Online",
"onlineDevices": "Online Devices",
@@ -189,6 +191,7 @@
"groupUpdated": "Group updated successfully",
"upload": "Upload",
"uploadTraffic": "Upload Traffic",
"userStatus": "User Status",
"userAgent": "User Agent",
"userEmail": "Email",
"userEmailPlaceholder": "Enter email",
@@ -198,6 +201,7 @@
"userName": "Username",
"userProfile": "User Profile",
"userGroup": "User Group",
"active": "Active",
"verified": "Verified",
"viewDeviceGroup": "View Device Group",
"viewOwner": "View Owner",
@@ -29,5 +29,6 @@
"users": "用户",
"userTitle": "用户统计",
"userTraffic": "用户流量",
"withdrawalManagement": "提现管理",
"yesterday": "昨日"
}
@@ -21,6 +21,7 @@
"Order Management": "订单管理",
"Payment Config": "支付配置",
"Product Management": "商品管理",
"Promo Management": "促销管理",
"Redemption Management": "兑换码管理",
"Register": "注册",
"Reset Subscribe": "重置订阅",
@@ -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": "是"
}
@@ -101,10 +101,12 @@
"manager": "管理员",
"memberCount": "成员数量",
"more": "更多",
"neverLoggedIn": "从未登录",
"normal": "正常",
"next": "下一页",
"noInvitedUsers": "暂无邀请用户",
"notifySettingsTitle": "通知设置",
"inactive": "未活跃",
"offline": "离线",
"online": "在线",
"onlineDevices": "在线设备",
@@ -190,6 +192,7 @@
"groupUpdated": "分组更新成功",
"upload": "上传",
"uploadTraffic": "上传流量",
"userStatus": "用户状态",
"userAgent": "用户代理",
"userEmail": "邮箱",
"userEmailPlaceholder": "输入邮箱",
@@ -199,6 +202,7 @@
"userName": "用户名",
"userProfile": "用户资料",
"userGroup": "用户分组",
"active": "活跃",
"verified": "已验证",
"viewDeviceGroup": "查看设备组",
"viewOwner": "查看所有者",
+5
View File
@@ -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",
},
],
},
+1
View File
@@ -42,6 +42,7 @@ initializeI18n({
"nodes",
"order",
"payment",
"promo",
"product",
"servers",
"subscribe",
+24
View File
@@ -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,
@@ -0,0 +1,6 @@
import { createLazyFileRoute } from "@tanstack/react-router";
import PromoPage from "@/sections/promo";
export const Route = createLazyFileRoute("/dashboard/promo/")({
component: PromoPage,
});
@@ -241,11 +241,11 @@ export default function Statistics() {
iconBg: "bg-green-100 dark:bg-green-900/30",
},
{
title: t("pendingTickets", "Pending Tickets"),
title: t("withdrawalManagement", "提现管理"),
value: TicketTotal || 0,
subtitle: t("pending", "Pending"),
icon: "uil:clipboard-notes",
href: "/dashboard/ticket",
href: "/dashboard/withdrawal",
color: "text-red-600 dark:text-red-400",
iconBg: "bg-red-100 dark:bg-red-900/30",
},
@@ -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();
});
});
+504
View File
@@ -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}
/>
</>
);
}
@@ -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();
});
});
@@ -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>
);
}
@@ -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>
);
}
+353
View File
@@ -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>
);
}
+28
View File
@@ -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
);
}
+124 -159
View File
@@ -1,34 +1,25 @@
import { useQuery } from "@tanstack/react-query";
import { Link, useSearch } from "@tanstack/react-router";
import { Badge } from "@workspace/ui/components/badge";
import { Button } from "@workspace/ui/components/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@workspace/ui/components/dialog";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@workspace/ui/components/dropdown-menu";
import { Input } from "@workspace/ui/components/input";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@workspace/ui/components/popover";
import { ScrollArea } from "@workspace/ui/components/scroll-area";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@workspace/ui/components/select";
import {
Sheet,
SheetContent,
@@ -43,7 +34,12 @@ import {
TabsList,
TabsTrigger,
} from "@workspace/ui/components/tabs";
import { Combobox } from "@workspace/ui/composed/combobox";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@workspace/ui/components/tooltip";
// import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
import {
ProTable,
@@ -60,9 +56,8 @@ import {
getUserList,
updateUserBasicInfo,
} from "@workspace/ui/services/admin/user";
import { parseDeviceType } from "@workspace/ui/utils/device";
import { FilePenLine } from "lucide-react";
import { useCallback, useRef, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import { Display } from "@/components/display";
@@ -73,18 +68,16 @@ import { RemarkForm } from "./remark-form";
import { buildUserBasicInfoPayload } from "./user-basic-info-payload";
import { UserDetail } from "./user-detail";
import UserForm from "./user-form";
import { UserIdentifier } from "./user-identifier";
import { UserInviteStatsSheet } from "./user-invite-stats-sheet";
import { AuthMethodsForm } from "./user-profile/auth-methods-form";
import { BasicInfoForm } from "./user-profile/basic-info-form";
import { NotifySettingsForm } from "./user-profile/notify-settings-form";
import { UserSearchBar } from "./user-search-bar";
import UserSubscription from "./user-subscription";
// import EditUserGroupDialog from "./edit-user-group-dialog";
type UserDeviceWithDeviceNo = API.UserDevice & {
device_no?: string;
};
export default function User() {
const { t } = useTranslation("user");
const [loading, setLoading] = useState(false);
@@ -98,6 +91,14 @@ export default function User() {
value: sp.search || sp.user_id || "",
});
useEffect(() => {
searchRef.current = {
type: sp.user_id ? "user_id" : "email",
value: sp.search || sp.user_id || "",
};
ref.current?.refresh();
}, [sp.search, sp.user_id]);
const handleSearch = useCallback((type: string, value: string) => {
searchRef.current = { type, value };
ref.current?.refresh();
@@ -151,7 +152,6 @@ export default function User() {
onChanged={() => ref.current?.refresh()}
userId={row.id}
/>,
<PreviewNodesDialog key="preview-nodes" userId={row.id} />,
/* <ConfirmButton
cancelText={t("cancel", "Cancel")}
confirmText={t("confirm", "Confirm")}
@@ -176,6 +176,8 @@ export default function User() {
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<InviteStatsMenuItem userId={row.id} />
<PreviewNodesMenuItem userId={row.id} />
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link search={{ user_id: row.id }} to="/dashboard/order">
{t("orderList", "Order List")}
@@ -262,62 +264,43 @@ export default function User() {
id: "auth_methods",
accessorKey: "auth_methods",
header: "设备码/邮箱",
cell: ({ row }) => {
const method = row.original.auth_methods?.[0];
const identifier = method?.auth_identifier || "";
const isDevice = method?.auth_type === "device";
const firstDevice = row.original.user_devices?.[0] as
| UserDeviceWithDeviceNo
| undefined;
const deviceNo = firstDevice?.device_no;
const deviceType = parseDeviceType(firstDevice?.user_agent || "");
const display = isDevice ? deviceNo || identifier : identifier;
return (
<div className="flex items-center">
{/* <Badge
className="mr-1 uppercase"
title={method?.verified ? t("verified", "Verified") : ""}
>
{method?.auth_type}
</Badge>*/}
{deviceType && (
<Badge className="mr-1" variant="secondary">
{deviceType}
</Badge>
)}
<span title={isDevice ? display : undefined}>{display}</span>
<Popover>
<PopoverTrigger>
<div className={"flex items-center"}>
{row.original?.remark ? `${row.original.remark}` : ""}
<FilePenLine className={"ml-2 text-primary"} size={14} />
</div>
</PopoverTrigger>
<PopoverContent className={"w-64"}>
<RemarkForm
initialRemark={row.original.remark}
onSave={async (remark) => {
const { data } = await getUserDetail({
id: row.original.id,
});
const user = data.data;
cell: ({ row }) => (
<div className="flex items-center">
<UserIdentifier
className="flex items-center"
user={row.original}
/>
<Popover>
<PopoverTrigger>
<div className={"flex items-center"}>
{row.original?.remark ? `${row.original.remark}` : ""}
<FilePenLine className={"ml-2 text-primary"} size={14} />
</div>
</PopoverTrigger>
<PopoverContent className={"w-64"}>
<RemarkForm
initialRemark={row.original.remark}
onSave={async (remark) => {
const { data } = await getUserDetail({
id: row.original.id,
});
const user = data.data;
if (!user) {
throw new Error("User detail not found");
}
if (!user) {
throw new Error("User detail not found");
}
await updateUserBasicInfo(
buildUserBasicInfoPayload(user, remark)
);
toast.success(t("updateSuccess"));
ref.current?.refresh();
}}
/>
</PopoverContent>
</Popover>
</div>
);
},
await updateUserBasicInfo(
buildUserBasicInfoPayload(user, remark)
);
toast.success(t("updateSuccess"));
ref.current?.refresh();
}}
/>
</PopoverContent>
</Popover>
</div>
),
},
/* {
id: "balance",
@@ -355,6 +338,48 @@ export default function User() {
header: t("referer", "Referer"),
cell: ({ row }) => <UserDetail id={row.original.referer_id} />,
},
{
id: "last_login_time",
accessorKey: "last_login_time",
header: t("userStatus", "用户状态"),
cell: ({ row }) => {
const lastLoginTime = (
row.original as API.User & {
last_login_time?: number;
}
).last_login_time;
const isOnline = Boolean(lastLoginTime);
const dotClassName = isOnline ? "bg-green-500" : "bg-gray-400";
const statusLabel = isOnline
? t("active", "Active")
: t("inactive", "Inactive");
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="inline-flex items-center gap-2">
<span
aria-hidden="true"
className={`h-2.5 w-2.5 rounded-full ${dotClassName}`}
/>
<span className="sr-only">
{isOnline
? `${statusLabel}: ${formatDate(lastLoginTime)}`
: statusLabel}
</span>
</div>
</TooltipTrigger>
<TooltipContent>
{isOnline
? formatDate(lastLoginTime)
: t("neverLoggedIn", "Never logged in")}
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
},
},
{
id: "created_at",
accessorKey: "created_at",
@@ -523,6 +548,25 @@ function InviteStatsMenuItem({ userId }: { userId: number }) {
);
}
function PreviewNodesMenuItem({ userId }: { userId: number }) {
const { t } = useTranslation("user");
const [open, setOpen] = useState(false);
return (
<>
<DropdownMenuItem
onSelect={(e) => {
e.preventDefault();
setOpen(true);
}}
>
{t("previewNodes", "Preview Nodes")}
</DropdownMenuItem>
<PreviewNodesDialog onOpenChange={setOpen} open={open} userId={userId} />
</>
);
}
function DeviceGroupSheet({
userId,
onChanged,
@@ -551,92 +595,16 @@ function DeviceGroupSheet({
);
}
function UserSearchBar({
initialType,
initialValue,
onSearch,
subscribes,
function PreviewNodesDialog({
userId,
open,
onOpenChange,
}: {
initialType: string;
initialValue: string;
onSearch: (type: string, value: string) => void;
subscribes?: API.SubscribeItem[];
userId: number;
open: boolean;
onOpenChange: (open: boolean) => void;
}) {
const { t } = useTranslation("user");
const [searchType, setSearchType] = useState(initialType);
const [searchValue, setSearchValue] = useState(initialValue);
return (
<div className="flex items-center gap-2">
<Select
onValueChange={(v) => {
setSearchType(v);
setSearchValue("");
}}
value={searchType}
>
<SelectTrigger className="w-48">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="email">/</SelectItem>
<SelectItem value="user_id">{t("userId", "User ID")}</SelectItem>
<SelectItem value="subscribe_id">
{t("subscription", "Subscription")}
</SelectItem>
</SelectContent>
</Select>
{searchType === "subscribe_id" ? (
<Combobox
className="w-48"
onChange={(value) => {
setSearchValue(value);
onSearch("subscribe_id", value);
}}
options={subscribes?.map((item) => ({
label: item.name!,
value: String(item.id!),
}))}
placeholder={t("subscription", "Subscription")}
value={searchValue}
/>
) : (
<>
<Input
className="w-48"
onChange={(e) => setSearchValue(e.target.value)}
onKeyDown={(e) =>
e.key === "Enter" && onSearch(searchType, searchValue)
}
placeholder={t("searchInputPlaceholder", "Enter search term")}
value={searchValue}
/>
<Button
onClick={() => onSearch(searchType, searchValue)}
variant="default"
>
{t("search", "Search")}
</Button>
{searchValue && (
<Button
onClick={() => {
setSearchValue("");
onSearch(searchType, "");
}}
variant="outline"
>
{t("resetSearch", "Reset")}
</Button>
)}
</>
)}
</div>
);
}
function PreviewNodesDialog({ userId }: { userId: number }) {
const { t } = useTranslation("user");
const [open, setOpen] = useState(false);
const { data: previewData, isLoading } = useQuery({
enabled: open,
queryKey: ["previewUserNodes", userId],
@@ -647,10 +615,7 @@ function PreviewNodesDialog({ userId }: { userId: number }) {
});
return (
<Dialog onOpenChange={setOpen} open={open}>
<DialogTrigger asChild>
<Button variant="outline">{t("previewNodes", "Preview Nodes")}</Button>
</DialogTrigger>
<Dialog onOpenChange={onOpenChange} open={open}>
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle>
+2 -14
View File
@@ -16,6 +16,7 @@ import { formatBytes } from "@workspace/ui/utils/formatting";
import { useTranslation } from "react-i18next";
import { Display } from "@/components/display";
import { formatDate } from "@/utils/common";
import { UserIdentifier } from "./user-identifier";
// import EditUserGroupDialog from "./edit-user-group-dialog";
// import { getUserGroupList } from "@workspace/ui/services/admin/group";
@@ -229,26 +230,13 @@ export function UserDetail({ id }: { id: number }) {
if (!id) return "--";
const firstMethod = data?.auth_methods[0];
const isDevice = firstMethod?.auth_type === "device";
const deviceNo = (data as any)?.user_devices?.[0]?.device_no;
const rawIdentifier = firstMethod?.auth_identifier || "";
const identifier = isDevice ? deviceNo || rawIdentifier : rawIdentifier;
return (
<HoverCard>
<HoverCardTrigger asChild>
<Button asChild className="p-0" variant="link">
<Link search={{ user_id: id }} to="/dashboard/user">
{data ? (
<>
{firstMethod && (
<span className="mr-1 inline-flex items-center rounded border px-1 py-0.5 font-mono text-xs uppercase">
{firstMethod.auth_type}
</span>
)}
{identifier}
</>
<UserIdentifier className="flex items-center" user={data} />
) : (
t("loading", "Loading...")
)}
@@ -0,0 +1,101 @@
/**
* @vitest-environment jsdom
*/
import { cleanup, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it } from "vitest";
import { getUserIdentifierParts, UserIdentifier } from "./user-identifier";
afterEach(() => {
cleanup();
});
type DeviceWithOptionalNo = API.UserDevice & { device_no?: string };
describe("getUserIdentifierParts", () => {
it("uses the device number and D label for device-auth users", () => {
expect(
getUserIdentifierParts({
auth_methods: [
{
auth_type: "device",
auth_identifier: "raw-device-id",
verified: true,
},
],
user_devices: [
{
id: 1,
ip: "127.0.0.1",
identifier: "device-id",
user_agent:
"Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)",
online: true,
enabled: true,
created_at: 0,
updated_at: 0,
device_no: "DVC-001",
} satisfies DeviceWithOptionalNo,
],
})
).toMatchObject({
authLabel: "(D)",
identifier: "DVC-001",
isDevice: true,
});
});
it("falls back to the raw identifier and E label for email-auth users", () => {
expect(
getUserIdentifierParts({
auth_methods: [
{
auth_type: "email",
auth_identifier: "user@example.com",
verified: true,
},
],
user_devices: [],
})
).toMatchObject({
authLabel: "(E)",
identifier: "user@example.com",
isDevice: false,
});
});
});
describe("UserIdentifier", () => {
it("renders the compact auth label and visible identifier", () => {
render(
<UserIdentifier
user={{
auth_methods: [
{
auth_type: "email",
auth_identifier: "referrer@example.com",
verified: true,
},
],
user_devices: [],
}}
/>
);
expect(screen.getByText("(E)")).not.toBeNull();
expect(screen.getByText("referrer@example.com")).not.toBeNull();
});
it("renders an empty fallback when no identifier is available", () => {
render(
<UserIdentifier
user={{
auth_methods: [],
user_devices: [],
}}
/>
);
expect(screen.getByText("(E)")).not.toBeNull();
expect(screen.getByText("--")).not.toBeNull();
});
});
@@ -0,0 +1,66 @@
"use client";
import { Badge } from "@workspace/ui/components/badge";
import { parseDeviceType } from "@workspace/ui/utils/device";
type UserDeviceWithDeviceNo = API.UserDevice & {
device_no?: string;
};
type UserIdentifierUser = {
auth_methods?: API.UserAuthMethod[];
user_devices?: UserDeviceWithDeviceNo[];
};
type UserIdentifierParts = {
authLabel: "(D)" | "(E)";
deviceBadge?: string;
identifier: string;
isDevice: boolean;
};
export function getUserIdentifierParts(
user?: UserIdentifierUser
): UserIdentifierParts {
const method = user?.auth_methods?.[0];
const firstDevice = user?.user_devices?.[0] as
| UserDeviceWithDeviceNo
| undefined;
const isDevice = method?.auth_type === "device";
const rawIdentifier = method?.auth_identifier || "";
const identifier = isDevice
? firstDevice?.device_no || rawIdentifier
: rawIdentifier;
return {
authLabel: isDevice ? "(D)" : "(E)",
deviceBadge: parseDeviceType(firstDevice?.user_agent || ""),
identifier,
isDevice,
};
}
export function UserIdentifier({
className,
user,
}: {
className?: string;
user?: UserIdentifierUser;
}) {
const { authLabel, deviceBadge, identifier, isDevice } =
getUserIdentifierParts(user);
return (
<div className={className}>
{deviceBadge ? (
<Badge className="mr-1" variant="secondary">
{deviceBadge}
</Badge>
) : null}
<span className="mr-1 font-mono text-xs uppercase">{authLabel}</span>
<span title={isDevice ? identifier : undefined}>
{identifier || "--"}
</span>
</div>
);
}
@@ -0,0 +1,92 @@
/**
* @vitest-environment jsdom
*/
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { UserSearchBar } from "./user-search-bar";
vi.mock("react-i18next", () => ({
useTranslation: () => ({
t: (_key: string, fallback: string): string => fallback,
}),
}));
afterEach(() => {
cleanup();
});
describe("UserSearchBar", () => {
it("keeps the controls usable on a narrow mobile viewport", () => {
Object.defineProperty(window, "innerWidth", {
configurable: true,
value: 390,
});
render(
<UserSearchBar
initialType="email"
initialValue=""
onSearch={vi.fn()}
subscribes={[]}
/>
);
expect(screen.getByRole("combobox")).not.toBeNull();
expect(screen.getByRole("button", { name: "Search" })).not.toBeNull();
});
it("keeps the typed happy-path value and triggers search", () => {
const onSearch = vi.fn();
render(
<UserSearchBar
initialType="email"
initialValue=""
onSearch={onSearch}
subscribes={[]}
/>
);
fireEvent.change(screen.getByPlaceholderText("Enter search term"), {
target: { value: "user@example.com" },
});
fireEvent.click(screen.getByRole("button", { name: "Search" }));
expect(onSearch).toHaveBeenCalledWith("email", "user@example.com");
expect(
(screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
.value
).toBe("user@example.com");
});
it("syncs to external search changes for precise referrer navigation", () => {
const onSearch = vi.fn();
const { rerender } = render(
<UserSearchBar
initialType="email"
initialValue="old@example.com"
onSearch={onSearch}
subscribes={[]}
/>
);
expect(
(screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
.value
).toBe("old@example.com");
rerender(
<UserSearchBar
initialType="user_id"
initialValue="1024"
onSearch={onSearch}
subscribes={[]}
/>
);
expect(
(screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
.value
).toBe("1024");
});
});
@@ -0,0 +1,102 @@
"use client";
import { Button } from "@workspace/ui/components/button";
import { Input } from "@workspace/ui/components/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@workspace/ui/components/select";
import { Combobox } from "@workspace/ui/composed/combobox";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
export function UserSearchBar({
initialType,
initialValue,
onSearch,
subscribes,
}: {
initialType: string;
initialValue: string;
onSearch: (type: string, value: string) => void;
subscribes?: API.SubscribeItem[];
}) {
const { t } = useTranslation("user");
const [searchType, setSearchType] = useState(initialType);
const [searchValue, setSearchValue] = useState(initialValue);
useEffect(() => {
setSearchType(initialType);
setSearchValue(initialValue);
}, [initialType, initialValue]);
return (
<div className="flex items-center gap-2">
<Select
onValueChange={(v) => {
setSearchType(v);
setSearchValue("");
}}
value={searchType}
>
<SelectTrigger className="w-48">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="email">/</SelectItem>
<SelectItem value="user_id">{t("userId", "User ID")}</SelectItem>
<SelectItem value="subscribe_id">
{t("subscription", "Subscription")}
</SelectItem>
</SelectContent>
</Select>
{searchType === "subscribe_id" ? (
<Combobox
className="w-48"
onChange={(value) => {
setSearchValue(value);
onSearch("subscribe_id", value);
}}
options={subscribes?.map((item) => ({
label: item.name!,
value: String(item.id!),
}))}
placeholder={t("subscription", "Subscription")}
value={searchValue}
/>
) : (
<>
<Input
className="w-48"
onChange={(e) => setSearchValue(e.target.value)}
onKeyDown={(e) =>
e.key === "Enter" && onSearch(searchType, searchValue)
}
placeholder={t("searchInputPlaceholder", "Enter search term")}
value={searchValue}
/>
<Button
onClick={() => onSearch(searchType, searchValue)}
variant="default"
>
{t("search", "Search")}
</Button>
{searchValue && (
<Button
onClick={() => {
setSearchValue("");
onSearch(searchType, "");
}}
variant="outline"
>
{t("resetSearch", "Reset")}
</Button>
)}
</>
)}
</div>
);
}
@@ -54,6 +54,10 @@ function toUserSubscribePayload(values: SubscriptionFormValues) {
};
}
function resolvePlanSpeed(row: API.UserSubscribe) {
return row.plan_speed_limit ?? row.subscribe?.speed_limit ?? 0;
}
export default function UserSubscription({ userId }: { userId: number }) {
const { t } = useTranslation("user");
const [loading, setLoading] = useState(false);
@@ -315,10 +319,11 @@ export default function UserSubscription({ userId }: { userId: number }) {
cell: ({ row }) => {
const userSpeed = row.original.speed_limit ?? 0;
const effectiveSpeed = row.original.effective_speed ?? 0;
const planSpeed = row.original.subscribe?.speed_limit ?? 0;
const planSpeed = resolvePlanSpeed(row.original);
const speed = effectiveSpeed || userSpeed || planSpeed;
const source =
userSpeed > 0
const source = row.original.is_throttled
? t("effectiveSpeed", "Effective Speed")
: userSpeed > 0
? t("userOverride", "User Override")
: t("subscriptionDefault", "Subscription Default");
@@ -335,6 +340,16 @@ export default function UserSubscription({ userId }: { userId: number }) {
<span className="text-muted-foreground text-xs">
{source}
</span>
<span className="text-muted-foreground text-xs">
{t("userOverride", "User Override")}:{" "}
<span className="inline-block">
<Display type="trafficSpeed" value={userSpeed} />
</span>{" "}
/ {t("subscriptionDefault", "Subscription Default")}:{" "}
<span className="inline-block">
<Display type="trafficSpeed" value={planSpeed} />
</span>
</span>
</div>
);
},
@@ -87,11 +87,12 @@ function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
if (detail.status !== 1) return null;
const baseSpeed = detail.subscribe?.speed_limit ?? 0;
const baseSpeed =
detail.plan_speed_limit ?? detail.subscribe?.speed_limit ?? 0;
const userSpeed = detail.speed_limit ?? 0;
const effectiveSpeed = detail.effective_speed ?? 0;
const isThrottled = detail.is_throttled;
const rules = detail.traffic_limit || [];
const rules = detail.user_traffic_limit || detail.traffic_limit || [];
const hasLimitConfig =
baseSpeed > 0 || userSpeed > 0 || effectiveSpeed > 0 || rules.length > 0;
@@ -40,6 +40,12 @@ interface Props {
type SubscriptionTrafficLimitRule = API.UserSubscribeTrafficLimitRule;
function getUserTrafficLimitRules(
data?: Pick<API.UserSubscribe, "traffic_limit" | "user_traffic_limit">
) {
return data?.user_traffic_limit || data?.traffic_limit || [];
}
const defaultLimitRule: SubscriptionTrafficLimitRule = {
stat_type: "day",
stat_value: 1,
@@ -98,7 +104,7 @@ export function SubscriptionForm({
traffic: initialData?.traffic || 0,
speed_limit: initialData?.speed_limit || 0,
device_limit: initialData?.device_limit || 0,
traffic_limit: initialData?.traffic_limit || [],
traffic_limit: getUserTrafficLimitRules(initialData),
upload: initialData?.upload || 0,
download: initialData?.download || 0,
expired_at: initialData?.expire_time || 0,
+2 -2
View File
@@ -44,7 +44,7 @@ const WITHDRAWAL_METHOD_MAP: Record<number, string> = {
0: "其他",
1: "支付宝",
2: "微信",
3: "银行卡",
3: "USDT(TRC20)",
};
const rejectSchema = z.object({
@@ -143,7 +143,7 @@ export default function WithdrawalPage() {
const methodOptions = [
{ value: "1", label: "支付宝" },
{ value: "2", label: "微信" },
{ value: "3", label: "银行卡" },
{ value: "3", label: "USDT(TRC20)" },
{ value: "0", label: "其他" },
];
@@ -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",
@@ -9,6 +9,7 @@
"originalPrice": "原价(按月)",
"price": "价格",
"productDiscount": "商品折扣",
"promoDiscount": "促销优惠",
"total": "总价"
},
"buy": "购买",
@@ -37,6 +38,10 @@
"passwordHint": "如果您不输入密码,我们将自动生成一个并发送到您的邮箱。",
"paymentMethod": "支付方式",
"productDescription": "商品描述",
"promo": {
"available": "促销可用",
"validUntil": "有效期至"
},
"purchaseDuration": "购买时长",
"recharge": "充值",
"rechargeAmount": "充值金额",
@@ -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>
@@ -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")}
@@ -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>
);
}
@@ -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">
+23 -19
View File
@@ -63,7 +63,7 @@ import { useGlobalStore } from "@/stores/global";
const WITHDRAWAL_METHODS = [
{ value: 1, label: "支付宝" },
{ value: 2, label: "微信" },
{ value: 3, label: "银行卡" },
{ value: 3, label: "USDT(TRC20)" },
{ value: 0, label: "其他" },
] as const;
@@ -111,13 +111,21 @@ function QrCodeView({ url }: { url: string }) {
<img
alt="收款码"
className="h-16 w-16 cursor-zoom-in object-cover"
height={64}
src={url}
width={64}
/>
</button>
{zoomOpen && (
<Dialog onOpenChange={setZoomOpen} open={zoomOpen}>
<DialogContent className="max-w-sm">
<img alt="收款码" className="w-full" src={url} />
<img
alt="收款码"
className="w-full"
height={320}
src={url}
width={320}
/>
</DialogContent>
</Dialog>
)}
@@ -153,18 +161,16 @@ const withdrawalFormSchema = z
if (!data.account) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "银行卡收款账号为必填",
path: ["account"],
});
}
} else if (data.method === 0) {
if (!data.account && !data.content) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "收款账号和备注至少填一项",
message: "USDT(TRC20) 地址为必填",
path: ["account"],
});
}
} else if (data.method === 0 && !(data.account || data.content)) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "收款账号和备注至少填一项",
path: ["account"],
});
}
});
@@ -421,9 +427,7 @@ export default function Affiliate() {
<FormItem>
<FormLabel>
<span className="ml-1 text-destructive">
*
</span>
<span className="ml-1 text-destructive">*</span>
</FormLabel>
{watchedQrCodeUrl ? (
<div className="relative inline-block">
@@ -446,7 +450,9 @@ export default function Affiliate() {
returnType="file"
>
<div className="flex h-24 w-24 flex-col items-center justify-center rounded border-2 border-dashed text-muted-foreground text-xs">
{qrUploading ? "上传中..." : "点击上传\n收款码"}
{qrUploading
? "上传中..."
: "点击上传\n收款码"}
</div>
</UploadImage>
)}
@@ -474,7 +480,7 @@ export default function Affiliate() {
<Input
placeholder={
watchedMethod === 3
? "请输入银行卡号或账户信息"
? "请输入 USDT(TRC20) 收款地址"
: "请输入收款账号(与备注至少填一项)"
}
{...field}
@@ -519,9 +525,7 @@ export default function Affiliate() {
</Button>
<Button
disabled={
submitting ||
qrUploading ||
availableCommission <= 0
submitting || qrUploading || availableCommission <= 0
}
form="withdrawal-form"
type="submit"
+2
View File
@@ -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,
+150
View File
@@ -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 || {}),
}
);
}
+136
View File
@@ -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 = {
@@ -2532,11 +2664,13 @@ declare namespace API {
download: number;
upload: number;
speed_limit?: number;
plan_speed_limit?: number;
device_limit?: number;
effective_speed?: number;
is_throttled?: boolean;
throttle_rule?: string;
traffic_limit?: UserSubscribeTrafficLimitRule[];
user_traffic_limit?: UserSubscribeTrafficLimitRule[];
token: string;
status: number;
short: string;
@@ -2567,8 +2701,10 @@ declare namespace API {
download: number;
upload: number;
speed_limit?: number;
plan_speed_limit?: number;
device_limit?: number;
traffic_limit?: UserSubscribeTrafficLimitRule[];
user_traffic_limit?: UserSubscribeTrafficLimitRule[];
token: string;
status: number;
effective_speed: number;
+7
View File
@@ -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 = {
+9
View File
@@ -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 = {