first commit

2024-08-09 00:39:27 +02:00
commit 79688abe2e
5698 changed files with 497838 additions and 0 deletions
--- a/calcom/packages/platform/examples/base/.env.example
+++ b/calcom/packages/platform/examples/base/.env.example
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_X_CAL_ID=""
+X_CAL_SECRET_KEY=""
+NEXT_PUBLIC_CALCOM_API_URL="http://localhost:5555/api/v2"
--- a/calcom/packages/platform/examples/base/.eslintrc.js
+++ b/calcom/packages/platform/examples/base/.eslintrc.js
@@ -0,0 +1 @@
+module.exports = {};
--- a/calcom/packages/platform/examples/base/.gitignore
+++ b/calcom/packages/platform/examples/base/.gitignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.yarn
+dev.db
--- a/calcom/packages/platform/examples/base/README.md
+++ b/calcom/packages/platform/examples/base/README.md
@@ -0,0 +1,35 @@
+# Atoms examples
+Example apps using atoms - customizable UI components to integrate scheduling into your product.
+
+## Running examples apps locally
+
+1. Cal's backend is required to run example apps, so clone `https://github.com/calcom/cal.com` and follow setup instructions in the readme. Importantly, you need to have Google credentials setup by following [this section](https://github.com/calcom/cal.com?tab=readme-ov-file#obtaining-the-google-api-credentials) in the docs.
+
+2. Open "apps/api/v2/.env" and copy environment variables below, and then copy `NEXTAUTH_SECRET` from the root ".env" of repository cloned in step 1.
+```jsx
+NODE_ENV="development"
+API_PORT=5555
+DATABASE_READ_URL="postgresql://postgres:@localhost:5450/calendso"
+DATABASE_WRITE_URL="postgresql://postgres:@localhost:5450/calendso"
+API_URL="http://localhost"
+NEXTAUTH_SECRET="copy from .env of root of repository cloned in step 1"
+DATABASE_URL="postgresql://postgres:@localhost:5450/calendso"
+JWT_SECRET="asjdijI1JIO12I3O89198jojioSAJDU"
+REDIS_URL="redis://localhost:6379"
+```
+
+3. Start "apps/api/v2" api using `yarn dev`.
+4. Start "packages/platform/atoms" atoms package with `yarn dev`.
+5. Start "apps/web" cal web app using `yarn dx`.
+6. Open your browser at "http://localhost:3000/" and login with admin username `admin@example.com` and password `ADMINadmin2022!`.
+7. In the web app navigate to `http://localhost:3000/settings/organizations/new` and create a sample organization. When asked for phone verification code enter `111111`.
+8. In the web app navigate to `http://localhost:3000/settings/organizations/platform/oauth-clients` and create a new oAuth client - give all permissions and set redirect uri to `http://localhost:4321` which points to example app.
+9. Setup environment for the example app you want to run:
+    1. First, copy ".env.example" into ".env".
+    2. Open ".env" file and paste client id from step 8 in `NEXT_PUBLIC_X_CAL_ID` and client secret in `X_CAL_SECRET_KEY`. If in step 2 you used the same environment variables, then `NEXT_PUBLIC_CALCOM_API_URL` can stay as is. Otherwise adjust the port to point to the same `API_PORT` as you used in step 2.
+10. Navigate to example app and setup database by running `rm -f prisma/dev.db && yarn prisma db push`.
+11. Start the example app by running `yarn dev` and go to `http://localhost:4321`.
+12. In the Google Cloud Console "API & Services" "Credentials" `https://console.cloud.google.com/apis/credentials` open web project setup in step 1 and add `http://localhost:5555/v2/gcal/oauth/save` to the authorized redirect URIs.
+
+<img width="1000" alt="Screenshot 2024-03-21 at 09 42 36" src="https://github.com/calcom/atoms-examples/assets/42170848/82ce4d7a-fc08-489a-ab06-a8eb41a68a2a">
+
--- a/calcom/packages/platform/examples/base/next.config.js
+++ b/calcom/packages/platform/examples/base/next.config.js
@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ["@calcom/platform-constants"],
+  webpack: (config, { webpack, buildId }) => {
+    config.resolve.fallback = {
+      ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
+    };
+    return config;
+  },
+};
+
+module.exports = nextConfig;
--- a/calcom/packages/platform/examples/base/package.json
+++ b/calcom/packages/platform/examples/base/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@calcom/base",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "PORT=4321 next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@calcom/atoms": "*",
+    "@prisma/client": "5.4.2",
+    "next": "14.0.4",
+    "prisma": "^5.7.1",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20.3.1",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.4",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^4.9.4"
+  }
+}
--- a/calcom/packages/platform/examples/base/postcss.config.js
+++ b/calcom/packages/platform/examples/base/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/calcom/packages/platform/examples/base/prisma/schema.prisma
+++ b/calcom/packages/platform/examples/base/prisma/schema.prisma
@@ -0,0 +1,26 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+// prisma/schema.prisma
+datasource db {
+  provider = "sqlite"
+  url      = "file:./dev.db"
+}
+
+
+model User {
+  id    Int     @id @default(autoincrement())
+  email String  @unique
+  name  String?
+  calcomUserId Int? @unique
+  calcomUsername String? @unique
+  refreshToken String? @unique
+  accessToken String? @unique
+  createdAt DateTime @default(now())
+  updatedAt DateTime @default(now())
+
+}
--- a/calcom/packages/platform/examples/base/public/favicon.ico
+++ b/calcom/packages/platform/examples/base/public/favicon.ico
--- a/calcom/packages/platform/examples/base/public/next.svg
+++ b/calcom/packages/platform/examples/base/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/calcom/packages/platform/examples/base/public/vercel.svg
+++ b/calcom/packages/platform/examples/base/public/vercel.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
--- a/calcom/packages/platform/examples/base/src/components/Navbar/index.tsx
+++ b/calcom/packages/platform/examples/base/src/components/Navbar/index.tsx
@@ -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>
+  );
+}
--- a/calcom/packages/platform/examples/base/src/lib/prismaClient.ts
+++ b/calcom/packages/platform/examples/base/src/lib/prismaClient.ts
@@ -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;
--- a/calcom/packages/platform/examples/base/src/pages/[bookingUid].tsx
+++ b/calcom/packages/platform/examples/base/src/pages/[bookingUid].tsx
@@ -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>
+  );
+}
--- a/calcom/packages/platform/examples/base/src/pages/_app.tsx
+++ b/calcom/packages/platform/examples/base/src/pages/_app.tsx
@@ -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>
+  );
+}
--- a/calcom/packages/platform/examples/base/src/pages/_document.tsx
+++ b/calcom/packages/platform/examples/base/src/pages/_document.tsx
@@ -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>
+  );
+}
--- a/calcom/packages/platform/examples/base/src/pages/api/managed-user.ts
+++ b/calcom/packages/platform/examples/base/src/pages/api/managed-user.ts
@@ -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;
+}
--- a/calcom/packages/platform/examples/base/src/pages/api/refresh.ts
+++ b/calcom/packages/platform/examples/base/src/pages/api/refresh.ts
@@ -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: "" });
+}
--- a/calcom/packages/platform/examples/base/src/pages/availability.tsx
+++ b/calcom/packages/platform/examples/base/src/pages/availability.tsx
@@ -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>
+  );
+}
--- a/calcom/packages/platform/examples/base/src/pages/booking.tsx
+++ b/calcom/packages/platform/examples/base/src/pages/booking.tsx
@@ -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>
+  );
+}
--- a/calcom/packages/platform/examples/base/src/pages/bookings.tsx
+++ b/calcom/packages/platform/examples/base/src/pages/bookings.tsx
@@ -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>
+  );
+}
--- a/calcom/packages/platform/examples/base/src/pages/calendars.tsx
+++ b/calcom/packages/platform/examples/base/src/pages/calendars.tsx
@@ -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>
+  );
+}
--- a/calcom/packages/platform/examples/base/src/pages/embed.tsx
+++ b/calcom/packages/platform/examples/base/src/pages/embed.tsx
@@ -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>
+  );
+}
--- a/calcom/packages/platform/examples/base/src/pages/index.tsx
+++ b/calcom/packages/platform/examples/base/src/pages/index.tsx
@@ -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>
+  );
+}
--- a/calcom/packages/platform/examples/base/src/styles/globals.css
+++ b/calcom/packages/platform/examples/base/src/styles/globals.css
@@ -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));
+}
--- a/calcom/packages/platform/examples/base/tailwind.config.ts
+++ b/calcom/packages/platform/examples/base/tailwind.config.ts
@@ -0,0 +1,19 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;
--- a/calcom/packages/platform/examples/base/tsconfig.json
+++ b/calcom/packages/platform/examples/base/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>