feat: add Cursor workshop checkout flow and confirmation page (#1510)

* feat: add Cursor workshop checkout flow and confirmation page

* fix: add padding

* refactor: use stripe payment links for simplified set up

Author: zacjones93

src/components/workshop/cursor/Hero.tsx

@@ -5,9 +5,13 @@ import {fadeInUp, scaleIn} from './animations'
 import {useState, useEffect} from 'react'
 import './styles.css'
 import {ArrowCircleDownIcon} from '@heroicons/react/solid'
-import type {SignUpFormRef} from './SignUpForm'
 import Image from 'next/image'
 import {Button} from '@/ui'
+import {Calendar, Clock, MapPin} from 'lucide-react'
+
+export interface SignUpFormRef {
+  focus: () => void
+}
 
 const phrases = [
   'Conquer the Complexity of',
@@ -41,9 +45,10 @@ function scrollToSignup(
 
 interface HeroProps {
   formRef: React.RefObject<SignUpFormRef>
+  saleisActive: boolean
 }
 
-export default function Hero({formRef}: HeroProps) {
+export default function Hero({formRef, saleisActive}: HeroProps) {
   const [phraseIndex, setPhraseIndex] = useState(0)
 
   useEffect(() => {
@@ -114,16 +119,34 @@ export default function Hero({formRef}: HeroProps) {
           transition={{delay: 0.3, type: 'spring', stiffness: 200}}
           className="relative"
         >
-          <Button
-            asChild
-            size="lg"
-            className=" sm:mt-5 dark:bg-white dark:text-black bg-black text-white font-semibold"
-          >
-            <Link href="#signup" onClick={(e) => scrollToSignup(e, formRef)}>
-              Join the Waitlist
-              {/* <ArrowCircleDownIcon className="group-hover:scale-105 w-8 h-8 transition-all duration-200" /> */}
-            </Link>
-          </Button>
+          <div className="flex flex-col gap-4 justify-center items-center">
+            <Button
+              asChild
+              size="lg"
+              className=" sm:mt-5 dark:bg-white dark:text-black bg-black text-white font-semibold w-fit"
+            >
+              <Link href="#signup" onClick={(e) => scrollToSignup(e, formRef)}>
+                Register Now
+                {/* <ArrowCircleDownIcon className="group-hover:scale-105 w-8 h-8 transition-all duration-200" /> */}
+              </Link>
+            </Button>
+            {saleisActive && (
+              <div className="flex flex-col gap-2 text-sm text-muted-foreground md:flex-row md:gap-6">
+                <div className="flex items-center gap-1">
+                  <Calendar className="h-4 w-4" />
+                  <span>March 11, 2025</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Clock className="h-4 w-4" />
+                  <span>9:00 AM - 2:00 PM (PST)</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <MapPin className="h-4 w-4" />
+                  <span>Zoom</span>
+                </div>
+              </div>
+            )}
+          </div>
         </motion.div>
       </motion.div>
     </section>

src/components/workshop/cursor/SignUpForm.tsx

@@ -4,11 +4,7 @@ import {forwardRef, useEffect} from 'react'
 import {motion} from 'framer-motion'
 import {fadeInUp} from './animations'
 
-export interface SignUpFormRef {
-  focus: () => void
-}
-
-const SignUpForm = forwardRef<SignUpFormRef>((props, ref) => {
+const SignUpForm = () => {
   useEffect(() => {
     const script = document.createElement('script')
     script.src = '//embed.typeform.com/next/embed.js'
@@ -53,8 +49,6 @@ const SignUpForm = forwardRef<SignUpFormRef>((props, ref) => {
       </div>
     </section>
   )
-})
-
-SignUpForm.displayName = 'SignUpForm'
+}
 
 export default SignUpForm

src/components/workshop/cursor/active-sale.tsx

@@ -0,0 +1,107 @@
+import {Button} from '@/ui/button'
+import Link from 'next/link'
+
+const CheckIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4 text-primary"
+    >
+      <polyline points="20 6 9 17 4 12"></polyline>
+    </svg>
+  )
+}
+
+const ActiveSale = ({
+  isPro,
+  workshopFeatures,
+}: {
+  isPro: boolean
+  workshopFeatures: string[]
+}) => {
+  const paymentLink = `${
+    process.env.NEXT_PUBLIC_LIVE_WORKSHOP_STRIPE_PAYMENT_LINK
+  }${
+    isPro
+      ? `?prefilled_promo_code=${process.env.NEXT_PUBLIC_LIVE_WORKSHOP_PROMO_CODE}`
+      : ''
+  }`
+
+  console.log(paymentLink)
+  return (
+    <div>
+      <section
+        id="pricing"
+        className="w-full py-12 md:py-24 lg:py-32 bg-muted/50"
+      >
+        <div className="container px-4 md:px-6">
+          <div className="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center">
+            <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
+              Workshop Pricing
+            </h2>
+            <p className="max-w-[85%] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+              Streamline your development cycle with Cursor
+            </p>
+          </div>
+          <div className="mx-auto max-w-lg py-12">
+            <div className="bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-800 rounded-lg text-card-foreground shadow-sm">
+              <div className="flex flex-col pt-6 pb-4 px-6 space-y-2 text-center">
+                <h3 className="text-2xl font-bold text-balance">
+                  Become More Productive with Cursor
+                </h3>
+                <div className="space-y-1">
+                  {isPro ? (
+                    <div className="flex items-center justify-center gap-4">
+                      <p className="text-5xl font-bold">$119</p>
+                      <div>
+                        <p className="text-sm font-semibold text-yellow-500">
+                          SAVE 20%
+                        </p>
+                        <p className="text-2xl text-muted-foreground line-through opacity-70">
+                          $149
+                        </p>
+                      </div>
+                    </div>
+                  ) : (
+                    <p className="text-5xl font-bold">$149</p>
+                  )}
+                </div>
+              </div>
+              <div className="p-6 pt-0 grid gap-4">
+                <ul className="flex flex-col gap-2 w-fit mx-auto">
+                  {workshopFeatures.map((feature) => (
+                    <li className="flex items-center gap-2">
+                      <CheckIcon />
+                      <span>{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+                <a
+                  href={paymentLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="relative inline-flex items-center justify-center rounded-md text-base transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background h-10 py-2 px-4 w-full bg-blue-500 text-white font-semibold"
+                >
+                  Register Now
+                </a>
+                <p className="text-xs text-center text-muted-foreground">
+                  Limited spots available. Secure yours today!
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default ActiveSale

src/components/workshop/cursor/cta-section.tsx

@@ -0,0 +1,25 @@
+import {forwardRef} from 'react'
+
+export interface SignUpFormRef {
+  focus: () => void
+}
+
+interface CtaSectionProps {
+  ActiveSaleUi: React.ReactNode
+  SaleClosedUi: React.ReactNode
+  saleisActive: boolean
+}
+
+const CtaSection = forwardRef<SignUpFormRef, CtaSectionProps>(
+  ({ActiveSaleUi, SaleClosedUi, saleisActive}, ref) => {
+    return (
+      <div id="signup">
+        {saleisActive === true ? ActiveSaleUi : SaleClosedUi}
+      </div>
+    )
+  },
+)
+
+CtaSection.displayName = 'CtaSection'
+
+export default CtaSection

src/hooks/use-commerce-machine.ts

@@ -22,8 +22,8 @@ const extractPricesFromPricingData = (pricingData: PricingData): Prices => {
     interval_count: 3,
   })
 
-  if (!annualPrice?.stripe_price_id)
-    throw new Error('no annual price to load 😭')
+  // if (!annualPrice?.stripe_price_id)
+  //   throw new Error('no annual price to load 😭')
 
   return pickBy({annualPrice, quarterlyPrice, monthlyPrice})
 }

src/pages/workshop/cursor/index.tsx

@@ -5,25 +5,54 @@ import Features from '@/components/workshop/cursor/Features'
 import WorkshopStructure from '@/components/workshop/cursor/WorkshopStructure'
 import Instructor from '@/components/workshop/cursor/Instructor'
 import SignUpForm from '@/components/workshop/cursor/SignUpForm'
-import type {SignUpFormRef} from '@/components/workshop/cursor/SignUpForm'
-import type {NextPage} from 'next'
+import type {SignUpFormRef} from '@/components/workshop/cursor/Hero'
+import type {GetServerSideProps, NextPage} from 'next'
 import {useRef} from 'react'
 import {NextSeo} from 'next-seo'
+import {getLastChargeForActiveSubscription} from '@/lib/subscriptions'
+import ActiveSale from '@/components/workshop/cursor/active-sale'
 
-const WorkshopPage = ({getLayout}: {getLayout: any}) => {
+import CtaSection from '@/components/workshop/cursor/cta-section'
+import {useViewer} from '@/context/viewer-context'
+import {Scale} from 'lucide-react'
+
+const WorkshopPage = () => {
   const formRef = useRef<SignUpFormRef>(null)
+  const {viewer} = useViewer()
+  const isPro = viewer?.is_pro
+
+  const saleisActive = true
+
+  const LIVE_WORKSHOP_FEATURES = [
+    'Live Q&A with John Lindquist',
+    'Learn to Prompt for developers',
+    'Effective .cursorrules used',
+    'Build context for Agents',
+    'Full day of intensive training',
+    'Hour long break for lunch',
+    'Access to the workshop recording',
+  ]
 
   return (
     <main className="min-h-screen relative bg-white dark:bg-gray-900">
       <div className="relative">
         <div className="relative">
-          <Hero formRef={formRef} />
+          <Hero formRef={formRef} saleisActive={saleisActive} />
           <Features />
         </div>
         {/* <WorkshopStructure /> */}
-        <div className="relative">
-          <SignUpForm ref={formRef} />
-        </div>
+
+        <CtaSection
+          saleisActive={saleisActive}
+          ref={formRef}
+          SaleClosedUi={<SignUpForm />}
+          ActiveSaleUi={
+            <ActiveSale
+              isPro={isPro}
+              workshopFeatures={LIVE_WORKSHOP_FEATURES}
+            />
+          }
+        />
         <div className="relative">
           <Instructor />
         </div>
@@ -54,4 +83,23 @@ WorkshopPage.getLayout = (Page: any, pageProps: any) => {
   )
 }
 
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const ehUser = JSON.parse(ctx.req.cookies.eh_user || '{}')
+  const authToken = ctx.req.cookies['eh_token_2020_11_22']
+  console.log('ehUser', ehUser)
+
+  if (!authToken) return {props: {}}
+
+  const lastCharge = await getLastChargeForActiveSubscription(
+    ehUser.email,
+    authToken,
+  )
+
+  return {
+    props: {
+      lastCharge: lastCharge || null,
+    },
+  }
+}
+
 export default WorkshopPage