From e372d58b4cd9c62c2e62b458f7fff3f7709ebe89 Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Mon, 29 Jun 2026 14:11:50 +0800
Subject: [PATCH] feat(payment): sync plans and add coins rules

---
 plans.md                                      |  34 +++
 .../coins-rules/coins-rules-screen.module.css | 259 ++++++++++++++++++
 src/app/coins-rules/coins-rules-screen.tsx    | 130 +++++++++
 src/app/coins-rules/page.tsx                  |   5 +
 .../components/sidebar-screen.module.css      | 224 ++++++++++++++-
 .../components/sidebar-wallet-card.tsx        |   8 +-
 src/app/sidebar/sidebar-screen.tsx            |  59 ++--
 .../subscription-screen.helpers.ts            |  14 +-
 .../payment/__tests__/payment_plan.test.ts    |  76 +++++
 src/data/dto/payment/payment_plan.ts          |   6 +-
 .../responses/payment-plans-credits.json      | 100 +++----
 .../payment/responses/payment-plans-vip.json  |  60 ++--
 .../interfaces/ipayment_repository.ts         |   3 +
 src/data/repositories/payment_repository.ts   |  32 ++-
 src/data/schemas/payment/payment_plan.ts      |  53 +---
 src/data/storage/payment/index.ts             |   1 +
 .../storage/payment/payment_plans_storage.ts  |  32 +++
 src/data/storage/storage_keys.ts              |   1 +
 src/router/routes.ts                          |   3 +
 .../payment/__tests__/payment-machine.test.ts | 123 +++++++--
 src/stores/payment/payment-context.tsx        |   5 +-
 src/stores/payment/payment-machine.actors.ts  |   9 +-
 src/stores/payment/payment-machine.helpers.ts |   7 +-
 src/stores/payment/payment-machine.ts         |  79 +++++-
 24 files changed, 1099 insertions(+), 224 deletions(-)
 create mode 100644 plans.md
 create mode 100644 src/app/coins-rules/coins-rules-screen.module.css
 create mode 100644 src/app/coins-rules/coins-rules-screen.tsx
 create mode 100644 src/app/coins-rules/page.tsx
 create mode 100644 src/data/dto/payment/__tests__/payment_plan.test.ts
 create mode 100644 src/data/storage/payment/payment_plans_storage.ts

