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
2025-03-05 11:27:34 -03:00
parent e838dfc68b
commit 4d7e52ef25
17 changed files with 174 additions and 151 deletions
--- a/packages/twenty-front/src/generated/graphql.tsx
+++ b/packages/twenty-front/src/generated/graphql.tsx
@ -1,5 +1,5 @@
-import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
+import { gql } from '@apollo/client';
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
@ -161,6 +161,7 @@ export type BillingPlanOutput = {

 export type BillingPriceLicensedDto = {
  __typename?: 'BillingPriceLicensedDTO';
+  priceUsageType: BillingUsageType;
  recurringInterval: SubscriptionInterval;
  stripePriceId: Scalars['String'];
  unitAmount: Scalars['Float'];
@ -168,6 +169,7 @@ export type BillingPriceLicensedDto = {

 export type BillingPriceMeteredDto = {
  __typename?: 'BillingPriceMeteredDTO';
+  priceUsageType: BillingUsageType;
  recurringInterval: SubscriptionInterval;
  stripePriceId: Scalars['String'];
  tiers?: Maybe<Array<BillingPriceTierDto>>;
@ -194,24 +196,10 @@ export type BillingProductDto = {
  description: Scalars['String'];
  images?: Maybe<Array<Scalars['String']>>;
  name: Scalars['String'];
-  prices: Array<Maybe<BillingPriceUnionDto>>;
+  prices: Array<BillingPriceUnionDto>;
  type: BillingUsageType;
 };

-export type BillingProductPriceDto = {
-  __typename?: 'BillingProductPriceDTO';
-  created: Scalars['Float'];
-  recurringInterval: SubscriptionInterval;
-  stripePriceId: Scalars['String'];
-  unitAmount: Scalars['Float'];
-};
-
-export type BillingProductPricesOutput = {
-  __typename?: 'BillingProductPricesOutput';
-  productPrices: Array<BillingProductPriceDto>;
-  totalNumberOfPrices: Scalars['Int'];
-};
-
 export type BillingSessionOutput = {
  __typename?: 'BillingSessionOutput';
  url?: Maybe<Scalars['String']>;
@ -1306,7 +1294,6 @@ export type Query = {
  getEnvironmentVariablesGrouped: EnvironmentVariablesOutput;
  getIndicatorHealthStatus: AdminPanelHealthServiceData;
  getPostgresCredentials?: Maybe<PostgresCredentials>;
-  getProductPrices: BillingProductPricesOutput;
  getPublicWorkspaceDataByDomain: PublicWorkspaceDataOutput;
  getQueueMetrics: QueueMetricsData;
  getRoles: Array<Role>;
@ -2356,6 +2343,11 @@ export type ValidatePasswordResetTokenQueryVariables = Exact<{

 export type ValidatePasswordResetTokenQuery = { __typename?: 'Query', validatePasswordResetToken: { __typename?: 'ValidatePasswordResetToken', id: string, email: string } };

+export type BillingBaseProductPricesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type BillingBaseProductPricesQuery = { __typename?: 'Query', plans: Array<{ __typename?: 'BillingPlanOutput', planKey: BillingPlanKey, baseProduct: { __typename?: 'BillingProductDTO', prices: Array<{ __typename?: 'BillingPriceLicensedDTO', unitAmount: number, stripePriceId: string, recurringInterval: SubscriptionInterval } | { __typename?: 'BillingPriceMeteredDTO' }> } }> };
+
 export type BillingPortalSessionQueryVariables = Exact<{
  returnUrlPath?: InputMaybe<Scalars['String']>;
 }>;
@ -2373,13 +2365,6 @@ export type CheckoutSessionMutationVariables = Exact<{

 export type CheckoutSessionMutation = { __typename?: 'Mutation', checkoutSession: { __typename?: 'BillingSessionOutput', url?: string | null } };

-export type GetProductPricesQueryVariables = Exact<{
-  product: Scalars['String'];
-}>;
-
-
-export type GetProductPricesQuery = { __typename?: 'Query', getProductPrices: { __typename?: 'BillingProductPricesOutput', productPrices: Array<{ __typename?: 'BillingProductPriceDTO', created: number, recurringInterval: SubscriptionInterval, stripePriceId: string, unitAmount: number }> } };
-
 export type UpdateBillingSubscriptionMutationVariables = Exact<{ [key: string]: never; }>;


@ -3817,6 +3802,49 @@ export function useValidatePasswordResetTokenLazyQuery(baseOptions?: Apollo.Lazy
 export type ValidatePasswordResetTokenQueryHookResult = ReturnType<typeof useValidatePasswordResetTokenQuery>;
 export type ValidatePasswordResetTokenLazyQueryHookResult = ReturnType<typeof useValidatePasswordResetTokenLazyQuery>;
 export type ValidatePasswordResetTokenQueryResult = Apollo.QueryResult<ValidatePasswordResetTokenQuery, ValidatePasswordResetTokenQueryVariables>;
+export const BillingBaseProductPricesDocument = gql`
+    query billingBaseProductPrices {
+  plans {
+    planKey
+    baseProduct {
+      prices {
+        ... on BillingPriceLicensedDTO {
+          unitAmount
+          stripePriceId
+          recurringInterval
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useBillingBaseProductPricesQuery__
+ *
+ * To run a query within a React component, call `useBillingBaseProductPricesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useBillingBaseProductPricesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useBillingBaseProductPricesQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useBillingBaseProductPricesQuery(baseOptions?: Apollo.QueryHookOptions<BillingBaseProductPricesQuery, BillingBaseProductPricesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<BillingBaseProductPricesQuery, BillingBaseProductPricesQueryVariables>(BillingBaseProductPricesDocument, options);
+      }
+export function useBillingBaseProductPricesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<BillingBaseProductPricesQuery, BillingBaseProductPricesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<BillingBaseProductPricesQuery, BillingBaseProductPricesQueryVariables>(BillingBaseProductPricesDocument, options);
+        }
+export type BillingBaseProductPricesQueryHookResult = ReturnType<typeof useBillingBaseProductPricesQuery>;
+export type BillingBaseProductPricesLazyQueryHookResult = ReturnType<typeof useBillingBaseProductPricesLazyQuery>;
+export type BillingBaseProductPricesQueryResult = Apollo.QueryResult<BillingBaseProductPricesQuery, BillingBaseProductPricesQueryVariables>;
 export const BillingPortalSessionDocument = gql`
    query BillingPortalSession($returnUrlPath: String) {
  billingPortalSession(returnUrlPath: $returnUrlPath) {
@ -3893,46 +3921,6 @@ export function useCheckoutSessionMutation(baseOptions?: Apollo.MutationHookOpti
 export type CheckoutSessionMutationHookResult = ReturnType<typeof useCheckoutSessionMutation>;
 export type CheckoutSessionMutationResult = Apollo.MutationResult<CheckoutSessionMutation>;
 export type CheckoutSessionMutationOptions = Apollo.BaseMutationOptions<CheckoutSessionMutation, CheckoutSessionMutationVariables>;
-export const GetProductPricesDocument = gql`
-    query GetProductPrices($product: String!) {
-  getProductPrices(product: $product) {
-    productPrices {
-      created
-      recurringInterval
-      stripePriceId
-      unitAmount
-    }
-  }
-}
-    `;
-
-/**
- * __useGetProductPricesQuery__
- *
- * To run a query within a React component, call `useGetProductPricesQuery` and pass it any options that fit your needs.
- * When your component renders, `useGetProductPricesQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useGetProductPricesQuery({
- *   variables: {
- *      product: // value for 'product'
- *   },
- * });
- */
-export function useGetProductPricesQuery(baseOptions: Apollo.QueryHookOptions<GetProductPricesQuery, GetProductPricesQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<GetProductPricesQuery, GetProductPricesQueryVariables>(GetProductPricesDocument, options);
-      }
-export function useGetProductPricesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetProductPricesQuery, GetProductPricesQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<GetProductPricesQuery, GetProductPricesQueryVariables>(GetProductPricesDocument, options);
-        }
-export type GetProductPricesQueryHookResult = ReturnType<typeof useGetProductPricesQuery>;
-export type GetProductPricesLazyQueryHookResult = ReturnType<typeof useGetProductPricesLazyQuery>;
-export type GetProductPricesQueryResult = Apollo.QueryResult<GetProductPricesQuery, GetProductPricesQueryVariables>;
 export const UpdateBillingSubscriptionDocument = gql`
    mutation UpdateBillingSubscription {
  updateBillingSubscription {
--- a/packages/twenty-front/src/modules/billing/graphql/billingBaseProductPrices.ts
+++ b/packages/twenty-front/src/modules/billing/graphql/billingBaseProductPrices.ts
@ -0,0 +1,18 @@
+import { gql } from '@apollo/client';
+
+export const BILLING_BASE_PRODUCT_PRICES = gql`
+  query billingBaseProductPrices {
+    plans {
+      planKey
+      baseProduct {
+        prices {
+          ... on BillingPriceLicensedDTO {
+            unitAmount
+            stripePriceId
+            recurringInterval
+          }
+        }
+      }
+    }
+  }
+`;
--- a/packages/twenty-front/src/modules/billing/graphql/getProductPrices.ts
+++ b/packages/twenty-front/src/modules/billing/graphql/getProductPrices.ts
@ -1,14 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const GET_PRODUCT_PRICES = gql`
-  query GetProductPrices($product: String!) {
-    getProductPrices(product: $product) {
-      productPrices {
-        created
-        recurringInterval
-        stripePriceId
-        unitAmount
-      }
-    }
-  }
-`;
--- a/packages/twenty-front/src/modules/billing/utils/isBillingPriceLicensed.ts
+++ b/packages/twenty-front/src/modules/billing/utils/isBillingPriceLicensed.ts
@ -0,0 +1,7 @@
+import { BillingPriceLicensedDto } from '~/generated/graphql';
+
+export const isBillingPriceLicensed = <T extends { __typename?: string }>(
+  price: T,
+): price is T & BillingPriceLicensedDto => {
+  return price?.__typename === 'BillingPriceLicensedDTO';
+};
--- a/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx
+++ b/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>
--- a/packages/twenty-front/src/pages/onboarding/stories/ChooseYourPlan.stories.tsx
+++ b/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,
      ],
    },