import { zodResolver } from "@hookform/resolvers/zod"; import { TimeUnit, WorkflowActions, WorkflowTriggerEvents } from "@prisma/client"; import { isValidPhoneNumber } from "libphonenumber-js"; import { useRouter } from "next/router"; import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { z } from "zod"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { HttpError } from "@calcom/lib/http-error"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui"; import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog"; import { Icon } from "@calcom/ui/Icon"; import PhoneInput from "@calcom/ui/form/PhoneInputLazy"; import Select from "@calcom/ui/form/Select"; import { Form, TextField } from "@calcom/ui/form/fields"; import showToast from "@calcom/ui/v2/core/notifications"; import { TIME_UNIT, WORKFLOW_ACTIONS, WORKFLOW_TRIGGER_EVENTS } from "../lib/constants"; import { getWorkflowActionOptions, getWorkflowTimeUnitOptions, getWorkflowTriggerOptions, } from "../lib/getOptions"; type WorkflowFormValues = { name: string; trigger: WorkflowTriggerEvents; action: WorkflowActions; time?: number; timeUnit?: TimeUnit; sendTo?: string; }; export function NewWorkflowButton() { const { t } = useLocale(); const router = useRouter(); const [showTimeSection, setShowTimeSection] = useState(false); const [isPhoneNumberNeeded, setIsPhoneNumberNeeded] = useState(false); const triggerOptions = getWorkflowTriggerOptions(t); const actionOptions = getWorkflowActionOptions(t); const timeUnitOptions = getWorkflowTimeUnitOptions(t); const formSchema = z.object({ name: z.string().min(1), trigger: z.enum(WORKFLOW_TRIGGER_EVENTS), action: z.enum(WORKFLOW_ACTIONS), time: z.number().min(1).optional(), timeUnit: z.enum(TIME_UNIT).optional(), sendTo: z .string() .refine((val) => isValidPhoneNumber(val)) .optional(), }); const form = useForm({ defaultValues: { timeUnit: TimeUnit.HOUR, }, mode: "onSubmit", resolver: zodResolver(formSchema), }); const createMutation = trpc.useMutation("viewer.workflows.create", { onSuccess: async ({ workflow }) => { await router.replace("/workflows/" + workflow.id); setIsPhoneNumberNeeded(false); setShowTimeSection(false); showToast(t("workflow_created_successfully", { workflowName: workflow.name }), "success"); }, 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}: You are not able to create this event`; showToast(message, "error"); } }, }); return (
{ form.clearErrors(); createMutation.mutate(values); }}> <>
{ return (
{ return ( { if (val) { form.setValue("action", val.value); form.clearErrors("action"); if (val.value === WorkflowActions.SMS_NUMBER) { setIsPhoneNumberNeeded(true); } else { setIsPhoneNumberNeeded(false); form.unregister("sendTo"); } } }} options={actionOptions} /> ); }} /> {form.formState.errors.action && (

{form.formState.errors.action.message}

)}
{isPhoneNumberNeeded && (
control={form.control} name="sendTo" placeholder={t("enter_phone_number")} id="sendTo" required />
{form.formState.errors.sendTo && (

{form.formState.errors.sendTo.message}

)}
)}
); }