UI for rescheduling
This commit is contained in:
nicolas
parent
72a07770e8
commit
e92b2e01fc
3 changed files with 65 additions and 13 deletions
|
|
@ -82,7 +82,7 @@ export default function Type(props) {
|
|||
|
||||
// Get router variables
|
||||
const router = useRouter();
|
||||
const { user } = router.query;
|
||||
const { user, rescheduleUid } = router.query;
|
||||
|
||||
// Handle month changes
|
||||
const incrementMonth = () => {
|
||||
|
|
@ -180,7 +180,7 @@ export default function Type(props) {
|
|||
// Display available times
|
||||
const availableTimes = times.map((time) =>
|
||||
<div key={dayjs(time).utc().format()}>
|
||||
<Link href={`/${props.user.username}/book?date=${dayjs(time).utc().format()}&type=${props.eventType.id}`}>
|
||||
<Link href={`/${props.user.username}/book?date=${dayjs(time).utc().format()}&type=${props.eventType.id}` + (rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "")}>
|
||||
<a key={dayjs(time).format("hh:mma")} className="block font-medium mb-4 text-blue-600 border border-blue-600 rounded hover:text-white hover:bg-blue-600 py-4">{dayjs(time).tz(selectedTimeZone).format(is24h ? "HH:mm" : "hh:mma")}</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -190,7 +190,7 @@ export default function Type(props) {
|
|||
<div>
|
||||
<Head>
|
||||
<title>
|
||||
{props.eventType.title} | {props.user.name || props.user.username} |
|
||||
{rescheduleUid && "Reschedule"} {props.eventType.title} | {props.user.name || props.user.username} |
|
||||
Calendso
|
||||
</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
|
|
@ -413,7 +413,7 @@ export async function getServerSideProps(context) {
|
|||
return {
|
||||
props: {
|
||||
user,
|
||||
eventType
|
||||
eventType,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ dayjs.extend(timezone);
|
|||
|
||||
export default function Book(props) {
|
||||
const router = useRouter();
|
||||
const { date, user } = router.query;
|
||||
const { date, user, rescheduleUid } = router.query;
|
||||
|
||||
const [ is24h, setIs24h ] = useState(false);
|
||||
const [ preferredTimeZone, setPreferredTimeZone ] = useState('');
|
||||
|
|
@ -57,6 +57,7 @@ export default function Book(props) {
|
|||
notes: event.target.notes.value,
|
||||
timeZone: preferredTimeZone,
|
||||
eventName: props.eventType.title,
|
||||
rescheduleUid: rescheduleUid
|
||||
};
|
||||
|
||||
if (selectedLocation) {
|
||||
|
|
@ -75,7 +76,7 @@ export default function Book(props) {
|
|||
}
|
||||
);
|
||||
|
||||
let successUrl = `/success?date=${date}&type=${props.eventType.id}&user=${props.user.username}`;
|
||||
let successUrl = `/success?date=${date}&type=${props.eventType.id}&user=${props.user.username}&reschedule=1`;
|
||||
if (payload['location']) {
|
||||
successUrl += "&location=" + encodeURIComponent(payload['location']);
|
||||
}
|
||||
|
|
@ -86,7 +87,7 @@ export default function Book(props) {
|
|||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Confirm your {props.eventType.title} with {props.user.name || props.user.username} | Calendso</title>
|
||||
<title>{rescheduleUid ? 'Reschedule' : 'Confirm'} your {props.eventType.title} with {props.user.name || props.user.username} | Calendso</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
|
|
@ -116,13 +117,13 @@ export default function Book(props) {
|
|||
<div className="mb-4">
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700">Your name</label>
|
||||
<div className="mt-1">
|
||||
<input type="text" name="name" id="name" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="John Doe" />
|
||||
<input type="text" name="name" id="name" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="John Doe" defaultValue={props.booking.attendees[0].name} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700">Email address</label>
|
||||
<div className="mt-1">
|
||||
<input type="email" name="email" id="email" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com" />
|
||||
<input type="email" name="email" id="email" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com" defaultValue={props.booking.attendees[0].email} />
|
||||
</div>
|
||||
</div>
|
||||
{locations.length > 1 && (
|
||||
|
|
@ -144,11 +145,11 @@ export default function Book(props) {
|
|||
</div>)}
|
||||
<div className="mb-4">
|
||||
<label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-1">Additional notes</label>
|
||||
<textarea name="notes" id="notes" rows={3} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Please share anything that will help prepare for our meeting."></textarea>
|
||||
<textarea name="notes" id="notes" rows={3} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Please share anything that will help prepare for our meeting." defaultValue={props.booking.description}></textarea>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<Button type="submit" className="btn btn-primary">Confirm</Button>
|
||||
<Link href={"/" + props.user.username + "/" + props.eventType.slug}>
|
||||
<Button type="submit" className="btn btn-primary">{rescheduleUid ? 'Reschedule' : 'Confirm'}</Button>
|
||||
<Link href={"/" + props.user.username + "/" + props.eventType.slug + (rescheduleUid ? "?rescheduleUid=" + rescheduleUid : "")}>
|
||||
<a className="ml-2 btn btn-white">Cancel</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -190,10 +191,30 @@ export async function getServerSideProps(context) {
|
|||
}
|
||||
});
|
||||
|
||||
let booking = undefined;
|
||||
|
||||
if(context.query.rescheduleUid) {
|
||||
booking = await prisma.booking.findFirst({
|
||||
where: {
|
||||
uid: context.query.rescheduleUid
|
||||
},
|
||||
select: {
|
||||
description: true,
|
||||
attendees: {
|
||||
select: {
|
||||
email: true,
|
||||
name: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
user,
|
||||
eventType
|
||||
eventType,
|
||||
booking
|
||||
},
|
||||
}
|
||||
}
|
||||
31
pages/reschedule/[uid].tsx
Normal file
31
pages/reschedule/[uid].tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import prisma from '../../lib/prisma';
|
||||
|
||||
export default function Type(props) {
|
||||
// Just redirect to the schedule page to reschedule it.
|
||||
return null;
|
||||
}
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
const booking = await prisma.booking.findFirst({
|
||||
where: {
|
||||
uid: context.query.uid,
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
user: {select: {username: true}},
|
||||
eventType: {select: {slug: true}},
|
||||
title: true,
|
||||
description: true,
|
||||
startTime: true,
|
||||
endTime: true,
|
||||
attendees: true
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/' + booking.user.username + '/' + booking.eventType.slug + '?rescheduleUid=' + context.query.uid,
|
||||
permanent: false,
|
||||
},
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue