import { ArrowDownIcon } from "@heroicons/react/outline"; import { TimeUnit, WorkflowActions, WorkflowStep, WorkflowTemplates, WorkflowTriggerEvents, } from "@prisma/client"; import { isValidPhoneNumber } from "libphonenumber-js"; import { Dispatch, SetStateAction, useRef, useState } from "react"; import { Controller, UseFormReturn } from "react-hook-form"; import PhoneInput from "react-phone-number-input"; import "react-phone-number-input/style.css"; import classNames from "@calcom/lib/classNames"; 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 ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent"; import { Dialog } from "@calcom/ui/Dialog"; import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown"; import { Icon } from "@calcom/ui/Icon"; import Select from "@calcom/ui/form/Select"; import { TextArea } from "@calcom/ui/form/fields"; import showToast from "@calcom/ui/v2/core/notifications"; import { AddVariablesDropdown } from "../components/AddVariablesDropdown"; import { getWorkflowActionOptions, getWorkflowTemplateOptions, getWorkflowTimeUnitOptions, getWorkflowTriggerOptions, } from "../lib/getOptions"; import { getTranslatedText, translateVariablesToEnglish } from "../lib/variableTranslations"; import type { FormValues } from "../pages/workflow"; type WorkflowStepProps = { step?: WorkflowStep; form: UseFormReturn; reload?: boolean; setReload?: Dispatch>; editCounter: number; setEditCounter: Dispatch>; }; export default function WorkflowStepContainer(props: WorkflowStepProps) { const { t, i18n } = useLocale(); const { step, form, reload, setReload, editCounter, setEditCounter } = props; const [editNumberMode, setEditNumberMode] = useState( step?.action === WorkflowActions.SMS_NUMBER && !step?.sendTo ? true : false ); const [editEmailBodyMode, setEditEmailBodyMode] = useState(false); const [sendTo, setSendTo] = useState(step?.sendTo || ""); const [errorMessageNumber, setErrorMessageNumber] = useState(""); const [errorMessageCustomInput, setErrorMessageCustomInput] = useState(""); const [isInfoParagraphOpen, setIsInfoParagraphOpen] = useState(false); const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false); const [isTestActionDisabled, setIsTestActionDisabled] = useState(false); const [translatedReminderBody, setTranslatedReminderBody] = useState( getTranslatedText((step ? form.getValues(`steps.${step.stepNumber - 1}.reminderBody`) : "") || "", { locale: i18n.language, t, }) ); const [translatedSubject, setTranslatedSubject] = useState( getTranslatedText((step ? form.getValues(`steps.${step.stepNumber - 1}.emailSubject`) : "") || "", { locale: i18n.language, t, }) ); const [isPhoneNumberNeeded, setIsPhoneNumberNeeded] = useState( step?.action === WorkflowActions.SMS_NUMBER ? true : false ); const [isCustomReminderBodyNeeded, setIsCustomReminderBodyNeeded] = useState( step?.template === WorkflowTemplates.CUSTOM ? true : false ); const [isEmailSubjectNeeded, setIsEmailSubjectNeeded] = useState( step?.action === WorkflowActions.EMAIL_ATTENDEE || step?.action === WorkflowActions.EMAIL_HOST ? true : false ); const [showTimeSection, setShowTimeSection] = useState( form.getValues("trigger") === WorkflowTriggerEvents.BEFORE_EVENT ? true : false ); const actionOptions = getWorkflowActionOptions(t); const triggerOptions = getWorkflowTriggerOptions(t); const timeUnitOptions = getWorkflowTimeUnitOptions(t); const templateOptions = getWorkflowTemplateOptions(t); const { ref: emailSubjectFormRef } = form.register(`steps.${step ? step.stepNumber - 1 : 0}.emailSubject`); const { ref: reminderBodyFormRef } = form.register(`steps.${step ? step.stepNumber - 1 : 0}.reminderBody`); const refEmailSubject = useRef(null); const refReminderBody = useRef(null); const addVariable = (isEmailSubject: boolean, variable: string) => { if (step) { if (isEmailSubject) { const currentEmailSubject = refEmailSubject?.current?.value || ""; const cursorPosition = refEmailSubject?.current?.selectionStart || currentEmailSubject.length; const subjectWithAddedVariable = `${currentEmailSubject.substring(0, cursorPosition)}{${variable .toUpperCase() .replace(" ", "_")}}${currentEmailSubject.substring(cursorPosition)}`; setTranslatedSubject(subjectWithAddedVariable); } else { const currentMessageBody = refReminderBody?.current?.value || ""; const cursorPosition = refReminderBody?.current?.selectionStart || currentMessageBody.length; const messageWithAddedVariable = `${currentMessageBody.substring(0, cursorPosition)}{${variable .toUpperCase() .replace(" ", "_")}}${currentMessageBody.substring(cursorPosition)}`; setTranslatedReminderBody(messageWithAddedVariable); } } }; const testActionMutation = trpc.viewer.workflows.testAction.useMutation({ onSuccess: async () => { showToast(t("notification_sent"), "success"); }, onError: (err) => { if (err instanceof HttpError) { const message = `${err.statusCode}: ${err.message}`; showToast(message, "error"); } }, }); //trigger if (!step) { const trigger = form.getValues("trigger"); const timeUnit = form.getValues("timeUnit"); const selectedTrigger = { label: t(`${trigger.toLowerCase()}_trigger`), value: trigger }; const selectedTimeUnit = timeUnit ? { label: t(`${timeUnit.toLowerCase()}_timeUnit`), value: timeUnit } : undefined; return ( <>
{t("trigger")}
{t("when_something_happens")}
{ return (
{ return ( { if (val) { let counter = 0; if (val.value === WorkflowActions.SMS_NUMBER) { setIsPhoneNumberNeeded(true); setEditNumberMode(true); counter = counter + 1; setIsTestActionDisabled(true); } else { setIsPhoneNumberNeeded(false); setEditNumberMode(false); } if ( form.getValues(`steps.${step.stepNumber - 1}.template`) === WorkflowTemplates.CUSTOM ) { setEditEmailBodyMode(true); counter = counter + 1; setIsTestActionDisabled(true); } if ( val.value === WorkflowActions.EMAIL_ATTENDEE || val.value === WorkflowActions.EMAIL_HOST ) { setIsEmailSubjectNeeded(true); } else { setIsEmailSubjectNeeded(false); } setEditCounter(counter); form.setValue(`steps.${step.stepNumber - 1}.action`, val.value); setErrorMessageNumber(""); setErrorMessageCustomInput(""); } }} defaultValue={selectedAction} options={actionOptions} /> ); }} /> {form.getValues(`steps.${step.stepNumber - 1}.action`) === WorkflowActions.SMS_ATTENDEE && (

{t("not_triggering_existing_bookings")}

)}
{isPhoneNumberNeeded && ( <>
{ if (newValue) { setSendTo(newValue); } else { setSendTo(""); } setErrorMessageNumber(""); }} placeholder={t("enter_phone_number")} id="sendTo" disabled={!editNumberMode} required countrySelectProps={{ className: "text-black" }} numberInputProps={{ className: "border-0 text-sm focus:ring-0 dark:bg-gray-700" }} className={classNames( "focus-within:border-brand order-1 block w-full rounded-sm border border-gray-300 py-px pl-3 ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500", !editNumberMode ? "text-gray-500 dark:text-gray-500" : "" )} />
{!editNumberMode ? ( ) : ( )}
{errorMessageNumber &&

{errorMessageNumber}

} )}
{ return (