feat: outlook 365 connect atom

packages/platform/atoms/hooks/useOffice365Calendar.ts

@@ -0,0 +1,42 @@
+import type { OnCheckErrorType } from "hooks/useGcal";
+import { useState, useEffect } from "react";
+
+import type { ApiErrorResponse } from "@calcom/platform-types";
+
+import http from "../lib/http";
+
+export interface useOffice365CalendarProps {
+  isAuth: boolean;
+  onCheckError?: OnCheckErrorType;
+}
+
+export const useOffice365Calendar = ({ isAuth, onCheckError }: useOffice365CalendarProps) => {
+  const [allowConnect, setAllowConnect] = useState<boolean>(false);
+  const [checked, setChecked] = useState<boolean>(false);
+
+  const redirectToOffice365OAuth = () => {
+    http
+      ?.get("/calendars/office365/connect")
+      .then(({ data: responseBody }) => {
+        if (responseBody.data?.authUrl) {
+          window.location.href = responseBody.data.authUrl;
+        }
+      })
+      .catch(console.error);
+  };
+
+  useEffect(() => {
+    if (isAuth) {
+      http
+        ?.get("/calendars/office365/check")
+        .then(() => setAllowConnect(false))
+        .catch((err) => {
+          setAllowConnect(true);
+          onCheckError?.(err as ApiErrorResponse);
+        })
+        .finally(() => setChecked(true));
+    }
+  }, [isAuth]);
+
+  return { allowConnect, checked, redirectToOffice365OAuth };
+};

packages/platform/atoms/index.ts

@@ -12,3 +12,4 @@ export { useCancelBooking } from "./hooks/useCancelBooking";
 export { useGetBooking } from "./hooks/useGetBooking";
 export { useGetBookings } from "./hooks/useGetBookings";
 export { useMe } from "./hooks/useMe";
+export { Office365Connect } from "./office-365-connect";

packages/platform/atoms/office-365-connect/Office365Connect.tsx

@@ -0,0 +1,45 @@
+import type { OnCheckErrorType } from "hooks/useGcal";
+import type { FC } from "react";
+
+import { Button } from "@calcom/ui";
+
+import { useAtomsContext } from "../hooks/useAtomsContext";
+import { useOffice365Calendar } from "../hooks/useOffice365Calendar";
+import { AtomsWrapper } from "../src/components/atoms-wrapper";
+import { cn } from "../src/lib/utils";
+
+interface Office365ConnectProps {
+  className?: string;
+  label?: string;
+  alreadyConnectedLabel?: string;
+  onCheckError?: OnCheckErrorType;
+}
+
+export const Office365Connect: FC<Office365ConnectProps> = ({
+  label = "Connect Microsoft Outlook Calendar",
+  alreadyConnectedLabel = "Connected Outlook Calendar",
+  className,
+  onCheckError,
+}) => {
+  const { isAuth } = useAtomsContext();
+
+  const { allowConnect, checked, redirectToOffice365OAuth } = useOffice365Calendar({
+    isAuth,
+    onCheckError,
+  });
+
+  if (!isAuth || !checked) return <></>;
+
+  return (
+    <AtomsWrapper>
+      <Button
+        StartIcon="calendar-days"
+        color="primary"
+        disabled={!allowConnect}
+        className={cn("", className)}
+        onClick={() => redirectToOffice365OAuth()}>
+        {allowConnect ? label : alreadyConnectedLabel}
+      </Button>
+    </AtomsWrapper>
+  );
+};

packages/platform/atoms/office-365-connect/index.ts

@@ -0,0 +1 @@
+export { Office365Connect } from "./Office365Connect";