fix: Apply organization brand colors and theme to member personal events

apps/web/lib/apps/routing-forms/[...pages]/getServerSidePropsRoutingLink.ts

@@ -83,9 +83,12 @@ export const getServerSideProps = async function getServerSideProps(
     props: {
       isEmbed,
       profile: {
-        theme: form.user.theme,
-        brandColor: form.user.brandColor,
-        darkBrandColor: form.user.darkBrandColor,
+        theme: formWithUserProfile.user.profile?.organization?.theme ?? formWithUserProfile.user.theme,
+        brandColor:
+          formWithUserProfile.user.profile?.organization?.brandColor ?? formWithUserProfile.user.brandColor,
+        darkBrandColor:
+          formWithUserProfile.user.profile?.organization?.darkBrandColor ??
+          formWithUserProfile.user.darkBrandColor,
       },
       form: await getSerializableForm({ form: enrichFormWithMigrationData(formWithUserProfile) }),
     },

apps/web/lib/booking.ts

@@ -49,6 +49,13 @@ export const getEventTypesFromDB = async (id: number) => {
       profile: {
         select: {
           organizationId: true,
+          organization: {
+            select: {
+              brandColor: true,
+              darkBrandColor: true,
+              theme: true,
+            },
+          },
         },
       },
       teamId: true,
@@ -71,9 +78,15 @@ export const getEventTypesFromDB = async (id: number) => {
           slug: true,
           name: true,
           hideBranding: true,
+          brandColor: true,
+          darkBrandColor: true,
+          theme: true,
           parent: {
             select: {
               hideBranding: true,
+              brandColor: true,
+              darkBrandColor: true,
+              theme: true,
             },
           },
           createdByOAuthClientId: true,
@@ -116,12 +129,11 @@ export const getEventTypesFromDB = async (id: number) => {
   }
 
   const metadata = EventTypeMetaDataSchema.parse(eventType.metadata);
-  const { profile, ...restEventType } = eventType;
-  const isOrgTeamEvent = !!eventType?.team && !!profile?.organizationId;
+  const isOrgTeamEvent = !!eventType?.team && !!eventType.profile?.organizationId;
 
   return {
     isDynamic: false,
-    ...restEventType,
+    ...eventType,
     bookingFields: getBookingFieldsWithSystemFields({ ...eventType, isOrgTeamEvent }),
     metadata,
   };

apps/web/lib/team/[slug]/[type]/getServerSideProps.tsx

@@ -7,8 +7,9 @@ import { getBookingForReschedule } from "@calcom/features/bookings/lib/get-booki
 import { getSlugOrRequestedSlug, orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { getOrganizationSEOSettings } from "@calcom/features/ee/organizations/lib/orgSettings";
 import { FeaturesRepository } from "@calcom/features/flags/features.repository";
-import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
+import { getBrandingForEventType } from "@calcom/features/profile/lib/getBranding";
 import { shouldHideBrandingForTeamEvent } from "@calcom/features/profile/lib/hideBranding";
+import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import slugify from "@calcom/lib/slugify";
 import { prisma } from "@calcom/prisma";
 import type { User } from "@calcom/prisma/client";
@@ -30,7 +31,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const { req, params, query } = context;
   const session = await getServerSession({ req });
   const { slug: teamSlug, type: meetingSlug } = paramsSchema.parse(params);
-  const { rescheduleUid, isInstantMeeting: queryIsInstantMeeting, email } = query;
+  const { rescheduleUid, isInstantMeeting: queryIsInstantMeeting } = query;
   const allowRescheduleForCancelledBooking = query.allowRescheduleForCancelledBooking === "true";
   const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(req, params?.orgSlug);
 
@@ -133,6 +134,14 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const teamHasApiV2Route = await featureRepo.checkIfTeamHasFeature(team.id, "use-api-v2-for-team-slots");
   const useApiV2 = teamHasApiV2Route && hasApiV2RouteInEnv();
 
+  const branding = getBrandingForEventType({
+    eventType: {
+      team: team.parent ?? team,
+      users: [],
+      profile: null,
+    },
+  });
+
   return {
     props: {
       useApiV2,
@@ -153,6 +162,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
             : getPlaceholderAvatar(team.logoUrl, team.name),
           name,
           username: orgSlug ?? null,
+          ...branding,
         },
         title: eventData.title,
         users: eventHostsUserData,
@@ -204,6 +214,9 @@ const getTeamWithEventsData = async (
           bannerUrl: true,
           logoUrl: true,
           hideBranding: true,
+          brandColor: true,
+          darkBrandColor: true,
+          theme: true,
           organizationSettings: {
             select: {
               allowSEOIndexing: true,
@@ -214,6 +227,9 @@ const getTeamWithEventsData = async (
       logoUrl: true,
       name: true,
       slug: true,
+      brandColor: true,
+      darkBrandColor: true,
+      theme: true,
       eventTypes: {
         where: {
           slug: meetingSlug,

apps/web/modules/bookings/views/bookings-single-view.getServerSideProps.tsx

@@ -6,12 +6,13 @@ import { eventTypeMetaDataSchemaWithTypedApps } from "@calcom/app-store/zod-util
 import { orgDomainConfig } from "@calcom/ee/organizations/lib/orgDomains";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import getBookingInfo from "@calcom/features/bookings/lib/getBookingInfo";
+import { BookingRepository } from "@calcom/features/bookings/repositories/BookingRepository";
 import { getDefaultEvent } from "@calcom/features/eventtypes/lib/defaultEvents";
+import { getBrandingForEventType } from "@calcom/features/profile/lib/getBranding";
 import { shouldHideBrandingForEvent } from "@calcom/features/profile/lib/hideBranding";
 import { parseRecurringEvent } from "@calcom/lib/isRecurringEvent";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { maybeGetBookingUidFromSeat } from "@calcom/lib/server/maybeGetBookingUidFromSeat";
-import { BookingRepository } from "@calcom/features/bookings/repositories/BookingRepository";
 import prisma from "@calcom/prisma";
 import { customInputSchema } from "@calcom/prisma/zod-utils";
 import { meRouter } from "@calcom/trpc/server/routers/viewer/me/_router";
@@ -115,7 +116,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   bookingInfo["startTime"] = (bookingInfo?.startTime as Date)?.toISOString() as unknown as Date;
   bookingInfo["endTime"] = (bookingInfo?.endTime as Date)?.toISOString() as unknown as Date;
 
-  eventTypeRaw.users = !!eventTypeRaw.hosts?.length
+  eventTypeRaw.users = eventTypeRaw.hosts?.length
     ? eventTypeRaw.hosts.map((host) => host.user)
     : eventTypeRaw.users;
 
@@ -150,9 +151,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   const profile = {
     name: eventType.team?.name || eventType.users[0]?.name || null,
     email: eventType.team ? null : eventType.users[0].email || null,
-    theme: (!eventType.team?.name && eventType.users[0]?.theme) || null,
-    brandColor: eventType.team ? null : eventType.users[0].brandColor || null,
-    darkBrandColor: eventType.team ? null : eventType.users[0].darkBrandColor || null,
+    ...getBrandingForEventType({ eventType: eventTypeRaw }),
     slug: eventType.team?.slug || eventType.users[0]?.username || null,
   };
 

apps/web/modules/users/views/users-public-view.test.tsx

@@ -20,7 +20,14 @@ function mockedUserPageComponentProps(props: Partial<React.ComponentProps<typeof
       theme: "dark",
       brandColor: "red",
       darkBrandColor: "black",
-      organization: { requestedSlug: "slug", slug: "slug", id: 1 },
+      organization: {
+        requestedSlug: "slug",
+        slug: "slug",
+        id: 1,
+        brandColor: null,
+        darkBrandColor: null,
+        theme: null,
+      },
       allowSEOIndexing: true,
       username: "john",
     },

apps/web/server/lib/[user]/getServerSideProps.ts

@@ -4,14 +4,15 @@ import { encode } from "querystring";
 import type { z } from "zod";
 
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { getUsernameList } from "@calcom/features/eventtypes/lib/defaultEvents";
 import { getEventTypesPublic } from "@calcom/features/eventtypes/lib/getEventTypesPublic";
+import { getBrandingForUser } from "@calcom/features/profile/lib/getBranding";
+import { UserRepository } from "@calcom/features/users/repositories/UserRepository";
 import { DEFAULT_DARK_BRAND_COLOR, DEFAULT_LIGHT_BRAND_COLOR } from "@calcom/lib/constants";
-import { getUsernameList } from "@calcom/features/eventtypes/lib/defaultEvents";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import logger from "@calcom/lib/logger";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { safeStringify } from "@calcom/lib/safeStringify";
-import { UserRepository } from "@calcom/features/users/repositories/UserRepository";
 import { stripMarkdown } from "@calcom/lib/stripMarkdown";
 import { prisma } from "@calcom/prisma";
 import type { EventType, User } from "@calcom/prisma/client";
@@ -33,6 +34,9 @@ type UserPageProps = {
       requestedSlug: string | null;
       slug: string | null;
       id: number | null;
+      brandColor: string | null;
+      darkBrandColor: string | null;
+      theme: string | null;
     } | null;
     allowSEOIndexing: boolean;
     username: string | null;
@@ -130,15 +134,18 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
 
   const [user] = usersInOrgContext; //to be used when dealing with single user, not dynamic group
 
+  const branding = getBrandingForUser({ user });
+
   const profile = {
     name: user.name || user.username || "",
     image: getUserAvatarUrl({
       avatarUrl: user.avatarUrl,
     }),
-    theme: user.theme,
-    brandColor: user.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
+    theme: branding.theme,
+    brandColor: branding.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
     avatarUrl: user.avatarUrl,
-    darkBrandColor: user.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
+    darkBrandColor:
+      branding.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
     allowSEOIndexing: user.allowSEOIndexing ?? true,
     username: user.username,
     organization: user.profile.organization,

packages/features/eventtypes/lib/defaultEvents.ts

@@ -141,6 +141,7 @@ const commons = {
   restrictionScheduleId: null,
   useBookerTimezone: false,
   profileId: null,
+  profile: null,
   requiresConfirmationWillBlockSlot: false,
   canSendCalVideoTranscriptionEmails: false,
   instantMeetingExpiryTimeOffsetInSeconds: 0,