HI-VPN/hi-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

✨ feat: Add original price display option and enhance inventory messages in subscription components

Browse Source
This commit is contained in:
web@ppanel
2025-12-29 05:34:01 +00:00
parent 7279275532
commit 543a7b9eb9
25 changed files with 241 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin/public/assets/locales/en-US/components.json
+2
View File
@@ -44,6 +44,8 @@
"60003": "An existing subscription is detected. Please cancel it before proceeding.",
"60004": "Unable to delete at the moment as the subscription has active users.",
"60005": "Single subscription mode has exceeded user limit",
"60006": "User quota limit has been reached, unable to continue.",
"60007": "Insufficient inventory, please try again later or contact the administrator.",
"70001": "Incorrect verification code, please re-enter.",
"80001": "Task was not successfully queued, please try again later.",
"90001": "Please disable DEBUG mode and try again.",
apps/admin/public/assets/locales/en-US/product.json
+4
View File
@@ -30,6 +30,8 @@
"discountPercent": "Discount Percentage",
"Hour": "Hour",
"inventory": "Subscription Limit",
"inventoryDescription": "Set to -1 for unlimited inventory",
"unlimitedInventory": "Unlimited (enter -1)",
"language": "Language",
"languageDescription": "Leave empty for default without language restriction",
"languagePlaceholder": "Language identifier for the subscription, e.g., en-US, zh-CN",
@@ -54,6 +56,8 @@
"resetOn1st": "Reset on the 1st",
"selectResetCycle": "Please select a reset cycle",
"selectUnitTime": "Please select a unit of time",
"showOriginalPrice": "Show Original Price",
"showOriginalPriceDescription": "When enabled, the subscription card will display both the original price and the discounted price to help users understand the discount amount",
"speedLimit": "Speed Limit ",
"traffic": "Traffic",
"unitPrice": "Unit Price",
apps/admin/public/assets/locales/zh-CN/components.json
+2
View File
@@ -44,6 +44,8 @@
"60003": "检测到现有订阅，请先取消后再继续。",
"60004": "由于订阅有活跃用户，暂时无法删除。",
"60005": "单一订阅模式已超过用户限制",
"60006": "用户配额已达到限制，无法继续操作。",
"60007": "库存不足，请稍后再试或联系管理员。",
"70001": "验证码不正确，请重新输入。",
"80001": "任务未成功加入队列，请稍后再试。",
"90001": "请禁用 DEBUG 模式后再试。",
apps/admin/public/assets/locales/zh-CN/product.json
+4
View File
@@ -30,6 +30,8 @@
"discountPercent": "折扣百分比",
"Hour": "小时",
"inventory": "订阅库存",
"inventoryDescription": "设置为 -1 表示不限制库存",
"unlimitedInventory": "无限制（输入 -1）",
"language": "语言",
"languageDescription": "留空为默认无语言限制",
"languagePlaceholder": "订阅的语言标识符，例如 en-US、zh-CN",
@@ -54,6 +56,8 @@
"resetOn1st": "每月1日重置",
"selectResetCycle": "请选择重置周期",
"selectUnitTime": "请选择时间单位",
"showOriginalPrice": "显示原价",
"showOriginalPriceDescription": "开启后，在订阅卡片上将会显示原价和折后价，帮助用户了解优惠幅度",
"speedLimit": "速度限制",
"traffic": "流量",
"unitPrice": "单价",
apps/admin/src/sections/dashboard/components/system-version-card.tsx
+3 -3
View File
@@ -69,7 +69,7 @@ export default function SystemVersionCard() {
queryFn: async () => {
const { data } = await basicCheckServiceVersion(
{
service_name: "admin",
service_name: "admin-web-with-api",
secret: moduleConfig!.secret,
},
{ skipErrorHandler: true }
@@ -105,13 +105,13 @@ export default function SystemVersionCard() {
setIsUpdatingWeb(true);
try {
await basicUpdateService({
service_name: "admin",
service_name: "admin-web-with-api",
secret: moduleConfig.secret,
});
toast.success(t("adminUpdateSuccess", "Admin updated successfully"));
await basicUpdateService({
service_name: "user",
service_name: "user-web-with-api",
secret: moduleConfig.secret,
});
toast.success(t("userUpdateSuccess", "User updated successfully"));
apps/admin/src/sections/product/subscribe-form.tsx
+32 -2
View File
@@ -120,6 +120,7 @@ export default function SubscribeForm<T extends Record<string, any>>({
allow_deduction: z.boolean().optional(),
reset_cycle: z.number().optional(),
renewal_reset: z.boolean().optional(),
show_original_price: z.boolean().optional(),
});
const form = useForm<z.infer<typeof formSchema>>({
@@ -444,16 +445,18 @@ export default function SubscribeForm<T extends Record<string, any>>({
<FormLabel>{t("form.inventory")}</FormLabel>
<FormControl>
<EnhancedInput
min={0}
onValueChange={(value) => {
form.setValue(field.name, value);
}}
placeholder={t("form.noLimit")}
placeholder={t("form.unlimitedInventory")}
step={1}
type="number"
value={field.value}
/>
</FormControl>
<FormDescription>
{t("form.inventoryDescription")}
</FormDescription>
<FormMessage />
</FormItem>
)}
@@ -864,6 +867,33 @@ export default function SubscribeForm<T extends Record<string, any>>({
</FormItem>
)}
/>
<FormField
control={form.control}
name="show_original_price"
render={({ field }) => (
<FormItem>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<FormLabel>
{t("form.showOriginalPrice")}
</FormLabel>
<FormDescription>
{t("form.showOriginalPriceDescription")}
</FormDescription>
</div>
<FormControl>
<Switch
checked={!!field.value}
onCheckedChange={(value) => {
form.setValue(field.name, value);
}}
/>
</FormControl>
</div>
<FormMessage />
</FormItem>
)}
/>
</div>
</TabsContent>
apps/admin/src/sections/product/subscribe-table.tsx
+8 -9
View File
@@ -208,15 +208,14 @@ export default function SubscribeTable() {
{
accessorKey: "inventory",
header: t("inventory"),
cell: ({ row }) => (
<Display
type="number"
unlimited
value={
row.getValue("inventory") === -1 ? 0 : row.getValue("inventory")
}
/>
),
cell: ({ row }) => {
const inventory = row.getValue("inventory") as number;
return inventory === -1 ? (
t("unlimited")
) : (
<Display type="number" unlimited value={inventory} />
);
},
},
{
accessorKey: "quota",
apps/user/public/assets/locales/en-US/components.json
+2
View File
@@ -44,6 +44,8 @@
"60003": "An existing subscription is detected. Please cancel it before proceeding.",
"60004": "Unable to delete at the moment as the subscription has active users.",
"60005": "Single subscription mode has exceeded user limit",
"60006": "User quota limit has been reached, unable to continue.",
"60007": "Insufficient inventory, please try again later or contact the administrator.",
"70001": "Incorrect verification code, please re-enter.",
"80001": "Task was not successfully queued, please try again later.",
"90001": "Please disable DEBUG mode and try again.",
apps/user/public/assets/locales/en-US/subscribe.json
+1
View File
@@ -6,6 +6,7 @@
"duration": "Duration",
"fee": "Fee",
"gift": "gift Deduction",
"originalPrice": "Original Price (Monthly)",
"price": "Price",
"productDiscount": "Product Discount",
"total": "Total"
apps/user/public/assets/locales/zh-CN/components.json
+2
View File
@@ -44,6 +44,8 @@
"60003": "检测到现有订阅，请先取消后再继续。",
"60004": "由于订阅有活跃用户，暂时无法删除。",
"60005": "单一订阅模式已超过用户限制",
"60006": "用户配额已达到限制，无法继续操作。",
"60007": "库存不足，请稍后再试或联系管理员。",
"70001": "验证码不正确，请重新输入。",
"80001": "任务未成功加入队列，请稍后再试。",
"90001": "请禁用 DEBUG 模式后再试。",
apps/user/public/assets/locales/zh-CN/subscribe.json
+1
View File
@@ -6,6 +6,7 @@
"duration": "套餐时长",
"fee": "手续费",
"gift": "赠金抵扣",
"originalPrice": "原价（按月）",
"price": "价格",
"productDiscount": "商品折扣",
"total": "总价"
apps/user/src/sections/main/product-showcase/content.tsx
+38 -13
View File
@@ -142,19 +142,44 @@ export function Content({ subscriptionData }: ProductShowcaseProps) {
</CardContent>
<Separator />
<CardFooter className="relative flex flex-col gap-4 p-4">
<motion.h2
animate={{ opacity: 1 }}
className="pb-4 font-semibold text-2xl sm:text-3xl"
initial={{ opacity: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
>
<Display type="currency" value={item.unit_price} />
<span className="font-medium text-base">
/
{unitTimeMap[item.unit_time!] ||
t(item.unit_time || "Month", item.unit_time || "Month")}
</span>
</motion.h2>
{(() => {
const hasDiscount = item.discount && item.discount.length > 0;
const shouldShowOriginal = item.show_original_price !== false;
const displayPrice =
shouldShowOriginal || !hasDiscount
? item.unit_price
: Math.round(
item.unit_price *
(item.discount?.[0]?.quantity ?? 1) *
((item.discount?.[0]?.discount ?? 100) / 100)
);
const displayQuantity =
shouldShowOriginal || !hasDiscount
? 1
: (item.discount?.[0]?.quantity ?? 1);
const unitTime =
unitTimeMap[item.unit_time!] ||
t(item.unit_time || "Month", item.unit_time || "Month");
return (
<motion.h2
animate={{ opacity: 1 }}
className="pb-4 font-semibold text-2xl sm:text-3xl"
initial={{ opacity: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
>
<Display type="currency" value={displayPrice} />
<span className="font-medium text-base">
{displayQuantity === 1
? `/${unitTime}`
: `/${displayQuantity} ${unitTime}`}
</span>
</motion.h2>
);
})()}
<motion.div>
<Button
asChild
apps/user/src/sections/purchasing/content.tsx
+1
View File
@@ -282,6 +282,7 @@ export default function Content({
...order,
quantity: params.quantity,
unit_price: subscription?.unit_price,
show_original_price: subscription?.show_original_price,
}}
/>
</CardContent>
apps/user/src/sections/purchasing/order.tsx
+1
View File
@@ -178,6 +178,7 @@ export default function Order() {
order={{
...data,
unit_price: data?.subscribe?.unit_price,
show_original_price: data?.subscribe?.show_original_price,
}}
/>
</CardContent>
apps/user/src/sections/subscribe/billing.tsx
+14 -1
View File
@@ -10,6 +10,7 @@ interface SubscribeBillingProps {
unit_price: number;
unit_time: string;
subscribe_discount: number;
show_original_price?: boolean;
}
>;
}
@@ -33,7 +34,19 @@ export function SubscribeBilling({ order }: Readonly<SubscribeBillingProps>) {
{t(order?.unit_time || "Month", order?.unit_time || "Month")}
</span>
</li>
)}
)}{" "}
{order?.show_original_price !== false &&
order?.type &&
[1, 2].includes(order?.type) && (
<li>
<span className="text-muted-foreground">
{t("billing.originalPrice", "Original Price (Monthly)")}
</span>
<span>
<Display type="currency" value={order?.unit_price} />
</span>
</li>
)}{" "}
<li>
<span className="text-muted-foreground">
{t("billing.price", "Price")}
apps/user/src/sections/subscribe/index.tsx
+33 -8
View File
@@ -122,14 +122,39 @@ export default function Subscribe() {
</CardContent>
<Separator />
<CardFooter className="flex flex-col gap-2">
<h2 className="pb-8 font-semibold text-2xl sm:text-3xl">
<Display type="currency" value={item.unit_price} />
<span className="font-medium text-base">
/
{unitTimeMap[item.unit_time!] ||
t(item.unit_time || "Month", item.unit_time || "Month")}
</span>
</h2>
{(() => {
const hasDiscount = item.discount && item.discount.length > 0;
const shouldShowOriginal = item.show_original_price !== false;
const displayPrice =
shouldShowOriginal || !hasDiscount
? item.unit_price
: Math.round(
item.unit_price *
(item.discount?.[0]?.quantity ?? 1) *
((item.discount?.[0]?.discount ?? 100) / 100)
);
const displayQuantity =
shouldShowOriginal || !hasDiscount
? 1
: (item.discount?.[0]?.quantity ?? 1);
const unitTime =
unitTimeMap[item.unit_time!] ||
t(item.unit_time || "Month", item.unit_time || "Month");
return (
<h2 className="pb-8 font-semibold text-2xl sm:text-3xl">
<Display type="currency" value={displayPrice} />
<span className="font-medium text-base">
{displayQuantity === 1
? `/${unitTime}`
: `/${displayQuantity} ${unitTime}`}
</span>
</h2>
);
})()}
<Button
className="absolute bottom-0 w-full rounded-t-none rounded-b-xl"
onClick={() => {
apps/user/src/sections/subscribe/purchase.tsx
+1
View File
@@ -127,6 +127,7 @@ export default function Purchase({
...order,
quantity: params.quantity,
unit_price: subscribe?.unit_price,
show_original_price: subscribe?.show_original_price,
}}
/>
</CardContent>
apps/user/src/sections/subscribe/renewal.tsx
+1
View File
@@ -126,6 +126,7 @@ export default function Renewal({ id, subscribe }: Readonly<RenewalProps>) {
...order,
quantity: params.quantity,
unit_price: subscribe?.unit_price,
show_original_price: subscribe?.show_original_price,
}}
/>
</CardContent>
apps/user/src/sections/user/payment/index.tsx
+1
View File
@@ -164,6 +164,7 @@ export default function Page() {
order={{
...data,
unit_price: data?.subscribe?.unit_price,
show_original_price: data?.subscribe?.show_original_price,
}}
/>
</CardContent>