From 9345b33e740c7190b66404226bf82e5a84d745db Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Mon, 17 Apr 2023 17:53:16 +0200
Subject: [PATCH] :children_crossing: (billing) Make yearly plan clearer for
 subscription updates

---
 .../billing/components/ProPlanPricingCard.tsx | 44 +++++++++++--------
 .../components/StarterPlanPricingCard.tsx     | 44 +++++++++++--------
 2 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/apps/builder/src/features/billing/components/ProPlanPricingCard.tsx b/apps/builder/src/features/billing/components/ProPlanPricingCard.tsx
index 9e793b7b5..6a725d5f9 100644
--- a/apps/builder/src/features/billing/components/ProPlanPricingCard.tsx
+++ b/apps/builder/src/features/billing/components/ProPlanPricingCard.tsx
@@ -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>
diff --git a/apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx b/apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx
index 4a556557f..039a0aad3 100644
--- a/apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx
+++ b/apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx
@@ -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>
   )
 }