🐛 Remove delete result cascade
This commit is contained in:
Baptiste Arnaud
committed by
Baptiste Arnaud
Baptiste Arnaud
parent
30dff2d5d7
commit
3c803b1345
@ -13,6 +13,7 @@ import {
|
||||
Text,
|
||||
chakra,
|
||||
Tooltip,
|
||||
HStack,
|
||||
} from '@chakra-ui/react'
|
||||
import { HelpCircleIcon } from 'assets/icons/HelpCircleIcon'
|
||||
import { Footer } from 'components/common/Footer'
|
||||
@ -26,6 +27,7 @@ import { ActionButton } from 'components/PricingPage/PricingCard/ActionButton'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { formatPrice, prices } from 'utils'
|
||||
import { Plan } from 'db'
|
||||
import { StripeClimateLogo } from 'assets/logos/StripeClimateLogo'
|
||||
|
||||
const Pricing = () => {
|
||||
const [starterPrice, setStarterPrice] = useState('$39')
|
||||
@ -54,173 +56,208 @@ const Pricing = () => {
|
||||
</DarkMode>
|
||||
|
||||
<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
|
||||
<Stack align="center" spacing="12" w="full">
|
||||
<VStack>
|
||||
<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>
|
||||
, 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.
|
||||
</VStack>
|
||||
|
||||
<HStack
|
||||
maxW="500px"
|
||||
spacing="4"
|
||||
bgColor="gray.800"
|
||||
p="4"
|
||||
rounded="md"
|
||||
>
|
||||
<StripeClimateLogo />
|
||||
<Text fontSize="sm">
|
||||
Typebot is contributing 1% of your subscription to remove CO₂
|
||||
from the atmosphere.{' '}
|
||||
<NextChakraLink
|
||||
href="https://climate.stripe.com/5VCRAq"
|
||||
isExternal
|
||||
textDecor="underline"
|
||||
>
|
||||
More info.
|
||||
</NextChakraLink>
|
||||
</Text>
|
||||
</HStack>
|
||||
<Stack
|
||||
direction={['column', 'row']}
|
||||
alignItems={['stretch']}
|
||||
spacing={10}
|
||||
px={[4, 0]}
|
||||
w="full"
|
||||
maxW="1200px"
|
||||
>
|
||||
<PricingCard
|
||||
data={{
|
||||
price: 'Free',
|
||||
name: 'Personal',
|
||||
features: [
|
||||
'Unlimited typebots',
|
||||
'300 chats included',
|
||||
'Native integrations',
|
||||
'Webhooks',
|
||||
'Custom Javascript & CSS',
|
||||
],
|
||||
}}
|
||||
button={
|
||||
<NextChakraLink
|
||||
href="https://app.typebot.io/register"
|
||||
_hover={{ textDecor: 'none' }}
|
||||
>
|
||||
<ActionButton variant="outline">Get started</ActionButton>
|
||||
</NextChakraLink>
|
||||
}
|
||||
/>
|
||||
<PricingCard
|
||||
data={{
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<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',
|
||||
'Collect files from users',
|
||||
'Create folders',
|
||||
],
|
||||
}}
|
||||
borderWidth="1px"
|
||||
borderColor="orange.200"
|
||||
button={
|
||||
<NextChakraLink
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Text fontSize="lg">
|
||||
Need custom limits? Specific features?{' '}
|
||||
<NextChakraLink
|
||||
href={'https://typebot.io/enterprise-lead-form'}
|
||||
isExternal
|
||||
textDecor="underline"
|
||||
>
|
||||
Let's chat!
|
||||
</NextChakraLink>
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack
|
||||
direction={['column', 'row']}
|
||||
alignItems={['stretch']}
|
||||
spacing={10}
|
||||
px={[4, 0]}
|
||||
w="full"
|
||||
maxW="1200px"
|
||||
>
|
||||
<PricingCard
|
||||
data={{
|
||||
price: 'Free',
|
||||
name: 'Personal',
|
||||
features: [
|
||||
'Unlimited typebots',
|
||||
'300 chats included',
|
||||
'Native integrations',
|
||||
'Webhooks',
|
||||
'Custom Javascript & CSS',
|
||||
],
|
||||
}}
|
||||
button={
|
||||
<NextChakraLink
|
||||
href="https://app.typebot.io/register"
|
||||
_hover={{ textDecor: 'none' }}
|
||||
>
|
||||
<ActionButton variant="outline">Get started</ActionButton>
|
||||
</NextChakraLink>
|
||||
}
|
||||
/>
|
||||
<PricingCard
|
||||
data={{
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<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',
|
||||
'Collect files from users',
|
||||
'Create folders',
|
||||
],
|
||||
}}
|
||||
borderWidth="1px"
|
||||
borderColor="orange.200"
|
||||
button={
|
||||
<NextChakraLink
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<VStack maxW="1200px" w="full" spacing={[12, 20]} px="4">
|
||||
<Stack w="full" spacing={10} display={['none', 'flex']}>
|
||||
<Heading>Compare plans & features</Heading>
|
||||
@ -244,6 +281,38 @@ const Pricing = () => {
|
||||
const Faq = () => {
|
||||
return (
|
||||
<Accordion w="full" allowToggle defaultIndex={0}>
|
||||
<AccordionItem>
|
||||
<Heading as="h2">
|
||||
<AccordionButton py="6">
|
||||
<Box flex="1" textAlign="left" fontSize="2xl">
|
||||
What happens once I reach the monthly chats limit?
|
||||
</Box>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</Heading>
|
||||
<AccordionPanel pb={4}>
|
||||
You will receive an email notification once you reached 80% of this
|
||||
limit. Then, once you reach 100%, the bot will be closed to new users.
|
||||
Upgrading your limit will automatically reopen the bot.
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
<AccordionItem>
|
||||
<Heading as="h2">
|
||||
<AccordionButton py="6">
|
||||
<Box flex="1" textAlign="left" fontSize="2xl">
|
||||
What happens once I reach the storage limit?
|
||||
</Box>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</Heading>
|
||||
<AccordionPanel pb={4}>
|
||||
You will receive an email notification once you reached 80% of this
|
||||
limit. Then, once you reach 100%, your users will still be able to
|
||||
chat with your bot but their uploads won't be stored anymore. You will
|
||||
need to upgrade the limit or free up some space to continue collecting
|
||||
your users' files.
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
<AccordionItem>
|
||||
<Heading as="h2">
|
||||
<AccordionButton py="6">
|
||||
|
||||
Reference in New Issue
Block a user