public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
cal.pub0.org/pages/[user]/book.tsx

184 lines
8.8 KiB
TypeScript
Raw Normal View History

Standardise semicolons
2021-04-11 17:12:18 +00:00
import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router';
Implemented configurable eventType phone or physical locations.
2021-05-08 19:03:47 +00:00
import { ClockIcon, CalendarIcon, LocationMarkerIcon } from '@heroicons/react/solid';
Standardise semicolons
2021-04-11 17:12:18 +00:00
import prisma from '../../lib/prisma';
Telemetry enhancements (mainly, data masking improvements) - data masking is moved to a separate function; - hostnames and urls are masked now - collect pageview for pages not wrapped in Shell
2021-05-07 17:05:33 +00:00
import {collectPageParameters, telemetryEventTypes, useTelemetry} from "../../lib/telemetry";
Implemented configurable eventType phone or physical locations.
2021-05-08 19:03:47 +00:00
import { useEffect, useState } from "react";
import dayjs from 'dayjs';
import 'react-phone-number-input/style.css';
import PhoneInput from 'react-phone-number-input';
import { LocationType } from '../../lib/location';
feat: Add support to use gravatar as a fallback avatar
2021-05-08 20:26:19 +00:00
import Avatar from '../../components/Avatar';
Add booking flow
2021-03-22 13:48:48 +00:00
export default function Book(props) {
Standardise semicolons
2021-04-11 17:12:18 +00:00
const router = useRouter();
const { date, user } = router.query;
Default [] value for locations array on booking page
2021-05-08 21:53:10 +00:00
const locations = props.eventType.locations || [];
const [ selectedLocation, setSelectedLocation ] = useState<LocationType>(locations.length === 1 ? locations[0].type : '');
Added telemetry collection (through jitsu.com) - Introduced useTelemetry() hook - Telemetry events are sent for page_view, booking_confirmed, time_selected, date_selected events - Telemetry is configured (and can be disabled) with NEXT_PUBLIC_TELEMETRY_KEY env variable
2021-04-27 14:19:12 +00:00
const telemetry = useTelemetry();
useEffect(() => {
Telemetry enhancements (mainly, data masking improvements) - data masking is moved to a separate function; - hostnames and urls are masked now - collect pageview for pages not wrapped in Shell
2021-05-07 17:05:33 +00:00
telemetry.withJitsu(jitsu => jitsu.track(telemetryEventTypes.timeSelected, collectPageParameters()));
Implemented configurable eventType phone or physical locations.
2021-05-08 19:03:47 +00:00
});
Default [] value for locations array on booking page
2021-05-08 21:53:10 +00:00
const locationInfo = (type: LocationType) => locations.find(
Implemented configurable eventType phone or physical locations.
2021-05-08 19:03:47 +00:00
(location) => location.type === type
);
// TODO: Move to translations
const locationLabels = {
[LocationType.InPerson]: 'In-person meeting',
[LocationType.Phone]: 'Phone call',
};
Add booking flow
2021-03-22 13:48:48 +00:00
const bookingHandler = event => {
Standardise semicolons
2021-04-11 17:12:18 +00:00
event.preventDefault();
Implemented configurable eventType phone or physical locations.
2021-05-08 19:03:47 +00:00
Default [] value for locations array on booking page
2021-05-08 21:53:10 +00:00
let payload = {
start: dayjs(date).format(),
end: dayjs(date).add(props.eventType.length, 'minute').format(),
name: event.target.name.value,
email: event.target.email.value,
notes: event.target.notes.value
};
if (selectedLocation) {
payload['location'] = selectedLocation === LocationType.Phone ? event.target.phone.value : locationInfo(selectedLocation).address;
}
Implemented configurable eventType phone or physical locations.
2021-05-08 19:03:47 +00:00
Telemetry enhancements (mainly, data masking improvements) - data masking is moved to a separate function; - hostnames and urls are masked now - collect pageview for pages not wrapped in Shell
2021-05-07 17:05:33 +00:00
telemetry.withJitsu(jitsu => jitsu.track(telemetryEventTypes.bookingConfirmed, collectPageParameters()));
Add booking flow
2021-03-22 13:48:48 +00:00
const res = fetch(
Fix hardcoded URL
2021-04-07 20:41:08 +00:00
'/api/book/' + user,
Add booking flow
2021-03-22 13:48:48 +00:00
{
Default [] value for locations array on booking page
2021-05-08 21:53:10 +00:00
body: JSON.stringify(payload),
Add booking flow
2021-03-22 13:48:48 +00:00
headers: {
'Content-Type': 'application/json'
},
method: 'POST'
}
Standardise semicolons
2021-04-11 17:12:18 +00:00
);
Implemented configurable eventType phone or physical locations.
2021-05-08 19:03:47 +00:00
Default [] value for locations array on booking page
2021-05-08 21:53:10 +00:00
let successUrl = `/success?date=${date}&type=${props.eventType.id}&user=${props.user.username}`;
if (payload['location']) {
successUrl += "&location=" + encodeURIComponent(payload['location']);
}
router.push(successUrl);
Add booking flow
2021-03-22 13:48:48 +00:00
}
return (
<div>
<Head>
Add more empty states
2021-03-31 20:10:53 +00:00
<title>Confirm your {props.eventType.title} with {props.user.name || props.user.username} | Calendso</title>
Add booking flow
2021-03-22 13:48:48 +00:00
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="max-w-3xl mx-auto my-24">
<div className="bg-white overflow-hidden shadow rounded-lg">
<div className="sm:flex px-4 py-5 sm:p-6">
<div className="sm:w-1/2 sm:border-r">
feat: Add support to use gravatar as a fallback avatar
2021-05-08 20:26:19 +00:00
<Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
Add booking flow
2021-03-22 13:48:48 +00:00
<h2 className="font-medium text-gray-500">{props.user.name}</h2>
<h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
<p className="text-gray-500 mb-2">
Replace all SVG icons with Heroicons components
2021-04-21 10:10:27 +00:00
<ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
Add booking flow
2021-03-22 13:48:48 +00:00
{props.eventType.length} minutes
</p>
Implemented configurable eventType phone or physical locations.
2021-05-08 19:03:47 +00:00
{selectedLocation === LocationType.InPerson && <p className="text-gray-500 mb-2">
<LocationMarkerIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{locationInfo(selectedLocation).address}
</p>}
Add booking flow
2021-03-22 13:48:48 +00:00
<p className="text-blue-600 mb-4">
Replace all SVG icons with Heroicons components
2021-04-21 10:10:27 +00:00
<CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
Add booking flow
2021-03-22 13:48:48 +00:00
{dayjs(date).format("hh:mma, dddd DD MMMM YYYY")}
</p>
<p className="text-gray-600">{props.eventType.description}</p>
</div>
<div className="sm:w-1/2 pl-8 pr-4">
<form onSubmit={bookingHandler}>
<div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium text-gray-700">Your name</label>
<div className="mt-1">
make name and email fields required
2021-05-03 20:56:33 +00:00
<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" />
Add booking flow
2021-03-22 13:48:48 +00:00
</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">
make name and email fields required
2021-05-03 20:56:33 +00:00
<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" />
Add booking flow
2021-03-22 13:48:48 +00:00
</div>
</div>
Default [] value for locations array on booking page
2021-05-08 21:53:10 +00:00
{locations.length > 1 && (
Implemented configurable eventType phone or physical locations.
2021-05-08 19:03:47 +00:00
<div className="mb-4">
<span className="block text-sm font-medium text-gray-700">Location</span>
Default [] value for locations array on booking page
2021-05-08 21:53:10 +00:00
{locations.map( (location) => (
Implemented configurable eventType phone or physical locations.
2021-05-08 19:03:47 +00:00
<label key={location.type} className="block">
<input type="radio" required onChange={(e) => setSelectedLocation(e.target.value)} className="location" name="location" value={location.type} checked={selectedLocation === location.type} />
<span className="text-sm ml-2">{locationLabels[location.type]}</span>
</label>
))}
</div>
)}
{selectedLocation === LocationType.Phone && (<div className="mb-4">
<label htmlFor="phone" className="block text-sm font-medium text-gray-700">Phone Number</label>
<div className="mt-1">
<PhoneInput name="phone" placeholder="Enter phone number" id="phone" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" onChange={() => {}} />
</div>
</div>)}
Add booking flow
2021-03-22 13:48:48 +00:00
<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>
</div>
<div>
<button type="submit" className="btn btn-primary">Confirm</button>
Fix cancel link on booking page
2021-04-30 12:06:04 +00:00
<Link href={"/" + props.user.username + "/" + props.eventType.slug}>
Add booking flow
2021-03-22 13:48:48 +00:00
<a className="ml-2 btn btn-white">Cancel</a>
</Link>
</div>
</form>
</div>
</div>
</div>
</main>
</div>
)
}
export async function getServerSideProps(context) {
const user = await prisma.user.findFirst({
where: {
username: context.query.user,
},
select: {
username: true,
name: true,
feat: Add support to use gravatar as a fallback avatar
2021-05-08 20:26:19 +00:00
email:true,
Add booking flow
2021-03-22 13:48:48 +00:00
bio: true,
avatar: true,
eventTypes: true
}
});
const eventType = await prisma.eventType.findUnique({
where: {
id: parseInt(context.query.type),
},
select: {
id: true,
title: true,
Fix cancel link on booking page
2021-04-30 12:06:04 +00:00
slug: true,
Add booking flow
2021-03-22 13:48:48 +00:00
description: true,
Implemented configurable eventType phone or physical locations.
2021-05-08 19:03:47 +00:00
length: true,
locations: true,
Add booking flow
2021-03-22 13:48:48 +00:00
}
});
return {
props: {
user,
eventType
},
}
}