+
diff --git a/packages/features/troubleshooter/components/EventTypeSelect.tsx b/packages/features/troubleshooter/components/EventTypeSelect.tsx
new file mode 100644
index 0000000000..4628fa7d0b
--- /dev/null
+++ b/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 (
+
option.value === selectedEventType) || options[0]}
+ onChange={(option) => {
+ if (!option) return;
+ setSelectedEventType(option.value);
+ }}
+ />
+ );
+}
diff --git a/packages/features/troubleshooter/components/TroubleshooterHeader.tsx b/packages/features/troubleshooter/components/TroubleshooterHeader.tsx
index fd6b63d8f3..90e6318184 100644
--- a/packages/features/troubleshooter/components/TroubleshooterHeader.tsx
+++ b/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");
diff --git a/packages/features/troubleshooter/components/TroubleshooterSidebar.tsx b/packages/features/troubleshooter/components/TroubleshooterSidebar.tsx
index 58985449fb..8b0a7fdad0 100644
--- a/packages/features/troubleshooter/components/TroubleshooterSidebar.tsx
+++ b/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 (
+
+
+
+ {name}
+
+
+ );
+};
export const TroubleshooterSidebar = () => {
const { i18n, t } = useLocale();
- return ;
+ return (
+
+
+
+
+ );
};
diff --git a/packages/features/troubleshooter/store.ts b/packages/features/troubleshooter/store.ts
index 6d05c47d71..df58b19e59 100644
--- a/packages/features/troubleshooter/store.ts
+++ b/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((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 });