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

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

@ -38,7 +38,7 @@ type BookingPageProps = BookPageProps | TeamBookingPageProps;
const BookingPage = (props: BookingPageProps) => { const BookingPage = (props: BookingPageProps) => {
const router = useRouter(); const router = useRouter();
const { rescheduleUid } = router.query; const { rescheduleUid } = router.query;
const themeLoaded = useTheme(props.profile.theme); const { isReady } = useTheme(props.profile.theme);
const date = asStringOrNull(router.query.date); const date = asStringOrNull(router.query.date);
const timeFormat = asStringOrNull(router.query.clock) === "24h" ? "H:mm" : "h:mma"; const timeFormat = asStringOrNull(router.query.clock) === "24h" ? "H:mm" : "h:mma";
@ -175,17 +175,17 @@ const BookingPage = (props: BookingPageProps) => {
const bookingHandler = useCallback(_bookingHandler, []); const bookingHandler = useCallback(_bookingHandler, []);
return ( return (
themeLoaded && ( <div>
<div> <Head>
<Head> <title>
<title> {rescheduleUid ? "Reschedule" : "Confirm"} your {props.eventType.title} with {props.profile.name} |
{rescheduleUid ? "Reschedule" : "Confirm"} your {props.eventType.title} with {props.profile.name}{" "} Cal.com
| Cal.com </title>
</title> <link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.ico" /> </Head>
</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="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:flex px-4 py-5 sm:p-4">
<div className="sm:w-1/2 sm:border-r sm:dark:border-black"> <div className="sm:w-1/2 sm:border-r sm:dark:border-black">
@ -459,9 +459,9 @@ const BookingPage = (props: BookingPageProps) => {
</div> </div>
</div> </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"; const needsConfirmation = props.eventType.requiresConfirmation && reschedule != "true";
return ( return (
isReady && ( (isReady && (
<div className="bg-neutral-50 dark:bg-neutral-900 h-screen"> <div className="bg-neutral-50 dark:bg-neutral-900 h-screen">
<HeadSeo <HeadSeo
title={`Booking ${needsConfirmation ? "Submitted" : "Confirmed"}`} title={`Booking ${needsConfirmation ? "Submitted" : "Confirmed"}`}
@ -235,7 +235,8 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
</div> </div>
</main> </main>
</div> </div>
) )) ||
null
); );
} }