blsmedia/bot
2
0
Fork 0
Code Activity

🚸 (billing) Make yearly plan clearer for subscription updates

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-04-17 17:53:16 +02:00
parent c203a4e792
commit 9345b33e74
2 changed files with 52 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/builder/src/features/billing/components/ProPlanPricingCard.tsx
View File

@@ -39,6 +39,7 @@ type Props = {
| 'plan'
| 'customChatsLimit'
| 'customStorageLimit'
| 'stripeId'
>
currentSubscription: {
isYearly?: boolean
@@ -130,6 +131,14 @@ export const ProPlanPricingCard = ({
})
}
const price =
computePrice(
Plan.PRO,
selectedChatsLimitIndex ?? 0,
selectedStorageLimitIndex ?? 0,
isYearly ? 'yearly' : 'monthly'
) ?? NaN
return (
<Flex
p="6"
@@ -170,15 +179,7 @@ export const ProPlanPricingCard = ({
</Stack>
<Stack spacing="4">
<Heading>
{formatPrice(
computePrice(
Plan.PRO,
selectedChatsLimitIndex ?? 0,
selectedStorageLimitIndex ?? 0,
isYearly ? 'yearly' : 'monthly'
) ?? NaN,
currency
)}
{formatPrice(price, currency)}
<chakra.span fontSize="md">{scopedT('perMonth')}</chakra.span>
</Heading>
<Text fontWeight="bold">
@@ -275,15 +276,22 @@ export const ProPlanPricingCard = ({
scopedT('pro.analytics'),
]}
/>
<Button
colorScheme="blue"
variant="outline"
onClick={handlePayClick}
isLoading={isLoading}
isDisabled={isCurrentPlan}
>
{getButtonLabel()}
</Button>
<Stack spacing={3}>
{isYearly && workspace.stripeId && !isCurrentPlan && (
<Heading mt="0" fontSize="md">
You pay {formatPrice(price * 12, currency)} / year
</Heading>
)}
<Button
colorScheme="blue"
variant="outline"
onClick={handlePayClick}
isLoading={isLoading}
isDisabled={isCurrentPlan}
>
{getButtonLabel()}
</Button>
</Stack>
</Stack>
</Stack>
</Flex>

44
apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx
View File

@@ -35,6 +35,7 @@ type Props = {
| 'plan'
| 'customChatsLimit'
| 'customStorageLimit'
| 'stripeId'
>
currentSubscription: {
isYearly?: boolean
@@ -128,6 +129,14 @@ export const StarterPlanPricingCard = ({
})
}
const price =
computePrice(
Plan.STARTER,
selectedChatsLimitIndex ?? 0,
selectedStorageLimitIndex ?? 0,
isYearly ? 'yearly' : 'monthly'
) ?? NaN
return (
<Stack spacing={6} p="6" rounded="lg" borderWidth="1px" flex="1" h="full">
<Stack spacing="4">
@@ -138,15 +147,7 @@ export const StarterPlanPricingCard = ({
</Heading>
<Text>{scopedT('starter.description')}</Text>
<Heading>
{formatPrice(
computePrice(
Plan.STARTER,
selectedChatsLimitIndex ?? 0,
selectedStorageLimitIndex ?? 0,
isYearly ? 'yearly' : 'monthly'
) ?? NaN,
currency
)}
{formatPrice(price, currency)}
<chakra.span fontSize="md">{scopedT('perMonth')}</chakra.span>
</Heading>
<FeaturesList
@@ -224,15 +225,22 @@ export const StarterPlanPricingCard = ({
]}
/>
</Stack>
<Button
colorScheme="orange"
variant="outline"
onClick={handlePayClick}
isLoading={isLoading}
isDisabled={isCurrentPlan}
>
{getButtonLabel()}
</Button>
<Stack>
{isYearly && workspace.stripeId && !isCurrentPlan && (
<Heading mt="0" fontSize="md">
You pay: {formatPrice(price * 12, currency)} / year
</Heading>
)}
<Button
colorScheme="orange"
variant="outline"
onClick={handlePayClick}
isLoading={isLoading}
isDisabled={isCurrentPlan}
>
{getButtonLabel()}
</Button>
</Stack>
</Stack>
)
}