import { useRouter } from "next/router"; import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Avatar, Button, Dropdown, DropdownItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from "@calcom/ui"; import { Plus } from "@calcom/ui/components/icon"; export interface Option { teamId: number | null | undefined; // if undefined, then it's a profile label: string | null; image?: string | null; slug: string | null; } export type CreateBtnProps = { options: Option[]; createDialog?: () => JSX.Element; createFunction?: (teamId?: number) => void; subtitle?: string; buttonText?: string; isLoading?: boolean; disableMobileButton?: boolean; "data-testid"?: string; }; /** * @deprecated use CreateButtonWithTeamsList instead */ export function CreateButton(props: CreateBtnProps) { const { t } = useLocale(); const router = useRouter(); const bookerUrl = useBookerUrl(); const { createDialog, options, isLoading, createFunction, buttonText, disableMobileButton, subtitle, ...restProps } = props; const CreateDialog = createDialog ? createDialog() : null; const hasTeams = !!options.find((option) => option.teamId); // inject selection data into url for correct router history const openModal = (option: Option) => { const query = { ...router.query, dialog: "new", eventPage: option.slug, teamId: option.teamId, }; if (!option.teamId) { delete query.teamId; } router.push( { pathname: router.pathname, query, }, undefined, { shallow: true } ); }; return ( <> {!hasTeams ? ( ) : (
{subtitle}
{options.map((option, idx) => ( ( )} onClick={() => !!CreateDialog ? openModal(option) : createFunction ? createFunction(option.teamId || undefined) : null }> {" "} {/*improve this code */} {option.label} ))}
)} {router.query.dialog === "new" && CreateDialog} ); }