Partial implementation of the confirmation page redesign
Bailey Pumfleet
parent
f3a780188f
commit
d5c77c42a3
|
|
@ -60,7 +60,7 @@ export default function Success(props) {
|
|||
|
||||
return (
|
||||
isReady && (
|
||||
<div>
|
||||
<div className="bg-neutral-50 dark:bg-neutral-900 h-screen">
|
||||
<Head>
|
||||
<title>
|
||||
Booking {props.eventType.requiresConfirmation ? "Submitted" : "Confirmed"} | {eventName} |
|
||||
|
|
@ -68,7 +68,7 @@ export default function Success(props) {
|
|||
</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</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="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">
|
||||
|
|
@ -76,61 +76,61 @@ export default function Success(props) {
|
|||
​
|
||||
</span>
|
||||
<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"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
<div>
|
||||
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
|
||||
{!props.eventType.requiresConfirmation && (
|
||||
<CheckIcon className="h-6 w-6 text-green-600" />
|
||||
<CheckIcon className="h-8 w-8 text-green-600" />
|
||||
)}
|
||||
{props.eventType.requiresConfirmation && (
|
||||
<ClockIcon className="h-6 w-6 text-green-600" />
|
||||
<ClockIcon className="h-8 w-8 text-green-600" />
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<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">
|
||||
Booking {props.eventType.requiresConfirmation ? "Submitted" : "Confirmed"}
|
||||
{props.eventType.requiresConfirmation ? "Submitted" : "This meeting is scheduled"}
|
||||
</h3>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-300">
|
||||
<div className="mt-3">
|
||||
<p className="text-sm text-neutral-600 dark:text-gray-300">
|
||||
{props.eventType.requiresConfirmation
|
||||
? `${
|
||||
props.user.name || props.user.username
|
||||
} 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>
|
||||
</div>
|
||||
<div className="mt-4 border-t border-b dark:border-gray-900 py-4">
|
||||
<h2 className="text-lg font-medium text-gray-600 dark:text-gray-100 mb-2">
|
||||
{eventName}
|
||||
</h2>
|
||||
<p className="text-gray-500 dark:text-gray-50 mb-1">
|
||||
<ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
|
||||
{props.eventType.length} minutes
|
||||
</p>
|
||||
<div className="mt-4 text-gray-700 border-t border-b dark:border-gray-900 py-4 grid grid-cols-3 text-left">
|
||||
<div className="font-medium">What</div>
|
||||
<div className="mb-6 col-span-2">{eventName}</div>
|
||||
<div className="font-medium">When</div>
|
||||
<div className="mb-6 col-span-2">
|
||||
{date.format("dddd, DD MMMM YYYY")}
|
||||
<br />
|
||||
{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 && (
|
||||
<p className="text-gray-500 mb-1">
|
||||
<LocationMarkerIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
|
||||
{location}
|
||||
</p>
|
||||
<>
|
||||
<div className="font-medium">Where</div>
|
||||
<div className="col-span-2">{location}</div>
|
||||
</>
|
||||
)}
|
||||
<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>
|
||||
{!props.eventType.requiresConfirmation && (
|
||||
<div className="mt-5 sm:mt-0 pt-2 text-center">
|
||||
<span className="font-medium text-gray-500 dark:text-gray-50">
|
||||
Add to your calendar
|
||||
<div className="mt-5 sm:mt-0 sm:pt-4 pt-2 text-center flex">
|
||||
<span className="font-medium text-gray-700 dark:text-gray-50 flex self-center mr-6">
|
||||
Add to calendar
|
||||
</span>
|
||||
<div className="flex mt-2">
|
||||
<div className="flex">
|
||||
<Link
|
||||
href={
|
||||
`https://calendar.google.com/calendar/r/eventedit?dates=${date
|
||||
|
|
@ -142,9 +142,9 @@ export default function Success(props) {
|
|||
props.eventType.description
|
||||
}` + (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
|
||||
className="inline-block w-4 h-4 mr-1 -mt-1"
|
||||
className="inline-block w-4 h-4 -mt-1"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24">
|
||||
|
|
@ -166,7 +166,7 @@ export default function Success(props) {
|
|||
eventName
|
||||
) + (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
|
||||
className="inline-block w-4 h-4 mr-1 -mt-1"
|
||||
fill="currentColor"
|
||||
|
|
@ -190,7 +190,7 @@ export default function Success(props) {
|
|||
eventName
|
||||
) + (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
|
||||
className="inline-block w-4 h-4 mr-1 -mt-1"
|
||||
fill="currentColor"
|
||||
|
|
@ -202,7 +202,7 @@ export default function Success(props) {
|
|||
</a>
|
||||
</Link>
|
||||
<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
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
Loading…
Reference in New Issue