import { zodResolver } from "@hookform/resolvers/zod"; import { isValidPhoneNumber } from "libphonenumber-js"; import type { Dispatch, SetStateAction } from "react"; import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { z } from "zod"; import { SENDER_ID, SENDER_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { WorkflowActions } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc/react"; import { Button, Checkbox, Dialog, DialogClose, DialogContent, DialogFooter, EmailField, Form, Input, Label, PhoneInput, Select, Tooltip, } from "@calcom/ui"; import { Info } from "@calcom/ui/components/icon"; import { WORKFLOW_ACTIONS } from "../lib/constants"; import { onlyLettersNumbersSpaces } from "../pages/workflow"; interface IAddActionDialog { isOpenDialog: boolean; setIsOpenDialog: Dispatch>; addAction: ( action: WorkflowActions, sendTo?: string, numberRequired?: boolean, senderId?: string, senderName?: string ) => void; } interface ISelectActionOption { label: string; value: WorkflowActions; } type AddActionFormValues = { action: WorkflowActions; sendTo?: string; numberRequired?: boolean; senderId?: string; senderName?: string; }; export const AddActionDialog = (props: IAddActionDialog) => { const { t } = useLocale(); const { isOpenDialog, setIsOpenDialog, addAction } = props; const [isPhoneNumberNeeded, setIsPhoneNumberNeeded] = useState(false); const [isSenderIdNeeded, setIsSenderIdNeeded] = useState(false); const [isEmailAddressNeeded, setIsEmailAddressNeeded] = useState(false); const { data: actionOptions } = trpc.viewer.workflows.getWorkflowActionOptions.useQuery(); const formSchema = z.object({ action: z.enum(WORKFLOW_ACTIONS), sendTo: z .string() .refine((val) => isValidPhoneNumber(val) || val.includes("@")) .optional(), numberRequired: z.boolean().optional(), senderId: z .string() .refine((val) => onlyLettersNumbersSpaces(val)) .nullable(), senderName: z.string().nullable(), }); const form = useForm({ mode: "onSubmit", defaultValues: { action: WorkflowActions.EMAIL_HOST, senderId: SENDER_ID, senderName: SENDER_NAME, }, resolver: zodResolver(formSchema), }); const handleSelectAction = (newValue: ISelectActionOption | null) => { if (newValue) { form.setValue("action", newValue.value); if (newValue.value === WorkflowActions.SMS_NUMBER) { setIsPhoneNumberNeeded(true); setIsSenderIdNeeded(true); setIsEmailAddressNeeded(false); form.resetField("senderId", { defaultValue: SENDER_ID }) } else if (newValue.value === WorkflowActions.EMAIL_ADDRESS) { setIsEmailAddressNeeded(true); setIsSenderIdNeeded(false); setIsPhoneNumberNeeded(false); } else if (newValue.value === WorkflowActions.SMS_ATTENDEE) { setIsSenderIdNeeded(true); setIsEmailAddressNeeded(false); setIsPhoneNumberNeeded(false); form.resetField("senderId", { defaultValue: SENDER_ID }) } else if (newValue.value === WorkflowActions.WHATSAPP_NUMBER) { setIsSenderIdNeeded(false); setIsPhoneNumberNeeded(true); setIsEmailAddressNeeded(false); } else { setIsSenderIdNeeded(false); setIsEmailAddressNeeded(false); setIsPhoneNumberNeeded(false); } form.unregister("sendTo"); form.unregister("numberRequired"); form.clearErrors("action"); form.clearErrors("sendTo"); } }; if (!actionOptions) return null; const canRequirePhoneNumber = (workflowStep: string) => { return ( WorkflowActions.SMS_ATTENDEE === workflowStep || WorkflowActions.WHATSAPP_ATTENDEE === workflowStep ) } const showSender = (action: string) => { return !isSenderIdNeeded && !( WorkflowActions.WHATSAPP_NUMBER === action || WorkflowActions.WHATSAPP_ATTENDEE === action ) } return (
{ addAction( values.action, values.sendTo, values.numberRequired, values.senderId, values.senderName ); form.unregister("sendTo"); form.unregister("action"); form.unregister("numberRequired"); setIsOpenDialog(false); setIsPhoneNumberNeeded(false); setIsEmailAddressNeeded(false); setIsSenderIdNeeded(false); }}>
{ return (
{form.formState.errors && form.formState?.errors?.senderId && (

{t("sender_id_error_message")}

)} )} {showSender(form.getValues('action')) && (
)} {canRequirePhoneNumber(form.getValues("action")) && (
( form.setValue("numberRequired", e.target.checked)} /> )} />
)} { setIsOpenDialog(false); form.unregister("sendTo"); form.unregister("action"); form.unregister("numberRequired"); setIsPhoneNumberNeeded(false); setIsEmailAddressNeeded(false); setIsSenderIdNeeded(false); }} />
); };