Embed behind authentication page

apps/web/components/Shell.tsx

@@ -17,6 +17,7 @@ import { useRouter } from "next/router";
 import React, { Fragment, ReactNode, useEffect } from "react";
 import { Toaster } from "react-hot-toast";
 
+import { useIsEmbed } from "@calcom/embed-core";
 import Button from "@calcom/ui/Button";
 import Dropdown, {
   DropdownMenuContent,
@@ -132,6 +133,7 @@ export default function Shell(props: {
   // use when content needs to expand with flex
   flexChildrenContainer?: boolean;
 }) {
+  const isEmbed = useIsEmbed();
   const { t } = useLocale();
   const router = useRouter();
   const { loading, session } = useRedirectToLoginIfUnauthenticated();
@@ -228,7 +230,7 @@ export default function Shell(props: {
         className={classNames("flex h-screen overflow-hidden", props.large ? "bg-white" : "bg-gray-100")}
         data-testid="dashboard-shell">
         {status === "authenticated" && (
-          <div className="hidden md:flex lg:flex-shrink-0">
+          <div style={isEmbed ? { display: "none" } : {}} className="hidden md:flex lg:flex-shrink-0">
             <div className="flex w-14 flex-col lg:w-56">
               <div className="flex h-0 flex-1 flex-col border-r border-gray-200 bg-white">
                 <div className="flex flex-1 flex-col overflow-y-auto pt-3 pb-4 lg:pt-5">
@@ -319,7 +321,9 @@ export default function Shell(props: {
             )}>
             {/* show top navigation for md and smaller (tablet and phones) */}
             {status === "authenticated" && (
-              <nav className="flex items-center justify-between border-b border-gray-200 bg-white p-4 md:hidden">
+              <nav
+                style={isEmbed ? { display: "none" } : {}}
+                className="flex items-center justify-between border-b border-gray-200 bg-white p-4 md:hidden">
                 <Link href="/event-types">
                   <a>
                     <Logo />
@@ -379,7 +383,9 @@ export default function Shell(props: {
               </div>
               {/* show bottom navigation for md and smaller (tablet and phones) */}
               {status === "authenticated" && (
-                <nav className="bottom-nav fixed bottom-0 z-30 flex w-full bg-white shadow md:hidden">
+                <nav
+                  style={isEmbed ? { display: "none" } : {}}
+                  className="bottom-nav fixed bottom-0 z-30 flex w-full bg-white shadow md:hidden">
                   {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
                   {navigation.flatMap((item, itemIdx) =>
                     item.href === "/settings/profile" ? (

packages/embeds/embed-core/README.md

@@ -41,6 +41,12 @@ Make `dist/embed.umd.js` servable on URL <http://cal.com/embed.js>
   - let user choose the loader for ModalBox
   - If website owner links the booking page directly for an event, should the user be able to go to events-listing page using back button ?
   - Let user specify both dark and light theme colors. Right now the colors specified are for light theme.
+  - Embed doesn't adapt to screen size without page refresh.
+    - Try opening in portrait mode and then go to landscape mode.
+
+- Branding
+  - Powered by Cal.com and 'Try it for free'. Should they be shown only for FREE account.
+  - Branding at the bottom has been removed for UI improvements, need to see where to add it.
 
 - Automation Tests
   - Run automation tests in CI
@@ -64,8 +70,18 @@ Make `dist/embed.umd.js` servable on URL <http://cal.com/embed.js>
 
 - Might be better to pass all configuration using a single base64encoded query param to booking page.
 
+- Performance Improvements
+  - Repeat clicks to show popup should be instant. There is some delay right now because of iframe being removed and being reloaded even if requests are cached. Iframe shouldn't be removed.
+  
 - Embed Code Generator
 
+- Release Issues
+  - Compatibility Issue - When embed-iframe.js is updated in such a way that it is not compatible with embed.js, doing a release might break the embed for some time. e.g. iframeReady event let's say get's changed to something else
+    - Best Case scenario - App and Website goes live at the same time. A website using embed loads the same updated and thus compatible versions of embed.js and embed-iframe.js
+    - Worst case scenario - App goes live first, website PR isn't merged yet and thus a website using the embed would load updated version of embed-iframe but outdated version of embed.js possibly breaking the embed.
+    - Ideal Solution: It would be to keep the libraries versioned and embed.js should instruct app within iframe to load a particular version. But if we push a security fix, it is possible that someone is still enforcing embed to load version with security issue. Need to handle this.
+    - Quick Solution: Serve embed.js also from app, so that they go live together and there is only a slight chance of compatibility issues on going live. Note, that they can still occur as 2 different requests are sent at different times to fetch the libraries and deployments can go live in between,
+
 - UI Config Features
   - Theme switch dynamically - If user switches the theme on website, he should be able to do it on embed. Add a demo for the API. Also, test system theme handling.
     - How would the user add on hover styles just using style attribute ?
@@ -75,19 +91,6 @@ Make `dist/embed.umd.js` servable on URL <http://cal.com/embed.js>
 - React Component
   - `onClick` support with preloading
 
-Embed for authenticated pages
-
-- Currently embed is properly supported for non authenticated pages like cal.com/john. It is supported for team links as well.
-- For such pages, you can customize the colors of all the texts and give a common background to all pages under your cal link
-- If we can support other pages, which are behind login, it can open possibilities for users to show "upcoming bookings", "availability" and other functionalities on their website itself. 
-  - First of all we need more usecases for this.
-  - Think of it in this way. Cal.com is build with many different UI components that are put together to work seamlessly, what if the user can choose which component they need and which they don't
-  - The main problem with this is that, there are so many pages in the app. We would need to ensure that all the pages use the same text colors only that are available as embed UI configuration.
-  - We would need to hide certain UI components when opening a page. e.g. the navigation component wouldn't be there.
-  - User might want to change the text also for components, e.g. he might call "Event Type" as "Meeting Type" everywhere. common.json would be useful in this scenario.
-  - Login form shouldn't be visible in embed as auth would be taken care of separately. If due to cookies being expired, the component can't be shown then whatever auth flow is configured, can be triggered
-    - In most scenarios, user would have a website on which the visitors would be signing in already into their system(and thus they own the user table) and he would want to just link those users to cal.com - This would be allowed only with self hosted instance ?
-      - So, cal.com won't maintain the user details itself and would simply store a user id which it would provide to hosting website to retrieve user information whenever it needs it.
 
 
 ## Pending Documentation

packages/embeds/embed-core/index.html

@@ -64,6 +64,10 @@
       <button data-cal-namespace="popupDarkTheme" data-cal-config='{"theme":"dark"}' data-cal-link="free?dark&popup">Book with Free User[Dark Theme]</button>
       <button data-cal-namespace="popupTeamLinkLightTheme" data-cal-config='{"theme":"light"}' data-cal-link="team/test-team?team&light&popup">Book with Test Team[Light Theme]</button>
       <button data-cal-namespace="popupTeamLinkDarkTheme" data-cal-config='{"theme":"dark"}' data-cal-link="team/test-team?team&dark&popup">Book with Test Team[Dark Theme]</button>
+      <div>
+        <h2>Embed for Pages behind authentication</h2>
+        <button data-cal-namespace="upcomingBookings" data-cal-config='{"theme":"dark"}' data-cal-link="bookings/upcoming">Show Upcoming Bookings</button>
+      </div>
 
       <div>
         <i
@@ -320,6 +324,11 @@
         debug: 1,
         origin: "http://localhost:3000",
       })
+
+      Cal('init', 'upcomingBookings', {
+        debug: 1,
+        origin: "http://localhost:3000",
+      })
     </script>
     <script></script>
   </body>

packages/embeds/embed-core/src/embed.css

@@ -3,5 +3,5 @@
 */
 .cal-embed {
   border: 0px;
-  min-height: 100%;
+  min-height: 300px;
 }

packages/embeds/embed-core/src/embed.ts

@@ -201,6 +201,7 @@ export class Cal {
       required: true,
       props: {
         calLink: {
+          // TODO: Add a special type calLink for it and validate that it doesn't start with / or https?://
           required: true,
           type: "string",
         },

packages/embeds/embed-react/src/Cal.tsx

@@ -4,9 +4,11 @@ import useEmbed from "./useEmbed";
 
 export default function Cal({
   calLink,
+  calOrigin,
   config,
   embedJsUrl,
 }: {
+  calOrigin?: string;
   calLink: string;
   config?: any;
   embedJsUrl?: string;
@@ -17,13 +19,17 @@ export default function Cal({
     if (!Cal) {
       return;
     }
-    Cal("init");
+    let initConfig = {};
+    if (calOrigin) {
+      (initConfig as any).origin = calOrigin;
+    }
+    Cal("init", initConfig);
     Cal("inline", {
       elementOrSelector: ref.current,
       calLink,
       config,
     });
-  }, [Cal, calLink, config]);
+  }, [Cal, calLink, config, calOrigin]);
 
   if (!Cal) {
     return <div>Loading {calLink}</div>;

packages/embeds/embed-react/test-cal.tsx

@@ -9,6 +9,7 @@ function App() {
         There is <code>Cal</code> component below me
       </h1>
       <Cal
+        calOrigin="http://localhost:3000"
         embedJsUrl="//localhost:3002/dist/embed.umd.js"
         calLink="pro"
         config={{