feat: ⚡️ Add docs and connect Stripe

apps/builder/pages/api/auth/[...nextauth].ts

@@ -19,6 +19,13 @@ const providers: Provider[] = [
       },
     },
     from: `"${process.env.AUTH_EMAIL_FROM_NAME}" <${process.env.AUTH_EMAIL_FROM_EMAIL}>`,
+    // sendVerificationRequest({
+    //   identifier: email,
+    //   url,
+    //   provider: { server, from },
+    // }) {
+    //   console.log(url)
+    // },
   }),
 ]
 

apps/builder/pages/api/stripe/checkout.ts

@@ -3,7 +3,6 @@ import { methodNotAllowed } from 'utils'
 import Stripe from 'stripe'
 import { withSentry } from '@sentry/nextjs'
 
-const usdPriceIdTest = 'price_1Jc4TQKexUFvKTWyGvsH4Ff5'
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method === 'POST') {
     if (!process.env.STRIPE_SECRET_KEY)
@@ -11,21 +10,25 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
       apiVersion: '2020-08-27',
     })
-    const { email } = req.body
+    const { email, currency } = JSON.parse(req.body)
     const session = await stripe.checkout.sessions.create({
       success_url: `${req.headers.origin}/typebots?stripe=success`,
       cancel_url: `${req.headers.origin}/typebots?stripe=cancel`,
       automatic_tax: { enabled: true },
       allow_promotion_codes: true,
       customer_email: email,
+      mode: 'subscription',
       line_items: [
         {
-          price: usdPriceIdTest,
+          price:
+            currency === 'eur'
+              ? process.env.STRIPE_PRICE_EUR_ID
+              : process.env.STRIPE_PRICE_USD_ID,
           quantity: 1,
         },
       ],
     })
-    res.status(201).send({ sessionId: session.id })
+    return res.status(201).send({ sessionId: session.id })
   }
   return methodNotAllowed(res)
 }

apps/builder/pages/api/stripe/customer-portal.ts

@@ -20,9 +20,10 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     })
     const session = await stripe.billingPortal.sessions.create({
       customer: user.stripeId,
-      return_url: `${req.headers.origin}/account`,
+      return_url: req.headers.referer,
     })
-    res.status(201).redirect(session.url)
+    res.redirect(session.url)
+    return
   }
   return methodNotAllowed(res)
 }

apps/builder/pages/api/stripe/webhook.ts

@@ -47,6 +47,7 @@ const webhookHandler = async (req: NextApiRequest, res: NextApiResponse) => {
             where: { email: customer_email },
             data: { plan: Plan.PRO, stripeId: session.customer as string },
           })
+          return res.status(200).send({ message: 'user upgraded in DB' })
         }
         case 'customer.subscription.deleted': {
           const subscription = event.data.object as Stripe.Subscription
@@ -58,6 +59,10 @@ const webhookHandler = async (req: NextApiRequest, res: NextApiResponse) => {
               plan: Plan.FREE,
             },
           })
+          return res.status(200).send({ message: 'user downgraded in DB' })
+        }
+        default: {
+          return res.status(304).send({ message: 'event not handled' })
         }
       }
     } catch (err) {

apps/builder/pages/typebots.tsx

@@ -1,17 +1,65 @@
-import React from 'react'
-import { Stack } from '@chakra-ui/layout'
+import React, { useEffect, useState } from 'react'
+import { Flex, Stack } from '@chakra-ui/layout'
 import { DashboardHeader } from 'components/dashboard/DashboardHeader'
 import { Seo } from 'components/Seo'
 import { FolderContent } from 'components/dashboard/FolderContent'
 import { TypebotDndContext } from 'contexts/TypebotDndContext'
+import { useRouter } from 'next/router'
+import { redeemCoupon } from 'services/coupons'
+import { Spinner, useToast } from '@chakra-ui/react'
+import { pay } from 'services/stripe'
+import { useUser } from 'contexts/UserContext'
 
 const DashboardPage = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const { query, isReady } = useRouter()
+  const { user } = useUser()
+  const toast = useToast({
+    position: 'top-right',
+    status: 'success',
+  })
+
+  useEffect(() => {
+    const subscribe = query.subscribe?.toString()
+    if (subscribe && user && user.plan === 'FREE') {
+      setIsLoading(true)
+      pay(
+        user,
+        navigator.languages.find((l) => l.includes('fr')) ? 'eur' : 'usd'
+      )
+    }
+  }, [query.subscribe, user])
+
+  useEffect(() => {
+    if (!isReady) return
+    const couponCode = query.coupon?.toString()
+    const stripeStatus = query.stripe?.toString()
+
+    if (stripeStatus === 'success')
+      toast({
+        title: 'Typebot Pro',
+        description: "You've successfully subscribed 🎉",
+      })
+    if (!couponCode) return
+    setIsLoading(true)
+    redeemCoupon(couponCode).then(() => {
+      location.href = '/typebots'
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isReady])
+
   return (
     <Stack minH="100vh">
       <Seo title="My typebots" />
       <DashboardHeader />
       <TypebotDndContext>
-        <FolderContent folder={null} />
+        {isLoading ? (
+          <Flex w="full" justifyContent="center" pt="10">
+            <Spinner />
+          </Flex>
+        ) : (
+          <FolderContent folder={null} />
+        )}
       </TypebotDndContext>
     </Stack>
   )