reverts to before dialog change state (#2195)
This commit is contained in:
Syed Ali Shahbaz
GitHub
parent
c558c880f2
commit
e59d29a429
5 changed files with 275 additions and 209 deletions
|
|
@ -5,7 +5,6 @@ import { useRouter } from "next/router";
|
|||
import { useState } from "react";
|
||||
|
||||
import { Button } from "@calcom/ui/Button";
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
|
||||
import { TextField } from "@calcom/ui/form/fields";
|
||||
|
||||
import { asStringOrUndefined } from "@lib/asStringOrNull";
|
||||
|
|
@ -39,18 +38,26 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
|||
/>
|
||||
<CustomBranding lightVal={props.profile?.brandColor} darkVal={props.profile?.darkBrandColor} />
|
||||
<main className="mx-auto my-24 max-w-3xl">
|
||||
<Dialog defaultOpen={true}>
|
||||
<DialogContent
|
||||
onInteractOutside={(e) => {
|
||||
e.preventDefault();
|
||||
}}>
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
|
||||
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
<div
|
||||
className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
{error && (
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<XIcon className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-5 flex justify-center">
|
||||
<DialogHeader title={error} />
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
|
||||
{error}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -60,9 +67,11 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
|||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<XIcon className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-5 text-center">
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
{props.cancellationAllowed ? t("really_cancel_booking") : t("cannot_cancel_booking")}
|
||||
{props.cancellationAllowed
|
||||
? t("really_cancel_booking")
|
||||
: t("cannot_cancel_booking")}
|
||||
</h3>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500">
|
||||
|
|
@ -70,7 +79,9 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
|||
</p>
|
||||
</div>
|
||||
<div className="mt-4 border-t border-b py-4">
|
||||
<DialogHeader title={props.booking?.title} />
|
||||
<h2 className="font-cal mb-2 text-lg font-medium text-gray-600">
|
||||
{props.booking?.title}
|
||||
</h2>
|
||||
<p className="text-gray-500">
|
||||
<CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
|
||||
{dayjs(props.booking?.startTime).format(
|
||||
|
|
@ -89,8 +100,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
|||
onChange={(e) => setCancellationReason(e.target.value)}
|
||||
className="mb-5 sm:mb-6"
|
||||
/>
|
||||
<div className="flex justify-center">
|
||||
<DialogFooter>
|
||||
<div className="space-x-2 text-center rtl:space-x-reverse">
|
||||
<Button color="secondary" onClick={() => router.push("/reschedule/" + uid)}>
|
||||
{t("reschedule_this")}
|
||||
</Button>
|
||||
|
|
@ -98,13 +108,16 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
|||
data-testid="cancel"
|
||||
onClick={async () => {
|
||||
setLoading(true);
|
||||
|
||||
const payload = {
|
||||
uid: uid,
|
||||
reason: cancellationReason,
|
||||
};
|
||||
|
||||
telemetry.withJitsu((jitsu) =>
|
||||
jitsu.track(telemetryEventTypes.bookingCancelled, collectPageParameters())
|
||||
);
|
||||
|
||||
const res = await fetch("/api/cancel", {
|
||||
body: JSON.stringify(payload),
|
||||
headers: {
|
||||
|
|
@ -112,6 +125,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
|||
},
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (res.status >= 200 && res.status < 300) {
|
||||
await router.push(
|
||||
`/cancel/success?name=${props.profile.name}&title=${
|
||||
|
|
@ -132,14 +146,15 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
|||
loading={loading}>
|
||||
{t("cancel_event")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { useRouter } from "next/router";
|
|||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
|
||||
|
||||
import { HeadSeo } from "@components/seo/head-seo";
|
||||
|
||||
|
|
@ -23,34 +22,46 @@ export default function CancelSuccess() {
|
|||
description={`${t("cancelled")} ${title} | ${name}`}
|
||||
/>
|
||||
<main className="mx-auto my-24 max-w-3xl">
|
||||
<Dialog defaultOpen={true}>
|
||||
<DialogContent
|
||||
onInteractOutside={(e) => {
|
||||
e.preventDefault();
|
||||
}}>
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
|
||||
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
<div
|
||||
className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
|
||||
<CheckIcon className="h-6 w-6 text-green-600" />
|
||||
</div>
|
||||
<div className="mt-5 flex justify-center">
|
||||
<DialogHeader title={t("cancellation_successful")} />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
{t("cancellation_successful")}
|
||||
</h3>
|
||||
{!loading && !session?.user && (
|
||||
<div className="-mt-6 flex justify-center">
|
||||
<p className="text-center text-sm text-gray-500">{t("free_to_pick_another_event_type")}</p>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500">{t("free_to_pick_another_event_type")}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-center">
|
||||
<DialogFooter>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 text-center sm:mt-6">
|
||||
<div className="mt-5">
|
||||
{!loading && !session?.user && <Button href={eventPage as string}>Pick another</Button>}
|
||||
{!loading && session?.user && (
|
||||
<Button data-testid="back-to-bookings" href="/bookings" EndIcon={ArrowRightIcon}>
|
||||
{t("back_to_bookings")}
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@ import { getSession } from "next-auth/react";
|
|||
import { useRouter } from "next/router";
|
||||
import { useEffect } from "react";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
|
||||
|
||||
import prisma from "@lib/prisma";
|
||||
import { detectBrowserTimeFormat } from "@lib/timeFormat";
|
||||
|
|
@ -18,7 +16,6 @@ import { HeadSeo } from "@components/seo/head-seo";
|
|||
|
||||
export default function MeetingUnavailable(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
const router = useRouter();
|
||||
const { t } = useLocale();
|
||||
// if no booking redirectis to the 404 page
|
||||
const emptyBooking = props.booking === null;
|
||||
useEffect(() => {
|
||||
|
|
@ -31,38 +28,49 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
|
|||
<div>
|
||||
<HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
|
||||
<main className="mx-auto my-24 max-w-3xl">
|
||||
<Dialog defaultOpen={true}>
|
||||
<DialogContent
|
||||
onInteractOutside={(e) => {
|
||||
e.preventDefault();
|
||||
}}>
|
||||
<div className="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
|
||||
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
<div
|
||||
className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<XIcon className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-5 flex justify-center">
|
||||
<DialogHeader title={props.booking.title} />
|
||||
</div>
|
||||
<h3
|
||||
className="flex justify-center text-center text-lg font-medium leading-6 text-gray-900"
|
||||
id="modal-headline">
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
This meeting is in the past.
|
||||
</h3>
|
||||
<p className="-mt-4 flex justify-center text-sm text-gray-500">
|
||||
<CalendarIcon className="mr-1 inline-block h-4 w-4" />
|
||||
{dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
|
||||
</p>
|
||||
<p className="flex justify-center text-center text-sm text-gray-500">
|
||||
This meeting will be accessible 60 minutes in advance.
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<DialogFooter>
|
||||
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
|
||||
{t("go_back_home")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<div className="mt-4 border-t border-b py-4">
|
||||
<h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
|
||||
{props.booking.title}
|
||||
</h2>
|
||||
<p className="text-center text-gray-500">
|
||||
<CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
|
||||
{dayjs(props.booking.startTime).format(
|
||||
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 text-center sm:mt-6">
|
||||
<div className="mt-5">
|
||||
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
|
||||
Go back home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@ import { getSession } from "next-auth/react";
|
|||
import { useRouter } from "next/router";
|
||||
import { useEffect } from "react";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
|
||||
|
||||
import prisma from "@lib/prisma";
|
||||
import { detectBrowserTimeFormat } from "@lib/timeFormat";
|
||||
|
|
@ -18,7 +16,7 @@ import { HeadSeo } from "@components/seo/head-seo";
|
|||
|
||||
export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
const router = useRouter();
|
||||
const { t } = useLocale();
|
||||
|
||||
//if no booking redirectis to the 404 page
|
||||
const emptyBooking = props.booking === null;
|
||||
useEffect(() => {
|
||||
|
|
@ -31,33 +29,54 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
|
|||
<div>
|
||||
<HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
|
||||
<main className="mx-auto my-24 max-w-3xl">
|
||||
<Dialog defaultOpen={true}>
|
||||
<DialogContent
|
||||
onInteractOutside={(e) => {
|
||||
e.preventDefault();
|
||||
}}>
|
||||
<div className="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
|
||||
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
<div
|
||||
className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<XIcon className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-5 flex justify-center">
|
||||
<DialogHeader title={props.booking.title} />
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
This meeting has not started yet
|
||||
</h3>
|
||||
</div>
|
||||
<p className="-mt-4 flex items-center justify-center text-sm text-gray-500">
|
||||
<CalendarIcon className="mr-1 inline-block h-4 w-4" />
|
||||
{dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
|
||||
<div className="mt-4 border-t border-b py-4">
|
||||
<h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
|
||||
{props.booking.title}
|
||||
</h2>
|
||||
<p className="text-center text-gray-500">
|
||||
<CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
|
||||
{dayjs(props.booking.startTime).format(
|
||||
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
|
||||
)}
|
||||
</p>
|
||||
<p className="flex justify-center text-center text-sm text-gray-500">
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<p className="text-sm text-gray-500">
|
||||
This meeting will be accessible 60 minutes in advance.
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<DialogFooter>
|
||||
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
|
||||
{t("go_back_home")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
<div className="mt-5 text-center sm:mt-6">
|
||||
<div className="mt-5">
|
||||
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
|
||||
Go back home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { ArrowRightIcon } from "@heroicons/react/solid";
|
|||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import Button from "@calcom/ui/Button";
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
|
||||
|
||||
import { HeadSeo } from "@components/seo/head-seo";
|
||||
|
||||
|
|
@ -14,27 +13,41 @@ export default function NoMeetingFound() {
|
|||
<div>
|
||||
<HeadSeo title={t("no_meeting_found")} description={t("no_meeting_found")} />
|
||||
<main className="mx-auto my-24 max-w-3xl">
|
||||
<Dialog defaultOpen={true}>
|
||||
<DialogContent
|
||||
onInteractOutside={(e) => {
|
||||
e.preventDefault();
|
||||
}}>
|
||||
<div className="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
|
||||
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
<div
|
||||
className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
<div>
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<XIcon className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-5 flex justify-center">
|
||||
<DialogHeader title={t("no_meeting_found")} />
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
{t("no_meeting_found")}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="-mt-4 text-center text-sm text-gray-500">{t("no_meeting_found_description")}</p>
|
||||
<div className="flex justify-center">
|
||||
<DialogFooter>
|
||||
<div className="mt-2">
|
||||
<p className="text-center text-sm text-gray-500">{t("no_meeting_found_description")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 text-center sm:mt-6">
|
||||
<div className="mt-5">
|
||||
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
|
||||
{t("go_back_home")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue