@strapi/review-workflows 5.0.0-beta.3 → 5.0.0-beta.4

package/dist/_chunks/_id-D4CXKOqG.mjs

@@ -0,0 +1,1311 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useTracking, useForm, useField, InputRenderer as InputRenderer$1, useNotification, ConfirmDialog, Page, useAPIErrorHandler, useRBAC, Form, BackButton } from "@strapi/admin/strapi-admin";
+import { useLicenseLimits } from "@strapi/admin/strapi-admin/ee";
+import { Box, Typography, Flex, IconButton, MultiSelectOption, useComposedRefs, VisuallyHidden, Accordion, AccordionToggle, AccordionContent, Grid, GridItem, SingleSelect, SingleSelectOption, TextInput, MultiSelect, MultiSelectGroup, useCollator, Button } from "@strapi/design-system";
+import { PlusCircle, EyeStriked, More, Drag, Duplicate, Check } from "@strapi/icons";
+import { generateNKeysBetween } from "fractional-indexing";
+import { useIntl } from "react-intl";
+import { useDispatch } from "react-redux";
+import { useParams, useNavigate } from "react-router-dom";
+import * as yup from "yup";
+import { r as reviewWorkflowsApi, A as AVAILABLE_COLORS, g as getStageColorByHex, u as useGetContentTypesQuery, a as useTypedSelector, C as CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME, b as CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME, L as LimitsModal, i as isBaseQueryError } from "./index-D7Y0ofdg.mjs";
+import { D as DRAG_DROP_TYPES, u as useReviewWorkflows, a as DragLayerRendered, H as Header, R as Root } from "./Layout-facLKucY.mjs";
+import { MenuItem, Menu } from "@strapi/design-system/v2";
+import { getEmptyImage } from "react-dnd-html5-backend";
+import styled from "styled-components";
+import { useDrop, useDrag } from "react-dnd";
+const adminApi = reviewWorkflowsApi.injectEndpoints({
+  endpoints(builder) {
+    return {
+      getRoles: builder.query({
+        query: () => ({
+          url: `/admin/roles`,
+          method: "GET"
+        }),
+        transformResponse: (res) => {
+          return res.data;
+        }
+      })
+    };
+  }
+});
+const { useGetRolesQuery } = adminApi;
+const useKeyboardDragAndDrop = (active, index, { onCancel, onDropItem, onGrabItem, onMoveItem }) => {
+  const [isSelected, setIsSelected] = React.useState(false);
+  const handleMove = (movement) => {
+    if (!isSelected) {
+      return;
+    }
+    if (typeof index === "number" && onMoveItem) {
+      if (movement === "UP") {
+        onMoveItem(index - 1, index);
+      } else if (movement === "DOWN") {
+        onMoveItem(index + 1, index);
+      }
+    }
+  };
+  const handleDragClick = () => {
+    if (isSelected) {
+      if (onDropItem) {
+        onDropItem(index);
+      }
+      setIsSelected(false);
+    } else {
+      if (onGrabItem) {
+        onGrabItem(index);
+      }
+      setIsSelected(true);
+    }
+  };
+  const handleCancel = () => {
+    if (isSelected) {
+      setIsSelected(false);
+      if (onCancel) {
+        onCancel(index);
+      }
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (!active) {
+      return;
+    }
+    if (e.key === "Tab" && !isSelected) {
+      return;
+    }
+    e.preventDefault();
+    switch (e.key) {
+      case " ":
+      case "Enter":
+        handleDragClick();
+        break;
+      case "Escape":
+        handleCancel();
+        break;
+      case "ArrowDown":
+      case "ArrowRight":
+        handleMove("DOWN");
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        handleMove("UP");
+        break;
+    }
+  };
+  return handleKeyDown;
+};
+const DIRECTIONS = {
+  UPWARD: "upward",
+  DOWNWARD: "downward"
+};
+const DROP_SENSITIVITY = {
+  REGULAR: "regular",
+  IMMEDIATE: "immediate"
+};
+const useDragAndDrop = (active, {
+  type = "STRAPI_DND",
+  index,
+  item,
+  onStart,
+  onEnd,
+  onGrabItem,
+  onDropItem,
+  onCancel,
+  onMoveItem,
+  dropSensitivity = DROP_SENSITIVITY.REGULAR
+}) => {
+  const objectRef = React.useRef(null);
+  const [{ handlerId, isOver }, dropRef] = useDrop({
+    accept: type,
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId(),
+        isOver: monitor.isOver({ shallow: true })
+      };
+    },
+    drop(item2) {
+      const draggedIndex = item2.index;
+      const newIndex = index;
+      if (isOver && onDropItem) {
+        onDropItem(draggedIndex, newIndex);
+      }
+    },
+    hover(item2, monitor) {
+      if (!objectRef.current || !onMoveItem) {
+        return;
+      }
+      const dragIndex = item2.index;
+      const newIndex = index;
+      const hoverBoundingRect = objectRef.current?.getBoundingClientRect();
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      const clientOffset = monitor.getClientOffset();
+      if (!clientOffset)
+        return;
+      const hoverClientY = clientOffset && clientOffset.y - hoverBoundingRect.top;
+      if (typeof dragIndex === "number" && typeof newIndex === "number") {
+        if (dragIndex === newIndex) {
+          return;
+        }
+        if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {
+          if (dragIndex < newIndex && hoverClientY < hoverMiddleY) {
+            return;
+          }
+          if (dragIndex > newIndex && hoverClientY > hoverMiddleY) {
+            return;
+          }
+        }
+        onMoveItem(newIndex, dragIndex);
+        item2.index = newIndex;
+      } else {
+        if (Array.isArray(dragIndex) && Array.isArray(newIndex)) {
+          const minLength = Math.min(dragIndex.length, newIndex.length);
+          let areEqual = true;
+          let isLessThan = false;
+          let isGreaterThan = false;
+          for (let i = 0; i < minLength; i++) {
+            if (dragIndex[i] < newIndex[i]) {
+              isLessThan = true;
+              areEqual = false;
+              break;
+            } else if (dragIndex[i] > newIndex[i]) {
+              isGreaterThan = true;
+              areEqual = false;
+              break;
+            }
+          }
+          if (areEqual && dragIndex.length === newIndex.length) {
+            return;
+          }
+          if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {
+            if (isLessThan && !isGreaterThan && hoverClientY < hoverMiddleY) {
+              return;
+            }
+            if (isGreaterThan && !isLessThan && hoverClientY > hoverMiddleY) {
+              return;
+            }
+          }
+        }
+        onMoveItem(newIndex, dragIndex);
+        item2.index = newIndex;
+      }
+    }
+  });
+  const getDragDirection = (monitor) => {
+    if (monitor && monitor.isDragging() && !monitor.didDrop() && monitor.getInitialClientOffset() && monitor.getClientOffset()) {
+      const deltaY = monitor.getInitialClientOffset().y - monitor.getClientOffset().y;
+      if (deltaY > 0)
+        return DIRECTIONS.UPWARD;
+      if (deltaY < 0)
+        return DIRECTIONS.DOWNWARD;
+      return null;
+    }
+    return null;
+  };
+  const [{ isDragging, direction }, dragRef, dragPreviewRef] = useDrag({
+    type,
+    item() {
+      if (onStart) {
+        onStart();
+      }
+      const { width } = objectRef.current?.getBoundingClientRect() ?? {};
+      return { index, width, ...item };
+    },
+    end() {
+      if (onEnd) {
+        onEnd();
+      }
+    },
+    canDrag: active,
+    /**
+     * This is useful when the item is in a virtualized list.
+     * However, if we don't have an ID then we want the libraries
+     * defaults to take care of this.
+     */
+    isDragging: item?.id ? (monitor) => {
+      return item.id === monitor.getItem().id;
+    } : void 0,
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+      initialOffset: monitor.getInitialClientOffset(),
+      currentOffset: monitor.getClientOffset(),
+      direction: getDragDirection(monitor)
+    })
+  });
+  const handleKeyDown = useKeyboardDragAndDrop(active, index, {
+    onGrabItem,
+    onDropItem,
+    onCancel,
+    onMoveItem
+  });
+  return [
+    { handlerId, isDragging, handleKeyDown, isOverDropTarget: isOver, direction },
+    objectRef,
+    dropRef,
+    dragRef,
+    dragPreviewRef
+  ];
+};
+const AddStage = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    StyledButton,
+    {
+      as: "button",
+      background: "neutral0",
+      border: "neutral150",
+      paddingBottom: 3,
+      paddingLeft: 4,
+      paddingRight: 4,
+      paddingTop: 3,
+      shadow: "filterShadow",
+      ...props,
+      children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(StyledAddIcon, { "aria-hidden": true }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral500", children })
+      ] })
+    }
+  );
+};
+const StyledAddIcon = styled(PlusCircle)`
+  > circle {
+    fill: ${({ theme }) => theme.colors.neutral150};
+  }
+  > path {
+    fill: ${({ theme }) => theme.colors.neutral600};
+  }
+`;
+const StyledButton = styled(Box)`
+  border-radius: 26px;
+
+  svg {
+    height: ${({ theme }) => theme.spaces[6]};
+    width: ${({ theme }) => theme.spaces[6]};
+
+    > path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary600} !important;
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.primary600} !important;
+    }
+
+    ${StyledAddIcon} {
+      > circle {
+        fill: ${({ theme }) => theme.colors.primary600};
+      }
+      > path {
+        fill: ${({ theme }) => theme.colors.neutral100};
+      }
+    }
+  }
+
+  &:active {
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
+    }
+
+    ${StyledAddIcon} {
+      > circle {
+        fill: ${({ theme }) => theme.colors.primary600};
+      }
+      > path {
+        fill: ${({ theme }) => theme.colors.neutral100};
+      }
+    }
+  }
+`;
+const Stages = ({ canDelete = true, canUpdate = true, isCreating = false }) => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const addFieldRow = useForm("Stages", (state) => state.addFieldRow);
+  const { value: stages = [] } = useField("stages");
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 6, width: "100%", children: [
+    /* @__PURE__ */ jsxs(Box, { position: "relative", width: "100%", children: [
+      /* @__PURE__ */ jsx(
+        Background,
+        {
+          background: "neutral200",
+          height: "100%",
+          left: "50%",
+          position: "absolute",
+          top: "0",
+          width: 2,
+          zIndex: 1
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Flex,
+        {
+          direction: "column",
+          alignItems: "stretch",
+          gap: 6,
+          zIndex: 2,
+          position: "relative",
+          as: "ol",
+          children: stages.map((stage, index) => {
+            return /* @__PURE__ */ jsx(Box, { as: "li", children: /* @__PURE__ */ jsx(
+              Stage,
+              {
+                index,
+                canDelete: stages.length > 1 && canDelete,
+                canReorder: stages.length > 1,
+                canUpdate,
+                stagesCount: stages.length,
+                isOpen: isCreating,
+                ...stage
+              }
+            ) }, stage.__temp_key__);
+          })
+        }
+      )
+    ] }),
+    canUpdate && /* @__PURE__ */ jsx(
+      AddStage,
+      {
+        type: "button",
+        onClick: () => {
+          addFieldRow("stages", { name: "" });
+          trackUsage("willCreateStage");
+        },
+        children: formatMessage({
+          id: "Settings.review-workflows.stage.add",
+          defaultMessage: "Add new stage"
+        })
+      }
+    )
+  ] });
+};
+const Background = styled(Box)`
+  transform: translateX(-50%);
+`;
+const Stage = ({
+  index,
+  canDelete = false,
+  canReorder = false,
+  canUpdate = false,
+  isOpen: isOpenDefault = false,
+  stagesCount,
+  name,
+  permissions,
+  color
+}) => {
+  const [liveText, setLiveText] = React.useState();
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const [isOpen, setIsOpen] = React.useState(isOpenDefault);
+  const stageErrors = useForm("Stages", (state) => state.errors.stages);
+  const error = stageErrors?.[index];
+  const addFieldRow = useForm("Stage", (state) => state.addFieldRow);
+  const moveFieldRow = useForm("Stage", (state) => state.moveFieldRow);
+  const removeFieldRow = useForm("Stage", (state) => state.removeFieldRow);
+  const getItemPos = (index2) => `${index2 + 1} of ${stagesCount}`;
+  const handleGrabStage = (index2) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: "dnd.grab-item",
+          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
+        },
+        {
+          item: name,
+          position: getItemPos(index2)
+        }
+      )
+    );
+  };
+  const handleDropStage = (index2) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: "dnd.drop-item",
+          defaultMessage: `{item}, dropped. Final position in list: {position}.`
+        },
+        {
+          item: name,
+          position: getItemPos(index2)
+        }
+      )
+    );
+  };
+  const handleCancelDragStage = () => {
+    setLiveText(
+      formatMessage(
+        {
+          id: "dnd.cancel-item",
+          defaultMessage: "{item}, dropped. Re-order cancelled."
+        },
+        {
+          item: name
+        }
+      )
+    );
+  };
+  const handleMoveStage = (newIndex, oldIndex) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: "dnd.reorder",
+          defaultMessage: "{item}, moved. New position in list: {position}."
+        },
+        {
+          item: name,
+          position: getItemPos(newIndex)
+        }
+      )
+    );
+    moveFieldRow("stages", oldIndex, newIndex);
+  };
+  const [{ handlerId, isDragging, handleKeyDown }, stageRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(canReorder, {
+    index,
+    item: {
+      index,
+      name
+    },
+    onGrabItem: handleGrabStage,
+    onDropItem: handleDropStage,
+    onMoveItem: handleMoveStage,
+    onCancel: handleCancelDragStage,
+    type: DRAG_DROP_TYPES.STAGE
+  });
+  const composedRef = useComposedRefs(stageRef, dropRef);
+  React.useEffect(() => {
+    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
+  }, [dragPreviewRef, index]);
+  const handleCloneClick = () => {
+    addFieldRow("stages", { name, color, permissions });
+  };
+  return /* @__PURE__ */ jsxs(Box, { ref: (ref) => composedRef(ref), children: [
+    liveText && /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
+    isDragging ? /* @__PURE__ */ jsx(
+      Box,
+      {
+        background: "primary100",
+        borderStyle: "dashed",
+        borderColor: "primary600",
+        borderWidth: "1px",
+        display: "block",
+        hasRadius: true,
+        padding: 6,
+        shadow: "tableShadow"
+      }
+    ) : /* @__PURE__ */ jsxs(
+      Accordion,
+      {
+        size: "S",
+        variant: "primary",
+        onToggle: () => {
+          setIsOpen(!isOpen);
+          if (!isOpen) {
+            trackUsage("willEditStage");
+          }
+        },
+        expanded: isOpen,
+        shadow: "tableShadow",
+        error: Object.values(error ?? {})[0],
+        hasErrorMessage: false,
+        children: [
+          /* @__PURE__ */ jsx(
+            AccordionToggle,
+            {
+              title: name,
+              togglePosition: "left",
+              action: (canDelete || canUpdate) && /* @__PURE__ */ jsxs(Flex, { children: [
+                /* @__PURE__ */ jsxs(Menu.Root, { children: [
+                  /* @__PURE__ */ jsxs(ContextMenuTrigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
+                    /* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false }),
+                    /* @__PURE__ */ jsx(VisuallyHidden, { as: "span", children: formatMessage({
+                      id: "[tbdb].components.DynamicZone.more-actions",
+                      defaultMessage: "More actions"
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ jsx(Menu.Content, { popoverPlacement: "bottom-end", zIndex: 2, children: /* @__PURE__ */ jsxs(Menu.SubRoot, { children: [
+                    canUpdate && /* @__PURE__ */ jsx(MenuItem, { onClick: handleCloneClick, children: formatMessage({
+                      id: "Settings.review-workflows.stage.delete",
+                      defaultMessage: "Duplicate stage"
+                    }) }),
+                    canDelete && /* @__PURE__ */ jsx(DeleteMenuItem, { onClick: () => removeFieldRow("stages", index), children: formatMessage({
+                      id: "Settings.review-workflows.stage.delete",
+                      defaultMessage: "Delete"
+                    }) })
+                  ] }) })
+                ] }),
+                canUpdate && /* @__PURE__ */ jsx(
+                  DragIconButton,
+                  {
+                    background: "transparent",
+                    forwardedAs: "div",
+                    hasRadius: true,
+                    role: "button",
+                    noBorder: true,
+                    tabIndex: 0,
+                    "data-handler-id": handlerId,
+                    ref: dragRef,
+                    label: formatMessage({
+                      id: "Settings.review-workflows.stage.drag",
+                      defaultMessage: "Drag"
+                    }),
+                    onClick: (e) => e.stopPropagation(),
+                    onKeyDown: handleKeyDown,
+                    children: /* @__PURE__ */ jsx(Drag, {})
+                  }
+                )
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(AccordionContent, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsx(Grid, { gap: 4, children: [
+            {
+              disabled: !canUpdate,
+              label: formatMessage({
+                id: "Settings.review-workflows.stage.name.label",
+                defaultMessage: "Stage name"
+              }),
+              name: `stages.${index}.name`,
+              required: true,
+              size: 6,
+              type: "string"
+            },
+            {
+              disabled: !canUpdate,
+              label: formatMessage({
+                id: "content-manager.reviewWorkflows.stage.color",
+                defaultMessage: "Color"
+              }),
+              name: `stages.${index}.color`,
+              required: true,
+              size: 6,
+              type: "color"
+            },
+            {
+              disabled: !canUpdate,
+              label: formatMessage({
+                id: "Settings.review-workflows.stage.permissions.label",
+                defaultMessage: "Roles that can change this stage"
+              }),
+              name: `stages.${index}.permissions`,
+              placeholder: formatMessage({
+                id: "Settings.review-workflows.stage.permissions.placeholder",
+                defaultMessage: "Select a role"
+              }),
+              required: true,
+              size: 6,
+              type: "permissions"
+            }
+          ].map(({ size, ...field }) => /* @__PURE__ */ jsx(GridItem, { col: size, children: /* @__PURE__ */ jsx(InputRenderer, { ...field }) }, field.name)) }) })
+        ]
+      }
+    )
+  ] });
+};
+const DeleteMenuItem = styled(MenuItem)`
+  color: ${({ theme }) => theme.colors.danger600};
+`;
+const ContextMenuTrigger = styled(Menu.Trigger)`
+  :hover,
+  :focus {
+    background-color: ${({ theme }) => theme.colors.neutral100};
+  }
+
+  > span {
+    font-size: 0;
+  }
+`;
+const DragIconButton = styled(IconButton)`
+  align-items: center;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  display: flex;
+  justify-content: center;
+
+  &:hover,
+  &:focus {
+    background-color: ${({ theme }) => theme.colors.neutral100};
+  }
+
+  svg {
+    height: auto;
+    width: ${({ theme }) => theme.spaces[3]};
+  }
+`;
+const InputRenderer = (props) => {
+  switch (props.type) {
+    case "color":
+      return /* @__PURE__ */ jsx(ColorSelector, { ...props });
+    case "permissions":
+      return /* @__PURE__ */ jsx(PermissionsField, { ...props });
+    default:
+      return /* @__PURE__ */ jsx(InputRenderer$1, { ...props });
+  }
+};
+const ColorSelector = ({ disabled, label, name, required }) => {
+  const { formatMessage } = useIntl();
+  const { value, error, onChange } = useField(name);
+  const colorOptions = AVAILABLE_COLORS.map(({ hex, name: name2 }) => ({
+    value: hex,
+    label: formatMessage(
+      {
+        id: "Settings.review-workflows.stage.color.name",
+        defaultMessage: "{name}"
+      },
+      { name: name2 }
+    ),
+    color: hex
+  }));
+  const { themeColorName } = getStageColorByHex(value) ?? {};
+  return /* @__PURE__ */ jsx(
+    SingleSelect,
+    {
+      disabled,
+      error,
+      required,
+      label,
+      onChange: (v) => {
+        onChange(name, v.toString());
+      },
+      value: value?.toUpperCase(),
+      startIcon: /* @__PURE__ */ jsx(
+        Flex,
+        {
+          as: "span",
+          height: 2,
+          background: value,
+          borderColor: themeColorName === "neutral0" ? "neutral150" : "transparent",
+          hasRadius: true,
+          shrink: 0,
+          width: 2
+        }
+      ),
+      children: colorOptions.map(({ value: value2, label: label2, color }) => {
+        const { themeColorName: themeColorName2 } = getStageColorByHex(color) || {};
+        return /* @__PURE__ */ jsx(
+          SingleSelectOption,
+          {
+            value: value2,
+            startIcon: /* @__PURE__ */ jsx(
+              Flex,
+              {
+                as: "span",
+                height: 2,
+                background: color,
+                borderColor: themeColorName2 === "neutral0" ? "neutral150" : "transparent",
+                hasRadius: true,
+                shrink: 0,
+                width: 2
+              }
+            ),
+            children: label2
+          },
+          value2
+        );
+      })
+    }
+  );
+};
+const PermissionsField = ({ disabled, name, placeholder, required }) => {
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const [isApplyAllConfirmationOpen, setIsApplyAllConfirmationOpen] = React.useState(false);
+  const { value = [], error, onChange } = useField(name);
+  const allStages = useForm("PermissionsField", (state) => state.values.stages);
+  const onFormValueChange = useForm("PermissionsField", (state) => state.onChange);
+  const { data: roles = [], isLoading } = useGetRolesQuery();
+  const filteredRoles = roles?.filter((role) => role.code !== "strapi-super-admin") ?? [];
+  React.useEffect(() => {
+    if (!isLoading && roles.length === 0) {
+      toggleNotification({
+        blockTransition: true,
+        type: "danger",
+        message: formatMessage({
+          id: "review-workflows.stage.permissions.noPermissions.description",
+          defaultMessage: "You don’t have the permission to see roles"
+        })
+      });
+    }
+  }, [formatMessage, isLoading, roles, toggleNotification]);
+  if (!isLoading && filteredRoles.length === 0) {
+    return /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        disabled: true,
+        name,
+        hint: formatMessage({
+          id: "Settings.review-workflows.stage.permissions.noPermissions.description",
+          defaultMessage: "You don’t have the permission to see roles"
+        }),
+        label: formatMessage({
+          id: "Settings.review-workflows.stage.permissions.label",
+          defaultMessage: "Roles that can change this stage"
+        }),
+        placeholder: formatMessage({
+          id: "components.NotAllowedInput.text",
+          defaultMessage: "No permissions to see this field"
+        }),
+        required,
+        startAction: /* @__PURE__ */ jsx(StyledIcon, {}),
+        type: "text",
+        value: ""
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-end", gap: 3, children: [
+      /* @__PURE__ */ jsx(PermissionWrapper, { grow: 1, children: /* @__PURE__ */ jsx(
+        MultiSelect,
+        {
+          disabled,
+          error,
+          id: name,
+          label: formatMessage({
+            id: "Settings.review-workflows.stage.permissions.label",
+            defaultMessage: "Roles that can change this stage"
+          }),
+          onChange: (values) => {
+            const permissions = values.map((value2) => ({
+              role: parseInt(value2, 10),
+              action: "admin::review-workflows.stage.transition"
+            }));
+            onChange(name, permissions);
+          },
+          placeholder,
+          required: true,
+          value: value.map((permission) => `${permission.role}`),
+          withTags: true,
+          children: /* @__PURE__ */ jsx(
+            MultiSelectGroup,
+            {
+              label: formatMessage({
+                id: "Settings.review-workflows.stage.permissions.allRoles.label",
+                defaultMessage: "All roles"
+              }),
+              values: filteredRoles.map((r) => `${r.id}`),
+              children: filteredRoles.map((role) => {
+                return /* @__PURE__ */ jsx(NestedOption$1, { value: `${role.id}`, children: role.name }, role.id);
+              })
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          disabled,
+          icon: /* @__PURE__ */ jsx(Duplicate, {}),
+          label: formatMessage({
+            id: "Settings.review-workflows.stage.permissions.apply.label",
+            defaultMessage: "Apply to all stages"
+          }),
+          size: "L",
+          variant: "secondary",
+          onClick: () => setIsApplyAllConfirmationOpen(true)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        isOpen: isApplyAllConfirmationOpen,
+        onClose: () => setIsApplyAllConfirmationOpen(false),
+        onConfirm: () => {
+          onFormValueChange(
+            "stages",
+            allStages.map((stage) => ({
+              ...stage,
+              permissions: value
+            }))
+          );
+          setIsApplyAllConfirmationOpen(false);
+          toggleNotification({
+            type: "success",
+            message: formatMessage({
+              id: "Settings.review-workflows.page.edit.confirm.stages.permissions.copy.success",
+              defaultMessage: "Applied roles to all other stages of the workflow"
+            })
+          });
+        },
+        variant: "default",
+        children: formatMessage({
+          id: "Settings.review-workflows.page.edit.confirm.stages.permissions.copy",
+          defaultMessage: "Roles that can change that stage will be applied to all the other stages."
+        })
+      }
+    )
+  ] });
+};
+const StyledIcon = styled(EyeStriked)`
+  & > path {
+    fill: ${({ theme }) => theme.colors.neutral600};
+  }
+`;
+const NestedOption$1 = styled(MultiSelectOption)`
+  padding-left: ${({ theme }) => theme.spaces[7]};
+`;
+const PermissionWrapper = styled(Flex)`
+  > * {
+    flex-grow: 1;
+  }
+`;
+const WorkflowAttributes = ({ canUpdate = true }) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsxs(Grid, { background: "neutral0", hasRadius: true, gap: 4, padding: 6, shadow: "tableShadow", children: [
+    /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsx(
+      InputRenderer$1,
+      {
+        disabled: !canUpdate,
+        label: formatMessage({
+          id: "Settings.review-workflows.workflow.name.label",
+          defaultMessage: "Workflow Name"
+        }),
+        name: "name",
+        required: true,
+        type: "string"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsx(ContentTypesSelector, { disabled: !canUpdate }) })
+  ] });
+};
+const ContentTypesSelector = ({ disabled }) => {
+  const { formatMessage, locale } = useIntl();
+  const { data: contentTypes, isLoading } = useGetContentTypesQuery();
+  const { workflows } = useReviewWorkflows();
+  const currentWorkflow = useForm("ContentTypesSelector", (state) => state.values);
+  const { error, value, onChange } = useField("contentTypes");
+  const formatter = useCollator(locale, {
+    sensitivity: "base"
+  });
+  const isDisabled = disabled || isLoading || !contentTypes || contentTypes.collectionType.length === 0 && contentTypes.singleType.length === 0;
+  const collectionTypes = (contentTypes?.collectionType ?? []).toSorted((a, b) => formatter.compare(a.info.displayName, b.info.displayName)).map((contentType) => ({
+    label: contentType.info.displayName,
+    value: contentType.uid
+  }));
+  const singleTypes = (contentTypes?.singleType ?? []).map((contentType) => ({
+    label: contentType.info.displayName,
+    value: contentType.uid
+  }));
+  return /* @__PURE__ */ jsx(
+    MultiSelect,
+    {
+      customizeContent: (value2) => formatMessage(
+        {
+          id: "Settings.review-workflows.workflow.contentTypes.displayValue",
+          defaultMessage: "{count} {count, plural, one {content type} other {content types}} selected"
+        },
+        { count: value2?.length }
+      ),
+      disabled: isDisabled,
+      error,
+      label: formatMessage({
+        id: "Settings.review-workflows.workflow.contentTypes.label",
+        defaultMessage: "Associated to"
+      }),
+      onChange: (values) => {
+        onChange("contentTypes", values);
+      },
+      value,
+      placeholder: formatMessage({
+        id: "Settings.review-workflows.workflow.contentTypes.placeholder",
+        defaultMessage: "Select"
+      }),
+      children: [
+        ...collectionTypes.length > 0 ? [
+          {
+            label: formatMessage({
+              id: "Settings.review-workflows.workflow.contentTypes.collectionTypes.label",
+              defaultMessage: "Collection Types"
+            }),
+            children: collectionTypes
+          }
+        ] : [],
+        ...singleTypes.length > 0 ? [
+          {
+            label: formatMessage({
+              id: "Settings.review-workflows.workflow.contentTypes.singleTypes.label",
+              defaultMessage: "Single Types"
+            }),
+            children: singleTypes
+          }
+        ] : []
+      ].map((opt) => {
+        return /* @__PURE__ */ jsx(
+          MultiSelectGroup,
+          {
+            label: opt.label,
+            values: opt.children.map((child) => child.value.toString()),
+            children: opt.children.map((child) => {
+              const { name: assignedWorkflowName } = workflows?.find(
+                (workflow) => (currentWorkflow && workflow.id !== currentWorkflow.id || !currentWorkflow) && workflow.contentTypes.includes(child.value)
+              ) ?? {};
+              return /* @__PURE__ */ jsx(NestedOption, { value: child.value, children: /* @__PURE__ */ jsx(Typography, {
+                // @ts-expect-error - formatMessage options doesn't expect to be a React component but that's what we need actually for the <i> and <em> components
+                children: formatMessage(
+                  {
+                    id: "Settings.review-workflows.workflow.contentTypes.assigned.notice",
+                    defaultMessage: "{label} {name, select, undefined {} other {<i>(assigned to <em>{name}</em> workflow)</i>}}"
+                  },
+                  {
+                    label: child.label,
+                    name: assignedWorkflowName,
+                    em: (...children) => /* @__PURE__ */ jsx(Typography, { as: "em", fontWeight: "bold", children }),
+                    i: (...children) => /* @__PURE__ */ jsx(ContentTypeTakeNotice, { children })
+                  }
+                )
+              }) }, child.value);
+            })
+          },
+          opt.label
+        );
+      })
+    }
+  );
+};
+const NestedOption = styled(MultiSelectOption)`
+  padding-left: ${({ theme }) => theme.spaces[7]};
+`;
+const ContentTypeTakeNotice = styled(Typography)`
+  font-style: italic;
+`;
+const WORKFLOW_SCHEMA = yup.object({
+  contentTypes: yup.array().of(yup.string()),
+  name: yup.string().max(255, {
+    id: "review-workflows.validation.name.max-length",
+    defaultMessage: "Name can not be longer than 255 characters"
+  }).required(),
+  stages: yup.array().of(
+    yup.object().shape({
+      name: yup.string().required({
+        id: "review-workflows.validation.stage.name",
+        defaultMessage: "Name is required"
+      }).max(255, {
+        id: "review-workflows.validation.stage.max-length",
+        defaultMessage: "Name can not be longer than 255 characters"
+      }).test(
+        "unique-name",
+        {
+          id: "review-workflows.validation.stage.duplicate",
+          defaultMessage: "Stage name must be unique"
+        },
+        (stageName, context) => {
+          const { stages } = context.from[1].value;
+          return stages.filter((stage) => stage.name === stageName).length === 1;
+        }
+      ),
+      color: yup.string().required({
+        id: "review-workflows.validation.stage.color",
+        defaultMessage: "Color is required"
+      }).matches(/^#(?:[0-9a-fA-F]{3}){1,2}$/i),
+      permissions: yup.array(
+        yup.object({
+          role: yup.number().strict().typeError({
+            id: "review-workflows.validation.stage.permissions.role.number",
+            defaultMessage: "Role must be of type number"
+          }).required(),
+          action: yup.string().required({
+            id: "review-workflows.validation.stage.permissions.action.required",
+            defaultMessage: "Action is a required argument"
+          })
+        })
+      ).strict()
+    })
+  ).min(1)
+});
+const EditPage = () => {
+  const { id = "" } = useParams();
+  const isCreatingWorkflow = id === "create";
+  const { formatMessage } = useIntl();
+  const { _unstableFormatValidationErrors: formatValidationErrors } = useAPIErrorHandler();
+  const navigate = useNavigate();
+  const { toggleNotification } = useNotification();
+  const dispatch = useDispatch();
+  const {
+    isLoading: isLoadingWorkflow,
+    meta,
+    workflows,
+    error,
+    update,
+    create
+  } = useReviewWorkflows({ id: isCreatingWorkflow ? void 0 : id });
+  const permissions = useTypedSelector(
+    (state) => state.admin_app.permissions["settings"]?.["review-workflows"]
+  );
+  const {
+    allowedActions: { canDelete, canUpdate, canCreate }
+  } = useRBAC(permissions);
+  const [savePrompts, setSavePrompts] = React.useState({});
+  const { getFeature, isLoading: isLicenseLoading } = useLicenseLimits();
+  const [showLimitModal, setShowLimitModal] = React.useState(null);
+  const currentWorkflow = workflows?.find((workflow) => workflow.id === parseInt(id, 10));
+  const contentTypesFromOtherWorkflows = workflows?.filter((workflow) => workflow.id !== parseInt(id, 10)).flatMap((workflow) => workflow.contentTypes);
+  const limits = getFeature("review-workflows");
+  const numberOfWorkflows = limits?.[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME];
+  const stagesPerWorkflow = limits?.[CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME];
+  const submitForm = async (data, helpers) => {
+    try {
+      if (!isCreatingWorkflow) {
+        const res = await update(id, {
+          ...data,
+          // compare permissions of stages and only submit them if at least one has
+          // changed; this enables partial updates e.g. for users who don't have
+          // permissions to see roles
+          stages: data.stages.map((stage) => {
+            let hasUpdatedPermissions = true;
+            const serverStage = currentWorkflow?.stages?.find(
+              (serverStage2) => serverStage2.id === stage?.id
+            );
+            if (serverStage) {
+              hasUpdatedPermissions = serverStage.permissions?.length !== stage.permissions?.length || !serverStage.permissions?.every(
+                (serverPermission) => !!stage.permissions?.find(
+                  (permission) => permission.role === serverPermission.role
+                )
+              );
+            }
+            return {
+              ...stage,
+              permissions: hasUpdatedPermissions ? stage.permissions : void 0
+            };
+          })
+        });
+        if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
+          helpers.setErrors(formatValidationErrors(res.error));
+        } else if ("data" in res) {
+          for (const uid of res.data.contentTypes) {
+            dispatch({
+              type: "contentManagerApi/invalidateTags",
+              payload: [
+                {
+                  type: "ContentTypesConfiguration",
+                  id: uid
+                }
+              ]
+            });
+          }
+        }
+      } else {
+        const res = await create(data);
+        if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
+          helpers.setErrors(formatValidationErrors(res.error));
+        } else if ("data" in res) {
+          for (const uid of res.data.contentTypes) {
+            dispatch({
+              type: "contentManagerApi/invalidateTags",
+              payload: [
+                {
+                  type: "ContentTypesConfiguration",
+                  id: uid
+                }
+              ]
+            });
+          }
+          navigate(`../${res.data.id}`);
+        }
+      }
+    } catch (error2) {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: "notification.error",
+          defaultMessage: "An error occurred"
+        })
+      });
+    }
+    setSavePrompts({});
+  };
+  const handleConfirmDeleteDialog = (data, helpers) => async () => {
+    await submitForm(data, helpers);
+  };
+  const handleConfirmClose = () => {
+    setSavePrompts({});
+  };
+  const handleSubmit = async (data, helpers) => {
+    const isContentTypeReassignment = data.contentTypes.some(
+      (contentType) => contentTypesFromOtherWorkflows?.includes(contentType)
+    );
+    const hasDeletedServerStages = !isCreatingWorkflow && !currentWorkflow?.stages.every(
+      (stage) => data.stages.some((newStage) => newStage.id === stage.id)
+    );
+    if (meta && numberOfWorkflows && meta?.workflowCount > parseInt(numberOfWorkflows, 10)) {
+      setShowLimitModal("workflow");
+    } else if (data.stages && stagesPerWorkflow && data.stages.length > parseInt(stagesPerWorkflow, 10)) {
+      setShowLimitModal("stage");
+    } else if (hasDeletedServerStages || isContentTypeReassignment) {
+      if (hasDeletedServerStages) {
+        setSavePrompts((prev) => ({ ...prev, hasDeletedServerStages: true }));
+      }
+      if (isContentTypeReassignment) {
+        setSavePrompts((prev) => ({ ...prev, hasReassignedContentTypes: true }));
+      }
+    } else {
+      await submitForm(data, helpers);
+    }
+  };
+  React.useEffect(() => {
+    if (!isLoadingWorkflow && !isLicenseLoading) {
+      if (meta && numberOfWorkflows && meta?.workflowCount > parseInt(numberOfWorkflows, 10)) {
+        setShowLimitModal("workflow");
+      } else if (currentWorkflow && currentWorkflow.stages && stagesPerWorkflow && currentWorkflow.stages.length > parseInt(stagesPerWorkflow, 10)) {
+        setShowLimitModal("stage");
+      }
+    }
+  }, [
+    currentWorkflow,
+    isLicenseLoading,
+    isLoadingWorkflow,
+    limits,
+    meta,
+    numberOfWorkflows,
+    stagesPerWorkflow
+  ]);
+  const initialValues = React.useMemo(() => {
+    if (isCreatingWorkflow || !currentWorkflow) {
+      return {
+        name: "",
+        stages: [],
+        contentTypes: []
+      };
+    } else {
+      return {
+        name: currentWorkflow.name,
+        stages: addTmpKeysToStages(currentWorkflow.stages),
+        contentTypes: currentWorkflow.contentTypes
+      };
+    }
+  }, [currentWorkflow, isCreatingWorkflow]);
+  if (isLoadingWorkflow) {
+    return /* @__PURE__ */ jsx(Page.Loading, {});
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Page.Error, {});
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DragLayerRendered, {}),
+    /* @__PURE__ */ jsx(
+      Form,
+      {
+        method: isCreatingWorkflow ? "POST" : "PUT",
+        initialValues,
+        validationSchema: WORKFLOW_SCHEMA,
+        onSubmit: handleSubmit,
+        children: ({ modified, isSubmitting, values, setErrors }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Header,
+            {
+              navigationAction: /* @__PURE__ */ jsx(BackButton, {}),
+              primaryAction: canUpdate || canCreate ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  startIcon: /* @__PURE__ */ jsx(Check, {}),
+                  type: "submit",
+                  size: "M",
+                  disabled: !modified || isSubmitting || values.stages.length === 0,
+                  loading: !Boolean(Object.keys(savePrompts).length > 0) && isSubmitting,
+                  children: formatMessage({
+                    id: "global.save",
+                    defaultMessage: "Save"
+                  })
+                }
+              ) : null,
+              subtitle: formatMessage(
+                {
+                  id: "review-workflows.page.subtitle",
+                  defaultMessage: "{count, plural, one {# stage} other {# stages}}"
+                },
+                { count: currentWorkflow?.stages?.length ?? 0 }
+              ),
+              title: currentWorkflow?.name || formatMessage({
+                id: "Settings.review-workflows.create.page.title",
+                defaultMessage: "Create Review Workflow"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsxs(Flex, { alignItems: "stretch", direction: "column", gap: 7, children: [
+            /* @__PURE__ */ jsx(WorkflowAttributes, { canUpdate }),
+            /* @__PURE__ */ jsx(
+              Stages,
+              {
+                canDelete,
+                canUpdate,
+                isCreating: isCreatingWorkflow
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            ConfirmDialog,
+            {
+              isOpen: Object.keys(savePrompts).length > 0,
+              onClose: handleConfirmClose,
+              onConfirm: handleConfirmDeleteDialog(values, { setErrors }),
+              children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 5, children: [
+                savePrompts.hasDeletedServerStages && /* @__PURE__ */ jsx(Typography, { textAlign: "center", variant: "omega", children: formatMessage({
+                  id: "review-workflows.page.delete.confirm.stages.body",
+                  defaultMessage: "All entries assigned to deleted stages will be moved to the previous stage."
+                }) }),
+                savePrompts.hasReassignedContentTypes && /* @__PURE__ */ jsx(Typography, { textAlign: "center", variant: "omega", children: formatMessage(
+                  {
+                    id: "review-workflows.page.delete.confirm.contentType.body",
+                    defaultMessage: "{count} {count, plural, one {content-type} other {content-types}} {count, plural, one {is} other {are}} already mapped to {count, plural, one {another workflow} other {other workflows}}. If you save changes, {count, plural, one {this} other {these}} {count, plural, one {content-type} other {{count} content-types}} will no more be mapped to the {count, plural, one {another workflow} other {other workflows}} and all corresponding information will be removed."
+                  },
+                  {
+                    count: contentTypesFromOtherWorkflows?.filter(
+                      (contentType) => currentWorkflow?.contentTypes?.includes(contentType)
+                    ).length ?? 0
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Typography, { textAlign: "center", variant: "omega", children: formatMessage({
+                  id: "review-workflows.page.delete.confirm.confirm",
+                  defaultMessage: "Are you sure you want to save?"
+                }) })
+              ] })
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      LimitsModal.Root,
+      {
+        isOpen: showLimitModal === "workflow",
+        onClose: () => setShowLimitModal(null),
+        children: [
+          /* @__PURE__ */ jsx(LimitsModal.Title, { children: formatMessage({
+            id: "review-workflows.edit.page.workflows.limit.title",
+            defaultMessage: "You’ve reached the limit of workflows in your plan"
+          }) }),
+          /* @__PURE__ */ jsx(LimitsModal.Body, { children: formatMessage({
+            id: "review-workflows.edit.page.workflows.limit.body",
+            defaultMessage: "Delete a workflow or contact Sales to enable more workflows."
+          }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(LimitsModal.Root, { isOpen: showLimitModal === "stage", onClose: () => setShowLimitModal(null), children: [
+      /* @__PURE__ */ jsx(LimitsModal.Title, { children: formatMessage({
+        id: "review-workflows.edit.page.stages.limit.title",
+        defaultMessage: "You have reached the limit of stages for this workflow in your plan"
+      }) }),
+      /* @__PURE__ */ jsx(LimitsModal.Body, { children: formatMessage({
+        id: "review-workflows.edit.page.stages.limit.body",
+        defaultMessage: "Try deleting some stages or contact Sales to enable more stages."
+      }) })
+    ] })
+  ] });
+};
+const addTmpKeysToStages = (data) => {
+  const keys = generateNKeysBetween(void 0, void 0, data.length);
+  return data.map((datum, index) => ({
+    ...datum,
+    __temp_key__: keys[index]
+  }));
+};
+const ProtectedEditPage = () => {
+  const permissions = useTypedSelector((state) => {
+    const {
+      create = [],
+      update = [],
+      read = []
+    } = state.admin_app.permissions.settings?.["review-workflows"] ?? {};
+    return [...create, ...update, ...read];
+  });
+  return /* @__PURE__ */ jsx(Page.Protect, { permissions, children: /* @__PURE__ */ jsx(EditPage, {}) });
+};
+export {
+  ProtectedEditPage
+};
+//# sourceMappingURL=_id-D4CXKOqG.mjs.map