From 9879f9910aced6b6ac5ec342476ce5b14f8908ac Mon Sep 17 00:00:00 2001 From: Lola <68611399+lunchpaillola@users.noreply.github.com> Date: Tue, 26 Oct 2021 09:10:55 -0400 Subject: [PATCH] Add Modals for Daily Video Calls and updates to Video Call colors (#1027) * :arrow_up: Bump tailwindcss from 2.2.14 to 2.2.15 Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss) from 2.2.14 to 2.2.15. - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/master/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/compare/v2.2.14...v2.2.15) --- updated-dependencies: - dependency-name: tailwindcss dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] * updating cal will provide a zoom meeting url * updating cal will provide a zoom meeting url * modifying how daily emails send * modifying how daily emails send * daily table * migration updates * rebasing updates * updating Daily references to a new table * merge updates, adding Daily references to book/events.ts * updated video email templates to remove Daily specific references * updating the events.ts and refactoring in the event manager * removing the package-lock * updating some of the internal Daily notes * removing handle errors raw from the Daily video client * prettier formatting fixes * Added the Daily location to calendar events and updated Cal video references to Daily.co video * updating references to create in event manager to check for Daily video * adding a daily interface in the event manager * adding daily to the location labels * resolving yarn merge conflicts * removing prettier auto and refactoring integrations: daily in the event manager * removing changes to estlintrc.json * updating message when daily video call meeting has not started * updated modal time buffer * changed video calls to Cal colors * removing change to undoing change to lodash/merge on the event manager * removing change on the event-types to match the main repo * updating the border color in daily video calls Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Lola-Ojabowale --- pages/call/[uid].tsx | 75 +++++++++++- pages/call/meeting-ended/[uid].tsx | 134 ++++++++++++++++++++++ pages/call/meeting-not-started/[uid].tsx | 138 +++++++++++++++++++++++ yarn.lock | 34 ++++++ 4 files changed, 376 insertions(+), 5 deletions(-) create mode 100644 pages/call/meeting-ended/[uid].tsx create mode 100644 pages/call/meeting-not-started/[uid].tsx diff --git a/pages/call/[uid].tsx b/pages/call/[uid].tsx index e34b1af7..02cd58d5 100644 --- a/pages/call/[uid].tsx +++ b/pages/call/[uid].tsx @@ -14,15 +14,50 @@ export default function JoinCall(props, session) { //if no booking redirectis to the 404 page const emptyBooking = props.booking === null; + + //daily.co calls have a 60 minute exit and entry buffer when a user enters a call when it's not available it will trigger the modals + const now = new Date(); + const enterDate = new Date(now.getTime() + 60 * 60 * 1000); + const exitDate = new Date(now.getTime() - 60 * 60 * 1000); + + console.log(enterDate); + + //find out if the meeting is upcoming or in the past + const isPast = new Date(props.booking.endTime) <= exitDate; + const isUpcoming = new Date(props.booking.startTime) >= enterDate; + const meetingUnavailable = isUpcoming == true || isPast == true; + useEffect(() => { if (emptyBooking) { router.push("/call/no-meeting-found"); } + + if (isUpcoming) { + router.push(`/call/meeting-not-started/${props.booking.uid}`); + } + + if (isPast) { + router.push(`/call/meeting-ended/${props.booking.uid}`); + } }); useEffect(() => { - if (!emptyBooking && session.userid !== props.booking.user.id) { + if (!meetingUnavailable && !emptyBooking && session.userid !== props.booking.user.id) { const callFrame = DailyIframe.createFrame({ + theme: { + colors: { + accent: "#FFF", + accentText: "#111111", + background: "#111111", + backgroundAccent: "#111111", + baseText: "#FFF", + border: "#000000", + mainAreaBg: "#111111", + mainAreaBgAccent: "#111111", + mainAreaText: "#FFF", + supportiveText: "#FFF", + }, + }, showLeaveButton: true, iframeStyle: { position: "fixed", @@ -35,8 +70,22 @@ export default function JoinCall(props, session) { showLeaveButton: true, }); } - if (!emptyBooking && session.userid === props.booking.user.id) { + if (!meetingUnavailable && !emptyBooking && session.userid === props.booking.user.id) { const callFrame = DailyIframe.createFrame({ + theme: { + colors: { + accent: "#FFF", + accentText: "#111111", + background: "#111111", + backgroundAccent: "#111111", + baseText: "#FFF", + border: "#000000", + mainAreaBg: "#111111", + mainAreaBgAccent: "#111111", + mainAreaText: "#FFF", + supportiveText: "#FFF", + }, + }, showLeaveButton: true, iframeStyle: { position: "fixed", @@ -64,7 +113,7 @@ export default function JoinCall(props, session) {
Cal.com Logo { + if (emptyBooking) { + router.push("/call/no-meeting-found"); + } + }); + if (!emptyBooking) { + return ( +
+ +
+
+
+ +
+
+
+
+ ); + } + return null; +} + +export async function getServerSideProps(context) { + const booking = await prisma.booking.findUnique({ + where: { + uid: context.query.uid, + }, + select: { + uid: true, + id: true, + title: true, + description: true, + startTime: true, + endTime: true, + user: { + select: { + credentials: true, + }, + }, + attendees: true, + dailyRef: { + select: { + dailyurl: true, + dailytoken: true, + }, + }, + references: { + select: { + uid: true, + type: true, + }, + }, + }, + }); + + if (!booking) { + // TODO: Booking is already cancelled + return { + props: { booking: null }, + }; + } + + const bookingObj = Object.assign({}, booking, { + startTime: booking.startTime.toString(), + endTime: booking.endTime.toString(), + }); + const session = await getSession(); + + return { + props: { + booking: bookingObj, + session: session, + }, + }; +} diff --git a/pages/call/meeting-not-started/[uid].tsx b/pages/call/meeting-not-started/[uid].tsx new file mode 100644 index 00000000..c2d1aceb --- /dev/null +++ b/pages/call/meeting-not-started/[uid].tsx @@ -0,0 +1,138 @@ +import { CalendarIcon, XIcon } from "@heroicons/react/outline"; +import { ArrowRightIcon } from "@heroicons/react/solid"; +import dayjs from "dayjs"; +import { getSession } from "next-auth/client"; +import { useRouter } from "next/router"; +import { useState } from "react"; +import { useEffect } from "react"; + +import prisma from "@lib/prisma"; + +import { HeadSeo } from "@components/seo/head-seo"; +import Button from "@components/ui/Button"; + +export default function MeetingUnavailable(props) { + const router = useRouter(); + + //if no booking redirectis to the 404 page + const emptyBooking = props.booking === null; + useEffect(() => { + if (emptyBooking) { + router.push("/call/no-meeting-found"); + } + }); + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [is24h, setIs24h] = useState(false); + if (!emptyBooking) { + return ( +
+ +
+
+
+ +
+
+
+
+ ); + } + return null; +} + +export async function getServerSideProps(context) { + const booking = await prisma.booking.findUnique({ + where: { + uid: context.query.uid, + }, + select: { + uid: true, + id: true, + title: true, + description: true, + startTime: true, + endTime: true, + user: { + select: { + credentials: true, + }, + }, + attendees: true, + dailyRef: { + select: { + dailyurl: true, + dailytoken: true, + }, + }, + references: { + select: { + uid: true, + type: true, + }, + }, + }, + }); + + if (!booking) { + // TODO: Booking is already cancelled + return { + props: { booking: null }, + }; + } + + const bookingObj = Object.assign({}, booking, { + startTime: booking.startTime.toString(), + endTime: booking.endTime.toString(), + }); + const session = await getSession(); + + return { + props: { + booking: bookingObj, + session: session, + }, + }; +} diff --git a/yarn.lock b/yarn.lock index 1da4101c..663ee669 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2606,6 +2606,11 @@ bowser@^2.8.1: resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f" integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA== +bowser@^2.8.1: + version "2.11.0" + resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f" + integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" @@ -3808,6 +3813,11 @@ fast-equals@^1.6.3: resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-1.6.3.tgz#84839a1ce20627c463e1892f2ae316380c81b459" integrity sha512-4WKW0AL5+WEqO0zWavAfYGY1qwLsBgE//DN4TTcVEN2UlINgkv9b3vm2iHicoenWKSX9mKWmGOsU/iI5IST7pQ== +fast-equals@^1.6.3: + version "1.6.3" + resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-1.6.3.tgz#84839a1ce20627c463e1892f2ae316380c81b459" + integrity sha512-4WKW0AL5+WEqO0zWavAfYGY1qwLsBgE//DN4TTcVEN2UlINgkv9b3vm2iHicoenWKSX9mKWmGOsU/iI5IST7pQ== + fast-glob@^3.1.1, fast-glob@^3.2.7: version "3.2.7" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1" @@ -4333,6 +4343,18 @@ history@^4.9.0: tiny-warning "^1.0.0" value-equal "^1.0.1" +history@^4.9.0: + version "4.10.1" + resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" + integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew== + dependencies: + "@babel/runtime" "^7.1.2" + loose-envify "^1.2.0" + resolve-pathname "^3.0.0" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" + value-equal "^1.0.1" + hmac-drbg@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -6529,6 +6551,13 @@ path-to-regexp@^1.7.0: dependencies: isarray "0.0.1" +path-to-regexp@^1.7.0: + version "1.8.0" + resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a" + integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA== + dependencies: + isarray "0.0.1" + path-type@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f" @@ -7298,6 +7327,11 @@ resolve-pathname@^3.0.0: resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd" integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng== +resolve-pathname@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd" + integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng== + resolve@^1.10.0, resolve@^1.20.0: version "1.20.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"