feat: ⚡️ Add docs and connect Stripe

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',