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/database-connection/components/SettingsIntegrationDatabaseConnectionForm.tsx

@@ -17,6 +17,14 @@ type SettingsIntegrationPostgreSQLConnectionFormValues = z.infer<
   typeof settingsIntegrationPostgreSQLConnectionFormSchema
 >;
 
+export const settingsIntegrationStripeConnectionFormSchema = z.object({
+  api_key: z.string().min(1),
+});
+
+type SettingsIntegrationStripeConnectionFormValues = z.infer<
+  typeof settingsIntegrationStripeConnectionFormSchema
+>;
+
 const StyledInputsContainer = styled.div`
   display: grid;
   gap: ${({ theme }) => theme.spacing(2, 4)};
@@ -31,19 +39,35 @@ const StyledInputsContainer = styled.div`
   }
 `;
 
-type SettingsIntegrationPostgreSQLConnectionFormProps = {
+type SettingsIntegrationDatabaseConnectionFormProps = {
+  databaseKey: string;
   disabled?: boolean;
 };
 
-export const SettingsIntegrationPostgreSQLConnectionForm = ({
-  disabled,
-}: SettingsIntegrationPostgreSQLConnectionFormProps) => {
-  const { control } =
-    useFormContext<SettingsIntegrationPostgreSQLConnectionFormValues>();
+type SettingsIntegrationConnectionFormValues =
+  | SettingsIntegrationPostgreSQLConnectionFormValues
+  | SettingsIntegrationStripeConnectionFormValues;
 
-  return (
-    <StyledInputsContainer>
-      {[
+const getFormFields = (
+  databaseKey: string,
+):
+  | {
+      name:
+        | 'dbname'
+        | 'host'
+        | 'port'
+        | 'user'
+        | 'password'
+        | 'schema'
+        | 'api_key';
+      label: string;
+      type?: string;
+      placeholder: string;
+    }[]
+  | null => {
+  switch (databaseKey) {
+    case 'postgresql':
+      return [
         {
           name: 'dbname' as const,
           label: 'Database Name',
@@ -63,7 +87,28 @@ export const SettingsIntegrationPostgreSQLConnectionForm = ({
           placeholder: '••••••',
         },
         { name: 'schema' as const, label: 'Schema', placeholder: 'public' },
-      ].map(({ name, label, type, placeholder }) => (
+      ];
+    case 'stripe':
+      return [
+        { name: 'api_key' as const, label: 'API Key', placeholder: 'API key' },
+      ];
+    default:
+      return null;
+  }
+};
+
+export const SettingsIntegrationDatabaseConnectionForm = ({
+  databaseKey,
+  disabled,
+}: SettingsIntegrationDatabaseConnectionFormProps) => {
+  const { control } = useFormContext<SettingsIntegrationConnectionFormValues>();
+  const formFields = getFormFields(databaseKey);
+
+  if (!formFields) return null;
+
+  return (
+    <StyledInputsContainer>
+      {formFields.map(({ name, label, type, placeholder }) => (
         <Controller
           key={name}
           name={name}
@@ -71,7 +116,7 @@ export const SettingsIntegrationPostgreSQLConnectionForm = ({
           render={({ field: { onChange, value } }) => {
             return (
               <TextInput
-                autoComplete="new-password"
+                autoComplete="new-password" // Disable autocomplete
                 label={label}
                 value={value}
                 onChange={onChange}

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx

@@ -8,7 +8,7 @@ import { z } from 'zod';
 import { useUpdateOneDatabaseConnection } from '@/databases/hooks/useUpdateOneDatabaseConnection';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
-import { SettingsIntegrationPostgreSQLConnectionForm } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm';
+import { SettingsIntegrationDatabaseConnectionForm } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm';
 import {
   formatValuesForUpdate,
   getEditionSchemaForForm,
@@ -132,18 +132,17 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
             accent={'blue'}
           />
         )}
-        {databaseKey === 'postgresql' ? (
-          <Section>
-            <H2Title
-              title="Edit PostgreSQL Connection"
-              description="Edit the information to connect your PostgreSQL database"
-            />
+        <Section>
+          <H2Title
+            title="Edit Connection"
+            description="Edit the information to connect your database"
+          />
 
-            <SettingsIntegrationPostgreSQLConnectionForm
-              disabled={hasSyncedTables}
-            />
-          </Section>
-        ) : null}
+          <SettingsIntegrationDatabaseConnectionForm
+            databaseKey={databaseKey}
+            disabled={hasSyncedTables}
+          />
+        </Section>
       </FormProvider>
     </>
   );