remove feature flag on billing metered product + fixes (#11570)

- remove feature flag
- design fixes

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -606,7 +606,6 @@ export enum FeatureFlagKey {
   IsCustomDomainEnabled = 'IsCustomDomainEnabled',
   IsEventObjectEnabled = 'IsEventObjectEnabled',
   IsJsonFilterEnabled = 'IsJsonFilterEnabled',
-  IsMeteredProductBillingEnabled = 'IsMeteredProductBillingEnabled',
   IsNewRelationEnabled = 'IsNewRelationEnabled',
   IsPermissionsV2Enabled = 'IsPermissionsV2Enabled',
   IsPostgreSQLIntegrationEnabled = 'IsPostgreSQLIntegrationEnabled',

packages/twenty-front/src/generated/graphql.tsx

@@ -544,7 +544,6 @@ export enum FeatureFlagKey {
   IsCustomDomainEnabled = 'IsCustomDomainEnabled',
   IsEventObjectEnabled = 'IsEventObjectEnabled',
   IsJsonFilterEnabled = 'IsJsonFilterEnabled',
-  IsMeteredProductBillingEnabled = 'IsMeteredProductBillingEnabled',
   IsNewRelationEnabled = 'IsNewRelationEnabled',
   IsPermissionsV2Enabled = 'IsPermissionsV2Enabled',
   IsPostgreSQLIntegrationEnabled = 'IsPostgreSQLIntegrationEnabled',

packages/twenty-front/src/modules/billing/components/SettingsBillingLabelValueItem.tsx

@@ -12,7 +12,7 @@ const StyledContainer = styled.div`
 `;
 
 const StyledLabelSpan = styled.span`
-  color: ${({ theme }) => theme.font.color.light};
+  color: ${({ theme }) => theme.font.color.tertiary};
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
 `;
@@ -20,7 +20,7 @@ const StyledLabelSpan = styled.span`
 const StyledValueSpan = styled.span<{ isPrimaryColor: boolean }>`
   color: ${({ theme, isPrimaryColor }) =>
     isPrimaryColor ? theme.font.color.primary : theme.font.color.secondary};
-  font-size: ${({ theme }) => theme.font.size.xs};
+  font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
 `;
 

packages/twenty-front/src/modules/billing/components/SettingsBillingMonthlyCreditsSection.tsx

@@ -42,15 +42,14 @@ export const SettingsBillingMonthlyCreditsSection = () => {
     totalCostCents,
   } = useGetWorkflowNodeExecutionUsage();
 
-  const progressBarValue =
-    freeUsageQuantity === includedFreeQuantity
-      ? 0
-      : (freeUsageQuantity / includedFreeQuantity) * 100;
+  const isFreeCreditProgressBarCompleted =
+    freeUsageQuantity === includedFreeQuantity;
 
-  const formattedFreeUsageQuantity =
-    freeUsageQuantity === includedFreeQuantity
-      ? formatAmount(freeUsageQuantity)
-      : formatNumber(freeUsageQuantity);
+  const progressBarValue = (freeUsageQuantity / includedFreeQuantity) * 100;
+
+  const formattedFreeUsageQuantity = isFreeCreditProgressBarCompleted
+    ? formatAmount(freeUsageQuantity)
+    : formatNumber(freeUsageQuantity);
 
   return (
     <Section>
@@ -65,7 +64,11 @@ export const SettingsBillingMonthlyCreditsSection = () => {
         />
         <ProgressBar
           value={progressBarValue}
-          barColor={COLOR.blue}
+          barColor={
+            isFreeCreditProgressBarCompleted
+              ? BACKGROUND_LIGHT.quaternary
+              : COLOR.blue
+          }
           backgroundColor={BACKGROUND_LIGHT.tertiary}
           withBorderRadius={true}
         />

packages/twenty-front/src/pages/settings/SettingsBilling.tsx

@@ -11,7 +11,6 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
-import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
 import { isDefined } from 'twenty-shared/utils';
 import {
@@ -23,7 +22,6 @@ import {
 import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
 import {
-  FeatureFlagKey,
   SubscriptionInterval,
   SubscriptionStatus,
   useBillingPortalSessionQuery,
@@ -96,10 +94,6 @@ export const SettingsBilling = () => {
     }
   };
 
-  const isMeteredProductBillingEnabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsMeteredProductBillingEnabled,
-  );
-
   return (
     <SubMenuTopBarContainer
       title={t`Billing`}
@@ -112,9 +106,7 @@ export const SettingsBilling = () => {
       ]}
     >
       <SettingsPageContainer>
-        {isMeteredProductBillingEnabled && (
-          <SettingsBillingMonthlyCreditsSection />
-        )}
+        <SettingsBillingMonthlyCreditsSection />
         <Section>
           <H2Title
             title={t`Manage your subscription`}

packages/twenty-server/src/engine/core-modules/billing/services/billing-plan.service.ts

@@ -139,7 +139,9 @@ export class BillingPlanService {
       );
     }
     const filterPricesByInterval = (product: BillingProduct) =>
-      product.billingPrices.filter((price) => price.interval === interval);
+      product.billingPrices.filter(
+        (price) => price.interval === interval && price.active,
+      );
 
     const meteredProductsPrices = meteredProducts.flatMap(
       filterPricesByInterval,

packages/twenty-server/src/engine/core-modules/billing/services/billing.service.ts

@@ -13,8 +13,6 @@ import { SubscriptionStatus } from 'src/engine/core-modules/billing/enums/billin
 import { BillingProductService } from 'src/engine/core-modules/billing/services/billing-product.service';
 import { BillingSubscriptionService } from 'src/engine/core-modules/billing/services/billing-subscription.service';
 import { getPlanKeyFromSubscription } from 'src/engine/core-modules/billing/utils/get-plan-key-from-subscription.util';
-import { FeatureFlagKey } from 'src/engine/core-modules/feature-flag/enums/feature-flag-key.enum';
-import { FeatureFlagService } from 'src/engine/core-modules/feature-flag/services/feature-flag.service';
 import { TwentyConfigService } from 'src/engine/core-modules/twenty-config/twenty-config.service';
 
 @Injectable()
@@ -24,7 +22,6 @@ export class BillingService {
     private readonly twentyConfigService: TwentyConfigService,
     private readonly billingSubscriptionService: BillingSubscriptionService,
     private readonly billingProductService: BillingProductService,
-    private readonly featureFlagService: FeatureFlagService,
     @InjectRepository(BillingSubscription, 'core')
     private readonly billingSubscriptionRepository: Repository<BillingSubscription>,
   ) {}
@@ -74,16 +71,6 @@ export class BillingService {
     workspaceId: string,
     productKey: BillingProductKey,
   ) {
-    const isMeteredProductBillingEnabled =
-      await this.featureFlagService.isFeatureEnabled(
-        FeatureFlagKey.IsMeteredProductBillingEnabled,
-        workspaceId,
-      );
-
-    if (!isMeteredProductBillingEnabled) {
-      return true;
-    }
-
     const subscription =
       await this.billingSubscriptionService.getCurrentBillingSubscriptionOrThrow(
         { workspaceId },

packages/twenty-server/src/engine/core-modules/feature-flag/enums/feature-flag-key.enum.ts

@@ -12,5 +12,4 @@ export enum FeatureFlagKey {
   IsApprovedAccessDomainsEnabled = 'IS_APPROVED_ACCESS_DOMAINS_ENABLED',
   IsNewRelationEnabled = 'IS_NEW_RELATION_ENABLED',
   IsPermissionsV2Enabled = 'IS_PERMISSIONS_V2_ENABLED',
-  IsMeteredProductBillingEnabled = 'IS_METERED_PRODUCT_BILLING_ENABLED',
 }