Merge branch 'main' into 7417-workflows-i-can-send-emails-using-the-e…

…mail-account

packages/twenty-emails/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-emails",
-  "version": "0.31.0-canary",
+  "version": "0.31.0",
   "description": "",
   "author": "",
   "private": true,

packages/twenty-front/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-front",
-  "version": "0.31.0-canary",
+  "version": "0.31.0",
   "private": true,
   "type": "module",
   "scripts": {

packages/twenty-front/src/__stories__/App.stories.tsx → packages/twenty-front/src/__stories__/AppRouter.stories.tsx

@@ -1,8 +1,8 @@
-import { HelmetProvider } from 'react-helmet-async';
 import { getOperationName } from '@apollo/client/utilities';
 import { jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { graphql, HttpResponse } from 'msw';
+import { HelmetProvider } from 'react-helmet-async';
 import { RecoilRoot } from 'recoil';
 import { IconsProvider } from 'twenty-ui';
 
@@ -11,13 +11,14 @@ import indexAppPath from '@/navigation/utils/indexAppPath';
 import { AppPath } from '@/types/AppPath';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
-import { App } from '~/App';
+
+import { AppRouter } from '@/app/components/AppRouter';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedUserData } from '~/testing/mock-data/users';
 
-const meta: Meta<typeof App> = {
-  title: 'App/App',
-  component: App,
+const meta: Meta<typeof AppRouter> = {
+  title: 'App/AppRouter',
+  component: AppRouter,
   decorators: [
     (Story) => {
       return (
@@ -41,7 +42,7 @@ const meta: Meta<typeof App> = {
 };
 
 export default meta;
-export type Story = StoryObj<typeof App>;
+export type Story = StoryObj<typeof AppRouter>;
 
 export const Default: Story = {
   play: async () => {

packages/twenty-front/src/index.tsx

@@ -1,42 +1,13 @@
 import ReactDOM from 'react-dom/client';
-import { HelmetProvider } from 'react-helmet-async';
-import { RecoilRoot } from 'recoil';
-import { IconsProvider } from 'twenty-ui';
-
-import { CaptchaProvider } from '@/captcha/components/CaptchaProvider';
-import { ApolloDevLogEffect } from '@/debug/components/ApolloDevLogEffect';
-import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver';
-import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
-import { ExceptionHandlerProvider } from '@/error-handler/components/ExceptionHandlerProvider';
-import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 
 import '@emotion/react';
 
-import { App } from './App';
-
-import './index.css';
+import { App } from '@/app/components/App';
 import 'react-loading-skeleton/dist/skeleton.css';
+import './index.css';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') ?? document.body,
 );
 
-root.render(
-  <RecoilRoot>
-    <AppErrorBoundary>
-      <CaptchaProvider>
-        <RecoilDebugObserverEffect />
-        <ApolloDevLogEffect />
-        <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-          <IconsProvider>
-            <ExceptionHandlerProvider>
-              <HelmetProvider>
-                <App />
-              </HelmetProvider>
-            </ExceptionHandlerProvider>
-          </IconsProvider>
-        </SnackBarProviderScope>
-      </CaptchaProvider>
-    </AppErrorBoundary>
-  </RecoilRoot>,
-);
+root.render(<App />);

packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts

@@ -67,8 +67,8 @@ export const useOpenCreateActivityDrawer = ({
     targetableObjects: ActivityTargetableObject[];
     customAssignee?: WorkspaceMember;
   }) => {
-    openRightDrawer(RightDrawerPages.ViewRecord);
     setIsNewViewableRecordLoading(true);
+    openRightDrawer(RightDrawerPages.ViewRecord);
     setViewableRecordId(null);
     setViewableRecordNameSingular(activityObjectNameSingular);
 

packages/twenty-front/src/modules/app/components/App.tsx

@@ -0,0 +1,32 @@
+import { AppRouter } from '@/app/components/AppRouter';
+import { CaptchaProvider } from '@/captcha/components/CaptchaProvider';
+import { ApolloDevLogEffect } from '@/debug/components/ApolloDevLogEffect';
+import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver';
+import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
+import { ExceptionHandlerProvider } from '@/error-handler/components/ExceptionHandlerProvider';
+import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
+import { HelmetProvider } from 'react-helmet-async';
+import { RecoilRoot } from 'recoil';
+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>
+    </RecoilRoot>
+  );
+};

packages/twenty-front/src/modules/app/components/AppRouter.tsx

@@ -0,0 +1,27 @@
+import { createAppRouter } from '@/app/utils/createAppRouter';
+import { billingState } from '@/client-config/states/billingState';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { RouterProvider } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+
+export const AppRouter = () => {
+  const billing = useRecoilValue(billingState);
+  const isFreeAccessEnabled = useIsFeatureEnabled('IS_FREE_ACCESS_ENABLED');
+  const isCRMMigrationEnabled = useIsFeatureEnabled('IS_CRM_MIGRATION_ENABLED');
+  const isServerlessFunctionSettingsEnabled = useIsFeatureEnabled(
+    'IS_FUNCTION_SETTINGS_ENABLED',
+  );
+
+  const isBillingPageEnabled =
+    billing?.isBillingEnabled && !isFreeAccessEnabled;
+
+  return (
+    <RouterProvider
+      router={createAppRouter(
+        isBillingPageEnabled,
+        isCRMMigrationEnabled,
+        isServerlessFunctionSettingsEnabled,
+      )}
+    />
+  );
+};