feat(subscription): add VIP subscription page
Add a new /subscription route showing three VIP membership plans (Monthly, Quarterly, Annual) with a pink→peach banner, per-plan gradient price bars, a benefits card, a mock activate CTA, and an agreement checkbox. - New reusable <Checkbox /> in src/app/_components/core for the legal agreement toggle - Hardcoded SUBSCRIPTION_PLANS constant in src/data/constants - New SubscriptionScreen composed of 7 colocated components (back link, user row, banner, plan card, benefits card, CTA button) with CSS Modules matching the existing design-token system - Route registered as protected and reached from /sidebar "Membership" - Mock CTA: window.alert + router.push(/chat) — no payment calls Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @file Automatically generated by barrelsby.
|
||||
*/
|
||||
|
||||
export * from "./subscription-back-link";
|
||||
export * from "./subscription-banner";
|
||||
export * from "./subscription-benefits-card";
|
||||
export * from "./subscription-cta-button";
|
||||
export * from "./subscription-plan-card";
|
||||
export * from "./subscription-screen";
|
||||
export * from "./subscription-user-row";
|
||||
@@ -0,0 +1,20 @@
|
||||
.backLink {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
margin-left: -8px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.backLink:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
color: inherit;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
/**
|
||||
* 订阅页返回箭头
|
||||
*
|
||||
* 视觉规格（与设计稿对齐）：
|
||||
* - 24×24 SVG chevron-left
|
||||
* - 黑色，2px 描边
|
||||
* - 无 "Back" 文本
|
||||
*/
|
||||
import Link from "next/link";
|
||||
|
||||
import { ROUTES } from "@/router/routes";
|
||||
|
||||
import styles from "./subscription-back-link.module.css";
|
||||
|
||||
export interface SubscriptionBackLinkProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SubscriptionBackLink({ className }: SubscriptionBackLinkProps) {
|
||||
return (
|
||||
<Link
|
||||
href={ROUTES.sidebar}
|
||||
aria-label="Back"
|
||||
className={[styles.backLink, className].filter(Boolean).join(" ")}
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
className={styles.icon}
|
||||
>
|
||||
<path
|
||||
d="M15 6l-6 6 6 6"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.banner {
|
||||
position: relative;
|
||||
background: linear-gradient(90deg, #f96ade 0%, #ffb88a 100%);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-lg) var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* 向下指的 CSS 三角 */
|
||||
.pointer {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 10px solid #ffb88a;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
/**
|
||||
* 订阅页渐变横幅
|
||||
*
|
||||
* 视觉规格（与设计稿对齐）：
|
||||
* - 粉→桃渐变背景（90deg）
|
||||
* - 居中白色 17px/600 文字
|
||||
* - 底部中央有一个向下指的 CSS 三角
|
||||
*/
|
||||
import styles from "./subscription-banner.module.css";
|
||||
|
||||
export interface SubscriptionBannerProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SubscriptionBanner({ className }: SubscriptionBannerProps) {
|
||||
return (
|
||||
<div
|
||||
className={[styles.banner, className].filter(Boolean).join(" ")}
|
||||
role="note"
|
||||
>
|
||||
<p className={styles.text}>Subscribe to become the VIP Member</p>
|
||||
<span className={styles.pointer} aria-hidden="true" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--color-auth-primary-gradient-start),
|
||||
var(--color-auth-primary-gradient-end)
|
||||
);
|
||||
padding: var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-auth-text-primary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item + .item {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.numeral {
|
||||
flex: 0 0 auto;
|
||||
font-weight: 500;
|
||||
min-width: 20px;
|
||||
color: var(--color-auth-text-primary);
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
/**
|
||||
* 订阅权益卡片
|
||||
*
|
||||
* 视觉规格（与设计稿对齐）：
|
||||
* - 白色卡片，--radius-xl 圆角
|
||||
* - 顶部粉色渐变条：居中白色标题
|
||||
* - 主体：1./2./3./4. 编号列表
|
||||
* - 行间细分隔线
|
||||
*/
|
||||
import styles from "./subscription-benefits-card.module.css";
|
||||
|
||||
export interface SubscriptionBenefitsCardProps {
|
||||
title: string;
|
||||
items: readonly string[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SubscriptionBenefitsCard({
|
||||
title,
|
||||
items,
|
||||
className,
|
||||
}: SubscriptionBenefitsCardProps) {
|
||||
return (
|
||||
<section
|
||||
className={[styles.card, className].filter(Boolean).join(" ")}
|
||||
>
|
||||
<header className={styles.header}>
|
||||
<h2 className={styles.title}>{title}</h2>
|
||||
</header>
|
||||
<ol className={styles.list}>
|
||||
{items.map((item, idx) => (
|
||||
<li key={idx} className={styles.item}>
|
||||
<span className={styles.numeral}>{idx + 1}.</span>
|
||||
<span className={styles.text}>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/* 视觉规格：
|
||||
* - 全宽，52px 高
|
||||
* - 粉渐变（#f96ADE → #f657A0）
|
||||
* - 半径 24，白字 16px/600
|
||||
* - 阴影 0 3px 5px rgba(208,12,65,0.20)
|
||||
*/
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
padding: 0 var(--spacing-lg);
|
||||
border: none;
|
||||
border-radius: var(--radius-xxxl);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--color-auth-primary-gradient-start),
|
||||
var(--color-auth-primary-gradient-end)
|
||||
);
|
||||
box-shadow: 0 3px 5px var(--color-auth-primary-button-shadow);
|
||||
color: #ffffff;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: filter 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.button:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button:not(:disabled):active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
flex: 1 1 auto;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: #ffffff transparent transparent transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
/**
|
||||
* 订阅页主操作按钮
|
||||
*
|
||||
* 视觉规格（与设计稿对齐）：
|
||||
* - 全宽，52px 高，--radius-xxxl 圆角
|
||||
* - 粉色渐变（#f96ADE → #f657A0）
|
||||
* - 白字 16px/600 + 粉色阴影
|
||||
* - :disabled 灰化
|
||||
*/
|
||||
import type { ButtonHTMLAttributes, ReactNode } from "react";
|
||||
|
||||
import styles from "./subscription-cta-button.module.css";
|
||||
|
||||
export interface SubscriptionCtaButtonProps
|
||||
extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
children: ReactNode;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export function SubscriptionCtaButton({
|
||||
children,
|
||||
isLoading = false,
|
||||
className,
|
||||
disabled,
|
||||
...rest
|
||||
}: SubscriptionCtaButtonProps) {
|
||||
const classes = [styles.button, className].filter(Boolean).join(" ");
|
||||
return (
|
||||
<button
|
||||
{...rest}
|
||||
type="button"
|
||||
disabled={disabled || isLoading}
|
||||
className={classes}
|
||||
>
|
||||
<span className={styles.label}>
|
||||
{isLoading ? <span className={styles.spinner} aria-hidden="true" /> : null}
|
||||
{children}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm) var(--spacing-xs) 0;
|
||||
background: #ffffff;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease,
|
||||
transform 0.05s ease;
|
||||
width: 100%;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.card:not(:disabled):active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 4px 12px rgba(248, 77, 150, 0.18);
|
||||
}
|
||||
|
||||
.selected {
|
||||
border-color: var(--color-accent);
|
||||
border-width: 2px;
|
||||
box-shadow: 0 6px 16px rgba(248, 77, 150, 0.28);
|
||||
}
|
||||
|
||||
.name {
|
||||
margin: 0 0 var(--spacing-xs);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
color: var(--color-auth-text-primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.priceBlock {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
color: #000;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
color: #000;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.originalPrice {
|
||||
margin: 4px 0 var(--spacing-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
color: #999999;
|
||||
text-decoration: line-through;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.perDayBar {
|
||||
align-self: stretch;
|
||||
margin: 0 calc(-1 * var(--spacing-xs)) 0;
|
||||
padding: 6px 0;
|
||||
color: #ffffff;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
"use client";
|
||||
/**
|
||||
* 订阅套餐卡片
|
||||
*
|
||||
* 视觉规格（与设计稿对齐）：
|
||||
* - 卡片顶部：套餐名（12px / secondary）
|
||||
* - 中部：大字价格（28px / 300）+ 划线原价（12px / line-through / 999）
|
||||
* - 底部 28px 高渐变条：白字 12px/600 每日折算价
|
||||
* - 选中/高亮：2px 粉色边框 + 浅粉阴影
|
||||
* - 三个卡片底部渐变不同：粉 → 紫红 → 紫
|
||||
*/
|
||||
import type { SubscriptionPlan, SubscriptionPlanId } from "@/data/constants/subscription-plans";
|
||||
|
||||
import styles from "./subscription-plan-card.module.css";
|
||||
|
||||
const PER_DAY_GRADIENTS: Record<SubscriptionPlanId, string> = {
|
||||
monthly: "linear-gradient(90deg, #ff7ab8 0%, #ff5d9c 100%)",
|
||||
quarterly: "linear-gradient(90deg, #d16bff 0%, #ff5da3 100%)",
|
||||
annual: "linear-gradient(90deg, #9a4dff 0%, #c44dff 100%)",
|
||||
};
|
||||
|
||||
export interface SubscriptionPlanCardProps {
|
||||
plan: SubscriptionPlan;
|
||||
selected: boolean;
|
||||
onClick: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SubscriptionPlanCard({
|
||||
plan,
|
||||
selected,
|
||||
onClick,
|
||||
className,
|
||||
}: SubscriptionPlanCardProps) {
|
||||
const classes = [
|
||||
styles.card,
|
||||
selected ? styles.selected : "",
|
||||
!selected && plan.highlight ? styles.highlight : "",
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
const perDayStyle = { background: PER_DAY_GRADIENTS[plan.id] };
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
aria-pressed={selected}
|
||||
aria-label={`${plan.name} plan, $${plan.price}`}
|
||||
className={classes}
|
||||
>
|
||||
<p className={styles.name}>{plan.name}</p>
|
||||
<div className={styles.priceBlock}>
|
||||
<span className={styles.currency}>$</span>
|
||||
<span className={styles.price}>{plan.price}</span>
|
||||
</div>
|
||||
<p className={styles.originalPrice}>${plan.originalPrice}</p>
|
||||
<div className={styles.perDayBar} style={perDayStyle}>
|
||||
{plan.perDay}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
.shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100dvh;
|
||||
background: var(--color-page-background);
|
||||
padding: 0 var(--spacing-lg) var(--spacing-xxl);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.backSlot {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.userSlot {
|
||||
margin-top: var(--spacing-md);
|
||||
padding: 0 var(--spacing-xs);
|
||||
}
|
||||
|
||||
.bannerSlot {
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.plansRow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--spacing-sm);
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.autoRenewCaption {
|
||||
margin: var(--spacing-md) 0 0;
|
||||
padding: 0 var(--spacing-xs);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.benefitsSlot {
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.ctaSlot {
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.agreementSlot {
|
||||
margin-top: var(--spacing-md);
|
||||
padding: 0 var(--spacing-xs);
|
||||
}
|
||||
|
||||
.agreementLink {
|
||||
color: var(--color-auth-text-primary);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.agreementLink:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
"use client";
|
||||
/**
|
||||
* 订阅页主屏幕
|
||||
*
|
||||
* 原始 Dart: lib/ui/subscription/...
|
||||
*
|
||||
* 布局（顶到底）：
|
||||
* 1. 顶部返回箭头
|
||||
* 2. 用户信息行
|
||||
* 3. 渐变横幅
|
||||
* 4. 三个套餐卡片
|
||||
* 5. 自动续费说明
|
||||
* 6. 权益列表卡片
|
||||
* 7. 主操作按钮
|
||||
* 8. 协议复选框
|
||||
*/
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { Checkbox } from "@/app/_components/core/checkbox";
|
||||
import { MobileShell } from "@/app/_components/core/mobile-shell";
|
||||
import { AppConstants } from "@/core/app_constants";
|
||||
import { SUBSCRIPTION_PLANS } from "@/data/constants/subscription-plans";
|
||||
import { ROUTES } from "@/router/routes";
|
||||
import { useUserState } from "@/stores/user/user-context";
|
||||
|
||||
import { SubscriptionBackLink } from "./subscription-back-link";
|
||||
import { SubscriptionBanner } from "./subscription-banner";
|
||||
import { SubscriptionBenefitsCard } from "./subscription-benefits-card";
|
||||
import { SubscriptionCtaButton } from "./subscription-cta-button";
|
||||
import { SubscriptionPlanCard } from "./subscription-plan-card";
|
||||
import { SubscriptionUserRow } from "./subscription-user-row";
|
||||
import styles from "./subscription-screen.module.css";
|
||||
|
||||
const VIP_BENEFITS = [
|
||||
"Unlimited chat sessions per day",
|
||||
"Unlimited free access to private messages",
|
||||
"Unlimited access to AI boyfriend photos",
|
||||
"Free voice chat for X minutes",
|
||||
] as const;
|
||||
|
||||
const FALLBACK_USERNAME = "User name";
|
||||
|
||||
export function SubscriptionScreen() {
|
||||
const router = useRouter();
|
||||
const user = useUserState();
|
||||
|
||||
const initialPlanId =
|
||||
SUBSCRIPTION_PLANS.find((p) => p.highlight)?.id ?? null;
|
||||
|
||||
const [selectedPlanId, setSelectedPlanId] = useState<string | null>(
|
||||
initialPlanId,
|
||||
);
|
||||
const [agreed, setAgreed] = useState(false);
|
||||
|
||||
const canActivate = selectedPlanId !== null && agreed;
|
||||
|
||||
const handleActivate = () => {
|
||||
if (!canActivate) return;
|
||||
// Mock phase: 仅提示并跳走，不调用任何支付接口
|
||||
window.alert("Subscription activated (mock). Welcome to VIP!");
|
||||
router.push(ROUTES.chat);
|
||||
};
|
||||
|
||||
const name = user.currentUser?.username ?? FALLBACK_USERNAME;
|
||||
const avatarUrl = user.currentUser?.avatarUrl ?? null;
|
||||
|
||||
return (
|
||||
<MobileShell>
|
||||
<div className={styles.shell}>
|
||||
<header className={styles.header}>
|
||||
<SubscriptionBackLink className={styles.backSlot} />
|
||||
</header>
|
||||
|
||||
<section className={styles.userSlot}>
|
||||
<SubscriptionUserRow name={name} avatarUrl={avatarUrl} />
|
||||
</section>
|
||||
|
||||
<section className={styles.bannerSlot}>
|
||||
<SubscriptionBanner />
|
||||
</section>
|
||||
|
||||
<section
|
||||
className={styles.plansRow}
|
||||
aria-label="Choose a subscription plan"
|
||||
>
|
||||
{SUBSCRIPTION_PLANS.map((plan) => (
|
||||
<SubscriptionPlanCard
|
||||
key={plan.id}
|
||||
plan={plan}
|
||||
selected={selectedPlanId === plan.id}
|
||||
onClick={() => setSelectedPlanId(plan.id)}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<p className={styles.autoRenewCaption}>
|
||||
It will automatically renew upon expiration, and can be canceled at
|
||||
any time
|
||||
</p>
|
||||
|
||||
<section className={styles.benefitsSlot}>
|
||||
<SubscriptionBenefitsCard
|
||||
title="VIP Membership Benefits"
|
||||
items={VIP_BENEFITS}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<div className={styles.ctaSlot}>
|
||||
<SubscriptionCtaButton
|
||||
disabled={!canActivate}
|
||||
onClick={handleActivate}
|
||||
>
|
||||
Confirm the agreement and Activate
|
||||
</SubscriptionCtaButton>
|
||||
</div>
|
||||
|
||||
<div className={styles.agreementSlot}>
|
||||
<Checkbox
|
||||
checked={agreed}
|
||||
onChange={setAgreed}
|
||||
label={
|
||||
<>
|
||||
I agree to the{" "}
|
||||
<a
|
||||
href={AppConstants.privacyPolicyUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={styles.agreementLink}
|
||||
>
|
||||
VIP Membership Benefits Agreement
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a
|
||||
href={AppConstants.termsOfServiceUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={styles.agreementLink}
|
||||
>
|
||||
Automatic renewal Agreement
|
||||
</a>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</MobileShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
flex: 0 0 auto;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.avatarImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.avatarIcon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
/**
|
||||
* 订阅页用户信息行
|
||||
*
|
||||
* 视觉规格（与设计稿对齐）：
|
||||
* - 56×56 粉色圆形头像
|
||||
* - 头像右侧两行文本：用户名（16px/600）、副标题（12px/secondary）
|
||||
* - 无头像时显示默认用户图标
|
||||
*/
|
||||
import Image from "next/image";
|
||||
|
||||
import styles from "./subscription-user-row.module.css";
|
||||
|
||||
export interface SubscriptionUserRowProps {
|
||||
name: string;
|
||||
/** null → 显示默认用户图标 */
|
||||
avatarUrl: string | null;
|
||||
subtitle?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SubscriptionUserRow({
|
||||
name,
|
||||
avatarUrl,
|
||||
subtitle = "VIP membership not activated",
|
||||
className,
|
||||
}: SubscriptionUserRowProps) {
|
||||
return (
|
||||
<div className={[styles.row, className].filter(Boolean).join(" ")}>
|
||||
<div className={styles.avatar} aria-hidden="true">
|
||||
{avatarUrl ? (
|
||||
<Image
|
||||
src={avatarUrl}
|
||||
alt=""
|
||||
width={56}
|
||||
height={56}
|
||||
className={styles.avatarImg}
|
||||
/>
|
||||
) : (
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
className={styles.avatarIcon}
|
||||
>
|
||||
<circle cx="12" cy="8" r="4" fill="currentColor" />
|
||||
<path
|
||||
d="M4 20c0-4.418 3.582-7 8-7s8 2.582 8 7"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.text}>
|
||||
<p className={styles.name}>{name}</p>
|
||||
<p className={styles.subtitle}>{subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { SubscriptionScreen } from "@/app/subscription/components/subscription-screen";
|
||||
|
||||
export default function SubscriptionPage() {
|
||||
return <SubscriptionScreen />;
|
||||
}
|
||||
Reference in New Issue
Block a user