import type { Dispatch, SetStateAction } from "react"; import { useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button, Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, showToast, TextArea, } from "@calcom/ui"; import { Clock } from "@calcom/ui/components/icon"; 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 { mutate: rescheduleApi, isLoading } = trpc.viewer.bookings.requestReschedule.useMutation({ async onSuccess() { showToast(t("reschedule_request_sent"), "success"); setIsOpenDialog(false); await utils.viewer.bookings.invalidate(); }, onError() { showToast(t("unexpected_error_try_again"), "error"); // @TODO: notify sentry }, }); return (

{t("reschedule_modal_description")}

{t("reason_for_reschedule_request")} (Optional)