From ac072b282ebc0d6fae7120f8645839889fa07b65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs=20Guigon?= <guigon.thais@gmail.com>
Date: Wed, 20 Mar 2024 18:05:27 +0100
Subject: [PATCH 1/3] feat: add Active and Add integration card displays

Closes #4541
---
 .../SettingsIntegrationComponent.tsx          | 53 +++++++++++++-----
 .../components/SettingsIntegrationGroup.tsx   | 54 ++++++++++---------
 .../constants/MockRemoteDatabases.ts          | 10 ++++
 .../constants/SettingsIntegrationRequest.ts   |  2 +-
 .../constants/SettingsIntegrationWindmill.ts  |  2 +-
 .../constants/SettingsIntegrationZapier.ts    |  2 +-
 .../hooks/useSettingsIntegrationCategories.ts | 35 ++++++++++++
 .../integrations/types/SettingsIntegration.ts |  7 ++-
 .../types/SettingsIntegrationCategory.ts      |  2 +-
 .../utils/getSettingsIntegrationAll.ts        | 44 +++++++++++++++
 .../SettingsIntegrationDetail.tsx             | 30 +++++------
 .../integrations/SettingsIntegrations.tsx     | 10 ++--
 .../constants/SettingsIntegrationAll.ts       | 26 ---------
 .../SettingsIntegrationCategories.ts          | 12 -----
 14 files changed, 187 insertions(+), 102 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/settings/integrations/constants/MockRemoteDatabases.ts
 rename packages/twenty-front/src/{pages => modules}/settings/integrations/constants/SettingsIntegrationRequest.ts (82%)
 rename packages/twenty-front/src/{pages => modules}/settings/integrations/constants/SettingsIntegrationWindmill.ts (81%)
 rename packages/twenty-front/src/{pages => modules}/settings/integrations/constants/SettingsIntegrationZapier.ts (93%)
 create mode 100644 packages/twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts
 rename packages/twenty-front/src/{pages => modules}/settings/integrations/types/SettingsIntegration.ts (69%)
 rename packages/twenty-front/src/{pages => modules}/settings/integrations/types/SettingsIntegrationCategory.ts (64%)
 create mode 100644 packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts
 delete mode 100644 packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationAll.ts
 delete mode 100644 packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationCategories.ts

diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx
index be6596f6d100..333ebef11e08 100644
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx
@@ -1,9 +1,13 @@
+import { useNavigate } from 'react-router-dom';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Pill } from 'twenty-ui';
 
-import { IconArrowUpRight, IconBolt } from '@/ui/display/icon';
+import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
+import { IconArrowUpRight, IconBolt, IconPlus } from '@/ui/display/icon';
+import { Status } from '@/ui/display/status/components/Status';
 import { Button } from '@/ui/input/button/components/Button';
