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

Refactor old dialog to radix Dialog (#2151)

Browse source 
* --init

* refactored more dialogs --WIP

* more modals replaced by dialogs --WIP

* fix for new dialog location import

* --WIP

* lint fix

* final dialog refactor

* added more width to max-w for dialog in sm screen

* clean-up

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:
Syed Ali Shahbaz 2022-03-17 18:50:49 +05:30 committed by GitHub
parent df64af2aba
commit bcbf8390e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 724 additions and 820 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/web/components/team/MemberChangeRoleModal.tsx
View file

@ -2,14 +2,15 @@ import { MembershipRole } from "@prisma/client";
import { useState } from "react";
import React, { SyntheticEvent } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button";
import { useLocale } from "@lib/hooks/useLocale";
import { trpc } from "@lib/trpc";
import ModalContainer from "@components/ui/ModalContainer";
export default function MemberChangeRoleModal(props: {
isOpen: boolean;
memberId: number;
teamId: number;
initialRole: MembershipRole;
@ -41,7 +42,7 @@ export default function MemberChangeRoleModal(props: {
}
return (
<ModalContainer>
<ModalContainer isOpen={props.isOpen} onExit={props.onExit}>
<>
<div className="mb-4 sm:flex sm:items-start">
<div className="text-center sm:text-left">

45
apps/web/components/team/MemberInvitationModal.tsx
View file

@ -5,13 +5,20 @@ import { useState } from "react";
import React, { SyntheticEvent } 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 { useLocale } from "@lib/hooks/useLocale";
import { TeamWithMembers } from "@lib/queries/teams";
import { trpc } from "@lib/trpc";
export default function MemberInvitationModal(props: { team: TeamWithMembers | null; onExit: () => void }) {
type MemberInvitationModalProps = {
isOpen: boolean;
team: TeamWithMembers | null;
onExit: () => void;
};
export default function MemberInvitationModal(props: MemberInvitationModalProps) {
const [errorMessage, setErrorMessage] = useState("");
const { t, i18n } = useLocale();
const utils = trpc.useContext();
@ -48,21 +55,8 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
}
return (
<div
className="fixed inset-0 z-50 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true">
<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 z-0 bg-gray-500 bg-opacity-75 transition-opacity"
aria-hidden="true"></div>
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
&#8203;
</span>
<div className="inline-block transform 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-lg sm:p-6 sm:align-middle">
<Dialog open={props.isOpen} onOpenChange={props.onExit}>
<DialogContent>
<div className="mb-4 sm:flex sm:items-start">
<div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
<UserIcon className="text-brandcontrast h-6 w-6" />
@ -115,8 +109,8 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
<div className="flex flex-row rounded-sm bg-gray-50 px-3 py-2">
<InformationCircleIcon className="h-5 w-5 flex-shrink-0 fill-gray-400" aria-hidden="true" />
<span className="ml-2 text-sm leading-tight text-gray-500">
Note: This will cost an extra seat ($12/m) on your subscription if this invitee does not
have a pro account.{" "}
Note: This will cost an extra seat ($12/m) on your subscription if this invitee does not have
a pro account.{" "}
<a href="#" className="underline">
Learn More
</a>
@ -129,7 +123,10 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
{errorMessage}
</p>
)}
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<DialogFooter>
<Button type="button" color="secondary" onClick={props.onExit}>
{t("cancel")}
</Button>
<Button
type="submit"
color="primary"
@ -137,13 +134,9 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
data-testid="invite-new-member-button">
{t("invite")}
</Button>
<Button type="button" color="secondary" onClick={props.onExit}>
{t("cancel")}
</Button>
</div>
</DialogFooter>
</form>
</div>
</div>
</div>
</DialogContent>
</Dialog>
);
}

9
apps/web/components/team/MemberListItem.tsx
View file

@ -164,6 +164,7 @@ export default function MemberListItem(props: Props) {
</div>
{showChangeMemberRoleModal && (
<MemberChangeRoleModal
isOpen={showChangeMemberRoleModal}
teamId={props.team?.id}
memberId={props.member.id}
initialRole={props.member.role as MembershipRole}
@ -171,9 +172,13 @@ export default function MemberListItem(props: Props) {
/>
)}
{showTeamAvailabilityModal && (
<ModalContainer wide noPadding>
<ModalContainer
wide
noPadding
isOpen={showTeamAvailabilityModal}
onExit={() => setShowTeamAvailabilityModal(false)}>
<TeamAvailabilityModal team={props.team} member={props.member} />
<div className="space-x-2 border-t p-5 rtl:space-x-reverse">
<div className="space-x-2 border-t py-5 rtl:space-x-reverse">
<Button onClick={() => setShowTeamAvailabilityModal(false)}>{t("done")}</Button>
{props.team.membership.role !== MembershipRole.MEMBER && (
<Link href={`/settings/teams/${props.team.id}/availability`}>

51
apps/web/components/team/TeamCreateModal.tsx
View file

@ -1,12 +1,15 @@
import { UsersIcon } from "@heroicons/react/outline";
import { useRef, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui";
import { Alert } from "@calcom/ui/Alert";
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
import { useLocale } from "@lib/hooks/useLocale";
import { trpc } from "@lib/trpc";
interface Props {
isOpen: boolean;
onClose: () => void;
}
@ -32,24 +35,12 @@ export default function TeamCreate(props: Props) {
};
return (
<div
className="fixed inset-0 z-50 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true">
<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 z-0 bg-gray-500 bg-opacity-75 transition-opacity"
aria-hidden="true"></div>
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
&#8203;
</span>
<div className="inline-block transform rounded-sm 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-lg sm:p-6 sm:align-middle">
<>
<Dialog open={props.isOpen} onOpenChange={props.onClose}>
<DialogContent>
<div className="mb-4 sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-neutral-100 sm:mx-0 sm:h-10 sm:w-10">
<UsersIcon className="h-6 w-6 text-neutral-900" />
<div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
<UsersIcon className="text-brandcontrast h-6 w-6" />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@ -76,17 +67,21 @@ export default function TeamCreate(props: Props) {
/>
</div>
{errorMessage && <Alert severity="error" title={errorMessage} />}
<div className="mt-5 flex flex-row-reverse sm:mt-4">
<button type="submit" className="btn btn-primary">
{t("create_team")}
</button>
<button onClick={props.onClose} type="button" className="btn btn-white ltr:mr-2">
<DialogFooter>
<Button type="button" color="secondary" onClick={props.onClose}>
{t("cancel")}
</button>
</div>
</Button>
<Button
type="submit"
color="primary"
className="ltr:ml-2 rtl:mr-2"
data-testid="create-new-team-button">
{t("create_team")}
</Button>
</DialogFooter>
</form>
</div>
</div>
</div>
</DialogContent>
</Dialog>
</>
);
}

22
apps/web/components/ui/ModalContainer.tsx
View file

@ -1,29 +1,24 @@
import classNames from "classnames";
import React from "react";
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
interface Props extends React.PropsWithChildren<any> {
wide?: boolean;
scroll?: boolean;
noPadding?: boolean;
isOpen: boolean;
onExit: () => void;
}
export default function ModalContainer(props: Props) {
return (
<div
className="fixed inset-0 z-50 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true">
<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 z-0 bg-gray-500 bg-opacity-75 transition-opacity"
aria-hidden="true"></div>
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
&#8203;
</span>
<Dialog open={props.isOpen} onOpenChange={props.onExit}>
<DialogContent>
<div
className={classNames(
"min-w-96 inline-block transform rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:p-6 sm:align-middle",
"inline-block transform bg-white text-left align-bottom transition-all sm:align-middle",
{
"sm:w-full sm:max-w-lg ": !props.wide,
"sm:w-4xl sm:max-w-4xl": props.wide,
@ -33,7 +28,8 @@ export default function ModalContainer(props: Props) {
)}>
{props.children}
</div>
</div>
</DialogContent>
</Dialog>
</div>
);
}

1
apps/web/components/ui/Scheduler.tsx
View file

@ -124,6 +124,7 @@ export const Scheduler = ({ availability, setAvailability, timeZone, setTimeZone
</div>
{editSchedule >= 0 && (
<SetTimesModal
isOpen={true}
startTime={
openingHours[editSchedule]
? new Date(openingHours[editSchedule].startTime).getUTCHours() * 60 +

36
apps/web/components/ui/modal/SetTimesModal.tsx
View file

@ -3,14 +3,15 @@ import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import { useRef, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import showToast from "@calcom/lib/notification";
import Button from "@calcom/ui/Button";
import { useLocale } from "@lib/hooks/useLocale";
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
dayjs.extend(customParseFormat);
interface SetTimesModalProps {
isOpen: boolean;
startTime: number;
endTime: number;
onChange: (times: { startTime: number; endTime: number }) => void;
@ -86,21 +87,8 @@ export default function SetTimesModal(props: SetTimesModalProps) {
)(STEP);
return (
<div
className="fixed inset-0 z-50 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true">
<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 z-0 bg-gray-500 bg-opacity-75 transition-opacity"
aria-hidden="true"></div>
<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-lg sm:p-6 sm:align-middle">
<Dialog open={props.isOpen} onOpenChange={props.onExit}>
<DialogContent>
<div className="mb-4 sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
<ClockIcon className="h-6 w-6 text-black" />
@ -201,7 +189,7 @@ export default function SetTimesModal(props: SetTimesModalProps) {
/>
</div>
</div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<DialogFooter>
<Button
onClick={(event) => {
event.preventDefault();
@ -212,10 +200,7 @@ export default function SetTimesModal(props: SetTimesModalProps) {
const enteredEndMins = parseInt(endMinsRef.current.value);
if (
isValidTime(
enteredStartHours * 60 + enteredStartMins,
enteredEndHours * 60 + enteredEndMins
)
isValidTime(enteredStartHours * 60 + enteredStartMins, enteredEndHours * 60 + enteredEndMins)
) {
props.onChange({
startTime: enteredStartHours * 60 + enteredStartMins,
@ -230,9 +215,8 @@ export default function SetTimesModal(props: SetTimesModalProps) {
<Button onClick={props.onExit} type="button" color="secondary" className="ltr:mr-2">
{t("cancel")}
</Button>
</div>
</div>
</div>
</div>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

31
apps/web/ee/components/stripe/PaymentPage.tsx
View file

@ -8,11 +8,12 @@ import Head from "next/head";
import React, { FC, useEffect, useState } from "react";
import { FormattedNumber, IntlProvider } from "react-intl";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import getStripe from "@calcom/stripe/client";
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
import PaymentComponent from "@ee/components/stripe/Payment";
import { PaymentPageProps } from "@ee/pages/payment/[uid]";
import { useLocale } from "@lib/hooks/useLocale";
import useTheme from "@lib/hooks/useTheme";
import { isBrowserLocale24h } from "@lib/timeFormat";
@ -43,17 +44,11 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="mx-auto max-w-3xl py-24">
<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">
&#8203;
</span>
<div
className="inline-block transform overflow-hidden rounded-sm border border-neutral-200 bg-white px-8 pt-5 pb-4 text-left align-bottom transition-all dark:border-neutral-700 dark:bg-gray-800 sm:my-8 sm:w-full sm:max-w-lg sm:py-6 sm:align-middle"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline">
<Dialog defaultOpen={true}>
<DialogContent
onInteractOutside={(e) => {
e.preventDefault();
}}>
<div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<CreditCardIcon className="h-8 w-8 text-green-600" />
@ -65,9 +60,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
{t("payment")}
</h3>
<div className="mt-3">
<p className="text-sm text-neutral-600 dark:text-gray-300">
{t("pay_later_instructions")}
</p>
<p className="text-sm text-neutral-600 dark:text-gray-300">{t("pay_later_instructions")}</p>
</div>
<div className="mt-4 grid grid-cols-3 border-t border-b py-4 text-left text-gray-700 dark:border-gray-900 dark:text-gray-300">
<div className="font-medium">{t("what")}</div>
@ -100,6 +93,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
</div>
</div>
</div>
<div className="mt-5 sm:mt-6">
<div>
{props.payment.success && !props.payment.refunded && (
<div className="mt-4 text-center text-gray-700 dark:text-gray-300">{t("paid")}</div>
@ -118,15 +112,18 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
<div className="mt-4 text-center text-gray-700 dark:text-gray-300">{t("refunded")}</div>
)}
</div>
<div className="flex justify-center">
<DialogFooter>
{!props.profile.hideBranding && (
<div className="mt-4 border-t pt-4 text-center text-xs text-gray-400 dark:border-gray-900 dark:text-white">
<a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
</div>
)}
</DialogFooter>
</div>
</div>
</div>
</div>
</DialogContent>
</Dialog>
</main>
</div>
) : null;

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

@ -5,6 +5,7 @@ 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";
@ -38,26 +39,18 @@ 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">
<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">
&#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">
<Dialog defaultOpen={true}>
<DialogContent
onInteractOutside={(e) => {
e.preventDefault();
}}>
{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-3 text-center sm:mt-5">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
{error}
</h3>
<div className="mt-5 flex justify-center">
<DialogHeader title={error} />
</div>
</div>
)}
@ -67,11 +60,9 @@ 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-3 text-center sm:mt-5">
<div className="mt-5 text-center">
<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">
@ -79,9 +70,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
</p>
</div>
<div className="mt-4 border-t border-b py-4">
<h2 className="font-cal mb-2 text-lg font-medium text-gray-600">
{props.booking?.title}
</h2>
<DialogHeader title={props.booking?.title} />
<p className="text-gray-500">
<CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
{dayjs(props.booking?.startTime).format(
@ -100,7 +89,8 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
onChange={(e) => setCancellationReason(e.target.value)}
className="mb-5 sm:mb-6"
/>
<div className="space-x-2 text-center rtl:space-x-reverse">
<div className="flex justify-center">
<DialogFooter>
<Button color="secondary" onClick={() => router.push("/reschedule/" + uid)}>
{t("reschedule_this")}
</Button>
@ -108,16 +98,13 @@ 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: {
@ -125,7 +112,6 @@ 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=${
@ -146,15 +132,14 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
loading={loading}>
{t("cancel_event")}
</Button>
</DialogFooter>
</div>
</div>
)}
</>
)}
</div>
</div>
</div>
</div>
</DialogContent>
</Dialog>
</main>
</div>
);

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

@ -3,9 +3,9 @@ import { ArrowRightIcon } from "@heroicons/react/solid";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button";
import { useLocale } from "@lib/hooks/useLocale";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import { HeadSeo } from "@components/seo/head-seo";
@ -23,46 +23,34 @@ export default function CancelSuccess() {
description={`${t("cancelled")} ${title} | ${name}`}
/>
<main className="mx-auto my-24 max-w-3xl">
<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">
&#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>
<Dialog defaultOpen={true}>
<DialogContent
onInteractOutside={(e) => {
e.preventDefault();
}}>
<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-3 text-center sm:mt-5">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
{t("cancellation_successful")}
</h3>
<div className="mt-5 flex justify-center">
<DialogHeader title={t("cancellation_successful")} />
</div>
{!loading && !session?.user && (
<div className="mt-2">
<p className="text-sm text-gray-500">{t("free_to_pick_another_event_type")}</p>
<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>
)}
</div>
</div>
<div className="mt-5 text-center sm:mt-6">
<div className="mt-5">
<div className="flex justify-center">
<DialogFooter>
{!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>
</div>
</div>
</div>
</div>
</div>
</DialogContent>
</Dialog>
</main>
</div>
);

6
apps/web/pages/settings/teams/[id]/index.tsx
View file

@ -142,7 +142,11 @@ export function TeamSettingsPage() {
</div>
</div>
{showMemberInvitationModal && (
<MemberInvitationModal team={team} onExit={() => setShowMemberInvitationModal(false)} />
<MemberInvitationModal
isOpen={showMemberInvitationModal}
team={team}
onExit={() => setShowMemberInvitationModal(false)}
/>
)}
</>
)}

4
apps/web/pages/settings/teams/index.tsx
View file

@ -58,7 +58,9 @@ export default function Teams() {
className="my-4"
/>
)}
{showCreateTeamModal && <TeamCreateModal onClose={() => setShowCreateTeamModal(false)} />}
{showCreateTeamModal && (
<TeamCreateModal isOpen={showCreateTeamModal} onClose={() => setShowCreateTeamModal(false)} />
)}
<div className={classNames("my-4 flex justify-end", isFreePlan && "opacity-50")}>
<Button
disabled={isFreePlan}

34
apps/web/pages/success.tsx
View file

@ -11,6 +11,7 @@ import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import Button from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
import { EmailInput } from "@calcom/ui/form/fields";
import { asStringOrThrow, asStringOrNull } from "@lib/asStringOrNull";
@ -99,28 +100,22 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
/>
<CustomBranding lightVal={props.profile.brandColor} darkVal={props.profile.darkBrandColor} />
<main className="mx-auto max-w-3xl py-24">
<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">
&#8203;
</span>
<div
className="inline-block transform overflow-hidden rounded-sm border border-neutral-200 bg-white px-8 pt-5 pb-4 text-left align-bottom transition-all dark:border-neutral-700 dark:bg-gray-800 sm:my-8 sm:w-full sm:max-w-lg sm:py-6 sm:align-middle"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline">
<div>
<Dialog defaultOpen={true}>
<DialogContent
onInteractOutside={(e) => {
e.preventDefault();
}}>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
{!needsConfirmation && <CheckIcon className="h-8 w-8 text-green-600" />}
{needsConfirmation && <ClockIcon className="h-8 w-8 text-green-600" />}
</div>
<div className="mt-3 text-center sm:mt-5">
<div className="mt-5 flex justify-center">
<h3
className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
id="modal-headline">
{needsConfirmation ? t("submitted") : t("meeting_is_scheduled")}
</h3>
</div>
<div className="mt-3">
<p className="text-sm text-neutral-600 dark:text-gray-300">
{needsConfirmation
@ -157,8 +152,6 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
</>
)}
</div>
</div>
</div>
{!needsConfirmation && (
<div className="mt-5 flex border-b pt-2 pb-4 text-center dark:border-gray-900 sm:mt-0 sm:pt-4">
<span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
@ -174,8 +167,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
.utc()
.format("YYYYMMDDTHHmmss[Z]")}&text=${eventName}&details=${
props.eventType.description
}` +
(typeof location === "string" ? "&location=" + encodeURIComponent(location) : "")
}` + (typeof location === "string" ? "&location=" + encodeURIComponent(location) : "")
}>
<a className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white">
<svg
@ -258,6 +250,8 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
</div>
</div>
)}
<div className="flex justify-center">
<DialogFooter>
{!props.hideBranding && (
<div className="pt-4 text-center text-xs text-gray-400 dark:border-gray-900 dark:text-white">
<a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
@ -281,10 +275,10 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
</form>
</div>
)}
</DialogFooter>
</div>
</div>
</div>
</div>
</DialogContent>
</Dialog>
</main>
</div>
)) ||

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

@ -6,7 +6,9 @@ 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";
@ -16,6 +18,7 @@ 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(() => {
@ -28,49 +31,38 @@ 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">
<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">
&#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-red-100">
<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">
<XIcon className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
<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">
This meeting is in the past.
</h3>
</div>
<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 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>
</div>
</div>
<div className="mt-5 text-center sm:mt-6">
<div className="mt-5">
<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}>
Go back home
{t("go_back_home")}
</Button>
</DialogFooter>
</div>
</div>
</div>
</div>
</div>
</div>
</DialogContent>
</Dialog>
</main>
</div>
);

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

@ -6,7 +6,9 @@ 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";
@ -16,7 +18,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(() => {
@ -29,54 +31,33 @@ 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">
<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">
&#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-red-100">
<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">
<XIcon className="h-6 w-6 text-red-600" />
</div>
<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 className="mt-5 flex justify-center">
<DialogHeader title={props.booking.title} />
</div>
<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 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")}
</p>
</div>
<div className="mt-3 text-center sm:mt-5">
<p className="text-sm text-gray-500">
<p className="flex justify-center text-center text-sm text-gray-500">
This meeting will be accessible 60 minutes in advance.
</p>
</div>
</div>
<div className="mt-5 text-center sm:mt-6">
<div className="mt-5">
<div className="flex justify-center">
<DialogFooter>
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
Go back home
{t("go_back_home")}
</Button>
</DialogFooter>
</div>
</div>
</div>
</div>
</div>
</div>
</DialogContent>
</Dialog>
</main>
</div>
);

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

@ -1,9 +1,9 @@
import { XIcon } from "@heroicons/react/outline";
import { ArrowRightIcon } from "@heroicons/react/solid";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button";
import { useLocale } from "@lib/hooks/useLocale";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import { HeadSeo } from "@components/seo/head-seo";
@ -14,41 +14,27 @@ 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">
<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">
&#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-red-100">
<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">
<XIcon className="h-6 w-6 text-red-600" />
</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("no_meeting_found")}
</h3>
<div className="mt-5 flex justify-center">
<DialogHeader title={t("no_meeting_found")} />
</div>
<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">
<p className="-mt-4 text-center text-sm text-gray-500">{t("no_meeting_found_description")}</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>
</div>
</div>
</div>
</div>
</DialogContent>
</Dialog>
</main>
</div>
);

2
packages/ui/Dialog.tsx
View file

@ -63,7 +63,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
<DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
<DialogPrimitive.Content
{...props}
className="fixed left-1/2 top-1/2 z-[9999999999] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6 text-left shadow-xl sm:w-full sm:max-w-lg sm:align-middle"
className="fixed left-1/2 top-1/2 z-[9999999999] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6 text-left shadow-xl focus-visible:outline-none sm:w-full sm:max-w-[35rem] sm:align-middle"
ref={forwardedRef}>
{children}
</DialogPrimitive.Content>