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`}