Pass Billing Checkout var in url to bypass credit card (#9283)

2024-12-31 14:48:00 +01:00
parent 45f14c8020
commit 97f5a5b8a5
123 changed files with 524 additions and 173 deletions
--- a/README.md
+++ b/README.md
@ -31,6 +31,13 @@ We felt the need for a CRM platform that empowers rather than constrains. We bel
 <br>

 # Demo 
+
+<!--
+You can use the following url to sign up to the cloud version without providing a credit card:
+
+<a href="https://demo.twenty.com/?billingCheckoutSession={"plan":"PRO","recurringInterval":"MONTHLY","requirePaymentMethod":false,"skipPlanPage":true}">https://demo.twenty.com/?billingCheckoutSession={"plan":"PRO","recurringInterval":"MONTHLY","requirePaymentMethod":false,"skipPlanPage":true}</a>
+
+-->
 Go to <a href="https://demo.twenty.com/">demo.twenty.com</a> and login with the following credentials:

 ```
--- a/packages/twenty-front/package.json
+++ b/packages/twenty-front/package.json
@ -48,6 +48,7 @@
    "buffer": "^6.0.3",
    "docx": "^9.1.0",
    "file-saver": "^2.0.5",
+    "recoil-sync": "^0.2.0",
    "transliteration": "^2.3.5"
  },
  "devDependencies": {
--- a/packages/twenty-front/src/generated/graphql.tsx
+++ b/packages/twenty-front/src/generated/graphql.tsx
@ -115,6 +115,13 @@ export type Billing = {
  isBillingEnabled: Scalars['Boolean'];
 };

+/** The different billing plans available */
+export enum BillingPlanKey {
+  Base = 'BASE',
+  Enterprise = 'ENTERPRISE',
+  Pro = 'PRO'
+}
+
 export type BillingSubscription = {
  __typename?: 'BillingSubscription';
  id: Scalars['UUID'];
@ -182,6 +189,30 @@ export type ComputeStepOutputSchemaInput = {
  step: Scalars['JSON'];
 };

+export type CreateFieldInput = {
+  defaultValue?: InputMaybe<Scalars['JSON']>;
+  description?: InputMaybe<Scalars['String']>;
+  icon?: InputMaybe<Scalars['String']>;
+  isActive?: InputMaybe<Scalars['Boolean']>;
+  isCustom?: InputMaybe<Scalars['Boolean']>;
+  isLabelSyncedWithName?: InputMaybe<Scalars['Boolean']>;
+  isNullable?: InputMaybe<Scalars['Boolean']>;
+  isRemoteCreation?: InputMaybe<Scalars['Boolean']>;
+  isSystem?: InputMaybe<Scalars['Boolean']>;
+  isUnique?: InputMaybe<Scalars['Boolean']>;
+  label: Scalars['String'];
+  name: Scalars['String'];
+  objectMetadataId: Scalars['String'];
+  options?: InputMaybe<Scalars['JSON']>;
+  settings?: InputMaybe<Scalars['JSON']>;
+  type: FieldMetadataType;
+};
+
+export type CreateOneFieldMetadataInput = {
+  /** The record to create */
+  field: CreateFieldInput;
+};
+
 export type CreateServerlessFunctionInput = {
  description?: InputMaybe<Scalars['String']>;
  name: Scalars['String'];
@ -205,6 +236,11 @@ export type CursorPaging = {
  last?: InputMaybe<Scalars['Int']>;
 };

+export type DeleteOneFieldInput = {
+  /** The id of the field to delete. */
+  id: Scalars['UUID'];
+};
+
 export type DeleteOneObjectInput = {
  /** The id of the record to delete. */
  id: Scalars['UUID'];
@ -447,12 +483,14 @@ export type Mutation = {
  computeStepOutputSchema: Scalars['JSON'];
  createOIDCIdentityProvider: SetupSsoOutput;
  createOneAppToken: AppToken;
+  createOneField: Field;
  createOneObject: Object;
  createOneServerlessFunction: ServerlessFunction;
  createSAMLIdentityProvider: SetupSsoOutput;
  createWorkflowVersionStep: WorkflowAction;
  deactivateWorkflowVersion: Scalars['Boolean'];
  deleteCurrentWorkspace: Workspace;
+  deleteOneField: Field;
  deleteOneObject: Object;
  deleteOneServerlessFunction: ServerlessFunction;
  deleteSSOIdentityProvider: DeleteSsoOutput;
@ -478,6 +516,7 @@ export type Mutation = {
  switchWorkspace: PublicWorkspaceDataOutput;
  track: Analytics;
  updateBillingSubscription: UpdateBillingEntity;
+  updateOneField: Field;
  updateOneObject: Object;
  updateOneServerlessFunction: ServerlessFunction;
  updatePasswordViaResetToken: InvalidatePassword;
@ -528,7 +567,9 @@ export type MutationChallengeArgs = {


 export type MutationCheckoutSessionArgs = {
+  plan?: BillingPlanKey;
  recurringInterval: SubscriptionInterval;
+  requirePaymentMethod?: Scalars['Boolean'];
  successUrlPath?: InputMaybe<Scalars['String']>;
 };

@ -543,6 +584,11 @@ export type MutationCreateOidcIdentityProviderArgs = {
 };


+export type MutationCreateOneFieldArgs = {
+  input: CreateOneFieldMetadataInput;
+};
+
+
 export type MutationCreateOneServerlessFunctionArgs = {
  input: CreateServerlessFunctionInput;
 };
@ -563,6 +609,11 @@ export type MutationDeactivateWorkflowVersionArgs = {
 };


+export type MutationDeleteOneFieldArgs = {
+  input: DeleteOneFieldInput;
+};
+
+
 export type MutationDeleteOneObjectArgs = {
  input: DeleteOneObjectInput;
 };
@ -665,6 +716,11 @@ export type MutationTrackArgs = {
 };


+export type MutationUpdateOneFieldArgs = {
+  input: UpdateOneFieldMetadataInput;
+};
+
+
 export type MutationUpdateOneObjectArgs = {
  input: UpdateOneObjectInput;
 };
@ -825,6 +881,8 @@ export type Query = {
  clientConfig: ClientConfig;
  currentUser: User;
  currentWorkspace: Workspace;
+  field: Field;
+  fields: FieldConnection;
  findAvailableWorkspacesByEmail: Array<AvailableWorkspaceOutput>;
  findManyServerlessFunctions: Array<ServerlessFunction>;
  findOneServerlessFunction: ServerlessFunction;
@ -1241,6 +1299,22 @@ export type UpdateBillingEntity = {
  success: Scalars['Boolean'];
 };

+export type UpdateFieldInput = {
+  defaultValue?: InputMaybe<Scalars['JSON']>;
+  description?: InputMaybe<Scalars['String']>;
+  icon?: InputMaybe<Scalars['String']>;
+  isActive?: InputMaybe<Scalars['Boolean']>;
+  isCustom?: InputMaybe<Scalars['Boolean']>;
+  isLabelSyncedWithName?: InputMaybe<Scalars['Boolean']>;
+  isNullable?: InputMaybe<Scalars['Boolean']>;
+  isSystem?: InputMaybe<Scalars['Boolean']>;
+  isUnique?: InputMaybe<Scalars['Boolean']>;
+  label?: InputMaybe<Scalars['String']>;
+  name?: InputMaybe<Scalars['String']>;
+  options?: InputMaybe<Scalars['JSON']>;
+  settings?: InputMaybe<Scalars['JSON']>;
+};
+
 export type UpdateObjectPayload = {
  description?: InputMaybe<Scalars['String']>;
  icon?: InputMaybe<Scalars['String']>;
@ -1255,6 +1329,13 @@ export type UpdateObjectPayload = {
  shortcut?: InputMaybe<Scalars['String']>;
 };

+export type UpdateOneFieldMetadataInput = {
+  /** The id of the record to update */
+  id: Scalars['UUID'];
+  /** The record to update */
+  update: UpdateFieldInput;
+};
+
 export type UpdateOneObjectInput = {
  /** The id of the object to update */
  id: Scalars['UUID'];
@ -1944,6 +2025,8 @@ export type BillingPortalSessionQuery = { __typename?: 'Query', billingPortalSes
 export type CheckoutSessionMutationVariables = Exact<{
  recurringInterval: SubscriptionInterval;
  successUrlPath?: InputMaybe<Scalars['String']>;
+  plan: BillingPlanKey;
+  requirePaymentMethod: Scalars['Boolean'];
 }>;


@ -3234,10 +3317,12 @@ export type BillingPortalSessionQueryHookResult = ReturnType<typeof useBillingPo
 export type BillingPortalSessionLazyQueryHookResult = ReturnType<typeof useBillingPortalSessionLazyQuery>;
 export type BillingPortalSessionQueryResult = Apollo.QueryResult<BillingPortalSessionQuery, BillingPortalSessionQueryVariables>;
 export const CheckoutSessionDocument = gql`
-    mutation CheckoutSession($recurringInterval: SubscriptionInterval!, $successUrlPath: String) {
+    mutation CheckoutSession($recurringInterval: SubscriptionInterval!, $successUrlPath: String, $plan: BillingPlanKey!, $requirePaymentMethod: Boolean!) {
  checkoutSession(
    recurringInterval: $recurringInterval
    successUrlPath: $successUrlPath
+    plan: $plan
+    requirePaymentMethod: $requirePaymentMethod
  ) {
    url
  }
@ -3260,6 +3345,8 @@ export type CheckoutSessionMutationFn = Apollo.MutationFunction<CheckoutSessionM
 *   variables: {
 *      recurringInterval: // value for 'recurringInterval'
 *      successUrlPath: // value for 'successUrlPath'
+ *      plan: // value for 'plan'
+ *      requirePaymentMethod: // value for 'requirePaymentMethod'
 *   },
 * });
 */
--- a/packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts
+++ b/packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const copilotQueryState = createState({
  key: 'activities/copilot-query',
--- a/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts
+++ b/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const emailThreadIdWhenEmailThreadWasClosedState = createState<
  string | null
--- a/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts
+++ b/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';

--- a/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts
+++ b/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const canCreateActivityState = createState<boolean>({
  key: 'canCreateActivityState',
--- a/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts
+++ b/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isActivityInCreateModeState = createState<boolean>({
  key: 'isActivityInCreateModeState',
--- a/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts
+++ b/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isUpsertingActivityInDBState = createState<boolean>({
  key: 'isUpsertingActivityInDBState',
--- a/packages/twenty-front/src/modules/app/components/App.tsx
+++ b/packages/twenty-front/src/modules/app/components/App.tsx
@ -7,26 +7,29 @@ import { ExceptionHandlerProvider } from '@/error-handler/components/ExceptionHa
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { HelmetProvider } from 'react-helmet-async';
 import { RecoilRoot } from 'recoil';
+import { RecoilURLSyncJSON } from 'recoil-sync';
 import { IconsProvider } from 'twenty-ui';

 export const App = () => {
  return (
    <RecoilRoot>
-      <AppErrorBoundary>
-        <CaptchaProvider>
-          <RecoilDebugObserverEffect />
-          <ApolloDevLogEffect />
-          <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-            <IconsProvider>
-              <ExceptionHandlerProvider>
-                <HelmetProvider>
-                  <AppRouter />
-                </HelmetProvider>
-              </ExceptionHandlerProvider>
-            </IconsProvider>
-          </SnackBarProviderScope>
-        </CaptchaProvider>
-      </AppErrorBoundary>
+      <RecoilURLSyncJSON location={{ part: 'queryParams' }}>
+        <AppErrorBoundary>
+          <CaptchaProvider>
+            <RecoilDebugObserverEffect />
+            <ApolloDevLogEffect />
+            <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+              <IconsProvider>
+                <ExceptionHandlerProvider>
+                  <HelmetProvider>
+                    <AppRouter />
+                  </HelmetProvider>
+                </ExceptionHandlerProvider>
+              </IconsProvider>
+            </SnackBarProviderScope>
+          </CaptchaProvider>
+        </AppErrorBoundary>
+      </RecoilURLSyncJSON>
    </RecoilRoot>
  );
 };
--- a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
+++ b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
@ -43,16 +43,17 @@ import { getTimeFormatFromWorkspaceTimeFormat } from '@/localization/utils/getTi
 import { currentUserState } from '../states/currentUserState';
 import { tokenPairState } from '../states/tokenPairState';

+import { BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { useIsCurrentLocationOnAWorkspaceSubdomain } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspaceSubdomain';
 import { useLastAuthenticatedWorkspaceDomain } from '@/domain-manager/hooks/useLastAuthenticatedWorkspaceDomain';
 import { useReadWorkspaceSubdomainFromCurrentLocation } from '@/domain-manager/hooks/useReadWorkspaceSubdomainFromCurrentLocation';
+import { useRedirect } from '@/domain-manager/hooks/useRedirect';
+import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
 import { domainConfigurationState } from '@/domain-manager/states/domainConfigurationState';
 import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
-import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import { AppPath } from '@/types/AppPath';
-import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
-import { useRedirect } from '@/domain-manager/hooks/useRedirect';
+import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';

 export const useAuth = () => {
  const setTokenPair = useSetRecoilState(tokenPairState);
@ -382,6 +383,7 @@ export const useAuth = () => {
      params: {
        workspacePersonalInviteToken?: string;
        workspaceInviteHash?: string;
+        billingCheckoutSession?: BillingCheckoutSession;
      },
    ) => {
      const url = new URL(`${REACT_APP_SERVER_BASE_URL}${path}`);
@ -394,6 +396,12 @@ export const useAuth = () => {
          params.workspacePersonalInviteToken,
        );
      }
+      if (isDefined(params.billingCheckoutSession)) {
+        url.searchParams.set(
+          'billingCheckoutSessionState',
+          JSON.stringify(params.billingCheckoutSession),
+        );
+      }

      if (isDefined(workspaceSubdomain)) {
        url.searchParams.set('workspaceSubdomain', workspaceSubdomain);
@ -408,6 +416,7 @@ export const useAuth = () => {
    (params: {
      workspacePersonalInviteToken?: string;
      workspaceInviteHash?: string;
+      billingCheckoutSession?: BillingCheckoutSession;
    }) => {
      redirect(buildRedirectUrl('/auth/google', params));
    },
@ -418,6 +427,7 @@ export const useAuth = () => {
    (params: {
      workspacePersonalInviteToken?: string;
      workspaceInviteHash?: string;
+      billingCheckoutSession?: BillingCheckoutSession;
    }) => {
      redirect(buildRedirectUrl('/auth/microsoft', params));
    },
--- a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/tests/useSignInWithGoogle.test.ts
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/tests/useSignInWithGoogle.test.ts
@ -1,7 +1,9 @@
-import { renderHook } from '@testing-library/react';
-import { useParams, useSearchParams } from 'react-router-dom';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle';
+import { renderHook } from '@testing-library/react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { BillingPlanKey, SubscriptionInterval } from '~/generated/graphql';
+import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';

 jest.mock('react-router-dom', () => ({
  useParams: jest.fn(),
@ -13,10 +15,24 @@ jest.mock('@/auth/hooks/useAuth', () => ({
 }));

 describe('useSignInWithGoogle', () => {
+  const mockBillingCheckoutSession = {
+    plan: BillingPlanKey.Pro,
+    interval: SubscriptionInterval.Month,
+    requirePaymentMethod: true,
+    skipPlanPage: false,
+  };
+
+  const Wrapper = getJestMetadataAndApolloMocksWrapper({
+    apolloMocks: [],
+  });
+
  it('should call signInWithGoogle with correct params', () => {
    const signInWithGoogleMock = jest.fn();
    const mockUseParams = { workspaceInviteHash: 'testHash' };
-    const mockSearchParams = new URLSearchParams('inviteToken=testToken');
+
+    const mockSearchParams = new URLSearchParams(
+      'inviteToken=testToken&billingCheckoutSessionState={"plan":"Pro","interval":"Month","requirePaymentMethod":true,"skipPlanPage":false}',
+    );

    (useParams as jest.Mock).mockReturnValue(mockUseParams);
    (useSearchParams as jest.Mock).mockReturnValue([mockSearchParams]);
@ -24,12 +40,15 @@ describe('useSignInWithGoogle', () => {
      signInWithGoogle: signInWithGoogleMock,
    });

-    const { result } = renderHook(() => useSignInWithGoogle());
+    const { result } = renderHook(() => useSignInWithGoogle(), {
+      wrapper: Wrapper,
+    });
    result.current.signInWithGoogle();

    expect(signInWithGoogleMock).toHaveBeenCalledWith({
      workspaceInviteHash: 'testHash',
      workspacePersonalInviteToken: 'testToken',
+      billingCheckoutSession: mockBillingCheckoutSession,
    });
  });

@ -44,12 +63,15 @@ describe('useSignInWithGoogle', () => {
      signInWithGoogle: signInWithGoogleMock,
    });

-    const { result } = renderHook(() => useSignInWithGoogle());
+    const { result } = renderHook(() => useSignInWithGoogle(), {
+      wrapper: Wrapper,
+    });
    result.current.signInWithGoogle();

    expect(signInWithGoogleMock).toHaveBeenCalledWith({
      workspaceInviteHash: 'testHash',
      workspacePersonalInviteToken: undefined,
+      billingCheckoutSession: mockBillingCheckoutSession,
    });
  });
 });
--- a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/tests/useSignInWithMicrosoft.test.ts
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/tests/useSignInWithMicrosoft.test.ts
@ -1,7 +1,8 @@
-import { renderHook } from '@testing-library/react';
-import { useParams, useSearchParams } from 'react-router-dom';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { useSignInWithMicrosoft } from '@/auth/sign-in-up/hooks/useSignInWithMicrosoft';
+import { renderHook } from '@testing-library/react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';

 jest.mock('react-router-dom', () => ({
  useParams: jest.fn(),
@ -13,6 +14,17 @@ jest.mock('@/auth/hooks/useAuth', () => ({
 }));

 describe('useSignInWithMicrosoft', () => {
+  const Wrapper = getJestMetadataAndApolloMocksWrapper({
+    apolloMocks: [],
+  });
+
+  const mockBillingCheckoutSession = {
+    plan: 'PRO',
+    interval: 'Month',
+    requirePaymentMethod: true,
+    skipPlanPage: false,
+  };
+
  it('should call signInWithMicrosoft with the correct parameters', () => {
    const workspaceInviteHashMock = 'testHash';
    const inviteTokenMock = 'testToken';
@ -28,12 +40,15 @@ describe('useSignInWithMicrosoft', () => {
      signInWithMicrosoft: signInWithMicrosoftMock,
    });

-    const { result } = renderHook(() => useSignInWithMicrosoft());
+    const { result } = renderHook(() => useSignInWithMicrosoft(), {
+      wrapper: Wrapper,
+    });
    result.current.signInWithMicrosoft();

    expect(signInWithMicrosoftMock).toHaveBeenCalledWith({
      workspaceInviteHash: workspaceInviteHashMock,
      workspacePersonalInviteToken: inviteTokenMock,
+      billingCheckoutSession: mockBillingCheckoutSession,
    });
  });

@ -49,10 +64,13 @@ describe('useSignInWithMicrosoft', () => {
      signInWithMicrosoft: signInWithMicrosoftMock,
    });

-    const { result } = renderHook(() => useSignInWithMicrosoft());
+    const { result } = renderHook(() => useSignInWithMicrosoft(), {
+      wrapper: Wrapper,
+    });
    result.current.signInWithMicrosoft();

    expect(signInWithMicrosoftMock).toHaveBeenCalledWith({
+      billingCheckoutSession: mockBillingCheckoutSession,
      workspaceInviteHash: workspaceInviteHashMock,
      workspacePersonalInviteToken: undefined,
    });
--- a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInWithGoogle.ts
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInWithGoogle.ts
@ -1,15 +1,27 @@
 import { useParams, useSearchParams } from 'react-router-dom';

 import { useAuth } from '@/auth/hooks/useAuth';
+import { BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';

 export const useSignInWithGoogle = () => {
  const workspaceInviteHash = useParams().workspaceInviteHash;
  const [searchParams] = useSearchParams();
  const workspacePersonalInviteToken =
    searchParams.get('inviteToken') ?? undefined;
+  const billingCheckoutSession = {
+    plan: 'PRO',
+    interval: 'Month',
+    requirePaymentMethod: true,
+    skipPlanPage: false,
+  } as BillingCheckoutSession;
+
  const { signInWithGoogle } = useAuth();
  return {
    signInWithGoogle: () =>
-      signInWithGoogle({ workspaceInviteHash, workspacePersonalInviteToken }),
+      signInWithGoogle({
+        workspaceInviteHash,
+        workspacePersonalInviteToken,
+        billingCheckoutSession,
+      }),
  };
 };
--- a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInWithMicrosoft.ts
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInWithMicrosoft.ts
@ -1,18 +1,23 @@
 import { useParams, useSearchParams } from 'react-router-dom';

 import { useAuth } from '@/auth/hooks/useAuth';
+import { billingCheckoutSessionState } from '@/auth/states/billingCheckoutSessionState';
+import { useRecoilValue } from 'recoil';

 export const useSignInWithMicrosoft = () => {
  const workspaceInviteHash = useParams().workspaceInviteHash;
  const [searchParams] = useSearchParams();
  const workspacePersonalInviteToken =
    searchParams.get('inviteToken') ?? undefined;
+  const billingCheckoutSession = useRecoilValue(billingCheckoutSessionState);
+
  const { signInWithMicrosoft } = useAuth();
  return {
    signInWithMicrosoft: () =>
      signInWithMicrosoft({
        workspaceInviteHash,
        workspacePersonalInviteToken,
+        billingCheckoutSession,
      }),
  };
 };
--- a/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts
+++ b/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';
 import { UserExists } from '~/generated/graphql';

 export const availableSSOIdentityProvidersForAuthState = createState<
--- a/packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts
+++ b/packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts
@ -0,0 +1,39 @@
+import { BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
+import { createState } from '@ui/utilities/state/utils/createState';
+import { syncEffect } from 'recoil-sync';
+import { BillingPlanKey, SubscriptionInterval } from '~/generated/graphql';
+
+export const billingCheckoutSessionState = createState<BillingCheckoutSession>({
+  key: 'billingCheckoutSessionState',
+  defaultValue: {
+    plan: BillingPlanKey.Pro,
+    interval: SubscriptionInterval.Month,
+    requirePaymentMethod: true,
+    skipPlanPage: false,
+  },
+  effects: [
+    syncEffect({
+      refine: (value: unknown) => {
+        if (
+          typeof value === 'object' &&
+          value !== null &&
+          'plan' in value &&
+          'interval' in value &&
+          'requirePaymentMethod' in value &&
+          'skipPlanPage' in value
+        ) {
+          return {
+            type: 'success',
+            value: value as BillingCheckoutSession,
+            warnings: [],
+          } as const;
+        }
+        return {
+          type: 'failure',
+          message: 'Invalid BillingCheckoutSessionState',
+          path: [] as any,
+        } as const;
+      },
+    }),
+  ],
+});
--- a/packages/twenty-front/src/modules/auth/states/currentUserState.ts
+++ b/packages/twenty-front/src/modules/auth/states/currentUserState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { User } from '~/generated/graphql';

--- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts
+++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';

--- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts
+++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts
@ -1,5 +1,5 @@
 import { CurrentWorkspaceMember } from '@/auth/states/currentWorkspaceMemberState';
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const currentWorkspaceMembersState = createState<
  CurrentWorkspaceMember[]
--- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts
+++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { Workspace } from '~/generated/graphql';

--- a/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts
+++ b/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isCurrentUserLoadedState = createState<boolean>({
  key: 'isCurrentUserLoadedState',
--- a/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts
+++ b/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isVerifyPendingState = createState<boolean>({
  key: 'isVerifyPendingState',
--- a/packages/twenty-front/src/modules/auth/states/previousUrlState.ts
+++ b/packages/twenty-front/src/modules/auth/states/previousUrlState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const previousUrlState = createState<string>({
  key: 'previousUrlState',
--- a/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts
+++ b/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts
@ -1,5 +1,5 @@
-import { createState } from 'twenty-ui';
 import { SignInUpMode } from '@/auth/types/signInUpMode';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const signInUpModeState = createState<SignInUpMode>({
  key: 'signInUpModeState',
--- a/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts
+++ b/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export enum SignInUpStep {
  Init = 'init',
--- a/packages/twenty-front/src/modules/auth/states/tokenPairState.ts
+++ b/packages/twenty-front/src/modules/auth/states/tokenPairState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { AuthTokenPair } from '~/generated/graphql';
 import { cookieStorageEffect } from '~/utils/recoil-effects';
--- a/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts
+++ b/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';
 import { PublicWorkspaceDataOutput } from '~/generated/graphql';

 export const workspacePublicDataState =
--- a/packages/twenty-front/src/modules/auth/states/workspaces.ts
+++ b/packages/twenty-front/src/modules/auth/states/workspaces.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { Workspace } from '~/generated/graphql';

--- a/packages/twenty-front/src/modules/auth/types/billingCheckoutSession.type.ts
+++ b/packages/twenty-front/src/modules/auth/types/billingCheckoutSession.type.ts
@ -0,0 +1,9 @@
+import { SubscriptionInterval } from '~/generated-metadata/graphql';
+import { BillingPlanKey } from '~/generated/graphql';
+
+export type BillingCheckoutSession = {
+  plan: BillingPlanKey;
+  interval: SubscriptionInterval;
+  requirePaymentMethod: boolean;
+  skipPlanPage: boolean;
+};
--- a/packages/twenty-front/src/modules/billing/graphql/checkoutSession.ts
+++ b/packages/twenty-front/src/modules/billing/graphql/checkoutSession.ts
@ -4,10 +4,14 @@ export const CHECKOUT_SESSION = gql`
  mutation CheckoutSession(
    $recurringInterval: SubscriptionInterval!
    $successUrlPath: String
+    $plan: BillingPlanKey!
+    $requirePaymentMethod: Boolean!
  ) {
    checkoutSession(
      recurringInterval: $recurringInterval
      successUrlPath: $successUrlPath
+      plan: $plan
+      requirePaymentMethod: $requirePaymentMethod
    ) {
      url
    }
--- a/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts
+++ b/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const captchaTokenState = createState<string | undefined>({
  key: 'captchaTokenState',
--- a/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts
+++ b/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isCaptchaScriptLoadedState = createState<boolean>({
  key: 'isCaptchaScriptLoadedState',
--- a/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts
+++ b/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isRequestingCaptchaTokenState = createState<boolean>({
  key: 'isRequestingCaptchaTokenState',
--- a/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts
+++ b/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isLoadingTokensFromExtensionState = createState<boolean | null>({
  key: 'isLoadingTokensFromExtensionState',
--- a/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { ApiConfig } from '~/generated/graphql';

--- a/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { AuthProviders } from '~/generated/graphql';

--- a/packages/twenty-front/src/modules/client-config/states/billingState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/billingState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { Billing } from '~/generated/graphql';

--- a/packages/twenty-front/src/modules/client-config/states/captchaProviderState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/captchaProviderState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { Captcha } from '~/generated/graphql';

--- a/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const chromeExtensionIdState = createState<string | null | undefined>({
  key: 'chromeExtensionIdState',
--- a/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 type ClientConfigApiStatus = {
  isLoaded: boolean;
--- a/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isAnalyticsEnabledState = createState<boolean>({
  key: 'isAnalyticsEnabled',
--- a/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isDebugModeState = createState<boolean>({
  key: 'isDebugModeState',
--- a/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isDeveloperDefaultSignInPrefilledState = createState<boolean>({
  key: 'isDeveloperDefaultSignInPrefilledState',
--- a/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isMultiWorkspaceEnabledState = createState<boolean>({
  key: 'isMultiWorkspaceEnabled',
--- a/packages/twenty-front/src/modules/client-config/states/isSSOEnabledState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isSSOEnabledState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isSSOEnabledState = createState<boolean>({
  key: 'isSSOEnabledState',
--- a/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { Sentry } from '~/generated/graphql';

--- a/packages/twenty-front/src/modules/client-config/states/supportChatState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/supportChatState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { Support } from '~/generated/graphql';

--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts
+++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const commandMenuSearchState = createState<string>({
  key: 'command-menu/commandMenuSearchState',
--- a/packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts
+++ b/packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts
@ -1,5 +1,5 @@
 import { CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE } from '@/context-store/constants/ContextStoreInstanceIdDefaultValue';
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const mainContextStoreComponentInstanceIdState = createState<string>({
  key: 'mainContextStoreComponentInstanceIdState',
--- a/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts
+++ b/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';
 import { ClientConfig } from '~/generated/graphql';

 export const domainConfigurationState = createState<
--- a/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts
+++ b/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts
@ -1,5 +1,5 @@
+import { createState } from '@ui/utilities/state/utils/createState';
 import { cookieStorageEffect } from '~/utils/recoil-effects';
-import { createState } from 'twenty-ui';

 export const lastAuthenticatedWorkspaceDomainState = createState<
  | {
--- a/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts
+++ b/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts
@ -1,7 +1,7 @@
 import { DateFormat } from '@/localization/constants/DateFormat';
 import { TimeFormat } from '@/localization/constants/TimeFormat';
 import { detectTimeZone } from '@/localization/utils/detectTimeZone';
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const dateTimeFormatState = createState<{
  timeZone: string;
--- a/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts
+++ b/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const currentMobileNavigationDrawerState = createState<
  'main' | 'settings'
--- a/packages/twenty-front/src/modules/object-metadata/states/isAppWaitingForFreshObjectMetadataState.ts
+++ b/packages/twenty-front/src/modules/object-metadata/states/isAppWaitingForFreshObjectMetadataState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isAppWaitingForFreshObjectMetadataState = createState<boolean>({
  key: 'isAppWaitingForFreshObjectMetadataState',
--- a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts
+++ b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';

--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/states/aggregateDropdownState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/states/aggregateDropdownState.ts
@ -1,5 +1,5 @@
 import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 type AggregateOperation = {
  operation: AGGREGATE_OPERATIONS | null;
--- a/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const lastShowPageRecordIdState = createState<string | null>({
  key: 'lastShowPageRecordIdState',
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';

--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const recordIndexIsCompactModeActiveState = createState<boolean>({
  key: 'recordIndexIsCompactModeActiveState',
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts
@ -1,5 +1,5 @@
 import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export type KanbanAggregateOperation = {
  operation?: AGGREGATE_OPERATIONS | null;
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const recordIndexKanbanFieldMetadataIdState = createState<string | null>(
  {
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';

--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewFilterGroupsState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewFilterGroupsState.ts
@ -1,5 +1,5 @@
 import { ViewFilterGroup } from '@/views/types/ViewFilterGroup';
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const recordIndexViewFilterGroupsState = createState<ViewFilterGroup[]>({
  key: 'recordIndexViewFilterGroupsState',
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { ViewType } from '@/views/types/ViewType';

--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isNewViewableRecordLoadingState = createState<boolean>({
  key: 'activities/is-new-viewable-record-loading',
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const viewableRecordIdState = createState<string | null>({
  key: 'activities/viewable-record-id',
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const viewableRecordNameSingularState = createState<string | null>({
  key: 'activities/viewable-record-name-singular',
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/tests/useUpsertTableRecordInGroup.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/tests/useUpsertTableRecordInGroup.test.tsx
@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
+import { createState } from '@ui/utilities/state/utils/createState';
 import { ReactNode, act } from 'react';
 import { RecoilRoot } from 'recoil';
-import { createState } from 'twenty-ui';

 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/tests/useUpsertTableRecordNoGroup.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/tests/useUpsertTableRecordNoGroup.test.tsx
@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
+import { createState } from '@ui/utilities/state/utils/createState';
 import { ReactNode, act } from 'react';
 import { RecoilRoot } from 'recoil';
-import { createState } from 'twenty-ui';

 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
--- a/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isRemoveSortingModalOpenState = createState<boolean>({
  key: 'isRemoveSortingModalOpenState',
--- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isSoftFocusUsingMouseState = createState<boolean>({
  key: 'isSoftFocusUsingMouseState',
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/settingsPreviewRecordIdState.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/settingsPreviewRecordIdState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const settingsPreviewRecordIdState = createState<string | null>({
  key: 'settingsPreviewRecordIdState',
--- a/packages/twenty-front/src/modules/settings/developers/states/generatedApiKeyTokenState.ts
+++ b/packages/twenty-front/src/modules/settings/developers/states/generatedApiKeyTokenState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const apiKeyTokenState = createState<string | null>({
  key: 'apiKeyTokenState',
--- a/packages/twenty-front/src/modules/settings/security/states/SSOIdentitiesProvidersState.ts
+++ b/packages/twenty-front/src/modules/settings/security/states/SSOIdentitiesProvidersState.ts
@ -1,7 +1,7 @@
 /* @license Enterprise */

 import { SSOIdentityProvider } from '@/settings/security/types/SSOIdentityProvider';
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const SSOIdentitiesProvidersState = createState<
  Omit<SSOIdentityProvider, '__typename'>[]
--- a/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportDialogState.ts
+++ b/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportDialogState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { SpreadsheetImportDialogOptions } from '../types';

--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const activeDropdownFocusIdState = createState<string | null>({
  key: 'activeDropdownFocusIdState',
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const previousDropdownFocusIdState = createState<string | null>({
  key: 'previousDropdownFocusIdState',
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isRightDrawerAnimationCompletedState = createState<boolean>({
  key: 'isRightDrawerAnimationCompletedState',
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerMinimizedState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerMinimizedState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isRightDrawerMinimizedState = createState<boolean>({
  key: 'ui/layout/is-right-drawer-minimized',
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isRightDrawerOpenState = createState<boolean>({
  key: 'ui/layout/is-right-drawer-open',
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/messageThreadState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/messageThreadState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { MessageThread } from '@/activities/emails/types/MessageThread';

--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerCloseEventsState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerCloseEventsState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const rightDrawerCloseEventState = createState<Event | null>({
  key: 'rightDrawerCloseEventState',
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerHeaderDropdownButtonState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerHeaderDropdownButtonState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { RightDrawerTopBarDropdownButtons } from '@/ui/layout/right-drawer/types/RightDrawerTopBarDropdownButtons';

--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { RightDrawerPages } from '../types/RightDrawerPages';

--- a/packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const isDefaultLayoutAuthModalVisibleState = createState<boolean>({
  key: 'isDefaultLayoutAuthModalVisibleState',
--- a/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts
+++ b/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const navigationMemorizedUrlState = createState<string>({
  key: 'navigationMemorizedUrlState',
--- a/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts
+++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export type StepsState = {
  activeStep: number;
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { INITIAL_HOTKEYS_SCOPE } from '../../constants/InitialHotkeysScope';
 import { HotkeyScope } from '../../types/HotkeyScope';
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const internalHotkeysEnabledScopesState = createState<string[]>({
  key: 'internalHotkeysEnabledScopesState',
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts
@ -1,5 +1,5 @@
+import { createState } from '@ui/utilities/state/utils/createState';
 import { Keys } from 'react-hotkeys-hook/dist/types';
-import { createState } from 'twenty-ui';

 export const pendingHotkeyState = createState<Keys | null>({
  key: 'pendingHotkeyState',
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 import { HotkeyScope } from '../../types/HotkeyScope';

--- a/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const currentPageLocationState = createState<string>({
  key: 'currentPageLocationState',
--- a/packages/twenty-front/src/modules/workflow/states/openOverrideWorkflowDraftConfirmationModalState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/openOverrideWorkflowDraftConfirmationModalState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const openOverrideWorkflowDraftConfirmationModalState =
  createState<boolean>({
--- a/packages/twenty-front/src/modules/workflow/states/workflowCreateStepFromParentStepIdState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/workflowCreateStepFromParentStepIdState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const workflowCreateStepFromParentStepIdState = createState<
  string | undefined
--- a/packages/twenty-front/src/modules/workflow/states/workflowDiagramState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/workflowDiagramState.ts
@ -1,5 +1,5 @@
 import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram';
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const workflowDiagramState = createState<WorkflowDiagram | undefined>({
  key: 'workflowDiagramState',
--- a/packages/twenty-front/src/modules/workflow/states/workflowDiagramTriggerNodeSelectionState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/workflowDiagramTriggerNodeSelectionState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const workflowDiagramTriggerNodeSelectionState = createState<
  string | undefined
--- a/packages/twenty-front/src/modules/workflow/states/workflowIdState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/workflowIdState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const workflowIdState = createState<string | undefined>({
  key: 'workflowIdState',
--- a/packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts
@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from '@ui/utilities/state/utils/createState';

 export const workflowLastCreatedStepIdState = createState<string | undefined>({
  key: 'workflowLastCreatedStepIdState',
--- a/Show More
+++ b/Show More