cal.pub0.org/packages/app-store/wipemycalother/components/confirmDialog.tsx

124 lines
3.7 KiB
TypeScript

import { ClockIcon, XIcon } from "@heroicons/react/outline";
import dayjs from "dayjs";
import { Dispatch, SetStateAction } from "react";
import { useState } from "react";
import { useMutation } from "react-query";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import logger from "@calcom/lib/logger";
import showToast from "@calcom/lib/notification";
import Button from "@calcom/ui/Button";
import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
interface IConfirmDialogWipe {
isOpenDialog: boolean;
setIsOpenDialog: Dispatch<SetStateAction<boolean>>;
trpc: any;
}
interface IWipeMyCalAction {
initialDate: string;
endDate: string;
}
const wipeMyCalAction = async (props: IWipeMyCalAction) => {
const { initialDate, endDate } = props;
const body = {
initialDate,
endDate,
};
try {
const endpoint = "/api/integrations/wipemycalother/wipe";
return fetch(`${process.env.NEXT_PUBLIC_APP_BASE_URL}` + endpoint, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
});
} catch (error: unknown) {
if (error instanceof Error) {
showToast("Error ocurred while trying to cancel bookings", "error");
}
}
};
export const ConfirmDialog = (props: IConfirmDialogWipe) => {
const { t } = useLocale();
const { isOpenDialog, setIsOpenDialog, trpc } = props;
const [isLoading, setIsLoading] = useState(false);
const today = dayjs();
const initialDate = today.startOf("day");
const endDate = today.endOf("day");
const dateFormat = "ddd, MMM D, YYYY h:mm A";
const utils = trpc.useContext();
const rescheduleApi = useMutation(
async () => {
setIsLoading(true);
try {
const result = await wipeMyCalAction({
initialDate: initialDate.toISOString(),
endDate: endDate.toISOString(),
});
if (result) {
showToast(t("reschedule_request_sent"), "success");
setIsOpenDialog(false);
}
} catch (error) {
showToast(t("unexpected_error_try_again"), "error");
// @TODO: notify sentry
}
setIsLoading(false);
},
{
async onSettled() {
await utils.invalidateQueries(["viewer.bookings"]);
},
}
);
return (
<Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
<DialogContent>
<div className="flex flex-row space-x-3">
<div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
<ClockIcon className="m-auto h-6 w-6"></ClockIcon>
</div>
<div className="pt-1">
<DialogHeader title={"Wipe My Calendar"} />
<p className="mt-2 text-sm text-gray-500">
This will cancel all upcoming meetings from: <br />{" "}
<strong className="text-black">
{initialDate.format(dateFormat)} - {endDate.format(dateFormat)}
</strong>
</p>
<p className="mt-6 mb-2 text-sm font-bold text-black">Are you sure? This can&apos;t be undone</p>
</div>
</div>
<DialogFooter>
<DialogClose>
<Button color="secondary">{t("cancel")}</Button>
</DialogClose>
<Button
data-testid="send_request"
disabled={isLoading}
onClick={async () => {
try {
rescheduleApi.mutate();
} catch (error) {
if (error instanceof Error) {
logger.error(error.message);
}
}
}}>
{t("confirm")}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};