✨ (lp) Add new pricing page

apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/BillingContent.tsx

@@ -13,21 +13,23 @@ export const BillingContent = () => {
   if (!workspace) return null
   return (
     <Stack spacing="10" w="full">
-      <CurrentSubscriptionContent
-        plan={workspace.plan}
-        stripeId={workspace.stripeId}
-        onCancelSuccess={() =>
-          refreshWorkspace({
-            plan: Plan.FREE,
-            additionalChatsIndex: 0,
-            additionalStorageIndex: 0,
-          })
-        }
-      />
       <UsageContent workspace={workspace} />
-      {workspace.plan !== Plan.LIFETIME && workspace.plan !== Plan.OFFERED && (
-        <ChangePlanForm />
-      )}
+      <Stack gap="2">
+        <CurrentSubscriptionContent
+          plan={workspace.plan}
+          stripeId={workspace.stripeId}
+          onCancelSuccess={() =>
+            refreshWorkspace({
+              plan: Plan.FREE,
+              additionalChatsIndex: 0,
+              additionalStorageIndex: 0,
+            })
+          }
+        />
+        {workspace.plan !== Plan.LIFETIME &&
+          workspace.plan !== Plan.OFFERED && <ChangePlanForm />}
+      </Stack>
+
       {workspace.stripeId && <InvoicesList workspace={workspace} />}
     </Stack>
   )

apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/CurrentSubscriptionContent.tsx

@@ -4,8 +4,8 @@ import {
   Link,
   Spinner,
   Stack,
-  Flex,
   Button,
+  Heading,
 } from '@chakra-ui/react'
 import { PlanTag } from 'components/shared/PlanTag'
 import { Plan } from 'db'
@@ -35,15 +35,29 @@ export const CurrentSubscriptionContent = ({
     setIsCancelling(false)
   }
 
+  const isSubscribed = (plan === Plan.STARTER || plan === Plan.PRO) && stripeId
+
   if (isCancelling) return <Spinner colorScheme="gray" />
   return (
     <Stack gap="2">
+      <Heading fontSize="3xl">Subscription</Heading>
       <HStack>
         <Text>Current workspace subscription: </Text>
         <PlanTag plan={plan} />
+        {isSubscribed && (
+          <Link
+            as="button"
+            color="gray.500"
+            textDecor="underline"
+            fontSize="sm"
+            onClick={cancelSubscription}
+          >
+            Cancel my subscription
+          </Link>
+        )}
       </HStack>
 
-      {(plan === Plan.STARTER || plan === Plan.PRO) && stripeId && (
+      {isSubscribed && (
         <>
           <Stack gap="1">
             <Text fontSize="sm">
@@ -59,17 +73,6 @@ export const CurrentSubscriptionContent = ({
               Billing Portal
             </Button>
           </Stack>
-          <Flex>
-            <Link
-              as="button"
-              color="gray.500"
-              textDecor="underline"
-              fontSize="sm"
-              onClick={cancelSubscription}
-            >
-              Cancel my subscription
-            </Link>
-          </Flex>
         </>
       )}
     </Stack>

apps/builder/components/shared/ChangePlanForm/ChangePlanForm.tsx

@@ -60,16 +60,7 @@ export const ChangePlanForm = () => {
 
   return (
     <Stack spacing={4}>
-      <HStack
-        alignItems="stretch"
-        spacing="4"
-        w="full"
-        pt={
-          workspace?.plan === Plan.STARTER || workspace?.plan === Plan.PRO
-            ? '10'
-            : '0'
-        }
-      >
+      <HStack alignItems="stretch" spacing="4" w="full">
         <StarterPlanContent
           initialChatsLimitIndex={
             workspace?.plan === Plan.STARTER ? data?.additionalChatsIndex : 0

apps/builder/components/shared/ChangePlanForm/ProPlanContent.tsx

@@ -23,10 +23,11 @@ import {
   getStorageLimit,
   storageLimit,
   parseNumberWithCommas,
+  formatPrice,
+  computePrice,
 } from 'utils'
 import { MoreInfoTooltip } from '../MoreInfoTooltip'
 import { FeaturesList } from './components/FeaturesList'
-import { computePrice, formatPrice } from './helpers'
 
 type ProPlanContentProps = {
   initialChatsLimitIndex?: number
@@ -72,8 +73,6 @@ export const ProPlanContent = ({
     ? getStorageLimit(workspace)
     : undefined
 
-  console.log('workspaceChatsLimit', workspaceChatsLimit)
-  console.log('workspaceStorageLimit', workspace)
   const isCurrentPlan =
     chatsLimit[Plan.PRO].totalIncluded +
       chatsLimit[Plan.PRO].increaseStep.amount *

apps/builder/components/shared/ChangePlanForm/StarterPlanContent.tsx

@@ -20,10 +20,11 @@ import {
   getStorageLimit,
   storageLimit,
   parseNumberWithCommas,
+  computePrice,
+  formatPrice,
 } from 'utils'
 import { MoreInfoTooltip } from '../MoreInfoTooltip'
 import { FeaturesList } from './components/FeaturesList'
-import { computePrice, formatPrice } from './helpers'
 
 type StarterPlanContentProps = {
   initialChatsLimitIndex?: number

apps/builder/components/shared/ChangePlanForm/helpers.ts

@@ -1,86 +0,0 @@
-import { Plan } from 'db'
-import { chatsLimit, prices, storageLimit } from 'utils'
-
-export const computePrice = (
-  plan: Plan,
-  selectedTotalChatsIndex: number,
-  selectedTotalStorageIndex: number
-) => {
-  if (plan !== Plan.STARTER && plan !== Plan.PRO) return
-  const {
-    increaseStep: { price: chatsPrice },
-  } = chatsLimit[plan]
-  const {
-    increaseStep: { price: storagePrice },
-  } = storageLimit[plan]
-  return (
-    prices[plan] +
-    selectedTotalChatsIndex * chatsPrice +
-    selectedTotalStorageIndex * storagePrice
-  )
-}
-
-const europeanUnionCountryCodes = [
-  'AT',
-  'BE',
-  'BG',
-  'CY',
-  'CZ',
-  'DE',
-  'DK',
-  'EE',
-  'ES',
-  'FI',
-  'FR',
-  'GR',
-  'HR',
-  'HU',
-  'IE',
-  'IT',
-  'LT',
-  'LU',
-  'LV',
-  'MT',
-  'NL',
-  'PL',
-  'PT',
-  'RO',
-  'SE',
-  'SI',
-  'SK',
-]
-
-const europeanUnionExclusiveLanguageCodes = [
-  'fr',
-  'de',
-  'it',
-  'el',
-  'pl',
-  'fi',
-  'nl',
-  'hr',
-  'cs',
-  'hu',
-  'ro',
-  'sl',
-  'sv',
-  'bg',
-]
-
-export const guessIfUserIsEuropean = () =>
-  navigator.languages.some((language) => {
-    const [languageCode, countryCode] = language.split('-')
-    return countryCode
-      ? europeanUnionCountryCodes.includes(countryCode)
-      : europeanUnionExclusiveLanguageCodes.includes(languageCode)
-  })
-
-export const formatPrice = (price: number) => {
-  const isEuropean = guessIfUserIsEuropean()
-  const formatter = new Intl.NumberFormat(isEuropean ? 'fr-FR' : 'en-US', {
-    style: 'currency',
-    currency: isEuropean ? 'EUR' : 'USD',
-    maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501)
-  })
-  return formatter.format(price)
-}

apps/builder/components/shared/ChangePlanForm/queries/updatePlan.tsx

@@ -1,7 +1,12 @@
 import { loadStripe } from '@stripe/stripe-js/pure'
 import { Plan, User } from 'db'
-import { env, isDefined, isEmpty, sendRequest } from 'utils'
-import { guessIfUserIsEuropean } from '../helpers'
+import {
+  env,
+  guessIfUserIsEuropean,
+  isDefined,
+  isEmpty,
+  sendRequest,
+} from 'utils'
 
 type UpgradeProps = {
   user: User

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

@@ -155,7 +155,6 @@ const updateSubscription = async (req: NextApiRequest) => {
         }
       : undefined,
   ].filter(isDefined)
-  console.log(items)
   await stripe.subscriptions.update(subscription.id, {
     items,
   })
@@ -171,7 +170,6 @@ const updateSubscription = async (req: NextApiRequest) => {
 
 const cancelSubscription =
   (req: NextApiRequest, res: NextApiResponse) => async (userId: string) => {
-    console.log(req.query.stripeId, userId)
     const stripeId = req.query.stripeId as string | undefined
     if (!stripeId) return badRequest(res)
     if (!process.env.STRIPE_SECRET_KEY)
@@ -189,9 +187,7 @@ const cancelSubscription =
     const existingSubscription = await stripe.subscriptions.list({
       customer: workspace.stripeId,
     })
-    console.log('yes')
     await stripe.subscriptions.del(existingSubscription.data[0].id)
-    console.log('deleted')
     await prisma.workspace.update({
       where: { id: workspace.id },
       data: {

apps/builder/pages/typebots.tsx

@@ -18,12 +18,12 @@ const DashboardPage = () => {
   const { workspace } = useWorkspace()
 
   useEffect(() => {
-    const subscribePlan = query.subscribePlan as 'pro' | 'starter' | undefined
+    const subscribePlan = query.subscribePlan as Plan | undefined
     if (workspace && subscribePlan && user && workspace.plan === 'FREE') {
       setIsLoading(true)
       pay({
         user,
-        plan: subscribePlan === 'pro' ? Plan.PRO : Plan.STARTER,
+        plan: subscribePlan,
         workspaceId: workspace.id,
         additionalChats: 0,
         additionalStorage: 0,

apps/builder/pages/typebots/[typebotId]/results.tsx

@@ -34,8 +34,6 @@ const ResultsPage = () => {
   })
   const { data: usageData } = useUsage(workspace?.id)
 
-  console.log(workspace?.id, usageData)
-
   const chatsLimitPercentage = useMemo(() => {
     if (!usageData?.totalChatsUsed || !workspace?.plan) return 0
     return Math.round(
@@ -53,7 +51,6 @@ const ResultsPage = () => {
   ])
 
   const storageLimitPercentage = useMemo(() => {
-    console.log(usageData?.totalStorageUsed)
     if (!usageData?.totalStorageUsed || !workspace?.plan) return 0
     return Math.round(
       (usageData.totalStorageUsed /

apps/landing-page/components/PricingPage/PlanComparisonTables.tsx

@@ -18,16 +18,19 @@ import {
 import { CheckIcon } from 'assets/icons/CheckIcon'
 import { HelpCircleIcon } from 'assets/icons/HelpCircleIcon'
 import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
+import { Plan } from 'db'
 import React from 'react'
 
 type Props = {
-  prices: {
-    personalPro: '$39' | '39€' | ''
-    team: '$99' | '99€' | ''
-  }
+  starterPrice: string
+  proPrice: string
 } & StackProps
 
-export const PlanComparisonTables = ({ prices, ...props }: Props) => {
+export const PlanComparisonTables = ({
+  starterPrice,
+  proPrice,
+  ...props
+}: Props) => {
   return (
     <Stack spacing="12" {...props}>
       <TableContainer>
@@ -37,29 +40,47 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
               <Th fontWeight="bold" color="white" w="400px">
                 Usage
               </Th>
-              <Th>Personal</Th>
-              <Th color="orange.200">Personal Pro</Th>
-              <Th color="purple.200">Team</Th>
+              <Th>Free</Th>
+              <Th color="orange.200">Starter</Th>
+              <Th color="purple.200">Pro</Th>
             </Tr>
           </Thead>
           <Tbody>
             <Tr>
-              <Td>Forms</Td>
+              <Td>Total bots</Td>
               <Td>Unlimited</Td>
               <Td>Unlimited</Td>
               <Td>Unlimited</Td>
             </Tr>
             <Tr>
-              <Td>Form submissions</Td>
-              <Td>Unlimited</Td>
-              <Td>Unlimited</Td>
-              <Td>Unlimited</Td>
+              <Td>Chats</Td>
+              <Td>300 / month</Td>
+              <Td>2,000 / month</Td>
+              <Td>10,000 / month</Td>
+            </Tr>
+            <Tr>
+              <Td>Additional Chats</Td>
+              <Td />
+              <Td>$10 per 500</Td>
+              <Td>$10 per 1,000</Td>
+            </Tr>
+            <Tr>
+              <Td>Storage</Td>
+              <Td />
+              <Td>2 GB</Td>
+              <Td>10 GB</Td>
+            </Tr>
+            <Tr>
+              <Td>Additional Storage</Td>
+              <Td />
+              <Td>$5 per 1 GB</Td>
+              <Td>$5 per 1 GB</Td>
             </Tr>
             <Tr>
               <Td>Members</Td>
               <Td>Just you</Td>
-              <Td>Just you</Td>
-              <Td>Unlimited</Td>
+              <Td>2 seats</Td>
+              <Td>5 seats</Td>
             </Tr>
             <Tr>
               <Td>Guests</Td>
@@ -67,12 +88,6 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
               <Td>Unlimited</Td>
               <Td>Unlimited</Td>
             </Tr>
-            <Tr>
-              <Td>File uploads</Td>
-              <Td>5 MB</Td>
-              <Td>Unlimited</Td>
-              <Td>Unlimited</Td>
-            </Tr>
           </Tbody>
         </Table>
       </TableContainer>
@@ -83,9 +98,9 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
               <Th fontWeight="bold" color="white" w="400px">
                 Features
               </Th>
-              <Th>Personal</Th>
-              <Th color="orange.200">Personal Pro</Th>
-              <Th color="purple.200">Team</Th>
+              <Th>Free</Th>
+              <Th color="orange.200">Starter</Th>
+              <Th color="purple.200">Pro</Th>
             </Tr>
           </Thead>
           <Tbody>
@@ -234,12 +249,6 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
                 <CheckIcon />
               </Td>
             </Tr>
-            <Tr>
-              <Td>Custom domains</Td>
-              <Td />
-              <Td>Unlimited</Td>
-              <Td>Unlimited</Td>
-            </Tr>
             <Tr>
               <TdWithTooltip
                 text="Folders"
@@ -260,17 +269,10 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
               </Td>
             </Tr>
             <Tr>
-              <TdWithTooltip
-                text="Incomplete submissions"
-                tooltip="You get to see the form submission even if it was not fully completed by your user."
-              />
+              <Td>Custom domains</Td>
               <Td />
-              <Td>
-                <CheckIcon />
-              </Td>
-              <Td>
-                <CheckIcon />
-              </Td>
+              <Td />
+              <Td>Unlimited</Td>
             </Tr>
             <Tr>
               <TdWithTooltip
@@ -278,9 +280,7 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
                 tooltip="Analytics graph that shows your form drop-off rate, submission rate, and more."
               />
               <Td />
-              <Td>
-                <CheckIcon />
-              </Td>
+              <Td />
               <Td>
                 <CheckIcon />
               </Td>
@@ -295,18 +295,16 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
               <Th fontWeight="bold" color="white" w="400px">
                 Support
               </Th>
-              <Th>Personal</Th>
-              <Th color="orange.200">Personal Pro</Th>
-              <Th color="purple.200">Team</Th>
+              <Th>Free</Th>
+              <Th color="orange.200">Starter</Th>
+              <Th color="blue.200">Pro</Th>
             </Tr>
           </Thead>
           <Tbody>
             <Tr>
               <Td>Priority support</Td>
               <Td />
-              <Td>
-                <CheckIcon />
-              </Td>
+              <Td />
               <Td>
                 <CheckIcon />
               </Td>
@@ -314,9 +312,7 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
             <Tr>
               <Td>Feature request priority</Td>
               <Td />
-              <Td>
-                <CheckIcon />
-              </Td>
+              <Td />
               <Td>
                 <CheckIcon />
               </Td>
@@ -344,28 +340,27 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
         </Stack>
         <Stack spacing={4}>
           <Heading as="h3" size="md" color="orange.200">
-            Personal Pro
+            Starter
           </Heading>
           <Heading as="h3">
-            {prices.personalPro}{' '}
-            <chakra.span fontSize="lg">/ month</chakra.span>
+            {starterPrice} <chakra.span fontSize="lg">/ month</chakra.span>
           </Heading>
           <NextChakraLink
-            href="https://app.typebot.io/register?subscribePlan=pro"
+            href={`https://app.typebot.io/register?subscribePlan=${Plan.STARTER}`}
             _hover={{ textDecor: 'none' }}
           >
             <Button>Subscribe</Button>
           </NextChakraLink>
         </Stack>
         <Stack spacing={4}>
-          <Heading as="h3" size="md" color="purple.200">
-            Team
+          <Heading as="h3" size="md" color="blue.200">
+            Pro
           </Heading>
           <Heading as="h3">
-            {prices.team} <chakra.span fontSize="lg">/ month</chakra.span>
+            {proPrice} <chakra.span fontSize="lg">/ month</chakra.span>
           </Heading>
           <NextChakraLink
-            href="https://app.typebot.io/register?subscribePlan=team"
+            href={`https://app.typebot.io/register?subscribePlan=${Plan.PRO}`}
             _hover={{ textDecor: 'none' }}
           >
             <Button>Subscribe</Button>

apps/landing-page/components/PricingPage/PricingCard/index.tsx

@@ -13,7 +13,7 @@ import { CheckCircleIcon } from '../../../assets/icons/CheckCircleIcon'
 import { Card, CardProps } from './Card'
 
 export interface PricingCardData {
-  features: string[]
+  features: React.ReactNode[]
   name: string
   price: string
   featureLabel?: string
@@ -23,10 +23,16 @@ interface PricingCardProps extends CardProps {
   data: PricingCardData
   icon?: JSX.Element
   button: React.ReactElement
+  isMostPopular?: boolean
 }
 
-export const PricingCard = (props: PricingCardProps) => {
-  const { data, icon, button, ...rest } = props
+export const PricingCard = ({
+  data,
+  icon,
+  button,
+  isMostPopular,
+  ...rest
+}: PricingCardProps) => {
   const { features, price, name } = data
   const accentColor = useColorModeValue('blue.500', 'white')
 
@@ -62,7 +68,12 @@ export const PricingCard = (props: PricingCardProps) => {
               <Text fontWeight="bold">{data.featureLabel}</Text>
             )}
             {features.map((feature, index) => (
-              <ListItem fontWeight="medium" key={index}>
+              <ListItem
+                fontWeight="medium"
+                key={index}
+                display="flex"
+                alignItems="center"
+              >
                 <ListIcon
                   fontSize="xl"
                   as={CheckCircleIcon}

apps/landing-page/package.json

@@ -20,7 +20,8 @@
     "next": "12.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "utils": "workspace:*"
+    "utils": "workspace:*",
+    "db": "workspace:*"
   },
   "devDependencies": {
     "@babel/core": "7.19.0",

apps/landing-page/pages/pricing.tsx

@@ -10,7 +10,11 @@ import {
   Box,
   Heading,
   VStack,
+  Text,
+  chakra,
+  Tooltip,
 } from '@chakra-ui/react'
+import { HelpCircleIcon } from 'assets/icons/HelpCircleIcon'
 import { Footer } from 'components/common/Footer'
 import { Header } from 'components/common/Header/Header'
 import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
@@ -20,22 +24,17 @@ import { PlanComparisonTables } from 'components/PricingPage/PlanComparisonTable
 import { PricingCard } from 'components/PricingPage/PricingCard'
 import { ActionButton } from 'components/PricingPage/PricingCard/ActionButton'
 import { useEffect, useState } from 'react'
+import { formatPrice, prices } from 'utils'
+import { Plan } from 'db'
 
 const Pricing = () => {
-  const [price, setPrice] = useState<{
-    personalPro: '$39' | '39€' | ''
-    team: '$99' | '99€' | ''
-  }>({
-    personalPro: '',
-    team: '',
-  })
+  const [starterPrice, setStarterPrice] = useState('$39')
+  const [proPrice, setProPrice] = useState('$89')
 
   useEffect(() => {
-    setPrice(
-      navigator.languages.find((l) => l.includes('fr'))
-        ? { personalPro: '39€', team: '99€' }
-        : { personalPro: '$39', team: '$99' }
-    )
+    if (typeof window === 'undefined') return
+    setStarterPrice(formatPrice(prices.STARTER))
+    setProPrice(formatPrice(prices.PRO))
   }, [])
 
   return (
@@ -54,13 +53,28 @@ const Pricing = () => {
           <Header />
         </DarkMode>
 
-        <VStack spacing={40} w="full">
+        <VStack spacing={'24'} mt={[20, 32]} w="full">
+          <Stack align="center" spacing="6">
+            <Heading fontSize="6xl">Plans fit for you</Heading>
+            <Text maxW="900px" fontSize="xl" textAlign="center">
+              Whether you're a{' '}
+              <Text as="span" color="orange.200" fontWeight="bold">
+                solo business owner
+              </Text>{' '}
+              or a{' '}
+              <Text as="span" color="blue.200" fontWeight="bold">
+                growing startup
+              </Text>
+              , Typebot is here to help you build high-performing bots for the
+              right price. Pay for as little or as much usage as you need.
+            </Text>
+          </Stack>
+
           <Stack
             direction={['column', 'row']}
             alignItems={['stretch']}
             spacing={10}
             px={[4, 0]}
-            mt={[20, 32]}
             w="full"
             maxW="1200px"
           >
@@ -70,7 +84,7 @@ const Pricing = () => {
                 name: 'Personal',
                 features: [
                   'Unlimited typebots',
-                  'Unlimited responses',
+                  '300 chats included',
                   'Native integrations',
                   'Webhooks',
                   'Custom Javascript & CSS',
@@ -87,58 +101,134 @@ const Pricing = () => {
             />
             <PricingCard
               data={{
-                price: price.personalPro,
-                name: 'Personal Pro',
+                price: starterPrice,
+                name: 'Starter',
                 featureLabel: 'Everything in Personal, plus:',
                 features: [
+                  <Text key="seats">
+                    <chakra.span fontWeight="bold">2 seats</chakra.span>{' '}
+                    included
+                  </Text>,
+                  <>
+                    <Text>
+                      <chakra.span fontWeight="bold">2,000 chats</chakra.span>{' '}
+                      included
+                    </Text>
+                    &nbsp;
+                    <Tooltip
+                      hasArrow
+                      placement="top"
+                      label="A chat is counted whenever a user starts a discussion. It is
+                  independant of the number of messages he sends and receives."
+                    >
+                      <chakra.span cursor="pointer" h="7">
+                        <HelpCircleIcon />
+                      </chakra.span>
+                    </Tooltip>
+                  </>,
+                  <>
+                    <Text>
+                      <chakra.span fontWeight="bold">2 GB chats</chakra.span>{' '}
+                      included
+                    </Text>
+                    &nbsp;
+                    <Tooltip
+                      hasArrow
+                      placement="top"
+                      label="You accumulate storage for every file that your user upload
+                      into your bot. If you delete the result, it will free up the
+                      space."
+                    >
+                      <chakra.span cursor="pointer" h="7">
+                        <HelpCircleIcon />
+                      </chakra.span>
+                    </Tooltip>
+                  </>,
                   'Branding removed',
-                  'View incomplete submissions',
-                  'In-depth drop off analytics',
-                  'Custom domains',
-                  'Organize typebots in folders',
-                  'File upload input',
+                  'Collect files from users',
+                  'Create folders',
                 ],
               }}
-              borderWidth="3px"
+              borderWidth="1px"
               borderColor="orange.200"
               button={
                 <NextChakraLink
-                  href="https://app.typebot.io/register?subscribePlan=pro"
-                  _hover={{ textDecor: 'none' }}
-                >
-                  <ActionButton colorScheme="orange">
-                    Subscribe now
-                  </ActionButton>
-                </NextChakraLink>
-              }
-            />
-            <PricingCard
-              data={{
-                price: price.team,
-                name: 'Team',
-                featureLabel: 'Everything in Pro, plus:',
-                features: [
-                  'Unlimited team members',
-                  'Collaborative workspace',
-                  'Custom roles',
-                ],
-              }}
-              borderWidth="3px"
-              borderColor="purple.200"
-              button={
-                <NextChakraLink
-                  href="https://app.typebot.io/register?subscribePlan=team"
+                  href={`https://app.typebot.io/register?subscribePlan=${Plan.STARTER}`}
                   _hover={{ textDecor: 'none' }}
                 >
                   <ActionButton>Subscribe now</ActionButton>
                 </NextChakraLink>
               }
             />
+            <PricingCard
+              data={{
+                price: proPrice,
+                name: 'Pro',
+                featureLabel: 'Everything in Starter, plus:',
+                features: [
+                  <Text key="seats">
+                    <chakra.span fontWeight="bold">5 seats</chakra.span>{' '}
+                    included
+                  </Text>,
+                  <>
+                    <Text>
+                      <chakra.span fontWeight="bold">10,000 chats</chakra.span>{' '}
+                      included
+                    </Text>
+                    &nbsp;
+                    <Tooltip
+                      hasArrow
+                      placement="top"
+                      label="A chat is counted whenever a user starts a discussion. It is
+                  independant of the number of messages he sends and receives."
+                    >
+                      <chakra.span cursor="pointer" h="7">
+                        <HelpCircleIcon />
+                      </chakra.span>
+                    </Tooltip>
+                  </>,
+                  <>
+                    <Text>
+                      <chakra.span fontWeight="bold">10 GB chats</chakra.span>{' '}
+                      included
+                    </Text>
+                    &nbsp;
+                    <Tooltip
+                      hasArrow
+                      placement="top"
+                      label="You accumulate storage for every file that your user upload
+                      into your bot. If you delete the result, it will free up the
+                      space."
+                    >
+                      <chakra.span cursor="pointer" h="7">
+                        <HelpCircleIcon />
+                      </chakra.span>
+                    </Tooltip>
+                  </>,
+                  'Custom domains',
+                  'In-depth analytics',
+                ],
+              }}
+              borderWidth="3px"
+              borderColor="blue.200"
+              button={
+                <NextChakraLink
+                  href={`https://app.typebot.io/register?subscribePlan=${Plan.PRO}`}
+                  _hover={{ textDecor: 'none' }}
+                >
+                  <ActionButton>Subscribe now</ActionButton>
+                </NextChakraLink>
+              }
+              isMostPopular
+            />
           </Stack>
           <VStack maxW="1200px" w="full" spacing={[12, 20]} px="4">
             <Stack w="full" spacing={10} display={['none', 'flex']}>
               <Heading>Compare plans & features</Heading>
-              <PlanComparisonTables prices={price} />
+              <PlanComparisonTables
+                starterPrice={starterPrice}
+                proPrice={proPrice}
+              />
             </Stack>
             <VStack w="full" spacing="10">
               <Heading textAlign="center">Frequently asked questions</Heading>

package.json

@@ -10,9 +10,8 @@
   "scripts": {
     "docker:up": "docker compose -f docker-compose.dev.yml up -d",
     "docker:nuke": "docker compose -f docker-compose.dev.yml down --volumes --remove-orphans",
-    "dev:prepare": "turbo run build --scope=bot-engine --no-deps --include-dependencies && turbo run build --scope=typebot-js --no-deps",
-    "dev": "pnpm docker:up && pnpm dev:prepare && NEXT_PUBLIC_E2E_TEST=false turbo run dev --filter=builder --filter=viewer --parallel --no-cache",
-    "dev:mocking": "pnpm docker:up && pnpm dev:prepare && NEXT_PUBLIC_E2E_TEST=true turbo run dev --filter=builder --filter=viewer --parallel --no-cache",
+    "dev": "pnpm docker:up && NEXT_PUBLIC_E2E_TEST=false turbo run dev --filter=builder... --filter=viewer... --parallel --no-cache",
+    "dev:mocking": "pnpm docker:up && NEXT_PUBLIC_E2E_TEST=true turbo run dev --filter=builder... --filter=viewer... --parallel --no-cache",
     "build": "pnpm docker:up && turbo run build",
     "build:builder": "turbo run build --filter=builder... && ENVSH_ENV=./apps/builder/.env.docker ENVSH_OUTPUT=./apps/builder/public/__env.js bash env.sh",
     "build:viewer": "turbo run build --filter=viewer... && ENVSH_ENV=./apps/viewer/.env.docker ENVSH_OUTPUT=./apps/viewer/public/__env.js bash env.sh",

packages/typebot-js/package.json

@@ -5,6 +5,7 @@
   "unpkg": "dist/index.umd.min.js",
   "license": "AGPL-3.0-or-later",
   "scripts": {
+    "dev": "pnpm rollup -c --watch",
     "build": "pnpm lint && rollup -c",
     "lint": "eslint src --ext .ts && eslint tests --ext .ts",
     "test": "pnpm jest"

packages/utils/pricing.ts

@@ -83,3 +83,87 @@ export const getStorageLimit = ({
       : { amount: 0 }
   return totalIncluded + increaseStep.amount * additionalStorageIndex
 }
+
+export const computePrice = (
+  plan: Plan,
+  selectedTotalChatsIndex: number,
+  selectedTotalStorageIndex: number
+) => {
+  if (plan !== Plan.STARTER && plan !== Plan.PRO) return
+  const {
+    increaseStep: { price: chatsPrice },
+  } = chatsLimit[plan]
+  const {
+    increaseStep: { price: storagePrice },
+  } = storageLimit[plan]
+  return (
+    prices[plan] +
+    selectedTotalChatsIndex * chatsPrice +
+    selectedTotalStorageIndex * storagePrice
+  )
+}
+
+const europeanUnionCountryCodes = [
+  'AT',
+  'BE',
+  'BG',
+  'CY',
+  'CZ',
+  'DE',
+  'DK',
+  'EE',
+  'ES',
+  'FI',
+  'FR',
+  'GR',
+  'HR',
+  'HU',
+  'IE',
+  'IT',
+  'LT',
+  'LU',
+  'LV',
+  'MT',
+  'NL',
+  'PL',
+  'PT',
+  'RO',
+  'SE',
+  'SI',
+  'SK',
+]
+
+const europeanUnionExclusiveLanguageCodes = [
+  'fr',
+  'de',
+  'it',
+  'el',
+  'pl',
+  'fi',
+  'nl',
+  'hr',
+  'cs',
+  'hu',
+  'ro',
+  'sl',
+  'sv',
+  'bg',
+]
+
+export const guessIfUserIsEuropean = () =>
+  navigator.languages.some((language) => {
+    const [languageCode, countryCode] = language.split('-')
+    return countryCode
+      ? europeanUnionCountryCodes.includes(countryCode)
+      : europeanUnionExclusiveLanguageCodes.includes(languageCode)
+  })
+
+export const formatPrice = (price: number) => {
+  const isEuropean = guessIfUserIsEuropean()
+  const formatter = new Intl.NumberFormat(isEuropean ? 'fr-FR' : 'en-US', {
+    style: 'currency',
+    currency: isEuropean ? 'EUR' : 'USD',
+    maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501)
+  })
+  return formatter.format(price)
+}

pnpm-lock.yaml

@@ -264,6 +264,7 @@ importers:
       autoprefixer: 10.4.8
       bot-engine: workspace:*
       cross-env: ^7.0.3
+      db: workspace:*
       eslint: 8.23.0
       eslint-config-next: 12.3.0
       eslint-plugin-react: ^7.31.8
@@ -285,6 +286,7 @@ importers:
       '@emotion/styled': 11.10.4_fegg7422thxjtv2g43ohoqlm7a
       aos: 2.3.4
       bot-engine: link:../../packages/bot-engine
+      db: link:../../packages/db
       focus-visible: 5.2.0
       framer-motion: 7.3.2_biqbaboplfbrettd7655fr4n2y
       models: link:../../packages/models