From 394be8612b81f1683b05d1b0de5367287590d11a Mon Sep 17 00:00:00 2001 From: mihaic195 Date: Thu, 22 Jul 2021 15:16:21 +0300 Subject: [PATCH 01/65] fix: settings page was missing value prop and restyled dark theme elements on booking page --- pages/[user]/book.tsx | 8 ++++++-- pages/settings/profile.tsx | 15 ++++++++------- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx index 34430e30..4bc1eea2 100644 --- a/pages/[user]/book.tsx +++ b/pages/[user]/book.tsx @@ -218,7 +218,9 @@ export default function Book(props: any): JSX.Element { {locations.length > 1 && (
- Location + + Location + {locations.map((location) => ( ))}
diff --git a/pages/settings/profile.tsx b/pages/settings/profile.tsx index 6f7836eb..86f99256 100644 --- a/pages/settings/profile.tsx +++ b/pages/settings/profile.tsx @@ -12,6 +12,11 @@ import TimezoneSelect from "react-timezone-select"; import { UsernameInput } from "../../components/ui/UsernameInput"; import ErrorAlert from "../../components/ui/alerts/Error"; +const themeOptions = [ + { value: "light", label: "Light" }, + { value: "dark", label: "Dark" }, +]; + export default function Settings(props) { const [successModalOpen, setSuccessModalOpen] = useState(false); const usernameRef = useRef(); @@ -19,18 +24,13 @@ export default function Settings(props) { const descriptionRef = useRef(); const avatarRef = useRef(); const hideBrandingRef = useRef(); - const [selectedTheme, setSelectedTheme] = useState({ value: "" }); + const [selectedTheme, setSelectedTheme] = useState({ value: props.user.theme }); const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone }); - const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({ value: "" }); + const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({ value: props.user.weekStart }); const [hasErrors, setHasErrors] = useState(false); const [errorMessage, setErrorMessage] = useState(""); - const themeOptions = [ - { value: "light", label: "Light" }, - { value: "dark", label: "Dark" }, - ]; - useEffect(() => { setSelectedTheme( props.user.theme ? themeOptions.find((theme) => theme.value === props.user.theme) : null @@ -182,6 +182,7 @@ export default function Settings(props) { id="theme" isDisabled={!selectedTheme} defaultValue={selectedTheme || themeOptions[0]} + value={selectedTheme || themeOptions[0]} onChange={setSelectedTheme} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" options={themeOptions} From c745416a6a94a3c1eb9204f2beadaa9ccdcdcd11 Mon Sep 17 00:00:00 2001 From: Pedro Duarte Date: Thu, 22 Jul 2021 14:16:54 +0200 Subject: [PATCH 02/65] Make collapsible time options accessible to screen readers --- package.json | 1 + pages/[user]/[type].tsx | 29 ++++++++------ yarn.lock | 87 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 104 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 2875cf53..3194fd27 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@heroicons/react": "^1.0.1", "@jitsu/sdk-js": "^2.0.1", "@prisma/client": "^2.23.0", + "@radix-ui/react-collapsible": "^0.0.16", "@tailwindcss/forms": "^0.2.1", "async": "^3.2.0", "bcryptjs": "^2.4.3", diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx index 04cdbd76..ec8677f4 100644 --- a/pages/[user]/[type].tsx +++ b/pages/[user]/[type].tsx @@ -4,6 +4,7 @@ import Head from "next/head"; import { ChevronDownIcon, ClockIcon, GlobeIcon } from "@heroicons/react/solid"; import { useRouter } from "next/router"; import dayjs, { Dayjs } from "dayjs"; +import * as Collapsible from "@radix-ui/react-collapsible"; import prisma, { whereAndSelect } from "@lib/prisma"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry"; @@ -139,19 +140,21 @@ export default function Type(props): Type { {props.eventType.length} minutes

- - {isTimeOptionsOpen && ( - - )} + + + + + {timeZone()} + + + + + + +

{props.eventType.description}

Date: Fri, 30 Jul 2021 15:19:40 +0300 Subject: [PATCH 03/65] fix chevron text color --- components/booking/DatePicker.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx index c6a49fa0..92d94773 100644 --- a/components/booking/DatePicker.tsx +++ b/components/booking/DatePicker.tsx @@ -171,10 +171,10 @@ const DatePicker = ({ {dayjs().month(selectedMonth).format("MMMM YYYY")} -
+
From 9f8b1f372e4a619652f08e4524342c628473a113 Mon Sep 17 00:00:00 2001 From: Marc Seitz Date: Fri, 30 Jul 2021 15:48:51 +0300 Subject: [PATCH 04/65] add dark and light variants chevron color --- components/booking/DatePicker.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx index 92d94773..3dddd1e5 100644 --- a/components/booking/DatePicker.tsx +++ b/components/booking/DatePicker.tsx @@ -171,10 +171,13 @@ const DatePicker = ({ {dayjs().month(selectedMonth).format("MMMM YYYY")} -
+
From 04d7a280ef74a7f7fcdc80833a6f33428ebf311c Mon Sep 17 00:00:00 2001 From: Jan Vereecken Date: Sat, 31 Jul 2021 15:00:27 +0200 Subject: [PATCH 05/65] Use calendarView instead of events When calling Microsoft Graph use calendars/calendarView instead of calendars/events to allow occurences to be returned. --- lib/calendarClient.ts | 111 ++++++++++++++++++++++++++++++++---------- 1 file changed, 86 insertions(+), 25 deletions(-) diff --git a/lib/calendarClient.ts b/lib/calendarClient.ts index 9d3964b0..09668fa4 100644 --- a/lib/calendarClient.ts +++ b/lib/calendarClient.ts @@ -10,8 +10,14 @@ import CalEventParser from "./CalEventParser"; const { google } = require("googleapis"); const googleAuth = (credential) => { - const { client_secret, client_id, redirect_uris } = JSON.parse(process.env.GOOGLE_API_CREDENTIALS).web; - const myGoogleAuth = new google.auth.OAuth2(client_id, client_secret, redirect_uris[0]); + const { client_secret, client_id, redirect_uris } = JSON.parse( + process.env.GOOGLE_API_CREDENTIALS + ).web; + const myGoogleAuth = new google.auth.OAuth2( + client_id, + client_secret, + redirect_uris[0] + ); myGoogleAuth.setCredentials(credential.key); const isExpired = () => myGoogleAuth.isTokenExpiring(); @@ -43,7 +49,8 @@ const googleAuth = (credential) => { }); return { - getToken: () => (!isExpired() ? Promise.resolve(myGoogleAuth) : refreshAccessToken()), + getToken: () => + !isExpired() ? Promise.resolve(myGoogleAuth) : refreshAccessToken(), }; }; @@ -81,7 +88,9 @@ const o365Auth = (credential) => { .then(handleErrorsJson) .then((responseBody) => { credential.key.access_token = responseBody.access_token; - credential.key.expiry_date = Math.round(+new Date() / 1000 + responseBody.expires_in); + credential.key.expiry_date = Math.round( + +new Date() / 1000 + responseBody.expires_in + ); return prisma.credential .update({ where: { @@ -139,7 +148,11 @@ export interface CalendarApiAdapter { deleteEvent(uid: string); - getAvailability(dateFrom, dateTo, selectedCalendars: IntegrationCalendar[]): Promise; + getAvailability( + dateFrom, + dateTo, + selectedCalendars: IntegrationCalendar[] + ): Promise; listCalendars(): Promise; } @@ -206,7 +219,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => { return { getAvailability: (dateFrom, dateTo, selectedCalendars) => { - const filter = "?$filter=start/dateTime ge '" + dateFrom + "' and end/dateTime le '" + dateTo + "'"; + const filter = "?startdatetime=" + dateFrom + "&enddatetime=" + dateTo; return auth .getToken() .then((accessToken) => { @@ -229,7 +242,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => { headers: { Prefer: 'outlook.timezone="Etc/GMT"', }, - url: `/me/calendars/${calendarId}/events${filter}`, + url: `/me/calendars/${calendarId}/calendarView${filter}`, })); return fetch("https://graph.microsoft.com/v1.0/$batch", { @@ -309,7 +322,10 @@ const GoogleCalendar = (credential): CalendarApiAdapter => { getAvailability: (dateFrom, dateTo, selectedCalendars) => new Promise((resolve, reject) => auth.getToken().then((myGoogleAuth) => { - const calendar = google.calendar({ version: "v3", auth: myGoogleAuth }); + const calendar = google.calendar({ + version: "v3", + auth: myGoogleAuth, + }); const selectedCalendarIds = selectedCalendars .filter((e) => e.integration === integrationType) .map((e) => e.externalId); @@ -320,7 +336,9 @@ const GoogleCalendar = (credential): CalendarApiAdapter => { } (selectedCalendarIds.length == 0 - ? calendar.calendarList.list().then((cals) => cals.data.items.map((cal) => cal.id)) + ? calendar.calendarList + .list() + .then((cals) => cals.data.items.map((cal) => cal.id)) : Promise.resolve(selectedCalendarIds) ) .then((calsIds) => { @@ -336,12 +354,19 @@ const GoogleCalendar = (credential): CalendarApiAdapter => { if (err) { reject(err); } - resolve(Object.values(apires.data.calendars).flatMap((item) => item["busy"])); + resolve( + Object.values(apires.data.calendars).flatMap( + (item) => item["busy"] + ) + ); } ); }) .catch((err) => { - console.error("There was an error contacting google calendar service: ", err); + console.error( + "There was an error contacting google calendar service: ", + err + ); reject(err); }); }) @@ -375,7 +400,10 @@ const GoogleCalendar = (credential): CalendarApiAdapter => { payload["conferenceData"] = event.conferenceData; } - const calendar = google.calendar({ version: "v3", auth: myGoogleAuth }); + const calendar = google.calendar({ + version: "v3", + auth: myGoogleAuth, + }); calendar.events.insert( { auth: myGoogleAuth, @@ -385,7 +413,10 @@ const GoogleCalendar = (credential): CalendarApiAdapter => { }, function (err, event) { if (err) { - console.error("There was an error contacting google calendar service: ", err); + console.error( + "There was an error contacting google calendar service: ", + err + ); return reject(err); } return resolve(event.data); @@ -418,7 +449,10 @@ const GoogleCalendar = (credential): CalendarApiAdapter => { payload["location"] = event.location; } - const calendar = google.calendar({ version: "v3", auth: myGoogleAuth }); + const calendar = google.calendar({ + version: "v3", + auth: myGoogleAuth, + }); calendar.events.update( { auth: myGoogleAuth, @@ -430,7 +464,10 @@ const GoogleCalendar = (credential): CalendarApiAdapter => { }, function (err, event) { if (err) { - console.error("There was an error contacting google calendar service: ", err); + console.error( + "There was an error contacting google calendar service: ", + err + ); return reject(err); } return resolve(event.data); @@ -441,7 +478,10 @@ const GoogleCalendar = (credential): CalendarApiAdapter => { deleteEvent: (uid: string) => new Promise((resolve, reject) => auth.getToken().then((myGoogleAuth) => { - const calendar = google.calendar({ version: "v3", auth: myGoogleAuth }); + const calendar = google.calendar({ + version: "v3", + auth: myGoogleAuth, + }); calendar.events.delete( { auth: myGoogleAuth, @@ -452,7 +492,10 @@ const GoogleCalendar = (credential): CalendarApiAdapter => { }, function (err, event) { if (err) { - console.error("There was an error contacting google calendar service: ", err); + console.error( + "There was an error contacting google calendar service: ", + err + ); return reject(err); } return resolve(event.data); @@ -463,7 +506,10 @@ const GoogleCalendar = (credential): CalendarApiAdapter => { listCalendars: () => new Promise((resolve, reject) => auth.getToken().then((myGoogleAuth) => { - const calendar = google.calendar({ version: "v3", auth: myGoogleAuth }); + const calendar = google.calendar({ + version: "v3", + auth: myGoogleAuth, + }); calendar.calendarList .list() .then((cals) => { @@ -480,7 +526,10 @@ const GoogleCalendar = (credential): CalendarApiAdapter => { ); }) .catch((err) => { - console.error("There was an error contacting google calendar service: ", err); + console.error( + "There was an error contacting google calendar service: ", + err + ); reject(err); }); }) @@ -503,19 +552,29 @@ const calendars = (withCredentials): CalendarApiAdapter[] => }) .filter(Boolean); -const getBusyCalendarTimes = (withCredentials, dateFrom, dateTo, selectedCalendars) => +const getBusyCalendarTimes = ( + withCredentials, + dateFrom, + dateTo, + selectedCalendars +) => Promise.all( - calendars(withCredentials).map((c) => c.getAvailability(dateFrom, dateTo, selectedCalendars)) + calendars(withCredentials).map((c) => + c.getAvailability(dateFrom, dateTo, selectedCalendars) + ) ).then((results) => { return results.reduce((acc, availability) => acc.concat(availability), []); }); const listCalendars = (withCredentials) => - Promise.all(calendars(withCredentials).map((c) => c.listCalendars())).then((results) => - results.reduce((acc, calendars) => acc.concat(calendars), []) + Promise.all(calendars(withCredentials).map((c) => c.listCalendars())).then( + (results) => results.reduce((acc, calendars) => acc.concat(calendars), []) ); -const createEvent = async (credential: Credential, calEvent: CalendarEvent): Promise => { +const createEvent = async ( + credential: Credential, + calEvent: CalendarEvent +): Promise => { const parser: CalEventParser = new CalEventParser(calEvent); const uid: string = parser.getUid(); /* @@ -525,7 +584,9 @@ const createEvent = async (credential: Credential, calEvent: CalendarEvent): Pro */ const richEvent: CalendarEvent = parser.asRichEventPlain(); - const creationResult = credential ? await calendars([credential])[0].createEvent(richEvent) : null; + const creationResult = credential + ? await calendars([credential])[0].createEvent(richEvent) + : null; const maybeHangoutLink = creationResult?.hangoutLink; const maybeEntryPoints = creationResult?.entryPoints; From 81bcd021df6c0808a02e78c17b24b119b0ca80be Mon Sep 17 00:00:00 2001 From: Alex van Andel Date: Mon, 2 Aug 2021 22:11:36 +0000 Subject: [PATCH 06/65] Improved 'Create your first event type' layouting --- pages/event-types/index.tsx | 43 ++++++++++++++++++++++--------------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx index 00cf1d89..93b4e83c 100644 --- a/pages/event-types/index.tsx +++ b/pages/event-types/index.tsx @@ -20,7 +20,7 @@ import { PlusIcon, UserIcon, } from "@heroicons/react/solid"; -import Loader from '@components/Loader'; +import Loader from "@components/Loader"; export default function Availability({ user, types }) { const [session, loading] = useSession(); @@ -42,7 +42,7 @@ export default function Availability({ user, types }) { // TODO: Add validation - const response = await fetch("/api/availability/eventtype", { + await fetch("/api/availability/eventtype", { method: "POST", body: JSON.stringify({ title: enteredTitle, @@ -66,7 +66,7 @@ export default function Availability({ user, types }) { } if (loading) { - return ; + return ; } return ( @@ -79,12 +79,14 @@ export default function Availability({ user, types }) { heading="Event Types" subtitle="Create events to share for people to book on your calendar." CTA={ - + types.length !== 0 && ( + + ) }>
    @@ -261,9 +263,9 @@ export default function Availability({ user, types }) {
{types.length === 0 && ( -
+
@@ -500,12 +502,19 @@ export default function Availability({ user, types }) { - -

Create your first event type

-

- Event types enable you to share links that show available times on your calendar and allow - people to make bookings with you. -

+
+

Create your first event type

+

+ Event types enable you to share links that show available times on your calendar and allow + people to make bookings with you. +

+ +
)} {showAddModal && ( From 3119c357498f06b93dfbf6f9949a998d3d1304fd Mon Sep 17 00:00:00 2001 From: Peer Richelsen Date: Tue, 3 Aug 2021 10:07:39 +0200 Subject: [PATCH 07/65] removed unused code --- components/Shell.tsx | 2 +- pages/auth/login.tsx | 2 +- pages/event-types/[type].tsx | 66 +++++++++++++++++------------------- 3 files changed, 34 insertions(+), 36 deletions(-) diff --git a/components/Shell.tsx b/components/Shell.tsx index bce52a41..eaa94502 100644 --- a/components/Shell.tsx +++ b/components/Shell.tsx @@ -210,7 +210,7 @@ function UserDropdown({ session, small, bottom }: { session: any; small?: boolea {session.user.name} - {session.user.username} + /{session.user.username} )} diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx index bf83b392..f0a183cc 100644 --- a/pages/auth/login.tsx +++ b/pages/auth/login.tsx @@ -43,7 +43,7 @@ export default function Login({ csrfToken }) {
diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx index 2b07a3b1..4d6329fe 100644 --- a/pages/event-types/[type].tsx +++ b/pages/event-types/[type].tsx @@ -7,7 +7,7 @@ import Select, { OptionBase } from "react-select"; import prisma from "@lib/prisma"; import { LocationType } from "@lib/location"; import Shell from "@components/Shell"; -import { getSession, useSession } from "next-auth/client"; +import { getSession } from "next-auth/client"; import { Scheduler } from "@components/ui/Scheduler"; import { Disclosure } from "@headlessui/react"; @@ -30,7 +30,6 @@ import utc from "dayjs/plugin/utc"; import timezone from "dayjs/plugin/timezone"; import { Availability, EventType, User } from "@prisma/client"; import { validJson } from "@lib/jsonUtils"; -import Text from "@components/ui/Text"; import { RadioGroup } from "@headlessui/react"; import classnames from "classnames"; import throttle from "lodash.throttle"; @@ -96,13 +95,12 @@ const PERIOD_TYPES = [ ]; export default function EventTypePage({ - user, - eventType, - locationOptions, - availability, - }: Props): JSX.Element { + user, + eventType, + locationOptions, + availability, +}: Props): JSX.Element { const router = useRouter(); - const [session, loading] = useSession(); console.log(eventType); const inputOptions: OptionBase[] = [ @@ -391,18 +389,18 @@ export default function EventTypePage({ -
-
+
+
-
+
-
+
-
+
-
+
{typeof location !== "undefined" ? location.hostname : ""}/{user.username}/ @@ -440,13 +438,13 @@ export default function EventTypePage({
-
+
-
+
{locations.length === 0 && (
@@ -569,13 +567,13 @@ export default function EventTypePage({
-
+
-
+
-
+
-
+
+
+
+
+ +
+ +
+ minutes +
+
+
+
+
+
+ + + Cancel + +
+
+ + + + ); + return (
@@ -75,16 +172,7 @@ export default function Availability({ user, types }) { - - New event type - - ) - }> + CTA={types.length !== 0 && CreateNewEventDialog}>
    {types.map((type) => ( @@ -505,123 +593,7 @@ export default function Availability({ user, types }) { Event types enable you to share links that show available times on your calendar and allow people to make bookings with you.

    - -
-
- )} - {showAddModal && ( -
-
- - - - -
-
- -
-

- Create a new event type for people to book times with. -

-
-
-
-
-
- -
- -
-
-
- -
-
- - {location.hostname}/{user.username}/ - - -
-
-
-
- -
- -
-
-
- -
- -
- minutes -
-
-
-
- {/* TODO: Add an error message when required input fields empty*/} -
- - -
-
-
+ {CreateNewEventDialog}
)} diff --git a/yarn.lock b/yarn.lock index bb6cb55f..a053e5a8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -790,6 +790,59 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-dialog@^0.0.19": + version "0.0.19" + resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-0.0.19.tgz#5a76fa380142a7a97c15c585ab071f63fba5297d" + integrity sha512-7FbWaj/C/TDpfJ+VJ4wNAQIjENDNfwAqNvAfeb+TEtBjgjmsfRDgA1AMenlA5N1QuRtAokRMTHUs3ukW49oQ+g== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "0.0.5" + "@radix-ui/react-compose-refs" "0.0.5" + "@radix-ui/react-context" "0.0.5" + "@radix-ui/react-dismissable-layer" "0.0.14" + "@radix-ui/react-focus-guards" "0.0.7" + "@radix-ui/react-focus-scope" "0.0.14" + "@radix-ui/react-id" "0.0.6" + "@radix-ui/react-polymorphic" "0.0.12" + "@radix-ui/react-portal" "0.0.14" + "@radix-ui/react-presence" "0.0.14" + "@radix-ui/react-primitive" "0.0.14" + "@radix-ui/react-slot" "0.0.12" + "@radix-ui/react-use-controllable-state" "0.0.6" + aria-hidden "^1.1.1" + react-remove-scroll "^2.4.0" + +"@radix-ui/react-dismissable-layer@0.0.14": + version "0.0.14" + resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.0.14.tgz#9d8a3415a2830688070c6596dec18b43c33df7b2" + integrity sha512-0pmRuGYYvWlEaED1igGFLjic0+hD0OqvsnrZaN3n1nDOkoCd7H5CA2geaShSrlBF5riI2Dr9jIZPGLbDRhs4DA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "0.0.5" + "@radix-ui/react-polymorphic" "0.0.12" + "@radix-ui/react-primitive" "0.0.14" + "@radix-ui/react-use-body-pointer-events" "0.0.6" + "@radix-ui/react-use-callback-ref" "0.0.5" + "@radix-ui/react-use-escape-keydown" "0.0.6" + +"@radix-ui/react-focus-guards@0.0.7": + version "0.0.7" + resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-0.0.7.tgz#285ed081c877587acd4ee7e6d8260bdf9044e922" + integrity sha512-enAsmrUunptHVzPLTuZqwTP/X3WFBnyJ/jP9W+0g+bRvI3o7V1kxNc+T2Rp1eRTFBW+lUNnt08qkugPytyTRog== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-focus-scope@0.0.14": + version "0.0.14" + resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-0.0.14.tgz#778e2a3ea607621d82e0139616d7ea6d517d9533" + integrity sha512-D3v6Tw8vzpIBNd2I32Q2G4LCiXMIlmc6Pl2VV9CZjSatDOjkV/ckGbhkQyQ7QxnD/0CmiSxNo5hTeGRmZDjwmA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "0.0.5" + "@radix-ui/react-polymorphic" "0.0.12" + "@radix-ui/react-primitive" "0.0.14" + "@radix-ui/react-use-callback-ref" "0.0.5" + "@radix-ui/react-id@0.0.6": version "0.0.6" resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-0.0.6.tgz#c4b27d11861805e91ac296e7758ab47e3947b65c" @@ -802,6 +855,16 @@ resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.12.tgz#bf4ae516669b68e059549538104d97322f7c876b" integrity sha512-/GYNMicBnGzjD1d2fCAuzql1VeFrp8mqM3xfzT1kxhnV85TKdURO45jBfMgqo17XNXoNhWIAProUsCO4qFAAIg== +"@radix-ui/react-portal@0.0.14": + version "0.0.14" + resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-0.0.14.tgz#31513d8777cf5e50a3a30ebc9deb34821e890e9e" + integrity sha512-Wi9arVwVenonjZIX6znCBYaasua03Tb+UtrBZShepJkLGtbGxDlzExijiGIaIRNetl46Oc2pw0F6Y6HffDnUww== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-polymorphic" "0.0.12" + "@radix-ui/react-primitive" "0.0.14" + "@radix-ui/react-use-layout-effect" "0.0.5" + "@radix-ui/react-presence@0.0.14": version "0.0.14" resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-0.0.14.tgz#6a86058bbbf46234dd8840dacd620b3ac5797025" @@ -818,6 +881,22 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-polymorphic" "0.0.12" +"@radix-ui/react-slot@0.0.12": + version "0.0.12" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.0.12.tgz#c4d8a75fffca561aeeca2ed9603384d86757f60a" + integrity sha512-Em8P/xYyh3O/32IhrmARJNH+J/XCAVnw6h2zGu6oeReliIX7ktU67pMSeyyIZiU2hNXzaXYB/xDdixizQe/DGA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "0.0.5" + +"@radix-ui/react-use-body-pointer-events@0.0.6": + version "0.0.6" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.0.6.tgz#30b21301880417e7dbb345871ff5a83f2abe0d8d" + integrity sha512-ouYb7u1+K9TsiEcNs3HceNUBUgB2PV41EyD5O6y6ZPMxl1lW/QAy5dfyfJMRyaRWQ6kxwmGoKlCSb4uPTruzuQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-layout-effect" "0.0.5" + "@radix-ui/react-use-callback-ref@0.0.5": version "0.0.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-0.0.5.tgz#fa8db050229cda573dfeeae213d74ef06f6130db" @@ -833,6 +912,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-callback-ref" "0.0.5" +"@radix-ui/react-use-escape-keydown@0.0.6": + version "0.0.6" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-0.0.6.tgz#1ad1c81b99961b7dbe376ef54151ebc8bef627a0" + integrity sha512-MJpVj21BYwWllmp2xbXPqpKPssJ1WWrZi+Qx7PY5hVcBhQr5Jo6yKwIX677pH5Yql95ENTTT5LW3q+LVFYIISw== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-callback-ref" "0.0.5" + "@radix-ui/react-use-layout-effect@0.0.5": version "0.0.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.0.5.tgz#cbbd059090edc765749da00d9f562a9abd43cbac" @@ -1307,6 +1394,13 @@ argparse@^2.0.1: resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38" integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== +aria-hidden@^1.1.1: + version "1.1.3" + resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.1.3.tgz#bb48de18dc84787a3c6eee113709c473c64ec254" + integrity sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA== + dependencies: + tslib "^1.0.0" + array-includes@^3.1.2, array-includes@^3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a" @@ -2196,6 +2290,11 @@ detect-newline@^3.0.0: resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651" integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA== +detect-node-es@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493" + integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ== + detective@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b" @@ -2867,6 +2966,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1: has "^1.0.3" has-symbols "^1.0.1" +get-nonce@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3" + integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q== + get-orientation@1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/get-orientation/-/get-orientation-1.1.2.tgz#20507928951814f8a91ded0a0e67b29dfab98947" @@ -3273,6 +3377,13 @@ internal-slot@^1.0.3: has "^1.0.3" side-channel "^1.0.4" +invariant@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" + integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== + dependencies: + loose-envify "^1.0.0" + is-arguments@^1.0.4: version "1.1.0" resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9" @@ -4300,7 +4411,7 @@ log-update@^4.0.0: slice-ansi "^4.0.0" wrap-ansi "^6.2.0" -loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -5332,6 +5443,25 @@ react-refresh@0.8.3: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg== +react-remove-scroll-bar@^2.1.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz#d4d545a7df024f75d67e151499a6ab5ac97c8cdd" + integrity sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg== + dependencies: + react-style-singleton "^2.1.0" + tslib "^1.0.0" + +react-remove-scroll@^2.4.0: + version "2.4.3" + resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.4.3.tgz#83d19b02503b04bd8141ed6e0b9e6691a2e935a6" + integrity sha512-lGWYXfV6jykJwbFpsuPdexKKzp96f3RbvGapDSIdcyGvHb7/eqyn46C7/6h+rUzYar1j5mdU+XECITHXCKBk9Q== + dependencies: + react-remove-scroll-bar "^2.1.0" + react-style-singleton "^2.1.0" + tslib "^1.0.0" + use-callback-ref "^1.2.3" + use-sidecar "^1.0.1" + react-select@^4.3.0, react-select@^4.3.1: version "4.3.1" resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.1.tgz#389fc07c9bc7cf7d3c377b7a05ea18cd7399cb81" @@ -5345,6 +5475,15 @@ react-select@^4.3.0, react-select@^4.3.1: react-input-autosize "^3.0.0" react-transition-group "^4.3.0" +react-style-singleton@^2.1.0: + version "2.1.1" + resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66" + integrity sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA== + dependencies: + get-nonce "^1.0.0" + invariant "^2.2.4" + tslib "^1.0.0" + react-timezone-select@^1.0.2: version "1.0.4" resolved "https://registry.yarnpkg.com/react-timezone-select/-/react-timezone-select-1.0.4.tgz#66664f508f927e9f9c0f051aea51fd3196534401" @@ -6190,7 +6329,7 @@ ts-pnp@^1.1.6: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== -tslib@^1.8.1, tslib@^1.9.0: +tslib@^1.0.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== @@ -6343,6 +6482,19 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-callback-ref@^1.2.3: + version "1.2.5" + resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5" + integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg== + +use-sidecar@^1.0.1: + version "1.0.5" + resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.5.tgz#ffff2a17c1df42e348624b699ba6e5c220527f2b" + integrity sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA== + dependencies: + detect-node-es "^1.1.0" + tslib "^1.9.3" + use-subscription@1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1" From c3f5abe68fd02ac22272cf371805c5755011cb7f Mon Sep 17 00:00:00 2001 From: Alex van Andel Date: Tue, 3 Aug 2021 18:15:24 +0000 Subject: [PATCH 27/65] Fixes no-document-viewport-meta + adds lang='en' to tag, little global fixes --- next.config.js | 4 ++++ pages/_app.tsx | 9 ++++++++- pages/_document.tsx | 4 ---- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/next.config.js b/next.config.js index 56369deb..75666d0c 100644 --- a/next.config.js +++ b/next.config.js @@ -32,6 +32,10 @@ module.exports = withTM({ future: { webpack5: true, }, + i18n: { + locales: ["en"], + defaultLocale: "en", + }, typescript: { ignoreBuildErrors: true, }, diff --git a/pages/_app.tsx b/pages/_app.tsx index 5473bd41..4082a94b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,12 +1,19 @@ import "../styles/globals.css"; -import { createTelemetryClient, TelemetryProvider } from "../lib/telemetry"; +import { createTelemetryClient, TelemetryProvider } from "@lib/telemetry"; import { Provider } from "next-auth/client"; import type { AppProps } from "next/app"; +import Head from "next/head"; function MyApp({ Component, pageProps }: AppProps) { return ( + + + diff --git a/pages/_document.tsx b/pages/_document.tsx index 2a640cc9..db2625ed 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -10,10 +10,6 @@ class MyDocument extends Document { return ( - From 4225016829a6f1980bc8f6be4b12cb5884337b47 Mon Sep 17 00:00:00 2001 From: Alex van Andel Date: Tue, 3 Aug 2021 22:17:12 +0000 Subject: [PATCH 28/65] Changed the mechanism by which we center the dialog --- components/Dialog.tsx | 10 ++++------ pages/event-types/index.tsx | 14 ++++++-------- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/components/Dialog.tsx b/components/Dialog.tsx index bea54075..b16416dd 100644 --- a/components/Dialog.tsx +++ b/components/Dialog.tsx @@ -3,7 +3,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog"; export function Dialog({ children, ...props }) { return ( - + {children} @@ -13,11 +13,9 @@ export function Dialog({ children, ...props }) { export const DialogContent = React.forwardRef(({ children, ...props }, forwardedRef) => ( -
- {children} -
+ className="fixed bg-white rounded top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-left overflow-hidden shadow-xl sm:align-middle sm:max-w-lg sm:w-full p-6" + ref={forwardedRef}> + {children} )); diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx index 64eb7e55..47e840dc 100644 --- a/pages/event-types/index.tsx +++ b/pages/event-types/index.tsx @@ -149,14 +149,12 @@ export default function Availability({ user, types }) {
-
- - - Cancel - -
+ + + Cancel +
From 97d727c620e0d1c3c362575015fc68642e066e35 Mon Sep 17 00:00:00 2001 From: Alex van Andel Date: Tue, 3 Aug 2021 23:28:12 +0000 Subject: [PATCH 29/65] Minor style improvements + fixed nested button, DialogTrigger is a button --- pages/event-types/index.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx index 47e840dc..ad3e0856 100644 --- a/pages/event-types/index.tsx +++ b/pages/event-types/index.tsx @@ -60,13 +60,11 @@ export default function Availability({ user, types }) { return ; } - const CreateNewEventDialog = ( + const CreateNewEventDialog = () => ( - - + + + New event type
@@ -170,7 +168,7 @@ export default function Availability({ user, types }) { + CTA={types.length !== 0 && }>
    {types.map((type) => ( @@ -591,7 +589,7 @@ export default function Availability({ user, types }) { Event types enable you to share links that show available times on your calendar and allow people to make bookings with you.

    - {CreateNewEventDialog} +
)} From 721b874bedc740feaf68005593aa89bbe0e90c83 Mon Sep 17 00:00:00 2001 From: Bailey Pumfleet Date: Wed, 4 Aug 2021 17:06:05 +0100 Subject: [PATCH 30/65] Re-add auto slug population --- pages/event-types/index.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx index ad3e0856..8b73886c 100644 --- a/pages/event-types/index.tsx +++ b/pages/event-types/index.tsx @@ -56,6 +56,12 @@ export default function Availability({ user, types }) { } } + function autoPopulateSlug() { + let t = titleRef.current.value; + t = t.replace(/\s+/g, "-").toLowerCase(); + slugRef.current.value = t; + } + if (loading) { return ; } @@ -83,6 +89,7 @@ export default function Availability({ user, types }) {
Date: Wed, 4 Aug 2021 21:39:59 +0200 Subject: [PATCH 31/65] added loader to dark mode --- components/Loader.tsx | 10 +++++++--- components/booking/AvailableTimes.tsx | 4 +++- styles/globals.css | 4 ++-- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/components/Loader.tsx b/components/Loader.tsx index b66dfe18..b6c49c94 100644 --- a/components/Loader.tsx +++ b/components/Loader.tsx @@ -1,3 +1,7 @@ -export default function Loader(){ - return
-} \ No newline at end of file +export default function Loader() { + return ( +
+ +
+ ); +} diff --git a/components/booking/AvailableTimes.tsx b/components/booking/AvailableTimes.tsx index e2d6af3e..bb690508 100644 --- a/components/booking/AvailableTimes.tsx +++ b/components/booking/AvailableTimes.tsx @@ -2,6 +2,8 @@ import Link from "next/link"; import { useRouter } from "next/router"; import Slots from "./Slots"; import { ExclamationIcon } from "@heroicons/react/solid"; +import React from "react"; +import Loader from "@components/Loader"; const AvailableTimes = ({ date, @@ -49,7 +51,7 @@ const AvailableTimes = ({
)} - {!isFullyBooked && slots.length === 0 && !hasErrors &&
} + {!isFullyBooked && slots.length === 0 && !hasErrors && } {hasErrors && (
diff --git a/styles/globals.css b/styles/globals.css index 30beee13..59a997fc 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -144,7 +144,8 @@ height: 30px; margin: 60px auto; position: relative; - border: 4px solid #000; + border-width: 4px; + border-style: solid; animation: loader 2s infinite ease; } @@ -152,7 +153,6 @@ vertical-align: top; display: inline-block; width: 100%; - background-color: #000; animation: loader-inner 2s infinite ease-in; } From 67bd82fcea852ce42cabd216dcaa16805afbc60c Mon Sep 17 00:00:00 2001 From: Peer Richelsen Date: Thu, 5 Aug 2021 10:55:28 +0200 Subject: [PATCH 32/65] added padding bottom for iphone x and beyond --- components/Shell.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/Shell.tsx b/components/Shell.tsx index 1fe932e4..79cd18fe 100644 --- a/components/Shell.tsx +++ b/components/Shell.tsx @@ -146,7 +146,9 @@ export default function Shell(props) {
{props.children}
{/* show bottom navigation for md and smaller (tablet and phones) */} -
-
+
@@ -135,10 +135,10 @@ export default function Shell(props) {
-
+
-
-

{props.heading}

+
+

{props.heading}

{props.subtitle}

{props.CTA}
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx index 8b73886c..f807f9ce 100644 --- a/pages/event-types/index.tsx +++ b/pages/event-types/index.tsx @@ -176,7 +176,7 @@ export default function Availability({ user, types }) { heading="Event Types" subtitle="Create events to share for people to book on your calendar." CTA={types.length !== 0 && }> -
+