import { WorkflowActions, WorkflowTemplates } from "@prisma/client"; import { useRouter } from "next/router"; import { Dispatch, SetStateAction, useMemo, useState } from "react"; import { Controller, UseFormReturn } from "react-hook-form"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery"; import { Icon } from "@calcom/ui"; import { Button, Label, TextField } from "@calcom/ui"; import { MultiSelectCheckboxes } from "@calcom/ui"; import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui"; 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>; } export default function WorkflowDetailsPage(props: Props) { const { form, workflowId, selectedEventTypes, setSelectedEventTypes } = 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) => [ ...options, ...group.eventTypes.map((eventType) => ({ value: String(eventType.id), label: eventType.title, })), ], [] as Option[] ) || [], [data] ); const addAction = (action: WorkflowActions, sendTo?: string, numberRequired?: boolean, sender?: 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: sender || "Cal", }; 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")} /> ); }