vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.1k Packages Projects Releases Wiki Activity

fix: ui of reschedule dialog (#5691)

Browse Source 
Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This commit is contained in:
Udit Takkar
2022-11-28 08:52:42 -07:00
committed by GitHub
co-authored by Peer Richelsen kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
parent 1f74fc394a
commit b8bbfe8a3f
1 changed files with 39 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/dialog/RescheduleDialog.tsx
+39 -49
View File
@@ -2,17 +2,7 @@ import { Dispatch, SetStateAction, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
Icon,
showToast,
TextArea,
} from "@calcom/ui";
import { Button, Dialog, DialogContent, Icon, showToast, TextArea } from "@calcom/ui";
interface IRescheduleDialog {
isOpenDialog: boolean;
@@ -40,44 +30,44 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
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]">
<Icon.FiClock className="m-auto h-6 w-6" />
</div>
<div className="pt-1">
<DialogHeader title={t("send_reschedule_request")} />
<p className="-mt-8 text-sm text-gray-500">{t("reschedule_modal_description")}</p>
<p className="mt-6 mb-2 text-sm font-bold text-black">
{t("reason_for_reschedule_request")}
<span className="font-normal text-gray-500"> (Optional)</span>
</p>
<TextArea
data-testid="reschedule_reason"
name={t("reschedule_reason")}
value={rescheduleReason}
onChange={(e) => setRescheduleReason(e.target.value)}
className="mb-5 sm:mb-6"
/>
<DialogFooter>
<DialogClose asChild>
<Button color="secondary">{t("cancel")}</Button>
</DialogClose>
<Button
data-testid="send_request"
disabled={isLoading}
onClick={() => {
rescheduleApi({
bookingId,
rescheduleReason,
});
}}>
{t("send_reschedule_request")}
</Button>
</DialogFooter>
</div>
<DialogContent
Icon={Icon.FiClock}
useOwnActionButtons
title={t("send_reschedule_request")}
description={t("reschedule_modal_description")}>
<div>
<p className="text-sm font-medium text-black">
{t("reason_for_reschedule_request")}
<span className="font-normal text-gray-500"> (Optional)</span>
</p>
<TextArea
data-testid="reschedule_reason"
name={t("reschedule_reason")}
value={rescheduleReason}
onChange={(e) => setRescheduleReason(e.target.value)}
className="mt-2"
/>
</div>
<div className="flex justify-end space-x-2">
<Button
onClick={() => {
setRescheduleReason("");
setIsOpenDialog(false);
}}
color="secondary">
{t("cancel")}
</Button>
<Button
data-testid="send_request"
disabled={isLoading}
onClick={() => {
rescheduleApi({
bookingId,
rescheduleReason,
});
}}>
{t("send_reschedule_request")}
</Button>
</div>
</DialogContent>
</Dialog>