first commit

calcom/packages/features/apps/components/AppSetDefaultLinkDialog.tsx

@@ -0,0 +1,89 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { Dispatch, SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import type { EventLocationType } from "@calcom/app-store/locations";
+import { getEventLocationType } from "@calcom/app-store/locations";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  Form,
+  showToast,
+  TextField,
+} from "@calcom/ui";
+
+type LocationTypeSetLinkDialogFormProps = {
+  link?: string;
+  type: EventLocationType["type"];
+};
+
+export function AppSetDefaultLinkDialog({
+  locationType,
+  setLocationType,
+  onSuccess,
+}: {
+  locationType: EventLocationType & { slug: string };
+  setLocationType: Dispatch<SetStateAction<(EventLocationType & { slug: string }) | undefined>>;
+  onSuccess: () => void;
+}) {
+  const { t } = useLocale();
+  const eventLocationTypeOptions = getEventLocationType(locationType.type);
+
+  const form = useForm<LocationTypeSetLinkDialogFormProps>({
+    resolver: zodResolver(
+      z.object({ link: z.string().regex(new RegExp(eventLocationTypeOptions?.urlRegExp ?? "")) })
+    ),
+  });
+
+  const updateDefaultAppMutation = trpc.viewer.updateUserDefaultConferencingApp.useMutation({
+    onSuccess: () => {
+      onSuccess();
+    },
+    onError: () => {
+      showToast(`Invalid App Link Format`, "error");
+    },
+  });
+
+  return (
+    <Dialog open={!!locationType} onOpenChange={() => setLocationType(undefined)}>
+      <DialogContent
+        title={t("default_app_link_title")}
+        description={t("default_app_link_description")}
+        type="creation"
+        Icon="circle-alert">
+        <Form
+          form={form}
+          handleSubmit={(values) => {
+            updateDefaultAppMutation.mutate({
+              appSlug: locationType.slug,
+              appLink: values.link,
+            });
+            setLocationType(undefined);
+          }}>
+          <>
+            <TextField
+              type="text"
+              required
+              {...form.register("link")}
+              placeholder={locationType.organizerInputPlaceholder ?? ""}
+              label={locationType.label ?? ""}
+            />
+
+            <DialogFooter showDivider className="mt-8">
+              <DialogClose />
+              <Button color="primary" type="submit">
+                {t("save")}
+              </Button>
+            </DialogFooter>
+          </>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

calcom/packages/features/apps/components/DisconnectIntegration.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import type { ButtonProps } from "@calcom/ui";
+import { Button, ConfirmationDialogContent, Dialog, DialogTrigger, showToast } from "@calcom/ui";
+
+export default function DisconnectIntegration({
+  credentialId,
+  label,
+  trashIcon,
+  isGlobal,
+  onSuccess,
+  buttonProps,
+}: {
+  credentialId: number;
+  label?: string;
+  trashIcon?: boolean;
+  isGlobal?: boolean;
+  onSuccess?: () => void;
+  buttonProps?: ButtonProps;
+}) {
+  const { t } = useLocale();
+  const [modalOpen, setModalOpen] = useState(false);
+  const utils = trpc.useUtils();
+
+  const mutation = trpc.viewer.deleteCredential.useMutation({
+    onSuccess: () => {
+      showToast(t("app_removed_successfully"), "success");
+      setModalOpen(false);
+      onSuccess && onSuccess();
+    },
+    onError: () => {
+      showToast(t("error_removing_app"), "error");
+      setModalOpen(false);
+    },
+    async onSettled() {
+      await utils.viewer.connectedCalendars.invalidate();
+      await utils.viewer.integrations.invalidate();
+    },
+  });
+
+  return (
+    <>
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogTrigger asChild>
+          <Button
+            color={buttonProps?.color || "destructive"}
+            StartIcon={!trashIcon ? undefined : "trash"}
+            size="base"
+            variant={trashIcon && !label ? "icon" : "button"}
+            disabled={isGlobal}
+            {...buttonProps}>
+            {label && label}
+          </Button>
+        </DialogTrigger>
+        <ConfirmationDialogContent
+          variety="danger"
+          title={t("remove_app")}
+          confirmBtnText={t("yes_remove_app")}
+          onConfirm={() => {
+            mutation.mutate({ id: credentialId });
+          }}>
+          <p className="mt-5">{t("are_you_sure_you_want_to_remove_this_app")}</p>
+        </ConfirmationDialogContent>
+      </Dialog>
+    </>
+  );
+}

calcom/packages/features/apps/components/DisconnectIntegrationModal.tsx

@@ -0,0 +1,49 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { Dialog, showToast, ConfirmationDialogContent } from "@calcom/ui";
+
+interface DisconnectIntegrationModalProps {
+  credentialId: number | null;
+  isOpen: boolean;
+  handleModelClose: () => void;
+  teamId?: number;
+}
+
+export default function DisconnectIntegrationModal({
+  credentialId,
+  isOpen,
+  handleModelClose,
+  teamId,
+}: DisconnectIntegrationModalProps) {
+  const { t } = useLocale();
+  const utils = trpc.useUtils();
+
+  const mutation = trpc.viewer.deleteCredential.useMutation({
+    onSuccess: () => {
+      showToast(t("app_removed_successfully"), "success");
+      handleModelClose();
+      utils.viewer.integrations.invalidate();
+      utils.viewer.connectedCalendars.invalidate();
+    },
+    onError: () => {
+      showToast(t("error_removing_app"), "error");
+      handleModelClose();
+    },
+  });
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleModelClose}>
+      <ConfirmationDialogContent
+        variety="danger"
+        title={t("remove_app")}
+        confirmBtnText={t("yes_remove_app")}
+        onConfirm={() => {
+          if (credentialId) {
+            mutation.mutate({ id: credentialId, teamId });
+          }
+        }}>
+        <p className="mt-5">{t("are_you_sure_you_want_to_remove_this_app")}</p>
+      </ConfirmationDialogContent>
+    </Dialog>
+  );
+}