first commit
This commit is contained in:
@@ -0,0 +1,38 @@
|
||||
import { Poppins } from "next/font/google";
|
||||
import Link from "next/link";
|
||||
|
||||
const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] });
|
||||
|
||||
export function Navbar({ username }: { username?: string }) {
|
||||
return (
|
||||
<nav className="flex h-[75px] w-[100%] items-center justify-between bg-black px-14 py-3 text-white">
|
||||
<div className={`flex h-[100%] items-center text-lg ${poppins.className}`}>
|
||||
<Link href="/">
|
||||
<h1 className="bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] bg-clip-text text-2xl font-bold text-transparent">
|
||||
CalSync
|
||||
</h1>
|
||||
</Link>
|
||||
</div>
|
||||
{username && <div className="capitalize">👤 {username}</div>}
|
||||
<div className={`${poppins.className}`}>
|
||||
<ul className="flex gap-x-7">
|
||||
<li>
|
||||
<Link href="/calendars">Calendar</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/availability">Availability</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/booking">Book Me</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/bookings">My Bookings</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/embed">Embed</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { PrismaClient } from "@prisma/client";
|
||||
|
||||
const prismaClientSingleton = () => {
|
||||
return new PrismaClient();
|
||||
};
|
||||
|
||||
declare global {
|
||||
// eslint-disable-next-line no-var
|
||||
var prisma: undefined | ReturnType<typeof prismaClientSingleton>;
|
||||
}
|
||||
|
||||
const prisma = global.prisma ?? prismaClientSingleton();
|
||||
|
||||
export default prisma;
|
||||
|
||||
if (process.env.NODE_ENV !== "production") globalThis.prisma = prisma;
|
||||
@@ -0,0 +1,167 @@
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { CheckCircle2Icon } from "lucide-react";
|
||||
import { X } from "lucide-react";
|
||||
import { Inter } from "next/font/google";
|
||||
// eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { useGetBooking, useCancelBooking } from "@calcom/atoms";
|
||||
import dayjs from "@calcom/dayjs";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export default function Bookings(props: { calUsername: string; calEmail: string }) {
|
||||
const router = useRouter();
|
||||
|
||||
const { isLoading, data: booking, refetch } = useGetBooking((router.query.bookingUid as string) ?? "");
|
||||
const startTime = dayjs(booking?.startTime).format(12 === 12 ? "h:mma" : "HH:mm");
|
||||
const endTime = dayjs(booking?.endTime).format(12 === 12 ? "h:mma" : "HH:mm");
|
||||
const date = dayjs(booking?.startTime).toDate();
|
||||
const dateToday = dayjs(booking?.startTime).date();
|
||||
const year = dayjs(booking?.startTime).year();
|
||||
const day = dayjs(date).format("dddd");
|
||||
const month = dayjs(date).format("MMMM");
|
||||
|
||||
const { mutate: cancelBooking } = useCancelBooking({
|
||||
onSuccess: () => {
|
||||
refetch();
|
||||
},
|
||||
});
|
||||
return (
|
||||
<main
|
||||
className={`flex min-h-screen flex-col ${inter.className} main text-default flex min-h-full w-full flex-col items-center overflow-visible`}>
|
||||
<Navbar username={props.calUsername} />
|
||||
{isLoading && <p>Loading...</p>}
|
||||
{!isLoading && booking && (
|
||||
<div
|
||||
key={booking.id}
|
||||
className="my-10 w-[440px] overflow-hidden rounded-md border-[0.7px] border-black px-10 py-5">
|
||||
{booking.status === "ACCEPTED" ? (
|
||||
<div className="mx-2 my-4 flex flex-col items-center justify-center text-center">
|
||||
<CheckCircle2Icon className="my-5 flex h-[40px] w-[40px] rounded-full bg-green-500" />
|
||||
<h1 className="text-xl font-bold">This meeting is scheduled</h1>
|
||||
<p>We sent an email with a calendar invitation with the details to everyone.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mx-2 my-4 flex flex-col items-center justify-center text-center">
|
||||
<X className="my-5 flex h-[40px] w-[40px] rounded-full bg-red-400" />
|
||||
<h4 className="text-2xl font-bold">This event is cancelled</h4>
|
||||
</div>
|
||||
)}
|
||||
<hr className="mx-2 bg-black text-black" />
|
||||
<div className="mx-2 my-7 flex flex-col gap-y-3">
|
||||
<div className="flex gap-[70px]">
|
||||
<div>
|
||||
<h4>What</h4>
|
||||
</div>
|
||||
<div>
|
||||
<p>{booking.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-[70px]">
|
||||
<div>
|
||||
<h4>When</h4>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<p
|
||||
style={{
|
||||
textDecoration: booking.status === "ACCEPTED" ? "normal" : "line-through",
|
||||
}}>
|
||||
{`${day}, ${month} ${dateToday}, ${year}`}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
style={{
|
||||
textDecoration: booking.status === "ACCEPTED" ? "normal" : "line-through",
|
||||
}}>
|
||||
{`${startTime}`} - {`${endTime}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-[70px]">
|
||||
<div>Who</div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h4>
|
||||
{booking.user?.name}{" "}
|
||||
<span className="rounded-md bg-blue-800 px-2 text-sm text-white">Host</span>
|
||||
</h4>
|
||||
<p>{booking.user?.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
{booking.attendees.map((attendee, i) => {
|
||||
return (
|
||||
<div key={`${i}-${attendee.name}`}>
|
||||
<br />
|
||||
<div>
|
||||
<h4>{`${attendee.name}`}</h4>
|
||||
<p>{`${attendee.email}`}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{!!booking.location && booking.location.startsWith("http") && (
|
||||
<div className="flex gap-[70px]">
|
||||
<div>
|
||||
<h4>Where</h4>
|
||||
</div>
|
||||
<div>
|
||||
<p>{booking.location}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{booking.responses.notes && (
|
||||
<div className="flex gap-[70px]">
|
||||
<div className="w-[40px]">
|
||||
<h4>Additional notes</h4>
|
||||
</div>
|
||||
<div>
|
||||
<p>{`${booking.responses.notes}`}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{booking.status === "ACCEPTED" && (
|
||||
<>
|
||||
<hr className="mx-3" />
|
||||
<div className="mx-2 my-3 text-center">
|
||||
<p>
|
||||
Need to make a change?{" "}
|
||||
<button
|
||||
className="underline"
|
||||
onClick={() => {
|
||||
router.push(
|
||||
`/booking?rescheduleUid=${booking?.uid}&eventTypeSlug=${booking?.eventType?.slug}`
|
||||
);
|
||||
}}>
|
||||
Reschedule
|
||||
</button>{" "}
|
||||
or{" "}
|
||||
<button
|
||||
className="underline"
|
||||
onClick={() => {
|
||||
cancelBooking({
|
||||
id: booking.id,
|
||||
uid: booking.uid,
|
||||
cancellationReason: "User request",
|
||||
allRemainingBookings: true,
|
||||
});
|
||||
}}>
|
||||
Cancel
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
92
calcom/packages/platform/examples/base/src/pages/_app.tsx
Normal file
92
calcom/packages/platform/examples/base/src/pages/_app.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import "@/styles/globals.css";
|
||||
import type { AppProps } from "next/app";
|
||||
import { Poppins } from "next/font/google";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { CalProvider, BookerEmbed } from "@calcom/atoms";
|
||||
import "@calcom/atoms/globals.min.css";
|
||||
|
||||
const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] });
|
||||
|
||||
function generateRandomEmail() {
|
||||
const localPartLength = 10;
|
||||
const domain = ["example.com", "example.net", "example.org"];
|
||||
|
||||
const randomLocalPart = Array.from({ length: localPartLength }, () =>
|
||||
String.fromCharCode(Math.floor(Math.random() * 26) + 97)
|
||||
).join("");
|
||||
|
||||
const randomDomain = domain[Math.floor(Math.random() * domain.length)];
|
||||
|
||||
return `${randomLocalPart}@${randomDomain}`;
|
||||
}
|
||||
|
||||
export default function App({ Component, pageProps }: AppProps) {
|
||||
const [accessToken, setAccessToken] = useState("");
|
||||
const [email, setUserEmail] = useState("");
|
||||
const [username, setUsername] = useState("");
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
const randomEmail = generateRandomEmail();
|
||||
fetch("/api/managed-user", {
|
||||
method: "POST",
|
||||
|
||||
body: JSON.stringify({ email: randomEmail }),
|
||||
}).then(async (res) => {
|
||||
const data = await res.json();
|
||||
setAccessToken(data.accessToken);
|
||||
setUserEmail(data.email);
|
||||
setUsername(data.username);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div className={`${poppins.className} text-black`}>
|
||||
<CalProvider
|
||||
accessToken={accessToken}
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
clientId={process.env.NEXT_PUBLIC_X_CAL_ID ?? ""}
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
options={{ apiUrl: process.env.NEXT_PUBLIC_CALCOM_API_URL ?? "", refreshUrl: "/api/refresh" }}>
|
||||
{email ? (
|
||||
<>
|
||||
<Component {...pageProps} calUsername={username} calEmail={email} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<main className={`flex min-h-screen flex-col items-center justify-between p-24 `}>
|
||||
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex" />
|
||||
</main>
|
||||
</>
|
||||
)}
|
||||
</CalProvider>{" "}
|
||||
{pathname === "/embed" && (
|
||||
<div>
|
||||
<BookerEmbed
|
||||
customClassNames={{
|
||||
bookerContainer: "!bg-[#F5F2FE] [&_button:!rounded-full] border-subtle border",
|
||||
datePickerCustomClassNames: {
|
||||
datePickerDatesActive: "!bg-[#D7CEF5]",
|
||||
},
|
||||
eventMetaCustomClassNames: {
|
||||
eventMetaTitle: "text-[#7151DC]",
|
||||
},
|
||||
availableTimeSlotsCustomClassNames: {
|
||||
availableTimeSlotsHeaderContainer: "!bg-[#F5F2FE]",
|
||||
availableTimes: "!bg-[#D7CEF5]",
|
||||
},
|
||||
}}
|
||||
username={username}
|
||||
eventSlug="thirty-minutes"
|
||||
onCreateBookingSuccess={(data) => {
|
||||
router.push(`/${data.data.uid}`);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Html, Head, Main, NextScript } from "next/document";
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html lang="en" dir="ltr">
|
||||
<Head />
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
import type { NextApiRequest, NextApiResponse } from "next";
|
||||
|
||||
import { X_CAL_SECRET_KEY } from "@calcom/platform-constants";
|
||||
|
||||
import prisma from "../../lib/prismaClient";
|
||||
|
||||
type Data = {
|
||||
email: string;
|
||||
username: string;
|
||||
id: number;
|
||||
accessToken: string;
|
||||
};
|
||||
|
||||
// example endpoint to create a managed cal.com user
|
||||
export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
|
||||
const { email } = JSON.parse(req.body);
|
||||
|
||||
const existingUser = await prisma.user.findFirst({ orderBy: { createdAt: "desc" } });
|
||||
if (existingUser && existingUser.calcomUserId) {
|
||||
return res.status(200).json({
|
||||
id: existingUser.calcomUserId,
|
||||
email: existingUser.email,
|
||||
username: existingUser.calcomUsername ?? "",
|
||||
accessToken: existingUser.accessToken ?? "",
|
||||
});
|
||||
}
|
||||
const localUser = await prisma.user.create({
|
||||
data: {
|
||||
email,
|
||||
},
|
||||
});
|
||||
const response = await fetch(
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
`${process.env.NEXT_PUBLIC_CALCOM_API_URL ?? ""}/oauth-clients/${process.env.NEXT_PUBLIC_X_CAL_ID}/users`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
[X_CAL_SECRET_KEY]: process.env.X_CAL_SECRET_KEY ?? "",
|
||||
origin: "http://localhost:4321",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
name: "John Jones",
|
||||
}),
|
||||
}
|
||||
);
|
||||
const body = await response.json();
|
||||
await prisma.user.update({
|
||||
data: {
|
||||
refreshToken: (body.data?.refreshToken as string) ?? "",
|
||||
accessToken: (body.data?.accessToken as string) ?? "",
|
||||
calcomUserId: body.data?.user.id,
|
||||
calcomUsername: (body.data?.user.username as string) ?? "",
|
||||
},
|
||||
where: { id: localUser.id },
|
||||
});
|
||||
await createDefaultSchedule(body.data?.accessToken as string);
|
||||
return res.status(200).json({
|
||||
id: body?.data?.user?.id,
|
||||
email: (body.data?.user.email as string) ?? "",
|
||||
username: (body.data?.username as string) ?? "",
|
||||
accessToken: (body.data?.accessToken as string) ?? "",
|
||||
});
|
||||
}
|
||||
|
||||
async function createDefaultSchedule(accessToken: string) {
|
||||
const name = "Default Schedule";
|
||||
const timeZone = "Europe/London";
|
||||
const isDefault = true;
|
||||
|
||||
const response = await fetch(
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
`${process.env.NEXT_PUBLIC_CALCOM_API_URL ?? ""}/schedules`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
timeZone,
|
||||
isDefault,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
const schedule = await response.json();
|
||||
return schedule;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
import type { NextApiRequest, NextApiResponse } from "next";
|
||||
|
||||
import { X_CAL_SECRET_KEY } from "@calcom/platform-constants";
|
||||
|
||||
import prisma from "../../lib/prismaClient";
|
||||
|
||||
type Data = {
|
||||
accessToken: string;
|
||||
};
|
||||
|
||||
// example endpoint called by the client to refresh the access token of cal.com managed user
|
||||
export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
|
||||
const authHeader = req.headers.authorization;
|
||||
|
||||
const accessToken = authHeader?.split("Bearer ")[1];
|
||||
|
||||
if (accessToken) {
|
||||
const localUser = await prisma.user.findUnique({
|
||||
where: {
|
||||
accessToken: accessToken as string,
|
||||
},
|
||||
});
|
||||
if (localUser?.refreshToken) {
|
||||
const response = await fetch(
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
`${process.env.NEXT_PUBLIC_CALCOM_API_URL ?? ""}/oauth/${
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
process.env.NEXT_PUBLIC_X_CAL_ID ?? ""
|
||||
}/refresh`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
[X_CAL_SECRET_KEY]: process.env.X_CAL_SECRET_KEY ?? "",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
refreshToken: localUser.refreshToken,
|
||||
}),
|
||||
}
|
||||
);
|
||||
if (response.status === 200) {
|
||||
const resp = await response.json();
|
||||
const { accessToken: newAccessToken, refreshToken: newRefreshToken } = resp.data;
|
||||
|
||||
await prisma.user.update({
|
||||
data: {
|
||||
refreshToken: (newRefreshToken as string) ?? "",
|
||||
accessToken: (newAccessToken as string) ?? "",
|
||||
},
|
||||
where: { id: localUser.id },
|
||||
});
|
||||
return res.status(200).json({ accessToken: newAccessToken });
|
||||
}
|
||||
return res.status(400).json({ accessToken: "" });
|
||||
}
|
||||
}
|
||||
|
||||
return res.status(404).json({ accessToken: "" });
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { Inter } from "next/font/google";
|
||||
|
||||
import { AvailabilitySettings } from "@calcom/atoms";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export default function Availability(props: { calUsername: string; calEmail: string }) {
|
||||
return (
|
||||
<main className={`flex min-h-screen flex-col ${inter.className}`}>
|
||||
<Navbar username={props.calUsername} />
|
||||
<div>
|
||||
<AvailabilitySettings
|
||||
enableOverrides={true}
|
||||
customClassNames={{
|
||||
subtitlesClassName: "text-red-500",
|
||||
ctaClassName: "border p-4 rounded-md",
|
||||
editableHeadingClassName: "underline font-semibold",
|
||||
}}
|
||||
onUpdateSuccess={() => {
|
||||
console.log("Updated successfully");
|
||||
}}
|
||||
onUpdateError={() => {
|
||||
console.log("update error");
|
||||
}}
|
||||
onDeleteError={() => {
|
||||
console.log("delete error");
|
||||
}}
|
||||
onDeleteSuccess={() => {
|
||||
console.log("Deleted successfully");
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
96
calcom/packages/platform/examples/base/src/pages/booking.tsx
Normal file
96
calcom/packages/platform/examples/base/src/pages/booking.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { Inter } from "next/font/google";
|
||||
// eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
|
||||
import { useRouter } from "next/router";
|
||||
import { useState } from "react";
|
||||
|
||||
import { Booker, useEventTypes } from "@calcom/atoms";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export default function Bookings(props: { calUsername: string; calEmail: string }) {
|
||||
const [bookingTitle, setBookingTitle] = useState<string | null>(null);
|
||||
const [eventTypeSlug, setEventTypeSlug] = useState<string | null>(null);
|
||||
const [eventTypeDuration, setEventTypeDuration] = useState<number | null>(null);
|
||||
const router = useRouter();
|
||||
const { isLoading: isLoadingEvents, data: eventTypes } = useEventTypes(props.calUsername);
|
||||
const rescheduleUid = (router.query.rescheduleUid as string) ?? "";
|
||||
const eventTypeSlugQueryParam = (router.query.eventTypeSlug as string) ?? "";
|
||||
|
||||
return (
|
||||
<main
|
||||
className={`flex min-h-screen flex-col ${inter.className} main text-default flex min-h-full w-full flex-col items-center overflow-visible`}>
|
||||
<Navbar username={props.calUsername} />
|
||||
<div>
|
||||
<h1 className="mx-10 my-4 text-2xl font-semibold">{props.calUsername} Public Booking Page</h1>
|
||||
|
||||
{isLoadingEvents && !eventTypeSlug && <p>Loading...</p>}
|
||||
|
||||
{!isLoadingEvents && !eventTypeSlug && Boolean(eventTypes?.length) && !rescheduleUid && (
|
||||
<div className="flex flex-col gap-4">
|
||||
{eventTypes?.map(
|
||||
(event: { id: number; slug: string; title: string; lengthInMinutes: number }) => {
|
||||
const formatEventSlug = event.slug
|
||||
.split("-")
|
||||
.map((item) => `${item[0].toLocaleUpperCase()}${item.slice(1)}`)
|
||||
.join(" ");
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => {
|
||||
setEventTypeSlug(event.slug);
|
||||
setEventTypeDuration(event.lengthInMinutes);
|
||||
}}
|
||||
className="mx-10 w-[80vw] cursor-pointer rounded-md border-[0.8px] border-black px-10 py-4"
|
||||
key={event.id}>
|
||||
<h1 className="text-lg font-semibold">{formatEventSlug}</h1>
|
||||
<p>{`/${event.slug}`}</p>
|
||||
<span className="border-none bg-gray-800 px-2 text-white">{event?.lengthInMinutes}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!bookingTitle && eventTypeSlug && !rescheduleUid && (
|
||||
<Booker
|
||||
eventSlug={eventTypeSlug}
|
||||
username={props.calUsername ?? ""}
|
||||
onCreateBookingSuccess={(data) => {
|
||||
setBookingTitle(data.data.title ?? "");
|
||||
router.push(`/${data.data.uid}`);
|
||||
}}
|
||||
duration={eventTypeDuration}
|
||||
customClassNames={{
|
||||
bookerContainer: "!bg-[#F5F2FE] [&_button:!rounded-full] border-subtle border",
|
||||
datePickerCustomClassNames: {
|
||||
datePickerDatesActive: "!bg-[#D7CEF5]",
|
||||
},
|
||||
eventMetaCustomClassNames: {
|
||||
eventMetaTitle: "text-[#7151DC]",
|
||||
},
|
||||
availableTimeSlotsCustomClassNames: {
|
||||
availableTimeSlotsHeaderContainer: "!bg-[#F5F2FE]",
|
||||
availableTimes: "!bg-[#D7CEF5]",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!bookingTitle && rescheduleUid && eventTypeSlugQueryParam && (
|
||||
<Booker
|
||||
rescheduleUid={rescheduleUid}
|
||||
eventSlug={eventTypeSlugQueryParam}
|
||||
username={props.calUsername ?? ""}
|
||||
onCreateBookingSuccess={(data) => {
|
||||
setBookingTitle(data.data.title ?? "");
|
||||
router.push(`/${data.data.uid}`);
|
||||
}}
|
||||
duration={eventTypeDuration}
|
||||
/>
|
||||
)}
|
||||
{bookingTitle && <p>Booking created: {bookingTitle}</p>}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { Inter } from "next/font/google";
|
||||
// eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { useGetBookings } from "@calcom/atoms";
|
||||
import dayjs from "@calcom/dayjs";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export default function Bookings(props: { calUsername: string; calEmail: string }) {
|
||||
const { isLoading: isLoadingUpcomingBookings, data: upcomingBookings } = useGetBookings({
|
||||
limit: 50,
|
||||
cursor: 0,
|
||||
filters: { status: "upcoming" },
|
||||
});
|
||||
|
||||
const { isLoading: isLoadingPastBookings, data: pastBookings } = useGetBookings({
|
||||
limit: 50,
|
||||
cursor: 0,
|
||||
filters: { status: "past" },
|
||||
});
|
||||
const isLoading = isLoadingUpcomingBookings || isLoadingPastBookings;
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<main
|
||||
className={`flex min-h-screen flex-col ${inter.className} main text-default flex min-h-full w-full flex-col items-center overflow-visible`}>
|
||||
<Navbar username={props.calUsername} />
|
||||
<h1 className="my-4 text-2xl font-semibold">{props.calUsername} Bookings</h1>
|
||||
{isLoading && <p>Loading...</p>}
|
||||
{!isLoading &&
|
||||
pastBookings?.bookings &&
|
||||
upcomingBookings?.bookings &&
|
||||
(Boolean(upcomingBookings?.bookings.length) || Boolean(pastBookings?.bookings.length)) &&
|
||||
[...pastBookings?.bookings, ...upcomingBookings?.bookings].map((booking) => {
|
||||
const date = dayjs(booking.startTime).toDate();
|
||||
const startTime = dayjs(booking?.startTime).format(12 === 12 ? "h:mma" : "HH:mm");
|
||||
const endTime = dayjs(booking?.endTime).format(12 === 12 ? "h:mma" : "HH:mm");
|
||||
const day = dayjs(date).format("dddd");
|
||||
const month = dayjs(date).format("MMMM");
|
||||
|
||||
return (
|
||||
<div
|
||||
key={booking.id}
|
||||
className="mx-10 my-2 flex w-[80vw] cursor-pointer items-center justify-between overflow-hidden rounded border-[0.8px] border-black py-4"
|
||||
onClick={() => {
|
||||
router.push(`/${booking.uid}`);
|
||||
}}>
|
||||
<div>
|
||||
<div className="px-6">{`${day}, ${dayjs(booking.startTime).date()} ${month}`}</div>
|
||||
<div className="px-6">
|
||||
<p>
|
||||
{startTime} - {endTime}
|
||||
</p>{" "}
|
||||
<p />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="px-6">
|
||||
<div className="text-md mb-0.5 font-semibold">
|
||||
<p>{booking.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6">
|
||||
<p>
|
||||
{booking?.user?.name} and {booking.attendees[0].name}
|
||||
</p>{" "}
|
||||
<p />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { Inter } from "next/font/google";
|
||||
|
||||
import { useConnectedCalendars } from "@calcom/atoms";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export default function Calendars(props: { calUsername: string; calEmail: string }) {
|
||||
const { isLoading, data: calendars } = useConnectedCalendars();
|
||||
const connectedCalendars = calendars?.connectedCalendars ?? [];
|
||||
const destinationCalendar = calendars?.destinationCalendar ?? {};
|
||||
return (
|
||||
<main className={`flex min-h-screen flex-col ${inter.className}`}>
|
||||
<Navbar username={props.calUsername} />
|
||||
<div className="p-4">
|
||||
{!!connectedCalendars?.length ? (
|
||||
<h1 className="my-4 text-lg font-bold">Your Connected Calendars</h1>
|
||||
) : (
|
||||
<h1 className="mx-10 my-4 text-xl font-bold">
|
||||
You have not connected any calendars yet, please connect your Google calendar.
|
||||
</h1>
|
||||
)}
|
||||
{isLoading ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
Boolean(connectedCalendars?.length) &&
|
||||
connectedCalendars.map((connectedCalendar) => (
|
||||
<div key={connectedCalendar.credentialId}>
|
||||
<h1 className="text-md font-bold">{connectedCalendar.integration.name}</h1>
|
||||
{connectedCalendar.calendars?.map((calendar) => (
|
||||
<div key={calendar.id}>
|
||||
<h2>{calendar.name}</h2>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
{!!connectedCalendars?.length && <hr className="my-4" />}
|
||||
{!isLoading && destinationCalendar.id && (
|
||||
<div className="">
|
||||
<h2 className="text-md font-bold">Destination Calendar: {destinationCalendar.name}</h2>
|
||||
<p>{destinationCalendar.integrationTitle}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
15
calcom/packages/platform/examples/base/src/pages/embed.tsx
Normal file
15
calcom/packages/platform/examples/base/src/pages/embed.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { Inter } from "next/font/google";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export default function Embed(props: { calUsername: string; calEmail: string }) {
|
||||
return (
|
||||
<main className={`flex ${inter.className} text-default flex flex-col`}>
|
||||
<Navbar username={props.calUsername} />
|
||||
<div>
|
||||
<h1 className="mx-8 my-4 text-2xl font-bold">This is the booker embed</h1>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
46
calcom/packages/platform/examples/base/src/pages/index.tsx
Normal file
46
calcom/packages/platform/examples/base/src/pages/index.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { Inter, Poppins } from "next/font/google";
|
||||
|
||||
import { GcalConnect, Connect } from "@calcom/atoms";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] });
|
||||
|
||||
export default function Home(props: { calUsername: string; calEmail: string }) {
|
||||
return (
|
||||
<main className={`flex min-h-screen flex-col ${inter.className} items-center justify-center`}>
|
||||
<Navbar username={props.calUsername} />
|
||||
<div
|
||||
className={` h-[100vh] w-full items-center justify-center gap-y-3 font-mono lg:flex ${inter.className} gap-16 `}>
|
||||
<div className="ml-32">
|
||||
<h1 className={`${poppins.className} w-[100%] pb-3 text-7xl font-bold`}>
|
||||
The all in one Scheduling marketplace
|
||||
</h1>
|
||||
<p className={`w-[70%] font-normal ${inter.className} pb-3 text-2xl`}>
|
||||
To get started, connect your google calendar.
|
||||
</p>
|
||||
<div className="flex flex-row gap-4">
|
||||
<GcalConnect
|
||||
redir="http://localhost:4321/calendars"
|
||||
className="h-[40px] bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700"
|
||||
/>
|
||||
<Connect.OutlookCalendar
|
||||
redir="http://localhost:4321/calendars"
|
||||
className="h-[40px] bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700"
|
||||
/>
|
||||
<Connect.AppleCalendar className="h-[40px] bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden lg:block">
|
||||
<img
|
||||
width="76%"
|
||||
height="76%"
|
||||
className=" rounded-lg shadow-2xl"
|
||||
alt="cover image"
|
||||
src="https://images.unsplash.com/photo-1506784365847-bbad939e9335?q=80&w=2668&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
}
|
||||
Reference in New Issue
Block a user