feat(payment): connect payment service flow

src/app/subscription/components/subscription-plan-card.tsx

@@ -9,20 +9,31 @@
  *   - 选中/高亮：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%)",
-};
+const PER_DAY_GRADIENTS = [
+  "linear-gradient(90deg, #ff7ab8 0%, #ff5d9c 100%)",
+  "linear-gradient(90deg, #d16bff 0%, #ff5da3 100%)",
+  "linear-gradient(90deg, #9a4dff 0%, #c44dff 100%)",
+  "linear-gradient(90deg, #32c7b5 0%, #2f8fd8 100%)",
+] as const;
+
+export interface SubscriptionPlanView {
+  id: string;
+  name: string;
+  price: string;
+  originalPrice: string | null;
+  perDay: string;
+  highlight: boolean;
+  currencySymbol: string;
+}
 
 export interface SubscriptionPlanCardProps {
-  plan: SubscriptionPlan;
+  plan: SubscriptionPlanView;
   selected: boolean;
   onClick: () => void;
+  gradientIndex?: number;
   className?: string;
 }
 
@@ -30,6 +41,7 @@ export function SubscriptionPlanCard({
   plan,
   selected,
   onClick,
+  gradientIndex = 0,
   className,
 }: SubscriptionPlanCardProps) {
   const classes = [
@@ -41,22 +53,26 @@ export function SubscriptionPlanCard({
     .filter(Boolean)
     .join(" ");
 
-  const perDayStyle = { background: PER_DAY_GRADIENTS[plan.id] };
+  const perDayStyle = {
+    background: PER_DAY_GRADIENTS[gradientIndex % PER_DAY_GRADIENTS.length],
+  };
 
   return (
     <button
       type="button"
       onClick={onClick}
       aria-pressed={selected}
-      aria-label={`${plan.name} plan, $${plan.price}`}
+      aria-label={`${plan.name} plan, ${plan.currencySymbol}${plan.price}`}
       className={classes}
     >
       <p className={styles.name}>{plan.name}</p>
       <div className={styles.priceBlock}>
-        <span className={styles.currency}>$</span>
+        <span className={styles.currency}>{plan.currencySymbol}</span>
         <span className={styles.price}>{plan.price}</span>
       </div>
-      <p className={styles.originalPrice}>${plan.originalPrice}</p>
+      <p className={styles.originalPrice}>
+        {plan.originalPrice ? `${plan.currencySymbol}${plan.originalPrice}` : "\u00a0"}
+      </p>
       <div className={styles.perDayBar} style={perDayStyle}>
         {plan.perDay}
       </div>