calendar/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx

import { useRouter, useSearchParams } from "next/navigation";
import type { Dispatch, SetStateAction } from "react";
import { useState, useEffect } from "react";
import type { UseFormReturn } from "react-hook-form";
import { Controller } from "react-hook-form";

import { SENDER_ID, SENDER_NAME, SCANNING_WORKFLOW_STEPS } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { WorkflowActions } from "@calcom/prisma/enums";
import { WorkflowTemplates } from "@calcom/prisma/enums";
import type { RouterOutputs } from "@calcom/trpc/react";
import { InfoBadge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui/components/form";
import { Label, MultiSelectCheckbox, TextField, CheckboxField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";

import { isSMSAction, isCalAIAction } from "../lib/actionHelperFunctions";
import type { FormValues } from "../pages/workflow";
import { AddActionDialog } from "./AddActionDialog";
import { DeleteDialog } from "./DeleteDialog";
import WorkflowStepContainer from "./WorkflowStepContainer";

type User = RouterOutputs["viewer"]["me"]["get"];

interface WorkflowPermissions {
  canView: boolean;
  canUpdate: boolean;
  canDelete: boolean;
  readOnly: boolean; // Keep for backward compatibility
}

interface Props {
  form: UseFormReturn<FormValues>;
  workflowId: number;
  selectedOptions: Option[];
  setSelectedOptions: Dispatch<SetStateAction<Option[]>>;
  teamId?: number;
  user: User;
  readOnly: boolean;
  isOrg: boolean;
  allOptions: Option[];
  permissions?: WorkflowPermissions;
  onSaveWorkflow?: () => Promise<void>;
}

export default function WorkflowDetailsPage(props: Props) {
  const {
    form,
    workflowId,
    selectedOptions,
    setSelectedOptions,
    teamId,
    isOrg,
    allOptions,
    permissions: _permissions,
  } = props;
  const { t } = useLocale();
  const router = useRouter();

  const hasCalAIAction = () => {
    const steps = form.getValues("steps") || [];
    return steps.some((step) => isCalAIAction(step.action));
  };

  const permissions = _permissions || {
    canView: !teamId ? true : !props.readOnly,
    canUpdate: !teamId ? true : !props.readOnly,
    canDelete: !teamId ? true : !props.readOnly,
    readOnly: !teamId ? false : props.readOnly,
  };

  const [isAddActionDialogOpen, setIsAddActionDialogOpen] = useState(false);

  const [reload, setReload] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);

  const searchParams = useSearchParams();
  const eventTypeId = searchParams?.get("eventTypeId");

  useEffect(() => {
    const matchingOption = allOptions.find((option) => option.value === eventTypeId);
    if (matchingOption && !selectedOptions.find((option) => option.value === eventTypeId)) {
      const newOptions = [...selectedOptions, matchingOption];
      setSelectedOptions(newOptions);
      form.setValue("activeOn", newOptions);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [eventTypeId]);

  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.REMINDER,
      numberRequired: numberRequired || false,
      sender: isSMSAction(action) ? sender || SENDER_ID : SENDER_ID,
      senderName: !isSMSAction(action) ? senderName || SENDER_NAME : SENDER_NAME,
      numberVerificationPending: false,
      includeCalendarEvent: false,
      verifiedAt: SCANNING_WORKFLOW_STEPS ? null : new Date(),
      agentId: null,
    };
    steps?.push(step);
    form.setValue("steps", steps);
  };

  return (
    <>
      <div className="z-1 my-8 sm:my-0 md:flex">
        <div className="pl-2 pr-3 md:sticky md:top-6 md:h-0 md:pl-0">
          <div className="mb-5">
            <TextField
              data-testid="workflow-name"
              disabled={props.readOnly}
              label={`${t("workflow_name")}:`}
              type="text"
              {...form.register("name")}
            />
          </div>
          {isOrg ? (
            <div className="flex">
              <Label>{t("which_team_apply")}</Label>
              <div className="-mt-0.5">
                <InfoBadge content={t("team_select_info")} />
              </div>
            </div>
          ) : (
            <Label>{t("which_event_type_apply")}</Label>
          )}
          <Controller
            name="activeOn"
            control={form.control}
            render={() => {
              return (
                <MultiSelectCheckbox
                  options={allOptions}
                  isDisabled={props.readOnly || form.getValues("selectAll")}
                  className="w-full md:w-64"
                  setSelected={setSelectedOptions}
                  selected={form.getValues("selectAll") ? allOptions : selectedOptions}
                  setValue={(s: Option[]) => {
                    form.setValue("activeOn", s);
                  }}
                  countText={isOrg ? "count_team" : "nr_event_type"}
                />
              );
            }}
          />
          {!hasCalAIAction() && (
            <div className="mt-3">
              <Controller
                name="selectAll"
                render={({ field: { value, onChange } }) => (
                  <CheckboxField
                    description={isOrg ? t("apply_to_all_teams") : t("apply_to_all_event_types")}
                    disabled={props.readOnly}
                    onChange={(e) => {
                      onChange(e);
                      if (e.target.value) {
                        setSelectedOptions(allOptions);
                        form.setValue("activeOn", allOptions);
                      }
                    }}
                    checked={value}
                  />
                )}
              />
            </div>
          )}
          <div className="md:border-subtle my-7 border-transparent md:border-t" />
          {permissions.canDelete && (
            <Button
              type="button"
              StartIcon="trash-2"
              color="destructive"
              className="border"
              onClick={() => setDeleteDialogOpen(true)}>
              {t("delete_workflow")}
            </Button>
          )}
          <div className="border-subtle my-7 border-t md:border-none" />
        </div>

        {/* Workflow Trigger Event & Steps */}
        <div className="bg-muted border-subtle w-full rounded-md border p-3 py-5 md:ml-3 md:p-8">
          {form.getValues("trigger") && (
            <div>
              <WorkflowStepContainer
                form={form}
                user={props.user}
                teamId={teamId}
                readOnly={props.readOnly}
                isOrganization={isOrg}
                onSaveWorkflow={props.onSaveWorkflow}
              />
            </div>
          )}
          {form.getValues("steps") && (
            <>
              {form.getValues("steps")?.map((step) => {
                return (
                  <WorkflowStepContainer
                    key={step.id}
                    form={form}
                    user={props.user}
                    step={step}
                    reload={reload}
                    setReload={setReload}
                    teamId={teamId}
                    readOnly={props.readOnly}
                    isOrganization={isOrg}
                    onSaveWorkflow={props.onSaveWorkflow}
                  />
                );
              })}
            </>
          )}
          {!props.readOnly && (
            <>
              <div className="my-3 flex justify-center">
                <Icon name="arrow-down" className="text-subtle stroke-[1.5px] text-3xl" />
              </div>
              <div className="flex justify-center">
                <Button
                  type="button"
                  onClick={() => setIsAddActionDialogOpen(true)}
                  color="secondary"
                  className="bg-default">
                  {t("add_action")}
                </Button>
              </div>
            </>
          )}
        </div>
      </div>
      <AddActionDialog
        isOpenDialog={isAddActionDialogOpen}
        setIsOpenDialog={setIsAddActionDialogOpen}
        addAction={addAction}
      />
      <DeleteDialog
        isOpenDialog={deleteDialogOpen}
        setIsOpenDialog={setDeleteDialogOpen}
        workflowId={workflowId}
        additionalFunction={async () => router.push("/workflows")}
      />
    </>
  );
}