⚡ (billing) Automatic usage-based billing (#924)

BREAKING CHANGE: Stripe environment variables simplified. Check out the
new configs to adapt your existing system.

Closes #906





<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
### Summary by CodeRabbit

**New Features:**
- Introduced a usage-based billing system, providing more flexibility
and options for users.
- Integrated with Stripe for a smoother and more secure payment process.
- Enhanced the user interface with improvements to the billing,
workspace, and pricing pages for a more intuitive experience.

**Improvements:**
- Simplified the billing logic, removing additional chats and yearly
billing for a more streamlined user experience.
- Updated email notifications to keep users informed about their usage
and limits.
- Improved pricing and currency formatting for better clarity and
understanding.

**Testing:**
- Updated tests and specifications to ensure the reliability of new
features and improvements.

**Note:** These changes aim to provide a more flexible and user-friendly
billing system, with clearer pricing and improved notifications. Users
should find the new system more intuitive and easier to navigate.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -19,15 +19,19 @@ import { HelpCircleIcon } from 'assets/icons/HelpCircleIcon'
 import { Plan } from '@typebot.io/prisma'
 import Link from 'next/link'
 import React from 'react'
-import {
-  chatsLimit,
-  formatPrice,
-  prices,
-  seatsLimit,
-} from '@typebot.io/lib/pricing'
 import { parseNumberWithCommas } from '@typebot.io/lib'
+import {
+  chatsLimits,
+  prices,
+  seatsLimits,
+} from '@typebot.io/lib/billing/constants'
+import { formatPrice } from '@typebot.io/lib/billing/formatPrice'
 
-export const PlanComparisonTables = () => (
+type Props = {
+  onChatsTiersClick: () => void
+}
+
+export const PlanComparisonTables = ({ onChatsTiersClick }: Props) => (
   <Stack spacing="12">
     <TableContainer>
       <Table>
@@ -50,32 +54,23 @@ export const PlanComparisonTables = () => (
           </Tr>
           <Tr>
             <Td>Chats</Td>
-            <Td>{chatsLimit.FREE.totalIncluded} / month</Td>
-            <Td>
-              {parseNumberWithCommas(
-                chatsLimit.STARTER.graduatedPrice[0].totalIncluded
-              )}{' '}
-              / month
-            </Td>
-            <Td>
-              {parseNumberWithCommas(
-                chatsLimit.PRO.graduatedPrice[0].totalIncluded
-              )}{' '}
-              / month
-            </Td>
+            <Td>{chatsLimits.FREE} / month</Td>
+            <Td>{parseNumberWithCommas(chatsLimits.STARTER)} / month</Td>
+            <Td>{parseNumberWithCommas(chatsLimits.PRO)} / month</Td>
           </Tr>
           <Tr>
             <Td>Additional Chats</Td>
             <Td />
+            <Td>{formatPrice(10)} per 500 chats</Td>
             <Td>
-              {formatPrice(chatsLimit.STARTER.graduatedPrice[1].price)} per{' '}
-              {chatsLimit.STARTER.graduatedPrice[1].totalIncluded -
-                chatsLimit.STARTER.graduatedPrice[0].totalIncluded}
-            </Td>
-            <Td>
-              {formatPrice(chatsLimit.PRO.graduatedPrice[1].price)} per{' '}
-              {chatsLimit.PRO.graduatedPrice[1].totalIncluded -
-                chatsLimit.PRO.graduatedPrice[0].totalIncluded}
+              <Button
+                variant="outline"
+                size="xs"
+                onClick={onChatsTiersClick}
+                colorScheme="gray"
+              >
+                See tiers
+              </Button>
             </Td>
           </Tr>
           <Tr>
@@ -87,8 +82,8 @@ export const PlanComparisonTables = () => (
           <Tr>
             <Td>Members</Td>
             <Td>Just you</Td>
-            <Td>{seatsLimit.STARTER.totalIncluded} seats</Td>
-            <Td>{seatsLimit.PRO.totalIncluded} seats</Td>
+            <Td>{seatsLimits.STARTER} seats</Td>
+            <Td>{seatsLimits.PRO} seats</Td>
           </Tr>
           <Tr>
             <Td>Guests</Td>
@@ -276,6 +271,14 @@ export const PlanComparisonTables = () => (
               <CheckIcon />
             </Td>
           </Tr>
+          <Tr>
+            <Td>WhatsApp integration</Td>
+            <Td />
+            <Td />
+            <Td>
+              <CheckIcon />
+            </Td>
+          </Tr>
           <Tr>
             <Td>Custom domains</Td>
             <Td />