feat: add Active and Add integration card displays (#4591)

* feat: add Active and Add integration card displays

Closes #4541

* docs: add PaymentSuccess page stories

* refactor: move page components

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,
+  },
+];

packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationRequest.ts

@@ -0,0 +1,18 @@
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
+
+export const SETTINGS_INTEGRATION_REQUEST_CATEGORY: SettingsIntegrationCategory =
+  {
+    key: 'request',
+    title: 'Request an integration',
+    hyperlink: null,
+    integrations: [
+      {
+        from: { key: 'github', image: '/images/integrations/github-logo.png' },
+        to: null,
+        type: 'Goto',
+        text: 'Request an integration on Github conversations',
+        link: 'https://github.com/twentyhq/twenty/discussions/categories/ideas',
+        linkText: 'Go to GitHub',
+      },
+    ],
+  };

packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationWindmill.ts

@@ -0,0 +1,21 @@
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
+
+export const SETTINGS_INTEGRATION_WINDMILL_CATEGORY: SettingsIntegrationCategory =
+  {
+    key: 'windmill',
+    title: 'With Windmill',
+    hyperlink: null,
+    integrations: [
+      {
+        from: {
+          key: 'windmill',
+          image: '/images/integrations/windmill-logo.png',
+        },
+        to: null,
+        type: 'Goto',
+        text: 'Create a workflow with Windmill',
+        link: 'https://www.windmill.dev',
+        linkText: 'Go to Windmill',
+      },
+    ],
+  };

packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationZapier.ts

@@ -0,0 +1,42 @@
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
+
+export const SETTINGS_INTEGRATION_ZAPIER_CATEGORY: SettingsIntegrationCategory =
+  {
+    key: 'zapier',
+    title: 'With Zapier',
+    hyperlinkText: 'See all zaps',
+    hyperlink: 'https://zapier.com/apps/twenty/integrations',
+    integrations: [
+      {
+        from: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
+        to: { key: 'slack', image: '/images/integrations/slack-logo.png' },
+        type: 'Use',
+        text: 'Post to Slack when a company is updated',
+        link: 'https://zapier.com/apps/twenty/integrations/slack',
+      },
+      {
+        from: { key: 'cal', image: '/images/integrations/cal-logo.png' },
+        to: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
+        type: 'Use',
+        text: 'Create a person when Cal.com event is created',
+        link: 'https://zapier.com/apps/twenty/integrations/calcom',
+      },
+      {
+        from: {
+          key: 'mailchimp',
+          image: '/images/integrations/mailchimp-logo.png',
+        },
+        to: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
+        type: 'Use',
+        text: 'Create a person when a MailChimp sub is created',
+        link: 'https://zapier.com/apps/twenty/integrations/mailchimp',
+      },
+      {
+        from: { key: 'tally', image: '/images/integrations/tally-logo.png' },
+        to: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
+        type: 'Use',
+        text: 'Create a company when a Tally form is sent',
+        link: 'https://zapier.com/apps/twenty/integrations/tally',
+      },
+    ],
+  };