feat: redirect to Plan Required page if subscription status is not active (#2981)

* feat: redirect to Plan Required page if subscription status is not active

Closes #2934

* feat: navigate to Plan Required in PageChangeEffect

* feat: add Twenty logo to Plan Required modal

* test: add Storybook story

* Fix lint

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 
 import { authProvidersState } from '@/client-config/states/authProvidersState';
+import { billingState } from '@/client-config/states/billingState';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
 import { supportChatState } from '@/client-config/states/supportChatState';
@@ -16,6 +17,7 @@ export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
 
   const setIsSignInPrefilled = useSetRecoilState(isSignInPrefilledState);
 
+  const setBilling = useSetRecoilState(billingState);
   const setTelemetry = useSetRecoilState(telemetryState);
   const setSupportChat = useSetRecoilState(supportChatState);
 
@@ -31,6 +33,7 @@ export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
       setIsDebugMode(data?.clientConfig.debugMode);
       setIsSignInPrefilled(data?.clientConfig.signInPrefilled);
 
+      setBilling(data?.clientConfig.billing);
       setTelemetry(data?.clientConfig.telemetry);
       setSupportChat(data?.clientConfig.support);
     }
@@ -41,6 +44,7 @@ export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
     setIsSignInPrefilled,
     setTelemetry,
     setSupportChat,
+    setBilling,
   ]);
 
   return loading ? <></> : <>{children}</>;

packages/twenty-front/src/modules/client-config/graphql/queries/getClientConfig.ts

@@ -7,6 +7,10 @@ export const GET_CLIENT_CONFIG = gql`
         google
         password
       }
+      billing {
+        isBillingEnabled
+        billingUrl
+      }
       signInPrefilled
       debugMode
       telemetry {

packages/twenty-front/src/modules/client-config/states/billingState.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+import { Billing } from '~/generated/graphql';
+
+export const billingState = atom<Billing | null>({
+  key: 'billingState',
+  default: null,
+});