feat: BookerEmbed atom (#15689)

* init: booker embed atom

* update booker platform wrapper

* export booker embed for atoms

* update booker embed wrapper

* fixup: refresh url not needed

* rename booker embed

* add global styles

* export not needed

* add booker embed atoms in examples app

* fixup

* fixup! fixup

* fixup! fixup! fixup

---------

Co-authored-by: Rajiv Sahal <rajivsahal@Rajivs-MacBook-Pro.local>
Co-authored-by: Morgan Vernay <morgan@cal.com>
Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com>

packages/platform/atoms/.env.example

@@ -0,0 +1,3 @@
+VITE_BOOKER_EMBED_OAUTH_CLIENT_ID="clye3x2f6000133strp0tf85t"
+
+VITE_BOOKER_EMBED_API_URL="http://localhost:5555/api/v2"

packages/platform/atoms/booker-embed/BookerEmbed.tsx

@@ -0,0 +1,15 @@
+import type { BookerPlatformWrapperAtomProps } from "../booker/BookerPlatformWrapper";
+import { BookerPlatformWrapper } from "../booker/BookerPlatformWrapper";
+import { CalProvider } from "../cal-provider/CalProvider";
+
+export const BookerEmbed = (props: BookerPlatformWrapperAtomProps) => {
+  return (
+    <CalProvider
+      clientId={import.meta.env.VITE_BOOKER_EMBED_OAUTH_CLIENT_ID}
+      options={{
+        apiUrl: import.meta.env.VITE_BOOKER_EMBED_API_URL,
+      }}>
+      <BookerPlatformWrapper {...props} />
+    </CalProvider>
+  );
+};

packages/platform/atoms/booker-embed/index.ts

@@ -0,0 +1 @@
+export { BookerEmbed } from "./BookerEmbed";

packages/platform/atoms/booker/BookerPlatformWrapper.tsx

@@ -41,7 +41,7 @@ import { useMe } from "../hooks/useMe";
 import { useSlots } from "../hooks/useSlots";
 import { AtomsWrapper } from "../src/components/atoms-wrapper";
 
-type BookerPlatformWrapperAtomProps = Omit<BookerProps, "username" | "entity"> & {
+export type BookerPlatformWrapperAtomProps = Omit<BookerProps, "username" | "entity"> & {
   rescheduleUid?: string;
   bookingUid?: string;
   username: string | string[];

packages/platform/atoms/index.ts

@@ -14,3 +14,4 @@ export { useGetBookings } from "./hooks/useGetBookings";
 export { useMe } from "./hooks/useMe";
 export { OutlookConnect } from "./connect/outlook/OutlookConnect";
 export * as Connect from "./connect";
+export { BookerEmbed } from "./booker-embed";

packages/platform/examples/base/src/components/Navbar/index.tsx

@@ -28,6 +28,9 @@ export function Navbar({ username }: { username?: string }) {
           <li>
             <Link href="/bookings">My Bookings</Link>
           </li>
+          <li>
+            <Link href="/embed">Embed</Link>
+          </li>
         </ul>
       </div>
     </nav>

packages/platform/examples/base/src/pages/_app.tsx

@@ -1,9 +1,11 @@
 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 } from "@calcom/atoms";
+import { CalProvider, BookerEmbed } from "@calcom/atoms";
 import "@calcom/atoms/globals.min.css";
 
 const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] });
@@ -25,6 +27,8 @@ 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();
@@ -59,6 +63,30 @@ export default function App({ Component, pageProps }: AppProps) {
           </>
         )}
       </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>
   );
 }

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>
+  );
+}