-import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
+import { isDefined } from '~/utils/isDefined';
 
 interface SettingsIntegrationComponentProps {
   integration: SettingsIntegration;
@@ -19,6 +23,12 @@ const StyledContainer = styled.div`
   flex-direction: row;
   justify-content: space-between;
   padding: ${({ theme }) => theme.spacing(3)};
+
+  ${({ onClick }) =>
+    isDefined(onClick) &&
+    css`
+      cursor: pointer;
+    `}
 `;
 
 const StyledSection = styled.div`
@@ -48,33 +58,52 @@ const StyledLogo = styled.img`
 export const SettingsIntegrationComponent = ({
   integration,
 }: SettingsIntegrationComponentProps) => {
-  const openLinkInTab = (link: string) => {
-    window.open(link);
-  };
+  const navigate = useNavigate();
+
+  const navigateToIntegrationPage = () => navigate(integration.link);
+  const openExternalLink = () => window.open(integration.link);
 
   return (
-    <StyledContainer>
+    <StyledContainer
+      onClick={
+        integration.type === 'Active' ? navigateToIntegrationPage : undefined
+      }
+    >
       <StyledSection>
         <StyledIntegrationLogo>
           <StyledLogo src={integration.from.image} alt={integration.from.key} />
-          {integration.to ? (
+          {isDefined(integration.to) && (
             <>
               <div>→</div>
               <StyledLogo src={integration.to.image} alt={integration.to.key} />
             </>
-          ) : (
-            <></>
           )}
         </StyledIntegrationLogo>
         {integration.text}
       </StyledSection>
       {integration.type === 'Soon' ? (
         <StyledSoonPill label="Soon" />
+      ) : integration.type === 'Active' ? (
+        <Status color="green" text="Active" />
+      ) : integration.type === 'Add' ? (
+        <Button
+          onClick={navigateToIntegrationPage}
+          Icon={IconPlus}
+          title="Add"
+          size="small"
+        />
+      ) : integration.type === 'Use' ? (
+        <Button
+          onClick={openExternalLink}
+          Icon={IconBolt}
+          title="Use"
+          size="small"
+        />
       ) : (
         <Button
-          onClick={() => openLinkInTab(integration.link)}
-          Icon={integration.type === 'Goto' ? IconArrowUpRight : IconBolt}
-          title={integration.type === 'Goto' ? integration.linkText : 'Use'}
+          onClick={openExternalLink}
+          Icon={IconArrowUpRight}
+          title={integration.linkText}
           size="small"
         />
       )}
diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx
index 8c85abb46733..7dab165dfc52 100644
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx
@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 
 import { SettingsIntegrationComponent } from '@/settings/integrations/components/SettingsIntegrationComponent';
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
-import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
 
 interface SettingsIntegrationGroupProps {
   integrationGroup: SettingsIntegrationCategory;
@@ -33,28 +33,30 @@ const StyledIntegrationsSection = styled.div`
 
 export const SettingsIntegrationGroup = ({
   integrationGroup,
-}: SettingsIntegrationGroupProps) => {
-  const openLinkInTab = (link: string) => {
-    window.open(link);
-  };
-  return (
-    <Section>
-      <StyledIntegrationGroupHeader>
-        <H2Title title={integrationGroup.title} />
-        {integrationGroup.hyperlink && (
-          <StyledGroupLink
-            onClick={() => openLinkInTab(integrationGroup.hyperlink ?? '')}
-          >
-            <div>{integrationGroup.hyperlinkText}</div>
-            <div>→</div>
-          </StyledGroupLink>
-        )}
-      </StyledIntegrationGroupHeader>
-      <StyledIntegrationsSection>
-        {integrationGroup.integrations.map((integration) => {
-          return <SettingsIntegrationComponent integration={integration} />;
-        })}
-      </StyledIntegrationsSection>
-    </Section>
-  );
-};
+}: SettingsIntegrationGroupProps) => (
+  <Section>
+    <StyledIntegrationGroupHeader>
+      <H2Title title={integrationGroup.title} />
+      {integrationGroup.hyperlink && (
+        <StyledGroupLink
+          onClick={() => window.open(integrationGroup.hyperlink ?? '')}
+        >
+          <div>{integrationGroup.hyperlinkText}</div>
+          <div>→</div>
+        </StyledGroupLink>
+      )}
+    </StyledIntegrationGroupHeader>
+    <StyledIntegrationsSection>
+      {integrationGroup.integrations.map((integration) => (
+        <SettingsIntegrationComponent
+          key={[
+            integrationGroup.key,
+            integration.from.key,
+            integration.to?.key,
+          ].join('-')}
+          integration={integration}
+        />
+      ))}
+    </StyledIntegrationsSection>
+  </Section>
+);
diff --git a/packages/twenty-front/src/modules/settings/integrations/constants/MockRemoteDatabases.ts b/packages/twenty-front/src/modules/settings/integrations/constants/MockRemoteDatabases.ts
new file mode 100644
index 000000000000..d15c6cbd95bb
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/integrations/constants/MockRemoteDatabases.ts
@@ -0,0 +1,10 @@
+export const MOCK_REMOTE_DATABASES = [
+  {
+    name: 'airtable',
+    isActive: false,
+  },
+  {
+    name: 'postgresql',
+    isActive: true,
+  },
+];
diff --git a/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationRequest.ts b/packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationRequest.ts
similarity index 82%
rename from packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationRequest.ts
rename to packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationRequest.ts
index 084959da0562..11efc0dc655c 100644
--- a/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationRequest.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationRequest.ts
@@ -1,4 +1,4 @@
-import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
 
 export const SETTINGS_INTEGRATION_REQUEST_CATEGORY: SettingsIntegrationCategory =
   {
diff --git a/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationWindmill.ts b/packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationWindmill.ts
similarity index 81%
rename from packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationWindmill.ts
rename to packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationWindmill.ts
index 45452a6b4c6f..2dc540a8747b 100644
--- a/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationWindmill.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationWindmill.ts
@@ -1,4 +1,4 @@
-import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
 
 export const SETTINGS_INTEGRATION_WINDMILL_CATEGORY: SettingsIntegrationCategory =
   {
diff --git a/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationZapier.ts b/packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationZapier.ts
similarity index 93%
rename from packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationZapier.ts
rename to packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationZapier.ts
index a331d819a20b..88fd03a49c10 100644
--- a/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationZapier.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationZapier.ts
@@ -1,4 +1,4 @@
-import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
 
 export const SETTINGS_INTEGRATION_ZAPIER_CATEGORY: SettingsIntegrationCategory =
   {
diff --git a/packages/twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts b/packages/twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts
new file mode 100644
index 000000000000..6f90b54a556b
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts
@@ -0,0 +1,35 @@
+import { MOCK_REMOTE_DATABASES } from '@/settings/integrations/constants/MockRemoteDatabases';
+import { SETTINGS_INTEGRATION_REQUEST_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationRequest';
+import { SETTINGS_INTEGRATION_WINDMILL_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationWindmill';
+import { SETTINGS_INTEGRATION_ZAPIER_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationZapier';
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
+import { getSettingsIntegrationAll } from '@/settings/integrations/utils/getSettingsIntegrationAll';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+
+export const useSettingsIntegrationCategories =
+  (): SettingsIntegrationCategory[] => {
+    const isAirtableIntegrationEnabled = useIsFeatureEnabled(
+      'IS_AIRTABLE_INTEGRATION_ENABLED',
+    );
+    const isAirtableIntegrationActive = !!MOCK_REMOTE_DATABASES.find(
+      ({ name }) => name === 'airtable',
+    )?.isActive;
+    const isPostgresqlIntegrationEnabled = useIsFeatureEnabled(
+      'IS_POSTGRESQL_INTEGRATION_ENABLED',
+    );
+    const isPostgresqlIntegrationActive = !!MOCK_REMOTE_DATABASES.find(
+      ({ name }) => name === 'postgresql',
+    )?.isActive;
+
+    return [
+      getSettingsIntegrationAll({
+        isAirtableIntegrationEnabled,
+        isAirtableIntegrationActive,
+        isPostgresqlIntegrationEnabled,
+        isPostgresqlIntegrationActive,
+      }),
+      SETTINGS_INTEGRATION_ZAPIER_CATEGORY,
+      SETTINGS_INTEGRATION_WINDMILL_CATEGORY,
+      SETTINGS_INTEGRATION_REQUEST_CATEGORY,
+    ];
+  };
diff --git a/packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegration.ts b/packages/twenty-front/src/modules/settings/integrations/types/SettingsIntegration.ts
similarity index 69%
rename from packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegration.ts
rename to packages/twenty-front/src/modules/settings/integrations/types/SettingsIntegration.ts
index 74db21aa4974..0855a9b49d41 100644
--- a/packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegration.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/types/SettingsIntegration.ts
@@ -1,4 +1,9 @@
-export type SettingsIntegrationType = 'Use' | 'Goto' | 'Soon';
+export type SettingsIntegrationType =
+  | 'Active'
+  | 'Add'
+  | 'Goto'
+  | 'Soon'
+  | 'Use';
 
 export type SettingsIntegration = {
   from: { key: string; image: string };
diff --git a/packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegrationCategory.ts b/packages/twenty-front/src/modules/settings/integrations/types/SettingsIntegrationCategory.ts
similarity index 64%
rename from packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegrationCategory.ts
rename to packages/twenty-front/src/modules/settings/integrations/types/SettingsIntegrationCategory.ts
index 1bf38ec35c33..c2369f89e524 100644
--- a/packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegrationCategory.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/types/SettingsIntegrationCategory.ts
@@ -1,4 +1,4 @@
-import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
+import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
 
 export type SettingsIntegrationCategory = {
   key: string;
diff --git a/packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts b/packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts
new file mode 100644
index 000000000000..c3e51f7c6f58
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts
@@ -0,0 +1,44 @@
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
+
+export const getSettingsIntegrationAll = ({
+  isAirtableIntegrationEnabled,
+  isAirtableIntegrationActive,
+  isPostgresqlIntegrationEnabled,
+  isPostgresqlIntegrationActive,
+}: {
+  isAirtableIntegrationEnabled: boolean;
+  isAirtableIntegrationActive: boolean;
+  isPostgresqlIntegrationEnabled: boolean;
+  isPostgresqlIntegrationActive: boolean;
+}): SettingsIntegrationCategory => ({
+  key: 'all',
+  title: 'All',
+  integrations: [
+    {
+      from: {
+        key: 'airtable',
+        image: '/images/integrations/airtable-logo.png',
+      },
+      type: !isAirtableIntegrationEnabled
+        ? 'Soon'
+        : isAirtableIntegrationActive
+          ? 'Active'
+          : 'Add',
+      text: 'Airtable',
+      link: '/settings/integrations/airtable',
+    },
+    {
+      from: {
+        key: 'postgresql',
+        image: '/images/integrations/postgresql-logo.png',
+      },
+      type: !isPostgresqlIntegrationEnabled
+        ? 'Soon'
+        : isPostgresqlIntegrationActive
+          ? 'Active'
+          : 'Add',
+      text: 'PostgreSQL',
+      link: '/settings/integrations/postgresql',
+    },
+  ],
+});
diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
index 1a7a1b016138..bbbbd72a11af 100644
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
@@ -2,19 +2,21 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
 import { AppPath } from '@/types/AppPath';
 import { IconSettings } from '@/ui/display/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { SETTINGS_INTEGRATION_ALL_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationAll';
 
 export const SettingsIntegrationDetail = () => {
   const { integrationKey = '' } = useParams();
   const navigate = useNavigate();
-  const integrationLabel = SETTINGS_INTEGRATION_ALL_CATEGORY.integrations.find(
+
+  const [integrationCategoryAll] = useSettingsIntegrationCategories();
+  const integration = integrationCategoryAll.integrations.find(
     ({ from: { key } }) => key === integrationKey,
-  )?.text;
+  );
 
   const isAirtableIntegrationEnabled = useIsFeatureEnabled(
     'IS_AIRTABLE_INTEGRATION_ENABLED',
@@ -23,23 +25,17 @@ export const SettingsIntegrationDetail = () => {
     'IS_POSTGRESQL_INTEGRATION_ENABLED',
   );
   const isIntegrationAvailable =
-    (integrationKey === 'airtable' && isAirtableIntegrationEnabled) ||
-    (integrationKey === 'postgresql' && isPostgresqlIntegrationEnabled);
+    !!integration &&
+    ((integrationKey === 'airtable' && isAirtableIntegrationEnabled) ||
+      (integrationKey === 'postgresql' && isPostgresqlIntegrationEnabled));
 
   useEffect(() => {
-    if (!integrationLabel || !isIntegrationAvailable) {
-      return navigate(AppPath.NotFound);
+    if (!isIntegrationAvailable) {
+      navigate(AppPath.NotFound);
     }
-  }, [
-    integrationLabel,
-    integrationKey,
-    isAirtableIntegrationEnabled,
-    isIntegrationAvailable,
-    isPostgresqlIntegrationEnabled,
-    navigate,
-  ]);
+  }, [integration, integrationKey, navigate, isIntegrationAvailable]);
 
-  if (!integrationLabel || !isIntegrationAvailable) return null;
+  if (!isIntegrationAvailable) return null;
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -47,7 +43,7 @@ export const SettingsIntegrationDetail = () => {
         <Breadcrumb
           links={[
             { children: 'Integrations', href: '/settings/integrations' },
-            { children: integrationLabel },
+            { children: integration.text },
           ]}
         />
       </SettingsPageContainer>
diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx
index 495f3a90ec5a..ee7d85164d8f 100644
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx
@@ -1,18 +1,20 @@
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsIntegrationGroup } from '@/settings/integrations/components/SettingsIntegrationGroup';
+import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
 import { IconSettings } from '@/ui/display/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
-import { SETTINGS_INTEGRATION_CATEGORIES } from '~/pages/settings/integrations/constants/SettingsIntegrationCategories';
 
 export const SettingsIntegrations = () => {
+  const integrationCategories = useSettingsIntegrationCategories();
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
         <Breadcrumb links={[{ children: 'Integrations' }]} />
-        {SETTINGS_INTEGRATION_CATEGORIES.map((group) => {
-          return <SettingsIntegrationGroup integrationGroup={group} />;
-        })}
+        {integrationCategories.map((group) => (
+          <SettingsIntegrationGroup key={group.key} integrationGroup={group} />
+        ))}
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );
diff --git a/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationAll.ts b/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationAll.ts
deleted file mode 100644
index 3c4d650d8723..000000000000
--- a/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationAll.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
-
-export const SETTINGS_INTEGRATION_ALL_CATEGORY: SettingsIntegrationCategory = {
-  key: 'all',
-  title: 'All',
-  integrations: [
-    {
-      from: {
-        key: 'airtable',
-        image: '/images/integrations/airtable-logo.png',
-      },
-      type: 'Soon',
-      text: 'Airtable',
-      link: '/settings/integrations/airtable',
-    },
-    {
-      from: {
-        key: 'postgresql',
-        image: '/images/integrations/postgresql-logo.png',
-      },
-      type: 'Soon',
-      text: 'PostgreSQL',
-      link: '/settings/integrations/postgresql',
-    },
-  ],
-};
diff --git a/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationCategories.ts b/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationCategories.ts
deleted file mode 100644
index d13ea9334e97..000000000000
--- a/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationCategories.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { SETTINGS_INTEGRATION_ALL_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationAll';
-import { SETTINGS_INTEGRATION_REQUEST_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationRequest';
-import { SETTINGS_INTEGRATION_WINDMILL_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationWindmill';
-import { SETTINGS_INTEGRATION_ZAPIER_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationZapier';
-import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
-
-export const SETTINGS_INTEGRATION_CATEGORIES: SettingsIntegrationCategory[] = [
-  SETTINGS_INTEGRATION_ALL_CATEGORY,
-  SETTINGS_INTEGRATION_ZAPIER_CATEGORY,
-  SETTINGS_INTEGRATION_WINDMILL_CATEGORY,
-  SETTINGS_INTEGRATION_REQUEST_CATEGORY,
-];

From f097e9ff93a509cb703ec291badcf3f5cc70827a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs=20Guigon?= <guigon.thais@gmail.com>
Date: Mon, 25 Mar 2024 18:33:31 +0100
Subject: [PATCH 2/3] docs: add PaymentSuccess page stories

---
 ....stories.tsx => PasswordReset.stories.tsx} |  0
 .../__stories__/PaymentSuccess.stories.tsx    | 48 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 rename packages/twenty-front/src/pages/auth/__stories__/{PasswordResert.stories.tsx => PasswordReset.stories.tsx} (100%)
 create mode 100644 packages/twenty-front/src/pages/auth/__stories__/PaymentSuccess.stories.tsx

diff --git a/packages/twenty-front/src/pages/auth/__stories__/PasswordResert.stories.tsx b/packages/twenty-front/src/pages/auth/__stories__/PasswordReset.stories.tsx
similarity index 100%
rename from packages/twenty-front/src/pages/auth/__stories__/PasswordResert.stories.tsx
rename to packages/twenty-front/src/pages/auth/__stories__/PasswordReset.stories.tsx
diff --git a/packages/twenty-front/src/pages/auth/__stories__/PaymentSuccess.stories.tsx b/packages/twenty-front/src/pages/auth/__stories__/PaymentSuccess.stories.tsx
new file mode 100644
index 000000000000..dec1d3e81629
--- /dev/null
+++ b/packages/twenty-front/src/pages/auth/__stories__/PaymentSuccess.stories.tsx
@@ -0,0 +1,48 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
+import { graphql, HttpResponse } from 'msw';
+
+import { AppPath } from '@/types/AppPath';
+import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
+
+import { PaymentSuccess } from '../PaymentSuccess';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Auth/PaymentSuccess',
+  component: PaymentSuccess,
+  decorators: [PageDecorator],
+  args: { routePath: AppPath.PlanRequiredSuccess },
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+          return HttpResponse.json({
+            data: {
+              currentUser: mockedOnboardingUsersData[0],
+            },
+          });
+        }),
+        graphqlMocks.handlers,
+      ],
+    },
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof PaymentSuccess>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Start');
+  },
+};

From e5fab8c9df4680dc312d33d766724851282c396d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs=20Guigon?= <guigon.thais@gmail.com>
Date: Mon, 25 Mar 2024 18:47:31 +0100
Subject: [PATCH 3/3] refactor: move page components

---
 packages/twenty-front/src/App.tsx                     | 11 +++++++----
 packages/twenty-front/src/DefaultPageTitle.tsx        | 11 -----------
 .../auth => modules/auth/components}/VerifyEffect.tsx |  0
 3 files changed, 7 insertions(+), 15 deletions(-)
 delete mode 100644 packages/twenty-front/src/DefaultPageTitle.tsx
 rename packages/twenty-front/src/{pages/auth => modules/auth/components}/VerifyEffect.tsx (100%)

diff --git a/packages/twenty-front/src/App.tsx b/packages/twenty-front/src/App.tsx
index 9dc41e7f70f2..20a769b99d23 100644
--- a/packages/twenty-front/src/App.tsx
+++ b/packages/twenty-front/src/App.tsx
@@ -1,11 +1,12 @@
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, useLocation } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 
+import { VerifyEffect } from '@/auth/components/VerifyEffect';
 import { billingState } from '@/client-config/states/billingState.ts';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { DefaultLayout } from '@/ui/layout/page/DefaultLayout';
-import { DefaultPageTitle } from '~/DefaultPageTitle';
+import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
 import { CommandMenuEffect } from '~/effect-components/CommandMenuEffect';
 import { GotoHotkeysEffect } from '~/effect-components/GotoHotkeysEffect';
 import { ChooseYourPlan } from '~/pages/auth/ChooseYourPlan.tsx';
@@ -14,7 +15,6 @@ import { CreateWorkspace } from '~/pages/auth/CreateWorkspace';
 import { PasswordReset } from '~/pages/auth/PasswordReset';
 import { PaymentSuccess } from '~/pages/auth/PaymentSuccess.tsx';
 import { SignInUp } from '~/pages/auth/SignInUp';
-import { VerifyEffect } from '~/pages/auth/VerifyEffect';
 import { DefaultHomePage } from '~/pages/DefaultHomePage';
 import { ImpersonateEffect } from '~/pages/impersonate/ImpersonateEffect';
 import { NotFound } from '~/pages/not-found/NotFound';
@@ -46,13 +46,16 @@ import { SettingsProfile } from '~/pages/settings/SettingsProfile';
 import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace';
 import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMembers';
 import { Tasks } from '~/pages/tasks/Tasks';
+import { getPageTitleFromPath } from '~/utils/title-utils';
 
 export const App = () => {
   const billing = useRecoilValue(billingState);
+  const { pathname } = useLocation();
+  const pageTitle = getPageTitleFromPath(pathname);
 
   return (
     <>
-      <DefaultPageTitle />
+      <PageTitle title={pageTitle} />
       <GotoHotkeysEffect />
       <CommandMenuEffect />
       <DefaultLayout>
diff --git a/packages/twenty-front/src/DefaultPageTitle.tsx b/packages/twenty-front/src/DefaultPageTitle.tsx
deleted file mode 100644
index 87b3c17f0b60..000000000000
--- a/packages/twenty-front/src/DefaultPageTitle.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useLocation } from 'react-router-dom';
-
-import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
-import { getPageTitleFromPath } from '~/utils/title-utils';
-
-export const DefaultPageTitle = () => {
-  const { pathname } = useLocation();
-  const pageTitle = getPageTitleFromPath(pathname);
-
-  return <PageTitle title={pageTitle} />;
-};
diff --git a/packages/twenty-front/src/pages/auth/VerifyEffect.tsx b/packages/twenty-front/src/modules/auth/components/VerifyEffect.tsx
similarity index 100%
rename from packages/twenty-front/src/pages/auth/VerifyEffect.tsx
rename to packages/twenty-front/src/modules/auth/components/VerifyEffect.tsx