Disable dark mode on the success page only for the organizer #3001
Conversation
CarinaWolli
added
🐛 bug
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
apps/web/pages/bookings/[status].tsx
Outdated
| @@ -23,6 +24,7 @@ type BookingPage = inferQueryOutput<"viewer.bookings">; | |||
| export default function Bookings() { | |||
| const router = useRouter(); | |||
| const status = router.query?.status as BookingListingStatus; | |||
| const { isReady, Theme } = useTheme("light"); | |||
There was a problem hiding this comment.
This is needed as otherwise, we have an issue with dark mode when we click on 'back to bookings' after booking an event
apps/web/pages/success.tsx
Outdated
| @@ -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(listingStatus ? "light" : props.profile.theme); | |||
There was a problem hiding this comment.
disable dark mode when we click on a booking to see the booking details
There was a problem hiding this comment.
What is the original purpose of listingStatus? Probably we can use a new parameter that can tell us that we navigated from a booking list click and change the theme from there. Otherwise someone unintentionally can remove or change the behaviour of our listingStatus parameter and mess up our theme too.
There was a problem hiding this comment.
@alannnc listingStatus is used for recurring events, to know if we should show all dates (when coming from the "upcoming" section) or only the specific date of the booking (when coming from "recurring"). I introduced a new parameter isSucessBookingPage that defines if user is redirected to the page after successfully booking an event (https://github.com/calcom/cal.com/pull/3001/files#r891948713)
apps/web/pages/bookings/[status].tsx
Outdated
| isReady && ( | ||
| <Shell heading={t("bookings")} subtitle={t("bookings_description")} customLoader={<SkeletonLoader />}> | ||
| <Theme /> |
There was a problem hiding this comment.
Shouldn't we handle this in the Shell itself? 🤔
| @@ -166,6 +166,7 @@ const BookingPage = ({ | |||
| location, | |||
| eventName: profile.eventName || "", | |||
| bookingId: id, | |||
| isSuccessBookingPage: true, | |||
There was a problem hiding this comment.
new parameter that defines if user is redirected to that page after successfully booking an event
There was a problem hiding this comment.
In what situations does this variable turn false?
There was a problem hiding this comment.
@emrysal always true when it comes from the booking page, but we also redirect to /success from bookingListItem to see the booking details. So it is here to check if we we redirected from the booking page or come from a bookingListItem
| @@ -622,10 +622,15 @@ function RecurringBookings({ | |||
| }: RecurringBookingsProps) { | |||
| const [moreEventsVisible, setMoreEventsVisible] = useState(false); | |||
| const { t } = useLocale(); | |||
| return !isReschedule && recurringBookings && listingStatus === "upcoming" ? ( | |||
|
|
|||
| const recurringBookingsSorted = recurringBookings | |||
There was a problem hiding this comment.
dates for recurring events currently aren't sorted
…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>
What does this PR do?
Right now, dark mode is disabled on the success page for all logged-in users. This PR disables it only when a user is redirected to the success page after clicking on a booking to see the booking details.
Environment: Staging(main branch) / Production
Type of change
How should this be tested?
Checklist