797751b418
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 -->
79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import {
|
|
chakra,
|
|
Tooltip,
|
|
Text,
|
|
Button,
|
|
HStack,
|
|
Stack,
|
|
Link,
|
|
} from '@chakra-ui/react'
|
|
import { HelpCircleIcon } from 'assets/icons/HelpCircleIcon'
|
|
import { Plan } from '@typebot.io/prisma'
|
|
import React from 'react'
|
|
import { PricingCard } from './PricingCard'
|
|
import { prices, seatsLimits } from '@typebot.io/lib/billing/constants'
|
|
|
|
type Props = {
|
|
onChatsTiersClick: () => void
|
|
}
|
|
|
|
export const ProPlanCard = ({ onChatsTiersClick }: Props) => (
|
|
<PricingCard
|
|
data={{
|
|
price: prices.PRO,
|
|
name: 'Pro',
|
|
featureLabel: 'Everything in Personal, plus:',
|
|
features: [
|
|
<Text key="seats">
|
|
<chakra.span fontWeight="bold">{seatsLimits.PRO} seats</chakra.span>{' '}
|
|
included
|
|
</Text>,
|
|
<Stack key="chats" spacing={0}>
|
|
<HStack spacing={1.5}>
|
|
<Text>10,000 chats/mo</Text>
|
|
<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>
|
|
</HStack>
|
|
<Text fontSize="sm" color="gray.400">
|
|
Extra chats:{' '}
|
|
<Button
|
|
variant="outline"
|
|
size="xs"
|
|
colorScheme="gray"
|
|
onClick={onChatsTiersClick}
|
|
>
|
|
See tiers
|
|
</Button>
|
|
</Text>
|
|
</Stack>,
|
|
'WhatsApp integration',
|
|
'Custom domains',
|
|
'In-depth analytics',
|
|
],
|
|
}}
|
|
borderWidth="3px"
|
|
borderColor="blue.200"
|
|
button={
|
|
<Button
|
|
as={Link}
|
|
href={`https://app.typebot.io/register?subscribePlan=${Plan.PRO}`}
|
|
colorScheme="blue"
|
|
size="lg"
|
|
w="full"
|
|
fontWeight="extrabold"
|
|
py={{ md: '8' }}
|
|
>
|
|
Subscribe now
|
|
</Button>
|
|
}
|
|
/>
|
|
)
|