feat: make branding hideable in the new booker (#9033)

* feat: make branding hideable

* fix: typo

apps/web/pages/new-booker/[user]/[type].tsx

@@ -14,11 +14,22 @@ import PageWrapper from "@components/PageWrapper";
 
 type PageProps = inferSSRProps<typeof getServerSideProps>;
 
-export default function Type({ slug, user, booking, away }: PageProps) {
+export default function Type({ slug, user, booking, away, isBrandingHidden }: PageProps) {
   return (
     <main className="flex h-full min-h-[100dvh] items-center justify-center">
-      <BookerSeo username={user} eventSlug={slug} rescheduleUid={booking?.uid} />
-      <Booker username={user} eventSlug={slug} rescheduleBooking={booking} isAway={away} />
+      <BookerSeo
+        username={user}
+        eventSlug={slug}
+        rescheduleUid={booking?.uid}
+        hideBranding={isBrandingHidden}
+      />
+      <Booker
+        username={user}
+        eventSlug={slug}
+        rescheduleBooking={booking}
+        isAway={away}
+        hideBranding={isBrandingHidden}
+      />
     </main>
   );
 }
@@ -64,6 +75,7 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
       slug,
       away: false,
       trpcState: ssr.dehydrate(),
+      isBrandingHidden: false,
     },
   };
 }
@@ -80,6 +92,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
     },
     select: {
       away: true,
+      hideBranding: true,
     },
   });
 
@@ -103,6 +116,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
       user: username,
       slug,
       trpcState: ssr.dehydrate(),
+      isBrandingHidden: user?.hideBranding,
     },
   };
 }

apps/web/pages/new-booker/team/[slug]/[type].tsx

@@ -13,11 +13,22 @@ import PageWrapper from "@components/PageWrapper";
 
 type PageProps = inferSSRProps<typeof getServerSideProps>;
 
-export default function Type({ slug, user, booking, away }: PageProps) {
+export default function Type({ slug, user, booking, away, isBrandingHidden }: PageProps) {
   return (
     <main className="flex h-full min-h-[100dvh] items-center justify-center">
-      <BookerSeo username={user} eventSlug={slug} rescheduleUid={booking?.uid} />
-      <Booker username={user} eventSlug={slug} rescheduleBooking={booking} isAway={away} />
+      <BookerSeo
+        username={user}
+        eventSlug={slug}
+        rescheduleUid={booking?.uid}
+        hideBranding={isBrandingHidden}
+      />
+      <Booker
+        username={user}
+        eventSlug={slug}
+        rescheduleBooking={booking}
+        isAway={away}
+        hideBranding={isBrandingHidden}
+      />
     </main>
   );
 }
@@ -41,6 +52,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     },
     select: {
       id: true,
+      hideBranding: true,
     },
   });
 
@@ -62,6 +74,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       user: teamSlug,
       slug: meetingSlug,
       trpcState: ssr.dehydrate(),
+      isBrandingHidden: team?.hideBranding,
     },
   };
 };

packages/features/bookings/Booker/Booker.tsx

@@ -29,7 +29,13 @@ const DatePicker = dynamic(() => import("./components/DatePicker").then((mod) =>
   ssr: false,
 });
 
-const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: BookerProps) => {
+const BookerComponent = ({
+  username,
+  eventSlug,
+  month,
+  rescheduleBooking,
+  hideBranding = false,
+}: BookerProps) => {
   const { t } = useLocale();
   const isMobile = useMediaQuery("(max-width: 768px)");
   const isTablet = useMediaQuery("(max-width: 1024px)");
@@ -202,7 +208,7 @@ const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: Book
             "mt-auto mb-6 pt-6 [&_img]:h-[15px]",
             layout === "small_calendar" ? "block" : "hidden"
           )}>
-          <PoweredBy logoOnly />
+          {!hideBranding ? <PoweredBy logoOnly /> : null}
         </m.span>
       </div>