chore: add cal.com logo to platform booker embed (#18269)

* chore: add cal.com logo to platform booker embed

* fixup! chore: add cal.com logo to platform booker embed

---------

Co-authored-by: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>

packages/features/bookings/Booker/Booker.tsx

@@ -6,6 +6,7 @@ import StickyBox from "react-sticky-box";
 import { shallow } from "zustand/shallow";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
+import { useIsPlatformBookerEmbed } from "@calcom/atoms/monorepo";
 import dayjs from "@calcom/dayjs";
 import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param";
 import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
@@ -31,7 +32,7 @@ import { useBookerStore } from "./store";
 import type { BookerProps, WrappedBookerProps } from "./types";
 
 const loadFramerFeatures = () => import("./framer-features").then((res) => res.default);
-const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy"));
+const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy").then((mod) => mod.default));
 const UnpublishedEntity = dynamic(() =>
   import("@calcom/ui/components/unpublished-entity/UnpublishedEntity").then((mod) => mod.UnpublishedEntity)
 );
@@ -68,9 +69,10 @@ const BookerComponent = ({
   customClassNames,
   areInstantMeetingParametersSet = false,
   userLocale,
+  hasValidLicense,
 }: BookerProps & WrappedBookerProps) => {
   const { t } = useLocale();
-
+  const isPlatformBookerEmbed = useIsPlatformBookerEmbed();
   const [bookerState, setBookerState] = useBookerStore((state) => [state.state, state.setState], shallow);
   const selectedDate = useBookerStore((state) => state.selectedDate);
   const {
@@ -462,7 +464,7 @@ const BookerComponent = ({
               />
             </div>
           )}
-        {!hideBranding && !isPlatform && (
+        {!hideBranding && (!isPlatform || isPlatformBookerEmbed) && (
           <m.span
             key="logo"
             className={classNames(
@@ -470,7 +472,7 @@ const BookerComponent = ({
               hasDarkBackground ? "dark" : "",
               layout === BookerLayouts.MONTH_VIEW ? "block" : "hidden"
             )}>
-            <PoweredBy logoOnly />
+            <PoweredBy logoOnly hasValidLicense={hasValidLicense} />
           </m.span>
         )}
       </div>

packages/features/bookings/Booker/types.ts

@@ -92,6 +92,7 @@ export interface BookerProps {
   crmAppSlug?: string | null;
   areInstantMeetingParametersSet?: boolean | null;
   userLocale?: string | null;
+  hasValidLicense?: boolean;
 }
 
 export type WrappedBookerPropsMain = {

packages/features/ee/components/PoweredBy.tsx

@@ -1,15 +1,18 @@
-import { useSession } from "next-auth/react";
 import Link from "next/link";
 
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { APP_NAME, POWERED_BY_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-const PoweredByCal = ({ logoOnly }: { logoOnly?: boolean }) => {
+const PoweredByCal = ({
+  logoOnly,
+  hasValidLicense,
+}: {
+  logoOnly?: boolean;
+  hasValidLicense?: boolean | null;
+}) => {
   const { t } = useLocale();
-  const session = useSession();
   const isEmbed = useIsEmbed();
-  const hasValidLicense = session.data ? session.data.hasValidLicense : null;
 
   return (
     <div className={`p-2 text-center text-xs sm:text-right${isEmbed ? " max-w-3xl" : ""}`}>
@@ -17,7 +20,11 @@ const PoweredByCal = ({ logoOnly }: { logoOnly?: boolean }) => {
         {!logoOnly && <>{t("powered_by")} </>}
         {APP_NAME === "Cal.com" || !hasValidLicense ? (
           <>
-            <img className="-mt-px inline h-[10px] w-auto dark:invert" src="/api/logo" alt="Cal.com Logo" />
+            <img
+              className="-mt-px inline h-[10px] w-auto dark:invert"
+              src={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/api/logo`}
+              alt="Cal.com Logo"
+            />
           </>
         ) : (
           <span className="text-emphasis font-semibold opacity-50 hover:opacity-100">{APP_NAME}</span>

packages/platform/atoms/booker/BookerPlatformWrapper.tsx

@@ -494,6 +494,7 @@ export const BookerPlatformWrapper = (
         bookerLayout={bookerLayout}
         verifyCode={undefined}
         isPlatform
+        hasValidLicense={true}
       />
     </AtomsWrapper>
   );

packages/platform/atoms/booker/BookerWebWrapper.tsx

@@ -216,6 +216,7 @@ export const BookerWebWrapper = (props: BookerWebWrapperAtomProps) => {
       rescheduledBy={rescheduledBy}
       bookingUid={bookingUid}
       hasSession={hasSession}
+      hasValidLicense={session?.hasValidLicense ?? false}
       extraOptions={routerQuery}
       bookings={bookings}
       calendars={calendars}