feat: ⚡️ Add docs and connect Stripe

apps/builder/.env.local.example

@@ -38,6 +38,8 @@ FACEBOOK_CLIENT_SECRET=
 # (Optional) Subscription Payment
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
 STRIPE_SECRET_KEY=
+STRIPE_PRICE_USD_ID=
+STRIPE_PRICE_EUR_ID=
 STRIPE_WEBHOOK_SECRET=
 
 # (Optional) Used for GIF search

apps/builder/components/account/BillingSection.tsx

@@ -8,6 +8,7 @@ import {
   useToast,
 } from '@chakra-ui/react'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
+import { UpgradeButton } from 'components/shared/buttons/UpgradeButton'
 import { useUser } from 'contexts/UserContext'
 import { Plan } from 'db'
 import { useRouter } from 'next/router'
@@ -54,9 +55,7 @@ export const BillingSection = () => {
             Manage my subscription
           </Button>
         )}
-        {user?.plan === Plan.FREE && (
-          <Button colorScheme="blue">Upgrade</Button>
-        )}
+        {user?.plan === Plan.FREE && <UpgradeButton />}
         {user?.plan === Plan.FREE && (
           <HStack as="form" onSubmit={handleCouponCodeRedeem}>
             <Input name="coupon" placeholder="Coupon code..." />

apps/builder/components/auth/SignInForm.tsx

@@ -28,7 +28,8 @@ export const SignInForm = ({
   })
 
   useEffect(() => {
-    if (status === 'authenticated') router.replace('/typebots')
+    if (status === 'authenticated')
+      router.replace({ pathname: '/typebots', query: router.query })
   }, [status, router])
 
   const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) =>

apps/builder/components/auth/SocialLoginButtons.tsx

@@ -1,16 +1,28 @@
 import { Stack, Button } from '@chakra-ui/react'
 import { FacebookIcon, GithubIcon, GoogleIcon } from 'assets/icons'
 import { signIn, useSession } from 'next-auth/react'
+import { useRouter } from 'next/router'
 import React from 'react'
+import { stringify } from 'qs'
 
 export const SocialLoginButtons = () => {
+  const { query } = useRouter()
   const { status } = useSession()
 
-  const handleGitHubClick = async () => signIn('github')
+  const handleGitHubClick = async () =>
+    signIn('github', {
+      callbackUrl: `/typebots?${stringify(query)}`,
+    })
 
-  const handleGoogleClick = async () => signIn('google')
+  const handleGoogleClick = async () =>
+    signIn('google', {
+      callbackUrl: `/typebots?${stringify(query)}`,
+    })
 
-  const handleFacebookClick = async () => signIn('facebook')
+  const handleFacebookClick = async () =>
+    signIn('facebook', {
+      callbackUrl: `/typebots?${stringify(query)}`,
+    })
 
   return (
     <Stack>

apps/builder/components/shared/buttons/UpgradeButton.tsx

@@ -0,0 +1,16 @@
+import { Button, ButtonProps, useDisclosure } from '@chakra-ui/react'
+import React from 'react'
+import { UpgradeModal } from '../modals/UpgradeModal.'
+import { LimitReached } from '../modals/UpgradeModal./UpgradeModal'
+
+type Props = { type?: LimitReached } & ButtonProps
+
+export const UpgradeButton = ({ type, ...props }: Props) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  return (
+    <Button colorScheme="blue" {...props} onClick={onOpen}>
+      Upgrade
+      <UpgradeModal isOpen={isOpen} onClose={onClose} type={type} />
+    </Button>
+  )
+}

apps/builder/components/shared/modals/UpgradeModal./UpgradeModal.tsx

@@ -31,10 +31,12 @@ type UpgradeModalProps = {
 export const UpgradeModal = ({ type, onClose, isOpen }: UpgradeModalProps) => {
   const { user } = useUser()
   const [payLoading, setPayLoading] = useState(false)
-  const [userLanguage, setUserLanguage] = useState<string>('en')
+  const [currency, setCurrency] = useState<'usd' | 'eur'>('usd')
 
   useEffect(() => {
-    setUserLanguage(navigator.language.toLowerCase())
+    setCurrency(
+      navigator.languages.find((l) => l.includes('fr')) ? 'eur' : 'usd'
+    )
   }, [])
 
   let limitLabel
@@ -55,7 +57,7 @@ export const UpgradeModal = ({ type, onClose, isOpen }: UpgradeModalProps) => {
   const handlePayClick = async () => {
     if (!user) return
     setPayLoading(true)
-    await pay(user)
+    await pay(user, currency)
   }
 
   return (
@@ -73,7 +75,7 @@ export const UpgradeModal = ({ type, onClose, isOpen }: UpgradeModalProps) => {
           )}
           <PricingCard
             data={{
-              price: userLanguage.includes('fr') ? '25€' : '$30',
+              price: currency === 'eur' ? '25€' : '$30',
               name: 'Pro plan',
               features: [
                 'Branding removed',

apps/builder/libs/mailgun.ts

@@ -0,0 +1,11 @@
+import Mailgun from 'mailgun.js'
+import formData from 'form-data'
+
+export const initMailgun = () => {
+  const mailgun = new Mailgun(formData)
+  return mailgun.client({
+    username: 'api',
+    key: '0b024a6aac02d3f52d30999674bcde30-53c13666-e8653f58',
+    url: 'https://api.eu.mailgun.net',
+  })
+}

apps/builder/package.json

@@ -44,6 +44,7 @@
     "deep-object-diff": "^1.1.7",
     "fast-equals": "^2.0.4",
     "focus-visible": "^5.2.0",
+    "form-data": "^4.0.0",
     "framer-motion": "^4",
     "google-auth-library": "^7.11.0",
     "google-spreadsheet": "^3.2.0",
@@ -52,6 +53,7 @@
     "immer": "^9.0.12",
     "js-video-url-parser": "^0.5.1",
     "kbar": "^0.1.0-beta.24",
+    "mailgun.js": "^4.2.1",
     "micro": "^9.3.4",
     "micro-cors": "^0.1.1",
     "models": "*",

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>
   )

apps/builder/services/stripe.ts

@@ -2,14 +2,14 @@ import { User } from 'db'
 import { loadStripe } from '@stripe/stripe-js'
 import { sendRequest } from 'utils'
 
-export const pay = async (user: User) => {
+export const pay = async (user: User, currency: 'usd' | 'eur') => {
   if (!process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY)
     throw new Error('NEXT_PUBLIC_STRIPE_PUBLIC_KEY is missing in env')
   const stripe = await loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY)
   const { data, error } = await sendRequest<{ sessionId: string }>({
     method: 'POST',
     url: '/api/stripe/checkout',
-    body: { email: user.email },
+    body: { email: user.email, currency },
   })
   if (error || !data) return
   return stripe?.redirectToCheckout({