🛂 Add new yearly plans and graduated pricing

BREAKING CHANGE: Stripe environment variables have changed. New ones are required. Check out the new Stripe configuration in the
docs.

Closes #457

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

@@ -13,28 +13,33 @@ import { ChevronDownIcon } from 'assets/icons/ChevronDownIcon'
 import { HelpCircleIcon } from 'assets/icons/HelpCircleIcon'
 import { Plan } from '@typebot.io/prisma'
 import Link from 'next/link'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { parseNumberWithCommas } from '@typebot.io/lib'
-import { chatsLimit, computePrice, storageLimit } from '@typebot.io/lib/pricing'
+import {
+  chatsLimit,
+  computePrice,
+  seatsLimit,
+  storageLimit,
+} from '@typebot.io/lib/pricing'
 import { PricingCard } from './PricingCard'
 
-export const ProPlanCard = () => {
-  const [price, setPrice] = useState(89)
+type Props = {
+  isYearly: boolean
+}
 
+export const ProPlanCard = ({ isYearly }: Props) => {
   const [selectedChatsLimitIndex, setSelectedChatsLimitIndex] =
     useState<number>(0)
   const [selectedStorageLimitIndex, setSelectedStorageLimitIndex] =
     useState<number>(0)
 
-  useEffect(() => {
-    setPrice(
-      computePrice(
-        Plan.PRO,
-        selectedChatsLimitIndex ?? 0,
-        selectedStorageLimitIndex ?? 0
-      ) ?? NaN
-    )
-  }, [selectedChatsLimitIndex, selectedStorageLimitIndex])
+  const price =
+    computePrice(
+      Plan.PRO,
+      selectedChatsLimitIndex ?? 0,
+      selectedStorageLimitIndex ?? 0,
+      isYearly ? 'yearly' : 'monthly'
+    ) ?? NaN
 
   return (
     <PricingCard
@@ -44,7 +49,10 @@ export const ProPlanCard = () => {
         featureLabel: 'Everything in Personal, plus:',
         features: [
           <Text key="seats">
-            <chakra.span fontWeight="bold">5 seats</chakra.span> included
+            <chakra.span fontWeight="bold">
+              {seatsLimit.PRO.totalIncluded} seats
+            </chakra.span>{' '}
+            included
           </Text>,
           <HStack key="chats" spacing={1.5}>
             <Menu>
@@ -57,50 +65,20 @@ export const ProPlanCard = () => {
               >
                 {selectedChatsLimitIndex !== undefined
                   ? parseNumberWithCommas(
-                      chatsLimit.PRO.totalIncluded +
-                        chatsLimit.PRO.increaseStep.amount *
-                          selectedChatsLimitIndex
+                      chatsLimit.PRO.graduatedPrice[selectedChatsLimitIndex]
+                        .totalIncluded
                     )
                   : undefined}
               </MenuButton>
               <MenuList>
-                {selectedChatsLimitIndex !== 0 && (
-                  <MenuItem onClick={() => setSelectedChatsLimitIndex(0)}>
-                    {parseNumberWithCommas(chatsLimit.PRO.totalIncluded)}
+                {chatsLimit.PRO.graduatedPrice.map((price, index) => (
+                  <MenuItem
+                    key={index}
+                    onClick={() => setSelectedChatsLimitIndex(index)}
+                  >
+                    {parseNumberWithCommas(price.totalIncluded)}
                   </MenuItem>
-                )}
-                {selectedChatsLimitIndex !== 1 && (
-                  <MenuItem onClick={() => setSelectedChatsLimitIndex(1)}>
-                    {parseNumberWithCommas(
-                      chatsLimit.PRO.totalIncluded +
-                        chatsLimit.PRO.increaseStep.amount
-                    )}
-                  </MenuItem>
-                )}
-                {selectedChatsLimitIndex !== 2 && (
-                  <MenuItem onClick={() => setSelectedChatsLimitIndex(2)}>
-                    {parseNumberWithCommas(
-                      chatsLimit.PRO.totalIncluded +
-                        chatsLimit.PRO.increaseStep.amount * 2
-                    )}
-                  </MenuItem>
-                )}
-                {selectedChatsLimitIndex !== 3 && (
-                  <MenuItem onClick={() => setSelectedChatsLimitIndex(3)}>
-                    {parseNumberWithCommas(
-                      chatsLimit.PRO.totalIncluded +
-                        chatsLimit.PRO.increaseStep.amount * 3
-                    )}
-                  </MenuItem>
-                )}
-                {selectedChatsLimitIndex !== 4 && (
-                  <MenuItem onClick={() => setSelectedChatsLimitIndex(4)}>
-                    {parseNumberWithCommas(
-                      chatsLimit.PRO.totalIncluded +
-                        chatsLimit.PRO.increaseStep.amount * 4
-                    )}
-                  </MenuItem>
-                )}
+                ))}
               </MenuList>
             </Menu>{' '}
             <Text>chats/mo</Text>
@@ -126,50 +104,20 @@ export const ProPlanCard = () => {
               >
                 {selectedStorageLimitIndex !== undefined
                   ? parseNumberWithCommas(
-                      storageLimit.PRO.totalIncluded +
-                        storageLimit.PRO.increaseStep.amount *
-                          selectedStorageLimitIndex
+                      storageLimit.PRO.graduatedPrice[selectedStorageLimitIndex]
+                        .totalIncluded
                     )
                   : undefined}
               </MenuButton>
               <MenuList>
-                {selectedStorageLimitIndex !== 0 && (
-                  <MenuItem onClick={() => setSelectedStorageLimitIndex(0)}>
-                    {parseNumberWithCommas(storageLimit.PRO.totalIncluded)}
+                {storageLimit.PRO.graduatedPrice.map((price, index) => (
+                  <MenuItem
+                    key={index}
+                    onClick={() => setSelectedStorageLimitIndex(index)}
+                  >
+                    {parseNumberWithCommas(price.totalIncluded)}
                   </MenuItem>
-                )}
-                {selectedStorageLimitIndex !== 1 && (
-                  <MenuItem onClick={() => setSelectedStorageLimitIndex(1)}>
-                    {parseNumberWithCommas(
-                      storageLimit.PRO.totalIncluded +
-                        storageLimit.PRO.increaseStep.amount
-                    )}
-                  </MenuItem>
-                )}
-                {selectedStorageLimitIndex !== 2 && (
-                  <MenuItem onClick={() => setSelectedStorageLimitIndex(2)}>
-                    {parseNumberWithCommas(
-                      storageLimit.PRO.totalIncluded +
-                        storageLimit.PRO.increaseStep.amount * 2
-                    )}
-                  </MenuItem>
-                )}
-                {selectedStorageLimitIndex !== 3 && (
-                  <MenuItem onClick={() => setSelectedStorageLimitIndex(3)}>
-                    {parseNumberWithCommas(
-                      storageLimit.PRO.totalIncluded +
-                        storageLimit.PRO.increaseStep.amount * 3
-                    )}
-                  </MenuItem>
-                )}
-                {selectedStorageLimitIndex !== 4 && (
-                  <MenuItem onClick={() => setSelectedStorageLimitIndex(4)}>
-                    {parseNumberWithCommas(
-                      storageLimit.PRO.totalIncluded +
-                        storageLimit.PRO.increaseStep.amount * 4
-                    )}
-                  </MenuItem>
-                )}
+                ))}
               </MenuList>
             </Menu>{' '}
             <Text>GB of storage</Text>
@@ -194,7 +142,7 @@ export const ProPlanCard = () => {
       button={
         <Button
           as={Link}
-          href={`https://app.typebot.io/register?subscribePlan=${Plan.PRO}&chats=${selectedChatsLimitIndex}&storage=${selectedStorageLimitIndex}`}
+          href={`https://app.typebot.io/register?subscribePlan=${Plan.PRO}&chats=${selectedChatsLimitIndex}&storage=${selectedStorageLimitIndex}&isYearly=${isYearly}`}
           colorScheme="blue"
           size="lg"
           w="full"