Fixes/issue#388

app/dashboard/success/page.tsx

@@ -1,36 +1,14 @@
 import { Metadata } from "next";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { Check } from "lucide-react";
+
+import { SuccessCard } from "@/components/dashboard/success-card";
+import { getUserAndSubscription } from "@/lib/data-fetching";
 
 export const metadata: Metadata = {
   title: "Subscription Upgrade Success",
   description: "Page for successful checkout of annual subscription upgrade",
 };
 
-export default function DashboardSuccess() {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
-      <Card className="mx-4 w-full max-w-md">
-        <CardContent className="pt-6 text-center">
-          <div className="mb-6">
-            <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
-              <Check className="h-6 w-6 text-green-600 dark:text-green-400" />
-            </div>
-            <h1 className="mb-2 text-2xl font-bold tracking-tighter">
-              Subscription Upgraded
-            </h1>
-            <p className="text-muted-foreground">
-              Thank you! Your subscription has been successfully upgraded to
-              annual.
-            </p>
-          </div>
-          <Link href="/dashboard">
-            <Button className="w-full">Return to Dashboard</Button>
-          </Link>
-        </CardContent>
-      </Card>
-    </div>
-  );
+export default async function DashboardSuccess() {
+  const { openAppQueryParams } = await getUserAndSubscription();
+  return <SuccessCard openAppQueryParams={openAppQueryParams} />;
 }

app/pricing/success/page.tsx

@@ -2,6 +2,7 @@ import { constructMetadata } from "@/lib/utils";
 import { Metadata } from "next/types";
 import { createClient } from "@/utils/supabase/server";
 import PricingSuccess from "@/components/pricing-success";
+import { getUserAndSubscription } from "@/lib/data-fetching";
 
 export const metadata: Metadata = constructMetadata({
   title: "Pricing success",
@@ -11,10 +12,10 @@ export const metadata: Metadata = constructMetadata({
 
 export default async function Pricing() {
   const supabase = createClient();
-
+  const { openAppQueryParams } = await getUserAndSubscription();
   return (
     <>
-      <PricingSuccess />
+      <PricingSuccess openAppQueryParams={openAppQueryParams} />
     </>
   );
 }

components/dashboard/freetrial-card.tsx

@@ -11,14 +11,15 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { DEFAULT_OPEN_APP_CALLBACK } from "@/utils/constants";
 
 type FreeTrialCardProps = {
   usage: UsageType;
   openAppQueryParams: string | URLSearchParams;
   loading: boolean;
 };
 
-const DEFAULT_OPEN_APP_CALLBACK = "pearai://pearai.pearai/auth";
+
 const DEFAULT_FREE_TRIAL_MAX_QUOTA = 50; // Sync with "FREE_TRIAL_MAX_QUOTA" env var from server
 
 export default function FreeTrialCard({

components/dashboard/subscription-card.tsx

@@ -34,6 +34,7 @@ import { UsageType } from "../dashboard";
 import { toast } from "sonner";
 import { useUpgradeSubscription } from "@/hooks/useUpgradeSubscription";
 import TopUpModal from "../topup-modal";
+import { DEFAULT_OPEN_APP_CALLBACK } from "@/utils/constants";
 
 type SubscriptionCardProps = {
   subscription: Subscription | null;
@@ -43,7 +44,7 @@ type SubscriptionCardProps = {
   loading: boolean;
 };
 
-const DEFAULT_OPEN_APP_CALLBACK = "pearai://pearai.pearai/auth";
+
 
 export default function SubscriptionCard({
   subscription,

components/dashboard/success-card.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Check } from "lucide-react";
+import { isAllowedUrl } from "@/lib/utils";
+import { toast } from "sonner";
+import { DEFAULT_OPEN_APP_CALLBACK } from "@/utils/constants";
+
+
+export const SuccessCard = ({
+  openAppQueryParams,
+}: {
+  openAppQueryParams: string | URLSearchParams;
+}) => {
+  const router = useRouter();
+
+  useEffect(() => {
+    const openApp = async () => {
+      const callbackUrl = DEFAULT_OPEN_APP_CALLBACK + "?" + openAppQueryParams;
+
+      try {
+        const finalUrl = new URL(callbackUrl);
+
+        if (!isAllowedUrl(finalUrl)) {
+          throw new Error("Unsafe URL detected.");
+        }
+
+        router.push(finalUrl.toString());
+      } catch (error) {
+        console.error("Error opening PearAI app:", error);
+        toast.error(
+          "An error occurred while opening the PearAI app. Please try again.",
+        );
+      }
+    };
+
+    openApp();
+  }, [openAppQueryParams, router]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background">
+      <Card className="mx-4 w-full max-w-md">
+        <CardContent className="pt-6 text-center">
+          <div className="mb-6">
+            <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
+              <Check className="h-6 w-6 text-green-600 dark:text-green-400" />
+            </div>
+            <h1 className="mb-2 text-2xl font-bold tracking-tighter">
+              Subscription Upgraded
+            </h1>
+            <p className="text-muted-foreground">
+              Thank you! Your subscription has been successfully upgraded to
+              annual.
+            </p>
+          </div>
+          <Link href="/dashboard">
+            <Button className="w-full">Return to Dashboard</Button>
+          </Link>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

components/pricing-success.tsx

@@ -2,12 +2,42 @@
 
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
-import { CONTACT_EMAIL } from "@/utils/constants";
+import { CONTACT_EMAIL, DEFAULT_OPEN_APP_CALLBACK } from "@/utils/constants";
 import Link from "next/link";
+import { toast } from "sonner";
+import { useEffect } from "react";
+import { isAllowedUrl } from "@/lib/utils";
 
-export default function PricingSuccess() {
+export default function PricingSuccess({
+  openAppQueryParams,
+}: {
+  openAppQueryParams: string | URLSearchParams;
+}) {
   const router = useRouter();
 
+  useEffect(() => {
+    const openApp = async () => {
+      const callbackUrl = DEFAULT_OPEN_APP_CALLBACK + "?" + openAppQueryParams;
+
+      try {
+        const finalUrl = new URL(callbackUrl);
+
+        if (!isAllowedUrl(finalUrl)) {
+          throw new Error("Unsafe URL detected.");
+        }
+
+        router.push(finalUrl.toString());
+      } catch (error) {
+        console.error("Error opening PearAI app:", error);
+        toast.error(
+          "An error occurred while opening the PearAI app. Please try again.",
+        );
+      }
+    };
+
+    openApp();
+  }, [openAppQueryParams, router]);
+
   const handleClick = () => {
     router.push("/dashboard?checkout=success");
   };

utils/constants.ts

@@ -11,6 +11,7 @@ export const TEST_MODE_ENABLED = ["true", "True", "TRUE"].includes(
 );
 
 export const BUNNY_CDN_HOST = "https://pearai.b-cdn.net";
+export const DEFAULT_OPEN_APP_CALLBACK = "pearai://pearai.pearai/auth";
 
 export const CONTACT_EMAIL = "[email protected]";