From f60b3c14e1d85333d374c9fce3e0ed691a35e58f Mon Sep 17 00:00:00 2001 From: Peer Richelsen Date: Mon, 27 Nov 2023 16:06:54 +0000 Subject: [PATCH] fix: small UI improvements for troubleshooter (#12535) Co-authored-by: Sean Brydon --- apps/web/public/static/locales/en/common.json | 4 +++ packages/features/bookings/Booker/Booker.tsx | 2 ++ .../bookings/Booker/components/Header.tsx | 24 +++++++++++++++-- .../troubleshooter/Troubleshooter.tsx | 4 +-- .../components/CalendarToggleContainer.tsx | 5 ++-- .../components/EventTypeSelect.tsx | 27 ++++++++++++++++--- .../components/TroubleshooterSidebar.tsx | 2 +- 7 files changed, 58 insertions(+), 10 deletions(-) diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index f1d82c0fa6..4a66dd48c1 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -2128,5 +2128,9 @@ "enterprise_description": "Upgrade to Enterprise to create your Organization", "create_your_org": "Create your Organization", "create_your_org_description": "Upgrade to Enterprise and receive a subdomain, unified billing, Insights, extensive whitelabeling and more", + "troubleshooter_tooltip": "Open the troubleshooter and figure out what is wrong with your schedule", + "need_help": "Need help?", + "troubleshooter": "Troubleshooter", + "please_install_a_calendar": "Please install a calendar", "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑" } diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index 622da4cf77..38acbb194b 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/packages/features/bookings/Booker/Booker.tsx @@ -247,6 +247,8 @@ const BookerComponent = ({ "bg-default dark:bg-muted sticky top-0 z-10" )}>
[state.layout, state.setLayout], shallow); const selectedDateString = useBookerStore((state) => state.selectedDate); const setSelectedDate = useBookerStore((state) => state.setSelectedDate); @@ -54,12 +62,24 @@ export function Header({ ); }; + const isMyLink = username === session?.data?.user.username; // TODO: check for if the user is the owner of the link // In month view we only show the layout toggle. if (isMonthView) { return (
- + {isMyLink ? ( + + + + ) : ( + + )}
); diff --git a/packages/features/troubleshooter/Troubleshooter.tsx b/packages/features/troubleshooter/Troubleshooter.tsx index ad9457fdb1..750b21abd4 100644 --- a/packages/features/troubleshooter/Troubleshooter.tsx +++ b/packages/features/troubleshooter/Troubleshooter.tsx @@ -27,7 +27,7 @@ const TroubleshooterComponent = ({ month }: TroubleshooterProps) => { <>
{
-
+
diff --git a/packages/features/troubleshooter/components/CalendarToggleContainer.tsx b/packages/features/troubleshooter/components/CalendarToggleContainer.tsx index 4fceb7bf81..ea24a81f33 100644 --- a/packages/features/troubleshooter/components/CalendarToggleContainer.tsx +++ b/packages/features/troubleshooter/components/CalendarToggleContainer.tsx @@ -54,7 +54,8 @@ function EmptyCalendarToggleItem() { return (
@@ -63,7 +64,7 @@ function EmptyCalendarToggleItem() { suffixSlot={
- Not found + {t("unavailable")}
}> diff --git a/packages/features/troubleshooter/components/EventTypeSelect.tsx b/packages/features/troubleshooter/components/EventTypeSelect.tsx index dac68067b7..9bfda0d6ad 100644 --- a/packages/features/troubleshooter/components/EventTypeSelect.tsx +++ b/packages/features/troubleshooter/components/EventTypeSelect.tsx @@ -1,8 +1,9 @@ -import { useMemo, useEffect } from "react"; +import { useMemo, useEffect, startTransition } from "react"; import { trpc } from "@calcom/trpc"; import { SelectField } from "@calcom/ui"; +import { getQueryParam } from "../../bookings/Booker/utils/query-param"; import { useTroubleshooterStore } from "../store"; export function EventTypeSelect() { @@ -10,7 +11,7 @@ export function EventTypeSelect() { const selectedEventType = useTroubleshooterStore((state) => state.event); const setSelectedEventType = useTroubleshooterStore((state) => state.setEvent); - // const selectedEventQueryParam = getQueryParam("eventType"); + const selectedEventQueryParam = getQueryParam("eventType"); const options = useMemo(() => { if (!eventTypes) return []; @@ -23,7 +24,7 @@ export function EventTypeSelect() { }, [eventTypes]); useEffect(() => { - if (!selectedEventType && eventTypes && eventTypes[0]) { + if (!selectedEventType && eventTypes && eventTypes[0] && !selectedEventQueryParam) { const { id, slug, length } = eventTypes[0]; setSelectedEventType({ id, @@ -34,6 +35,26 @@ export function EventTypeSelect() { // eslint-disable-next-line react-hooks/exhaustive-deps }, [eventTypes]); + useEffect(() => { + if (selectedEventQueryParam) { + // ensure that the update is deferred until the Suspense boundary has finished hydrating + startTransition(() => { + const foundEventType = eventTypes?.find((et) => et.slug === selectedEventQueryParam); + if (foundEventType) { + const { id, slug, length } = foundEventType; + setSelectedEventType({ id, slug, duration: length }); + } else if (eventTypes && eventTypes[0]) { + const { id, slug, length } = eventTypes[0]; + setSelectedEventType({ + id, + slug, + duration: length, + }); + } + }); + } + }, [eventTypes, selectedEventQueryParam, setSelectedEventType]); + return ( { {name}