MS Teams title to state that a work/school account is required. (#2677)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/app-store/office365video/_metadata.ts

@@ -4,7 +4,7 @@ import { LocationType } from "../locations";
 import _package from "./package.json";
 
 export const metadata = {
-  name: "Microsoft 365/Teams",
+  name: "Microsoft 365/Teams (Requires work/school account)",
   description: _package.description,
   type: "office365_video",
   imageSrc: "/api/app-store/office365video/icon.svg",
@@ -17,7 +17,7 @@ export const metadata = {
   reviews: 69, // TODO: placeholder for now, pull this from TrustPilot or G2
   category: "video",
   slug: "msteams",
-  title: "MS Teams",
+  title: "MS Teams (Requires work/school account)",
   trending: true,
   email: "help@cal.com",
   locationType: LocationType.Teams,

packages/app-store/office365video/components/AccountDialog.tsx

@@ -0,0 +1,43 @@
+import Button from "@calcom/ui/Button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogProps,
+} from "@calcom/ui/Dialog";
+
+import useAddAppMutation from "../../_utils/useAddAppMutation";
+
+export function AccountDialog(props: DialogProps) {
+  const mutation = useAddAppMutation("office365_calendar");
+  return (
+    <Dialog name="Account check" {...props}>
+      <DialogContent>
+        <DialogHeader
+          title="Connecting with MS Teams requires a work/school account."
+          subtitle="If you continue with a personal account you will receive an error"
+        />
+
+        <DialogFooter>
+          <DialogClose
+            onClick={() => {
+              props.onOpenChange?.(false);
+            }}
+            asChild>
+            <Button type="button" color="secondary" tabIndex={-1}>
+              Cancel
+            </Button>
+          </DialogClose>
+
+          <Button type="button" onClick={() => mutation.mutate("")}>
+            Continue
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default AccountDialog;

packages/app-store/office365video/components/InstallAppButton.tsx

@@ -1,18 +1,20 @@
-import type { InstallAppButtonProps } from "@calcom/app-store/types";
+import { useState } from "react";
 
-import useAddAppMutation from "../../_utils/useAddAppMutation";
+import { InstallAppButtonProps } from "../../types";
+import AddIntegration from "./AccountDialog";
 
 export default function InstallAppButton(props: InstallAppButtonProps) {
-  const mutation = useAddAppMutation("office365_video");
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
     <>
       {props.render({
         onClick() {
-          mutation.mutate("");
+          setIsModalOpen(true);
         },
-        loading: mutation.isLoading,
+        disabled: isModalOpen,
       })}
+      <AddIntegration open={isModalOpen} onOpenChange={setIsModalOpen} />
     </>
   );
 }