Update billing page ctas (#12459)

## Before

![image](https://github.com/user-attachments/assets/95315651-8b04-4004-a6b6-8742ebcc6f9d)

## After
<img width="1056" alt="image"
src="https://github.com/user-attachments/assets/4a51b7c7-898b-485f-95e8-97911292f2b1"
/>
<img width="1299" alt="image"
src="https://github.com/user-attachments/assets/44e5e545-a660-455a-91be-3b139ccb9f30"
/>
<img width="1180" alt="image"
src="https://github.com/user-attachments/assets/0ca765a7-1d9a-473a-b7d2-c6f9b1a72417"
/>
<img width="963" alt="image"
src="https://github.com/user-attachments/assets/b620fd8a-61c9-4dd3-a3b1-e4ba940371e4"
/>
<img width="863" alt="image"
src="https://github.com/user-attachments/assets/a0d2dcb5-19e5-4f83-80d4-ad5a715f1e5f"
/>

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

packages/twenty-front/src/modules/billing/utils/formatMonthlyPrices.ts

@@ -0,0 +1,46 @@
+import {
+  BillingPlanKey,
+  SubscriptionInterval,
+  BillingPlanOutput,
+  BillingPriceLicensedDto,
+} from '~/generated/graphql';
+import { isDefined } from 'twenty-shared/utils';
+
+export const formatMonthlyPrices = (plans: BillingPlanOutput[] | undefined) => {
+  if (!isDefined(plans)) {
+    return;
+  }
+
+  const enterprisePlan = plans.find(
+    (plan) => plan.planKey === BillingPlanKey.ENTERPRISE,
+  );
+
+  const enterpriseYearPrice = enterprisePlan?.baseProduct.prices?.find(
+    (price) => price.recurringInterval === SubscriptionInterval.Year,
+  ) as BillingPriceLicensedDto;
+
+  const enterpriseMonthPrice = enterprisePlan?.baseProduct.prices?.find(
+    (price) => price.recurringInterval === SubscriptionInterval.Month,
+  ) as BillingPriceLicensedDto;
+
+  const proPlan = plans.find((plan) => plan.planKey === BillingPlanKey.PRO);
+
+  const proYearPrice = proPlan?.baseProduct.prices?.find(
+    (price) => price.recurringInterval === SubscriptionInterval.Year,
+  ) as BillingPriceLicensedDto;
+
+  const proMonthPrice = proPlan?.baseProduct.prices?.find(
+    (price) => price.recurringInterval === SubscriptionInterval.Month,
+  ) as BillingPriceLicensedDto;
+
+  return {
+    [BillingPlanKey.ENTERPRISE]: {
+      [SubscriptionInterval.Year]: enterpriseYearPrice?.unitAmount / 100 / 12,
+      [SubscriptionInterval.Month]: enterpriseMonthPrice?.unitAmount / 100,
+    },
+    [BillingPlanKey.PRO]: {
+      [SubscriptionInterval.Year]: proYearPrice?.unitAmount / 100 / 12,
+      [SubscriptionInterval.Month]: proMonthPrice?.unitAmount / 100,
+    },
+  };
+};