Add Modals for Daily Video Calls and updates to Video Call colors (#1027)
* ⬆️ 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] <support@github.com> * 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 <lola.ojabowale@gmail.com>
This commit is contained in:
Lola
GitHub
parent
22682aa54d
commit
9879f9910a
4 changed files with 376 additions and 5 deletions
|
|
@ -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) {
|
|||
<div style={{ zIndex: 2, position: "relative" }}>
|
||||
<Link href="/">
|
||||
<img
|
||||
className="hidden sm:inline-block z-10 fixed w-auto h-5"
|
||||
className="fixed z-10 hidden w-auto h-5 sm:inline-block"
|
||||
src="https://cal.com/logo-white.svg"
|
||||
alt="Cal.com Logo"
|
||||
style={{
|
||||
|
|
@ -80,12 +129,17 @@ export default function JoinCall(props, session) {
|
|||
}
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
const booking = await prisma.booking.findFirst({
|
||||
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,
|
||||
|
|
@ -107,11 +161,22 @@ export async function getServerSideProps(context) {
|
|||
},
|
||||
});
|
||||
|
||||
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: booking,
|
||||
booking: bookingObj,
|
||||
session: session,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
134
pages/call/meeting-ended/[uid].tsx
Normal file
134
pages/call/meeting-ended/[uid].tsx
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
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();
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const [is24h, setIs24h] = useState(false);
|
||||
|
||||
//if no booking redirectis to the 404 page
|
||||
const emptyBooking = props.booking === null;
|
||||
useEffect(() => {
|
||||
if (emptyBooking) {
|
||||
router.push("/call/no-meeting-found");
|
||||
}
|
||||
});
|
||||
if (!emptyBooking) {
|
||||
return (
|
||||
<div>
|
||||
<HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
|
||||
<main className="max-w-3xl mx-auto my-24">
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
|
||||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
<div
|
||||
className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
<div>
|
||||
<div className="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full">
|
||||
<XIcon className="w-6 h-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
This meeting is in the past.
|
||||
</h3>
|
||||
</div>
|
||||
<div className="py-4 mt-4 border-t border-b">
|
||||
<h2 className="mb-2 text-lg font-medium text-center text-gray-600 font-cal">
|
||||
{props.booking.title}
|
||||
</h2>
|
||||
<p className="text-center text-gray-500">
|
||||
<CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
|
||||
{dayjs(props.booking.startTime).format(
|
||||
(is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 text-center sm:mt-6">
|
||||
<div className="mt-5">
|
||||
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
|
||||
Go back home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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,
|
||||
},
|
||||
};
|
||||
}
|
||||
138
pages/call/meeting-not-started/[uid].tsx
Normal file
138
pages/call/meeting-not-started/[uid].tsx
Normal file
|
|
@ -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 (
|
||||
<div>
|
||||
<HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
|
||||
<main className="max-w-3xl mx-auto my-24">
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
|
||||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
<div
|
||||
className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
<div>
|
||||
<div className="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full">
|
||||
<XIcon className="w-6 h-6 text-red-600" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
|
||||
This meeting has not started yet
|
||||
</h3>
|
||||
</div>
|
||||
<div className="py-4 mt-4 border-t border-b">
|
||||
<h2 className="mb-2 text-lg font-medium text-center text-gray-600 font-cal">
|
||||
{props.booking.title}
|
||||
</h2>
|
||||
<p className="text-center text-gray-500">
|
||||
<CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
|
||||
{dayjs(props.booking.startTime).format(
|
||||
(is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-5">
|
||||
<p className="text-sm text-gray-500">
|
||||
This meeting will be accessible 60 minutes in advance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 text-center sm:mt-6">
|
||||
<div className="mt-5">
|
||||
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
|
||||
Go back home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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,
|
||||
},
|
||||
};
|
||||
}
|
||||
34
yarn.lock
34
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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue