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/auth/components/SubTitle.tsx

@@ -1,14 +1,8 @@
-import { JSX, ReactNode } from 'react';
 import styled from '@emotion/styled';
 
-type SubTitleProps = {
-  children: ReactNode;
-};
-
 const StyledSubTitle = styled.div`
   color: ${({ theme }) => theme.font.color.secondary};
+  text-align: center;
 `;
 
-export const SubTitle = ({ children }: SubTitleProps): JSX.Element => (
-  <StyledSubTitle>{children}</StyledSubTitle>
-);
+export { StyledSubTitle as SubTitle };

packages/twenty-front/src/modules/auth/hooks/useOnboardingStatus.ts

@@ -2,6 +2,7 @@ import { useRecoilValue } from 'recoil';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { billingState } from '@/client-config/states/billingState';
 
 import { useIsLogged } from '../hooks/useIsLogged';
 import {
@@ -10,13 +11,15 @@ import {
 } from '../utils/getOnboardingStatus';
 
 export const useOnboardingStatus = (): OnboardingStatus | undefined => {
+  const billing = useRecoilValue(billingState);
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
   const isLoggedIn = useIsLogged();
 
-  return getOnboardingStatus(
+  return getOnboardingStatus({
     isLoggedIn,
     currentWorkspaceMember,
     currentWorkspace,
-  );
+    isBillingEnabled: billing?.isBillingEnabled,
+  });
 };

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx

@@ -6,6 +6,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { z } from 'zod';
 
 import { authProvidersState } from '@/client-config/states/authProvidersState';
+import { billingState } from '@/client-config/states/billingState';
 import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
 import { AppPath } from '@/types/AppPath';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
@@ -45,8 +46,11 @@ export const useSignInUp = () => {
   const navigate = useNavigate();
   const { enqueueSnackBar } = useSnackBar();
   const isMatchingLocation = useIsMatchingLocation();
+
   const [authProviders] = useRecoilState(authProvidersState);
   const isSignInPrefilled = useRecoilValue(isSignInPrefilledState);
+  const billing = useRecoilValue(billingState);
+
   const workspaceInviteHash = useParams().workspaceInviteHash;
   const [signInUpStep, setSignInUpStep] = useState<SignInUpStep>(
     SignInUpStep.Init,
@@ -119,27 +123,33 @@ export const useSignInUp = () => {
         if (!data.email || !data.password) {
           throw new Error('Email and password are required');
         }
-        let currentWorkspace;
 
-        if (signInUpMode === SignInUpMode.SignIn) {
-          const { workspace } = await signInWithCredentials(
-            data.email.toLowerCase(),
-            data.password,
-          );
-          currentWorkspace = workspace;
-        } else {
-          const { workspace } = await signUpWithCredentials(
-            data.email.toLowerCase(),
-            data.password,
-            workspaceInviteHash,
-          );
-          currentWorkspace = workspace;
+        const { workspace: currentWorkspace } =
+          signInUpMode === SignInUpMode.SignIn
+            ? await signInWithCredentials(
+                data.email.toLowerCase(),
+                data.password,
+              )
+            : await signUpWithCredentials(
+                data.email.toLowerCase(),
+                data.password,
+                workspaceInviteHash,
+              );
+
+        if (
+          billing?.isBillingEnabled &&
+          currentWorkspace.subscriptionStatus !== 'active'
+        ) {
+          navigate('/plan-required');
+          return;
         }
-        if (currentWorkspace?.displayName) {
+
+        if (currentWorkspace.displayName) {
           navigate('/');
-        } else {
-          navigate('/create/workspace');
+          return;
         }
+
+        navigate('/create/workspace');
       } catch (err: any) {
         enqueueSnackBar(err?.message, {
           variant: 'error',
@@ -151,6 +161,7 @@ export const useSignInUp = () => {
       signInWithCredentials,
       signUpWithCredentials,
       workspaceInviteHash,
+      billing?.isBillingEnabled,
       navigate,
       enqueueSnackBar,
     ],

packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts

@@ -10,6 +10,7 @@ export type CurrentWorkspace = Pick<
   | 'displayName'
   | 'allowImpersonation'
   | 'featureFlags'
+  | 'subscriptionStatus'
 >;
 
 export const currentWorkspaceState = atom<CurrentWorkspace | null>({

packages/twenty-front/src/modules/auth/utils/getOnboardingStatus.ts

@@ -2,17 +2,25 @@ import { CurrentWorkspace } from '@/auth/states/currentWorkspaceState';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 
 export enum OnboardingStatus {
+  Incomplete = 'incomplete',
+  Canceled = 'canceled',
   OngoingUserCreation = 'ongoing_user_creation',
   OngoingWorkspaceCreation = 'ongoing_workspace_creation',
   OngoingProfileCreation = 'ongoing_profile_creation',
   Completed = 'completed',
 }
 
-export const getOnboardingStatus = (
-  isLoggedIn: boolean,
-  currentWorkspaceMember: WorkspaceMember | null,
-  currentWorkspace: CurrentWorkspace | null,
-) => {
+export const getOnboardingStatus = ({
+  isLoggedIn,
+  currentWorkspaceMember,
+  currentWorkspace,
+  isBillingEnabled,
+}: {
+  isLoggedIn: boolean;
+  currentWorkspaceMember: WorkspaceMember | null;
+  currentWorkspace: CurrentWorkspace | null;
+  isBillingEnabled?: boolean;
+}) => {
   if (!isLoggedIn) {
     return OnboardingStatus.OngoingUserCreation;
   }
@@ -22,6 +30,17 @@ export const getOnboardingStatus = (
     return undefined;
   }
 
+  if (
+    isBillingEnabled &&
+    currentWorkspace?.subscriptionStatus === 'incomplete'
+  ) {
+    return OnboardingStatus.Incomplete;
+  }
+
+  if (isBillingEnabled && currentWorkspace?.subscriptionStatus === 'canceled') {
+    return OnboardingStatus.Canceled;
+  }
+
   if (!currentWorkspace?.displayName) {
     return OnboardingStatus.OngoingWorkspaceCreation;
   }