import { WorkflowActions } from "@prisma/client"; import Link from "next/link"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; 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, EmptyScreen, Icon, showToast, Switch, Tooltip } from "@calcom/ui"; import LicenseRequired from "../../common/components/v2/LicenseRequired"; import { getActionIcon } from "../lib/getActionIcon"; import SkeletonLoader from "./SkeletonLoaderEventWorkflowsTab"; import { WorkflowType } from "./WorkflowListPage"; type ItemProps = { workflow: WorkflowType; eventType: { id: number; title: string; }; }; const WorkflowListItem = (props: ItemProps) => { const { workflow, eventType } = props; const { t } = useLocale(); const [activeEventTypeIds, setActiveEventTypeIds] = useState( workflow.activeOn.map((active) => { if (active.eventType) { return active.eventType.id; } }) ); const isActive = activeEventTypeIds.includes(eventType.id); const activateEventTypeMutation = trpc.viewer.workflows.activateEventType.useMutation({ onSuccess: async () => { let offOn = ""; if (activeEventTypeIds.includes(eventType.id)) { const newActiveEventTypeIds = activeEventTypeIds.filter((id) => { return id !== eventType.id; }); setActiveEventTypeIds(newActiveEventTypeIds); offOn = "off"; } else { const newActiveEventTypeIds = activeEventTypeIds; newActiveEventTypeIds.push(eventType.id); setActiveEventTypeIds(newActiveEventTypeIds); offOn = "on"; } showToast( t("workflow_turned_on_successfully", { workflowName: workflow.name, offOn, }), "success" ); }, onError: (err) => { if (err instanceof HttpError) { const message = `${err.statusCode}: ${err.message}`; showToast(message, "error"); } }, }); const sendTo: Set = new Set(); workflow.steps.forEach((step) => { switch (step.action) { case WorkflowActions.EMAIL_HOST: sendTo.add(t("organizer_name_variable")); break; case WorkflowActions.EMAIL_ATTENDEE: sendTo.add(t("attendee_name_variable")); break; case WorkflowActions.SMS_ATTENDEE: sendTo.add(t("attendee_name_variable")); break; case WorkflowActions.SMS_NUMBER: sendTo.add(step.sendTo || ""); break; case WorkflowActions.EMAIL_ADDRESS: sendTo.add(step.sendTo || ""); break; } }); return (
{getActionIcon( workflow.steps, isActive ? "h-6 w-6 stroke-[1.5px] text-gray-700" : "h-6 w-6 stroke-[1.5px] text-gray-400" )}
{workflow.name ? workflow.name : "Untitled (" + `${t(`${workflow.steps[0].action.toLowerCase()}_action`)}`.charAt(0).toUpperCase() + `${t(`${workflow.steps[0].action.toLowerCase()}_action`)}`.slice(1) + ")"}
{t("to")}: {Array.from(sendTo).map((sendToPerson, index) => { return {`${index ? ", " : ""}${sendToPerson}`}; })}
{ activateEventTypeMutation.mutate({ workflowId: workflow.id, eventTypeId: eventType.id }); }} />
); }; type Props = { eventType: { id: number; title: string; }; workflows: WorkflowType[]; }; function EventWorkflowsTab(props: Props) { const { workflows } = props; const { t } = useLocale(); const { data, isLoading } = trpc.viewer.workflows.list.useQuery(); const router = useRouter(); const [sortedWorkflows, setSortedWorkflows] = useState>([]); useEffect(() => { if (data?.workflows) { const activeWorkflows = workflows.map((workflowOnEventType) => { return workflowOnEventType; }); const disabledWorkflows = data.workflows.filter( (workflow) => !workflows .map((workflow) => { return workflow.id; }) .includes(workflow.id) ); setSortedWorkflows(activeWorkflows.concat(disabledWorkflows)); } }, [isLoading]); const createMutation = trpc.viewer.workflows.createV2.useMutation({ onSuccess: async ({ workflow }) => { await router.replace("/workflows/" + workflow.id); }, onError: (err) => { if (err instanceof HttpError) { const message = `${err.statusCode}: ${err.message}`; showToast(message, "error"); } if (err.data?.code === "UNAUTHORIZED") { const message = `${err.data.code}: You are not able to create this workflow`; showToast(message, "error"); } }, }); return ( {!isLoading ? ( data?.workflows && data?.workflows.length > 0 ? (
{sortedWorkflows.map((workflow) => { return ; })}
) : (
createMutation.mutate()} loading={createMutation.isLoading}> {t("create_workflow")} } />
) ) : ( )}
); } export default EventWorkflowsTab;