Disable dark mode on the success page only for the organizer (#3001)

* disable darkmode only for organizer

* disable dark mode when user comes from user dashboard

* move Theme to shell

* fix build errors

* sort dates for recurring bookings

* new parameter if user comes from booking an event

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/components/Shell.tsx

@@ -37,6 +37,7 @@ import classNames from "@lib/classNames";
 import { WEBAPP_URL } from "@lib/config/constants";
 import { shouldShowOnboarding } from "@lib/getting-started";
 import useMeQuery from "@lib/hooks/useMeQuery";
+import useTheme from "@lib/hooks/useTheme";
 import { trpc } from "@lib/trpc";
 
 import CustomBranding from "@components/CustomBranding";
@@ -249,7 +250,7 @@ const Layout = ({
                 </div>
                 <TrialBanner />
                 <div
-                  className="rounded-sm pb-2 pl-3 pt-2 pr-2 hover:bg-gray-100 lg:mx-2 lg:pl-2"
+                  className="rounded-sm pt-2 pb-2 pl-3 pr-2 hover:bg-gray-100 lg:mx-2 lg:pl-2"
                   data-testid="user-dropdown-trigger">
                   <span className="hidden lg:inline">
                     <UserDropdown />
@@ -416,6 +417,7 @@ type LayoutProps = {
 export default function Shell(props: LayoutProps) {
   const { loading, session } = useRedirectToLoginIfUnauthenticated(props.isPublic);
   const { isRedirectingToOnboarding } = useRedirectToOnboardingIfNeeded();
+  const { isReady, Theme } = useTheme("light");
 
   const query = useMeQuery();
   const user = query.data;
@@ -424,7 +426,11 @@ export default function Shell(props: LayoutProps) {
   const { status } = useSession();
 
   const isLoading =
-    i18n.status === "loading" || query.status === "loading" || isRedirectingToOnboarding || loading;
+    i18n.status === "loading" ||
+    query.status === "loading" ||
+    isRedirectingToOnboarding ||
+    loading ||
+    !isReady;
 
   if (isLoading) {
     return (
@@ -438,6 +444,7 @@ export default function Shell(props: LayoutProps) {
 
   return (
     <>
+      <Theme />
       <CustomBranding lightVal={user?.brandColor} darkVal={user?.darkBrandColor} />
       <MemoizedLayout plan={user?.plan} status={status} {...props} isLoading={isLoading} />
     </>

apps/web/components/booking/pages/BookingPage.tsx

@@ -166,6 +166,7 @@ const BookingPage = ({
           location,
           eventName: profile.eventName || "",
           bookingId: id,
+          isSuccessBookingPage: true,
         },
       });
     },

apps/web/pages/success.tsx

@@ -149,7 +149,7 @@ type SuccessProps = inferSSRProps<typeof getServerSideProps>;
 export default function Success(props: SuccessProps) {
   const { t } = useLocale();
   const router = useRouter();
-  const { location: _location, name, reschedule, listingStatus, status } = router.query;
+  const { location: _location, name, reschedule, listingStatus, status, isSuccessBookingPage } = router.query;
   const location = Array.isArray(_location) ? _location[0] : _location;
   const [is24h, setIs24h] = useState(isBrowserLocale24h());
   const { data: session } = useSession();
@@ -257,7 +257,7 @@ export default function Success(props: SuccessProps) {
     return t("emailed_you_and_attendees" + titleSuffix);
   }
   const userIsOwner = !!(session?.user?.id && eventType.users.find((user) => (user.id = session.user.id)));
-  const { isReady, Theme } = useTheme(userIsOwner ? "light" : props.profile.theme);
+  const { isReady, Theme } = useTheme(isSuccessBookingPage ? props.profile.theme : "light");
   const title = t(
     `booking_${needsConfirmation ? "submitted" : "confirmed"}${props.recurringBookings ? "_recurring" : ""}`
   );
@@ -441,7 +441,7 @@ export default function Success(props: SuccessProps) {
                           profile={{ name: props.profile.name, slug: props.profile.slug }}
                           team={eventType?.team?.name}
                           setIsCancellationMode={setIsCancellationMode}
-                          theme={userIsOwner ? "light" : props.profile.theme}
+                          theme={isSuccessBookingPage ? props.profile.theme : "light"}
                         />
                       ))}
                     {userIsOwner && !needsConfirmation && !isCancellationMode && !isCancelled && (
@@ -622,10 +622,15 @@ function RecurringBookings({
 }: RecurringBookingsProps) {
   const [moreEventsVisible, setMoreEventsVisible] = useState(false);
   const { t } = useLocale();
-  return !isReschedule && recurringBookings && listingStatus === "upcoming" ? (
+
+  const recurringBookingsSorted = recurringBookings
+    ? recurringBookings.sort((a, b) => (dayjs(a).isAfter(dayjs(b)) ? 1 : -1))
+    : null;
+
+  return !isReschedule && recurringBookingsSorted && listingStatus === "upcoming" ? (
     <>
       {eventType.recurringEvent?.count &&
-        recurringBookings.slice(0, 4).map((dateStr, idx) => (
+        recurringBookingsSorted.slice(0, 4).map((dateStr, idx) => (
           <div key={idx} className="mb-2">
             {dayjs(dateStr).format("MMMM DD, YYYY")}
             <br />
@@ -635,16 +640,16 @@ function RecurringBookings({
             </span>
           </div>
         ))}
-      {recurringBookings.length > 4 && (
+      {recurringBookingsSorted.length > 4 && (
         <Collapsible open={moreEventsVisible} onOpenChange={() => setMoreEventsVisible(!moreEventsVisible)}>
           <CollapsibleTrigger
             type="button"
             className={classNames("flex w-full", moreEventsVisible ? "hidden" : "")}>
-            {t("plus_more", { count: recurringBookings.length - 4 })}
+            {t("plus_more", { count: recurringBookingsSorted.length - 4 })}
           </CollapsibleTrigger>
           <CollapsibleContent>
             {eventType.recurringEvent?.count &&
-              recurringBookings.slice(4).map((dateStr, idx) => (
+              recurringBookingsSorted.slice(4).map((dateStr, idx) => (
                 <div key={idx} className="mb-2">
                   {dayjs(dateStr).format("MMMM DD, YYYY")}
                   <br />
@@ -847,6 +852,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       customInputs: true,
       user: {
         select: {
+          id: true,
           name: true,
           email: true,
         },