feat(UI-1288): zoom and height.app oauth integrations

src/assets/image/icons/connections/index.ts

@@ -23,5 +23,8 @@ export { default as RedisIcon } from "@assets/image/icons/connections/Redis.svg?
 export { default as SchedulerIcon } from "@assets/image/icons/connections/Scheduler.svg?react";
 export { default as SlackIcon } from "@assets/image/icons/connections/Slack.svg?react";
 export { default as SqliteIcon } from "@assets/image/icons/connections/Sqlite.svg?react";
-
 export { default as TwilioIcon } from "@assets/image/icons/connections/Twilio.svg?react";
+// Taken from: https://www.svgrepo.com/svg/452140/zoom
+export { default as ZoomIcon } from "@assets/image/icons/connections/Zoom.svg?react";
+// Taken from: https://www.svgrepo.com/svg/501547/empty
+export { default as EmptyCircleIcon } from "@assets/image/icons/connections/EmptyCircle.svg?react";

src/components/organisms/connections/integrations/height/add.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+
+import { useTranslation } from "react-i18next";
+
+import { Integrations } from "@src/enums/components";
+import { useConnectionForm } from "@src/hooks";
+import { oauthSchema } from "@validations";
+
+import { Button } from "@components/atoms";
+
+export const HeightIntegrationAddForm = ({
+	connectionId,
+	triggerParentFormSubmit,
+}: {
+	connectionId?: string;
+	triggerParentFormSubmit: () => void;
+}) => {
+	const { t } = useTranslation("integrations");
+
+	const { handleOAuth } = useConnectionForm(oauthSchema, "create");
+
+	useEffect(() => {
+		if (connectionId) {
+			handleOAuth(connectionId, Integrations.height);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [connectionId]);
+
+	return (
+		<form className="mt-6 flex flex-col gap-6" onSubmit={triggerParentFormSubmit}>
+			<Button
+				aria-label={t("buttons.startOAuthFlow")}
+				className="ml-auto w-fit border-black bg-white px-3 font-medium hover:bg-gray-950 hover:text-white"
+				type="submit"
+				variant="outline"
+			>
+				{t("buttons.startOAuthFlow")}
+			</Button>
+		</form>
+	);
+};

src/components/organisms/connections/integrations/height/edit.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+
+import { Integrations } from "@src/enums/components";
+import { useConnectionForm } from "@src/hooks";
+import { oauthSchema } from "@validations";
+
+import { Button } from "@components/atoms";
+
+export const HeightIntegrationEditForm = () => {
+	const { t } = useTranslation("integrations");
+	const { connectionId } = useParams();
+	const { handleOAuth, handleSubmit } = useConnectionForm(oauthSchema, "edit");
+
+	return (
+		<form
+			className="mt-6 flex flex-col gap-6"
+			onSubmit={handleSubmit(async () => await handleOAuth(connectionId!, Integrations.height))}
+		>
+			<Button
+				aria-label={t("buttons.startOAuthFlow")}
+				className="ml-auto w-fit border-black bg-white px-3 font-medium hover:bg-gray-950 hover:text-white"
+				type="submit"
+				variant="outline"
+			>
+				{t("buttons.startOAuthFlow")}
+			</Button>
+		</form>
+	);
+};

src/components/organisms/connections/integrations/height/index.ts

@@ -0,0 +1,2 @@
+export { HeightIntegrationAddForm } from "@components/organisms/connections/integrations/height/add";
+export { HeightIntegrationEditForm } from "@components/organisms/connections/integrations/height/edit";

src/components/organisms/connections/integrations/index.ts

@@ -39,3 +39,8 @@ export { SlackIntegrationAddForm } from "@components/organisms/connections/integ
 export { SlackIntegrationEditForm } from "@components/organisms/connections/integrations/slack";
 export { TwilioIntegrationAddForm } from "@components/organisms/connections/integrations/twilio";
 export { TwilioIntegrationEditForm } from "@components/organisms/connections/integrations/twilio";
+export {
+	HeightIntegrationAddForm,
+	HeightIntegrationEditForm,
+} from "@components/organisms/connections/integrations/height";
+export { ZoomIntegrationAddForm, ZoomIntegrationEditForm } from "@components/organisms/connections/integrations/zoom";

src/components/organisms/connections/integrations/zoom/add.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+
+import { useTranslation } from "react-i18next";
+
+import { Integrations } from "@src/enums/components";
+import { useConnectionForm } from "@src/hooks";
+import { oauthSchema } from "@validations";
+
+import { Button } from "@components/atoms";
+
+export const ZoomIntegrationAddForm = ({
+	connectionId,
+	triggerParentFormSubmit,
+}: {
+	connectionId?: string;
+	triggerParentFormSubmit: () => void;
+}) => {
+	const { t } = useTranslation("integrations");
+
+	const { handleOAuth } = useConnectionForm(oauthSchema, "create");
+
+	useEffect(() => {
+		if (connectionId) {
+			handleOAuth(connectionId, Integrations.zoom);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [connectionId]);
+
+	return (
+		<form className="mt-6 flex flex-col gap-6" onSubmit={triggerParentFormSubmit}>
+			<Button
+				aria-label={t("buttons.startOAuthFlow")}
+				className="ml-auto w-fit border-black bg-white px-3 font-medium hover:bg-gray-950 hover:text-white"
+				type="submit"
+				variant="outline"
+			>
+				{t("buttons.startOAuthFlow")}
+			</Button>
+		</form>
+	);
+};

src/components/organisms/connections/integrations/zoom/edit.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+
+import { Integrations } from "@src/enums/components";
+import { useConnectionForm } from "@src/hooks";
+import { oauthSchema } from "@validations";
+
+import { Button } from "@components/atoms";
+
+export const ZoomIntegrationEditForm = () => {
+	const { t } = useTranslation("integrations");
+	const { connectionId } = useParams();
+	const { handleOAuth, handleSubmit } = useConnectionForm(oauthSchema, "edit");
+
+	return (
+		<form
+			className="mt-6 flex flex-col gap-6"
+			onSubmit={handleSubmit(async () => await handleOAuth(connectionId!, Integrations.zoom))}
+		>
+			<Button
+				aria-label={t("buttons.startOAuthFlow")}
+				className="ml-auto w-fit border-black bg-white px-3 font-medium hover:bg-gray-950 hover:text-white"
+				type="submit"
+				variant="outline"
+			>
+				{t("buttons.startOAuthFlow")}
+			</Button>
+		</form>
+	);
+};

src/components/organisms/connections/integrations/zoom/index.ts

@@ -0,0 +1,2 @@
+export { ZoomIntegrationAddForm } from "@components/organisms/connections/integrations/zoom/add";
+export { ZoomIntegrationEditForm } from "@components/organisms/connections/integrations/zoom/edit";

src/constants/connections/addComponentsMapping.constants.ts

@@ -16,6 +16,8 @@ import {
 	OpenAiIntegrationAddForm,
 	SlackIntegrationAddForm,
 	TwilioIntegrationAddForm,
+	HeightIntegrationAddForm,
+	ZoomIntegrationAddForm,
 } from "@components/organisms/connections/integrations";
 
 export const integrationAddFormComponents: Partial<Record<keyof typeof Integrations, React.ComponentType<any>>> = {
@@ -36,4 +38,6 @@ export const integrationAddFormComponents: Partial<Record<keyof typeof Integrati
 	confluence: ConfluenceIntegrationAddForm,
 	discord: DiscordIntegrationAddForm,
 	hubspot: HubspotIntegrationAddForm,
+	height: HeightIntegrationAddForm,
+	zoom: ZoomIntegrationAddForm,
 };

src/constants/connections/editComponentsMapping.constants.ts

@@ -16,6 +16,8 @@ import {
 	OpenAiIntegrationEditForm,
 	SlackIntegrationEditForm,
 	TwilioIntegrationEditForm,
+	HeightIntegrationEditForm,
+	ZoomIntegrationEditForm,
 } from "@components/organisms/connections/integrations";
 
 export const integrationToEditComponent: Partial<Record<keyof typeof Integrations, React.ComponentType<any>>> = {
@@ -36,4 +38,6 @@ export const integrationToEditComponent: Partial<Record<keyof typeof Integration
 	[Integrations.drive]: GoogleIntegrationEditForm,
 	[Integrations.forms]: GoogleFormsIntegrationEditForm,
 	[Integrations.hubspot]: HubspotIntegrationEditForm,
+	[Integrations.height]: HeightIntegrationEditForm,
+	[Integrations.zoom]: ZoomIntegrationEditForm,
 };

src/constants/lists/connections/options.constants.ts

@@ -27,7 +27,7 @@ export const selectIntegrationGoogle: SelectOption[] = [
 
 const slackSocketMode = { label: "Socket Mode", value: ConnectionAuthType.Socket };
 
-const baseSelectIntegrationSlack = [{ label: "OAuth v2", value: ConnectionAuthType.Oauth }];
+const baseSelectIntegrationSlack = [{ label: "OAuth v2 - Default app", value: ConnectionAuthType.Oauth }];
 
 export const selectIntegrationSlack: SelectOption[] = featureFlags.displaySlackSocketIntegration
 	? baseSelectIntegrationSlack.concat(slackSocketMode)

src/enums/components/connection.enum.ts

@@ -25,6 +25,8 @@ import {
 	SlackIcon,
 	SqliteIcon,
 	TwilioIcon,
+	ZoomIcon,
+	EmptyCircleIcon,
 } from "@assets/image/icons/connections";
 
 export enum ConnectionStatus {
@@ -52,6 +54,8 @@ export enum Integrations {
 	chatgpt = "chatgpt",
 	confluence = "confluence",
 	hubspot = "hubspot",
+	height = "height",
+	zoom = "zoom",
 }
 
 export type GoogleIntegrationType = Extract<
@@ -167,6 +171,16 @@ export const IntegrationsMap: Record<Integrations, IntegrationSelectOption> = {
 		label: "HubSpot",
 		value: Integrations.hubspot,
 	},
+	height: {
+		icon: EmptyCircleIcon,
+		label: "Height",
+		value: Integrations.height,
+	},
+	zoom: {
+		icon: ZoomIcon,
+		label: "Zoom",
+		value: Integrations.zoom,
+	},
 };
 
 export const fitleredIntegrationsMap = (() => {

src/hooks/useConnectionForm.ts

@@ -334,7 +334,12 @@ export const useConnectionForm = (validationSchema: ZodObject<ZodRawShape>, mode
 	};
 
 	const handleOAuth = async (oauthConnectionId: string, integrationName: keyof typeof Integrations) => {
-		const migratedAuthIntegrations = new Set([Integrations.github]);
+		const migratedAuthIntegrations = new Set([
+			Integrations.github,
+			Integrations.zoom,
+			Integrations.height,
+			Integrations.slack,
+		]);
 
 		try {
 			await VariablesService.setByConnectiontId(oauthConnectionId!, {