import { useState } from "react"; import { useMutation } from "react-query"; import showToast from "@calcom/lib/notification"; import { ButtonBaseProps } from "@calcom/ui/Button"; import { Dialog } from "@calcom/ui/Dialog"; import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent"; export default function DisconnectIntegration(props: { /** Integration credential id */ id: number; render: (renderProps: ButtonBaseProps) => JSX.Element; onOpenChange: (isOpen: boolean) => unknown | Promise; }) { const [modalOpen, setModalOpen] = useState(false); const mutation = useMutation( async () => { const res = await fetch("/api/integrations", { method: "DELETE", body: JSON.stringify({ id: props.id }), headers: { "Content-Type": "application/json", }, }); if (!res.ok) { throw new Error("Something went wrong"); } return res.json(); }, { async onSettled() { await props.onOpenChange(modalOpen); }, onSuccess(data) { showToast(data.message, "success"); setModalOpen(false); }, } ); return ( <> { mutation.mutate(); }}> Are you sure you want to disconnect this integration? {props.render({ onClick() { setModalOpen(true); }, disabled: modalOpen, loading: mutation.isLoading, })} ); }