feat: unified peak design subscribe page, stripe one-time checkout, and chat persistence across payment redirects

Author: root

.eslintrc.yml

@@ -33,6 +33,7 @@ globals:
   definePageMeta: readonly
   useSharedChat: readonly
   useRoute: readonly
+  useRouter: readonly
   useNuxtApp: readonly
   useAnalytics: readonly
   defineEmits: readonly

components/ChatVisualization/PdfDownloadPopup.vue

@@ -71,17 +71,22 @@
             </v-btn>
 
             <!-- Payment section if not subscribed -->
-            <div v-else>
-              <ChatVisualizationPayment
-                :amount="price"
-                :currency="currency"
-                @onApprove="onApprove"
-                @onCreateOrder="onCreateOrder"
-                @onError="onError"
-              />
+            <div v-else class="text-center">
+              <v-btn
+                color="success"
+                size="large"
+                class="mb-3"
+                :loading="isOneTimeLoading"
+                @click="payOneTimeStripe"
+              >
+                <v-icon class="mr-1">mdi-credit-card</v-icon>
+                <span
+                  >{{ $t("chooseOneTime") }} ({{ price }} {{ currency }})</span
+                >
+              </v-btn>
               <v-alert density="compact" type="info" prominent>
                 <span v-html="$t('subscriptionHint')"></span>
-                <v-btn to="/subscribe">
+                <v-btn to="/subscribe" class="ml-2" variant="tonal">
                   <span v-html="$t('openSubscriptionPage')"></span>
                 </v-btn>
               </v-alert>
@@ -208,6 +213,7 @@
 import { saveAs } from "file-saver";
 import { markRaw } from "vue";
 import { GTAG_PAYMENT, GTAG_PDF, gtagEvent } from "~/utils/gtagValues";
+import { fetchOneTimeCheckoutUrl } from "~/utils/subscription";
 import PDFWorker from "~/assets/js/pdf.worker.js?worker";
 import { loadImage, objectToDictionary } from "~/utils/utils";
 
@@ -224,6 +230,7 @@ export default {
     return {
       showDownloadPopup: false,
       isLoading: false,
+      isOneTimeLoading: false,
       GTAG_PAYMENT,
       GTAG_PDF,
       progress: 0,
@@ -243,14 +250,23 @@ export default {
       this.download(false);
       this.showDownloadPopup = false;
     },
-    onCreateOrder() {
+    async payOneTimeStripe() {
+      if (this.isOneTimeLoading) return;
       gtagEvent("created", GTAG_PAYMENT, 0);
+      this.isOneTimeLoading = true;
+      try {
+        const url = await fetchOneTimeCheckoutUrl({
+          successUrl: `${window.location.origin}/?session_id={CHECKOUT_SESSION_ID}&payment_success=true`,
+          cancelUrl: window.location.href,
+        });
+        if (!url) throw new Error("No checkout URL returned");
+        window.location.assign(url);
+      } catch (err) {
+        console.error("Error creating one-time Stripe checkout:", err);
+        alert("Failed to start checkout. Please try again.");
+        this.isOneTimeLoading = false;
+      }
     },
-    onApprove() {
-      gtagEvent("approved", GTAG_PAYMENT, 10);
-      this.downloadFull();
-    },
-    onError() {},
     async download(isSample = false) {
       if (!import.meta.client) return;
 

functions-wrapped/src/stripe/createCheckoutSession.ts

@@ -7,26 +7,51 @@ import {
 } from "./common";
 import * as logger from "firebase-functions/logger";
 
+interface CreateCheckoutSessionRequest {
+  priceId?: string;
+  mode?: "subscription" | "payment";
+  successUrl?: string;
+  cancelUrl?: string;
+}
+
 export const createCheckoutSession = onCall(
   { secrets: [stripeSecretKey] },
   async (request) => {
     const stripe = getStripe();
 
     // Validate origin from request headers
     const origin = validateOrigin(request.rawRequest.get("origin"));
+    const data = (request.data || {}) as CreateCheckoutSessionRequest;
+    const mode = data.mode === "payment" ? "payment" : "subscription";
+    const price = data.priceId || proPriceId.value();
+
+    const defaultSuccessUrl =
+      mode === "payment"
+        ? `${origin}/?session_id={CHECKOUT_SESSION_ID}&payment_success=true`
+        : `${origin}/subscription/verify?session_id={CHECKOUT_SESSION_ID}`;
+    const defaultCancelUrl = `${origin}/subscribe`;
+
+    const success_url = data.successUrl
+      ? data.successUrl.replace(
+          "{CHECKOUT_SESSION_ID}",
+          "{CHECKOUT_SESSION_ID}"
+        )
+      : defaultSuccessUrl;
+    const cancel_url = data.cancelUrl || defaultCancelUrl;
 
     try {
       const session = await stripe.checkout.sessions.create({
-        mode: "subscription",
+        mode,
         line_items: [
           {
-            price: proPriceId.value(),
+            price,
             quantity: 1,
           },
         ],
-        success_url: `${origin}/wrapped/subscription/success?session_id={CHECKOUT_SESSION_ID}`,
-        cancel_url: `${origin}/wrapped`,
+        success_url,
+        cancel_url,
       });
+
       // ❗ onCall cannot redirect → return the URL.
       return { url: session.url };
     } catch (error: any) {

nuxt.config.js

@@ -111,6 +111,9 @@ export default defineNuxtConfig({
       stripePriceId: local
         ? "price_1Sc6u074KJ57kF2wxb5cnIZL"
         : "price_1SgOxVL4rDqbYflowSbSteJQ",
+      stripeOneTimePriceId: local
+        ? "price_1ShAqrL4rDqbYfloWx53VxpL"
+        : "price_1ShAqrL4rDqbYfloWx53VxpL",
       wrappedFirebase: {
         apiKey: "AIzaSyBaVob5g3xHdzJnkOI2dtbdYND-__Tzutc",
         authDomain: "whatsanalyze-wrapped-prod.firebaseapp.com",

pages/index.vue

@@ -178,6 +178,11 @@ import {
 import { debounce } from "lodash-es";
 import { useSubscriptionStore } from "~/stores/subscription";
 import { storeToRefs } from "pinia";
+import {
+  saveChatSession,
+  loadChatSession,
+  clearChatSession,
+} from "~/utils/chatSession";
 
 export default {
   async setup() {
@@ -248,6 +253,15 @@ export default {
       this.$nextTick(() => {
         window.scrollTo({ top: 0, behavior: "instant" });
       });
+    } else {
+      const savedSession = loadChatSession();
+      if (savedSession && savedSession.messages?.length > 0) {
+        this.isShowingChats = true;
+        this.newMessages({
+          messages: savedSession.messages,
+          attachments: savedSession.attachments || [],
+        });
+      }
     }
   },
   beforeUnmount() {
@@ -270,6 +284,7 @@ export default {
           GTAG_NUM_PERSONS,
           0
         );
+        saveChatSession(chatObject);
       }
     },
     rando() {
@@ -286,6 +301,7 @@ export default {
       this.attachments = undefined;
       const sharedChat = useSharedChat();
       sharedChat.value = null;
+      clearChatSession();
     },
   },
 };