This commit is contained in:
@@ -21,6 +21,7 @@
|
||||
"Order Management": "Order Management",
|
||||
"Payment Config": "Payment Config",
|
||||
"Product Management": "Product Management",
|
||||
"Promo Management": "Promo Management",
|
||||
"Redemption Management": "Redemption Management",
|
||||
"Register": "Register",
|
||||
"Reset Subscribe": "Reset Subscribe",
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
{
|
||||
"cancel": "Cancel",
|
||||
"confirm": "Confirm",
|
||||
"confirmDelete": "Are you sure you want to delete?",
|
||||
"createPrice": "Create Promo Price",
|
||||
"createRule": "Create Rule",
|
||||
"createSuccess": "Create Success",
|
||||
"delete": "Delete",
|
||||
"deleteSuccess": "Delete Success",
|
||||
"deleteWarning": "Once deleted, data cannot be recovered. Please proceed with caution.",
|
||||
"detail": "Detail",
|
||||
"edit": "Edit",
|
||||
"editRule": "Edit Rule",
|
||||
"emptyPrices": "No promo prices",
|
||||
"emptyRules": "No promo rules",
|
||||
"emptyUsage": "No promo usage records",
|
||||
"enabled": "Enabled",
|
||||
"endTime": "End Time",
|
||||
"form": {
|
||||
"enterPromoPrice": "Enter price",
|
||||
"inactiveMonths": "Inactive Months",
|
||||
"inactiveMonthsPlaceholder": "Months without purchase",
|
||||
"name": "Name",
|
||||
"namePlaceholder": "Rule name",
|
||||
"promoPriceLessThanUnitPrice": "Promo price must be lower than unit price",
|
||||
"selectEndTime": "Select time",
|
||||
"selectRule": "Select rule",
|
||||
"selectStartTime": "Select time",
|
||||
"selectSubscribe": "Select subscribe",
|
||||
"type": "Rule Type",
|
||||
"windowHours": "Window Hours",
|
||||
"windowHoursPlaceholder": "Hours after registration"
|
||||
},
|
||||
"loadErrorDescription": "Refresh the table or try again later.",
|
||||
"loadPricesError": "Failed to load promo prices",
|
||||
"loadRulesError": "Failed to load promo rules",
|
||||
"loadUsageError": "Failed to load promo usage",
|
||||
"name": "Name",
|
||||
"no": "No",
|
||||
"orderNo": "Order No.",
|
||||
"params": "Params",
|
||||
"prices": "Prices",
|
||||
"priority": "Priority",
|
||||
"promoPrice": "Promo Price",
|
||||
"rule": "Rule",
|
||||
"ruleDetail": "Rule Detail",
|
||||
"rules": "Rules",
|
||||
"searchRule": "Rule name",
|
||||
"startTime": "Start Time",
|
||||
"subscribe": "Subscribe",
|
||||
"type": "Type",
|
||||
"types": {
|
||||
"campaign": "Campaign",
|
||||
"inactive_user": "Inactive User",
|
||||
"new_user": "New User"
|
||||
},
|
||||
"unitPrice": "Unit Price",
|
||||
"unitPriceHint": "Unit price",
|
||||
"updateSuccess": "Update Success",
|
||||
"usage": "Usage",
|
||||
"usedAt": "Used At",
|
||||
"userId": "User ID",
|
||||
"validityPeriod": "Validity Period",
|
||||
"yes": "Yes"
|
||||
}
|
||||
@@ -21,6 +21,7 @@
|
||||
"Order Management": "订单管理",
|
||||
"Payment Config": "支付配置",
|
||||
"Product Management": "商品管理",
|
||||
"Promo Management": "促销管理",
|
||||
"Redemption Management": "兑换码管理",
|
||||
"Register": "注册",
|
||||
"Reset Subscribe": "重置订阅",
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
{
|
||||
"cancel": "取消",
|
||||
"confirm": "确认",
|
||||
"confirmDelete": "确定要删除吗？",
|
||||
"createPrice": "创建促销价",
|
||||
"createRule": "创建规则",
|
||||
"createSuccess": "创建成功",
|
||||
"delete": "删除",
|
||||
"deleteSuccess": "删除成功",
|
||||
"deleteWarning": "删除后数据无法恢复，请谨慎操作。",
|
||||
"detail": "详情",
|
||||
"edit": "编辑",
|
||||
"editRule": "编辑规则",
|
||||
"emptyPrices": "暂无商品促销价",
|
||||
"emptyRules": "暂无促销规则",
|
||||
"emptyUsage": "暂无促销使用记录",
|
||||
"enabled": "启用",
|
||||
"endTime": "结束时间",
|
||||
"form": {
|
||||
"enterPromoPrice": "输入价格",
|
||||
"inactiveMonths": "未活跃月数",
|
||||
"inactiveMonthsPlaceholder": "未购买的月数",
|
||||
"name": "名称",
|
||||
"namePlaceholder": "规则名称",
|
||||
"promoPriceLessThanUnitPrice": "促销价必须低于原价",
|
||||
"selectEndTime": "选择时间",
|
||||
"selectRule": "选择规则",
|
||||
"selectStartTime": "选择时间",
|
||||
"selectSubscribe": "选择订阅",
|
||||
"type": "规则类型",
|
||||
"windowHours": "新用户窗口小时数",
|
||||
"windowHoursPlaceholder": "注册后的小时数"
|
||||
},
|
||||
"loadErrorDescription": "请刷新表格或稍后重试。",
|
||||
"loadPricesError": "促销价加载失败",
|
||||
"loadRulesError": "促销规则加载失败",
|
||||
"loadUsageError": "促销使用记录加载失败",
|
||||
"name": "名称",
|
||||
"no": "否",
|
||||
"orderNo": "订单号",
|
||||
"params": "参数",
|
||||
"prices": "商品促销价",
|
||||
"priority": "优先级",
|
||||
"promoPrice": "促销价",
|
||||
"rule": "规则",
|
||||
"ruleDetail": "规则详情",
|
||||
"rules": "促销规则",
|
||||
"searchRule": "规则名称",
|
||||
"startTime": "开始时间",
|
||||
"subscribe": "订阅",
|
||||
"type": "类型",
|
||||
"types": {
|
||||
"campaign": "活动",
|
||||
"inactive_user": "回归用户",
|
||||
"new_user": "新用户"
|
||||
},
|
||||
"unitPrice": "原价",
|
||||
"unitPriceHint": "原价",
|
||||
"updateSuccess": "更新成功",
|
||||
"usage": "使用记录",
|
||||
"usedAt": "使用时间",
|
||||
"userId": "用户 ID",
|
||||
"validityPeriod": "有效期",
|
||||
"yes": "是"
|
||||
}
|
||||
@@ -49,6 +49,11 @@ export function useNavs() {
|
||||
url: "/dashboard/product",
|
||||
icon: "flat-color-icons:shop",
|
||||
},
|
||||
{
|
||||
title: t("Promo Management", "Promo Management"),
|
||||
url: "/dashboard/promo",
|
||||
icon: "flat-color-icons:briefcase",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
@@ -42,6 +42,7 @@ initializeI18n({
|
||||
"nodes",
|
||||
"order",
|
||||
"payment",
|
||||
"promo",
|
||||
"product",
|
||||
"servers",
|
||||
"subscribe",
|
||||
|
||||
@@ -34,6 +34,8 @@ const DashboardSubscribeIndexLazyRouteImport = createFileRoute(
|
||||
const DashboardRedemptionIndexLazyRouteImport = createFileRoute(
|
||||
'/dashboard/redemption/',
|
||||
)()
|
||||
const DashboardPromoIndexLazyRouteImport =
|
||||
createFileRoute('/dashboard/promo/')()
|
||||
const DashboardProductIndexLazyRouteImport = createFileRoute(
|
||||
'/dashboard/product/',
|
||||
)()
|
||||
@@ -186,6 +188,13 @@ const DashboardRedemptionIndexLazyRoute =
|
||||
} as any).lazy(() =>
|
||||
import('./routes/dashboard/redemption/index.lazy').then((d) => d.Route),
|
||||
)
|
||||
const DashboardPromoIndexLazyRoute = DashboardPromoIndexLazyRouteImport.update({
|
||||
id: '/promo/',
|
||||
path: '/promo/',
|
||||
getParentRoute: () => DashboardRouteLazyRoute,
|
||||
} as any).lazy(() =>
|
||||
import('./routes/dashboard/promo/index.lazy').then((d) => d.Route),
|
||||
)
|
||||
const DashboardProductIndexLazyRoute =
|
||||
DashboardProductIndexLazyRouteImport.update({
|
||||
id: '/product/',
|
||||
@@ -406,6 +415,7 @@ export interface FileRoutesByFullPath {
|
||||
'/dashboard/order': typeof DashboardOrderIndexLazyRoute
|
||||
'/dashboard/payment': typeof DashboardPaymentIndexLazyRoute
|
||||
'/dashboard/product': typeof DashboardProductIndexLazyRoute
|
||||
'/dashboard/promo': typeof DashboardPromoIndexLazyRoute
|
||||
'/dashboard/redemption': typeof DashboardRedemptionIndexLazyRoute
|
||||
'/dashboard/subscribe': typeof DashboardSubscribeIndexLazyRoute
|
||||
'/dashboard/system': typeof DashboardSystemIndexLazyRoute
|
||||
@@ -442,6 +452,7 @@ export interface FileRoutesByTo {
|
||||
'/dashboard/order': typeof DashboardOrderIndexLazyRoute
|
||||
'/dashboard/payment': typeof DashboardPaymentIndexLazyRoute
|
||||
'/dashboard/product': typeof DashboardProductIndexLazyRoute
|
||||
'/dashboard/promo': typeof DashboardPromoIndexLazyRoute
|
||||
'/dashboard/redemption': typeof DashboardRedemptionIndexLazyRoute
|
||||
'/dashboard/subscribe': typeof DashboardSubscribeIndexLazyRoute
|
||||
'/dashboard/system': typeof DashboardSystemIndexLazyRoute
|
||||
@@ -481,6 +492,7 @@ export interface FileRoutesById {
|
||||
'/dashboard/order/': typeof DashboardOrderIndexLazyRoute
|
||||
'/dashboard/payment/': typeof DashboardPaymentIndexLazyRoute
|
||||
'/dashboard/product/': typeof DashboardProductIndexLazyRoute
|
||||
'/dashboard/promo/': typeof DashboardPromoIndexLazyRoute
|
||||
'/dashboard/redemption/': typeof DashboardRedemptionIndexLazyRoute
|
||||
'/dashboard/subscribe/': typeof DashboardSubscribeIndexLazyRoute
|
||||
'/dashboard/system/': typeof DashboardSystemIndexLazyRoute
|
||||
@@ -521,6 +533,7 @@ export interface FileRouteTypes {
|
||||
| '/dashboard/order'
|
||||
| '/dashboard/payment'
|
||||
| '/dashboard/product'
|
||||
| '/dashboard/promo'
|
||||
| '/dashboard/redemption'
|
||||
| '/dashboard/subscribe'
|
||||
| '/dashboard/system'
|
||||
@@ -557,6 +570,7 @@ export interface FileRouteTypes {
|
||||
| '/dashboard/order'
|
||||
| '/dashboard/payment'
|
||||
| '/dashboard/product'
|
||||
| '/dashboard/promo'
|
||||
| '/dashboard/redemption'
|
||||
| '/dashboard/subscribe'
|
||||
| '/dashboard/system'
|
||||
@@ -595,6 +609,7 @@ export interface FileRouteTypes {
|
||||
| '/dashboard/order/'
|
||||
| '/dashboard/payment/'
|
||||
| '/dashboard/product/'
|
||||
| '/dashboard/promo/'
|
||||
| '/dashboard/redemption/'
|
||||
| '/dashboard/subscribe/'
|
||||
| '/dashboard/system/'
|
||||
@@ -694,6 +709,13 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof DashboardRedemptionIndexLazyRouteImport
|
||||
parentRoute: typeof DashboardRouteLazyRoute
|
||||
}
|
||||
'/dashboard/promo/': {
|
||||
id: '/dashboard/promo/'
|
||||
path: '/promo'
|
||||
fullPath: '/dashboard/promo'
|
||||
preLoaderRoute: typeof DashboardPromoIndexLazyRouteImport
|
||||
parentRoute: typeof DashboardRouteLazyRoute
|
||||
}
|
||||
'/dashboard/product/': {
|
||||
id: '/dashboard/product/'
|
||||
path: '/product'
|
||||
@@ -908,6 +930,7 @@ interface DashboardRouteLazyRouteChildren {
|
||||
DashboardOrderIndexLazyRoute: typeof DashboardOrderIndexLazyRoute
|
||||
DashboardPaymentIndexLazyRoute: typeof DashboardPaymentIndexLazyRoute
|
||||
DashboardProductIndexLazyRoute: typeof DashboardProductIndexLazyRoute
|
||||
DashboardPromoIndexLazyRoute: typeof DashboardPromoIndexLazyRoute
|
||||
DashboardRedemptionIndexLazyRoute: typeof DashboardRedemptionIndexLazyRoute
|
||||
DashboardSubscribeIndexLazyRoute: typeof DashboardSubscribeIndexLazyRoute
|
||||
DashboardSystemIndexLazyRoute: typeof DashboardSystemIndexLazyRoute
|
||||
@@ -945,6 +968,7 @@ const DashboardRouteLazyRouteChildren: DashboardRouteLazyRouteChildren = {
|
||||
DashboardOrderIndexLazyRoute: DashboardOrderIndexLazyRoute,
|
||||
DashboardPaymentIndexLazyRoute: DashboardPaymentIndexLazyRoute,
|
||||
DashboardProductIndexLazyRoute: DashboardProductIndexLazyRoute,
|
||||
DashboardPromoIndexLazyRoute: DashboardPromoIndexLazyRoute,
|
||||
DashboardRedemptionIndexLazyRoute: DashboardRedemptionIndexLazyRoute,
|
||||
DashboardSubscribeIndexLazyRoute: DashboardSubscribeIndexLazyRoute,
|
||||
DashboardSystemIndexLazyRoute: DashboardSystemIndexLazyRoute,
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||
import PromoPage from "@/sections/promo";
|
||||
|
||||
export const Route = createLazyFileRoute("/dashboard/promo/")({
|
||||
component: PromoPage,
|
||||
});
|
||||
@@ -0,0 +1,155 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { cleanup, render, screen, waitFor } from "@testing-library/react";
|
||||
import { getPromoRuleList } from "@workspace/ui/services/admin/promo";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import PromoPage from ".";
|
||||
|
||||
vi.mock("react-i18next", () => ({
|
||||
useTranslation: () => ({
|
||||
t: (_key: string, fallback: string): string => fallback,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("@/stores/subscribe", () => ({
|
||||
useSubscribe: () => ({
|
||||
subscribes: [
|
||||
{
|
||||
id: 8,
|
||||
name: "Monthly Plan",
|
||||
unit_price: 1200,
|
||||
sold: 0,
|
||||
},
|
||||
],
|
||||
getSubscribeName: (id?: number) => (id === 8 ? "Monthly Plan" : "--"),
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("@/utils/common", () => ({
|
||||
formatDate: (timestamp: number) => `date-${timestamp}`,
|
||||
}));
|
||||
|
||||
vi.mock("@workspace/ui/services/admin/promo", () => ({
|
||||
createPromoPrice: vi.fn(),
|
||||
createPromoRule: vi.fn(),
|
||||
deletePromoPrice: vi.fn(),
|
||||
deletePromoRule: vi.fn(),
|
||||
getPromoPriceList: vi.fn(),
|
||||
getPromoRuleList: vi.fn(),
|
||||
getPromoUsageList: vi.fn(),
|
||||
updatePromoRule: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockedGetPromoRuleList = vi.mocked(getPromoRuleList);
|
||||
|
||||
function createRuleListResponse(
|
||||
data: API.GetPromoRuleListResponse
|
||||
): AxiosResponse<API.Response & { data?: API.GetPromoRuleListResponse }> {
|
||||
return {
|
||||
data: {
|
||||
code: 200,
|
||||
data,
|
||||
},
|
||||
status: 200,
|
||||
statusText: "OK",
|
||||
headers: {},
|
||||
config: {
|
||||
headers: {} as AxiosResponse["config"]["headers"],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
localStorage.setItem("timezone", "UTC");
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe("PromoPage", () => {
|
||||
it("renders promo rules with type, priority, status, and validity period", async () => {
|
||||
mockedGetPromoRuleList.mockResolvedValue(
|
||||
createRuleListResponse({
|
||||
total: 1,
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Return User Price",
|
||||
type: "inactive_user",
|
||||
params: { inactive_months: 3 },
|
||||
priority: 5,
|
||||
enabled: true,
|
||||
start_time: 1_716_800_000,
|
||||
end_time: 1_716_900_000,
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
render(<PromoPage />);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(mockedGetPromoRuleList).toHaveBeenCalledWith({
|
||||
page: 1,
|
||||
size: 200,
|
||||
search: undefined,
|
||||
type: undefined,
|
||||
enabled: undefined,
|
||||
})
|
||||
);
|
||||
expect(await screen.findByText("Return User Price")).not.toBeNull();
|
||||
expect(screen.getByText("inactive_user")).not.toBeNull();
|
||||
expect(screen.getByText("5")).not.toBeNull();
|
||||
expect(screen.getByText("date-1716800000")).not.toBeNull();
|
||||
expect(screen.getByText("date-1716900000")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("shows the empty state when there are no promo rules", async () => {
|
||||
mockedGetPromoRuleList.mockResolvedValue(
|
||||
createRuleListResponse({
|
||||
total: 0,
|
||||
list: [],
|
||||
})
|
||||
);
|
||||
|
||||
render(<PromoPage />);
|
||||
|
||||
expect(await screen.findByText("No promo rules")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("shows a loading state while promo rules are being fetched", () => {
|
||||
let resolveRequest:
|
||||
| ((
|
||||
value: AxiosResponse<
|
||||
API.Response & { data?: API.GetPromoRuleListResponse }
|
||||
>
|
||||
) => void)
|
||||
| undefined;
|
||||
mockedGetPromoRuleList.mockReturnValue(
|
||||
new Promise((resolve) => {
|
||||
resolveRequest = resolve;
|
||||
})
|
||||
);
|
||||
|
||||
render(<PromoPage />);
|
||||
|
||||
expect(screen.getByRole("status", { name: "Loading data" })).not.toBeNull();
|
||||
expect(resolveRequest).toBeTypeOf("function");
|
||||
});
|
||||
|
||||
it("shows an error state when promo rules fail to load", async () => {
|
||||
mockedGetPromoRuleList.mockRejectedValue(new Error("network failed"));
|
||||
|
||||
render(<PromoPage />);
|
||||
|
||||
await waitFor(() => expect(mockedGetPromoRuleList).toHaveBeenCalled());
|
||||
expect(
|
||||
await screen.findByText("Failed to load promo rules")
|
||||
).not.toBeNull();
|
||||
expect(screen.queryByText("No promo rules")).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,493 @@
|
||||
import {
|
||||
Alert,
|
||||
AlertDescription,
|
||||
AlertTitle,
|
||||
} from "@workspace/ui/components/alert";
|
||||
import { Badge } from "@workspace/ui/components/badge";
|
||||
import { Button } from "@workspace/ui/components/button";
|
||||
import { Switch } from "@workspace/ui/components/switch";
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@workspace/ui/components/tabs";
|
||||
import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
|
||||
import Empty from "@workspace/ui/composed/empty";
|
||||
import {
|
||||
ProTable,
|
||||
type ProTableActions,
|
||||
} from "@workspace/ui/composed/pro-table/pro-table";
|
||||
import {
|
||||
createPromoPrice,
|
||||
createPromoRule,
|
||||
deletePromoPrice,
|
||||
deletePromoRule,
|
||||
getPromoPriceList,
|
||||
getPromoRuleList,
|
||||
getPromoUsageList,
|
||||
updatePromoRule,
|
||||
} from "@workspace/ui/services/admin/promo";
|
||||
import { CircleAlert } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
import { useSubscribe } from "@/stores/subscribe";
|
||||
import { formatDate } from "@/utils/common";
|
||||
import PriceForm from "./price-form";
|
||||
import RuleDetail from "./rule-detail";
|
||||
import RuleForm from "./rule-form";
|
||||
import { formatCurrency, parseOptionalNumber, promoRuleTypes } from "./utils";
|
||||
|
||||
type RuleFilters = {
|
||||
search?: string;
|
||||
type?: API.PromoRuleType;
|
||||
enabled?: string;
|
||||
};
|
||||
|
||||
type PriceFilters = {
|
||||
rule_id?: string;
|
||||
subscribe_id?: string;
|
||||
};
|
||||
|
||||
type UsageFilters = PriceFilters & {
|
||||
user_id?: string;
|
||||
order_no?: string;
|
||||
};
|
||||
|
||||
function ErrorState({
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<Alert className="mx-auto max-w-md" variant="destructive">
|
||||
<CircleAlert aria-hidden="true" />
|
||||
<AlertTitle>{title}</AlertTitle>
|
||||
<AlertDescription>{description}</AlertDescription>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PromoPage() {
|
||||
const { t } = useTranslation("promo");
|
||||
const { subscribes, getSubscribeName } = useSubscribe();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [rules, setRules] = useState<API.PromoRule[]>([]);
|
||||
const [detailRule, setDetailRule] = useState<API.PromoRule>();
|
||||
const [detailOpen, setDetailOpen] = useState(false);
|
||||
const ruleRef = useRef<ProTableActions>(null);
|
||||
const priceRef = useRef<ProTableActions>(null);
|
||||
const usageRef = useRef<ProTableActions>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tabs className="space-y-4" defaultValue="rules">
|
||||
<TabsList className="grid w-full grid-cols-3 md:w-fit">
|
||||
<TabsTrigger value="rules">{t("rules", "Rules")}</TabsTrigger>
|
||||
<TabsTrigger value="prices">{t("prices", "Prices")}</TabsTrigger>
|
||||
<TabsTrigger value="usage">{t("usage", "Usage")}</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="rules">
|
||||
<ProTable<API.PromoRule, RuleFilters>
|
||||
action={ruleRef}
|
||||
actions={{
|
||||
render: (row) => [
|
||||
<Button
|
||||
key="detail"
|
||||
onClick={() => {
|
||||
setDetailRule(row);
|
||||
setDetailOpen(true);
|
||||
}}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
{t("detail", "Detail")}
|
||||
</Button>,
|
||||
<RuleForm
|
||||
initialValues={row}
|
||||
key="edit"
|
||||
loading={loading}
|
||||
onSubmit={async (values) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await updatePromoRule({ id: row.id }, values);
|
||||
toast.success(t("updateSuccess", "Update Success"));
|
||||
ruleRef.current?.refresh();
|
||||
setLoading(false);
|
||||
return true;
|
||||
} catch (_error) {
|
||||
setLoading(false);
|
||||
return false;
|
||||
}
|
||||
}}
|
||||
title={t("editRule", "Edit Rule")}
|
||||
trigger={t("edit", "Edit")}
|
||||
/>,
|
||||
<ConfirmButton
|
||||
cancelText={t("cancel", "Cancel")}
|
||||
confirmText={t("confirm", "Confirm")}
|
||||
description={t(
|
||||
"deleteWarning",
|
||||
"Once deleted, data cannot be recovered. Please proceed with caution."
|
||||
)}
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deletePromoRule({ id: row.id });
|
||||
toast.success(t("deleteSuccess", "Delete Success"));
|
||||
ruleRef.current?.refresh();
|
||||
}}
|
||||
title={t("confirmDelete", "Are you sure you want to delete?")}
|
||||
trigger={
|
||||
<Button size="sm" variant="destructive">
|
||||
{t("delete", "Delete")}
|
||||
</Button>
|
||||
}
|
||||
/>,
|
||||
],
|
||||
}}
|
||||
columns={[
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: t("name", "Name"),
|
||||
},
|
||||
{
|
||||
accessorKey: "type",
|
||||
header: t("type", "Type"),
|
||||
cell: ({ row }) => (
|
||||
<Badge variant="outline">
|
||||
{t(`types.${row.original.type}`, row.original.type)}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "priority",
|
||||
header: t("priority", "Priority"),
|
||||
},
|
||||
{
|
||||
accessorKey: "enabled",
|
||||
header: t("enabled", "Enabled"),
|
||||
cell: ({ row }) => (
|
||||
<Switch
|
||||
defaultChecked={row.original.enabled}
|
||||
onCheckedChange={async (checked) => {
|
||||
await updatePromoRule(
|
||||
{ id: row.original.id },
|
||||
{ ...row.original, enabled: checked }
|
||||
);
|
||||
toast.success(t("updateSuccess", "Update Success"));
|
||||
ruleRef.current?.refresh();
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "start_time",
|
||||
header: t("startTime", "Start Time"),
|
||||
cell: ({ row }) =>
|
||||
row.original.start_time
|
||||
? formatDate(row.original.start_time)
|
||||
: "--",
|
||||
},
|
||||
{
|
||||
accessorKey: "end_time",
|
||||
header: t("endTime", "End Time"),
|
||||
cell: ({ row }) =>
|
||||
row.original.end_time
|
||||
? formatDate(row.original.end_time)
|
||||
: "--",
|
||||
},
|
||||
]}
|
||||
empty={<Empty description={t("emptyRules", "No promo rules")} />}
|
||||
error={
|
||||
<ErrorState
|
||||
description={t(
|
||||
"loadErrorDescription",
|
||||
"Refresh the table or try again later."
|
||||
)}
|
||||
title={t("loadRulesError", "Failed to load promo rules")}
|
||||
/>
|
||||
}
|
||||
header={{
|
||||
toolbar: (
|
||||
<RuleForm
|
||||
loading={loading}
|
||||
onSubmit={async (values) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await createPromoRule(values);
|
||||
toast.success(t("createSuccess", "Create Success"));
|
||||
ruleRef.current?.refresh();
|
||||
setLoading(false);
|
||||
return true;
|
||||
} catch (_error) {
|
||||
setLoading(false);
|
||||
return false;
|
||||
}
|
||||
}}
|
||||
title={t("createRule", "Create Rule")}
|
||||
trigger={t("createRule", "Create Rule")}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
params={[
|
||||
{ key: "search", placeholder: t("searchRule", "Rule name") },
|
||||
{
|
||||
key: "type",
|
||||
placeholder: t("type", "Type"),
|
||||
options: promoRuleTypes.map((type) => ({
|
||||
label: t(`types.${type}`, type),
|
||||
value: type,
|
||||
})),
|
||||
},
|
||||
{
|
||||
key: "enabled",
|
||||
placeholder: t("enabled", "Enabled"),
|
||||
options: [
|
||||
{ label: t("yes", "Yes"), value: "true" },
|
||||
{ label: t("no", "No"), value: "false" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
request={async (pagination, filters) => {
|
||||
const { data } = await getPromoRuleList({
|
||||
...pagination,
|
||||
search: filters.search?.trim() || undefined,
|
||||
type: filters.type,
|
||||
enabled:
|
||||
filters.enabled === undefined || filters.enabled === ""
|
||||
? undefined
|
||||
: filters.enabled === "true",
|
||||
});
|
||||
const list = data.data?.list || [];
|
||||
setRules(list);
|
||||
return {
|
||||
list,
|
||||
total: data.data?.total || 0,
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="prices">
|
||||
<ProTable<API.PromoPrice, PriceFilters>
|
||||
action={priceRef}
|
||||
actions={{
|
||||
render: (row) => [
|
||||
<ConfirmButton
|
||||
cancelText={t("cancel", "Cancel")}
|
||||
confirmText={t("confirm", "Confirm")}
|
||||
description={t(
|
||||
"deleteWarning",
|
||||
"Once deleted, data cannot be recovered. Please proceed with caution."
|
||||
)}
|
||||
key="delete"
|
||||
onConfirm={async () => {
|
||||
await deletePromoPrice({ id: row.id });
|
||||
toast.success(t("deleteSuccess", "Delete Success"));
|
||||
priceRef.current?.refresh();
|
||||
}}
|
||||
title={t("confirmDelete", "Are you sure you want to delete?")}
|
||||
trigger={
|
||||
<Button size="sm" variant="destructive">
|
||||
{t("delete", "Delete")}
|
||||
</Button>
|
||||
}
|
||||
/>,
|
||||
],
|
||||
}}
|
||||
columns={[
|
||||
{
|
||||
accessorKey: "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}`
|
||||
: "--",
|
||||
},
|
||||
{
|
||||
accessorKey: "subscribe_id",
|
||||
header: t("subscribe", "Subscribe"),
|
||||
cell: ({ row }) =>
|
||||
row.original.subscribe_name ||
|
||||
getSubscribeName(row.original.subscribe_id),
|
||||
},
|
||||
{
|
||||
accessorKey: "unit_price",
|
||||
header: t("unitPrice", "Unit Price"),
|
||||
cell: ({ row }) => formatCurrency(row.original.unit_price),
|
||||
},
|
||||
{
|
||||
accessorKey: "promo_price",
|
||||
header: t("promoPrice", "Promo Price"),
|
||||
cell: ({ row }) => formatCurrency(row.original.promo_price),
|
||||
},
|
||||
]}
|
||||
empty={<Empty description={t("emptyPrices", "No promo prices")} />}
|
||||
error={
|
||||
<ErrorState
|
||||
description={t(
|
||||
"loadErrorDescription",
|
||||
"Refresh the table or try again later."
|
||||
)}
|
||||
title={t("loadPricesError", "Failed to load promo prices")}
|
||||
/>
|
||||
}
|
||||
header={{
|
||||
toolbar: (
|
||||
<PriceForm
|
||||
loading={loading}
|
||||
onSubmit={async (values) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await createPromoPrice(values);
|
||||
toast.success(t("createSuccess", "Create Success"));
|
||||
priceRef.current?.refresh();
|
||||
setLoading(false);
|
||||
return true;
|
||||
} catch (_error) {
|
||||
setLoading(false);
|
||||
return false;
|
||||
}
|
||||
}}
|
||||
rules={rules}
|
||||
subscribes={subscribes}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
params={[
|
||||
{
|
||||
key: "rule_id",
|
||||
placeholder: t("rule", "Rule"),
|
||||
options: rules.map((rule) => ({
|
||||
label: rule.name,
|
||||
value: String(rule.id),
|
||||
})),
|
||||
},
|
||||
{
|
||||
key: "subscribe_id",
|
||||
placeholder: t("subscribe", "Subscribe"),
|
||||
options: subscribes
|
||||
.filter((item) => typeof item.id === "number")
|
||||
.map((item) => ({
|
||||
label: item.name || `#${item.id}`,
|
||||
value: String(item.id),
|
||||
})),
|
||||
},
|
||||
]}
|
||||
request={async (pagination, filters) => {
|
||||
const { data } = await getPromoPriceList({
|
||||
...pagination,
|
||||
rule_id: parseOptionalNumber(filters.rule_id),
|
||||
subscribe_id: parseOptionalNumber(filters.subscribe_id),
|
||||
});
|
||||
return {
|
||||
list: data.data?.list || [],
|
||||
total: data.data?.total || 0,
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="usage">
|
||||
<ProTable<API.PromoUsage, UsageFilters>
|
||||
action={usageRef}
|
||||
columns={[
|
||||
{
|
||||
accessorKey: "rule_id",
|
||||
header: t("rule", "Rule"),
|
||||
cell: ({ row }) =>
|
||||
row.original.rule_name ||
|
||||
rules.find((rule) => rule.id === row.original.rule_id)
|
||||
?.name ||
|
||||
`#${row.original.rule_id}`,
|
||||
},
|
||||
{
|
||||
accessorKey: "user_id",
|
||||
header: t("userId", "User ID"),
|
||||
cell: ({ row }) => `#${row.original.user_id}`,
|
||||
},
|
||||
{
|
||||
accessorKey: "subscribe_id",
|
||||
header: t("subscribe", "Subscribe"),
|
||||
cell: ({ row }) =>
|
||||
row.original.subscribe_name ||
|
||||
getSubscribeName(row.original.subscribe_id),
|
||||
},
|
||||
{
|
||||
accessorKey: "order_no",
|
||||
header: t("orderNo", "Order No."),
|
||||
},
|
||||
{
|
||||
accessorKey: "promo_price",
|
||||
header: t("promoPrice", "Promo Price"),
|
||||
cell: ({ row }) => formatCurrency(row.original.promo_price),
|
||||
},
|
||||
{
|
||||
accessorKey: "used_at",
|
||||
header: t("usedAt", "Used At"),
|
||||
cell: ({ row }) => formatDate(row.original.used_at),
|
||||
},
|
||||
]}
|
||||
empty={
|
||||
<Empty description={t("emptyUsage", "No promo usage records")} />
|
||||
}
|
||||
error={
|
||||
<ErrorState
|
||||
description={t(
|
||||
"loadErrorDescription",
|
||||
"Refresh the table or try again later."
|
||||
)}
|
||||
title={t("loadUsageError", "Failed to load promo usage")}
|
||||
/>
|
||||
}
|
||||
params={[
|
||||
{
|
||||
key: "rule_id",
|
||||
placeholder: t("rule", "Rule"),
|
||||
options: rules.map((rule) => ({
|
||||
label: rule.name,
|
||||
value: String(rule.id),
|
||||
})),
|
||||
},
|
||||
{
|
||||
key: "subscribe_id",
|
||||
placeholder: t("subscribe", "Subscribe"),
|
||||
options: subscribes
|
||||
.filter((item) => typeof item.id === "number")
|
||||
.map((item) => ({
|
||||
label: item.name || `#${item.id}`,
|
||||
value: String(item.id),
|
||||
})),
|
||||
},
|
||||
{ key: "user_id", placeholder: t("userId", "User ID") },
|
||||
{ key: "order_no", placeholder: t("orderNo", "Order No.") },
|
||||
]}
|
||||
request={async (pagination, filters) => {
|
||||
const { data } = await getPromoUsageList({
|
||||
...pagination,
|
||||
rule_id: parseOptionalNumber(filters.rule_id),
|
||||
subscribe_id: parseOptionalNumber(filters.subscribe_id),
|
||||
user_id: parseOptionalNumber(filters.user_id),
|
||||
order_no: filters.order_no?.trim() || undefined,
|
||||
});
|
||||
return {
|
||||
list: data.data?.list || [],
|
||||
total: data.data?.total || 0,
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
<RuleDetail
|
||||
onOpenChange={setDetailOpen}
|
||||
open={detailOpen}
|
||||
rule={detailRule}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Button } from "@workspace/ui/components/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@workspace/ui/components/form";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "@workspace/ui/components/sheet";
|
||||
import { Combobox } from "@workspace/ui/composed/combobox";
|
||||
import { EnhancedInput } from "@workspace/ui/composed/enhanced-input";
|
||||
import { unitConversion } from "@workspace/ui/utils/unit-conversions";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { z } from "zod";
|
||||
import { getSubscribeUnitPrice } from "./utils";
|
||||
|
||||
const priceSchema = z.object({
|
||||
rule_id: z.number().min(1),
|
||||
subscribe_id: z.number().min(1),
|
||||
promo_price: z.number().min(1),
|
||||
});
|
||||
|
||||
type PriceFormValues = z.infer<typeof priceSchema>;
|
||||
|
||||
interface PriceFormProps {
|
||||
loading?: boolean;
|
||||
rules: API.PromoRule[];
|
||||
subscribes: API.SubscribeItem[];
|
||||
onSubmit: (data: API.CreatePromoPriceRequest) => Promise<boolean> | boolean;
|
||||
}
|
||||
|
||||
export default function PriceForm({
|
||||
loading,
|
||||
rules,
|
||||
subscribes,
|
||||
onSubmit,
|
||||
}: PriceFormProps) {
|
||||
const { t } = useTranslation("promo");
|
||||
const [open, setOpen] = useState(false);
|
||||
const form = useForm<PriceFormValues>({
|
||||
resolver: zodResolver(priceSchema),
|
||||
defaultValues: {
|
||||
rule_id: 0,
|
||||
subscribe_id: 0,
|
||||
promo_price: 0,
|
||||
},
|
||||
});
|
||||
const subscribeId = form.watch("subscribe_id");
|
||||
const subscribe = subscribes.find((item) => item.id === subscribeId);
|
||||
const unitPrice = getSubscribeUnitPrice(subscribe);
|
||||
|
||||
async function handleSubmit(values: PriceFormValues) {
|
||||
if (unitPrice > 0 && values.promo_price >= unitPrice) {
|
||||
form.setError("promo_price", {
|
||||
message: t(
|
||||
"form.promoPriceLessThanUnitPrice",
|
||||
"Promo price must be lower than unit price"
|
||||
),
|
||||
});
|
||||
return;
|
||||
}
|
||||
const success = await onSubmit(values);
|
||||
if (success) setOpen(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Sheet onOpenChange={setOpen} open={open}>
|
||||
<SheetTrigger asChild>
|
||||
<Button
|
||||
onClick={() => {
|
||||
form.reset({ rule_id: 0, subscribe_id: 0, promo_price: 0 });
|
||||
setOpen(true);
|
||||
}}
|
||||
size="sm"
|
||||
>
|
||||
{t("createPrice", "Create Promo Price")}
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent className="w-[520px] max-w-full md:max-w-screen-md">
|
||||
<SheetHeader>
|
||||
<SheetTitle>{t("createPrice", "Create Promo Price")}</SheetTitle>
|
||||
</SheetHeader>
|
||||
<Form {...form}>
|
||||
<form
|
||||
className="space-y-4 px-6 pt-4"
|
||||
id="promo-price-form"
|
||||
onSubmit={form.handleSubmit(handleSubmit)}
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rule_id"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("rule", "Rule")}</FormLabel>
|
||||
<FormControl>
|
||||
<Combobox<number>
|
||||
onChange={field.onChange}
|
||||
options={rules.map((rule) => ({
|
||||
label: rule.name,
|
||||
value: rule.id,
|
||||
}))}
|
||||
placeholder={t("form.selectRule", "Select rule")}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="subscribe_id"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("subscribe", "Subscribe")}</FormLabel>
|
||||
<FormControl>
|
||||
<Combobox<number>
|
||||
onChange={field.onChange}
|
||||
options={subscribes
|
||||
.filter((item) => typeof item.id === "number")
|
||||
.map((item) => ({
|
||||
label: item.name || `#${item.id}`,
|
||||
value: item.id as number,
|
||||
}))}
|
||||
placeholder={t(
|
||||
"form.selectSubscribe",
|
||||
"Select subscribe"
|
||||
)}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="promo_price"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("promoPrice", "Promo Price")}</FormLabel>
|
||||
<FormControl>
|
||||
<EnhancedInput
|
||||
formatInput={(value) =>
|
||||
unitConversion("centsToDollars", value)
|
||||
}
|
||||
formatOutput={(value) =>
|
||||
unitConversion("dollarsToCents", value)
|
||||
}
|
||||
min={0.01}
|
||||
onValueChange={(value) => field.onChange(value)}
|
||||
placeholder={t("form.enterPromoPrice", "Enter price")}
|
||||
type="number"
|
||||
value={field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
{unitPrice > 0 && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{t("unitPriceHint", "Unit price")}:{" "}
|
||||
{unitConversion("centsToDollars", unitPrice)}
|
||||
</p>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
<SheetFooter>
|
||||
<Button disabled={loading} form="promo-price-form" type="submit">
|
||||
{t("confirm", "Confirm")}
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { Badge } from "@workspace/ui/components/badge";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@workspace/ui/components/sheet";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableRow,
|
||||
} from "@workspace/ui/components/table";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { formatDate } from "@/utils/common";
|
||||
|
||||
interface RuleDetailProps {
|
||||
open: boolean;
|
||||
rule?: API.PromoRule;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export default function RuleDetail({
|
||||
open,
|
||||
rule,
|
||||
onOpenChange,
|
||||
}: RuleDetailProps) {
|
||||
const { t } = useTranslation("promo");
|
||||
|
||||
return (
|
||||
<Sheet onOpenChange={onOpenChange} open={open}>
|
||||
<SheetContent className="w-[520px] max-w-full md:max-w-screen-md">
|
||||
<SheetHeader>
|
||||
<SheetTitle>
|
||||
{rule?.name || t("ruleDetail", "Rule Detail")}
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
{rule && (
|
||||
<div className="px-6 pt-4">
|
||||
<Table>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>{t("type", "Type")}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline">
|
||||
{t(`types.${rule.type}`, rule.type)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>{t("priority", "Priority")}</TableCell>
|
||||
<TableCell>{rule.priority}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>{t("enabled", "Enabled")}</TableCell>
|
||||
<TableCell>
|
||||
{rule.enabled ? t("yes", "Yes") : t("no", "No")}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>{t("params", "Params")}</TableCell>
|
||||
<TableCell>
|
||||
<code className="whitespace-pre-wrap rounded bg-muted px-2 py-1 text-xs">
|
||||
{JSON.stringify(rule.params || {}, null, 2)}
|
||||
</code>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
{t("validityPeriod", "Validity Period")}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{rule.start_time ? formatDate(rule.start_time) : "--"} -{" "}
|
||||
{rule.end_time ? formatDate(rule.end_time) : "--"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,353 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Button } from "@workspace/ui/components/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@workspace/ui/components/form";
|
||||
import {
|
||||
RadioGroup,
|
||||
RadioGroupItem,
|
||||
} from "@workspace/ui/components/radio-group";
|
||||
import { ScrollArea } from "@workspace/ui/components/scroll-area";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "@workspace/ui/components/sheet";
|
||||
import { Switch } from "@workspace/ui/components/switch";
|
||||
import { DatePicker } from "@workspace/ui/composed/date-picker";
|
||||
import { EnhancedInput } from "@workspace/ui/composed/enhanced-input";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { z } from "zod";
|
||||
import { promoRuleTypes } from "./utils";
|
||||
|
||||
const ruleSchema = z
|
||||
.object({
|
||||
name: z.string().min(1),
|
||||
type: z.enum(["new_user", "inactive_user", "campaign"]),
|
||||
inactive_months: z.number().optional(),
|
||||
window_hours: z.number().optional(),
|
||||
priority: z.number().min(0),
|
||||
enabled: z.boolean(),
|
||||
start_time: z.number().optional(),
|
||||
end_time: z.number().optional(),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if (
|
||||
data.start_time !== undefined &&
|
||||
data.end_time !== undefined &&
|
||||
data.start_time >= data.end_time
|
||||
) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "End time must be later than start time",
|
||||
path: ["end_time"],
|
||||
});
|
||||
}
|
||||
if (
|
||||
data.type === "inactive_user" &&
|
||||
(!data.inactive_months || data.inactive_months <= 0)
|
||||
) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "Inactive months must be greater than 0",
|
||||
path: ["inactive_months"],
|
||||
});
|
||||
}
|
||||
if (
|
||||
data.type === "new_user" &&
|
||||
(!data.window_hours || data.window_hours <= 0)
|
||||
) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "Window hours must be greater than 0",
|
||||
path: ["window_hours"],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
type RuleFormValues = z.infer<typeof ruleSchema>;
|
||||
|
||||
interface RuleFormProps {
|
||||
initialValues?: API.PromoRule;
|
||||
loading?: boolean;
|
||||
onSubmit: (data: API.CreatePromoRuleRequest) => Promise<boolean> | boolean;
|
||||
title: string;
|
||||
trigger: string;
|
||||
}
|
||||
|
||||
function toFormValues(rule?: API.PromoRule): RuleFormValues {
|
||||
return {
|
||||
name: rule?.name ?? "",
|
||||
type: rule?.type ?? "inactive_user",
|
||||
inactive_months: rule?.params?.inactive_months,
|
||||
window_hours: rule?.params?.window_hours,
|
||||
priority: rule?.priority ?? 0,
|
||||
enabled: rule?.enabled ?? false,
|
||||
start_time: rule?.start_time,
|
||||
end_time: rule?.end_time,
|
||||
};
|
||||
}
|
||||
|
||||
function toRequest(values: RuleFormValues): API.CreatePromoRuleRequest {
|
||||
const params: API.PromoRuleParams =
|
||||
values.type === "inactive_user"
|
||||
? { inactive_months: values.inactive_months }
|
||||
: values.type === "new_user"
|
||||
? { window_hours: values.window_hours }
|
||||
: {};
|
||||
|
||||
return {
|
||||
name: values.name.trim(),
|
||||
type: values.type,
|
||||
params,
|
||||
priority: values.priority,
|
||||
enabled: values.enabled,
|
||||
start_time: values.start_time || undefined,
|
||||
end_time: values.end_time || undefined,
|
||||
};
|
||||
}
|
||||
|
||||
export default function RuleForm({
|
||||
initialValues,
|
||||
loading,
|
||||
onSubmit,
|
||||
title,
|
||||
trigger,
|
||||
}: RuleFormProps) {
|
||||
const { t } = useTranslation("promo");
|
||||
const [open, setOpen] = useState(false);
|
||||
const form = useForm<RuleFormValues>({
|
||||
resolver: zodResolver(ruleSchema),
|
||||
defaultValues: toFormValues(initialValues),
|
||||
});
|
||||
const type = form.watch("type");
|
||||
|
||||
useEffect(() => {
|
||||
form.reset(toFormValues(initialValues));
|
||||
}, [form, initialValues]);
|
||||
|
||||
async function handleSubmit(values: RuleFormValues) {
|
||||
const success = await onSubmit(toRequest(values));
|
||||
if (success) setOpen(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Sheet onOpenChange={setOpen} open={open}>
|
||||
<SheetTrigger asChild>
|
||||
<Button
|
||||
onClick={() => {
|
||||
form.reset(toFormValues(initialValues));
|
||||
setOpen(true);
|
||||
}}
|
||||
size="sm"
|
||||
>
|
||||
{trigger}
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent className="w-[520px] max-w-full md:max-w-screen-md">
|
||||
<SheetHeader>
|
||||
<SheetTitle>{title}</SheetTitle>
|
||||
</SheetHeader>
|
||||
<ScrollArea className="h-[calc(100vh-48px-36px-36px-env(safe-area-inset-top))]">
|
||||
<Form {...form}>
|
||||
<form
|
||||
className="space-y-4 px-6 pt-4"
|
||||
id="promo-rule-form"
|
||||
onSubmit={form.handleSubmit(handleSubmit)}
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("form.name", "Name")}</FormLabel>
|
||||
<FormControl>
|
||||
<EnhancedInput
|
||||
onValueChange={(value) => field.onChange(value)}
|
||||
placeholder={t("form.namePlaceholder", "Rule name")}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="type"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("form.type", "Rule Type")}</FormLabel>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
className="grid gap-2 sm:grid-cols-3"
|
||||
onValueChange={(value) =>
|
||||
field.onChange(value as API.PromoRuleType)
|
||||
}
|
||||
value={field.value}
|
||||
>
|
||||
{promoRuleTypes.map((item) => (
|
||||
<FormItem
|
||||
className="flex items-center space-x-2 space-y-0"
|
||||
key={item}
|
||||
>
|
||||
<FormControl>
|
||||
<RadioGroupItem value={item} />
|
||||
</FormControl>
|
||||
<FormLabel className="font-normal">
|
||||
{t(`types.${item}`, item)}
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{type === "inactive_user" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inactive_months"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("form.inactiveMonths", "Inactive Months")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<EnhancedInput
|
||||
min={1}
|
||||
onValueChange={(value) => field.onChange(value)}
|
||||
placeholder={t(
|
||||
"form.inactiveMonthsPlaceholder",
|
||||
"Months without purchase"
|
||||
)}
|
||||
type="number"
|
||||
value={field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{type === "new_user" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="window_hours"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("form.windowHours", "Window Hours")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<EnhancedInput
|
||||
min={1}
|
||||
onValueChange={(value) => field.onChange(value)}
|
||||
placeholder={t(
|
||||
"form.windowHoursPlaceholder",
|
||||
"Hours after registration"
|
||||
)}
|
||||
type="number"
|
||||
value={field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="priority"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("priority", "Priority")}</FormLabel>
|
||||
<FormControl>
|
||||
<EnhancedInput
|
||||
min={0}
|
||||
onValueChange={(value) => field.onChange(value)}
|
||||
placeholder="0"
|
||||
type="number"
|
||||
value={field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="start_time"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("startTime", "Start Time")}</FormLabel>
|
||||
<FormControl>
|
||||
<DatePicker
|
||||
onChange={(value) => field.onChange(value)}
|
||||
placeholder={t("form.selectStartTime", "Select time")}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="end_time"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("endTime", "End Time")}</FormLabel>
|
||||
<FormControl>
|
||||
<DatePicker
|
||||
onChange={(value) => field.onChange(value)}
|
||||
placeholder={t("form.selectEndTime", "Select time")}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="enabled"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center justify-between rounded-md border p-3">
|
||||
<div>
|
||||
<FormLabel>{t("enabled", "Enabled")}</FormLabel>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
</ScrollArea>
|
||||
<SheetFooter>
|
||||
<Button disabled={loading} form="promo-rule-form" type="submit">
|
||||
{t("confirm", "Confirm")}
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { unitConversion } from "@workspace/ui/utils/unit-conversions";
|
||||
|
||||
export const promoRuleTypes: API.PromoRuleType[] = [
|
||||
"inactive_user",
|
||||
"new_user",
|
||||
"campaign",
|
||||
];
|
||||
|
||||
export function formatCurrency(value?: number) {
|
||||
if (typeof value !== "number") return "--";
|
||||
return `$${unitConversion("centsToDollars", value)}`;
|
||||
}
|
||||
|
||||
export function parseOptionalNumber(value?: string) {
|
||||
if (!value) return;
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : undefined;
|
||||
}
|
||||
|
||||
export function getSubscribeUnitPrice(subscribe?: API.SubscribeItem) {
|
||||
return typeof subscribe?.unit_price === "number" ? subscribe.unit_price : 0;
|
||||
}
|
||||
Reference in New Issue
Block a user