feat(app): improve payment and paywall UX

src/app/chat/chat-screen.tsx

@@ -55,18 +55,12 @@ export function ChatScreen() {
       ? "The limit for free chat times\nhas been reached"
       : undefined;
   const messageLimitCta = isGuest ? "Log in to continue chatting" : undefined;
-  const showPhotoPaywallBanner =
-    state.paywallTriggered && state.paywallReason === "photo_paywall";
+
   const showPrivatePaywallBanner =
     state.paywallTriggered && state.paywallReason === "private_paywall";
-  const showInlineUpgradeBanner =
-    showPhotoPaywallBanner || showPrivatePaywallBanner;
-  const inlineUpgradeTitle = showPrivatePaywallBanner
-    ? "Unlock VIP to view private messages"
-    : "Unlock VIP to view Elio's photos";
-  const inlineUpgradeCta = showPrivatePaywallBanner
-    ? "Activate VIP to view private messages"
-    : "Activate VIP to view photos";
+
+  const inlineUpgradeTitle = "Unlock VIP to view private messages";
+  const inlineUpgradeCta = "Activate VIP to view private messages";
 
   const externalBrowserPromptShownRef = useRef(false);
 
@@ -143,6 +137,10 @@ export function ChatScreen() {
     chatDispatch({ type: "ChatUnlockPrivateMessage", messageId });
   }
 
+  function handleUnlockImagePaywall(): void {
+    router.push(`${ROUTES.subscription}?type=vip`);
+  }
+
   function handleMessageLimitUnlock(): void {
     if (isGuest) {
       router.push(ROUTES.auth);
@@ -175,9 +173,10 @@ export function ChatScreen() {
             isGuest={isGuest}
             unlockingPrivateMessageId={state.unlockingPrivateMessageId}
             onUnlockPrivateMessage={handleUnlockPrivateMessage}
+            onUnlockImagePaywall={handleUnlockImagePaywall}
           />
 
-          {showInlineUpgradeBanner ? (
+          {showPrivatePaywallBanner ? (
             <ChatQuotaExhaustedBanner
               title={inlineUpgradeTitle}
               ctaLabel={inlineUpgradeCta}