Add a flag for stripe integration (#3181)

frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx

@@ -9,12 +9,12 @@ import {
     InstanceState,
     InstancePlan,
 } from 'interfaces/instance';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { trialHasExpired, isTrialInstance } from 'utils/instanceTrial';
 import { GridRow } from 'component/common/GridRow/GridRow';
 import { GridCol } from 'component/common/GridCol/GridCol';
-import { GridColLink } from './GridColLink/GridColLink';
-import { STRIPE } from 'component/admin/billing/flags';
 import { Badge } from 'component/common/Badge/Badge';
+import { GridColLink } from './GridColLink/GridColLink';
 
 const StyledPlanBox = styled('aside')(({ theme }) => ({
     padding: theme.spacing(2.5),
@@ -74,6 +74,7 @@ interface IBillingPlanProps {
 export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
     const { users } = useUsers();
     const expired = trialHasExpired(instanceStatus);
+    const { uiConfig } = useUiConfig();
 
     const price = {
         [InstancePlan.PRO]: 80,
@@ -147,9 +148,10 @@ export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
                     </GridRow>
                 </Grid>
                 <ConditionallyRender
-                    condition={
+                    condition={Boolean(
-                        STRIPE && instanceStatus.plan === InstancePlan.PRO
+                        uiConfig?.flags?.proPlanAutoCharge &&
-                    }
+                            instanceStatus.plan === InstancePlan.PRO
+                    )}
                     show={
                         <>
                             <Grid container>

frontend/src/component/admin/billing/flags.ts

@@ -1 +0,0 @@
-export const STRIPE = false;

frontend/src/hooks/useUsersPlan.ts

@@ -1,8 +1,8 @@
 import { IUser } from 'interfaces/user';
 import { useMemo } from 'react';
 import { useInstanceStatus } from './api/getters/useInstanceStatus/useInstanceStatus';
-import { STRIPE } from 'component/admin/billing/flags';
 import { InstancePlan } from 'interfaces/instance';
+import useUiConfig from './api/getters/useUiConfig/useUiConfig';
 
 export interface IUsersPlanOutput {
     planUsers: IUser[];
@@ -11,8 +11,12 @@ export interface IUsersPlanOutput {
 
 export const useUsersPlan = (users: IUser[]): IUsersPlanOutput => {
     const { instanceStatus } = useInstanceStatus();
+    const { uiConfig } = useUiConfig();
 
-    const isBillingUsers = STRIPE && instanceStatus?.plan === InstancePlan.PRO;
+    const isBillingUsers = Boolean(
+        uiConfig?.flags?.proPlanAutoCharge &&
+            instanceStatus?.plan === InstancePlan.PRO
+    );
     const seats = instanceStatus?.seats ?? 5;
 
     const planUsers = useMemo(

frontend/src/interfaces/uiConfig.ts

@@ -47,6 +47,7 @@ export interface IFlags {
     caseInsensitiveInOperators?: boolean;
     crOnVariants?: boolean;
     showProjectApiAccess?: boolean;
+    proPlanAutoCharge?: boolean;
 }
 
 export interface IVersionInfo {

src/lib/__snapshots__/create-config.test.ts.snap

@@ -79,6 +79,7 @@ exports[`should create default config 1`] = `
       "messageBanner": false,
       "newProjectOverview": false,
       "notifications": false,
+      "proPlanAutoCharge": false,
       "projectStatusApi": false,
       "proxyReturnAllToggles": false,
       "responseTimeWithAppNameKillSwitch": false,
@@ -100,6 +101,7 @@ exports[`should create default config 1`] = `
       "messageBanner": false,
       "newProjectOverview": false,
       "notifications": false,
+      "proPlanAutoCharge": false,
       "projectStatusApi": false,
       "proxyReturnAllToggles": false,
       "responseTimeWithAppNameKillSwitch": false,

src/lib/types/experimental.ts

@@ -62,6 +62,10 @@ const flags = {
         process.env.UNLEASH_STRICT_SCHEMA_VALIDTION,
         false,
     ),
+    proPlanAutoCharge: parseEnvVarBoolean(
+        process.env.UNLEASH_PRO_PLAN_AUTO_CHARGE,
+        false,
+    ),
     notifications: parseEnvVarBoolean(process.env.NOTIFICATIONS, false),
 };