feat(chat): show first recharge offer dialog

src/app/chat/chat-screen.tsx

@@ -24,6 +24,7 @@ import {
   ChatInputBar,
   ChatInsufficientCreditsBanner,
   ExternalBrowserDialog,
+  FirstRechargeOfferDialog,
   HistoryUnlockDialog,
   InsufficientCreditsDialog,
   PwaInstallOverlay,
@@ -35,6 +36,7 @@ import {
   isChatDevelopmentEnvironment,
   shouldStartExternalBrowserPrompt,
 } from "./chat-screen.helpers";
+import { useFirstRechargeOfferDialog } from "./hooks/use-first-recharge-offer-dialog";
 import { useChatUnlockNavigationFlow } from "./hooks/use-chat-unlock-navigation-flow";
 import styles from "./components/chat-screen.module.css";
 
@@ -63,6 +65,16 @@ export function ChatScreen() {
   const messageLimitTitle =
     "Insufficient credits\nTop up to continue chatting";
   const messageLimitCtaLabel = "Top up credits to continue";
+  const hasBlockingDialog =
+    showExternalBrowserDialog ||
+    showMessageLimitBanner ||
+    state.unlockHistoryPromptVisible ||
+    unlockPaywallRequest !== null;
+  const firstRechargeOfferDialog = useFirstRechargeOfferDialog({
+    historyLoaded: state.historyLoaded,
+    loginStatus: authState.loginStatus,
+    hasBlockingDialog,
+  });
 
   const externalBrowserPromptShownRef = useRef(false);
 
@@ -199,6 +211,13 @@ export function ChatScreen() {
           onClose={closeInsufficientCreditsDialog}
           onConfirm={confirmInsufficientCreditsDialog}
         />
+
+        <FirstRechargeOfferDialog
+          open={firstRechargeOfferDialog.open}
+          discountPercent={firstRechargeOfferDialog.discountPercent}
+          onClose={firstRechargeOfferDialog.close}
+          onClaim={firstRechargeOfferDialog.claim}
+        />
       </div>
     </MobileShell>
   );