🚸 (billing) Make yearly plan clearer for subscription updates

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(
+            {formatPrice(price, currency)}
-              computePrice(
-                Plan.PRO,
-                selectedChatsLimitIndex ?? 0,
-                selectedStorageLimitIndex ?? 0,
-                isYearly ? 'yearly' : 'monthly'
-              ) ?? NaN,
-              currency
-            )}
             <chakra.span fontSize="md">{scopedT('perMonth')}</chakra.span>
           </Heading>
           <Text fontWeight="bold">
@@ -275,15 +276,22 @@ export const ProPlanPricingCard = ({
               scopedT('pro.analytics'),
             ]}
           />
-          <Button
+          <Stack spacing={3}>
-            colorScheme="blue"
+            {isYearly && workspace.stripeId && !isCurrentPlan && (
-            variant="outline"
+              <Heading mt="0" fontSize="md">
-            onClick={handlePayClick}
+                You pay {formatPrice(price * 12, currency)} / year
-            isLoading={isLoading}
+              </Heading>
-            isDisabled={isCurrentPlan}
+            )}
-          >
+            <Button
-            {getButtonLabel()}
+              colorScheme="blue"
-          </Button>
+              variant="outline"
+              onClick={handlePayClick}
+              isLoading={isLoading}
+              isDisabled={isCurrentPlan}
+            >
+              {getButtonLabel()}
+            </Button>
+          </Stack>
         </Stack>
       </Stack>
     </Flex>

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(
+          {formatPrice(price, currency)}
-            computePrice(
-              Plan.STARTER,
-              selectedChatsLimitIndex ?? 0,
-              selectedStorageLimitIndex ?? 0,
-              isYearly ? 'yearly' : 'monthly'
-            ) ?? NaN,
-            currency
-          )}
           <chakra.span fontSize="md">{scopedT('perMonth')}</chakra.span>
         </Heading>
         <FeaturesList
@@ -224,15 +225,22 @@ export const StarterPlanPricingCard = ({
           ]}
         />
       </Stack>
-      <Button
+      <Stack>
-        colorScheme="orange"
+        {isYearly && workspace.stripeId && !isCurrentPlan && (
-        variant="outline"
+          <Heading mt="0" fontSize="md">
-        onClick={handlePayClick}
+            You pay: {formatPrice(price * 12, currency)} / year
-        isLoading={isLoading}
+          </Heading>
-        isDisabled={isCurrentPlan}
+        )}
-      >
+        <Button
-        {getButtonLabel()}
+          colorScheme="orange"
-      </Button>
+          variant="outline"
+          onClick={handlePayClick}
+          isLoading={isLoading}
+          isDisabled={isCurrentPlan}
+        >
+          {getButtonLabel()}
+        </Button>
+      </Stack>
     </Stack>
   )
 }