feat(chat): show first recharge offer in header

src/app/chat/chat-screen.tsx

@@ -24,7 +24,7 @@ import {
   ChatInputBar,
   ChatInsufficientCreditsBanner,
   ExternalBrowserDialog,
-  FirstRechargeOfferDialog,
+  FirstRechargeOfferBanner,
   HistoryUnlockDialog,
   InsufficientCreditsDialog,
   PwaInstallOverlay,
@@ -36,7 +36,7 @@ import {
   isChatDevelopmentEnvironment,
   shouldStartExternalBrowserPrompt,
 } from "./chat-screen.helpers";
-import { useFirstRechargeOfferDialog } from "./hooks/use-first-recharge-offer-dialog";
+import { useFirstRechargeOfferBanner } from "./hooks/use-first-recharge-offer-banner";
 import { useChatUnlockNavigationFlow } from "./hooks/use-chat-unlock-navigation-flow";
 import styles from "./components/chat-screen.module.css";
 
@@ -65,15 +65,9 @@ export function ChatScreen() {
   const messageLimitTitle =
     "Insufficient credits\nTop up to continue chatting";
   const messageLimitCtaLabel = "Top up credits to continue";
-  const hasBlockingDialog =
+  const firstRechargeOfferBanner = useFirstRechargeOfferBanner({
-    showExternalBrowserDialog ||
-    showMessageLimitBanner ||
-    state.unlockHistoryPromptVisible ||
-    unlockPaywallRequest !== null;
-  const firstRechargeOfferDialog = useFirstRechargeOfferDialog({
     historyLoaded: state.historyLoaded,
     loginStatus: authState.loginStatus,
-    hasBlockingDialog,
   });
 
   const externalBrowserPromptShownRef = useRef(false);
@@ -159,7 +153,17 @@ export function ChatScreen() {
 
         <div className={styles.layout}>
           {/* isGuest 派生自 auth.loginStatus */}
-          <ChatHeader isGuest={isGuest} />
+          <ChatHeader
+            isGuest={isGuest}
+            offerBanner={
+              <FirstRechargeOfferBanner
+                visible={firstRechargeOfferBanner.visible}
+                discountPercent={firstRechargeOfferBanner.discountPercent}
+                onClick={firstRechargeOfferBanner.claim}
+                onClose={firstRechargeOfferBanner.close}
+              />
+            }
+          />
 
           <ChatArea
             messages={state.messages}
@@ -211,13 +215,6 @@ export function ChatScreen() {
           onClose={closeInsufficientCreditsDialog}
           onConfirm={confirmInsufficientCreditsDialog}
         />
-
-        <FirstRechargeOfferDialog
-          open={firstRechargeOfferDialog.open}
-          discountPercent={firstRechargeOfferDialog.discountPercent}
-          onClose={firstRechargeOfferDialog.close}
-          onClaim={firstRechargeOfferDialog.claim}
-        />
       </div>
     </MobileShell>
   );

src/app/chat/components/chat-header.module.css

@@ -4,7 +4,8 @@
 .header {
   flex: 0 0 auto;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: stretch;
   padding: 0;
   background: transparent;
 }
@@ -33,7 +34,6 @@
 
 /* 登录模式行容器（Dart: Container(margin-left 12, padding: vertical 8 / horizontal 12)） */
 .headerRow {
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;

src/app/chat/components/chat-header.tsx

@@ -5,6 +5,7 @@
  * 图标：lucide-react <Lock />（游客 banner）+ <Menu />（菜单按钮）
  *   tree-shakable，currentColor 继承父 color
  */
+import type { ReactNode } from "react";
 import { Lock, Menu } from "lucide-react";
 import { useRouter } from "next/navigation";
 
@@ -14,9 +15,10 @@ import styles from "./chat-header.module.css";
 
 export interface ChatHeaderProps {
   isGuest: boolean;
+  offerBanner?: ReactNode;
 }
 
-export function ChatHeader({ isGuest }: ChatHeaderProps) {
+export function ChatHeader({ isGuest, offerBanner }: ChatHeaderProps) {
   const router = useRouter();
 
   if (isGuest) {
@@ -37,6 +39,8 @@ export function ChatHeader({ isGuest }: ChatHeaderProps) {
 
   return (
     <header className={styles.header}>
+      {offerBanner}
+
       <div className={styles.headerRow}>
         {/* 菜单按钮（点击 → push 到 /sidebar，与 Dart MenuButton 一致） */}
         <button

src/app/chat/components/first-recharge-offer-banner.module.css

@@ -0,0 +1,140 @@
+.banner {
+  position: relative;
+  flex: 0 0 auto;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: stretch;
+  margin: 6px var(--chat-inline-padding, 16px) 10px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.34);
+  border-radius: 22px;
+  background:
+    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
+    linear-gradient(135deg, #fff0b8 0%, #ffd1df 45%, #ff61a7 100%);
+  box-shadow: 0 14px 34px rgba(114, 21, 63, 0.22);
+  color: #2c111d;
+  animation: firstRechargeBannerIn 260ms ease-out both;
+}
+
+.banner::after {
+  position: absolute;
+  right: -34px;
+  bottom: -52px;
+  width: 126px;
+  height: 126px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.22);
+  content: "";
+  pointer-events: none;
+}
+
+.contentButton {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  min-width: 0;
+  padding: 12px 8px 12px 14px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.iconWrap {
+  display: inline-flex;
+  width: 34px;
+  height: 34px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.52);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
+}
+
+.icon {
+  color: #fb2f89;
+}
+
+.copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.eyebrow {
+  color: rgba(44, 17, 29, 0.74);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.title {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 5px;
+  align-items: baseline;
+  color: #241019;
+  font-size: 13px;
+  font-weight: 750;
+  line-height: 1.18;
+}
+
+.title strong {
+  color: #f90073;
+  font-size: 20px;
+  font-weight: 950;
+  letter-spacing: -0.04em;
+  line-height: 1;
+}
+
+.arrow {
+  color: rgba(44, 17, 29, 0.58);
+}
+
+.closeButton {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 42px;
+  min-height: 100%;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-left: 1px solid rgba(255, 255, 255, 0.26);
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(44, 17, 29, 0.68);
+  cursor: pointer;
+}
+
+.contentButton:focus-visible,
+.closeButton:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.94);
+  outline-offset: -3px;
+}
+
+@keyframes firstRechargeBannerIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (max-width: 360px) {
+  .title {
+    flex-direction: column;
+    gap: 2px;
+  }
+}

src/app/chat/components/first-recharge-offer-banner.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { ChevronRight, Sparkles, X } from "lucide-react";
+
+import styles from "./first-recharge-offer-banner.module.css";
+
+export interface FirstRechargeOfferBannerProps {
+  visible: boolean;
+  discountPercent: number;
+  onClick: () => void;
+  onClose: () => void;
+}
+
+export function FirstRechargeOfferBanner({
+  visible,
+  discountPercent,
+  onClick,
+  onClose,
+}: FirstRechargeOfferBannerProps) {
+  if (!visible) return null;
+
+  return (
+    <section className={styles.banner} aria-label="First recharge offer">
+      <button
+        type="button"
+        className={styles.contentButton}
+        onClick={onClick}
+      >
+        <span className={styles.iconWrap} aria-hidden="true">
+          <Sparkles className={styles.icon} size={18} />
+        </span>
+        <span className={styles.copy}>
+          <span className={styles.eyebrow}>First Recharge Offer</span>
+          <span className={styles.title}>
+            <strong>{discountPercent}% OFF</strong>
+            <span>Claim your discount now</span>
+          </span>
+        </span>
+        <ChevronRight className={styles.arrow} size={18} aria-hidden="true" />
+      </button>
+
+      <button
+        type="button"
+        className={styles.closeButton}
+        onClick={onClose}
+        aria-label="Hide first recharge offer"
+      >
+        <X size={16} aria-hidden="true" />
+      </button>
+    </section>
+  );
+}

src/app/chat/components/first-recharge-offer-dialog.module.css

@@ -1,116 +0,0 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 215;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  background:
-    radial-gradient(circle at 50% 28%, rgba(255, 103, 224, 0.26), transparent 34%),
-    rgba(0, 0, 0, 0.52);
-}
-
-.dialog {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  max-width: var(--pwa-install-dialog-max-width, 360px);
-  padding: 24px 18px 18px;
-  border: 1px solid rgba(255, 103, 224, 0.3);
-  border-radius: 34px;
-  background:
-    linear-gradient(180deg, rgba(255, 250, 253, 0.98) 0%, rgba(255, 238, 247, 0.98) 100%),
-    #ffffff;
-  box-shadow: 0 20px 52px rgba(39, 14, 30, 0.26);
-  text-align: center;
-}
-
-.dialog::before {
-  position: absolute;
-  top: -58px;
-  right: -42px;
-  width: 138px;
-  height: 138px;
-  border-radius: 999px;
-  background: rgba(255, 138, 52, 0.18);
-  content: "";
-}
-
-.badge {
-  position: relative;
-  display: inline-flex;
-  padding: 6px 10px;
-  border-radius: 999px;
-  background: rgba(255, 95, 174, 0.12);
-  color: #f657a0;
-  font-size: 12px;
-  font-weight: 900;
-  letter-spacing: 0.02em;
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.discount {
-  position: relative;
-  margin-top: 12px;
-  color: #181014;
-  font-size: 46px;
-  font-weight: 900;
-  letter-spacing: -1.5px;
-  line-height: 1;
-}
-
-.title {
-  position: relative;
-  margin: 10px 0 0;
-  color: #181014;
-  font-size: 22px;
-  font-weight: 900;
-  line-height: 1.18;
-}
-
-.content {
-  position: relative;
-  margin: 10px 12px 20px;
-  color: #5f4d56;
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.45;
-}
-
-.actions {
-  position: relative;
-  display: flex;
-  gap: var(--spacing-md, 12px);
-  width: 100%;
-}
-
-.button {
-  display: flex;
-  flex: 1 1 auto;
-  height: var(--pwa-button-height, 44px);
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: var(--radius-bottom-sheet, 28px);
-  cursor: pointer;
-  font-size: var(--font-size-lg, 16px);
-  font-weight: 800;
-}
-
-.secondary {
-  background: rgba(24, 16, 20, 0.1);
-  color: #5f4d56;
-}
-
-.primary {
-  background: linear-gradient(90deg, #ff67e0 0%, #ff52a2 100%);
-  color: #ffffff;
-  box-shadow: 0 8px 18px rgba(246, 87, 160, 0.28);
-}
-
-.button:focus-visible {
-  outline: 2px solid #f657a0;
-  outline-offset: 3px;
-}

src/app/chat/components/first-recharge-offer-dialog.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import styles from "./first-recharge-offer-dialog.module.css";
-
-export interface FirstRechargeOfferDialogProps {
-  open: boolean;
-  discountPercent: number;
-  onClose: () => void;
-  onClaim: () => void;
-}
-
-export function FirstRechargeOfferDialog({
-  open,
-  discountPercent,
-  onClose,
-  onClaim,
-}: FirstRechargeOfferDialogProps) {
-  if (!open) return null;
-
-  return (
-    <div
-      className={styles.overlay}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="first-recharge-offer-title"
-    >
-      <div className={styles.dialog}>
-        <span className={styles.badge}>Limited offer</span>
-        <div className={styles.discount}>{discountPercent}% OFF</div>
-        <h2 id="first-recharge-offer-title" className={styles.title}>
-          First Recharge Offer
-        </h2>
-        <p className={styles.content}>
-          Your first recharge discount is ready. Claim it now and keep the
-          conversation flowing.
-        </p>
-        <div className={styles.actions}>
-          <button
-            type="button"
-            className={`${styles.button} ${styles.secondary}`}
-            onClick={onClose}
-          >
-            Later
-          </button>
-          <button
-            type="button"
-            className={`${styles.button} ${styles.primary}`}
-            onClick={onClaim}
-          >
-            Claim offer
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

src/app/chat/components/index.ts

@@ -12,7 +12,7 @@ export * from "./chat-input-text-field";
 export * from "./chat-send-button";
 export * from "./date-header";
 export * from "./external-browser-dialog";
-export * from "./first-recharge-offer-dialog";
+export * from "./first-recharge-offer-banner";
 export * from "./fullscreen-image-viewer";
 export * from "./history-unlock-dialog";
 export * from "./image-bubble";

src/app/chat/hooks/__tests__/use-first-recharge-offer-banner.test.ts

@@ -1,48 +1,59 @@
 import { describe, expect, it } from "vitest";
 
-import { shouldShowFirstRechargeOfferDialog } from "../use-first-recharge-offer-dialog";
+import { shouldShowFirstRechargeOfferBanner } from "../use-first-recharge-offer-banner";
 
-describe("shouldShowFirstRechargeOfferDialog", () => {
+describe("shouldShowFirstRechargeOfferBanner", () => {
   it("shows for authenticated users when first recharge offer is available", () => {
     expect(
-      shouldShowFirstRechargeOfferDialog({
+      shouldShowFirstRechargeOfferBanner({
         historyLoaded: true,
         loginStatus: "facebook",
         isFirstRecharge: true,
-        hasBlockingDialog: false,
+        dismissed: false,
       }),
     ).toBe(true);
   });
 
   it("does not show for guest users", () => {
     expect(
-      shouldShowFirstRechargeOfferDialog({
+      shouldShowFirstRechargeOfferBanner({
         historyLoaded: true,
         loginStatus: "guest",
         isFirstRecharge: true,
-        hasBlockingDialog: false,
+        dismissed: false,
       }),
     ).toBe(false);
   });
 
   it("does not show unless isFirstRecharge is true", () => {
     expect(
-      shouldShowFirstRechargeOfferDialog({
+      shouldShowFirstRechargeOfferBanner({
         historyLoaded: true,
         loginStatus: "google",
         isFirstRecharge: false,
-        hasBlockingDialog: false,
+        dismissed: false,
       }),
     ).toBe(false);
   });
 
-  it("does not show over a higher priority dialog", () => {
+  it("does not show after the user dismisses it", () => {
     expect(
-      shouldShowFirstRechargeOfferDialog({
+      shouldShowFirstRechargeOfferBanner({
         historyLoaded: true,
         loginStatus: "apple",
         isFirstRecharge: true,
-        hasBlockingDialog: true,
+        dismissed: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("waits until chat history has loaded", () => {
+    expect(
+      shouldShowFirstRechargeOfferBanner({
+        historyLoaded: false,
+        loginStatus: "email",
+        isFirstRecharge: true,
+        dismissed: false,
       }),
     ).toBe(false);
   });

src/app/chat/hooks/use-first-recharge-offer-banner.ts

@@ -0,0 +1,145 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+
+import type { LoginStatus } from "@/data/dto/auth";
+import { ROUTE_BUILDERS } from "@/router/routes";
+import { usePaymentDispatch, usePaymentState } from "@/stores/payment";
+import { useUserState } from "@/stores/user/user-context";
+import { getDefaultPayChannelForCountryCode } from "@/lib/payment/default_pay_channel";
+import {
+  getFirstRechargeOfferBannerDismissed,
+  recordFirstRechargeOfferBannerDismissed,
+} from "@/lib/chat/first_recharge_offer_banner";
+
+export interface FirstRechargeOfferBannerEligibility {
+  historyLoaded: boolean;
+  loginStatus: LoginStatus;
+  isFirstRecharge: boolean;
+  dismissed: boolean;
+}
+
+export interface UseFirstRechargeOfferBannerInput {
+  historyLoaded: boolean;
+  loginStatus: LoginStatus;
+}
+
+export interface UseFirstRechargeOfferBannerOutput {
+  visible: boolean;
+  discountPercent: number;
+  close: () => void;
+  claim: () => void;
+}
+
+interface DismissalState {
+  userId: string | null;
+  loaded: boolean;
+  dismissed: boolean;
+}
+
+export function shouldShowFirstRechargeOfferBanner(
+  input: FirstRechargeOfferBannerEligibility,
+): boolean {
+  if (!input.historyLoaded) return false;
+  if (input.loginStatus === "notLoggedIn" || input.loginStatus === "guest") {
+    return false;
+  }
+  if (!input.isFirstRecharge) return false;
+  return !input.dismissed;
+}
+
+export function useFirstRechargeOfferBanner({
+  historyLoaded,
+  loginStatus,
+}: UseFirstRechargeOfferBannerInput): UseFirstRechargeOfferBannerOutput {
+  const router = useRouter();
+  const payment = usePaymentState();
+  const paymentDispatch = usePaymentDispatch();
+  const userState = useUserState();
+  const isAuthenticatedUser =
+    loginStatus !== "notLoggedIn" && loginStatus !== "guest";
+  const userId = userState.currentUser?.id ?? null;
+  const hasUserIdentity = !isAuthenticatedUser || Boolean(userId);
+  const [dismissalState, setDismissalState] = useState<DismissalState>(() => ({
+    userId,
+    loaded: false,
+    dismissed: false,
+  }));
+  const discountPercent = payment.firstRechargeOffer?.discountPercent ?? 50;
+
+  useEffect(() => {
+    if (!isAuthenticatedUser) return;
+    if (payment.status !== "idle") return;
+    const defaultPayChannel = getDefaultPayChannelForCountryCode(
+      userState.currentUser?.countryCode,
+    );
+    paymentDispatch({ type: "PaymentInit", payChannel: defaultPayChannel });
+  }, [
+    payment.status,
+    paymentDispatch,
+    isAuthenticatedUser,
+    userState.currentUser?.countryCode,
+  ]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadDismissal = async () => {
+      const dismissed = await getFirstRechargeOfferBannerDismissed(userId);
+      if (cancelled) return;
+
+      setDismissalState({
+        userId,
+        loaded: true,
+        dismissed,
+      });
+    };
+
+    void loadDismissal();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [userId]);
+
+  const dismissalLoaded =
+    dismissalState.userId === userId && dismissalState.loaded;
+  const visible =
+    hasUserIdentity &&
+    dismissalLoaded &&
+    shouldShowFirstRechargeOfferBanner({
+      historyLoaded,
+      loginStatus,
+      isFirstRecharge: payment.isFirstRecharge,
+      dismissed: dismissalState.dismissed,
+    });
+
+  function close(): void {
+    setDismissalState({
+      userId,
+      loaded: true,
+      dismissed: true,
+    });
+    void recordFirstRechargeOfferBannerDismissed(userId);
+  }
+
+  function claim(): void {
+    const defaultPayChannel = getDefaultPayChannelForCountryCode(
+      userState.currentUser?.countryCode,
+    );
+    router.push(
+      ROUTE_BUILDERS.subscription("vip", {
+        payChannel: defaultPayChannel,
+        returnTo: "chat",
+      }),
+    );
+  }
+
+  return {
+    visible,
+    discountPercent,
+    close,
+    claim,
+  };
+}

src/app/chat/hooks/use-first-recharge-offer-dialog.ts

@@ -1,146 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import { useRouter } from "next/navigation";
-
-import type { LoginStatus } from "@/data/dto/auth";
-import { ROUTE_BUILDERS } from "@/router/routes";
-import { usePaymentDispatch, usePaymentState } from "@/stores/payment";
-import { useUserState } from "@/stores/user/user-context";
-import { getDefaultPayChannelForCountryCode } from "@/lib/payment/default_pay_channel";
-import { Result, SpAsyncUtil, todayString } from "@/utils";
-
-export const FIRST_RECHARGE_OFFER_DIALOG_DELAY_MS = 4000;
-
-const FIRST_RECHARGE_OFFER_DIALOG_KEY_PREFIX =
-  "cozsweet:firstRechargeOfferDialogShown";
-
-export interface FirstRechargeOfferDialogEligibility {
-  historyLoaded: boolean;
-  loginStatus: LoginStatus;
-  isFirstRecharge: boolean;
-  hasBlockingDialog: boolean;
-}
-
-export interface UseFirstRechargeOfferDialogInput {
-  historyLoaded: boolean;
-  loginStatus: LoginStatus;
-  hasBlockingDialog: boolean;
-}
-
-export interface UseFirstRechargeOfferDialogOutput {
-  open: boolean;
-  discountPercent: number;
-  close: () => void;
-  claim: () => void;
-}
-
-export function shouldShowFirstRechargeOfferDialog(
-  input: FirstRechargeOfferDialogEligibility,
-): boolean {
-  if (!input.historyLoaded) return false;
-  if (input.loginStatus === "notLoggedIn" || input.loginStatus === "guest") {
-    return false;
-  }
-  if (!input.isFirstRecharge) return false;
-  return !input.hasBlockingDialog;
-}
-
-export function useFirstRechargeOfferDialog({
-  historyLoaded,
-  loginStatus,
-  hasBlockingDialog,
-}: UseFirstRechargeOfferDialogInput): UseFirstRechargeOfferDialogOutput {
-  const router = useRouter();
-  const payment = usePaymentState();
-  const paymentDispatch = usePaymentDispatch();
-  const userState = useUserState();
-  const [open, setOpen] = useState(false);
-  const [dismissed, setDismissed] = useState(false);
-  const isAuthenticatedUser =
-    loginStatus !== "notLoggedIn" && loginStatus !== "guest";
-
-  const storageKey = useMemo(
-    () =>
-      `${FIRST_RECHARGE_OFFER_DIALOG_KEY_PREFIX}:${
-        userState.currentUser?.id || "anonymous"
-      }`,
-    [userState.currentUser?.id],
-  );
-  const discountPercent = payment.firstRechargeOffer?.discountPercent ?? 50;
-  const canShow = shouldShowFirstRechargeOfferDialog({
-    historyLoaded,
-    loginStatus,
-    isFirstRecharge: payment.isFirstRecharge,
-    hasBlockingDialog,
-  });
-
-  useEffect(() => {
-    if (!isAuthenticatedUser) return;
-    if (payment.status !== "idle") return;
-    const defaultPayChannel = getDefaultPayChannelForCountryCode(
-      userState.currentUser?.countryCode,
-    );
-    paymentDispatch({ type: "PaymentInit", payChannel: defaultPayChannel });
-  }, [
-    payment.status,
-    paymentDispatch,
-    isAuthenticatedUser,
-    userState.currentUser?.countryCode,
-  ]);
-
-  useEffect(() => {
-    if (!canShow || dismissed || open) return;
-
-    let cancelled = false;
-    let timer: number | undefined;
-
-    const schedule = async () => {
-      const shownDateResult = await SpAsyncUtil.getString(storageKey);
-      if (
-        cancelled ||
-        (Result.isOk(shownDateResult) && shownDateResult.data === todayString())
-      ) {
-        return;
-      }
-
-      timer = window.setTimeout(() => {
-        if (cancelled) return;
-        setOpen(true);
-      }, FIRST_RECHARGE_OFFER_DIALOG_DELAY_MS);
-    };
-
-    void schedule();
-
-    return () => {
-      cancelled = true;
-      if (timer !== undefined) window.clearTimeout(timer);
-    };
-  }, [canShow, dismissed, open, storageKey]);
-
-  function markShown(): void {
-    setDismissed(true);
-    setOpen(false);
-    void SpAsyncUtil.setString(storageKey, todayString());
-  }
-
-  function claim(): void {
-    markShown();
-    const defaultPayChannel = getDefaultPayChannelForCountryCode(
-      userState.currentUser?.countryCode,
-    );
-    router.push(
-      ROUTE_BUILDERS.subscription("vip", {
-        payChannel: defaultPayChannel,
-        returnTo: "chat",
-      }),
-    );
-  }
-
-  return {
-    open: open && !hasBlockingDialog,
-    discountPercent,
-    close: markShown,
-    claim,
-  };
-}

src/data/storage/app/app_storage.ts

@@ -70,6 +70,27 @@ export class AppStorage {
     return SpAsyncUtil.setString(StorageKeys.lastAppInfoReported, todayString);
   }
 
+  // ---- first recharge offer banner ----
+
+  static async getFirstRechargeOfferBannerDismissed(
+    userId: string | null | undefined,
+  ): Promise<ResultT<boolean>> {
+    const r = await SpAsyncUtil.getBool(
+      AppStorage.firstRechargeOfferBannerDismissedKey(userId),
+    );
+    if (!r.success) return r;
+    return Result.ok(r.data === true);
+  }
+
+  static recordFirstRechargeOfferBannerDismissed(
+    userId: string | null | undefined,
+  ): Promise<ResultT<void>> {
+    return SpAsyncUtil.setBool(
+      AppStorage.firstRechargeOfferBannerDismissedKey(userId),
+      true,
+    );
+  }
+
   // ---- internal helpers ----
 
   /**
@@ -87,4 +108,12 @@ export class AppStorage {
     if (!r.success) return r;
     return Result.ok(r.data === null || r.data !== todayString);
   }
+
+  private static firstRechargeOfferBannerDismissedKey(
+    userId: string | null | undefined,
+  ): string {
+    return `${StorageKeys.firstRechargeOfferBannerDismissed}:${
+      userId || "anonymous"
+    }`;
+  }
 }

src/data/storage/storage_keys.ts

@@ -32,6 +32,7 @@ export const StorageKeys = {
   lastExternalBrowserDialogShown: "last_external_browser_dialog_shown",
   lastPwaEventReported: "last_pwa_event_reported",
   lastAppInfoReported: "last_app_info_reported",
+  firstRechargeOfferBannerDismissed: "first_recharge_offer_banner_dismissed",
 
   // payment
   pendingPaymentOrder: "pending_payment_order",

src/lib/chat/first_recharge_offer_banner.ts

@@ -0,0 +1,16 @@
+"use client";
+
+import { AppStorage } from "@/data/storage/app/app_storage";
+
+export async function getFirstRechargeOfferBannerDismissed(
+  userId: string | null | undefined,
+): Promise<boolean> {
+  const result = await AppStorage.getFirstRechargeOfferBannerDismissed(userId);
+  return result.success ? result.data : false;
+}
+
+export function recordFirstRechargeOfferBannerDismissed(
+  userId: string | null | undefined,
+): Promise<unknown> {
+  return AppStorage.recordFirstRechargeOfferBannerDismissed(userId);
+}