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

Partial implementation of the confirmation page redesign

Browse source
This commit is contained in:
Bailey Pumfleet 2021-08-06 23:14:35 +01:00
parent f3a780188f
commit d5c77c42a3
1 changed files with 35 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
pages/success.tsx
View file

@ -60,7 +60,7 @@ export default function Success(props) {
return ( return (
isReady && ( isReady && (
<div> <div className="bg-neutral-50 dark:bg-neutral-900 h-screen">
<Head> <Head>
<title> <title>
Booking {props.eventType.requiresConfirmation ? "Submitted" : "Confirmed"} | {eventName} | Booking {props.eventType.requiresConfirmation ? "Submitted" : "Confirmed"} | {eventName} |
@ -68,7 +68,7 @@ export default function Success(props) {
</title> </title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<main className="max-w-3xl mx-auto my-24"> <main className="max-w-3xl mx-auto py-24">
<div className="fixed z-50 inset-0 overflow-y-auto"> <div className="fixed z-50 inset-0 overflow-y-auto">
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div className="fixed inset-0 my-4 sm:my-0 transition-opacity" aria-hidden="true"> <div className="fixed inset-0 my-4 sm:my-0 transition-opacity" aria-hidden="true">
@ -76,61 +76,61 @@ export default function Success(props) {
&#8203; &#8203;
</span> </span>
<div <div
className="inline-block align-bottom dark:bg-gray-800 bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6" className="inline-block align-bottom dark:bg-gray-800 bg-white rounded-sm px-8 pt-5 pb-4 text-left overflow-hidden border border-neutral-200 transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:py-6"
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
aria-labelledby="modal-headline"> aria-labelledby="modal-headline">
<div> <div>
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100"> <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
{!props.eventType.requiresConfirmation && ( {!props.eventType.requiresConfirmation && (
<CheckIcon className="h-6 w-6 text-green-600" /> <CheckIcon className="h-8 w-8 text-green-600" />
)} )}
{props.eventType.requiresConfirmation && ( {props.eventType.requiresConfirmation && (
<ClockIcon className="h-6 w-6 text-green-600" /> <ClockIcon className="h-8 w-8 text-green-600" />
)} )}
</div> </div>
<div className="mt-3 text-center sm:mt-5"> <div className="mt-3 text-center sm:mt-5">
<h3 <h3
className="text-lg leading-6 font-medium dark:text-white text-gray-900" className="text-2xl leading-6 font-semibold dark:text-white text-neutral-900"
id="modal-headline"> id="modal-headline">
Booking {props.eventType.requiresConfirmation ? "Submitted" : "Confirmed"} {props.eventType.requiresConfirmation ? "Submitted" : "This meeting is scheduled"}
</h3> </h3>
<div className="mt-2"> <div className="mt-3">
<p className="text-sm text-gray-500 dark:text-gray-300"> <p className="text-sm text-neutral-600 dark:text-gray-300">
{props.eventType.requiresConfirmation {props.eventType.requiresConfirmation
? `${ ? `${
props.user.name || props.user.username props.user.name || props.user.username
} still needs to confirm or reject the booking.` } still needs to confirm or reject the booking.`
: `You are scheduled in with ${props.user.name || props.user.username}.`} : `We emailed you and the other attendees a calendar invitation with all the details.`}
</p> </p>
</div> </div>
<div className="mt-4 border-t border-b dark:border-gray-900 py-4"> <div className="mt-4 text-gray-700 border-t border-b dark:border-gray-900 py-4 grid grid-cols-3 text-left">
<h2 className="text-lg font-medium text-gray-600 dark:text-gray-100 mb-2"> <div className="font-medium">What</div>
{eventName} <div className="mb-6 col-span-2">{eventName}</div>
</h2> <div className="font-medium">When</div>
<p className="text-gray-500 dark:text-gray-50 mb-1"> <div className="mb-6 col-span-2">
<ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> {date.format("dddd, DD MMMM YYYY")}
{props.eventType.length} minutes <br />
</p> {date.format(is24h ? "H:mm" : "h:mma")} - {props.eventType.length} mins{" "}
<span className="text-gray-500">
({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
</span>
</div>
{location && ( {location && (
<p className="text-gray-500 mb-1"> <>
<LocationMarkerIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> <div className="font-medium">Where</div>
{location} <div className="col-span-2">{location}</div>
</p> </>
)} )}
<p className="text-gray-500 dark:text-gray-50">
<CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{date.format((is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")}
</p>
</div> </div>
</div> </div>
</div> </div>
{!props.eventType.requiresConfirmation && ( {!props.eventType.requiresConfirmation && (
<div className="mt-5 sm:mt-0 pt-2 text-center"> <div className="mt-5 sm:mt-0 sm:pt-4 pt-2 text-center flex">
<span className="font-medium text-gray-500 dark:text-gray-50"> <span className="font-medium text-gray-700 dark:text-gray-50 flex self-center mr-6">
Add to your calendar Add to calendar
</span> </span>
<div className="flex mt-2"> <div className="flex">
<Link <Link
href={ href={
`https://calendar.google.com/calendar/r/eventedit?dates=${date `https://calendar.google.com/calendar/r/eventedit?dates=${date
@ -142,9 +142,9 @@ export default function Success(props) {
props.eventType.description props.eventType.description
}` + (location ? "&location=" + encodeURIComponent(location) : "") }` + (location ? "&location=" + encodeURIComponent(location) : "")
}> }>
<a className="mx-2 btn-wide btn-white"> <a className="mx-2 rounded-sm border border-neutral-200 py-2 px-3">
<svg <svg
className="inline-block w-4 h-4 mr-1 -mt-1" className="inline-block w-4 h-4 -mt-1"
fill="currentColor" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"> viewBox="0 0 24 24">
@ -166,7 +166,7 @@ export default function Success(props) {
eventName eventName
) + (location ? "&location=" + location : "") ) + (location ? "&location=" + location : "")
}> }>
<a className="mx-2 btn-wide btn-white" target="_blank"> <a className="mx-2 rounded-sm border border-neutral-200 py-2 px-3" target="_blank">
<svg <svg
className="inline-block w-4 h-4 mr-1 -mt-1" className="inline-block w-4 h-4 mr-1 -mt-1"
fill="currentColor" fill="currentColor"
@ -190,7 +190,7 @@ export default function Success(props) {
eventName eventName
) + (location ? "&location=" + location : "") ) + (location ? "&location=" + location : "")
}> }>
<a className="mx-2 btn-wide btn-white" target="_blank"> <a className="mx-2 rounded-sm border border-neutral-200 py-2 px-3" target="_blank">
<svg <svg
className="inline-block w-4 h-4 mr-1 -mt-1" className="inline-block w-4 h-4 mr-1 -mt-1"
fill="currentColor" fill="currentColor"
@ -202,7 +202,7 @@ export default function Success(props) {
</a> </a>
</Link> </Link>
<Link href={"data:text/calendar," + eventLink()}> <Link href={"data:text/calendar," + eventLink()}>
<a className="mx-2 btn-wide btn-white" download={props.eventType.title + ".ics"}> <a className="mx-2 rounded-sm border border-neutral-200 py-2 px-3" download={props.eventType.title + ".ics"}>
<svg <svg
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"