cal.pub0.org/packages/features/schedules/components/NewScheduleButton.tsx

97 lines
2.6 KiB
TypeScript

import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { HttpError } from "@calcom/lib/http-error";
import { trpc } from "@calcom/trpc/react";
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogTrigger,
Form,
InputField,
showToast,
} from "@calcom/ui";
import { Plus } from "@calcom/ui/components/icon";
export function NewScheduleButton({
name = "new-schedule",
fromEventType,
}: {
name?: string;
fromEventType?: boolean;
}) {
const router = useRouter();
const { t } = useLocale();
const form = useForm<{
name: string;
}>();
const { register } = form;
const utils = trpc.useContext();
const createMutation = trpc.viewer.availability.schedule.create.useMutation({
onSuccess: async ({ schedule }) => {
await router.push(`/availability/${schedule.id}${fromEventType ? "?fromEventType=true" : ""}`);
showToast(t("schedule_created_successfully", { scheduleName: schedule.name }), "success");
utils.viewer.availability.list.setData(undefined, (data) => {
const newSchedule = { ...schedule, isDefault: false, availability: [] };
if (!data)
return {
schedules: [newSchedule],
};
return {
...data,
schedules: [...data.schedules, newSchedule],
};
});
},
onError: (err) => {
if (err instanceof HttpError) {
const message = `${err.statusCode}: ${err.message}`;
showToast(message, "error");
}
if (err.data?.code === "UNAUTHORIZED") {
const message = `${err.data.code}: ${t("error_schedule_unauthorized_create")}`;
showToast(message, "error");
}
},
});
return (
<Dialog name={name} clearQueryParamsOnClose={["copy-schedule-id"]}>
<DialogTrigger asChild>
<Button variant="fab" data-testid={name} StartIcon={Plus}>
{t("new")}
</Button>
</DialogTrigger>
<DialogContent title={t("add_new_schedule")}>
<Form
form={form}
handleSubmit={(values) => {
createMutation.mutate(values);
}}>
<InputField
label={t("name")}
type="text"
id="name"
required
placeholder={t("default_schedule_name")}
{...register("name")}
/>
<DialogFooter>
<DialogClose />
<Button type="submit" loading={createMutation.isLoading}>
{t("continue")}
</Button>
</DialogFooter>
</Form>
</DialogContent>
</Dialog>
);
}