mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Fixes theme flickering on booking & availability select page (#771)

Browse source
This commit is contained in:
Alex van Andel 2021-09-24 23:11:30 +01:00 committed by GitHub
parent 727793af02
commit 515c548acd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
components/booking/pages/AvailabilityPage.tsx
View file

@ -29,7 +29,7 @@ dayjs.extend(customParseFormat);
const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPageProps) => {
const router = useRouter();
const { rescheduleUid } = router.query;
const themeLoaded = useTheme(profile.theme);
const { isReady } = useTheme(profile.theme);
const selectedDate = useMemo(() => {
const dateString = asStringOrNull(router.query.date);
@ -83,20 +83,20 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPage
};
return (
themeLoaded && (
<>
<HeadSeo
title={`${rescheduleUid ? "Reschedule" : ""} ${eventType.title} | ${profile.name}`}
description={`${rescheduleUid ? "Reschedule" : ""} ${eventType.title}`}
name={profile.name}
avatar={profile.image}
/>
<div>
<main
className={
"mx-auto my-0 md:my-24 transition-max-width ease-in-out duration-500 " +
(selectedDate ? "max-w-5xl" : "max-w-3xl")
}>
<>
<HeadSeo
title={`${rescheduleUid ? "Reschedule" : ""} ${eventType.title} | ${profile.name}`}
description={`${rescheduleUid ? "Reschedule" : ""} ${eventType.title}`}
name={profile.name}
avatar={profile.image}
/>
<div>
<main
className={
"mx-auto my-0 md:my-24 transition-max-width ease-in-out duration-500 " +
(selectedDate ? "max-w-5xl" : "max-w-3xl")
}>
{isReady && (
<div className="bg-white border-gray-200 rounded-sm sm:dark:border-gray-600 dark:bg-gray-900 md:border">
{/* mobile: details */}
<div className="block p-4 sm:p-8 md:hidden">
@ -214,11 +214,11 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPage
)}
</div>
</div>
{(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && <PoweredByCalendso />}
</main>
</div>
</>
)
)}
{(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && <PoweredByCalendso />}
</main>
</div>
</>
);
function TimezoneDropdown() {

28
components/booking/pages/BookingPage.tsx
View file

@ -38,7 +38,7 @@ type BookingPageProps = BookPageProps | TeamBookingPageProps;
const BookingPage = (props: BookingPageProps) => {
const router = useRouter();
const { rescheduleUid } = router.query;
const themeLoaded = useTheme(props.profile.theme);
const { isReady } = useTheme(props.profile.theme);
const date = asStringOrNull(router.query.date);
const timeFormat = asStringOrNull(router.query.clock) === "24h" ? "H:mm" : "h:mma";
@ -175,17 +175,17 @@ const BookingPage = (props: BookingPageProps) => {
const bookingHandler = useCallback(_bookingHandler, []);
return (
themeLoaded && (
<div>
<Head>
<title>
{rescheduleUid ? "Reschedule" : "Confirm"} your {props.eventType.title} with {props.profile.name}{" "}
| Cal.com
</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div>
<Head>
<title>
{rescheduleUid ? "Reschedule" : "Confirm"} your {props.eventType.title} with {props.profile.name} |
Cal.com
</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="max-w-3xl mx-auto my-0 sm:my-24">
<main className="max-w-3xl mx-auto my-0 sm:my-24">
{isReady && (
<div className="dark:bg-neutral-900 bg-white overflow-hidden border border-gray-200 dark:border-0 sm:rounded-sm">
<div className="sm:flex px-4 py-5 sm:p-4">
<div className="sm:w-1/2 sm:border-r sm:dark:border-black">
@ -459,9 +459,9 @@ const BookingPage = (props: BookingPageProps) => {
</div>
</div>
</div>
</main>
</div>
)
)}
</main>
</div>
);
};

5
pages/success.tsx
View file

@ -67,7 +67,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
const needsConfirmation = props.eventType.requiresConfirmation && reschedule != "true";
return (
isReady && (
(isReady && (
<div className="bg-neutral-50 dark:bg-neutral-900 h-screen">
<HeadSeo
title={`Booking ${needsConfirmation ? "Submitted" : "Confirmed"}`}
@ -235,7 +235,8 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
</div>
</main>
</div>
)
)) ||
null
);
}