mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

reverts to before dialog change state (#2195)

Browse source
This commit is contained in:
Syed Ali Shahbaz 2022-03-18 15:25:02 +05:30 committed by GitHub
parent c558c880f2
commit e59d29a429
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 275 additions and 209 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
apps/web/pages/cancel/[uid].tsx
View file

@ -5,7 +5,6 @@ import { useRouter } from "next/router";
import { useState } from "react"; import { useState } from "react";
import { Button } from "@calcom/ui/Button"; import { Button } from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import { TextField } from "@calcom/ui/form/fields"; import { TextField } from "@calcom/ui/form/fields";
import { asStringOrUndefined } from "@lib/asStringOrNull"; 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} /> <CustomBranding lightVal={props.profile?.brandColor} darkVal={props.profile?.darkBrandColor} />
<main className="mx-auto my-24 max-w-3xl"> <main className="mx-auto my-24 max-w-3xl">
<Dialog defaultOpen={true}> <div className="fixed inset-0 z-50 overflow-y-auto">
<DialogContent <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
onInteractOutside={(e) => { <div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
e.preventDefault(); <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
}}> &#8203;
</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 && ( {error && (
<div> <div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100"> <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" /> <XIcon className="h-6 w-6 text-red-600" />
</div> </div>
<div className="mt-5 flex justify-center"> <div className="mt-3 text-center sm:mt-5">
<DialogHeader title={error} /> <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
{error}
</h3>
</div> </div>
</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"> <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" /> <XIcon className="h-6 w-6 text-red-600" />
</div> </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"> <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> </h3>
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
@ -70,7 +79,9 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
</p> </p>
</div> </div>
<div className="mt-4 border-t border-b py-4"> <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"> <p className="text-gray-500">
<CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" /> <CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
{dayjs(props.booking?.startTime).format( {dayjs(props.booking?.startTime).format(
@ -89,8 +100,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
onChange={(e) => setCancellationReason(e.target.value)} onChange={(e) => setCancellationReason(e.target.value)}
className="mb-5 sm:mb-6" className="mb-5 sm:mb-6"
/> />
<div className="flex justify-center"> <div className="space-x-2 text-center rtl:space-x-reverse">
<DialogFooter>
<Button color="secondary" onClick={() => router.push("/reschedule/" + uid)}> <Button color="secondary" onClick={() => router.push("/reschedule/" + uid)}>
{t("reschedule_this")} {t("reschedule_this")}
</Button> </Button>
@ -98,13 +108,16 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
data-testid="cancel" data-testid="cancel"
onClick={async () => { onClick={async () => {
setLoading(true); setLoading(true);
const payload = { const payload = {
uid: uid, uid: uid,
reason: cancellationReason, reason: cancellationReason,
}; };
telemetry.withJitsu((jitsu) => telemetry.withJitsu((jitsu) =>
jitsu.track(telemetryEventTypes.bookingCancelled, collectPageParameters()) jitsu.track(telemetryEventTypes.bookingCancelled, collectPageParameters())
); );
const res = await fetch("/api/cancel", { const res = await fetch("/api/cancel", {
body: JSON.stringify(payload), body: JSON.stringify(payload),
headers: { headers: {
@ -112,6 +125,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
}, },
method: "DELETE", method: "DELETE",
}); });
if (res.status >= 200 && res.status < 300) { if (res.status >= 200 && res.status < 300) {
await router.push( await router.push(
`/cancel/success?name=${props.profile.name}&title=${ `/cancel/success?name=${props.profile.name}&title=${
@ -132,14 +146,15 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
loading={loading}> loading={loading}>
{t("cancel_event")} {t("cancel_event")}
</Button> </Button>
</DialogFooter>
</div> </div>
</div> </div>
)} )}
</> </>
)} )}
</DialogContent> </div>
</Dialog> </div>
</div>
</div>
</main> </main>
</div> </div>
); );

43
apps/web/pages/cancel/success.tsx
View file

@ -5,7 +5,6 @@ import { useRouter } from "next/router";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button"; import Button from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import { HeadSeo } from "@components/seo/head-seo"; import { HeadSeo } from "@components/seo/head-seo";
@ -23,34 +22,46 @@ export default function CancelSuccess() {
description={`${t("cancelled")} ${title} | ${name}`} description={`${t("cancelled")} ${title} | ${name}`}
/> />
<main className="mx-auto my-24 max-w-3xl"> <main className="mx-auto my-24 max-w-3xl">
<Dialog defaultOpen={true}> <div className="fixed inset-0 z-50 overflow-y-auto">
<DialogContent <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
onInteractOutside={(e) => { <div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
e.preventDefault(); <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
}}> &#8203;
</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"> <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" /> <CheckIcon className="h-6 w-6 text-green-600" />
</div> </div>
<div className="mt-5 flex justify-center"> <div className="mt-3 text-center sm:mt-5">
<DialogHeader title={t("cancellation_successful")} /> <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
</div> {t("cancellation_successful")}
</h3>
{!loading && !session?.user && ( {!loading && !session?.user && (
<div className="-mt-6 flex justify-center"> <div className="mt-2">
<p className="text-center text-sm text-gray-500">{t("free_to_pick_another_event_type")}</p> <p className="text-sm text-gray-500">{t("free_to_pick_another_event_type")}</p>
</div> </div>
)} )}
<div className="flex justify-center"> </div>
<DialogFooter> </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 href={eventPage as string}>Pick another</Button>}
{!loading && session?.user && ( {!loading && session?.user && (
<Button data-testid="back-to-bookings" href="/bookings" EndIcon={ArrowRightIcon}> <Button data-testid="back-to-bookings" href="/bookings" EndIcon={ArrowRightIcon}>
{t("back_to_bookings")} {t("back_to_bookings")}
</Button> </Button>
)} )}
</DialogFooter>
</div> </div>
</DialogContent> </div>
</Dialog> </div>
</div>
</div>
</div>
</main> </main>
</div> </div>
); );

68
apps/web/pages/video/meeting-ended/[uid].tsx
View file

@ -6,9 +6,7 @@ import { getSession } from "next-auth/react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useEffect } from "react"; import { useEffect } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button"; import Button from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import prisma from "@lib/prisma"; import prisma from "@lib/prisma";
import { detectBrowserTimeFormat } from "@lib/timeFormat"; import { detectBrowserTimeFormat } from "@lib/timeFormat";
@ -18,7 +16,6 @@ import { HeadSeo } from "@components/seo/head-seo";
export default function MeetingUnavailable(props: inferSSRProps<typeof getServerSideProps>) { export default function MeetingUnavailable(props: inferSSRProps<typeof getServerSideProps>) {
const router = useRouter(); const router = useRouter();
const { t } = useLocale();
// if no booking redirectis to the 404 page // if no booking redirectis to the 404 page
const emptyBooking = props.booking === null; const emptyBooking = props.booking === null;
useEffect(() => { useEffect(() => {
@ -31,38 +28,49 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
<div> <div>
<HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} /> <HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
<main className="mx-auto my-24 max-w-3xl"> <main className="mx-auto my-24 max-w-3xl">
<Dialog defaultOpen={true}> <div className="fixed inset-0 z-50 overflow-y-auto">
<DialogContent <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
onInteractOutside={(e) => { <div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
e.preventDefault(); <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
}}> &#8203;
<div className="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-red-100"> </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" /> <XIcon className="h-6 w-6 text-red-600" />
</div> </div>
<div className="mt-5 flex justify-center"> <div className="mt-3 text-center sm:mt-5">
<DialogHeader title={props.booking.title} /> <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
</div>
<h3
className="flex justify-center text-center text-lg font-medium leading-6 text-gray-900"
id="modal-headline">
This meeting is in the past. This meeting is in the past.
</h3> </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> </div>
</DialogContent> <div className="mt-4 border-t border-b py-4">
</Dialog> <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> </main>
</div> </div>
); );

65
apps/web/pages/video/meeting-not-started/[uid].tsx
View file

@ -6,9 +6,7 @@ import { getSession } from "next-auth/react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useEffect } from "react"; import { useEffect } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button"; import Button from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import prisma from "@lib/prisma"; import prisma from "@lib/prisma";
import { detectBrowserTimeFormat } from "@lib/timeFormat"; import { detectBrowserTimeFormat } from "@lib/timeFormat";
@ -18,7 +16,7 @@ import { HeadSeo } from "@components/seo/head-seo";
export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) { export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
const router = useRouter(); const router = useRouter();
const { t } = useLocale();
//if no booking redirectis to the 404 page //if no booking redirectis to the 404 page
const emptyBooking = props.booking === null; const emptyBooking = props.booking === null;
useEffect(() => { useEffect(() => {
@ -31,33 +29,54 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
<div> <div>
<HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} /> <HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
<main className="mx-auto my-24 max-w-3xl"> <main className="mx-auto my-24 max-w-3xl">
<Dialog defaultOpen={true}> <div className="fixed inset-0 z-50 overflow-y-auto">
<DialogContent <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
onInteractOutside={(e) => { <div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
e.preventDefault(); <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
}}> &#8203;
<div className="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-red-100"> </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" /> <XIcon className="h-6 w-6 text-red-600" />
</div> </div>
<div className="mt-5 flex justify-center"> <div className="mt-3 text-center sm:mt-5">
<DialogHeader title={props.booking.title} /> <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
This meeting has not started yet
</h3>
</div> </div>
<p className="-mt-4 flex items-center justify-center text-sm text-gray-500"> <div className="mt-4 border-t border-b py-4">
<CalendarIcon className="mr-1 inline-block h-4 w-4" /> <h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
{dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")} {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>
<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. This meeting will be accessible 60 minutes in advance.
</p> </p>
<div className="flex justify-center">
<DialogFooter>
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
{t("go_back_home")}
</Button>
</DialogFooter>
</div> </div>
</DialogContent> </div>
</Dialog> <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> </main>
</div> </div>
); );

43
apps/web/pages/video/no-meeting-found.tsx
View file

@ -3,7 +3,6 @@ import { ArrowRightIcon } from "@heroicons/react/solid";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button"; import Button from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import { HeadSeo } from "@components/seo/head-seo"; import { HeadSeo } from "@components/seo/head-seo";
@ -14,27 +13,41 @@ export default function NoMeetingFound() {
<div> <div>
<HeadSeo title={t("no_meeting_found")} description={t("no_meeting_found")} /> <HeadSeo title={t("no_meeting_found")} description={t("no_meeting_found")} />
<main className="mx-auto my-24 max-w-3xl"> <main className="mx-auto my-24 max-w-3xl">
<Dialog defaultOpen={true}> <div className="fixed inset-0 z-50 overflow-y-auto">
<DialogContent <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
onInteractOutside={(e) => { <div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
e.preventDefault(); <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
}}> &#8203;
<div className="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-red-100"> </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" /> <XIcon className="h-6 w-6 text-red-600" />
</div> </div>
<div className="mt-5 flex justify-center"> <div className="mt-3 text-center sm:mt-5">
<DialogHeader title={t("no_meeting_found")} /> <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
{t("no_meeting_found")}
</h3>
</div> </div>
<p className="-mt-4 text-center text-sm text-gray-500">{t("no_meeting_found_description")}</p> <div className="mt-2">
<div className="flex justify-center"> <p className="text-center text-sm text-gray-500">{t("no_meeting_found_description")}</p>
<DialogFooter> </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}> <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
{t("go_back_home")} {t("go_back_home")}
</Button> </Button>
</DialogFooter>
</div> </div>
</DialogContent> </div>
</Dialog> </div>
</div>
</div>
</div>
</main> </main>
</div> </div>
); );