fix: small UI improvements for troubleshooter (#12535)

Co-authored-by: Sean Brydon <sean@brydon.io>

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 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/features/bookings/Booker/Booker.tsx

@@ -247,6 +247,8 @@ const BookerComponent = ({
                   "bg-default dark:bg-muted sticky top-0 z-10"
               )}>
               <Header
+                username={username}
+                eventSlug={eventSlug}
                 enabledLayouts={bookerLayouts.enabledLayouts}
                 extraDays={layout === BookerLayouts.COLUMN_VIEW ? columnViewExtraDays.current : extraDays}
                 isMobile={isMobile}

packages/features/bookings/Booker/components/Header.tsx

@@ -1,11 +1,13 @@
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useSession } from "next-auth/react";
 import { useCallback, useMemo } from "react";
 import { shallow } from "zustand/shallow";
 
 import dayjs from "@calcom/dayjs";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { BookerLayouts } from "@calcom/prisma/zod-utils";
-import { Button, ButtonGroup, ToggleGroup } from "@calcom/ui";
+import { Button, ButtonGroup, ToggleGroup, Tooltip } from "@calcom/ui";
 import { Calendar, Columns, Grid } from "@calcom/ui/components/icon";
 
 import { TimeFormatToggle } from "../../components/TimeFormatToggle";
@@ -18,13 +20,19 @@ export function Header({
   isMobile,
   enabledLayouts,
   nextSlots,
+  username,
+  eventSlug,
 }: {
   extraDays: number;
   isMobile: boolean;
   enabledLayouts: BookerLayouts[];
   nextSlots: number;
+  username: string;
+  eventSlug: string;
 }) {
   const { t, i18n } = useLocale();
+  const session = useSession();
+
   const [layout, setLayout] = useBookerStore((state) => [state.layout, state.setLayout], shallow);
   const selectedDateString = useBookerStore((state) => state.selectedDate);
   const setSelectedDate = useBookerStore((state) => state.setSelectedDate);
@@ -54,12 +62,24 @@ export function Header({
       <LayoutToggle onLayoutToggle={onLayoutToggle} layout={layout} enabledLayouts={enabledLayouts} />
     );
   };
+  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 (
       <div className="flex gap-2">
-        <OverlayCalendarContainer />
+        {isMyLink ? (
+          <Tooltip content={t("troubleshooter_tooltip")} side="bottom">
+            <Button
+              color="primary"
+              target="_blank"
+              href={`${WEBAPP_URL}/availability/troubleshoot?eventType=${eventSlug}`}>
+              {t("need_help")}
+            </Button>
+          </Tooltip>
+        ) : (
+          <OverlayCalendarContainer />
+        )}
         <LayoutToggleWithData />
       </div>
     );

packages/features/troubleshooter/Troubleshooter.tsx

@@ -27,7 +27,7 @@ const TroubleshooterComponent = ({ month }: TroubleshooterProps) => {
     <>
       <div
         className={classNames(
-          "text-default grid min-h-full w-full flex-col items-center overflow-clip ",
+          "text-default fixed inset-0 grid min-h-full w-full flex-col items-center overflow-clip ",
           isMobile
             ? "[--troublehooster-meta-width:0px]"
             : "[--troublehooster-meta-width:250px] lg:[--troubleshooter-meta-width:430px]"
@@ -51,7 +51,7 @@ const TroubleshooterComponent = ({ month }: TroubleshooterProps) => {
             <TroubleshooterHeader extraDays={extraDays} isMobile={isMobile} />
           </div>
           <StickyBox key="meta" className={classNames("relative z-10")}>
-            <div className="">
+            <div className="ps-6">
               <TroubleshooterSidebar />
             </div>
           </StickyBox>

packages/features/troubleshooter/components/CalendarToggleContainer.tsx

@@ -54,7 +54,8 @@ function EmptyCalendarToggleItem() {
 
   return (
     <TroubleshooterListItemContainer
-      title="Please install a calendar"
+      title={t("installed", { count: 0 })}
+      subtitle={t("please_install_a_calendar")}
       prefixSlot={
         <>
           <div className="h-4 w-4 self-center rounded-[4px] bg-blue-500" />
@@ -63,7 +64,7 @@ function EmptyCalendarToggleItem() {
       suffixSlot={
         <div>
           <Badge variant="orange" withDot size="sm">
-            Not found
+            {t("unavailable")}
           </Badge>
         </div>
       }>

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 (
     <SelectField
       label="Event Type"

packages/features/troubleshooter/components/TroubleshooterSidebar.tsx

@@ -17,7 +17,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
       <Skeleton
         title={name}
         as="p"
-        className="max-w-36 min-h-4 truncate text-xl font-semibold"
+        className="max-w-36 min-h-4 truncate font-semibold"
         loadingClassName="ms-3">
         {name}
       </Skeleton>