Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a42ce53abe | |||
| 1834b97fe2 | |||
| 23f51a1ef4 | |||
| c46944aae1 |
@@ -29,6 +29,5 @@
|
||||
"users": "Users",
|
||||
"userTitle": "User Statistics",
|
||||
"userTraffic": "User Traffic",
|
||||
"withdrawalManagement": "Withdrawal Management",
|
||||
"yesterday": "Yesterday"
|
||||
}
|
||||
|
||||
@@ -16,10 +16,11 @@
|
||||
"0": "Status",
|
||||
"1": "Pending",
|
||||
"2": "Paid",
|
||||
"3": "Cancelled",
|
||||
"4": "Closed",
|
||||
"5": "Completed",
|
||||
"6": "Refunded"
|
||||
"3": "Closed",
|
||||
"4": "Failed",
|
||||
"5": "Finished",
|
||||
"6": "Claimed",
|
||||
"7": "Refunded"
|
||||
},
|
||||
"subscribe": "Subscribe",
|
||||
"subscribePrice": "Subscription Price",
|
||||
@@ -33,5 +34,8 @@
|
||||
"4": "Recharge"
|
||||
},
|
||||
"updateTime": "Update Time",
|
||||
"user": "User"
|
||||
"user": "User",
|
||||
"refundFailed": "Refund failed. Please try again.",
|
||||
"statusClaimedBlocked": "Claimed and refunded states must use the dedicated processing flow.",
|
||||
"statusUpdateFailed": "Status update failed. Please try again."
|
||||
}
|
||||
|
||||
@@ -100,12 +100,10 @@
|
||||
"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",
|
||||
@@ -191,7 +189,6 @@
|
||||
"groupUpdated": "Group updated successfully",
|
||||
"upload": "Upload",
|
||||
"uploadTraffic": "Upload Traffic",
|
||||
"userStatus": "User Status",
|
||||
"userAgent": "User Agent",
|
||||
"userEmail": "Email",
|
||||
"userEmailPlaceholder": "Enter email",
|
||||
@@ -201,7 +198,6 @@
|
||||
"userName": "Username",
|
||||
"userProfile": "User Profile",
|
||||
"userGroup": "User Group",
|
||||
"active": "Active",
|
||||
"verified": "Verified",
|
||||
"viewDeviceGroup": "View Device Group",
|
||||
"viewOwner": "View Owner",
|
||||
|
||||
@@ -29,6 +29,5 @@
|
||||
"users": "用户",
|
||||
"userTitle": "用户统计",
|
||||
"userTraffic": "用户流量",
|
||||
"withdrawalManagement": "提现管理",
|
||||
"yesterday": "昨日"
|
||||
}
|
||||
|
||||
@@ -16,10 +16,11 @@
|
||||
"0": "状态",
|
||||
"1": "待支付",
|
||||
"2": "已支付",
|
||||
"3": "已取消",
|
||||
"4": "已关闭",
|
||||
"3": "已关闭",
|
||||
"4": "失败",
|
||||
"5": "已完成",
|
||||
"6": "已退费"
|
||||
"6": "处理中",
|
||||
"7": "已退费"
|
||||
},
|
||||
"subscribe": "订阅",
|
||||
"subscribePrice": "订阅价格",
|
||||
@@ -33,5 +34,8 @@
|
||||
"4": "充值"
|
||||
},
|
||||
"updateTime": "更新时间",
|
||||
"user": "用户"
|
||||
"user": "用户",
|
||||
"refundFailed": "退费失败,请重试。",
|
||||
"statusClaimedBlocked": "处理中和已退费状态必须走专用流程,不能通过通用改状态提交。",
|
||||
"statusUpdateFailed": "状态更新失败,请重试。"
|
||||
}
|
||||
|
||||
@@ -101,12 +101,10 @@
|
||||
"manager": "管理员",
|
||||
"memberCount": "成员数量",
|
||||
"more": "更多",
|
||||
"neverLoggedIn": "从未登录",
|
||||
"normal": "正常",
|
||||
"next": "下一页",
|
||||
"noInvitedUsers": "暂无邀请用户",
|
||||
"notifySettingsTitle": "通知设置",
|
||||
"inactive": "未活跃",
|
||||
"offline": "离线",
|
||||
"online": "在线",
|
||||
"onlineDevices": "在线设备",
|
||||
@@ -192,7 +190,6 @@
|
||||
"groupUpdated": "分组更新成功",
|
||||
"upload": "上传",
|
||||
"uploadTraffic": "上传流量",
|
||||
"userStatus": "用户状态",
|
||||
"userAgent": "用户代理",
|
||||
"userEmail": "邮箱",
|
||||
"userEmailPlaceholder": "输入邮箱",
|
||||
@@ -202,7 +199,6 @@
|
||||
"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("withdrawalManagement", "提现管理"),
|
||||
title: t("pendingTickets", "Pending Tickets"),
|
||||
value: TicketTotal || 0,
|
||||
subtitle: t("pending", "Pending"),
|
||||
icon: "uil:clipboard-notes",
|
||||
href: "/dashboard/withdrawal",
|
||||
href: "/dashboard/ticket",
|
||||
color: "text-red-600 dark:text-red-400",
|
||||
iconBg: "bg-red-100 dark:bg-red-900/30",
|
||||
},
|
||||
|
||||
@@ -0,0 +1,466 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import {
|
||||
cleanup,
|
||||
fireEvent,
|
||||
render,
|
||||
screen,
|
||||
waitFor,
|
||||
} from "@testing-library/react";
|
||||
import {
|
||||
activateOrder,
|
||||
getOrderList,
|
||||
refundOrder,
|
||||
updateOrderStatus,
|
||||
} from "@workspace/ui/services/admin/order";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import Order, { canManuallyUpdateOrderStatus, canRefundOrderStatus } from ".";
|
||||
|
||||
vi.mock("react-i18next", () => ({
|
||||
useTranslation: () => ({
|
||||
t: (_key: string, fallback: string): string => fallback,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("@tanstack/react-router", () => ({
|
||||
useSearch: () => ({}),
|
||||
}));
|
||||
|
||||
vi.mock("@/stores/global", () => ({
|
||||
useGlobalStore: (
|
||||
selector?: (state: {
|
||||
user: { is_admin: boolean };
|
||||
common: { currency: { currency_symbol: string } };
|
||||
}) => unknown
|
||||
) => {
|
||||
const state = {
|
||||
user: {
|
||||
is_admin: true,
|
||||
},
|
||||
common: {
|
||||
currency: {
|
||||
currency_symbol: "$",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return typeof selector === "function" ? selector(state) : state;
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@/stores/subscribe", () => ({
|
||||
useSubscribe: () => ({
|
||||
subscribes: [
|
||||
{
|
||||
id: 9,
|
||||
name: "Pro Plan",
|
||||
},
|
||||
],
|
||||
getSubscribeName: (id?: number) => (id === 9 ? "Pro Plan" : "--"),
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("@/utils/common", () => ({
|
||||
formatDate: (timestamp: number) => `date-${timestamp}`,
|
||||
}));
|
||||
|
||||
vi.mock("../user/user-detail", () => ({
|
||||
UserDetail: ({ id }: { id: number }) => <span>User #{id}</span>,
|
||||
}));
|
||||
|
||||
vi.mock("@/components/display", () => ({
|
||||
Display: ({ value }: { value: number }) => <span>{value}</span>,
|
||||
}));
|
||||
|
||||
const toastSuccess = vi.fn();
|
||||
const toastError = vi.fn();
|
||||
|
||||
vi.mock("sonner", () => ({
|
||||
toast: {
|
||||
success: (...args: unknown[]) => toastSuccess(...args),
|
||||
error: (...args: unknown[]) => toastError(...args),
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@workspace/ui/services/admin/order", () => ({
|
||||
activateOrder: vi.fn(),
|
||||
getOrderList: vi.fn(),
|
||||
refundOrder: vi.fn(),
|
||||
updateOrderStatus: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("@workspace/ui/components/alert-dialog", () => ({
|
||||
AlertDialog: ({ children }: { children: React.ReactNode }) => (
|
||||
<div>{children}</div>
|
||||
),
|
||||
AlertDialogTrigger: ({ children }: { children: React.ReactNode }) => (
|
||||
<div>{children}</div>
|
||||
),
|
||||
AlertDialogContent: ({ children }: { children: React.ReactNode }) => (
|
||||
<div>{children}</div>
|
||||
),
|
||||
AlertDialogHeader: ({ children }: { children: React.ReactNode }) => (
|
||||
<div>{children}</div>
|
||||
),
|
||||
AlertDialogTitle: ({ children }: { children: React.ReactNode }) => (
|
||||
<div>{children}</div>
|
||||
),
|
||||
AlertDialogDescription: ({ children }: { children: React.ReactNode }) => (
|
||||
<div>{children}</div>
|
||||
),
|
||||
AlertDialogFooter: ({ children }: { children: React.ReactNode }) => (
|
||||
<div>{children}</div>
|
||||
),
|
||||
AlertDialogCancel: ({
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"button">) => <button {...props}>{children}</button>,
|
||||
AlertDialogAction: ({
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"button">) => <button {...props}>{children}</button>,
|
||||
}));
|
||||
|
||||
vi.mock("@workspace/ui/composed/combobox", () => ({
|
||||
Combobox: ({
|
||||
options = [],
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
}: {
|
||||
options?: Array<{ label: string; value: number | string }>;
|
||||
value?: number | string;
|
||||
onChange: (value: number) => void;
|
||||
placeholder?: string;
|
||||
}) => (
|
||||
<label>
|
||||
<span>{placeholder}</span>
|
||||
<select
|
||||
aria-label={placeholder}
|
||||
onChange={(event) => onChange(Number(event.target.value))}
|
||||
value={String(value ?? "")}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<option key={String(option.value)} value={String(option.value)}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@workspace/ui/composed/pro-table/pro-table", async () => {
|
||||
const React = await import("react");
|
||||
|
||||
type Column = {
|
||||
accessorKey?: string;
|
||||
cell?: (props: {
|
||||
row: {
|
||||
original: Record<string, unknown>;
|
||||
getValue: (key: string) => unknown;
|
||||
};
|
||||
}) => React.ReactNode;
|
||||
};
|
||||
|
||||
return {
|
||||
ProTable: ({
|
||||
columns,
|
||||
request,
|
||||
actions,
|
||||
}: {
|
||||
columns: Column[];
|
||||
request: (
|
||||
pagination: { page: number; size: number },
|
||||
filter: Record<string, unknown>
|
||||
) => Promise<{ list: Record<string, unknown>[]; total: number }>;
|
||||
actions?: {
|
||||
render?: (row: Record<string, unknown>) => React.ReactNode[];
|
||||
};
|
||||
}) => {
|
||||
const [state, setState] = React.useState<{
|
||||
data: Record<string, unknown>[];
|
||||
error: boolean;
|
||||
loading: boolean;
|
||||
}>({
|
||||
data: [],
|
||||
error: false,
|
||||
loading: true,
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
let cancelled = false;
|
||||
request({ page: 1, size: 200 }, {})
|
||||
.then((response) => {
|
||||
if (cancelled) return;
|
||||
setState({
|
||||
data: response.list,
|
||||
error: false,
|
||||
loading: false,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
if (cancelled) return;
|
||||
setState({
|
||||
data: [],
|
||||
error: true,
|
||||
loading: false,
|
||||
});
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [request]);
|
||||
|
||||
if (state.loading) {
|
||||
return <div aria-label="Loading data" role="status" />;
|
||||
}
|
||||
|
||||
if (state.error) {
|
||||
return <div>Failed to load orders</div>;
|
||||
}
|
||||
|
||||
if (state.data.length === 0) {
|
||||
return <div>No orders</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{state.data.map((row) => (
|
||||
<article key={String(row.id)}>
|
||||
{columns.map((column, index) => {
|
||||
const value = column.accessorKey
|
||||
? row[column.accessorKey]
|
||||
: undefined;
|
||||
const rowApi = {
|
||||
original: row,
|
||||
getValue: (key: string) => row[key],
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={`${row.id}-${index}`}>
|
||||
{column.cell
|
||||
? column.cell({ row: rowApi })
|
||||
: typeof value === "object"
|
||||
? JSON.stringify(value)
|
||||
: String(value ?? "")}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div>{actions?.render?.(row)}</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const mockedGetOrderList = vi.mocked(getOrderList);
|
||||
const mockedRefundOrder = vi.mocked(refundOrder);
|
||||
const mockedUpdateOrderStatus = vi.mocked(updateOrderStatus);
|
||||
const mockedActivateOrder = vi.mocked(activateOrder);
|
||||
|
||||
function createOrderListResponse(
|
||||
list: API.Order[]
|
||||
): AxiosResponse<API.Response & { data?: API.GetOrderListResponse }> {
|
||||
return {
|
||||
data: {
|
||||
code: 200,
|
||||
data: {
|
||||
list,
|
||||
total: list.length,
|
||||
},
|
||||
},
|
||||
status: 200,
|
||||
statusText: "OK",
|
||||
headers: {},
|
||||
config: {
|
||||
headers: {} as AxiosResponse["config"]["headers"],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function createSuccessResponse(): AxiosResponse<
|
||||
API.Response & { data?: unknown }
|
||||
> {
|
||||
return {
|
||||
data: {
|
||||
code: 200,
|
||||
},
|
||||
status: 200,
|
||||
statusText: "OK",
|
||||
headers: {},
|
||||
config: {
|
||||
headers: {} as AxiosResponse["config"]["headers"],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function createOrder(status: number): API.Order {
|
||||
return {
|
||||
id: status,
|
||||
amount: 1999,
|
||||
coupon_discount: 0,
|
||||
discount: 0,
|
||||
fee_amount: 0,
|
||||
order_no: `ORDER-${status}`,
|
||||
payment: {
|
||||
name: "Stripe",
|
||||
platform: "stripe",
|
||||
},
|
||||
price: 1999,
|
||||
quantity: 1,
|
||||
status,
|
||||
status_name:
|
||||
status === 6 ? "claimed" : status === 7 ? "refunded" : "pending",
|
||||
subscribe_id: 9,
|
||||
trade_no: `TRADE-${status}`,
|
||||
type: 1,
|
||||
updated_at: 1_716_800_000,
|
||||
user_id: 88,
|
||||
} as API.Order;
|
||||
}
|
||||
|
||||
function renderOrderPage() {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Order />
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
localStorage.setItem("timezone", "UTC");
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe("Order", () => {
|
||||
it("uses the dedicated refund endpoint for refundable orders", async () => {
|
||||
mockedGetOrderList.mockResolvedValue(
|
||||
createOrderListResponse([createOrder(2)])
|
||||
);
|
||||
mockedRefundOrder.mockResolvedValue(createSuccessResponse());
|
||||
|
||||
renderOrderPage();
|
||||
|
||||
expect(await screen.findByText("ORDER-2")).not.toBeNull();
|
||||
fireEvent.click(screen.getByRole("button", { name: "Confirm refund" }));
|
||||
|
||||
await waitFor(() =>
|
||||
expect(mockedRefundOrder).toHaveBeenCalledWith(
|
||||
{ id: 2 },
|
||||
{ skipErrorHandler: true }
|
||||
)
|
||||
);
|
||||
expect(toastSuccess).toHaveBeenCalledWith("Refund completed.");
|
||||
});
|
||||
|
||||
it("blocks status 6 and 7 from the generic status editor", async () => {
|
||||
mockedGetOrderList.mockResolvedValue(
|
||||
createOrderListResponse([createOrder(1)])
|
||||
);
|
||||
mockedUpdateOrderStatus.mockResolvedValue(createSuccessResponse());
|
||||
|
||||
renderOrderPage();
|
||||
|
||||
const statusSelect = await screen.findByLabelText("Status");
|
||||
const optionValues = Array.from(
|
||||
statusSelect.querySelectorAll("option")
|
||||
).map((option) => option.textContent);
|
||||
|
||||
expect(optionValues).not.toContain("Claimed");
|
||||
expect(optionValues).not.toContain("Refunded");
|
||||
expect(canManuallyUpdateOrderStatus(6)).toBe(false);
|
||||
expect(canManuallyUpdateOrderStatus(7)).toBe(false);
|
||||
|
||||
fireEvent.change(statusSelect, { target: { value: "2" } });
|
||||
|
||||
await waitFor(() =>
|
||||
expect(mockedUpdateOrderStatus).toHaveBeenCalledWith(
|
||||
{ id: 1, status: 2 },
|
||||
{ skipErrorHandler: true }
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
it("renders loading state while orders are being fetched", () => {
|
||||
mockedGetOrderList.mockReturnValue(
|
||||
new Promise(() => {
|
||||
// Keep the request pending so the loading UI remains visible.
|
||||
}) as ReturnType<typeof getOrderList>
|
||||
);
|
||||
|
||||
renderOrderPage();
|
||||
|
||||
expect(screen.getByRole("status", { name: "Loading data" })).not.toBeNull();
|
||||
});
|
||||
|
||||
it("renders the empty state when there are no orders", async () => {
|
||||
mockedGetOrderList.mockResolvedValue(createOrderListResponse([]));
|
||||
|
||||
renderOrderPage();
|
||||
|
||||
expect(await screen.findByText("No orders")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("shows an error toast when refund fails", async () => {
|
||||
mockedGetOrderList.mockResolvedValue(
|
||||
createOrderListResponse([createOrder(5)])
|
||||
);
|
||||
mockedRefundOrder.mockRejectedValue(new Error("refund failed"));
|
||||
|
||||
renderOrderPage();
|
||||
|
||||
expect(await screen.findByText("ORDER-5")).not.toBeNull();
|
||||
fireEvent.click(screen.getByRole("button", { name: "Confirm refund" }));
|
||||
|
||||
await waitFor(() =>
|
||||
expect(toastError).toHaveBeenCalledWith(
|
||||
"Refund failed. Please try again."
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
it("renders the error state when the order list request fails", async () => {
|
||||
mockedGetOrderList.mockRejectedValue(new Error("network failed"));
|
||||
|
||||
renderOrderPage();
|
||||
|
||||
expect(await screen.findByText("Failed to load orders")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("keeps the order actions visible on a narrow viewport", async () => {
|
||||
window.innerWidth = 375;
|
||||
window.dispatchEvent(new Event("resize"));
|
||||
mockedGetOrderList.mockResolvedValue(
|
||||
createOrderListResponse([createOrder(2), createOrder(6), createOrder(7)])
|
||||
);
|
||||
|
||||
renderOrderPage();
|
||||
|
||||
expect(await screen.findByText("ORDER-2")).not.toBeNull();
|
||||
expect(screen.getByText("Claimed")).not.toBeNull();
|
||||
expect(screen.getAllByText("Refund").length).toBe(1);
|
||||
expect(canRefundOrderStatus(2)).toBe(true);
|
||||
expect(canRefundOrderStatus(6)).toBe(false);
|
||||
expect(canRefundOrderStatus(7)).toBe(false);
|
||||
expect(mockedActivateOrder).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -40,7 +40,31 @@ import { useSubscribe } from "@/stores/subscribe";
|
||||
import { formatDate } from "@/utils/common";
|
||||
import { UserDetail } from "../user/user-detail";
|
||||
|
||||
const REFUNDED_ORDER_STATUS = 6;
|
||||
const ORDER_STATUS_PENDING = 1;
|
||||
const ORDER_STATUS_PAID = 2;
|
||||
const ORDER_STATUS_CLOSED = 3;
|
||||
const ORDER_STATUS_FAILED = 4;
|
||||
const ORDER_STATUS_FINISHED = 5;
|
||||
const ORDER_STATUS_CLAIMED = 6;
|
||||
const ORDER_STATUS_REFUNDED = 7;
|
||||
|
||||
const MANUALLY_EDITABLE_ORDER_STATUSES = [
|
||||
ORDER_STATUS_PENDING,
|
||||
ORDER_STATUS_PAID,
|
||||
ORDER_STATUS_CLOSED,
|
||||
ORDER_STATUS_FAILED,
|
||||
ORDER_STATUS_FINISHED,
|
||||
] as const;
|
||||
|
||||
export function canManuallyUpdateOrderStatus(status: number) {
|
||||
return MANUALLY_EDITABLE_ORDER_STATUSES.includes(
|
||||
status as (typeof MANUALLY_EDITABLE_ORDER_STATUSES)[number]
|
||||
);
|
||||
}
|
||||
|
||||
export function canRefundOrderStatus(status: number) {
|
||||
return [ORDER_STATUS_PAID, ORDER_STATUS_FINISHED].includes(status);
|
||||
}
|
||||
|
||||
export default function Order() {
|
||||
const { t } = useTranslation("order");
|
||||
@@ -56,30 +80,46 @@ export default function Order() {
|
||||
subscribe_id: sp.subscribe_id || undefined,
|
||||
};
|
||||
|
||||
const statusOptions = [
|
||||
const displayStatusOptions = [
|
||||
{
|
||||
value: 1,
|
||||
value: ORDER_STATUS_PENDING,
|
||||
label: t("status.1", "Pending"),
|
||||
className: "bg-orange-500",
|
||||
},
|
||||
{ value: 2, label: t("status.2", "Paid"), className: "bg-green-500" },
|
||||
{
|
||||
value: 3,
|
||||
label: t("status.3", "Cancelled"),
|
||||
className: "bg-gray-500",
|
||||
},
|
||||
{ value: 4, label: t("status.4", "Closed"), className: "bg-red-500" },
|
||||
{
|
||||
value: 5,
|
||||
label: t("status.5", "Completed"),
|
||||
value: ORDER_STATUS_PAID,
|
||||
label: t("status.2", "Paid"),
|
||||
className: "bg-green-500",
|
||||
},
|
||||
{
|
||||
value: REFUNDED_ORDER_STATUS,
|
||||
label: t("status.6", "Refunded"),
|
||||
value: ORDER_STATUS_CLOSED,
|
||||
label: t("status.3", "Closed"),
|
||||
className: "bg-gray-500",
|
||||
},
|
||||
{
|
||||
value: ORDER_STATUS_FAILED,
|
||||
label: t("status.4", "Failed"),
|
||||
className: "bg-red-500",
|
||||
},
|
||||
{
|
||||
value: ORDER_STATUS_FINISHED,
|
||||
label: t("status.5", "Finished"),
|
||||
className: "bg-green-500",
|
||||
},
|
||||
{
|
||||
value: ORDER_STATUS_CLAIMED,
|
||||
label: t("status.6", "Claimed"),
|
||||
className: "bg-amber-500",
|
||||
},
|
||||
{
|
||||
value: ORDER_STATUS_REFUNDED,
|
||||
label: t("status.7", "Refunded"),
|
||||
className: "bg-red-500",
|
||||
},
|
||||
];
|
||||
const editableStatusOptions = displayStatusOptions.filter((option) =>
|
||||
canManuallyUpdateOrderStatus(option.value)
|
||||
);
|
||||
|
||||
const typeOptions = [
|
||||
{ value: 1, label: t("type.1", "New Purchase") },
|
||||
@@ -95,29 +135,36 @@ export default function Order() {
|
||||
|
||||
const refundMutation = useMutation({
|
||||
mutationFn: async (order: API.Order) => {
|
||||
await refundOrder({ id: order.id });
|
||||
await refundOrder(
|
||||
{ id: order.id },
|
||||
{
|
||||
skipErrorHandler: true,
|
||||
}
|
||||
);
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success(t("refundSuccess", "Refund completed."));
|
||||
setConfirmingOrderId(null);
|
||||
ref.current?.refresh();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("Refund order failed", error);
|
||||
onError: () => {
|
||||
toast.error(t("refundFailed", "Refund failed. Please try again."));
|
||||
setConfirmingOrderId(null);
|
||||
},
|
||||
});
|
||||
|
||||
const isRefundedOrder = (order: API.Order) =>
|
||||
order.status === REFUNDED_ORDER_STATUS ||
|
||||
order.status_name === t("status.6", "Refunded") ||
|
||||
order.status === ORDER_STATUS_REFUNDED ||
|
||||
order.status_name === t("status.7", "Refunded") ||
|
||||
order.status_name?.toLowerCase() === "refunded";
|
||||
|
||||
const canRefundOrder = (order: API.Order) =>
|
||||
canRefundOrders && !isRefundedOrder(order);
|
||||
canRefundOrders &&
|
||||
canRefundOrderStatus(order.status) &&
|
||||
!isRefundedOrder(order);
|
||||
|
||||
return (
|
||||
<ProTable<API.Order, any>
|
||||
<ProTable<API.Order, Record<string, unknown>>
|
||||
action={ref}
|
||||
actions={{
|
||||
render: (order) => {
|
||||
@@ -173,7 +220,11 @@ export default function Order() {
|
||||
onClick={async (event) => {
|
||||
event.preventDefault();
|
||||
if (isPending) return;
|
||||
await refundMutation.mutateAsync(order);
|
||||
try {
|
||||
await refundMutation.mutateAsync(order);
|
||||
} catch {
|
||||
// Errors are surfaced through the mutation onError handler.
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isPending
|
||||
@@ -335,26 +386,55 @@ export default function Order() {
|
||||
header: t("status.0", "Status"),
|
||||
cell: ({ row }) => {
|
||||
const order = row.original as API.Order;
|
||||
const option = statusOptions.find(
|
||||
const option = displayStatusOptions.find(
|
||||
(opt) => opt.value === order.status
|
||||
);
|
||||
if ([1, 3, 4].includes(row.getValue("status"))) {
|
||||
if (
|
||||
[ORDER_STATUS_PENDING, ORDER_STATUS_CLOSED, ORDER_STATUS_FAILED]
|
||||
.map(String)
|
||||
.includes(String(row.getValue("status")))
|
||||
) {
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<Combobox<number, false>
|
||||
className={cn(option?.className)}
|
||||
onChange={async (value) => {
|
||||
await updateOrderStatus({
|
||||
id: order.id,
|
||||
status: value,
|
||||
});
|
||||
ref.current?.refresh();
|
||||
if (!canManuallyUpdateOrderStatus(value)) {
|
||||
toast.error(
|
||||
t(
|
||||
"statusClaimedBlocked",
|
||||
"Claimed and refunded states must use the dedicated processing flow."
|
||||
)
|
||||
);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await updateOrderStatus(
|
||||
{
|
||||
id: order.id,
|
||||
status: value,
|
||||
},
|
||||
{
|
||||
skipErrorHandler: true,
|
||||
}
|
||||
);
|
||||
ref.current?.refresh();
|
||||
} catch {
|
||||
toast.error(
|
||||
t(
|
||||
"statusUpdateFailed",
|
||||
"Status update failed. Please try again."
|
||||
)
|
||||
);
|
||||
}
|
||||
}}
|
||||
options={statusOptions}
|
||||
options={editableStatusOptions}
|
||||
placeholder={t("status.0", "Status")}
|
||||
value={order.status}
|
||||
/>
|
||||
{[1, 3].includes(order.status) && (
|
||||
{[ORDER_STATUS_PENDING, ORDER_STATUS_CLOSED].includes(
|
||||
order.status
|
||||
) && (
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await activateOrder({ order_no: order.order_no });
|
||||
@@ -387,7 +467,7 @@ export default function Order() {
|
||||
{
|
||||
key: "status",
|
||||
placeholder: t("status.0", "Status"),
|
||||
options: statusOptions.map((item) => ({
|
||||
options: displayStatusOptions.map((item) => ({
|
||||
label: item.label,
|
||||
value: String(item.value),
|
||||
})),
|
||||
|
||||
@@ -1,25 +1,34 @@
|
||||
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,
|
||||
@@ -34,12 +43,7 @@ import {
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@workspace/ui/components/tabs";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@workspace/ui/components/tooltip";
|
||||
import { Combobox } from "@workspace/ui/composed/combobox";
|
||||
// import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
|
||||
import {
|
||||
ProTable,
|
||||
@@ -56,8 +60,9 @@ import {
|
||||
getUserList,
|
||||
updateUserBasicInfo,
|
||||
} from "@workspace/ui/services/admin/user";
|
||||
import { parseDeviceType } from "@workspace/ui/utils/device";
|
||||
import { FilePenLine } from "lucide-react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
import { Display } from "@/components/display";
|
||||
@@ -68,16 +73,18 @@ 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);
|
||||
@@ -91,14 +98,6 @@ 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();
|
||||
@@ -152,6 +151,7 @@ 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,8 +176,6 @@ 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")}
|
||||
@@ -264,43 +262,62 @@ export default function User() {
|
||||
id: "auth_methods",
|
||||
accessorKey: "auth_methods",
|
||||
header: "设备码/邮箱",
|
||||
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;
|
||||
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;
|
||||
|
||||
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",
|
||||
@@ -338,48 +355,6 @@ 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",
|
||||
@@ -548,25 +523,6 @@ 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,
|
||||
@@ -595,16 +551,92 @@ function DeviceGroupSheet({
|
||||
);
|
||||
}
|
||||
|
||||
function PreviewNodesDialog({
|
||||
userId,
|
||||
open,
|
||||
onOpenChange,
|
||||
function UserSearchBar({
|
||||
initialType,
|
||||
initialValue,
|
||||
onSearch,
|
||||
subscribes,
|
||||
}: {
|
||||
userId: number;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
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);
|
||||
|
||||
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],
|
||||
@@ -615,7 +647,10 @@ function PreviewNodesDialog({
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog onOpenChange={onOpenChange} open={open}>
|
||||
<Dialog onOpenChange={setOpen} open={open}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">{t("previewNodes", "Preview Nodes")}</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
|
||||
@@ -16,7 +16,6 @@ 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";
|
||||
|
||||
@@ -230,13 +229,26 @@ 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 ? (
|
||||
<UserIdentifier className="flex items-center" 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}
|
||||
</>
|
||||
) : (
|
||||
t("loading", "Loading...")
|
||||
)}
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
/**
|
||||
* @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();
|
||||
});
|
||||
});
|
||||
@@ -1,66 +0,0 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
/**
|
||||
* @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");
|
||||
});
|
||||
});
|
||||
@@ -1,102 +0,0 @@
|
||||
"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,10 +54,6 @@ 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);
|
||||
@@ -319,11 +315,10 @@ 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 = resolvePlanSpeed(row.original);
|
||||
const planSpeed = row.original.subscribe?.speed_limit ?? 0;
|
||||
const speed = effectiveSpeed || userSpeed || planSpeed;
|
||||
const source = row.original.is_throttled
|
||||
? t("effectiveSpeed", "Effective Speed")
|
||||
: userSpeed > 0
|
||||
const source =
|
||||
userSpeed > 0
|
||||
? t("userOverride", "User Override")
|
||||
: t("subscriptionDefault", "Subscription Default");
|
||||
|
||||
@@ -340,16 +335,6 @@ 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,12 +87,11 @@ function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
|
||||
|
||||
if (detail.status !== 1) return null;
|
||||
|
||||
const baseSpeed =
|
||||
detail.plan_speed_limit ?? detail.subscribe?.speed_limit ?? 0;
|
||||
const baseSpeed = 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.user_traffic_limit || detail.traffic_limit || [];
|
||||
const rules = detail.traffic_limit || [];
|
||||
const hasLimitConfig =
|
||||
baseSpeed > 0 || userSpeed > 0 || effectiveSpeed > 0 || rules.length > 0;
|
||||
|
||||
|
||||
@@ -40,12 +40,6 @@ 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,
|
||||
@@ -104,7 +98,7 @@ export function SubscriptionForm({
|
||||
traffic: initialData?.traffic || 0,
|
||||
speed_limit: initialData?.speed_limit || 0,
|
||||
device_limit: initialData?.device_limit || 0,
|
||||
traffic_limit: getUserTrafficLimitRules(initialData),
|
||||
traffic_limit: initialData?.traffic_limit || [],
|
||||
upload: initialData?.upload || 0,
|
||||
download: initialData?.download || 0,
|
||||
expired_at: initialData?.expire_time || 0,
|
||||
|
||||
@@ -44,7 +44,7 @@ const WITHDRAWAL_METHOD_MAP: Record<number, string> = {
|
||||
0: "其他",
|
||||
1: "支付宝",
|
||||
2: "微信",
|
||||
3: "USDT(TRC20)",
|
||||
3: "银行卡",
|
||||
};
|
||||
|
||||
const rejectSchema = z.object({
|
||||
@@ -143,7 +143,7 @@ export default function WithdrawalPage() {
|
||||
const methodOptions = [
|
||||
{ value: "1", label: "支付宝" },
|
||||
{ value: "2", label: "微信" },
|
||||
{ value: "3", label: "USDT(TRC20)" },
|
||||
{ value: "3", label: "银行卡" },
|
||||
{ value: "0", label: "其他" },
|
||||
];
|
||||
|
||||
|
||||
@@ -63,7 +63,7 @@ import { useGlobalStore } from "@/stores/global";
|
||||
const WITHDRAWAL_METHODS = [
|
||||
{ value: 1, label: "支付宝" },
|
||||
{ value: 2, label: "微信" },
|
||||
{ value: 3, label: "USDT(TRC20)" },
|
||||
{ value: 3, label: "银行卡" },
|
||||
{ value: 0, label: "其他" },
|
||||
] as const;
|
||||
|
||||
@@ -111,21 +111,13 @@ 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"
|
||||
height={320}
|
||||
src={url}
|
||||
width={320}
|
||||
/>
|
||||
<img alt="收款码" className="w-full" src={url} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
@@ -161,16 +153,18 @@ const withdrawalFormSchema = z
|
||||
if (!data.account) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "USDT(TRC20) 地址为必填",
|
||||
message: "银行卡收款账号为必填",
|
||||
path: ["account"],
|
||||
});
|
||||
}
|
||||
} else if (data.method === 0) {
|
||||
if (!data.account && !data.content) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "收款账号和备注至少填一项",
|
||||
path: ["account"],
|
||||
});
|
||||
}
|
||||
} else if (data.method === 0 && !(data.account || data.content)) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "收款账号和备注至少填一项",
|
||||
path: ["account"],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -427,7 +421,9 @@ 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">
|
||||
@@ -450,9 +446,7 @@ 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>
|
||||
)}
|
||||
@@ -480,7 +474,7 @@ export default function Affiliate() {
|
||||
<Input
|
||||
placeholder={
|
||||
watchedMethod === 3
|
||||
? "请输入 USDT(TRC20) 收款地址"
|
||||
? "请输入银行卡号或账户信息"
|
||||
: "请输入收款账号(与备注至少填一项)"
|
||||
}
|
||||
{...field}
|
||||
@@ -525,7 +519,9 @@ export default function Affiliate() {
|
||||
</Button>
|
||||
<Button
|
||||
disabled={
|
||||
submitting || qrUploading || availableCommission <= 0
|
||||
submitting ||
|
||||
qrUploading ||
|
||||
availableCommission <= 0
|
||||
}
|
||||
form="withdrawal-form"
|
||||
type="submit"
|
||||
|
||||
-4
@@ -2664,13 +2664,11 @@ 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;
|
||||
@@ -2701,10 +2699,8 @@ 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;
|
||||
|
||||
Reference in New Issue
Block a user