@capillarytech/creatives-library 1.0.2 → 2.0.0

package/components/organisms/ConfigureWorkflows/WorkflowConfigurationSection.js

@@ -1,1474 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-/**
- *
- * WorkflowConfigurationSection
- *
- */
-
-import React, { useState, useEffect, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import cloneDeep from 'lodash/cloneDeep';
-import findIndex from 'lodash/findIndex';
-import withStyles from 'utils/withStyles';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
-import {
-  validateNumber,
-  validateTitle,
-  formatMessageHandler,
-  getUICompatibleCommChannelsNames,
-} from 'utils/commonUtils';
-
-import { compose, bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import { connect } from 'react-redux';
-import injectSaga from 'utils/injectSaga';
-import injectReducer from 'utils/injectReducer';
-import clearDataOnUnmount from 'utils/clearDataOnUnmount';
-
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapBanner from '@capillarytech/cap-ui-library/CapBanner';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
-import CapError from '@capillarytech/cap-ui-library/CapError';
-import StyledVars from '@capillarytech/cap-ui-library/styled';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CapExpressionEditor from '@capillarytech/cap-ui-library/CapExpressionEditor';
-import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import { getSubRulesetIds } from 'utils/workflow';
-import withErrorBoundary from 'utils/withErrorBoundary';
-
-import messages from './messages';
-import * as style from './style';
-import globalMessages from '../../pages/Cap/messages';
-import Tag from '../../atoms/Tag';
-import CustomTree from '../../molecules/CustomTree';
-import AddActionConditionWorkflow from '../../molecules/AddActionConditionWorkflow';
-import ColorPatch from '../../molecules/ColorPatch';
-import ActionExpression from '../../molecules/ActionExpression';
-import {
-  getActionList,
-  processRuleSetsData,
-  getUpdatedRuleSetByAction,
-  processRuleSetDelete,
-} from './utils';
-import * as actions from './actions';
-import * as tiersActions from '../Tiers/actions';
-import * as programSummaryActions from '../../pages/ProgramSummary/actions';
-import * as capActions from '../../pages/Cap/actions';
-import * as selectors from './selectors';
-import saga from './saga';
-import reducer from './reducer';
-import * as programContext from '../../pages/ProgramSummary/context';
-import {
-  REQUEST,
-  SUCCESS,
-  FAILURE,
-  ACTIONS_MSG_MAP,
-} from '../../pages/App/constants';
-import { makeSelectTrackers } from '../../pages/ProgramSummary/selectors';
-import {
-  makeSelectCap,
-  makeSelectUpsertAction,
-} from '../../pages/Cap/selectors';
-import { makeSelectTiers } from '../Tiers/selectors';
-import {
-  FORWARD,
-  ACTIONS_ICON_MAP,
-  LINEITEM_EXTENDED_FIELD,
-  UPGRADE_SLAB_ACTION,
-  UPGRADE_SLAB_ACTION_STRATEGY,
-} from './constants';
-import WorkflowActions from './WorkflowActions';
-import CreateActionButton from '../../molecules/CreateActionButton';
-import EllipsisText from '../../atoms/EllipsisText';
-import { Flex } from '../../pages/Cap/style';
-import ErrorBoundaryWrapper from '../../molecules/ErrorBoundaryWrapper';
-
-const {
-  makeSelectConfigWorkflow,
-  makeSelectExtendedFields,
-  makeSelectEbillTemplates,
-  makeSelectLabels,
-  makeSelectDeleteAction,
-  makeSelectDeleteCondition,
-  makeSelectExpressionOnUpdate,
-  makeSelectRemountExpEditor,
-} = selectors;
-const { getProgramContext } = programContext;
-const { styles } = style;
-const {
-  CAP_G18,
-  FONT_COLOR_01,
-  CAP_SPACE_04,
-  CAP_SPACE_32,
-  CAP_WHITE,
-  CAP_G09,
-  CAP_PALE_GREY,
-} = StyledVars;
-
-const WorkflowConfigurationSection = ({
-  intl: { formatMessage },
-  actions,
-  className,
-  eventType,
-  setSelectedRuleset,
-  workflowData: {
-    getRulesetsStatus,
-    rulesets = [],
-    upsertRulesetsStatus,
-    getRulesetsByEventTypeStatus,
-    rulesetsByEventType = [],
-    isRulesetsByEventTypeUpdated,
-    getGrammerStatus,
-    grammer = {},
-    getActionDependenciesStatus,
-    actionDependencies = {},
-    createRuleStatus,
-    saveRulesetStatus,
-    clearRulesetCacheStatus,
-  } = {},
-  extendedFieldsData: { extendedFields } = {},
-  trackersData: { getTrackersStatus, trackersDetails = [] } = {},
-  tiers: { getTierStatus, tier = {} } = {},
-  ebillTemplatesData: {
-    ebillTemplates = [],
-    getEbillTemplatesStatus = '',
-  } = {},
-  labelData: { labels = [] },
-  selectedRuleset,
-  processedRuleSets,
-  setProcessedRuleSets,
-  groups,
-  setGroups,
-  pointStrategy = {},
-  pointTypeIdData = {},
-  deleteActionData: { deleteActionStatus } = {},
-  deleteConditionData: { deleteConditionStatus } = {},
-  capActions,
-  eventCategory,
-  actionDetailsData: { upsertActionStatus } = {},
-  exp,
-  setExp,
-  expJSON,
-  setExpJSON,
-  expError,
-  setExpError,
-  selectedRule,
-  setSelectedRule,
-  saveExpression,
-  rules,
-  setRules,
-  expressionOnUpdate: { expressionOnUpdate = {} },
-  isSaveDisabled,
-  setIsSaveDisabled,
-  remountExpEditor: { remountExpEditor = false } = {},
-  addTrackerTags,
-  tiersActions,
-  programSummaryActions,
-  fleetLoyaltyEnabled,
-}) => {
-  const { programId, currentProgram = {} } = getProgramContext();
-  const [actionList, setActionList] = useState(null);
-  const [showActions, setShowActions] = useState(false);
-  const [selectedAction, setSelectedAction] = useState('');
-  const [showAction, setShowAction] = useState(false);
-  const [modifiedGrammer, updateModifiedGrammer] = useState(grammer);
-  const [caseActionData, setCaseActionData] = useState({
-    actionCase: null,
-    action: {},
-  });
-  const [onGoingRequest, updateOnGoingRequest] = useState({});
-  const [localPointStrategy, setLocalPointStrategy] = useState(pointStrategy);
-  const UICompatibleChannels = useMemo(
-    () => {
-      const { commChannels = [] } = tier || {};
-      return getUICompatibleCommChannelsNames(commChannels);
-    },
-    [JSON.stringify(tier)],
-  );
-  const [key, setKey] = useState(0);
-  const [evaluatedTracker, updateEvaluatedTrackers] = useState({});
-  const [showSenderInformation, setShowSenderInformation] = useState(false);
-  const [reverseAnimation, setReverseAnimation] = useState(false);
-  useEffect(
-    () => {
-      try {
-        let grammerUpdateRequired = false;
-        let expUpdateRequired = false;
-        const onGoingRequestTemp = {};
-        const modifiedGrammer = cloneDeep(grammer);
-        const operandsArray = [];
-        const parsedJSON = JSON.parse(expJSON);
-        const findSubsets = opds => {
-          opds.forEach(opd => {
-            if (opd?.arity === 'binary_operation') {
-              findSubsets(opd.operands);
-            } else {
-              operandsArray.push(opd.operands || opd.value);
-            }
-          });
-          return;
-        };
-        if (parsedJSON?.arity === 'binary_operation') {
-          findSubsets(parsedJSON?.operands);
-        } else {
-          operandsArray.push(parsedJSON?.operands);
-        }
-        operandsArray.map(operands => {
-          let detailsValue = [];
-          let grammerMethod;
-          let grammerTypeValue;
-          let grammerType;
-          let grammerFunctionParams;
-          let dependentEnumValue;
-          let dependentEnumType;
-          let poppedValue;
-          let enumIndex = false;
-          let functionIndex = false;
-          let hasFuntion = false;
-          Array.isArray(operands) &&
-            operands?.map((rule, index) => {
-              detailsValue.push(rule);
-              if (rule?.type?.includes('function')) {
-                hasFuntion = true;
-                functionIndex = index;
-              }
-            });
-          if (hasFuntion) {
-            detailsValue.map(({ type, value }, index) => {
-              if (index === 0) {
-                grammerTypeValue = type?.split(':')?.[0];
-                grammerType = grammer?.types?.[type.split(':')?.[0]];
-              }
-              if (functionIndex === 1 && index === 1) {
-                grammerFunctionParams = grammerType.methods[value].def.params;
-                grammerMethod = value;
-              }
-              if (functionIndex + 1 === index) {
-                dependentEnumValue = value;
-              }
-            });
-            if (
-              grammerFunctionParams?.length === 2 &&
-              detailsValue.length >= functionIndex + 1
-            ) {
-              let fundamentalType = grammerFunctionParams[0].type;
-              let enumValues = grammer.types[fundamentalType].values;
-              if (enumValues.includes(dependentEnumValue)) {
-                enumValues.forEach(enumValue => {
-                  let tempindex = grammerFunctionParams[1].type.indexOf(
-                    enumValue,
-                  );
-                  if (tempindex !== -1) enumIndex = true;
-                });
-                let type = grammerFunctionParams[1].type.includes("'")
-                  ? grammerFunctionParams[1].type.split("'")[1]
-                  : enumIndex
-                    ? grammerFunctionParams[1].type.split('__')
-                    : grammerFunctionParams[1].type;
-                if (Array.isArray(type)) {
-                  poppedValue = type.pop();
-                  type.push('');
-                  type = type.join('__');
-                }
-                dependentEnumType = type + dependentEnumValue;
-              }
-            }
-
-            if (
-              dependentEnumType &&
-              dependentEnumValue !== poppedValue &&
-              (dependentEnumType.includes('EDepEnum') ||
-                dependentEnumType.includes('EEnum'))
-            ) {
-              const updatedParams = grammerFunctionParams.map(
-                (param, index) => {
-                  if (index === 1) {
-                    param.type = dependentEnumType;
-                  }
-                  return param;
-                },
-              );
-              modifiedGrammer.types[grammerTypeValue].methods[
-                grammerMethod
-              ].def.params = updatedParams;
-              grammerUpdateRequired = true;
-            }
-          }
-          if (
-            !grammer.types[dependentEnumType] &&
-            enumIndex &&
-            !onGoingRequest[dependentEnumType] &&
-            !onGoingRequestTemp[dependentEnumType]
-          ) {
-            actions.getDependentEnums(programId, dependentEnumType);
-            onGoingRequestTemp[dependentEnumType] = true;
-            expUpdateRequired = true;
-          }
-        });
-        if (grammerUpdateRequired) {
-          updateModifiedGrammer(modifiedGrammer);
-          setKey(key + 1);
-        }
-        if (expUpdateRequired) updateOnGoingRequest(onGoingRequest);
-      } catch (err) {}
-    },
-    [exp, expJSON],
-  );
-
-  const showSpin =
-    getTierStatus === REQUEST ||
-    getGrammerStatus === REQUEST ||
-    getRulesetsStatus === REQUEST ||
-    getTrackersStatus === REQUEST ||
-    upsertRulesetsStatus === REQUEST ||
-    getActionDependenciesStatus === REQUEST ||
-    getEbillTemplatesStatus === REQUEST ||
-    createRuleStatus === REQUEST ||
-    deleteConditionStatus === REQUEST ||
-    saveRulesetStatus === REQUEST ||
-    clearRulesetCacheStatus === REQUEST ||
-    getRulesetsByEventTypeStatus === REQUEST;
-
-  const isAPIError =
-    getRulesetsStatus === FAILURE ||
-    getTrackersStatus === FAILURE ||
-    getTierStatus === FAILURE ||
-    clearRulesetCacheStatus === FAILURE ||
-    getRulesetsByEventTypeStatus === FAILURE;
-
-  useEffect(
-    () => {
-      const isDisabled = showSpin || isAPIError;
-      if (isSaveDisabled !== isDisabled) setIsSaveDisabled(isDisabled);
-    },
-    [showSpin, isAPIError],
-  );
-
-  const onExpressionEditorChange = (expressionJSON, expression, isError) => {
-    setExp(expression);
-    setExpJSON(expressionJSON);
-    setExpError(isError);
-  };
-
-  useEffect(() => {
-    actions.getExtendedFields(LINEITEM_EXTENDED_FIELD, programId);
-    actions.getEbillTemplates();
-    actions.getLabels();
-  }, []);
-
-  useEffect(
-    () => {
-      const modifiedGrammer = cloneDeep(grammer);
-      const ruleset = processedRuleSets?.group[selectedRuleset];
-      if (
-        !ruleset?.internalTrackerType?.includes('LINEITEM') &&
-        !ruleset?.internalShouldUnroll
-      ) {
-        if (modifiedGrammer?.identifiers?.currentLineItem)
-          delete modifiedGrammer.identifiers.currentLineItem;
-        if (modifiedGrammer?.identifiers?.trackerLineItem)
-          delete modifiedGrammer.identifiers.trackerLineItem;
-      } else if (ruleset.internalTrackerType) {
-        if (modifiedGrammer?.identifiers?.trackerLineItem)
-          delete modifiedGrammer.identifiers.trackerLineItem;
-      }
-      setKey(key + 1);
-      updateModifiedGrammer(modifiedGrammer);
-    },
-    [selectedRuleset, JSON.stringify(grammer)],
-  );
-
-  useEffect(
-    () => {
-      setSelectedRuleset('');
-      setSelectedRule({});
-      setActionList(null);
-      setRules([]);
-      actions.getGrammer(eventType);
-      clearRulesetsCache();
-    },
-    [eventType],
-  );
-
-  useEffect(
-    () => {
-      getRulesets();
-      actions.getActionDependencies();
-    },
-    [programId],
-  );
-
-  useEffect(
-    () => {
-      getRulesetsByEventType();
-    },
-    [eventType, programId],
-  );
-
-  const getRulesets = () => actions.getRulesets(programId);
-  const getRulesetsByEventType = () =>
-    actions.getRulesetsByEventType(programId, eventType);
-  const clearRulesetsCache = () =>
-    actions.clearRulesetsCache(programId, eventType);
-  const getTiers = () => tiersActions.getTier(programId);
-  const getTrackersData = () =>
-    programSummaryActions.getTrackersData({ programId });
-
-  useEffect(
-    () => {
-      if (!isEmpty(selectedRule)) {
-        setExp(selectedRule.exp);
-        setExpJSON(selectedRule.expJSON);
-        setExpError(false);
-        setKey(key + 1);
-      }
-    },
-    [JSON.stringify(selectedRule)],
-  );
-
-  useEffect(
-    () => {
-      if (
-        getRulesetsByEventTypeStatus === SUCCESS &&
-        getRulesetsStatus === SUCCESS
-      ) {
-        processWorflowData(rulesets);
-      }
-    },
-    [getRulesetsStatus, getRulesetsByEventTypeStatus],
-  );
-
-  useEffect(
-    () => {
-      if (isRulesetsByEventTypeUpdated === SUCCESS) {
-        processWorflowData(Object.values(processedRuleSets.group));
-      }
-    },
-    [isRulesetsByEventTypeUpdated],
-  );
-
-  useEffect(
-    () => {
-      if (upsertActionStatus === SUCCESS) {
-        closeActions();
-      }
-    },
-    [upsertActionStatus],
-  );
-
-  useEffect(
-    () => {
-      setKey(key + 1);
-    },
-    [JSON.stringify(expressionOnUpdate)],
-  );
-  useEffect(
-    () => {
-      if (remountExpEditor) {
-        setKey(key + 1);
-        actions.resetExpEditor();
-      }
-    },
-    [remountExpEditor],
-  );
-
-  const refreshStrategyData = () => {
-    actions.getStrategyDataWorkflow({ programId }, result => {
-      if (result?.result?.strategyValue) {
-        setLocalPointStrategy(result?.result?.strategyValue);
-        capActions.syncStrategyData(result?.result);
-      }
-    });
-  };
-
-  const processWorflowData = rulesets => {
-    const { groupObj, groupTreeList, evaluatedTrackers } = processRuleSetsData({
-      eventType,
-      rulesets,
-      rulesetsByEventType,
-      trackersDetails,
-      currentProgram,
-    });
-    setGroups([...groupTreeList]);
-    setProcessedRuleSets({
-      group: groupObj,
-    });
-    updateEvaluatedTrackers(evaluatedTrackers);
-  };
-
-  useEffect(
-    () => {
-      if (!selectedRuleset) {
-        onGroupItemClick([groups?.[0]?.key]);
-      }
-    },
-    [processedRuleSets],
-  );
-
-  const onGroupItemClick = groupIds => {
-    const groupId = groupIds?.[0];
-    if (groupId) {
-      saveExpression(groupId);
-      const { group = {} } = processedRuleSets;
-      const { rules } = group[groupId] || {};
-      populateActiveRules(rules);
-      setSelectedRuleset(groupId);
-    }
-  };
-  const populateActiveRules = (
-    activeRules = [],
-    defaultSelectedRuleIndex = 0,
-  ) => {
-    setSelectedRule(
-      !isEmpty(activeRules[defaultSelectedRuleIndex])
-        ? {
-            ...activeRules[defaultSelectedRuleIndex],
-            displayName: getConditionName(defaultSelectedRuleIndex + 1),
-          }
-        : {},
-    );
-    setRules(activeRules);
-  };
-
-  const populateRules = group => {
-    if (group && group[selectedRuleset]) {
-      const { rules } = group[selectedRuleset];
-      populateActiveRules(rules || []);
-    }
-  };
-
-  const onRemoveCondition = ruleId => {
-    // getSubRulesetIds for future reference
-    const dependentRulesetIds =
-      [] ||
-      getSubRulesetIds({
-        processedRuleSets,
-        rulesetIds: selectedRule?.dependentRulesetIds || [],
-      });
-    const payload = {
-      rule_id: ruleId,
-      event_type: eventType,
-      ruleset_id: selectedRuleset,
-      dependentRulesetIds,
-    };
-    actions.deleteCondition(programId, eventType, payload, res => {
-      if (res?.success) {
-        handleDeleteConditionOrAction(dependentRulesetIds, true);
-        CapNotification.success({
-          message: formatMessage(messages.conditionDeletedSuccess),
-        });
-      } else {
-        CapNotification.error({
-          message: formatMessage(globalMessages.errorMessage),
-        });
-      }
-    });
-  };
-
-  const handleConditionAction = ({ createdRule, updateProcessedRulesets }) => {
-    const { group = {} } = updateProcessedRulesets || processedRuleSets;
-    const groupClone = cloneDeep(group);
-    if (groupClone[selectedRuleset]) {
-      const { rules } = groupClone[selectedRuleset];
-      let ruleList = rules || [];
-      if (createdRule) {
-        // RULE CREATION
-
-        // Commented now for future reference
-        // const ruleData = getNewCondition({
-        //   user,
-        //   ruleSetId: selectedRule,
-        // });
-        ruleList.push(createdRule);
-      }
-      groupClone[selectedRuleset].rules = ruleList;
-      populateActiveRules(ruleList, ruleList.length - 1);
-      setProcessedRuleSets({ ...processedRuleSets, group: groupClone });
-    }
-  };
-
-  const onAddCondition = updateProcessedRulesets =>
-    actions.createRule(
-      programId,
-      eventType,
-      selectedRuleset,
-      (res, createdRule) => {
-        if (res?.success) {
-          handleConditionAction({ createdRule, updateProcessedRulesets });
-          CapNotification.success({
-            message: formatMessage(messages.conditionCreatedSuccess),
-          });
-        } else {
-          CapNotification.error({
-            message: formatMessage(globalMessages.errorMessage),
-          });
-        }
-      },
-    );
-
-  const saveExpressionAndCreateCondition = () => {
-    saveExpression(null, onAddCondition);
-  };
-  const onCreateNewRuleSet = () =>
-    actions.upsertRulesets(
-      programId,
-      eventType,
-      { createRootRuleset: true },
-      responseData => {
-        if (!isEmpty(responseData)) {
-          const rulesetList = Array.isArray(responseData)
-            ? responseData
-            : [responseData];
-          rulesetList.map(ruleset => ({ ...ruleset, eventType }));
-          processWorflowData(rulesetList);
-        }
-      },
-    );
-
-  const CreateNewRuleSet = () => (
-    <CapRow className="create-ruleset-container">
-      <CapButton
-        type="flat"
-        isAddBtn
-        onClick={onCreateNewRuleSet}
-        disabled={showSpin}
-      >
-        {formatMessage(messages.createRuleset)}
-      </CapButton>
-    </CapRow>
-  );
-
-  const ConditionExpressionLayout = ({
-    id,
-    changeActive,
-    isActive,
-    name,
-    description,
-    handleClose,
-  }) => (
-    <ColorPatch
-      className="pointer-cursor"
-      onClick={changeActive}
-      height="88px"
-      width="100%"
-      color={isActive ? CAP_PALE_GREY : CAP_WHITE}
-      data-id={id}
-    >
-      <CapHeader
-        titleClass={classnames('condition-patch-header', {
-          selected: isActive,
-        })}
-        size="label"
-        title={name}
-        description={<EllipsisText title={description} />}
-      />
-      <CapIcon
-        onClick={handleClose}
-        disabled={!isActive}
-        className={classnames(
-          'close-icon',
-          'lp-icon-config-workflows-remove-condition',
-        )}
-        type="close"
-      />
-    </ColorPatch>
-  );
-
-  const getSelectedRuleLocal = () => {
-    const ruleIndex = findIndex(
-      processedRuleSets?.group[selectedRuleset]?.rules,
-      {
-        id: selectedRule?.id,
-      },
-    );
-    const selectedRuleLocal =
-      processedRuleSets?.group[selectedRuleset]?.rules[ruleIndex]
-        ?.caseToActions;
-    return {
-      ruleIndex,
-      selectedRuleLocal,
-    };
-  };
-
-  const { caseToActions = {} } =
-    processedRuleSets?.group[selectedRuleset]?.rules[
-      getSelectedRuleLocal().ruleIndex
-    ] || {};
-  const closeWhenConditionHandler = actionCase => {
-    const clonnedProcessedRuleSets = cloneDeep(processedRuleSets);
-    const { ruleIndex } = getSelectedRuleLocal();
-    delete clonnedProcessedRuleSets?.group[selectedRuleset]?.rules[ruleIndex]
-      ?.caseToActions[actionCase];
-    setProcessedRuleSets(clonnedProcessedRuleSets);
-  };
-
-  const toggleActionCase = value => {
-    const clonnedProcessedRuleSets = cloneDeep(processedRuleSets);
-    const { ruleIndex, selectedRuleLocal } = getSelectedRuleLocal();
-    if (Object.keys(selectedRuleLocal || {}).length === 2) {
-      const trueValue = selectedRuleLocal[false];
-      const falseValue = selectedRuleLocal[true];
-      clonnedProcessedRuleSets.group[selectedRuleset].rules[
-        ruleIndex
-      ].caseToActions[true] = trueValue;
-      clonnedProcessedRuleSets.group[selectedRuleset].rules[
-        ruleIndex
-      ].caseToActions[false] = falseValue;
-    } else {
-      clonnedProcessedRuleSets.group[selectedRuleset].rules[
-        ruleIndex
-      ].caseToActions[value] = selectedRuleLocal[!value];
-      delete clonnedProcessedRuleSets.group[selectedRuleset].rules[ruleIndex]
-        .caseToActions[!value];
-    }
-    setProcessedRuleSets(clonnedProcessedRuleSets);
-  };
-
-  const removeActionHandler = (actionCase, action) => {
-    // getSubRulesetIds for future reference
-    const dependentRulesetIds =
-      [] ||
-      getSubRulesetIds({
-        processedRuleSets,
-        rulesetIds: action?.dependentRulesetIds || [],
-      });
-
-    const payload = {
-      action_id: validateNumber(action?.id),
-      case_value: actionCase,
-      rule_id: validateNumber(selectedRule?.id),
-      event_type: eventType,
-      ruleset_id: validateNumber(selectedRuleset),
-      dependentRulesetIds,
-    };
-
-    actions.deleteAction({ payload, programId, eventType }, result => {
-      if (result?.success) {
-        const clonnedProcessedRuleSets = cloneDeep(processedRuleSets);
-        const { ruleIndex, selectedRuleLocal } = getSelectedRuleLocal();
-        const filteredCases = selectedRuleLocal[actionCase].filter(
-          ruleAction => ruleAction.id !== action.id,
-        );
-        clonnedProcessedRuleSets.group[selectedRuleset].rules[
-          ruleIndex
-        ].caseToActions[actionCase] = filteredCases;
-        // DEPENDENT RULESET ID IS ONLY FOR FORWARD TO RULE SET AND TRACKER EVALUATION
-        if (action?.dependentRulesetIds?.length > 0) {
-          handleDeleteConditionOrAction(
-            dependentRulesetIds,
-            false,
-            clonnedProcessedRuleSets,
-          );
-        } else {
-          setProcessedRuleSets(clonnedProcessedRuleSets);
-        }
-      } else {
-        CapNotification.error({
-          message: formatMessage(globalMessages.errorMessage),
-        });
-      }
-    });
-  };
-
-  const addWhenConditionHandler = () => {
-    const clonnedProcessedRuleSets = cloneDeep(processedRuleSets);
-    const { ruleIndex, selectedRuleLocal } = getSelectedRuleLocal();
-    const existingCases = Object.keys(selectedRuleLocal || {});
-    if (existingCases.length === 1 && existingCases[0] === 'true') {
-      clonnedProcessedRuleSets.group[selectedRuleset].rules[
-        ruleIndex
-      ].caseToActions[false] = [];
-    } else {
-      clonnedProcessedRuleSets.group[selectedRuleset].rules[
-        ruleIndex
-      ].caseToActions[true] = [];
-    }
-    setProcessedRuleSets(clonnedProcessedRuleSets);
-  };
-
-  const onAddActionClick = (actionCase, actions = []) => {
-    const existingActionNames = actions.reduce((acc, { actionName }) => {
-      // SKIP FORWARD SETS
-      if (actionName !== FORWARD) {
-        acc.push(actionName);
-      }
-      return acc;
-    }, []);
-    const { group = {} } = processedRuleSets;
-    const filterActionList = getActionList({
-      tier,
-      groups,
-      eventType,
-      currentProgram,
-      actionDependencies,
-      ruleset: group[selectedRuleset],
-    }).filter(actionId => !existingActionNames.includes(actionId));
-    const processedActions = filterActionList
-      .map(actionId => {
-        const iconValue = ACTIONS_ICON_MAP[actionId];
-        const actionMessageId = ACTIONS_MSG_MAP[actionId];
-        const isIcon = typeof iconValue === 'string';
-        const text = formatMessageHandler(
-          formatMessage,
-          globalMessages[actionMessageId],
-          actionMessageId,
-        );
-        return {
-          text,
-          title: (
-            <div
-              className={classnames('truncate-text', 'action-item-text')}
-              title={validateTitle(text)}
-            >
-              {text}
-            </div>
-          ),
-          icon: isIcon ? <CapIcon type={iconValue} /> : iconValue,
-          value: actionId,
-        };
-      })
-      .sort((current, next) => current.text.localeCompare(next.text));
-    setActionList(processedActions);
-    toggleShowActions();
-    setCaseActionData({
-      actionCase,
-      action: {},
-    });
-  };
-
-  const toggleShowActions = () => setShowActions(!showActions);
-
-  const onActionSelect = event => setSelectedAction(event.target.value);
-
-  const onShowAction = () => setShowAction(true);
-
-  const closeActions = () => {
-    setShowAction(false);
-    setShowActions(false);
-    setSelectedAction('');
-  };
-
-  const updateRuleSetByAction = (actionData, res) => {
-    if (res?.success) {
-      const { isEditMode } = actionData || {};
-      const responseData = res?.result || {};
-      const {
-        rules: updatedRuleSets,
-        isNewRuleSet,
-      } = getUpdatedRuleSetByAction(
-        processedRuleSets,
-        actionData,
-        responseData,
-      );
-      if (isNewRuleSet) {
-        const { group = {} } = updatedRuleSets;
-        processWorflowData(Object.values(group));
-      } else {
-        setProcessedRuleSets(updatedRuleSets);
-      }
-      CapNotification.success({
-        message: formatMessage(
-          isEditMode
-            ? globalMessages.editedSuccessfully
-            : globalMessages.createdSuccessfully,
-        ),
-      });
-    } else {
-      CapNotification.error({
-        message: formatMessage(globalMessages.errorMessage),
-      });
-    }
-  };
-
-  const handleHideSenderInformation = value => {
-    setShowSenderInformation(value);
-    if (value) setReverseAnimation(value);
-  };
-
-  useEffect(
-    () => {
-      if (reverseAnimation && !showSenderInformation)
-        setTimeout(() => {
-          setReverseAnimation(false);
-        }, 800);
-    },
-    [showSenderInformation],
-  );
-
-  const getActionProps = () => {
-    let propData = {};
-    let actionId = -1;
-    let additionProps = {};
-    const { actionCase, action, isEditMode = false } = caseActionData;
-    if (!isEmpty(action)) {
-      const { id, mandatoryPropertiesValues = {} } = action;
-      actionId = id;
-      propData = { ...mandatoryPropertiesValues };
-    }
-
-    if (selectedAction === UPGRADE_SLAB_ACTION_STRATEGY) {
-      const { tierUpgrade = [] } = tier || {};
-      additionProps.slabUpgradeStrategyId = tierUpgrade?.[0]?.id;
-    }
-
-    const { group = {} } = processedRuleSets;
-    return {
-      actionData: {
-        groups,
-        ...propData,
-        programId,
-        action_id: validateNumber(actionId),
-        event_type: eventType,
-        rule_id: validateNumber(selectedRule?.id),
-        case_value: actionCase,
-        ruleset_id: validateNumber(selectedRuleset),
-        actionType: selectedAction,
-        ruleset: group[selectedRuleset] || {},
-        isEditMode,
-        UICompatibleChannels,
-        addTrackerTags,
-        showSenderInformation,
-        setShowSenderInformation: handleHideSenderInformation,
-        ...additionProps,
-      },
-      eventType,
-      updateRuleSet: updateRuleSetByAction,
-      closeSlidebox: closeActions,
-      errorWrapperSlideBoxClose: closeActions,
-    };
-  };
-  const getConditionName = (index = '') =>
-    `${formatMessage(globalMessages.condition)} ${index}`;
-
-  const handleDeleteConditionOrAction = (
-    dependentRulesetIds,
-    isConditionDelete,
-    updatedRuleSets,
-  ) => {
-    const group = processRuleSetDelete({
-      processedRuleSets: updatedRuleSets || processedRuleSets,
-      dependentRulesetIds,
-      ruleId: selectedRule?.id,
-      rulesetId: selectedRuleset,
-      isConditionDelete,
-    });
-    processWorflowData(Object.values(group));
-    if (isConditionDelete) {
-      populateRules(group);
-    }
-  };
-
-  const getForwardToRulesetActionData = action => {
-    let { description, dependentRulesetIds } = action;
-    const dependentRulesetId =
-      Array.isArray(dependentRulesetIds) && dependentRulesetIds?.[0];
-    if (dependentRulesetId) {
-      const { group = {} } = processedRuleSets;
-      description = group?.[dependentRulesetId]?.displayName || description;
-    }
-    return { description, dependentRulesetId };
-  };
-
-  const showActionSpinner = deleteActionStatus === REQUEST;
-
-  const onRefreshClick = () => {
-    if (getRulesetsByEventTypeStatus === FAILURE) {
-      getRulesetsByEventType();
-    }
-    if (getRulesetsStatus === FAILURE) {
-      getRulesets();
-    }
-    if (getTrackersStatus === FAILURE) {
-      getTrackersData();
-    }
-    if (getTierStatus === FAILURE) {
-      getTiers();
-    }
-    if (clearRulesetCacheStatus === FAILURE) {
-      clearRulesetsCache();
-    }
-  };
-
-  return (
-    <CapSpin spinning={showSpin}>
-      {!['Behavioral', 'Target Loyalty'].includes(eventCategory) ? (
-        <ErrorBoundaryWrapper
-          useStyle
-          isApiErrorBoundary
-          onRefreshClick={onRefreshClick}
-          isApiError={isAPIError}
-        >
-          <CapRow className={className}>
-            <CapRow className="workflow-configuration-container">
-              <CapColumn span={4} className="groups-column">
-                <CapRow className="event-view-headers">
-                  {formatMessage(messages.groups)}
-                </CapRow>
-                <CapColumn
-                  className={classnames(
-                    'groups-column-content',
-                    'custom-scroll',
-                  )}
-                >
-                  {groups.length > 0 ? (
-                    <CustomTree
-                      treeData={groups}
-                      onSelect={onGroupItemClick}
-                      selectedKeys={[selectedRuleset]}
-                      showSwither={false}
-                    />
-                  ) : (
-                    <CreateNewRuleSet />
-                  )}
-                </CapColumn>
-              </CapColumn>
-              <CapColumn span={5} className="groups-column">
-                <CapRow className="event-view-headers">
-                  {formatMessage(messages.allConditions)}
-                </CapRow>
-                <Flex className="workflow-condition-container">
-                  <CapColumn
-                    className={classnames('condition-column', 'custom-scroll')}
-                  >
-                    {rules.map((rule, idx) => {
-                      const { id, exp } = rule;
-                      const displayName = getConditionName(idx + 1);
-                      function handleClose(event) {
-                        onRemoveCondition(id);
-                        event.stopPropagation();
-                      }
-                      function handleActiveChange() {
-                        saveExpression();
-                        setSelectedRule({ ...rule, displayName });
-                      }
-                      return (
-                        <ConditionExpressionLayout
-                          description={`${exp}`}
-                          handleClose={handleClose}
-                          isActive={selectedRule?.id === id}
-                          changeActive={handleActiveChange}
-                          key={`condition-expression-${id}`}
-                          name={displayName}
-                          id={id}
-                        />
-                      );
-                    })}
-                  </CapColumn>
-                  <CapRow className="workflow-add-button-container">
-                    <CreateActionButton
-                      buttonText={formatMessage(globalMessages.condition)}
-                      buttonAction={saveExpressionAndCreateCondition}
-                      buttonClassName="lp-btn-config-workflows-add-condition"
-                    />
-                  </CapRow>
-                </Flex>
-              </CapColumn>
-              <CapColumn span={15} className="groups-column">
-                <CapRow className="event-view-headers">
-                  {selectedRule?.displayName || getConditionName()}
-                </CapRow>
-                {selectedRule?.id && (
-                  <Flex className="workflow-condition-container">
-                    <CapRow
-                      className={classnames(
-                        'expression-editor-container',
-                        'custom-scroll',
-                      )}
-                    >
-                      <CapHeading type="h4" className="expression-heading">
-                        {formatMessage(messages.expression)}
-                      </CapHeading>
-                      <>
-                        {showSpin ? (
-                          <CapInput
-                            className="rule-editior"
-                            value={exp}
-                            disabled
-                          />
-                        ) : Object.keys(modifiedGrammer || {}).length === 0 ? (
-                          <>
-                            <CapAlert
-                              className="rule-editior"
-                              style={{ maxWidth: '396px' }}
-                              message={
-                                <FormattedMessage {...messages.emfAlert} />
-                              }
-                              type="warning"
-                            />
-                            <CapInput
-                              className="rule-editior"
-                              defaultValue={exp}
-                              disabled
-                            />
-                          </>
-                        ) : (
-                          <>
-                            <CapSpin
-                              spinning={
-                                expressionOnUpdate[(selectedRule?.id)] || false
-                              }
-                            >
-                              <CapExpressionEditor
-                                key={key}
-                                className={classnames(
-                                  'rule-editior',
-                                  'lp-config-workflows-rule-editor',
-                                )}
-                                grammar={modifiedGrammer}
-                                onChange={onExpressionEditorChange}
-                                expression={exp}
-                              />
-                              {expError && (
-                                <CapError
-                                  style={{ marginTop: `${CAP_SPACE_04}` }}
-                                  type="error"
-                                >
-                                  <FormattedMessage
-                                    {...messages.expressionErrorMessage}
-                                  />
-                                </CapError>
-                              )}
-                            </CapSpin>
-                          </>
-                        )}
-                      </>
-                    </CapRow>
-                    <CapRow
-                      className={classnames(
-                        'action-list-container',
-                        'custom-scroll',
-                      )}
-                    >
-                      {Object.keys(caseToActions || []).map((actionCase, i) => {
-                        function handleAddActionClick() {
-                          onAddActionClick(
-                            actionCase,
-                            caseToActions[actionCase],
-                          );
-                        }
-
-                        return (
-                          <CapRow key={`when-condition-${i}`}>
-                            <CapRow>
-                              <CapRow className="optional-text-when">
-                                <ColorPatch
-                                  height={CAP_SPACE_32}
-                                  color={CAP_G09}
-                                  align="center"
-                                >
-                                  <CapHeading>
-                                    {formatMessage(globalMessages.when)}
-                                  </CapHeading>
-                                  <CapRow>
-                                    <CapIcon
-                                      className={classnames(
-                                        'close-icon',
-                                        'lp-icon-config-workflows-remove-when',
-                                      )}
-                                      onClick={() =>
-                                        closeWhenConditionHandler(actionCase)
-                                      }
-                                      type="close"
-                                    />
-                                  </CapRow>
-                                </ColorPatch>
-                              </CapRow>
-                              <CapColumn
-                                className="expression-option-container"
-                                span={20}
-                              >
-                                <CapHeading>
-                                  {formatMessage(globalMessages.expressionIs)}
-                                </CapHeading>
-                                <Tag
-                                  className="expression-tag-content"
-                                  tagText={formatMessage(globalMessages.true)}
-                                  background={
-                                    actionCase == 'true' ? CAP_G18 : CAP_WHITE
-                                  }
-                                  font={FONT_COLOR_01}
-                                  height={CAP_SPACE_32}
-                                  onClick={() =>
-                                    actionCase == 'false' &&
-                                    toggleActionCase(true)
-                                  }
-                                  border
-                                  borderColor={CAP_G18}
-                                />
-                                <Tag
-                                  className="expression-tag-content"
-                                  tagText={formatMessage(globalMessages.false)}
-                                  background={
-                                    actionCase == 'false' ? CAP_G18 : CAP_WHITE
-                                  }
-                                  font={FONT_COLOR_01}
-                                  height={CAP_SPACE_32}
-                                  onClick={() =>
-                                    actionCase == 'true' &&
-                                    toggleActionCase(false)
-                                  }
-                                  border
-                                  borderColor={CAP_G18}
-                                />
-                              </CapColumn>
-                            </CapRow>
-                            <CapRow>
-                              <CapSpin spinning={showActionSpinner}>
-                                <CapColumn offset={1} span={23}>
-                                  {(caseToActions[actionCase] || []).map(
-                                    (action, i) => {
-                                      let {
-                                        actionName,
-                                        description,
-                                        id,
-                                      } = action;
-                                      let dependentRulesetId = '';
-                                      if (actionName === UPGRADE_SLAB_ACTION) {
-                                        actionName = action?.actionType;
-                                      } else if (actionName === FORWARD) {
-                                        const {
-                                          description: forwardDescription,
-                                          dependentRulesetId: forwardDependentRulesetId,
-                                        } = getForwardToRulesetActionData(
-                                          action,
-                                        );
-                                        description = forwardDescription;
-                                        dependentRulesetId = forwardDependentRulesetId;
-                                      }
-
-                                      function handleEditActionClick() {
-                                        setCaseActionData({
-                                          actionCase,
-                                          action,
-                                          isEditMode: true,
-                                        });
-                                        setShowAction(true);
-                                        setSelectedAction(actionName);
-                                      }
-
-                                      function handleRemoveActionClick() {
-                                        removeActionHandler(actionCase, action);
-                                      }
-
-                                      function getActionIcon(icon) {
-                                        return typeof ACTIONS_ICON_MAP[icon] ===
-                                          'string' ? (
-                                          <CapIcon
-                                            style={{ color: 'black' }}
-                                            type={ACTIONS_ICON_MAP[icon]}
-                                          />
-                                        ) : (
-                                          ACTIONS_ICON_MAP[icon]
-                                        );
-                                      }
-
-                                      function handleActionContentClick() {
-                                        if (
-                                          actionName === FORWARD &&
-                                          dependentRulesetId
-                                        ) {
-                                          onGroupItemClick([
-                                            `${dependentRulesetId}`,
-                                          ]);
-                                        }
-                                      }
-
-                                      return (
-                                        <ActionExpression
-                                          id={id}
-                                          title={actionName}
-                                          iconType={getActionIcon(actionName)}
-                                          key={`${actionName}-${i}`}
-                                          actionContent={validateTitle(
-                                            description,
-                                          )}
-                                          onRemoveAction={
-                                            handleRemoveActionClick
-                                          }
-                                          onEditAction={handleEditActionClick}
-                                          onClickActionContent={
-                                            handleActionContentClick
-                                          }
-                                        />
-                                      );
-                                    },
-                                  )}
-                                  <CapButton
-                                    className="add-action-button"
-                                    type="flat"
-                                    isAddBtn
-                                    onClick={handleAddActionClick}
-                                  >
-                                    {formatMessage(globalMessages.addAction)}
-                                  </CapButton>
-                                </CapColumn>
-                              </CapSpin>
-                            </CapRow>
-                          </CapRow>
-                        );
-                      })}
-                    </CapRow>
-                    {Object.keys(caseToActions || []).length < 2 && (
-                      <CapRow className="workflow-add-button-container">
-                        <CreateActionButton
-                          buttonText={formatMessage(globalMessages.when)}
-                          buttonAction={addWhenConditionHandler}
-                          buttonClassName="lp-btn-config-workflows-add-when-condition"
-                        />
-                      </CapRow>
-                    )}
-                  </Flex>
-                )}
-              </CapColumn>
-            </CapRow>
-            {showActions && (
-              <AddActionConditionWorkflow
-                panes={actionList}
-                show={showActions}
-                saveSlidebox={onShowAction}
-                currentSelection={selectedAction}
-                closeSlidebox={toggleShowActions}
-                isSaveDisabled={!selectedAction.length}
-                changeCurrentSelection={onActionSelect}
-                errorWrapperSlideBoxClose={toggleShowActions}
-              />
-            )}
-            {showAction &&
-              selectedAction.length && (
-                <div
-                  id="slider-workflow-action"
-                  className={classnames({
-                    'expand-slider': showSenderInformation,
-                    'hide-slider': !showSenderInformation && reverseAnimation,
-                    'lp-config-workflows-actions-container': true,
-                  })}
-                >
-                  <WorkflowActions
-                    props={getActionProps()}
-                    action={selectedAction}
-                    eventType={eventType}
-                    currentProgram={currentProgram}
-                    pointStrategy={localPointStrategy}
-                    trackersDetails={trackersDetails}
-                    extendedFields={extendedFields}
-                    ebillTemplates={ebillTemplates}
-                    labels={labels}
-                    allowedChannels={UICompatibleChannels}
-                    refreshStrategyData={refreshStrategyData}
-                    pointTypeIdData={pointTypeIdData}
-                    evaluatedTracker={evaluatedTracker}
-                    fleetLoyaltyEnabled={fleetLoyaltyEnabled}
-                  />
-                </div>
-              )}
-          </CapRow>
-        </ErrorBoundaryWrapper>
-      ) : (
-        <CapRow style={{ marginBottom: '12px' }}>
-          <CapBanner
-            className="navigation-banner"
-            iconProps={{
-              type: 'warning',
-              size: 'm',
-              svgProps: {
-                fill: '#2466ea',
-              },
-              backgroundProps: {
-                backgroundColor: '#E9F0FC',
-              },
-              withBackground: true,
-            }}
-            bannerContent={
-              <div>
-                <CapLabel type="label1" className="navigation-label">
-                  {formatMessage(messages.PromotionsNotSupportedText)}
-                </CapLabel>
-              </div>
-            }
-          />
-        </CapRow>
-      )}
-    </CapSpin>
-  );
-};
-
-WorkflowConfigurationSection.propTypes = {
-  intl: intlShape.isRequired,
-  className: PropTypes.string,
-  // addScopingAction: PropTypes.func,
-  actions: PropTypes.object,
-  getActionContent: PropTypes.func,
-  workflowData: PropTypes.object,
-  trackersData: PropTypes.object,
-  selectedRuleset: PropTypes.string,
-  processedRuleSets: PropTypes.object,
-  setProcessedRuleSets: PropTypes.func,
-  allowedChannels: PropTypes.array,
-  actionDetailsData: PropTypes.object,
-  eventCategory: PropTypes.string,
-  setIsSaveDisabled: PropTypes.func,
-  isSaveDisabled: PropTypes.bool,
-  fleetLoyaltyEnabled: PropTypes.bool,
-};
-
-WorkflowConfigurationSection.defaultProps = {
-  selectedRuleset: '',
-  processedRuleSets: { group: {} },
-  setProcessedRuleSets: () => {},
-  setIsSaveDisabled: () => {},
-  isSaveDisabled: false,
-};
-
-const mapStateToProps = createStructuredSelector({
-  tiers: makeSelectTiers(),
-  userData: makeSelectCap(),
-  trackersData: makeSelectTrackers(),
-  workflowData: makeSelectConfigWorkflow(),
-  extendedFieldsData: makeSelectExtendedFields(),
-  ebillTemplatesData: makeSelectEbillTemplates(),
-  labelData: makeSelectLabels(),
-  deleteActionData: makeSelectDeleteAction(),
-  deleteConditionData: makeSelectDeleteCondition(),
-  actionDetailsData: makeSelectUpsertAction(),
-  expressionOnUpdate: makeSelectExpressionOnUpdate(),
-  remountExpEditor: makeSelectRemountExpEditor(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    capActions: bindActionCreators(capActions, dispatch),
-    tiersActions: bindActionCreators(tiersActions, dispatch),
-    programSummaryActions: bindActionCreators(programSummaryActions, dispatch),
-  };
-}
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-const withSaga = injectSaga({ key: 'configureWorkflow', saga });
-const withReducer = injectReducer({ key: 'configureWorkflow', reducer });
-
-export default withErrorBoundary(
-  compose(
-    withSaga,
-    withReducer,
-    withConnect,
-  )(
-    injectIntl(
-      clearDataOnUnmount(withStyles(WorkflowConfigurationSection, styles)),
-    ),
-  ),
-  { useStyle: true },
-);