deprocate getProductPrices query in front end (#10397)

**TLDR:**
Deprecate getProductPrices in the frontEnd and replace it with
BillingBaseProductPrices.

**In order to test:**

- Have the environment variable IS_BILLING_ENABLED set to true and add
the other required environment variables for Billing to work
- Do a database reset (to ensure that the new feature flag is properly
added and that the billing tables are created)
- Run the command: npx nx run twenty-server:command
billing:sync-plans-data (if you don't do that the products and prices
will not be present in the database)
- Run the server , the frontend, the worker, and the stripe listen
command (stripe listen --forward-to
http://localhost:3000/billing/webhooks)
- Buy a subscription for acme workspace the choose your plan should be
using the new front end endpoint

packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx

@@ -6,6 +6,7 @@ import { SubscriptionBenefit } from '@/billing/components/SubscriptionBenefit';
 import { SubscriptionPrice } from '@/billing/components/SubscriptionPrice';
 import { TrialCard } from '@/billing/components/TrialCard';
 import { useHandleCheckoutSession } from '@/billing/hooks/useHandleCheckoutSession';
+import { isBillingPriceLicensed } from '@/billing/utils/isBillingPriceLicensed';
 import { billingState } from '@/client-config/states/billingState';
 import styled from '@emotion/styled';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -18,8 +19,12 @@ import {
   Loader,
   MainButton,
 } from 'twenty-ui';
-import { SubscriptionInterval } from '~/generated-metadata/graphql';
-import { useGetProductPricesQuery } from '~/generated/graphql';
+import {
+  BillingPlanKey,
+  BillingPriceLicensedDto,
+  SubscriptionInterval,
+  useBillingBaseProductPricesQuery,
+} from '~/generated/graphql';
 
 const StyledSubscriptionContainer = styled.div<{
   withLongerMarginBottom: boolean;
@@ -92,13 +97,15 @@ export const ChooseYourPlan = () => {
     t`1 000 workflow node executions`,
   ];
 
-  const { data: prices } = useGetProductPricesQuery({
-    variables: { product: 'base-plan' },
-  });
+  const { data: plans } = useBillingBaseProductPricesQuery();
 
-  const price = prices?.getProductPrices?.productPrices.find(
-    (productPrice) =>
-      productPrice.recurringInterval === SubscriptionInterval.Month,
+  const baseProduct = plans?.plans.find(
+    (plan) => plan.planKey === BillingPlanKey.PRO,
+  )?.baseProduct;
+  const baseProductPrice = baseProduct?.prices.find(
+    (price): price is BillingPriceLicensedDto =>
+      isBillingPriceLicensed(price) &&
+      price.recurringInterval === SubscriptionInterval.Month,
   );
 
   const hasWithoutCreditCardTrialPeriod = billing?.trialPeriods.some(
@@ -122,12 +129,12 @@ export const ChooseYourPlan = () => {
   const handleTrialPeriodChange = (withCreditCard: boolean) => {
     return () => {
       if (
-        isDefined(price) &&
+        isDefined(baseProductPrice) &&
         billingCheckoutSession.requirePaymentMethod !== withCreditCard
       ) {
         setBillingCheckoutSession({
           plan: billingCheckoutSession.plan,
-          interval: price.recurringInterval,
+          interval: baseProductPrice.recurringInterval,
           requirePaymentMethod: withCreditCard,
         });
       }
@@ -139,7 +146,7 @@ export const ChooseYourPlan = () => {
   const withCreditCardTrialPeriodDuration = withCreditCardTrialPeriod?.duration;
 
   return (
-    isDefined(price) &&
+    isDefined(baseProductPrice) &&
     isDefined(billing) && (
       <>
         <Title noMarginTop>
@@ -163,8 +170,8 @@ export const ChooseYourPlan = () => {
         >
           <StyledSubscriptionPriceContainer>
             <SubscriptionPrice
-              type={price.recurringInterval}
-              price={price.unitAmount / 100}
+              type={baseProductPrice.recurringInterval}
+              price={baseProductPrice.unitAmount / 100}
             />
           </StyledSubscriptionPriceContainer>
           <StyledBenefitsContainer>

packages/twenty-front/src/pages/onboarding/__stories__/ChooseYourPlan.stories.tsx

@@ -3,9 +3,14 @@ import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
 import { HttpResponse, graphql } from 'msw';
 
+import { BILLING_BASE_PRODUCT_PRICES } from '@/billing/graphql/billingBaseProductPrices';
 import { AppPath } from '@/types/AppPath';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
-import { OnboardingStatus } from '~/generated/graphql';
+import {
+  BillingPlanKey,
+  OnboardingStatus,
+  SubscriptionInterval,
+} from '~/generated/graphql';
 import { ChooseYourPlan } from '~/pages/onboarding/ChooseYourPlan';
 import {
   PageDecorator,
@@ -31,31 +36,30 @@ const meta: Meta<PageDecoratorArgs> = {
             },
           });
         }),
-        graphql.query('GetProductPrices', () => {
-          return HttpResponse.json({
-            data: {
-              getProductPrices: {
-                __typename: 'ProductPricesEntity',
-                productPrices: [
+        graphql.query(
+          getOperationName(BILLING_BASE_PRODUCT_PRICES) ?? '',
+          () => {
+            return HttpResponse.json({
+              data: {
+                plans: [
                   {
-                    __typename: 'ProductPriceEntity',
-                    created: 1699860608,
-                    recurringInterval: 'Month',
-                    stripePriceId: 'monthly8usd',
-                    unitAmount: 900,
-                  },
-                  {
-                    __typename: 'ProductPriceEntity',
-                    created: 1701874964,
-                    recurringInterval: 'Year',
-                    stripePriceId: 'priceId',
-                    unitAmount: 9000,
+                    planKey: BillingPlanKey.PRO,
+                    baseProduct: {
+                      prices: [
+                        {
+                          __typename: 'BillingPriceLicensedDTO',
+                          unitAmount: 900,
+                          stripePriceId: 'monthly8usd',
+                          recurringInterval: SubscriptionInterval.Month,
+                        },
+                      ],
+                    },
                   },
                 ],
               },
-            },
-          });
-        }),
+            });
+          },
+        ),
         ...graphqlMocks.handlers,
       ],
     },