import { useSearchParams, usePathname } from "next/navigation"; import { useMemo } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; export function useBookingStatusTab() { const { t } = useLocale(); const searchParams = useSearchParams(); const pathname = usePathname(); const tabOptions = useMemo(() => { const queryString = searchParams?.toString() || ""; const baseTabConfigs = [ { value: "upcoming", label: "upcoming", path: "/bookings/upcoming", dataTestId: "upcoming", }, { value: "unconfirmed", label: "unconfirmed", path: "/bookings/unconfirmed", dataTestId: "unconfirmed", }, { value: "recurring", label: "recurring", path: "/bookings/recurring", dataTestId: "recurring", }, { value: "past", label: "past", path: "/bookings/past", dataTestId: "past", }, { value: "cancelled", label: "cancelled", path: "/bookings/cancelled", dataTestId: "cancelled", }, ]; return baseTabConfigs.map((tabConfig) => ({ value: tabConfig.value, label: t(tabConfig.label), dataTestId: tabConfig.dataTestId, href: queryString ? `${tabConfig.path}?${queryString}` : tabConfig.path, })); }, [searchParams, t]); const currentTab = useMemo(() => { const pathMatch = pathname?.match(/\/bookings\/(\w+)/); return pathMatch?.[1] || "upcoming"; }, [pathname]); return { currentTab, tabOptions, }; }