Powered by for ee (#8434)

* moved poweredBy into ee/ to make it possible to change it when a whitelabel is applied

* added text-emphasis for custom powered by text in PoweredBy

---------

Co-authored-by: René Müller <rene.mueller@clicksports.de>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

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

@@ -36,7 +36,7 @@ import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
 import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
 import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
 
-const PoweredByCal = dynamic(() => import("@components/ui/PoweredByCal"));
+const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy"));
 
 const Toaster = dynamic(() => import("react-hot-toast").then((mod) => mod.Toaster), { ssr: false });
 /*const SlotPicker = dynamic(() => import("../SlotPicker").then((mod) => mod.SlotPicker), {
@@ -301,7 +301,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
               </div>
             </div>
             {/* FIXME: We don't show branding in Embed yet because we need to place branding on top of the main content. Keeping it outside the main content would have visibility issues because outside main content background is transparent */}
-            {!restProps.isBrandingHidden && !isEmbed && <PoweredByCal />}
+            {!restProps.isBrandingHidden && !isEmbed && <PoweredBy />}
           </div>
         </main>
       </div>

apps/web/components/ui/PoweredByCal.tsx

@@ -1,29 +0,0 @@
-import Link from "next/link";
-
-import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
-import { POWERED_BY_URL } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-const PoweredByCal = () => {
-  const { t } = useLocale();
-  const isEmbed = useIsEmbed();
-  return (
-    <div className={"p-2 text-center text-xs sm:text-right" + (isEmbed ? " max-w-3xl" : "")}>
-      <Link href={POWERED_BY_URL} target="_blank" className="text-subtle opacity-50 hover:opacity-100">
-        {t("powered_by")}{" "}
-        <img
-          className="relative -mt-px inline h-[10px] w-auto dark:hidden"
-          src="/cal-logo-word.svg"
-          alt="Cal.com Logo"
-        />
-        <img
-          className="relativ -mt-px hidden h-[10px] w-auto dark:inline"
-          src="/cal-logo-word-dark.svg"
-          alt="Cal.com Logo"
-        />
-      </Link>
-    </div>
-  );
-};
-
-export default PoweredByCal;

packages/features/ee/components/PoweredBy.tsx

@@ -0,0 +1,39 @@
+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 = () => {
+  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" : "")}>
+      <Link href={POWERED_BY_URL} target="_blank" className="text-subtle opacity-50 hover:opacity-100">
+        {t("powered_by")}{" "}
+        {APP_NAME === "Cal.com" || !hasValidLicense ? (
+          <>
+            <img
+              className="relative -mt-px inline h-[10px] w-auto dark:hidden"
+              src="/cal-logo-word.svg"
+              alt="Cal.com Logo"
+            />
+            <img
+              className="relativ -mt-px hidden h-[10px] w-auto dark:inline"
+              src="/cal-logo-word-dark.svg"
+              alt="Cal.com Logo"
+            />
+          </>
+        ) : (
+          <span className="text-emphasis font-semibold">{APP_NAME}</span>
+        )}
+      </Link>
+    </div>
+  );
+};
+
+export default PoweredByCal;