feat(chat): restore image viewer after payment

2026-06-29 16:19:48 +08:00
parent 6273cd1bbe
commit 61796c732f
12 changed files with 297 additions and 63 deletions
@@ -0,0 +1,72 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { ROUTE_BUILDERS, ROUTES } from "@/router/routes";
+import { useAuthState } from "@/stores/auth/auth-context";
+import { useChatDispatch, useChatState } from "@/stores/chat/chat-context";
+
+import { getChatPaywallNavigationUrl } from "../../chat-screen.helpers";
+import { savePendingChatImageReturn } from "../../chat-image-return-session";
+import { FullscreenImageViewer, HistoryUnlockDialog } from "../../components";
+import styles from "./chat-image-viewer-screen.module.css";
+
+export interface ChatImageViewerScreenProps {
+  messageId: string;
+}
+
+export function ChatImageViewerScreen({
+  messageId,
+}: ChatImageViewerScreenProps) {
+  const router = useRouter();
+  const authState = useAuthState();
+  const chatState = useChatState();
+  const chatDispatch = useChatDispatch();
+  const message = chatState.messages.find(
+    (item) => item.id === messageId && item.imageUrl,
+  );
+
+  const handleClose = () => {
+    router.push(ROUTES.chat);
+  };
+
+  const handleUnlockImagePaywall = () => {
+    savePendingChatImageReturn({
+      messageId,
+      returnUrl: ROUTE_BUILDERS.chatImage(messageId),
+    });
+    router.push(getChatPaywallNavigationUrl(authState.loginStatus));
+  };
+
+  if (!message) {
+    return (
+      <main className={styles.emptyScreen}>
+        <button type="button" className={styles.backButton} onClick={handleClose}>
+          Back to chat
+        </button>
+        <p className={styles.emptyText}>
+          {chatState.historyLoaded ? "Image not found." : "Loading image..."}
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <>
+      <FullscreenImageViewer
+        imageUrl={message.imageUrl ?? ""}
+        imagePaywalled={message.imagePaywalled === true}
+        onUnlockImagePaywall={handleUnlockImagePaywall}
+        onClose={handleClose}
+      />
+      <HistoryUnlockDialog
+        open={chatState.unlockHistoryPromptVisible}
+        lockedCount={chatState.lockedHistoryCount}
+        isLoading={chatState.isUnlockingHistory}
+        errorMessage={chatState.unlockHistoryError}
+        onClose={() => chatDispatch({ type: "ChatUnlockHistoryDismissed" })}
+        onConfirm={() => chatDispatch({ type: "ChatUnlockHistoryConfirmed" })}
+      />
+    </>
+  );
+}