import { ClockIcon, XIcon } from "@heroicons/react/outline"; import { RescheduleResponse } from "pages/api/book/request-reschedule"; import React, { useState, Dispatch, SetStateAction } from "react"; import { useMutation } from "react-query"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import showToast from "@calcom/lib/notification"; import Button from "@calcom/ui/Button"; import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog"; import { TextArea } from "@calcom/ui/form/fields"; import * as fetchWrapper from "@lib/core/http/fetch-wrapper"; import { trpc } from "@lib/trpc"; interface IRescheduleDialog { isOpenDialog: boolean; setIsOpenDialog: Dispatch>; bookingUId: string; } export const RescheduleDialog = (props: IRescheduleDialog) => { const { t } = useLocale(); const utils = trpc.useContext(); const { isOpenDialog, setIsOpenDialog, bookingUId: bookingId } = props; const [rescheduleReason, setRescheduleReason] = useState(""); const [isLoading, setIsLoading] = useState(false); const rescheduleApi = useMutation( async () => { setIsLoading(true); try { const result = await fetchWrapper.post< { bookingId: string; rescheduleReason: string }, RescheduleResponse >("/api/book/request-reschedule", { bookingId, rescheduleReason, }); 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 (

{t("reschedule_modal_description")}

{t("reason_for_reschedule_request")} (Optional)