diff --git a/public/images/party.gif b/public/images/party.gif new file mode 100644 index 000000000..e9af04534 Binary files /dev/null and b/public/images/party.gif differ diff --git a/src/components/Billing/BillingPage.tsx b/src/components/Billing/BillingPage.tsx index b8e94bf58..dcdd0c074 100644 --- a/src/components/Billing/BillingPage.tsx +++ b/src/components/Billing/BillingPage.tsx @@ -108,8 +108,6 @@ export function BillingPage() { onClose={() => { setShowUpgradeModal(false); }} - success="/account/billing?s=1" - cancel="/account/billing" /> )} diff --git a/src/components/Billing/UpgradeAccountModal.tsx b/src/components/Billing/UpgradeAccountModal.tsx index 359c4acab..b187b7ab3 100644 --- a/src/components/Billing/UpgradeAccountModal.tsx +++ b/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; diff --git a/src/components/SQLCourse/BuyButton.tsx b/src/components/SQLCourse/BuyButton.tsx index 1b5a681c1..9f6bc3b43 100644 --- a/src/components/SQLCourse/BuyButton.tsx +++ b/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`, }); } diff --git a/src/components/ThankYou/ThankYouPage.tsx b/src/components/ThankYou/ThankYouPage.tsx new file mode 100644 index 000000000..7964b44fc --- /dev/null +++ b/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> + </> + ); +} diff --git a/src/pages/thank-you.astro b/src/pages/thank-you.astro new file mode 100644 index 000000000..93ce687dd --- /dev/null +++ b/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>