HotFix - Background not being transparent for [user]/[type] in embed (#3121)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -286,7 +286,7 @@ const useDateSelected = ({ timeZone }: { timeZone?: string }) => {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [router.query.date]);
 
   const setSelectedDate = (newDate: Date) => {
     router.replace(
@@ -314,6 +314,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   const { contracts } = useContracts();
   const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
   const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
+
   const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
   const isBackgroundTransparent = useIsBackgroundTransparent();
 
@@ -350,6 +351,10 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
     }
   }, [telemetry]);
 
+  // Avoid embed styling flicker. Till embed status is confirmed, don't render.
+  if (isEmbed === null) {
+    return null;
+  }
   // Recurring event sidebar requires more space
   const maxWidth = isAvailableTimesVisible
     ? recurringEventCount

apps/web/pages/[user]/[type].tsx

@@ -1,10 +1,13 @@
 import { UserPlan } from "@prisma/client";
 import dayjs from "dayjs";
-import { GetStaticPropsContext } from "next";
+import { GetStaticPropsContext, GetStaticPaths } from "next";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import { JSONObject } from "superjson/dist/types";
 import { z } from "zod";
 
 import { locationHiddenFilter, LocationObject } from "@calcom/app-store/locations";
+import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { getDefaultEvent, getGroupName, getUsernameList } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -19,7 +22,14 @@ export type AvailabilityPageProps = inferSSRProps<typeof getStaticProps>;
 
 export default function Type(props: AvailabilityPageProps) {
   const { t } = useLocale();
-
+  const isEmbed = useIsEmbed();
+  useEffect(() => {
+    // Embed background is handled in _document.tsx but this particular page(/[user][/type] is statically rendered and thus doesn't have `embed` param at that time)
+    // So, for static pages, handle the embed background here. Make sure to always keep it consistent with _document.tsx
+    if (isEmbed) {
+      document.body.style.background = "transparent";
+    }
+  }, [isEmbed]);
   return props.away ? (
     <div className="h-screen dark:bg-neutral-900">
       <main className="mx-auto max-w-3xl px-4 py-24">
@@ -284,6 +294,7 @@ async function getDynamicGroupPageProps(context: GetStaticPropsContext) {
 const paramsSchema = z.object({ type: z.string(), user: z.string() });
 
 export const getStaticProps = async (context: GetStaticPropsContext) => {
+  console.log("STATIC CALL", context.params);
   const { user: userParam } = paramsSchema.parse(context.params);
   // dynamic groups are not generated at build time, but otherwise are probably cached until infinity.
   const isDynamicGroup = userParam.includes("+");
@@ -294,6 +305,6 @@ export const getStaticProps = async (context: GetStaticPropsContext) => {
   }
 };
 
-export const getStaticPaths = async () => {
+export const getStaticPaths: GetStaticPaths = async () => {
   return { paths: [], fallback: "blocking" };
 };

apps/web/pages/_document.tsx

@@ -11,9 +11,13 @@ class MyDocument extends Document<Props> {
 
   render() {
     const props = this.props;
-    const { locale } = this.props.__NEXT_DATA__;
+    const { locale, gssp } = this.props.__NEXT_DATA__;
     const dir = locale === "ar" || locale === "he" ? "rtl" : "ltr";
 
+    // gssp -> getServerSideProps allow us to know that this page was rendered server side and thus would have ctx.req.url with embed query param(if it was there in the request)
+    // In that case only, we should consider embed to be enabled. For other cases it should be handled at client side and the component should ensure that flicker due to changing css doesn't occur
+    const isEmbedCorrectlyDetected = gssp && props.isEmbed;
+
     return (
       <Html lang={locale} dir={dir}>
         <Head>
@@ -28,8 +32,8 @@ class MyDocument extends Document<Props> {
 
         {/* Keep the embed hidden till parent initializes and gives it the appropriate styles */}
         <body
-          className={props.isEmbed ? "bg-transparent" : "bg-gray-100 dark:bg-neutral-900"}
-          style={props.isEmbed ? { display: "none" } : {}}>
+          className={isEmbedCorrectlyDetected ? "bg-transparent" : "bg-gray-100 dark:bg-neutral-900"}
+          style={isEmbedCorrectlyDetected ? { display: "none" } : {}}>
           <Main />
           <NextScript />
         </body>

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

@@ -229,7 +229,7 @@ export const useIsEmbed = () => {
   // We can't simply return isEmbed() from this method.
   // isEmbed() returns different values on server and browser, which messes up the hydration.
   // TODO: We can avoid using document.URL and instead use Router.
-  const [_isEmbed, setIsEmbed] = useState(false);
+  const [_isEmbed, setIsEmbed] = useState<boolean | null>(null);
   useEffect(() => {
     setIsEmbed(isEmbed());
   }, []);