banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(payment): implement first recharge offer functionality and UI updates

Browse Source
This commit is contained in:
chenhang
2026-07-02 14:39:09 +08:00
parent 7b35fd18c5
commit d4de1370e8
20 changed files with 607 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/subscription/__tests__/subscription-screen.helpers.test.ts
+51
View File
@@ -6,6 +6,7 @@ import {
findSelectedSubscriptionPlan,
getDefaultPayChannelForCountryCode,
getDefaultSubscriptionPlanId,
getFirstRechargeOfferView,
toCoinsOfferPlanViews,
toVipOfferPlanViews,
} from "../subscription-screen.helpers";
@@ -103,6 +104,56 @@ describe("subscription screen helpers", () => {
]);
});
it("maps first recharge offer fields to plan views", () => {
const vipViews = toVipOfferPlanViews([
makePlan({
planId: "vip_monthly",
amountCents: 995,
originalAmountCents: 1990,
isFirstRechargeOffer: true,
firstRechargeDiscountPercent: 50,
promotionType: "first_recharge_half_price",
}),
]);
const coinViews = toCoinsOfferPlanViews([
makePlan({
planId: "coin_1000",
orderType: "coins_1000",
vipDays: null,
dolAmount: 1000,
amountCents: 495,
originalAmountCents: 990,
isFirstRechargeOffer: true,
firstRechargeDiscountPercent: 50,
promotionType: "first_recharge_half_price",
}),
]);
expect(vipViews[0]).toMatchObject({
price: "9.95",
originalPrice: "19.9",
isFirstRechargeOffer: true,
firstRechargeDiscountPercent: 50,
});
expect(coinViews[0]).toMatchObject({
price: "4.95",
originalPrice: "9.9",
isFirstRechargeOffer: true,
firstRechargeDiscountPercent: 50,
});
expect(
getFirstRechargeOfferView({
isFirstRecharge: true,
discountPercent: 50,
vipPlans: vipViews,
coinPlans: coinViews,
}),
).toMatchObject({
badgeText: "50% OFF",
title: "New User First Recharge",
});
});
it("selects the first VIP plan by default when VIP can be purchased", () => {
expect(
getDefaultSubscriptionPlanId({
src/app/subscription/components/subscription-coins-offer-section.module.css
+40 -2
View File
@@ -45,7 +45,7 @@
.row {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
grid-template-columns: 48px minmax(0, 1fr) auto auto;
align-items: center;
width: 100%;
min-height: 48px;
@@ -102,6 +102,28 @@
line-height: 1.2;
}
.offerBadge {
justify-self: end;
padding: 4px 8px;
border-radius: 999px;
background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
color: #ffffff;
font-size: 11px;
font-weight: 900;
line-height: 1;
white-space: nowrap;
box-shadow: 0 7px 16px rgba(255, 95, 174, 0.24);
}
.priceGroup {
display: inline-flex;
min-width: 54px;
flex-direction: column;
align-items: flex-end;
justify-content: center;
line-height: 1;
}
.price {
font-size: 16px;
font-weight: 800;
@@ -109,6 +131,16 @@
white-space: nowrap;
}
.originalPrice {
margin-top: 3px;
color: #9c8b91;
font-size: 12px;
font-weight: 800;
line-height: 1;
text-decoration: line-through;
white-space: nowrap;
}
@media (max-width: 360px) {
.title {
font-size: 20px;
@@ -120,11 +152,17 @@
}
.row {
grid-template-columns: 46px minmax(0, 1fr) auto;
grid-template-columns: 46px minmax(0, 1fr) auto auto;
}
.coins,
.price {
font-size: 14px;
}
.offerBadge {
padding-right: 6px;
padding-left: 6px;
font-size: 10px;
}
}
src/app/subscription/components/subscription-coins-offer-section.tsx
+20 -3
View File
@@ -9,6 +9,10 @@ export interface CoinsOfferPlanView {
coins: number;
price: string;
currency: string;
originalPrice?: string;
isFirstRechargeOffer?: boolean;
firstRechargeDiscountPercent?: number | null;
promotionType?: string | null;
}
export interface SubscriptionCoinsOfferSectionProps {
@@ -45,9 +49,22 @@ export function SubscriptionCoinsOfferSection({
<FaCoins size={18} />
</span>
<span className={styles.coins}>{plan.coins} Coins</span>
<span className={styles.price}>
{plan.currency}
{plan.price}
{plan.isFirstRechargeOffer ? (
<span className={styles.offerBadge}>
{plan.firstRechargeDiscountPercent ?? 50}% OFF
</span>
) : null}
<span className={styles.priceGroup}>
<span className={styles.price}>
{plan.currency}
{plan.price}
</span>
{plan.originalPrice ? (
<span className={styles.originalPrice}>
{plan.currency}
{plan.originalPrice}
</span>
) : null}
</span>
</button>
);
src/app/subscription/components/subscription-screen.module.css
+46
View File
@@ -18,6 +18,52 @@
display: inline-flex;
}
.firstRechargeBanner {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
padding: 12px 14px;
border: 1px solid rgba(255, 95, 174, 0.28);
border-radius: 22px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 239, 248, 0.94) 100%),
#ffffff;
box-shadow: 0 14px 32px rgba(255, 95, 174, 0.16);
}
.firstRechargeBadge {
flex: 0 0 auto;
padding: 8px 10px;
border-radius: 999px;
background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
color: #ffffff;
font-size: 13px;
font-weight: 900;
line-height: 1;
box-shadow: 0 10px 22px rgba(255, 95, 174, 0.25);
}
.firstRechargeCopy {
min-width: 0;
}
.firstRechargeTitle {
margin: 0;
color: #181014;
font-size: 17px;
font-weight: 900;
line-height: 1.15;
}
.firstRechargeSubtitle {
margin: 4px 0 0;
color: #75656d;
font-size: 12px;
font-weight: 700;
line-height: 1.25;
}
.offerStack {
display: flex;
flex-direction: column;
src/app/subscription/components/subscription-vip-offer-section.module.css
+20 -1
View File
@@ -63,9 +63,10 @@
}
.planCard {
position: relative;
display: flex;
min-width: 0;
min-height: 118px;
min-height: 128px;
flex-direction: column;
align-items: center;
justify-content: center;
@@ -101,7 +102,25 @@
transform: translateY(-3px);
}
.offerBadge {
position: absolute;
top: 8px;
left: 50%;
max-width: calc(100% - 12px);
padding: 3px 7px;
border-radius: 999px;
background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
color: #ffffff;
font-size: 10px;
font-weight: 900;
line-height: 1;
white-space: nowrap;
box-shadow: 0 7px 16px rgba(255, 95, 174, 0.28);
transform: translateX(-50%);
}
.planTitle {
margin-top: 12px;
font-size: 19px;
font-weight: 800;
line-height: 1.15;
src/app/subscription/components/subscription-vip-offer-section.tsx
+11 -1
View File
@@ -8,6 +8,9 @@ export interface VipOfferPlanView {
price: string;
currency: string;
originalPrice: string;
isFirstRechargeOffer?: boolean;
firstRechargeDiscountPercent?: number | null;
promotionType?: string | null;
}
export interface SubscriptionVipOfferSectionProps {
@@ -48,12 +51,19 @@ export function SubscriptionVipOfferSection({
aria-label={`${plan.title}, ${plan.price} ${plan.currency}`}
onClick={() => onSelectPlan(plan.id)}
>
{plan.isFirstRechargeOffer ? (
<span className={styles.offerBadge}>
First recharge {plan.firstRechargeDiscountPercent ?? 50}% OFF
</span>
) : null}
<span className={styles.planTitle}>{plan.title}</span>
<span className={styles.priceLine}>
<span className={styles.price}>{plan.price}</span>
<span className={styles.currency}>{plan.currency}</span>
</span>
<span className={styles.originalPrice}>{plan.originalPrice}</span>
<span className={styles.originalPrice}>
{plan.originalPrice || "\u00a0"}
</span>
</button>
);
})}
src/app/subscription/subscription-screen.helpers.ts
+35
View File
@@ -6,6 +6,12 @@ import type { VipOfferPlanView } from "./components/subscription-vip-offer-secti
export type SubscriptionType = "vip" | "topup";
export interface FirstRechargeOfferView {
badgeText: string;
title: string;
subtitle: string;
}
export function isVipPlan(plan: PaymentPlan): boolean {
return plan.vipDays !== null;
}
@@ -54,6 +60,9 @@ export function toVipOfferPlanView(plan: PaymentPlan): VipOfferPlanView {
price: formatOfferAmount(plan.amountCents),
currency: formatOfferCurrency(plan.currency),
originalPrice: formatOfferAmount(plan.originalAmountCents),
isFirstRechargeOffer: plan.isFirstRechargeOffer,
firstRechargeDiscountPercent: plan.firstRechargeDiscountPercent,
promotionType: plan.promotionType,
};
}
@@ -63,6 +72,10 @@ export function toCoinsOfferPlanView(plan: PaymentPlan): CoinsOfferPlanView {
coins: plan.dolAmount ?? 0,
price: formatOfferAmount(plan.amountCents),
currency: formatCoinCurrency(plan.currency),
originalPrice: formatOfferAmount(plan.originalAmountCents),
isFirstRechargeOffer: plan.isFirstRechargeOffer,
firstRechargeDiscountPercent: plan.firstRechargeDiscountPercent,
promotionType: plan.promotionType,
};
}
@@ -123,3 +136,25 @@ export function getDefaultSubscriptionPlanId(input: {
if (input.selectedPlan !== null) return null;
return input.coinPlans[0]?.id ?? null;
}
export function getFirstRechargeOfferView(input: {
isFirstRecharge: boolean;
discountPercent?: number | null;
vipPlans: readonly VipOfferPlanView[];
coinPlans: readonly CoinsOfferPlanView[];
}): FirstRechargeOfferView | null {
const promotedPlan = [...input.vipPlans, ...input.coinPlans].find(
(plan) => plan.isFirstRechargeOffer,
);
if (!input.isFirstRecharge && !promotedPlan) return null;
const discountPercent =
promotedPlan?.firstRechargeDiscountPercent ?? input.discountPercent ?? 50;
const badgeText = `${discountPercent}% OFF`;
return {
badgeText,
title: "New User First Recharge",
subtitle:
"Your first recharge price is already applied. No code needed.",
};
}
src/app/subscription/subscription-screen.tsx
+35
View File
@@ -16,6 +16,7 @@ import {
import styles from "./components/subscription-screen.module.css";
import {
findSelectedSubscriptionPlan,
getFirstRechargeOfferView,
getDefaultSubscriptionPlanId,
toCoinsOfferPlanViews,
toVipOfferPlanViews,
@@ -60,6 +61,21 @@ export function SubscriptionScreen({
() => toCoinsOfferPlanViews(payment.plans),
[payment.plans],
);
const firstRechargeOffer = useMemo(
() =>
getFirstRechargeOfferView({
isFirstRecharge: payment.isFirstRecharge,
discountPercent: payment.firstRechargeOffer?.discountPercent,
vipPlans: vipOfferPlans,
coinPlans: directCoinsPlans,
}),
[
directCoinsPlans,
payment.firstRechargeOffer?.discountPercent,
payment.isFirstRecharge,
vipOfferPlans,
],
);
const selectedPlan = findSelectedSubscriptionPlan({
canSubscribeVip,
@@ -111,6 +127,25 @@ export function SubscriptionScreen({
/>
</header>
{firstRechargeOffer ? (
<section
className={styles.firstRechargeBanner}
aria-label="First recharge offer"
>
<span className={styles.firstRechargeBadge}>
{firstRechargeOffer.badgeText}
</span>
<div className={styles.firstRechargeCopy}>
<h2 className={styles.firstRechargeTitle}>
{firstRechargeOffer.title}
</h2>
<p className={styles.firstRechargeSubtitle}>
{firstRechargeOffer.subtitle}
</p>
</div>
</section>
) : null}
<div className={styles.offerStack}>
{canSubscribeVip ? (
<SubscriptionVipOfferSection