diff --git a/apps/web/components/CustomBranding.tsx b/apps/web/components/CustomBranding.tsx index 5959a6abaa..8512de4de0 100644 --- a/apps/web/components/CustomBranding.tsx +++ b/apps/web/components/CustomBranding.tsx @@ -1,4 +1,4 @@ -import { useEffect } from "react"; +import Head from "next/head"; import { useBrandColors } from "@calcom/embed-core/embed-iframe"; @@ -238,54 +238,32 @@ const BrandColor = ({ ? darkVal : "#" + darkVal : fallBackHex(darkVal, true); - useEffect(() => { - document.documentElement.style.setProperty( - "--booking-highlight-color", - embedBrandingColors.highlightColor || "#10B981" // green--500 - ); - document.documentElement.style.setProperty( - "--booking-lightest-color", - embedBrandingColors.lightestColor || "#E1E1E1" // gray--200 - ); - document.documentElement.style.setProperty( - "--booking-lighter-color", - embedBrandingColors.lighterColor || "#ACACAC" // gray--400 - ); - document.documentElement.style.setProperty( - "--booking-light-color", - embedBrandingColors.lightColor || "#888888" // gray--500 - ); - document.documentElement.style.setProperty( - "--booking-median-color", - embedBrandingColors.medianColor || "#494949" // gray--600 - ); - document.documentElement.style.setProperty( - "--booking-dark-color", - embedBrandingColors.darkColor || "#313131" // gray--800 - ); - document.documentElement.style.setProperty( - "--booking-darker-color", - embedBrandingColors.darkerColor || "#292929" // gray--900 - ); - document.documentElement.style.setProperty("--brand-color", lightVal); - document.documentElement.style.setProperty("--brand-text-color", getContrastingTextColor(lightVal, true)); - document.documentElement.style.setProperty("--brand-color-dark-mode", darkVal); - document.documentElement.style.setProperty( - "--brand-text-color-dark-mode", - getContrastingTextColor(darkVal, true) - ); - }, [ - embedBrandingColors.highlightColor, - embedBrandingColors.lightestColor, - embedBrandingColors.lighterColor, - embedBrandingColors.lightColor, - embedBrandingColors.medianColor, - embedBrandingColors.darkColor, - embedBrandingColors.darkerColor, - lightVal, - darkVal, - ]); - return null; + return ( + + + + ); }; export default BrandColor; diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx index bfcd2b5e49..1120c4cb5f 100644 --- a/apps/web/components/booking/pages/AvailabilityPage.tsx +++ b/apps/web/components/booking/pages/AvailabilityPage.tsx @@ -113,7 +113,7 @@ const useSlots = ({ eventTypeId: number; startTime?: Dayjs; endTime?: Dayjs; - timeZone: string; + timeZone?: string; }) => { const { data, isLoading, isIdle } = trpc.useQuery( [ @@ -150,7 +150,7 @@ const SlotPicker = ({ }: { eventType: Pick; timeFormat: string; - timeZone: string; + timeZone?: string; seatsPerTimeSlot?: number; recurringEventCount?: number; weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6; @@ -198,12 +198,10 @@ const SlotPicker = ({ <> slots[k].length > 0)} locale={isLocaleReady ? i18n.language : "en"} selected={selectedDate} @@ -668,28 +666,20 @@ const AvailabilityPage = ({ profile, eventType }: Props) => { )*/} - {timeZone && ( - - )} + {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && !isEmbed && } diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx index 23427d206b..2aa30a1cec 100644 --- a/apps/web/components/booking/pages/BookingPage.tsx +++ b/apps/web/components/booking/pages/BookingPage.tsx @@ -492,10 +492,13 @@ const BookingPage = ({ user.name !== profile.name) .map((user) => ({ + title: user.name || "", image: user.avatar || "", alt: user.name || "", })) diff --git a/apps/web/components/ui/Avatar.tsx b/apps/web/components/ui/Avatar.tsx index 25febf92e2..4d2fef6832 100644 --- a/apps/web/components/ui/Avatar.tsx +++ b/apps/web/components/ui/Avatar.tsx @@ -15,6 +15,9 @@ export type AvatarProps = { gravatarFallbackMd5?: string; }; +/** + * @deprecated Use AvatarSSR instead. Once, there is no usage of Avatar, AvatarSSR can be renamed. + */ export default function Avatar(props: AvatarProps) { const { imageSrc, gravatarFallbackMd5, size, alt, title } = props; const className = classNames("rounded-full", props.className, size && `h-${size} w-${size}`); diff --git a/apps/web/components/ui/AvatarGroup.tsx b/apps/web/components/ui/AvatarGroup.tsx index bc1db4b233..e7de1c9b89 100644 --- a/apps/web/components/ui/AvatarGroup.tsx +++ b/apps/web/components/ui/AvatarGroup.tsx @@ -3,6 +3,7 @@ import React from "react"; import classNames from "@lib/classNames"; import Avatar from "@components/ui/Avatar"; +import { AvatarSSR } from "@components/ui/AvatarSSR"; export type AvatarGroupProps = { border?: string; // this needs to be the color of the parent container background, i.e.: border-white dark:border-gray-900 @@ -23,7 +24,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) { if (item.image != null) { return (
  • - & { emailMd5?: string }; +export type AvatarProps = ( + | { + user: Pick & { emailMd5?: string }; + } + | { + user?: null; + imageSrc: string; + } +) & { className?: string; size?: number; title?: string; @@ -16,18 +24,38 @@ function defaultAvatarSrc(md5: string) { } // An SSR Supported version of Avatar component. -// FIXME: title support is missing export function AvatarSSR(props: AvatarProps) { - const { user, size } = props; - const nameOrUsername = user.name || user.username || ""; - const className = classNames("rounded-full", props.className, size && `h-${size} w-${size}`); - let imgSrc; - const alt = props.alt || nameOrUsername; - if (user.avatar) { - imgSrc = user.avatar; - } else if (user.emailMd5) { - imgSrc = defaultAvatarSrc(user.emailMd5); + const { size, title } = props; + + let imgSrc = ""; + let alt: string = props.alt; + + if (props.user) { + const user = props.user; + const nameOrUsername = user.name || user.username || ""; + alt = alt || nameOrUsername; + + if (user.avatar) { + imgSrc = user.avatar; + } else if (user.emailMd5) { + imgSrc = defaultAvatarSrc(user.emailMd5); + } + } else { + imgSrc = props.imageSrc; } - // eslint-disable-next-line @next/next/no-img-element - return imgSrc ? {alt} : null; + + const className = classNames("rounded-full", props.className, size && `h-${size} w-${size}`); + + const avatar = imgSrc ? {alt} : null; + return title ? ( + + {avatar} + + + {title} + + + ) : ( + <>{avatar} + ); } diff --git a/apps/web/pages/[user]/book.tsx b/apps/web/pages/[user]/book.tsx index ad9c1894dc..274715328c 100644 --- a/apps/web/pages/[user]/book.tsx +++ b/apps/web/pages/[user]/book.tsx @@ -26,7 +26,6 @@ export type BookPageProps = inferSSRProps; export default function Book(props: BookPageProps) { const { t } = useLocale(); const locationLabels = getLocationLabels(t); - return props.away ? (
    diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx index 318586a5d1..498d6ace0e 100644 --- a/apps/web/pages/_document.tsx +++ b/apps/web/pages/_document.tsx @@ -15,6 +15,7 @@ class MyDocument extends Document { return ( + diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx index 2fb9b8a6f6..18eb36c13d 100644 --- a/apps/web/pages/event-types/index.tsx +++ b/apps/web/pages/event-types/index.tsx @@ -250,6 +250,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL items={type.users.map((organizer) => ({ alt: organizer.name || "", image: `${WEBAPP_URL}/${organizer.username}/avatar.png`, + title: organizer.name || "", }))} /> )} diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx index 7267c40948..d90d07f595 100644 --- a/apps/web/pages/team/[slug].tsx +++ b/apps/web/pages/team/[slug].tsx @@ -66,6 +66,7 @@ function TeamPage({ team }: TeamPageProps) { size={10} items={type.users.map((user) => ({ alt: user.name || "", + title: user.name || "", image: CAL_URL + "/" + user.username + "/avatar.png" || "", }))} /> diff --git a/apps/web/pages/team/[slug]/[type].tsx b/apps/web/pages/team/[slug]/[type].tsx index d1e0e2d566..d972286576 100644 --- a/apps/web/pages/team/[slug]/[type].tsx +++ b/apps/web/pages/team/[slug]/[type].tsx @@ -13,6 +13,8 @@ import { inferSSRProps } from "@lib/types/inferSSRProps"; import AvailabilityPage from "@components/booking/pages/AvailabilityPage"; +import { ssgInit } from "@server/lib/ssg"; + export type AvailabilityTeamPageProps = inferSSRProps; export default function TeamType(props: AvailabilityTeamPageProps) { @@ -24,6 +26,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) => const typeParam = asStringOrNull(context.query.type); const dateParam = asStringOrNull(context.query.date); const rescheduleUid = asStringOrNull(context.query.rescheduleUid); + const ssg = await ssgInit(context); if (!slugParam || !typeParam) { throw new Error(`File is not named [idOrSlug]/[user]`); @@ -145,6 +148,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) => workingHours, previousPage: context.req.headers.referer ?? null, booking, + trpcState: ssg.dehydrate(), }, }; };