Merge 35632785c1 into 2569c3a965

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,68 @@
+import { useEffect, useState } from 'react';
+import { getUrlParams } from '../../lib/browser';
+import { Spinner } from '../ReactIcons/Spinner';
+import { VerifyUpgrade } from '../Billing/VerifyUpgrade';
+
+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) {
+      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 min-h-[472px] flex-col items-center justify-center py-20">
+        <Spinner className="h-12 w-12" />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {shouldVerifyUpgrade && <VerifyUpgrade />}
+
+      <div className="flex flex-col items-center justify-center py-28 pb-36">
+        <img
+          src="/images/party.gif"
+          alt="Thank you"
+          className="aspect-square w-24"
+        />
+        <h1 className="mt-4 text-3xl font-bold">Thank you!</h1>
+        <p className="mt-1 text-gray-500">Your purchase has been successful</p>
+        {nextPage && (
+          <div className="mt-4">
+            <a
+              href={nextPage}
+              className="rounded-md bg-black px-4 py-1.5 text-white hover:bg-gray-800"
+            >
+              {pageType === 'course'
+                ? 'Visit the Course'
+                : pageType === 'ai-tutor'
+                  ? 'Visit the AI Tutor'
+                  : 'Visit the Page'}
+            </a>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

src/pages/thank-you.astro

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