3865-Add-Integrations (#3870)

* initial commit setup

* ui done

* added links

* changed brand logos

* Twenty logo fix

* Windmill logo fix

* Fix typo

* Add feature flag

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/pages/settings/integrations/constants/IntegrationTypes.ts

@@ -0,0 +1,22 @@
+export enum IntegrationType {
+  Use = 'Use',
+  Goto = 'Goto',
+  Soon = 'Soon',
+}
+
+export interface Integration {
+  from: { key: string; image: string };
+  to: { key: string; image: string } | null;
+  type: IntegrationType;
+  linkText?: string;
+  link: string;
+  text: string;
+}
+
+export interface IntegrationCategory {
+  key: string;
+  title: string;
+  hyperlinkText?: string;
+  hyperlink: string | null;
+  integrations: Integration[];
+}

packages/twenty-front/src/pages/settings/integrations/constants/Integrations.ts

@@ -0,0 +1,12 @@
+import { IntegrationCategory } from './IntegrationTypes';
+import requestIntegrations from './Request';
+import windmillIntegrations from './Windmill';
+import zapierIntegrations from './Zapier';
+
+const integrationCategories: IntegrationCategory[] = [
+  zapierIntegrations,
+  windmillIntegrations,
+  requestIntegrations,
+];
+
+export default integrationCategories;

packages/twenty-front/src/pages/settings/integrations/constants/Request.ts

@@ -0,0 +1,19 @@
+import { IntegrationCategory, IntegrationType } from './IntegrationTypes';
+
+const requestIntegrations: IntegrationCategory = {
+  key: 'request',
+  title: 'Request an integration',
+  hyperlink: null,
+  integrations: [
+    {
+      from: { key: 'github', image: '/images/integrations/Github.png' },
+      to: null,
+      type: IntegrationType.Goto,
+      text: 'Request an integration on Github conversations',
+      link: 'https://github.com/twentyhq/twenty/issues/new/choose',
+      linkText: 'Go to GitHub',
+    },
+  ],
+};
+
+export default requestIntegrations;

packages/twenty-front/src/pages/settings/integrations/constants/Windmill.ts

@@ -0,0 +1,19 @@
+import { IntegrationCategory, IntegrationType } from './IntegrationTypes';
+
+const windmillIntegrations: IntegrationCategory = {
+  key: 'windmill',
+  title: 'With Windmill',
+  hyperlink: null,
+  integrations: [
+    {
+      from: { key: 'windmill', image: '/images/integrations/Windmill.png' },
+      to: null,
+      type: IntegrationType.Goto,
+      text: 'Create a workflow with Windmill',
+      link: 'https://www.windmill.dev',
+      linkText: 'Go to Windmill',
+    },
+  ],
+};
+
+export default windmillIntegrations;

packages/twenty-front/src/pages/settings/integrations/constants/Zapier.ts

@@ -0,0 +1,40 @@
+import { IntegrationCategory, IntegrationType } from './IntegrationTypes';
+
+const zapierIntegrations: IntegrationCategory = {
+  key: 'zapier',
+  title: 'With Zapier',
+  hyperlinkText: 'See all zaps',
+  hyperlink: 'https://zapier.com/apps/twenty/integrations',
+  integrations: [
+    {
+      from: { key: 'twenty', image: '/images/integrations/Twenty.svg' },
+      to: { key: 'slack', image: '/images/integrations/Slack.png' },
+      type: IntegrationType.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.png' },
+      to: { key: 'twenty', image: '/images/integrations/Twenty.svg' },
+      type: IntegrationType.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.png' },
+      to: { key: 'twenty', image: '/images/integrations/Twenty.svg' },
+      type: IntegrationType.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.png' },
+      to: { key: 'twenty', image: '/images/integrations/Twenty.svg' },
+      type: IntegrationType.Use,
+      text: 'Create a company when a Tally form is sent',
+      link: 'https://zapier.com/apps/twenty/integrations/tally',
+    },
+  ],
+};
+
+export default zapierIntegrations;