Add stripe connection option (#5372)

- Refactor creation and edition form so it handles stripe integration
and not only postgres
- Add a hook `useIsSettingsIntegrationEnabled` to avoid checking feature
flags everywhere
- Add zod schema for stripe

<img width="250" alt="Capture d’écran 2024-05-13 à 12 41 52"
src="https://github.com/twentyhq/twenty/assets/22936103/a77e7278-5d79-4f95-bddb-ae9ddd1426eb">
<img width="250" alt="Capture d’écran 2024-05-13 à 12 41 59"
src="https://github.com/twentyhq/twenty/assets/22936103/d617dc6a-31a4-43c8-8192-dbfb7157de1c">
<img width="250" alt="Capture d’écran 2024-05-13 à 12 42 08"
src="https://github.com/twentyhq/twenty/assets/22936103/c4e2d0e4-f826-436d-89be-4d1679a27861">

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

packages/twenty-front/src/modules/settings/integrations/utils/getConnectionDbName.ts

@@ -9,7 +9,13 @@ type GetConnectionDbNameParams = {
 export const getConnectionDbName = ({
   integration,
   connection,
-}: GetConnectionDbNameParams) =>
-  integration.from.key === 'postgresql'
-    ? connection.foreignDataWrapperOptions?.dbname
-    : '';
+}: GetConnectionDbNameParams) => {
+  switch (integration.from.key) {
+    case 'postgresql':
+      return connection.foreignDataWrapperOptions?.dbname;
+    case 'stripe':
+      return connection.id;
+    default:
+      return '';
+  }
+};

packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts

@@ -5,11 +5,15 @@ export const getSettingsIntegrationAll = ({
   isAirtableIntegrationActive,
   isPostgresqlIntegrationEnabled,
   isPostgresqlIntegrationActive,
+  isStripeIntegrationEnabled,
+  isStripeIntegrationActive,
 }: {
   isAirtableIntegrationEnabled: boolean;
   isAirtableIntegrationActive: boolean;
   isPostgresqlIntegrationEnabled: boolean;
   isPostgresqlIntegrationActive: boolean;
+  isStripeIntegrationEnabled: boolean;
+  isStripeIntegrationActive: boolean;
 }): SettingsIntegrationCategory => ({
   key: 'all',
   title: 'All',
@@ -40,5 +44,18 @@ export const getSettingsIntegrationAll = ({
       text: 'PostgreSQL',
       link: '/settings/integrations/postgresql',
     },
+    {
+      from: {
+        key: 'stripe',
+        image: '/images/integrations/stripe-logo.png',
+      },
+      type: !isStripeIntegrationEnabled
+        ? 'Soon'
+        : isStripeIntegrationActive
+          ? 'Active'
+          : 'Add',
+      text: 'Stripe',
+      link: '/settings/integrations/stripe',
+    },
   ],
 });