Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 7505d37af6 | |||
| f9c3b18249 | |||
| 1834b97fe2 | |||
| 23f51a1ef4 |
@@ -29,5 +29,6 @@
|
||||
"users": "Users",
|
||||
"userTitle": "User Statistics",
|
||||
"userTraffic": "User Traffic",
|
||||
"withdrawalManagement": "Withdrawal Management",
|
||||
"yesterday": "Yesterday"
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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": "昨日"
|
||||
}
|
||||
|
||||
@@ -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": "促销规则",
|
||||
|
||||
@@ -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": "查看所有者",
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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">
|
||||
|
||||
+20
-6
@@ -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 = {
|
||||
|
||||
@@ -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
@@ -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 = {
|
||||
|
||||
Reference in New Issue
Block a user