diff --git a/plans.md b/plans.md
new file mode 100644
index 00000000..ceff63b3
--- /dev/null
+++ b/plans.md
@@ -0,0 +1,34 @@
+GET https://proapi.banlv-ai.com/api/payment/plans
+结果：
+status=200
+success=true
+plans 数量 8
+VIP 套餐 3 个
+credits 套餐 5 个
+snake_keys=[]，已经没有 plan_id / amount_cents 这种字段
+schema 校验通过：proapi_plans_camel_schema_ok true
+前端按这个结构用：
+type PaymentPlan = {
+  planId: string;
+  planName: string;
+  orderType: 'vip_monthly' | 'vip_quarterly' | 'vip_annual' | 'dol';
+  vipDays: number | null;
+  dolAmount: number | null;
+  creditBalance: number;
+  amountCents: number;
+  originalAmountCents: number | null;
+  dailyPriceCents: number | null;
+  currency: string;
+};
+分组：
+const plans = res.data.plans;
+
+const vipPlans = plans.filter(p => p.vipDays !== null);
+const creditPlans = plans.filter(p => p.dolAmount !== null);
+下单仍然传 planId：
+{
+  "planId": "vip_monthly",
+  "payChannel": "stripe",
+  "autoRenew": true
+}
+价格、币种全部以前端拿到的 amountCents / currency 展示，不要写死。当前我这边访问 pro 返回的是 JPY，这是 Cloudflare 根据访问 IP 判的国家币种。
\ No newline at end of file
diff --git a/src/app/coins-rules/coins-rules-screen.module.css b/src/app/coins-rules/coins-rules-screen.module.css
new file mode 100644
index 00000000..eb8dc166
--- /dev/null
+++ b/src/app/coins-rules/coins-rules-screen.module.css
@@ -0,0 +1,259 @@
+.screen {
+  min-height: 100dvh;
+  box-sizing: border-box;
+  padding: 18px 20px 28px;
+  background:
+    radial-gradient(circle at 16% 5%, rgba(255, 196, 143, 0.2), transparent 28%),
+    radial-gradient(circle at 86% 8%, rgba(246, 87, 160, 0.2), transparent 26%),
+    linear-gradient(180deg, #fcf3f4 0%, #fffafa 48%, #fff 100%);
+  color: #191316;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.backLink {
+  display: inline-flex;
+  width: 42px;
+  height: 42px;
+  align-items: center;
+  justify-content: center;
+  color: #21191d;
+  text-decoration: none;
+  border: 1px solid rgba(25, 19, 22, 0.08);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 10px 22px rgba(50, 30, 40, 0.08);
+  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease;
+}
+
+.backLink:hover {
+  background: #ffffff;
+  box-shadow: 0 14px 26px rgba(50, 30, 40, 0.12);
+  transform: translateY(-1px);
+}
+
+.backLink:active {
+  transform: translateY(1px);
+}
+
+.backLink:focus-visible {
+  outline: 2px solid #f657a0;
+  outline-offset: 3px;
+}
+
+.hero {
+  position: relative;
+  overflow: hidden;
+  padding: 22px;
+  border: 1px solid rgba(246, 87, 160, 0.14);
+  border-radius: 28px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 237, 246, 0.94) 100%),
+    #ffffff;
+  box-shadow: 0 18px 46px rgba(86, 45, 62, 0.1);
+}
+
+.hero::after {
+  position: absolute;
+  right: -34px;
+  bottom: -42px;
+  width: 150px;
+  height: 150px;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(246, 87, 160, 0.2), transparent 68%);
+  content: "";
+}
+
+.heroIcon {
+  display: inline-flex;
+  width: 46px;
+  height: 46px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  background: linear-gradient(180deg, #ffe89c 0%, #f8b83e 100%);
+  color: #8f5400;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    0 12px 24px rgba(216, 132, 22, 0.2);
+}
+
+.eyebrow {
+  margin: 16px 0 0;
+  color: #f657a0;
+  font-size: 12px;
+  font-weight: 850;
+  letter-spacing: 0.12em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.title {
+  margin: 8px 0 0;
+  color: #171114;
+  font-size: 30px;
+  font-weight: 900;
+  letter-spacing: -0.8px;
+  line-height: 1.08;
+}
+
+.subtitle {
+  max-width: 300px;
+  margin: 10px 0 0;
+  color: #6d5d64;
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.55;
+}
+
+.freeCard {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+  margin-top: 16px;
+  padding: 16px;
+  border: 1px solid rgba(248, 184, 62, 0.24);
+  border-radius: 22px;
+  background: rgba(255, 250, 235, 0.84);
+  box-shadow: 0 12px 28px rgba(142, 93, 18, 0.08);
+}
+
+.freeIcon {
+  display: inline-flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 14px;
+  background: #ffffff;
+  color: #d98100;
+  box-shadow: 0 8px 18px rgba(142, 93, 18, 0.1);
+}
+
+.freeTitle {
+  margin: 0;
+  color: #2a1f14;
+  font-size: 16px;
+  font-weight: 850;
+  line-height: 1.1;
+}
+
+.freeText {
+  margin: 5px 0 0;
+  color: #7a6040;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.45;
+}
+
+.ruleList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.ruleCard {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  padding: 14px;
+  border: 1px solid rgba(25, 19, 22, 0.06);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 10px 26px rgba(55, 36, 44, 0.06);
+  animation: cardIn 0.42s ease both;
+  transition: box-shadow 0.18s ease, transform 0.18s ease;
+}
+
+.ruleCard:hover {
+  box-shadow: 0 15px 32px rgba(55, 36, 44, 0.1);
+  transform: translateY(-2px);
+}
+
+.ruleIcon {
+  display: inline-flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 14px;
+  background: #fff0f6;
+  color: #f657a0;
+}
+
+.ruleContent {
+  min-width: 0;
+}
+
+.ruleTitle {
+  margin: 0;
+  color: #21191d;
+  font-size: 16px;
+  font-weight: 850;
+  line-height: 1.15;
+}
+
+.freeBadge {
+  display: inline-flex;
+  margin: 7px 0 0;
+  padding: 4px 9px;
+  border-radius: 999px;
+  background: #edf4ff;
+  color: #2e6eea;
+  font-size: 12px;
+  font-weight: 780;
+  line-height: 1;
+}
+
+.cost {
+  margin: 0;
+  color: #171114;
+  font-size: 15px;
+  font-weight: 900;
+  line-height: 1.15;
+  text-align: right;
+  white-space: nowrap;
+}
+
+@keyframes cardIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 360px) {
+  .screen {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .hero {
+    padding: 20px;
+  }
+
+  .title {
+    font-size: 27px;
+  }
+
+  .ruleCard {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .cost {
+    grid-column: 2;
+    text-align: left;
+  }
+}
diff --git a/src/app/coins-rules/coins-rules-screen.tsx b/src/app/coins-rules/coins-rules-screen.tsx
new file mode 100644
index 00000000..53e75ab8
--- /dev/null
+++ b/src/app/coins-rules/coins-rules-screen.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import {
+  ArrowLeft,
+  Coins,
+  Gift,
+  ImageIcon,
+  MessageCircle,
+  Mic2,
+  Phone,
+  Sparkles,
+} from "lucide-react";
+import Link from "next/link";
+
+import { MobileShell } from "@/app/_components/core";
+import { ROUTES } from "@/router/routes";
+
+import styles from "./coins-rules-screen.module.css";
+
+interface CoinRuleItem {
+  title: string;
+  cost: string;
+  free?: string;
+  icon: typeof MessageCircle;
+}
+
+const COIN_RULES: readonly CoinRuleItem[] = [
+  {
+    title: "普通聊天",
+    cost: "2 coins / 条",
+    free: "每周免费 50 条",
+    icon: MessageCircle,
+  },
+  {
+    title: "私密聊天",
+    cost: "10 coins / 条",
+    free: "每天免费 1 条",
+    icon: Sparkles,
+  },
+  {
+    title: "语音消息",
+    cost: "20 coins / 条",
+    icon: Mic2,
+  },
+  {
+    title: "语音电话",
+    cost: "20 coins / 张",
+    icon: Phone,
+  },
+  {
+    title: "照片",
+    cost: "40 coins / 张",
+    icon: ImageIcon,
+  },
+  {
+    title: "私密相册",
+    cost: "10 张 300 coins",
+    icon: ImageIcon,
+  },
+  {
+    title: "私密相册",
+    cost: "20 张 600 coins",
+    icon: ImageIcon,
+  },
+] as const;
+
+export function CoinsRulesScreen() {
+  return (
+    <MobileShell background="#fcf3f4">
+      <main className={styles.screen}>
+        <header className={styles.header}>
+          <Link
+            href={ROUTES.sidebar}
+            className={styles.backLink}
+            aria-label="Back to sidebar"
+          >
+            <ArrowLeft size={22} strokeWidth={2.4} aria-hidden="true" />
+          </Link>
+
+          <div className={styles.hero}>
+            <span className={styles.heroIcon} aria-hidden="true">
+              <Coins size={24} strokeWidth={2.4} />
+            </span>
+            <p className={styles.eyebrow}>Coins Guide</p>
+            <h1 className={styles.title}>积分消耗规则</h1>
+            <p className={styles.subtitle}>
+              清晰了解每种互动的积分消耗与免费额度，充值前心里有数。
+            </p>
+          </div>
+        </header>
+
+        <section className={styles.freeCard} aria-label="Free quota">
+          <div className={styles.freeIcon} aria-hidden="true">
+            <Gift size={20} strokeWidth={2.3} />
+          </div>
+          <div>
+            <h2 className={styles.freeTitle}>免费额度</h2>
+            <p className={styles.freeText}>
+              普通聊天每周免费 50 条，私密聊天每天免费 1 条。
+            </p>
+          </div>
+        </section>
+
+        <section className={styles.ruleList} aria-label="Coins usage rules">
+          {COIN_RULES.map((rule, index) => {
+            const Icon = rule.icon;
+            return (
+              <article
+                key={`${rule.title}-${rule.cost}`}
+                className={styles.ruleCard}
+                style={{ animationDelay: `${index * 45}ms` }}
+              >
+                <span className={styles.ruleIcon} aria-hidden="true">
+                  <Icon size={18} strokeWidth={2.35} />
+                </span>
+                <div className={styles.ruleContent}>
+                  <h2 className={styles.ruleTitle}>{rule.title}</h2>
+                  {rule.free ? (
+                    <p className={styles.freeBadge}>{rule.free}</p>
+                  ) : null}
+                </div>
+                <p className={styles.cost}>{rule.cost}</p>
+              </article>
+            );
+          })}
+        </section>
+      </main>
+    </MobileShell>
+  );
+}
diff --git a/src/app/coins-rules/page.tsx b/src/app/coins-rules/page.tsx
new file mode 100644
index 00000000..dc6e6cd3
--- /dev/null
+++ b/src/app/coins-rules/page.tsx
@@ -0,0 +1,5 @@
+import { CoinsRulesScreen } from "./coins-rules-screen";
+
+export default function CoinsRulesPage() {
+  return <CoinsRulesScreen />;
+}
diff --git a/src/app/sidebar/components/sidebar-screen.module.css b/src/app/sidebar/components/sidebar-screen.module.css
index f5d7d1b7..e989c7a5 100644
--- a/src/app/sidebar/components/sidebar-screen.module.css
+++ b/src/app/sidebar/components/sidebar-screen.module.css
@@ -1,24 +1,230 @@
-/* ============================================================
- * 侧边栏主屏幕（浅色主题）
- * ============================================================ */
 .shell {
+  position: relative;
   display: flex;
   flex-direction: column;
-  background: var(--color-page-background, #ffffff);
-  color: var(--color-auth-text-primary, #333333);
+  gap: 14px;
+  overflow: hidden;
   min-height: 100dvh;
-  padding: 0 var(--page-padding-x, 28px) var(--spacing-xxl, 24px);
   box-sizing: border-box;
+  padding: 0 var(--page-padding-x, 28px) 28px;
+  background:
+    radial-gradient(circle at 18% 6%, rgba(255, 206, 160, 0.22), transparent 28%),
+    radial-gradient(circle at 92% 0%, rgba(246, 87, 160, 0.22), transparent 30%),
+    linear-gradient(180deg, #fcf3f4 0%, #fffafa 44%, #ffffff 100%);
+  color: #191316;
+}
+
+.bgOrbOne,
+.bgOrbTwo {
+  position: absolute;
+  z-index: 0;
+  pointer-events: none;
+  border-radius: 999px;
+  filter: blur(4px);
+}
+
+.bgOrbOne {
+  top: 86px;
+  right: -72px;
+  width: 168px;
+  height: 168px;
+  background: rgba(246, 87, 160, 0.11);
+}
+
+.bgOrbTwo {
+  bottom: 56px;
+  left: -88px;
+  width: 180px;
+  height: 180px;
+  background: rgba(248, 184, 62, 0.1);
+}
+
+.topBar,
+.hero,
+.userSlot,
+.cardSlot,
+.settingsSlot {
+  position: relative;
+  z-index: 1;
+}
+
+.topBar {
+  margin: 4px 0 -2px;
+}
+
+.hero {
+  padding: 12px 2px 6px;
+}
+
+.kicker {
+  margin: 0;
+  color: #f657a0;
+  font-size: 12px;
+  font-weight: 850;
+  letter-spacing: 0.14em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.title {
+  margin: 8px 0 0;
+  color: #171114;
+  font-size: 34px;
+  font-weight: 920;
+  letter-spacing: -1px;
+  line-height: 1;
+}
+
+.subtitle {
+  max-width: 320px;
+  margin: 10px 0 0;
+  color: #75636a;
+  font-size: 14px;
+  font-weight: 650;
+  line-height: 1.5;
 }
 
 .userSlot {
-  padding: var(--sidebar-user-padding-y, 20px) 0;
+  padding: 18px;
+  border: 1px solid rgba(25, 19, 22, 0.06);
+  border-radius: 26px;
+  background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 16px 40px rgba(55, 36, 44, 0.08);
+  backdrop-filter: blur(18px);
 }
 
 .cardSlot {
-  padding: var(--sidebar-card-gap-y, 8px) 0;
+  padding: 0;
 }
 
 .settingsSlot {
-  padding: var(--spacing-lg, 16px) 0 0;
+  margin-top: 2px;
+  padding: 2px 0 0;
+}
+
+.settingsLabel {
+  margin: 0 0 9px;
+  padding: 0 4px;
+  color: #817076;
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.logoutCard {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 12px;
+  box-sizing: border-box;
+  padding: 16px;
+  border: 1px solid rgba(25, 19, 22, 0.06);
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.86);
+  color: #171114;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  box-shadow: 0 12px 30px rgba(55, 36, 44, 0.06);
+  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease;
+}
+
+.logoutCard:hover {
+  background: #ffffff;
+  box-shadow: 0 16px 34px rgba(55, 36, 44, 0.1);
+  transform: translateY(-1px);
+}
+
+.logoutCard:active {
+  transform: translateY(1px);
+}
+
+.logoutCard:focus-visible {
+  outline: 2px solid #f657a0;
+  outline-offset: 3px;
+}
+
+.logoutIcon {
+  display: inline-flex;
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border-radius: 15px;
+  background: rgba(255, 107, 107, 0.1);
+  color: #ef4d64;
+}
+
+.logoutText {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.logoutTitle {
+  color: #ef4d64;
+  font-size: 16px;
+  font-weight: 760;
+  line-height: 1.15;
+}
+
+.logoutSubtitle {
+  color: #817076;
+  font-size: 13px;
+  font-weight: 620;
+  line-height: 1.25;
+}
+
+.revealOne,
+.revealTwo,
+.revealThree {
+  animation: revealUp 0.42s ease both;
+}
+
+.revealOne {
+  animation-delay: 40ms;
+}
+
+.revealTwo {
+  animation-delay: 95ms;
+}
+
+.revealThree {
+  animation-delay: 150ms;
+}
+
+@keyframes revealUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 360px) {
+  .shell {
+    gap: 12px;
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+
+  .title {
+    font-size: 30px;
+  }
+
+  .subtitle {
+    font-size: 13px;
+  }
+
+  .userSlot {
+    padding: 16px;
+    border-radius: 22px;
+  }
 }
diff --git a/src/app/sidebar/components/sidebar-wallet-card.tsx b/src/app/sidebar/components/sidebar-wallet-card.tsx
index 1a42be0a..a9395d41 100644
--- a/src/app/sidebar/components/sidebar-wallet-card.tsx
+++ b/src/app/sidebar/components/sidebar-wallet-card.tsx
@@ -7,6 +7,7 @@ import styles from "./sidebar-wallet-card.module.css";
 export interface SidebarWalletCardProps {
   creditBalance: number;
   onTopUp: () => void;
+  onRulesClick: () => void;
 }
 
 const formatCoins = (value: number): string =>
@@ -15,6 +16,7 @@ const formatCoins = (value: number): string =>
 export function SidebarWalletCard({
   creditBalance,
   onTopUp,
+  onRulesClick,
 }: SidebarWalletCardProps) {
   return (
     <section className={styles.card} aria-label="My wallet">
@@ -31,7 +33,11 @@ export function SidebarWalletCard({
           <span className={styles.balanceUnit}> coins</span>
         </p>
 
-        <button type="button" className={styles.rulesButton}>
+        <button
+          type="button"
+          className={styles.rulesButton}
+          onClick={onRulesClick}
+        >
           Coins 消耗规则
         </button>
       </div>
diff --git a/src/app/sidebar/sidebar-screen.tsx b/src/app/sidebar/sidebar-screen.tsx
index bd7f0e66..a9bd35cf 100644
--- a/src/app/sidebar/sidebar-screen.tsx
+++ b/src/app/sidebar/sidebar-screen.tsx
@@ -1,9 +1,10 @@
 "use client";
 
+import { LogOut } from "lucide-react";
 import { signOut } from "next-auth/react";
 import { useRouter } from "next/navigation";
 
-import { MobileShell, SettingsSection } from "@/app/_components/core";
+import { MobileShell } from "@/app/_components/core";
 import { ROUTES } from "@/router/routes";
 import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
 import { useUserDispatch, useUserState } from "@/stores/user/user-context";
@@ -20,6 +21,12 @@ import styles from "./components/sidebar-screen.module.css";
 const FALLBACK_USERNAME = "User name";
 const VIP_SUBSCRIPTION_URL = `${ROUTES.subscription}?type=vip`;
 
+const STATUS_LABELS: Record<SidebarUserState, string> = {
+  guest: "Sign in to keep your coins and unlock more features.",
+  member: "Manage your wallet, subscription and account settings.",
+  vip: "Your VIP benefits are active. Enjoy the full experience.",
+};
+
 /**
  * 侧边栏主屏幕
  *
@@ -58,12 +65,22 @@ export function SidebarScreen() {
   const avatarUrl = user.avatarUrl ?? user.currentUser?.avatarUrl ?? null;
 
   return (
-    <MobileShell>
+    <MobileShell background="#fcf3f4">
       <div className={styles.shell}>
-        <BackBar />
+        <div className={styles.bgOrbOne} aria-hidden="true" />
+        <div className={styles.bgOrbTwo} aria-hidden="true" />
 
-        {/* 用户信息区：三种状态 */}
-        <section className={styles.userSlot}>
+        <div className={styles.topBar}>
+          <BackBar />
+        </div>
+
+        <section className={styles.hero}>
+          <p className={styles.kicker}>Cozsweet</p>
+          <h1 className={styles.title}>Account</h1>
+          <p className={styles.subtitle}>{STATUS_LABELS[sidebarState]}</p>
+        </section>
+
+        <section className={`${styles.userSlot} ${styles.revealOne}`}>
           <UserHeader
             state={sidebarState}
             name={name}
@@ -73,10 +90,11 @@ export function SidebarScreen() {
           />
         </section>
 
-        <section className={styles.cardSlot}>
+        <section className={`${styles.cardSlot} ${styles.revealTwo}`}>
           <SidebarWalletCard
             creditBalance={user.creditBalance}
             onTopUp={() => router.push(VIP_SUBSCRIPTION_URL)}
+            onRulesClick={() => router.push(ROUTES.coinsRules)}
           />
         </section>
 
@@ -91,18 +109,23 @@ export function SidebarScreen() {
         */}
 
         {sidebarState !== "guest" ? (
-          <section className={styles.settingsSlot}>
-            <SettingsSection
-              title="Other"
-              items={[
-                {
-                  id: "logout",
-                  title: "Log out",
-                  destructive: true,
-                  onClick: handleLogoutClick,
-                },
-              ]}
-            />
+          <section className={`${styles.settingsSlot} ${styles.revealThree}`}>
+            <p className={styles.settingsLabel}>Other</p>
+            <button
+              type="button"
+              className={styles.logoutCard}
+              onClick={handleLogoutClick}
+            >
+              <span className={styles.logoutIcon} aria-hidden="true">
+                <LogOut size={19} strokeWidth={2.2} />
+              </span>
+              <span className={styles.logoutText}>
+                <span className={styles.logoutTitle}>Log out</span>
+                <span className={styles.logoutSubtitle}>
+                  End the current session safely
+                </span>
+              </span>
+            </button>
           </section>
         ) : null}
       </div>
diff --git a/src/app/subscription/subscription-screen.helpers.ts b/src/app/subscription/subscription-screen.helpers.ts
index 814a31e3..c122144a 100644
--- a/src/app/subscription/subscription-screen.helpers.ts
+++ b/src/app/subscription/subscription-screen.helpers.ts
@@ -12,21 +12,11 @@ export const SUBSCRIPTION_BANNER_TITLES: Record<SubscriptionType, string> = {
 };
 
 export function isVipPlan(plan: PaymentPlan): boolean {
-  return plan.orderType.startsWith("vip_") || plan.planId.startsWith("vip_");
+  return plan.vipDays !== null;
 }
 
 export function isCreditPlan(plan: PaymentPlan): boolean {
-  const orderType = plan.orderType.toLowerCase();
-  const planId = plan.planId.toLowerCase();
-  return (
-    plan.dolAmount !== null ||
-    orderType.startsWith("dol_") ||
-    orderType.startsWith("credit_") ||
-    planId.startsWith("dol_") ||
-    planId.startsWith("credit_") ||
-    orderType.includes("credit") ||
-    planId.includes("credit")
-  );
+  return plan.dolAmount !== null;
 }
 
 function isVoicePackagePlan(plan: PaymentPlan): boolean {
diff --git a/src/data/dto/payment/__tests__/payment_plan.test.ts b/src/data/dto/payment/__tests__/payment_plan.test.ts
new file mode 100644
index 00000000..88cdb1d4
--- /dev/null
+++ b/src/data/dto/payment/__tests__/payment_plan.test.ts
@@ -0,0 +1,76 @@
+import { describe, expect, it } from "vitest";
+import { z } from "zod";
+
+import { PaymentPlan, PaymentPlansResponse } from "@/data/dto/payment";
+
+describe("PaymentPlan", () => {
+  it("parses the camelCase payment plan shape", () => {
+    const plan = PaymentPlan.from({
+      planId: "vip_monthly",
+      planName: "VIP Monthly",
+      orderType: "vip_monthly",
+      vipDays: 30,
+      dolAmount: null,
+      creditBalance: 3000,
+      amountCents: 1999,
+      originalAmountCents: 2499,
+      dailyPriceCents: 66,
+      currency: "JPY",
+    });
+
+    expect(plan.planId).toBe("vip_monthly");
+    expect(plan.creditBalance).toBe(3000);
+    expect(plan.toJson()).toEqual({
+      planId: "vip_monthly",
+      planName: "VIP Monthly",
+      orderType: "vip_monthly",
+      vipDays: 30,
+      dolAmount: null,
+      creditBalance: 3000,
+      amountCents: 1999,
+      originalAmountCents: 2499,
+      dailyPriceCents: 66,
+      currency: "JPY",
+    });
+  });
+
+  it("rejects the legacy snake_case payment plan shape", () => {
+    expect(() =>
+      PaymentPlan.fromJson({
+        plan_id: "vip_monthly",
+        plan_name: "VIP Monthly",
+        order_type: "vip_monthly",
+        amount_cents: 1999,
+        original_amount_cents: 2499,
+        daily_price_cents: 66,
+        currency: "JPY",
+        vip_days: 30,
+        dol_amount: null,
+      }),
+    ).toThrow(z.ZodError);
+  });
+});
+
+describe("PaymentPlansResponse", () => {
+  it("parses plans from the new backend response data shape", () => {
+    const response = PaymentPlansResponse.from({
+      plans: [
+        {
+          planId: "dol_1000",
+          planName: "1000 Credits",
+          orderType: "dol",
+          vipDays: null,
+          dolAmount: 1000,
+          creditBalance: 1000,
+          amountCents: 990,
+          originalAmountCents: null,
+          dailyPriceCents: null,
+          currency: "USD",
+        },
+      ],
+    });
+
+    expect(response.plans).toHaveLength(1);
+    expect(response.plans[0]?.dolAmount).toBe(1000);
+  });
+});
diff --git a/src/data/dto/payment/payment_plan.ts b/src/data/dto/payment/payment_plan.ts
index baaf9c49..84ee0871 100644
--- a/src/data/dto/payment/payment_plan.ts
+++ b/src/data/dto/payment/payment_plan.ts
@@ -11,13 +11,13 @@ export class PaymentPlan {
   declare readonly planId: string;
   declare readonly planName: string;
   declare readonly orderType: string;
+  declare readonly vipDays: number | null;
+  declare readonly dolAmount: number | null;
+  declare readonly creditBalance: number;
   declare readonly amountCents: number;
   declare readonly originalAmountCents: number | null;
   declare readonly dailyPriceCents: number | null;
   declare readonly currency: string;
-  declare readonly pricingTier: string;
-  declare readonly vipDays: number | null;
-  declare readonly dolAmount: number | null;
 
   private constructor(input: PaymentPlanInput) {
     const data = PaymentPlanSchema.parse(input);
diff --git a/src/data/mock/payment/responses/payment-plans-credits.json b/src/data/mock/payment/responses/payment-plans-credits.json
index f096bfa0..b1a17395 100644
--- a/src/data/mock/payment/responses/payment-plans-credits.json
+++ b/src/data/mock/payment/responses/payment-plans-credits.json
@@ -5,64 +5,64 @@
   "data": {
     "plans": [
       {
-        "plan_id": "credit_1000",
-        "plan_name": "1000 Credits",
-        "order_type": "credit_recharge",
-        "amount_cents": 990,
-        "original_amount_cents": null,
-        "daily_price_cents": null,
-        "currency": "USD",
-        "pricing_tier": "T1",
-        "vip_days": null,
-        "dol_amount": 1000
+        "planId": "dol_1000",
+        "planName": "1000 Credits",
+        "orderType": "dol",
+        "vipDays": null,
+        "dolAmount": 1000,
+        "creditBalance": 1000,
+        "amountCents": 990,
+        "originalAmountCents": null,
+        "dailyPriceCents": null,
+        "currency": "USD"
       },
       {
-        "plan_id": "credit_2000",
-        "plan_name": "2000 Credits",
-        "order_type": "credit_recharge",
-        "amount_cents": 1690,
-        "original_amount_cents": null,
-        "daily_price_cents": null,
-        "currency": "USD",
-        "pricing_tier": "T1",
-        "vip_days": null,
-        "dol_amount": 2000
+        "planId": "dol_2000",
+        "planName": "2000 Credits",
+        "orderType": "dol",
+        "vipDays": null,
+        "dolAmount": 2000,
+        "creditBalance": 2000,
+        "amountCents": 1690,
+        "originalAmountCents": null,
+        "dailyPriceCents": null,
+        "currency": "USD"
       },
       {
-        "plan_id": "credit_3000",
-        "plan_name": "3000 Credits",
-        "order_type": "credit_recharge",
-        "amount_cents": 2290,
-        "original_amount_cents": null,
-        "daily_price_cents": null,
-        "currency": "USD",
-        "pricing_tier": "T1",
-        "vip_days": null,
-        "dol_amount": 3000
+        "planId": "dol_3000",
+        "planName": "3000 Credits",
+        "orderType": "dol",
+        "vipDays": null,
+        "dolAmount": 3000,
+        "creditBalance": 3000,
+        "amountCents": 2290,
+        "originalAmountCents": null,
+        "dailyPriceCents": null,
+        "currency": "USD"
       },
       {
-        "plan_id": "credit_5000",
-        "plan_name": "5000 Credits",
-        "order_type": "credit_recharge",
-        "amount_cents": 3490,
-        "original_amount_cents": null,
-        "daily_price_cents": null,
-        "currency": "USD",
-        "pricing_tier": "T1",
-        "vip_days": null,
-        "dol_amount": 5000
+        "planId": "dol_5000",
+        "planName": "5000 Credits",
+        "orderType": "dol",
+        "vipDays": null,
+        "dolAmount": 5000,
+        "creditBalance": 5000,
+        "amountCents": 3490,
+        "originalAmountCents": null,
+        "dailyPriceCents": null,
+        "currency": "USD"
       },
       {
-        "plan_id": "credit_10000",
-        "plan_name": "10000 Credits",
-        "order_type": "credit_recharge",
-        "amount_cents": 6490,
-        "original_amount_cents": null,
-        "daily_price_cents": null,
-        "currency": "USD",
-        "pricing_tier": "T1",
-        "vip_days": null,
-        "dol_amount": 10000
+        "planId": "dol_10000",
+        "planName": "10000 Credits",
+        "orderType": "dol",
+        "vipDays": null,
+        "dolAmount": 10000,
+        "creditBalance": 10000,
+        "amountCents": 6490,
+        "originalAmountCents": null,
+        "dailyPriceCents": null,
+        "currency": "USD"
       }
     ]
   }
diff --git a/src/data/mock/payment/responses/payment-plans-vip.json b/src/data/mock/payment/responses/payment-plans-vip.json
index 6da06179..94e15531 100644
--- a/src/data/mock/payment/responses/payment-plans-vip.json
+++ b/src/data/mock/payment/responses/payment-plans-vip.json
@@ -5,40 +5,40 @@
   "data": {
     "plans": [
       {
-        "plan_id": "vip_monthly",
-        "plan_name": "月度会员",
-        "order_type": "vip_monthly",
-        "amount_cents": 1999,
-        "original_amount_cents": 2499,
-        "daily_price_cents": 66,
-        "currency": "USD",
-        "pricing_tier": "T1",
-        "vip_days": 30,
-        "dol_amount": null
+        "planId": "vip_monthly",
+        "planName": "VIP Monthly",
+        "orderType": "vip_monthly",
+        "vipDays": 30,
+        "dolAmount": null,
+        "creditBalance": 3000,
+        "amountCents": 1999,
+        "originalAmountCents": 2499,
+        "dailyPriceCents": 66,
+        "currency": "USD"
       },
       {
-        "plan_id": "vip_quarterly",
-        "plan_name": "季度会员",
-        "order_type": "vip_quarterly",
-        "amount_cents": 4999,
-        "original_amount_cents": 5999,
-        "daily_price_cents": 55,
-        "currency": "USD",
-        "pricing_tier": "T1",
-        "vip_days": 90,
-        "dol_amount": null
+        "planId": "vip_quarterly",
+        "planName": "VIP Quarterly",
+        "orderType": "vip_quarterly",
+        "vipDays": 90,
+        "dolAmount": null,
+        "creditBalance": 9000,
+        "amountCents": 4999,
+        "originalAmountCents": 5999,
+        "dailyPriceCents": 55,
+        "currency": "USD"
       },
       {
-        "plan_id": "vip_yearly",
-        "plan_name": "年度会员",
-        "order_type": "vip_yearly",
-        "amount_cents": 17999,
-        "original_amount_cents": 19999,
-        "daily_price_cents": 49,
-        "currency": "USD",
-        "pricing_tier": "T1",
-        "vip_days": 365,
-        "dol_amount": null
+        "planId": "vip_annual",
+        "planName": "VIP Annual",
+        "orderType": "vip_annual",
+        "vipDays": 365,
+        "dolAmount": null,
+        "creditBalance": 36000,
+        "amountCents": 17999,
+        "originalAmountCents": 19999,
+        "dailyPriceCents": 49,
+        "currency": "USD"
       }
     ]
   }
diff --git a/src/data/repositories/interfaces/ipayment_repository.ts b/src/data/repositories/interfaces/ipayment_repository.ts
index 815ae116..18416390 100644
--- a/src/data/repositories/interfaces/ipayment_repository.ts
+++ b/src/data/repositories/interfaces/ipayment_repository.ts
@@ -17,6 +17,9 @@ export interface IPaymentRepository {
   /** 获取套餐列表。 */
   getPlans(): Promise<Result<PaymentPlansResponse>>;
 
+  /** 获取本地缓存套餐列表。 */
+  getCachedPlans(): Promise<Result<PaymentPlansResponse | null>>;
+
   /** 获取会员套餐列表。 */
   getVipPlans(): Promise<Result<PaymentPlan[]>>;
 
diff --git a/src/data/repositories/payment_repository.ts b/src/data/repositories/payment_repository.ts
index 01daba78..2ca07895 100644
--- a/src/data/repositories/payment_repository.ts
+++ b/src/data/repositories/payment_repository.ts
@@ -15,6 +15,7 @@ import {
   PaymentVipStatusResponse,
 } from "@/data/dto/payment";
 import { PaymentApi, paymentApi } from "@/data/services/api";
+import { PaymentPlansStorage } from "@/data/storage/payment";
 import type { IPaymentRepository } from "@/data/repositories/interfaces";
 import { Result } from "@/utils/result";
 
@@ -23,7 +24,20 @@ export class PaymentRepository implements IPaymentRepository {
 
   /** 获取套餐列表。 */
   async getPlans(): Promise<Result<PaymentPlansResponse>> {
-    return Result.wrap(() => this.api.getPlans());
+    return Result.wrap(async () => {
+      const response = await this.api.getPlans();
+      await PaymentPlansStorage.setPlans(response.toJson());
+      return response;
+    });
+  }
+
+  /** 获取本地缓存套餐列表。 */
+  async getCachedPlans(): Promise<Result<PaymentPlansResponse | null>> {
+    return Result.wrap(async () => {
+      const result = await PaymentPlansStorage.getPlans();
+      if (Result.isErr(result)) throw result.error;
+      return result.data ? PaymentPlansResponse.from(result.data) : null;
+    });
   }
 
   /** 获取会员套餐列表。 */
@@ -73,21 +87,9 @@ export class PaymentRepository implements IPaymentRepository {
 export const paymentRepository = new PaymentRepository(paymentApi);
 
 export function isVipPaymentPlan(plan: PaymentPlan): boolean {
-  const orderType = plan.orderType.toLowerCase();
-  const planId = plan.planId.toLowerCase();
-  return orderType.startsWith("vip_") || planId.startsWith("vip_");
+  return plan.vipDays !== null;
 }
 
 export function isCreditPaymentPlan(plan: PaymentPlan): boolean {
-  const orderType = plan.orderType.toLowerCase();
-  const planId = plan.planId.toLowerCase();
-  return (
-    plan.dolAmount !== null ||
-    orderType.startsWith("dol_") ||
-    orderType.startsWith("credit_") ||
-    planId.startsWith("dol_") ||
-    planId.startsWith("credit_") ||
-    orderType.includes("credit") ||
-    planId.includes("credit")
-  );
+  return plan.dolAmount !== null;
 }
diff --git a/src/data/schemas/payment/payment_plan.ts b/src/data/schemas/payment/payment_plan.ts
index add65792..bfa4dcad 100644
--- a/src/data/schemas/payment/payment_plan.ts
+++ b/src/data/schemas/payment/payment_plan.ts
@@ -3,51 +3,18 @@
  */
 import { z } from "zod";
 
-const PaymentPlanWireSchema = z.object({
-  plan_id: z.string(),
-  plan_name: z.string(),
-  order_type: z.string(),
-  amount_cents: z.number(),
-  original_amount_cents: z.number().nullable().default(null),
-  daily_price_cents: z.number().nullable().default(null),
+export const PaymentPlanSchema = z.object({
+  planId: z.string(),
+  planName: z.string(),
+  orderType: z.string(),
+  vipDays: z.number().nullable(),
+  dolAmount: z.number().nullable(),
+  creditBalance: z.number(),
+  amountCents: z.number(),
+  originalAmountCents: z.number().nullable().default(null),
+  dailyPriceCents: z.number().nullable().default(null),
   currency: z.string(),
-  pricing_tier: z.string(),
-  vip_days: z.number().nullable(),
-  dol_amount: z.number().nullable(),
 });
 
-export const PaymentPlanSchema = z
-  .preprocess((value) => {
-    if (!value || typeof value !== "object") return value;
-    const data = value as Record<string, unknown>;
-    if ("planId" in data) {
-      return {
-        plan_id: data.planId,
-        plan_name: data.planName,
-        order_type: data.orderType,
-        amount_cents: data.amountCents,
-        original_amount_cents: data.originalAmountCents,
-        daily_price_cents: data.dailyPriceCents,
-        currency: data.currency,
-        pricing_tier: data.pricingTier,
-        vip_days: data.vipDays,
-        dol_amount: data.dolAmount,
-      };
-    }
-    return value;
-  }, PaymentPlanWireSchema)
-  .transform((data) => ({
-    planId: data.plan_id,
-    planName: data.plan_name,
-    orderType: data.order_type,
-    amountCents: data.amount_cents,
-    originalAmountCents: data.original_amount_cents,
-    dailyPriceCents: data.daily_price_cents,
-    currency: data.currency,
-    pricingTier: data.pricing_tier,
-    vipDays: data.vip_days,
-    dolAmount: data.dol_amount,
-  }));
-
 export type PaymentPlanInput = z.input<typeof PaymentPlanSchema>;
 export type PaymentPlanData = z.output<typeof PaymentPlanSchema>;
diff --git a/src/data/storage/payment/index.ts b/src/data/storage/payment/index.ts
index 3bb86b57..f41daec9 100644
--- a/src/data/storage/payment/index.ts
+++ b/src/data/storage/payment/index.ts
@@ -3,3 +3,4 @@
  */
 
 export * from "./pending_payment_order_storage";
+export * from "./payment_plans_storage";
diff --git a/src/data/storage/payment/payment_plans_storage.ts b/src/data/storage/payment/payment_plans_storage.ts
new file mode 100644
index 00000000..ed58cefa
--- /dev/null
+++ b/src/data/storage/payment/payment_plans_storage.ts
@@ -0,0 +1,32 @@
+"use client";
+
+import {
+  PaymentPlansResponseSchema,
+  type PaymentPlansResponseData,
+} from "@/data/schemas/payment";
+import { type Result as ResultT, SpAsyncUtil } from "@/utils";
+
+import { StorageKeys } from "../storage_keys";
+
+export class PaymentPlansStorage {
+  private constructor() {}
+
+  static getPlans(): Promise<ResultT<PaymentPlansResponseData | null>> {
+    return SpAsyncUtil.getJson(
+      StorageKeys.paymentPlans,
+      PaymentPlansResponseSchema,
+    );
+  }
+
+  static setPlans(plans: PaymentPlansResponseData): Promise<ResultT<void>> {
+    return SpAsyncUtil.setJson(
+      StorageKeys.paymentPlans,
+      plans,
+      PaymentPlansResponseSchema,
+    );
+  }
+
+  static clearPlans(): Promise<ResultT<void>> {
+    return SpAsyncUtil.remove(StorageKeys.paymentPlans);
+  }
+}
diff --git a/src/data/storage/storage_keys.ts b/src/data/storage/storage_keys.ts
index da9c5402..1ccb9f67 100644
--- a/src/data/storage/storage_keys.ts
+++ b/src/data/storage/storage_keys.ts
@@ -31,6 +31,7 @@ export const StorageKeys = {
 
   // payment
   pendingPaymentOrder: "pending_payment_order",
+  paymentPlans: "payment_plans",
 } as const;
 
 export type StorageKey = (typeof StorageKeys)[keyof typeof StorageKeys];
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 2daf79cf..e68a4c8d 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -22,6 +22,7 @@ export const ROUTES = {
   auth: "/auth",
   sidebar: "/sidebar",
   subscription: "/subscription",
+  coinsRules: "/coins-rules",
 } as const;
 
 export type StaticRoute = (typeof ROUTES)[keyof typeof ROUTES];
@@ -59,6 +60,7 @@ export const PROTECTED_ROUTES: readonly StaticRoute[] = [
 export const PUBLIC_ROUTES: readonly StaticRoute[] = [
   ROUTES.chat,
   ROUTES.sidebar,
+  ROUTES.coinsRules,
 ] as const;
 
 /** 所有静态路由，供 `proxy.ts` matcher 与未来 sitemap 使用 */
@@ -67,6 +69,7 @@ export const ALL_STATIC_ROUTES: readonly StaticRoute[] = [
   ROUTES.chat,
   ROUTES.auth,
   ROUTES.sidebar,
+  ROUTES.coinsRules,
 ] as const;
 
 /** 联合路由类型，包含静态路由与已知动态路由 */
diff --git a/src/stores/payment/__tests__/payment-machine.test.ts b/src/stores/payment/__tests__/payment-machine.test.ts
index 3603f85a..6be7d7fe 100644
--- a/src/stores/payment/__tests__/payment-machine.test.ts
+++ b/src/stores/payment/__tests__/payment-machine.test.ts
@@ -18,42 +18,55 @@ interface CreateOrderInput {
 type CreateOrderSpy = (input: CreateOrderInput) => void;
 
 const monthlyPlan = {
-  plan_id: "vip_monthly",
-  plan_name: "VIP Monthly",
-  order_type: "vip_monthly",
-  amount_cents: 999,
-  original_amount_cents: null,
-  daily_price_cents: 33,
+  planId: "vip_monthly",
+  planName: "VIP Monthly",
+  orderType: "vip_monthly",
+  vipDays: 30,
+  dolAmount: null,
+  creditBalance: 3000,
+  amountCents: 999,
+  originalAmountCents: null,
+  dailyPriceCents: 33,
   currency: "usd",
-  pricing_tier: "T1",
-  vip_days: 30,
-  dol_amount: null,
 };
 
 const lifetimePlan = {
-  plan_id: "vip_lifetime",
-  plan_name: "VIP Lifetime",
-  order_type: "vip_lifetime",
-  amount_cents: 4999,
-  original_amount_cents: null,
-  daily_price_cents: null,
+  planId: "vip_lifetime",
+  planName: "VIP Lifetime",
+  orderType: "vip_lifetime",
+  vipDays: 3650,
+  dolAmount: null,
+  creditBalance: 0,
+  amountCents: 4999,
+  originalAmountCents: null,
+  dailyPriceCents: null,
   currency: "usd",
-  pricing_tier: "T1",
-  vip_days: null,
-  dol_amount: null,
 };
 
 const creditPlan = {
-  plan_id: "credit_1000",
-  plan_name: "1000 Credits",
-  order_type: "credit_recharge",
-  amount_cents: 990,
-  original_amount_cents: null,
-  daily_price_cents: null,
+  planId: "dol_1000",
+  planName: "1000 Credits",
+  orderType: "dol",
+  vipDays: null,
+  dolAmount: 1000,
+  creditBalance: 1000,
+  amountCents: 990,
+  originalAmountCents: null,
+  dailyPriceCents: null,
+  currency: "usd",
+};
+
+const quarterlyPlan = {
+  planId: "vip_quarterly",
+  planName: "VIP Quarterly",
+  orderType: "vip_quarterly",
+  vipDays: 90,
+  dolAmount: null,
+  creditBalance: 9000,
+  amountCents: 2499,
+  originalAmountCents: null,
+  dailyPriceCents: 28,
   currency: "usd",
-  pricing_tier: "T1",
-  vip_days: null,
-  dol_amount: 1000,
 };
 
 function createTestPaymentMachine(
@@ -67,7 +80,10 @@ function createTestPaymentMachine(
 
   return paymentMachine.provide({
     actors: {
-      loadPlans: fromPromise(async () =>
+      loadCachedPlans: fromPromise<PaymentPlansResponse | null>(
+        async () => null,
+      ),
+      refreshPlans: fromPromise(async () =>
         PaymentPlansResponse.from({
           plans: [monthlyPlan, lifetimePlan],
         }),
@@ -113,6 +129,53 @@ describe("paymentMachine", () => {
     actor.stop();
   });
 
+  it("hydrates cached plans before refreshing with network plans", async () => {
+    let resolveRefresh!: (value: PaymentPlansResponse) => void;
+    const refreshPlansPromise = new Promise<PaymentPlansResponse>((resolve) => {
+      resolveRefresh = resolve;
+    });
+    const actor = createActor(
+      paymentMachine.provide({
+        actors: {
+          loadCachedPlans: fromPromise<PaymentPlansResponse | null>(
+            async () =>
+              PaymentPlansResponse.from({
+                plans: [quarterlyPlan],
+              }),
+          ),
+          refreshPlans: fromPromise<PaymentPlansResponse>(
+            async () => refreshPlansPromise,
+          ),
+        },
+      }),
+    ).start();
+
+    actor.send({ type: "PaymentInit" });
+
+    await waitFor(actor, (snapshot) =>
+      snapshot.matches("refreshingPlans"),
+    );
+    expect(actor.getSnapshot().context.plans[0]?.planId).toBe(
+      "vip_quarterly",
+    );
+
+    resolveRefresh(
+      PaymentPlansResponse.from({
+        plans: [monthlyPlan, creditPlan],
+      }),
+    );
+    await waitFor(actor, (snapshot) => snapshot.matches("ready"));
+
+    const context = actor.getSnapshot().context;
+    expect(context.plans.map((plan) => plan.planId)).toEqual([
+      "vip_monthly",
+      "dol_1000",
+    ]);
+    expect(context.selectedPlanId).toBe("vip_monthly");
+
+    actor.stop();
+  });
+
   it("does not create an order before the agreement is accepted", async () => {
     const createOrderSpy = vi.fn<CreateOrderSpy>();
     const actor = createActor(
@@ -232,10 +295,10 @@ describe("paymentMachine", () => {
     actor.send({ type: "PaymentInit" });
     await waitFor(actor, (snapshot) => snapshot.matches("ready"));
 
-    actor.send({ type: "PaymentPlanSelected", planId: creditPlan.plan_id });
+    actor.send({ type: "PaymentPlanSelected", planId: creditPlan.planId });
 
     const context = actor.getSnapshot().context;
-    expect(context.selectedPlanId).toBe("credit_1000");
+    expect(context.selectedPlanId).toBe("dol_1000");
     expect(context.autoRenew).toBe(false);
 
     actor.stop();
diff --git a/src/stores/payment/payment-context.tsx b/src/stores/payment/payment-context.tsx
index 2e9ff714..be2d0d8c 100644
--- a/src/stores/payment/payment-context.tsx
+++ b/src/stores/payment/payment-context.tsx
@@ -59,7 +59,10 @@ export function PaymentProvider({ children }: PaymentProviderProps) {
       orderStatus: state.context.orderStatus,
       errorMessage: state.context.errorMessage,
       launchNonce: state.context.launchNonce,
-      isLoadingPlans: state.matches("loadingPlans"),
+      isLoadingPlans:
+        state.matches("loadingCachedPlans") ||
+        state.matches("loadingPlans") ||
+        state.matches("refreshingPlans"),
       isCreatingOrder: state.matches("creatingOrder"),
       isPollingOrder:
         state.matches("pollingOrder") || state.matches("waitingForPayment"),
diff --git a/src/stores/payment/payment-machine.actors.ts b/src/stores/payment/payment-machine.actors.ts
index 437ae15c..41813b3b 100644
--- a/src/stores/payment/payment-machine.actors.ts
+++ b/src/stores/payment/payment-machine.actors.ts
@@ -15,7 +15,14 @@ import { Result } from "@/utils";
 
 const paymentRepo: IPaymentRepository = paymentRepository;
 
-export const loadPaymentPlansActor = fromPromise<PaymentPlansResponse>(
+export const loadCachedPaymentPlansActor =
+  fromPromise<PaymentPlansResponse | null>(async () => {
+    const result = await paymentRepo.getCachedPlans();
+    if (Result.isErr(result)) throw result.error;
+    return result.data;
+  });
+
+export const refreshPaymentPlansActor = fromPromise<PaymentPlansResponse>(
   async () => {
     const result = await paymentRepo.getPlans();
     if (Result.isErr(result)) throw result.error;
diff --git a/src/stores/payment/payment-machine.helpers.ts b/src/stores/payment/payment-machine.helpers.ts
index 9007db6f..8b82d860 100644
--- a/src/stores/payment/payment-machine.helpers.ts
+++ b/src/stores/payment/payment-machine.helpers.ts
@@ -6,7 +6,12 @@ export function toPaymentErrorMessage(error: unknown): string {
   return error instanceof Error ? error.message : String(error);
 }
 
-export function defaultAutoRenewForPlan(planId: string): boolean {
+export function defaultAutoRenewForPlan(
+  planId: string,
+  plans: readonly PaymentPlan[] = [],
+): boolean {
+  const plan = plans.find((item) => item.planId === planId);
+  if (plan?.dolAmount !== null && plan?.dolAmount !== undefined) return false;
   return (
     !planId.includes("lifetime") &&
     !planId.startsWith("dol_") &&
diff --git a/src/stores/payment/payment-machine.ts b/src/stores/payment/payment-machine.ts
index a9964a73..a95ceb78 100644
--- a/src/stores/payment/payment-machine.ts
+++ b/src/stores/payment/payment-machine.ts
@@ -7,8 +7,9 @@ import type { PaymentEvent } from "./payment-events";
 import { initialState, type PaymentState } from "./payment-state";
 import {
   createPaymentOrderActor,
-  loadPaymentPlansActor,
+  loadCachedPaymentPlansActor,
   pollPaymentOrderStatusActor,
+  refreshPaymentPlansActor,
 } from "./payment-machine.actors";
 import {
   defaultAutoRenewForPlan,
@@ -29,7 +30,8 @@ export const paymentMachine = setup({
     events: {} as PaymentEvent,
   },
   actors: {
-    loadPlans: loadPaymentPlansActor,
+    loadCachedPlans: loadCachedPaymentPlansActor,
+    refreshPlans: refreshPaymentPlansActor,
     createOrder: createPaymentOrderActor,
     pollOrderStatus: pollPaymentOrderStatusActor,
   },
@@ -41,13 +43,42 @@ export const paymentMachine = setup({
   states: {
     idle: {
       on: {
-        PaymentInit: "loadingPlans",
+        PaymentInit: "loadingCachedPlans",
+      },
+    },
+
+    loadingCachedPlans: {
+      invoke: {
+        src: "loadCachedPlans",
+        onDone: [
+          {
+            guard: ({ event }) => (event.output?.plans.length ?? 0) > 0,
+            target: "refreshingPlans",
+            actions: assign(({ context, event }) => {
+              const plans = event.output?.plans ?? [];
+              const selectedPlanId =
+                context.selectedPlanId || getDefaultPlanId(plans);
+              return {
+                plans,
+                selectedPlanId,
+                autoRenew: defaultAutoRenewForPlan(selectedPlanId, plans),
+                errorMessage: null,
+              };
+            }),
+          },
+          {
+            target: "loadingPlans",
+          },
+        ],
+        onError: {
+          target: "loadingPlans",
+        },
       },
     },
 
     loadingPlans: {
       invoke: {
-        src: "loadPlans",
+        src: "refreshPlans",
         onDone: {
           target: "ready",
           actions: assign(({ context, event }) => {
@@ -57,7 +88,35 @@ export const paymentMachine = setup({
             return {
               plans,
               selectedPlanId,
-              autoRenew: defaultAutoRenewForPlan(selectedPlanId),
+              autoRenew: defaultAutoRenewForPlan(selectedPlanId, plans),
+              errorMessage: null,
+            };
+          }),
+        },
+        onError: {
+          target: "ready",
+          actions: assign(({ event }) => ({
+            errorMessage: toPaymentErrorMessage(event.error),
+          })),
+        },
+      },
+    },
+
+    refreshingPlans: {
+      invoke: {
+        src: "refreshPlans",
+        onDone: {
+          target: "ready",
+          actions: assign(({ context, event }) => {
+            const plans = event.output.plans;
+            const selectedPlanId =
+              plans.some((plan) => plan.planId === context.selectedPlanId)
+                ? context.selectedPlanId
+                : getDefaultPlanId(plans);
+            return {
+              plans,
+              selectedPlanId,
+              autoRenew: defaultAutoRenewForPlan(selectedPlanId, plans),
               errorMessage: null,
             };
           }),
@@ -73,12 +132,12 @@ export const paymentMachine = setup({
 
     ready: {
       on: {
-        PaymentInit: "loadingPlans",
+        PaymentInit: "refreshingPlans",
         PaymentPlanSelected: {
-          actions: assign(({ event }) => ({
+          actions: assign(({ context, event }) => ({
             ...resetOrderState(),
             selectedPlanId: event.planId,
-            autoRenew: defaultAutoRenewForPlan(event.planId),
+            autoRenew: defaultAutoRenewForPlan(event.planId, context.plans),
           })),
         },
         PaymentPayChannelChanged: {
@@ -208,10 +267,10 @@ export const paymentMachine = setup({
       on: {
         PaymentPlanSelected: {
           target: "ready",
-          actions: assign(({ event }) => ({
+          actions: assign(({ context, event }) => ({
             ...resetOrderState(),
             selectedPlanId: event.planId,
-            autoRenew: defaultAutoRenewForPlan(event.planId),
+            autoRenew: defaultAutoRenewForPlan(event.planId, context.plans),
           })),
         },
         PaymentPayChannelChanged: {