import { ArrowDownIcon } from "@heroicons/react/outline"; 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 { HttpError } from "@calcom/lib/http-error"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui"; import MultiSelectCheckboxes, { Option } from "@calcom/ui/form/MultiSelectCheckboxes"; import { Form } from "@calcom/ui/form/fields"; import showToast from "@calcom/ui/v2/core/notifications"; import type { FormValues } from "../pages/workflow"; import { AddActionDialog } from "./AddActionDialog"; 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 utils = trpc.useContext(); const [isAddActionDialogOpen, setIsAddActionDialogOpen] = useState(false); const [reload, setReload] = useState(false); const [editCounter, setEditCounter] = useState(0); const { data, isLoading } = trpc.useQuery(["viewer.eventTypes"]); const eventTypeOptions = useMemo( () => data?.eventTypeGroups.reduce( (options, group) => [ ...options, ...group.eventTypes.map((eventType) => ({ value: String(eventType.id), label: eventType.title, })), ], [] as Option[] ) || [], [data] ); const updateMutation = trpc.useMutation("viewer.workflows.update", { onSuccess: async ({ workflow }) => { if (workflow) { utils.setQueryData(["viewer.workflows.get", { id: +workflow.id }], workflow); showToast( t("workflow_updated_successfully", { workflowName: workflow.name, }), "success" ); } await router.push("/workflows"); }, onError: (err) => { if (err instanceof HttpError) { const message = `${err.statusCode}: ${err.message}`; showToast(message, "error"); } }, }); const addAction = (action: WorkflowActions, sendTo?: 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.REMINDER, }; steps?.push(step); form.setValue("steps", steps); }; return (
{ let activeOnEventTypeIds: number[] = []; if (values.activeOn) { activeOnEventTypeIds = values.activeOn.map((option) => { return parseInt(option.value, 10); }); } updateMutation.mutate({ id: parseInt(router.query.workflow as string, 10), name: values.name, activeOn: activeOnEventTypeIds, steps: values.steps, trigger: values.trigger, time: values.time || null, timeUnit: values.timeUnit || null, }); }}>
{ return ( { form.setValue("activeOn", s); }} /> ); }} />
{/* Workflow Trigger Event & Steps */}
{form.getValues("trigger") && (
)} {form.getValues("steps") && ( <> {form.getValues("steps")?.map((step) => { return ( ); })} )}
); }