import type { WorkflowActions } from "@prisma/client"; import { WorkflowTemplates, SchedulingType } from "@prisma/client"; import { useRouter } from "next/router"; import type { Dispatch, SetStateAction } from "react"; import { useMemo, useState } from "react"; import type { UseFormReturn } from "react-hook-form"; import { Controller } from "react-hook-form"; import { SENDER_ID, SENDER_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui"; import { Button, Label, MultiSelectCheckboxes, TextField } from "@calcom/ui"; import { ArrowDown, Trash2 } from "@calcom/ui/components/icon"; import { isSMSAction } from "../lib/isSMSAction"; import type { FormValues } from "../pages/workflow"; import { AddActionDialog } from "./AddActionDialog"; import { DeleteDialog } from "./DeleteDialog"; import WorkflowStepContainer from "./WorkflowStepContainer"; interface Props { form: UseFormReturn; workflowId: number; selectedEventTypes: Option[]; setSelectedEventTypes: Dispatch>; teamId?: number; isMixedEventType: boolean; } export default function WorkflowDetailsPage(props: Props) { const { form, workflowId, selectedEventTypes, setSelectedEventTypes, teamId, isMixedEventType } = props; const { t } = useLocale(); const router = useRouter(); const [isAddActionDialogOpen, setIsAddActionDialogOpen] = useState(false); const [reload, setReload] = useState(false); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const { data, isLoading } = trpc.viewer.eventTypes.getByViewer.useQuery(); const eventTypeOptions = useMemo( () => data?.eventTypeGroups.reduce((options, group) => { /** don't show team event types for user workflow */ if (!teamId && group.teamId) return options; /** only show correct team event types for team workflows */ if (teamId && teamId !== group.teamId) return options; return [ ...options, ...group.eventTypes .filter( (evType) => !evType.metadata?.managedEventConfig && evType.schedulingType !== SchedulingType.MANAGED ) .map((eventType) => ({ value: String(eventType.id), label: eventType.title, })), ]; }, [] as Option[]) || [], [data] ); let allEventTypeOptions = eventTypeOptions; const distinctEventTypes = new Set(); if (!teamId && isMixedEventType) { allEventTypeOptions = [...eventTypeOptions, ...selectedEventTypes]; allEventTypeOptions = allEventTypeOptions.filter((option) => { const duplicate = distinctEventTypes.has(option.value); distinctEventTypes.add(option.value); return !duplicate; }); } const addAction = ( action: WorkflowActions, sendTo?: string, numberRequired?: boolean, sender?: string, senderName?: string ) => { const steps = form.getValues("steps"); const id = steps?.length > 0 ? steps.sort((a, b) => { return a.id - b.id; })[0].id - 1 : 0; const step = { id: id > 0 ? 0 : id, //id of new steps always <= 0 action, stepNumber: steps && steps.length > 0 ? steps.sort((a, b) => { return a.stepNumber - b.stepNumber; })[steps.length - 1].stepNumber + 1 : 1, sendTo: sendTo || null, workflowId: workflowId, reminderBody: null, emailSubject: null, template: WorkflowTemplates.CUSTOM, numberRequired: numberRequired || false, sender: isSMSAction(action) ? sender || SENDER_ID : SENDER_ID, senderName: !isSMSAction(action) ? senderName || SENDER_NAME : SENDER_NAME, numberVerificationPending: false, }; steps?.push(step); form.setValue("steps", steps); }; return ( <>
{ return ( { form.setValue("activeOn", s); }} /> ); }} />
{/* Workflow Trigger Event & Steps */}
{form.getValues("trigger") && (
)} {form.getValues("steps") && ( <> {form.getValues("steps")?.map((step) => { return ( ); })} )}
await router.push("/workflows")} /> ); }