feat: add thank you page (#8587)

* feat: thank you page

* Add thank you page

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1746746772539
+		"lastUpdateCheck": 1747060270496
 	}
 }

src/components/Billing/BillingPage.tsx

@@ -108,8 +108,6 @@ export function BillingPage() {
           onClose={() => {
             setShowUpgradeModal(false);
           }}
-          success="/account/billing?s=1"
-          cancel="/account/billing"
         />
       )}
 

src/components/Billing/UpgradeAccountModal.tsx

@@ -264,9 +264,14 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
                           setSelectedPlan(plan.interval);
                           if (!currentPlanPriceId) {
                             const currentUrlPath = window.location.pathname;
+                            const encodedCurrentUrlPath = encodeURIComponent(
+                              currentUrlPath,
+                            );
+                            const successPage = `/thank-you?next=${encodedCurrentUrlPath}&s=1`;
+
                             createCheckoutSession({
                               priceId: plan.priceId,
-                              success: success || `${currentUrlPath}?s=1`,
+                              success: success || successPage,
                               cancel: cancel || `${currentUrlPath}?s=0`,
                             });
                             return;

src/components/SQLCourse/BuyButton.tsx

@@ -161,9 +161,12 @@ export function BuyButton(props: BuyButtonProps) {
       return;
     }
 
+    const encodedCourseSlug = encodeURIComponent(`/courses/${SQL_COURSE_SLUG}`);
+    const successUrl = `/thank-you?next=${encodedCourseSlug}`;
+    
     createCheckoutSession({
       courseId: SQL_COURSE_SLUG,
-      success: `/courses/${SQL_COURSE_SLUG}?${COURSE_PURCHASE_SUCCESS_PARAM}=1`,
+      success: successUrl,
       cancel: `/courses/${SQL_COURSE_SLUG}?${COURSE_PURCHASE_SUCCESS_PARAM}=0`,
     });
   }

src/components/ThankYou/ThankYouPage.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react';
+import { getUrlParams } from '../../lib/browser';
+import { Spinner } from '../ReactIcons/Spinner';
+import { VerifyUpgrade } from '../Billing/VerifyUpgrade';
+import { ChevronRight } from 'lucide-react';
+
+export function ThankYouPage() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [nextPage, setNextPage] = useState<string | null>(null);
+  const [shouldVerifyUpgrade, setShouldVerifyUpgrade] = useState(false);
+
+  useEffect(() => {
+    const params = getUrlParams();
+    const next = params?.next;
+    const shouldVerifyUpgrade = params?.s === '1';
+    if (!next) {
+      window.location.href = '/';
+      return;
+    }
+
+    const decodedNextPage = decodeURIComponent(next);
+    setNextPage(decodedNextPage);
+    setIsLoading(false);
+    setShouldVerifyUpgrade(shouldVerifyUpgrade);
+  }, []);
+
+  const pageType = nextPage?.startsWith('/courses/')
+    ? 'course'
+    : nextPage?.startsWith('/ai')
+      ? 'ai-tutor'
+      : 'other';
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-grow flex-col items-center justify-center py-20">
+        <Spinner isDualRing={false} className="mb-5 h-7 w-7" />
+        <p className="mb-1 text-xl font-medium">Please wait</p>
+        <p className="text-gray-500">This may take a few seconds</p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {shouldVerifyUpgrade && <VerifyUpgrade />}
+
+      <div className="flex flex-grow flex-col items-center justify-center px-4">
+        <div className="flex max-w-2xl flex-col items-center text-center">
+          <img
+            src="/images/gifs/party-popper.gif"
+            alt="Thank you"
+            className="relative left-6 mb-6 aspect-square w-24"
+          />
+
+          <h1 className="mb-3 text-4xl font-bold text-gray-800 md:text-5xl">
+            Thank you!
+          </h1>
+
+          <p className="mb-8 text-lg text-gray-600">
+            Your transaction was successful and your access has been activated.
+          </p>
+
+          {nextPage && (
+            <a
+              href={nextPage}
+              className="group flex items-center gap-2 rounded-lg bg-purple-500 px-5 py-2.5 font-medium text-white transition-all hover:bg-blue-600"
+            >
+              {pageType === 'course'
+                ? 'Continue to Course'
+                : pageType === 'ai-tutor'
+                  ? 'Continue to AI Tutor'
+                  : 'Continue'}
+              <ChevronRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+            </a>
+          )}
+        </div>
+
+        <div className="mt-12 flex gap-4 text-sm text-gray-500">
+          <a href="/terms" className="hover:text-gray-800">
+            Terms of Use
+          </a>
+          <a href="/privacy" className="hover:text-gray-800">
+            Privacy Policy
+          </a>
+        </div>
+      </div>
+    </>
+  );
+}

src/pages/thank-you.astro

@@ -0,0 +1,9 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import { ThankYouPage } from '../components/ThankYou/ThankYouPage';
+---
+
+<BaseLayout title='Thank you'>
+  <ThankYouPage client:load />
+  <div slot='page-footer'></div>
+</BaseLayout>