event-select - sidebar + store work

packages/features/troubleshooter/Troubleshooter.tsx

@@ -49,7 +49,7 @@ const TroubleshooterComponent = ({ month }: TroubleshooterProps) => {
             <TroubleshooterHeader extraDays={extraDays} isMobile={isMobile} />
           </div>
           <StickyOnDesktop key="meta" className={classNames("relative z-10 flex [grid-area:meta]")}>
-            <div className="max-w-screen flex w-full flex-col [grid-area:meta] md:w-[var(--booker-meta-width)]">
+            <div className="max-w-screen flex w-full flex-col [grid-area:meta] md:w-[var(--troubleshooter-meta-width)]">
               <TroubleshooterSidebar />
             </div>
           </StickyOnDesktop>

packages/features/troubleshooter/components/EventTypeSelect.tsx

@@ -0,0 +1,43 @@
+import { useMemo, useEffect } 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() {
+  const { data: eventTypes } = trpc.viewer.eventTypes.list.useQuery();
+  const selectedEventType = useTroubleshooterStore((state) => state.eventSlug);
+  const setSelectedEventType = useTroubleshooterStore((state) => state.setEventSlug);
+
+  const selectedEventQueryParam = getQueryParam("eventType");
+
+  const options = useMemo(() => {
+    if (!eventTypes) return [];
+    return eventTypes.map((e) => ({
+      label: e.title,
+      value: e.slug,
+    }));
+  }, [eventTypes]);
+
+  useEffect(() => {
+    if (selectedEventQueryParam !== selectedEventType && selectedEventQueryParam) {
+      setSelectedEventType(selectedEventQueryParam);
+    }
+  }, [selectedEventQueryParam, selectedEventType, setSelectedEventType]);
+
+  console.log({ options, eventTypes });
+
+  return (
+    <SelectField
+      label="Event Type"
+      options={options}
+      value={options.find((option) => option.value === selectedEventType) || options[0]}
+      onChange={(option) => {
+        if (!option) return;
+        setSelectedEventType(option.value);
+      }}
+    />
+  );
+}

packages/features/troubleshooter/components/TroubleshooterHeader.tsx

@@ -5,14 +5,14 @@ import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, ButtonGroup } from "@calcom/ui";
 
-import { useBookerStore } from "../store";
+import { useTroubleshooterStore } from "../store";
 
 export function TroubleshooterHeader({ extraDays, isMobile }: { extraDays: number; isMobile: boolean }) {
   const { t, i18n } = useLocale();
-  const selectedDateString = useBookerStore((state) => state.selectedDate);
-  const setSelectedDate = useBookerStore((state) => state.setSelectedDate);
-  const addToSelectedDate = useBookerStore((state) => state.addToSelectedDate);
-  const selectedDate = dayjs(selectedDateString);
+  const selectedDateString = useTroubleshooterStore((state) => state.selectedDate);
+  const setSelectedDate = useTroubleshooterStore((state) => state.setSelectedDate);
+  const addToSelectedDate = useTroubleshooterStore((state) => state.addToSelectedDate);
+  const selectedDate = selectedDateString ? dayjs(selectedDateString) : dayjs();
   const today = dayjs();
   const selectedDateMin3DaysDifference = useMemo(() => {
     const diff = today.diff(selectedDate, "days");

packages/features/troubleshooter/components/TroubleshooterSidebar.tsx

@@ -1,7 +1,35 @@
+import { ArrowLeft } from "lucide-react";
+import Link from "next/link";
+
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Skeleton } from "@calcom/ui";
+
+import { EventTypeSelect } from "./EventTypeSelect";
+
+const BackButtonInSidebar = ({ name }: { name: string }) => {
+  return (
+    <Link
+      href="/"
+      className="hover:bg-subtle group-hover:text-default text-emphasis group flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2">
+      <ArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0" />
+      <Skeleton
+        title={name}
+        as="p"
+        className="max-w-36 min-h-4 truncate text-xl font-semibold"
+        loadingClassName="ms-3">
+        {name}
+      </Skeleton>
+    </Link>
+  );
+};
 
 export const TroubleshooterSidebar = () => {
   const { i18n, t } = useLocale();
 
-  return <div className="relative z-10 p-6" />;
+  return (
+    <div className="relative z-10 flex w-full flex-col gap-6 py-6 pr-6">
+      <BackButtonInSidebar name={t("troubleshooter")} />
+      <EventTypeSelect />
+    </div>
+  );
 };

packages/features/troubleshooter/store.ts

@@ -15,6 +15,7 @@ type StoreInitializeType = {
 
 export type TroubleshooterStore = {
   eventSlug: string | null;
+  setEventSlug: (eventSlug: string | null) => void;
   month: string | null;
   setMonth: (month: string | null) => void;
   selectedDate: string | null;
@@ -64,6 +65,10 @@ export const useTroubleshooterStore = create<TroubleshooterStore>((set, get) =>
     updateQueryParam("date", newSelectionFormatted);
   },
   eventSlug: null,
+  setEventSlug: (eventSlug: string | null) => {
+    set({ eventSlug });
+    updateQueryParam("eventType", eventSlug ?? "");
+  },
   month: getQueryParam("month") || getQueryParam("date") || dayjs().format("YYYY-MM"),
   setMonth: (month: string | null) => {
     set({ month });