✨ Add usage-based new pricing plans
This commit is contained in:
Baptiste Arnaud
committed by
Baptiste Arnaud
Baptiste Arnaud
parent
6a1eaea700
commit
898367a33b
53
apps/builder/components/shared/modals/ChangePlanModal.tsx
Normal file
53
apps/builder/components/shared/modals/ChangePlanModal.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import {
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalOverlay,
|
||||
Stack,
|
||||
Button,
|
||||
HStack,
|
||||
} from '@chakra-ui/react'
|
||||
import { Info } from 'components/shared/Info'
|
||||
import { ChangePlanForm } from 'components/shared/ChangePlanForm'
|
||||
|
||||
export enum LimitReached {
|
||||
BRAND = 'remove branding',
|
||||
CUSTOM_DOMAIN = 'add custom domain',
|
||||
FOLDER = 'create folders',
|
||||
FILE_INPUT = 'use file input blocks',
|
||||
}
|
||||
|
||||
type ChangePlanModalProps = {
|
||||
type?: LimitReached
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export const ChangePlanModal = ({
|
||||
onClose,
|
||||
isOpen,
|
||||
type,
|
||||
}: ChangePlanModalProps) => {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} size="2xl">
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalBody as={Stack} spacing="6" pt="10">
|
||||
{type && (
|
||||
<Info>You need to upgrade your plan in order to {type}</Info>
|
||||
)}
|
||||
<ChangePlanForm />
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<HStack>
|
||||
<Button colorScheme="gray" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
</HStack>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import { Button, ButtonProps } from '@chakra-ui/react'
|
||||
import * as React from 'react'
|
||||
|
||||
export const ActionButton = (props: ButtonProps) => (
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
size="lg"
|
||||
w="full"
|
||||
fontWeight="extrabold"
|
||||
py={{ md: '8' }}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
@ -1,28 +0,0 @@
|
||||
import { Box, BoxProps, useColorModeValue } from '@chakra-ui/react'
|
||||
import * as React from 'react'
|
||||
import { CardBadge } from './CardBadge'
|
||||
|
||||
export interface CardProps extends BoxProps {
|
||||
isPopular?: boolean
|
||||
}
|
||||
|
||||
export const Card = (props: CardProps) => {
|
||||
const { children, isPopular, ...rest } = props
|
||||
return (
|
||||
<Box
|
||||
bg={useColorModeValue('white', 'gray.700')}
|
||||
position="relative"
|
||||
px="6"
|
||||
pb="6"
|
||||
pt="16"
|
||||
overflow="hidden"
|
||||
shadow="lg"
|
||||
maxW="md"
|
||||
width="100%"
|
||||
{...rest}
|
||||
>
|
||||
{isPopular && <CardBadge>Popular</CardBadge>}
|
||||
{children}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
import { Flex, FlexProps, Text, useColorModeValue } from '@chakra-ui/react'
|
||||
import * as React from 'react'
|
||||
|
||||
export const CardBadge = (props: FlexProps) => {
|
||||
const { children, ...flexProps } = props
|
||||
return (
|
||||
<Flex
|
||||
bg={useColorModeValue('green.500', 'green.200')}
|
||||
position="absolute"
|
||||
right={-20}
|
||||
top={6}
|
||||
width="240px"
|
||||
transform="rotate(45deg)"
|
||||
py={2}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
{...flexProps}
|
||||
>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
textTransform="uppercase"
|
||||
fontWeight="bold"
|
||||
letterSpacing="wider"
|
||||
color={useColorModeValue('white', 'gray.800')}
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
import {
|
||||
Flex,
|
||||
Heading,
|
||||
List,
|
||||
ListIcon,
|
||||
ListItem,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
VStack,
|
||||
} from '@chakra-ui/react'
|
||||
import { CheckIcon } from 'assets/icons'
|
||||
import * as React from 'react'
|
||||
import { Card, CardProps } from './Card'
|
||||
|
||||
export interface PricingCardData {
|
||||
features: string[]
|
||||
name: string
|
||||
price: string
|
||||
}
|
||||
|
||||
interface PricingCardProps extends CardProps {
|
||||
data: PricingCardData
|
||||
button: React.ReactElement
|
||||
}
|
||||
|
||||
export const PricingCard = (props: PricingCardProps) => {
|
||||
const { data, button, ...rest } = props
|
||||
const { features, price, name } = data
|
||||
const accentColor = useColorModeValue('blue.500', 'blue.200')
|
||||
|
||||
return (
|
||||
<Card rounded={{ sm: 'xl' }} {...rest}>
|
||||
<VStack spacing={6}>
|
||||
<Heading size="md" fontWeight="extrabold">
|
||||
{name}
|
||||
</Heading>
|
||||
</VStack>
|
||||
<Flex
|
||||
align="flex-end"
|
||||
justify="center"
|
||||
fontWeight="extrabold"
|
||||
color={accentColor}
|
||||
my="8"
|
||||
>
|
||||
<Heading size="3xl" fontWeight="inherit" lineHeight="0.9em">
|
||||
{price}
|
||||
</Heading>
|
||||
<Text fontWeight="inherit" fontSize="2xl">
|
||||
/ mo
|
||||
</Text>
|
||||
</Flex>
|
||||
<List spacing="4" mb="8" maxW="30ch" mx="auto">
|
||||
{features.map((feature, index) => (
|
||||
<ListItem fontWeight="medium" key={index}>
|
||||
<ListIcon
|
||||
fontSize="xl"
|
||||
as={CheckIcon}
|
||||
marginEnd={2}
|
||||
color={accentColor}
|
||||
/>
|
||||
{feature}
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
{button}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@ -1,217 +0,0 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
Heading,
|
||||
Modal,
|
||||
ModalBody,
|
||||
Text,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalOverlay,
|
||||
Stack,
|
||||
ListItem,
|
||||
UnorderedList,
|
||||
ListIcon,
|
||||
chakra,
|
||||
Tooltip,
|
||||
ListProps,
|
||||
Button,
|
||||
HStack,
|
||||
} from '@chakra-ui/react'
|
||||
import { pay } from 'services/stripe'
|
||||
import { useUser } from 'contexts/UserContext'
|
||||
import { Plan } from 'db'
|
||||
import { useWorkspace } from 'contexts/WorkspaceContext'
|
||||
import { TypebotLogo } from 'assets/logos'
|
||||
import { CheckIcon } from 'assets/icons'
|
||||
import { toTitleCase } from 'utils'
|
||||
import { useToast } from 'components/shared/hooks/useToast'
|
||||
import { Info } from 'components/shared/Info'
|
||||
|
||||
export enum LimitReached {
|
||||
BRAND = 'remove branding',
|
||||
CUSTOM_DOMAIN = 'add custom domain',
|
||||
FOLDER = 'create folders',
|
||||
FILE_INPUT = 'use file input blocks',
|
||||
}
|
||||
|
||||
type UpgradeModalProps = {
|
||||
type?: LimitReached
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
plan?: Plan
|
||||
}
|
||||
|
||||
export const UpgradeModal = ({
|
||||
onClose,
|
||||
isOpen,
|
||||
type,
|
||||
plan = Plan.PRO,
|
||||
}: UpgradeModalProps) => {
|
||||
const { user } = useUser()
|
||||
const { workspace, refreshWorkspace } = useWorkspace()
|
||||
const [payLoading, setPayLoading] = useState(false)
|
||||
const [currency, setCurrency] = useState<'usd' | 'eur'>('usd')
|
||||
const { showToast } = useToast()
|
||||
|
||||
useEffect(() => {
|
||||
setCurrency(
|
||||
navigator.languages.find((l) => l.includes('fr')) ? 'eur' : 'usd'
|
||||
)
|
||||
}, [])
|
||||
|
||||
const handlePayClick = async () => {
|
||||
if (!user || !workspace) return
|
||||
setPayLoading(true)
|
||||
const response = await pay({
|
||||
customerId: workspace.stripeId ?? undefined,
|
||||
user,
|
||||
currency,
|
||||
plan: plan === Plan.TEAM ? 'team' : 'pro',
|
||||
workspaceId: workspace.id,
|
||||
})
|
||||
setPayLoading(false)
|
||||
if (response?.newPlan) {
|
||||
refreshWorkspace({ plan: response.newPlan })
|
||||
showToast({
|
||||
status: 'success',
|
||||
title: 'Upgrade success!',
|
||||
description: `Workspace successfully upgraded to ${toTitleCase(
|
||||
response.newPlan
|
||||
)} plan 🎉`,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalBody as={Stack} pt="10">
|
||||
{plan === Plan.PRO ? (
|
||||
<PersonalProPlanContent currency={currency} type={type} />
|
||||
) : (
|
||||
<TeamPlanContent currency={currency} type={type} />
|
||||
)}
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<HStack>
|
||||
<Button colorScheme="gray" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handlePayClick}
|
||||
isLoading={payLoading}
|
||||
colorScheme="blue"
|
||||
>
|
||||
Upgrade
|
||||
</Button>
|
||||
</HStack>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
const PersonalProPlanContent = ({
|
||||
currency,
|
||||
type,
|
||||
}: {
|
||||
currency: 'eur' | 'usd'
|
||||
type?: LimitReached
|
||||
}) => {
|
||||
return (
|
||||
<Stack spacing="4">
|
||||
<Info>You need to upgrade your plan in order to {type}</Info>
|
||||
<TypebotLogo boxSize="30px" />
|
||||
<Heading fontSize="2xl">
|
||||
Upgrade to <chakra.span color="orange.400">Personal Pro</chakra.span>{' '}
|
||||
plan
|
||||
</Heading>
|
||||
<Text>For solo creators who want to do even more.</Text>
|
||||
<Heading>
|
||||
{currency === 'eur' ? '39€' : '$39'}
|
||||
<chakra.span fontSize="md">/ month</chakra.span>
|
||||
</Heading>
|
||||
<Text fontWeight="bold">Everything in Personal, plus:</Text>
|
||||
<FeatureList
|
||||
features={[
|
||||
'Branding removed',
|
||||
'View incomplete submissions',
|
||||
'In-depth drop off analytics',
|
||||
'Unlimited custom domains',
|
||||
'Organize typebots in folders',
|
||||
'Unlimited uploads',
|
||||
]}
|
||||
/>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
const TeamPlanContent = ({
|
||||
currency,
|
||||
type,
|
||||
}: {
|
||||
currency: 'eur' | 'usd'
|
||||
type?: LimitReached
|
||||
}) => {
|
||||
return (
|
||||
<Stack spacing="4">
|
||||
<Info>You need to upgrade your plan in order to {type}</Info>
|
||||
<TypebotLogo boxSize="30px" />
|
||||
<Heading fontSize="2xl">
|
||||
Upgrade to <chakra.span color="purple.400">Team</chakra.span> plan
|
||||
</Heading>
|
||||
<Text>For teams to build typebots together in one spot.</Text>
|
||||
<Heading>
|
||||
{currency === 'eur' ? '99€' : '$99'}
|
||||
<chakra.span fontSize="md">/ month</chakra.span>
|
||||
</Heading>
|
||||
<Text fontWeight="bold">
|
||||
<Tooltip
|
||||
label={
|
||||
<FeatureList
|
||||
features={[
|
||||
'Branding removed',
|
||||
'View incomplete submissions',
|
||||
'In-depth drop off analytics',
|
||||
'Custom domains',
|
||||
'Organize typebots in folders',
|
||||
'Unlimited uploads',
|
||||
]}
|
||||
spacing="0"
|
||||
/>
|
||||
}
|
||||
hasArrow
|
||||
placement="top"
|
||||
>
|
||||
<chakra.span textDecoration="underline" cursor="pointer">
|
||||
Everything in Pro
|
||||
</chakra.span>
|
||||
</Tooltip>
|
||||
, plus:
|
||||
</Text>
|
||||
<FeatureList
|
||||
features={[
|
||||
'Unlimited team members',
|
||||
'Collaborative workspace',
|
||||
'Custom roles',
|
||||
]}
|
||||
/>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
const FeatureList = ({
|
||||
features,
|
||||
...props
|
||||
}: { features: string[] } & ListProps) => (
|
||||
<UnorderedList listStyleType="none" spacing={2} {...props}>
|
||||
{features.map((feat) => (
|
||||
<ListItem key={feat}>
|
||||
<ListIcon as={CheckIcon} />
|
||||
{feat}
|
||||
</ListItem>
|
||||
))}
|
||||
</UnorderedList>
|
||||
)
|
||||
@ -1 +0,0 @@
|
||||
export { UpgradeModal } from './UpgradeModal'
|
||||
1
apps/builder/components/shared/modals/index.ts
Normal file
1
apps/builder/components/shared/modals/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { ChangePlanModal } from './ChangePlanModal'
|
||||
Reference in New Issue
Block a user