2
0
Files
bot/apps/landing-page/components/PricingPage/FreePlanCard.tsx
Baptiste Arnaud 797751b418 (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 -->
2023-10-17 08:03:30 +02:00

53 lines
1.3 KiB
TypeScript

import { chakra, Tooltip, Text, Button } from '@chakra-ui/react'
import { HelpCircleIcon } from 'assets/icons/HelpCircleIcon'
import Link from 'next/link'
import React from 'react'
import { PricingCard } from './PricingCard'
import { chatsLimits } from '@typebot.io/lib/billing/constants'
export const FreePlanCard = () => (
<PricingCard
data={{
price: 'Free',
name: 'Personal',
features: [
'Unlimited typebots',
<>
<Text>
<chakra.span fontWeight="bold">{chatsLimits.FREE}</chakra.span>{' '}
chats/month
</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>
</>,
'Native integrations',
'Webhooks',
'Custom Javascript & CSS',
],
}}
button={
<Button
as={Link}
href="https://app.typebot.io/register"
variant="outline"
colorScheme="gray"
size="lg"
w="full"
fontWeight="extrabold"
py={{ md: '8' }}
>
Get started
</Button>
}
/>
)