diff --git a/.astro/settings.json b/.astro/settings.json index 6a50c7746..867818ff4 100644 --- a/.astro/settings.json +++ b/.astro/settings.json @@ -3,6 +3,6 @@ "enabled": false }, "_variables": { - "lastUpdateCheck": 1746746772539 + "lastUpdateCheck": 1747060270496 } } \ No newline at end of file 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..2c9043367 --- /dev/null +++ b/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(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 ( +
+ +

Please wait

+

This may take a few seconds

+
+ ); + } + + return ( + <> + {shouldVerifyUpgrade && } + +
+
+ Thank you + +

+ Thank you! +

+ +

+ Your transaction was successful and your access has been activated. +

+ + {nextPage && ( + + {pageType === 'course' + ? 'Continue to Course' + : pageType === 'ai-tutor' + ? 'Continue to AI Tutor' + : 'Continue'} + + + )} +
+ +
+ + Terms of Use + + + Privacy Policy + +
+
+ + ); +} diff --git a/src/pages/thank-you.astro b/src/pages/thank-you.astro new file mode 100644 index 000000000..9a1287197 --- /dev/null +++ b/src/pages/thank-you.astro @@ -0,0 +1,9 @@ +--- +import BaseLayout from '../layouts/BaseLayout.astro'; +import { ThankYouPage } from '../components/ThankYou/ThankYouPage'; +--- + + + +
+