@capillarytech/creatives-library 1.0.0 → 1.0.1-alpha.0

package/components/organisms/ConfigureWorkflows/WorkflowConfigurationSection.js

@@ -0,0 +1,2594 @@
+/* eslint-disable react/no-array-index-key */
+/**
+ *
+ * WorkflowConfigurationSection
+ *
+ */
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+  useRef,
+} 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 { withRouter } from 'react-router-dom';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { v4 as uuidv4 } from 'uuid';
+import { compose, bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import { connect } from 'react-redux';
+import moment from 'moment';
+import { request, getAPICallObject } from '../../../services/api';
+
+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 CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import StyledVars from '@capillarytech/cap-ui-library/styled';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import CapExpressionEditor from '@capillarytech/cap-ui-library/CapExpressionEditor';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import ConfirmationModal from '../../molecules/ConfirmationModal';
+
+import { getSubRulesetIds } from 'utils/workflow';
+import withErrorBoundary from 'utils/withErrorBoundary';
+import injectSaga from 'utils/injectSaga';
+import injectReducer from 'utils/injectReducer';
+import clearDataOnUnmount from 'utils/clearDataOnUnmount';
+
+import  CapAskAira  from '@capillarytech/cap-ui-library/CapAskAira';
+import messages from './messages';
+import * as style from './style';
+import globalMessages from '../../pages/Cap/messages';
+import CustomTree from '../../molecules/CustomTree';
+import AddActionConditionWorkflow from '../../molecules/AddActionConditionWorkflow';
+import {
+  getActionList,
+  processRuleSetsData,
+  getUpdatedRuleSetByAction,
+  processRuleSetDelete,
+  getNewRuleSetInfo,
+  getRulesetsOrRulesetsByEventTypeV2,
+  checkForAlternateCurrencyEventType,
+} from './utils';
+import * as actions from './actions';
+import { targetGroupsActionsMapped as targetGroupsActionsMappedAction } from '../TargetPointAllocationWorkflowAction/actions';
+import * as programSummaryActions from '../../pages/ProgramSummary/actions';
+import * as programSummaryContext from '../../pages/ProgramSummary/context';
+import * as capActions from '../../pages/Cap/actions';
+import * as selectors from './selectors';
+import { makeSelectTargetGroups } from '../TargetPointAllocationWorkflowAction/selectors';
+import saga from './saga';
+import targetPointAllocationWorkflowSaga from '../TargetPointAllocationWorkflowAction/saga';
+import reducer from './reducer';
+import targetPointAllocationWorkflowReducer from '../TargetPointAllocationWorkflowAction/reducer';
+import {
+  REQUEST,
+  SUCCESS,
+  FAILURE,
+  ACTIONS_MSG_MAP,
+  SOURCE_LOYALTY,
+  SOURCE_PROMOTION,
+  HIDE_SCOPE_FOR_EVENT,
+  // LOYALTY_PROMOTION_ENABLED,
+  MODE_CONFIGURE,
+  TRACKER_SOURCE_VALUE,
+  POINTSENGINE_ENDPOINT,
+  ENABLE_PROGRAM_VERSIONING,
+  DRAFT,
+  LIVE,
+  MODE_VIEW,
+  SUPPORT_QUANTITY_FEATURE,
+  CREATE,
+  EDIT,
+  VIEW,
+  CDN_BASE_URL,
+  DESC,
+  CDN_BUCKET_PATH,
+  CDN_TRANSFORM_SUFFIX,
+} from '../../pages/App/constants';
+import {
+  components as components_constants,
+  type,
+} from '../../pages/Cap/constants';
+import {
+  makeSelectOrgConfigDetails,
+  makeSelectTrackers,
+} from '../../pages/ProgramSummary/selectors';
+import {
+  makeSelectCap,
+  makeSelectUpsertAction,
+  makeSelectTiers,
+  makeSelectAlternateCurrencyFlagStatus,
+} from '../../pages/Cap/selectors';
+import {
+  FORWARD,
+  ACTIONS_ICON_MAP,
+  UPGRADE_SLAB_ACTION_STRATEGY,
+  DEFAULT_PROMOTION_DESCRIPTION,
+  RETURN_BILL_ACTION,
+  REEVALUATE_REGULAR_BILL,
+  RENEW_SLAB_ACTION,
+  UPGRADE_SLAB_ACTION_SLAB,
+  UPGRADE_SLAB_ACTION,
+  CAPPING_UPPERCASE,
+  SCOPE_UPPERCASE,
+  POINTS_REDEEMED_ALL_REGEX,
+  POINTS_REDEEMED_VALID_REGEX,
+  STATUS,
+  CONVERT_POINTS_TO_REWARD_ACTION,
+  BADGES_UI_ENABLED,
+  BADGE_EARN_ACTION,
+  ISSUE_PROMOTION_ACTION,
+  EARN_PROMOTION_ACTION,
+  ENABLE_PROMOTION_TYPE,
+  ISSUE_ALTERNATE_CURRENCY,
+  TRANSACTION_ADD,
+  TARGET_COMPLETED,
+  ENABLE_ADVANCE_LOYALTY_PROMOTIONS,
+  ENROLL_IN_PROMOTION,
+  ACTIONS_TO_CONFIRM_BEFORE_DELETE,
+  BADGE,
+  AWARD_TARGET_POINTS_ACTION,
+  AWARD_REFEREE_POINTS_ACTION,
+  AWARD_REFERRER_POINTS_ACTION
+} from './constants';
+import { AI_RULE_WRITING_DISABLED } from '../NavigationBar/constants';
+
+import WorkflowActions from './WorkflowActions';
+import CreateActionButton from '../../molecules/CreateActionButton';
+import { Flex } from '../../pages/Cap/style';
+import ErrorBoundaryWrapper from '../../molecules/ErrorBoundaryWrapper';
+import ConditionExpressionLayout from '../../molecules/ConditionExpressionLayout';
+import { gtmPush } from '../../../utils/gtmTrackers';
+import { getWorkflowMode } from './context';
+import pointsDefaultImg from '../../../assets/Points.png';
+import ScopeSlidebox from '../ScopeSlidebox';
+import CappingSlidebox from '../CappingSlidebox';
+import ActionExpression from '../ActionExpression';
+import Tag from '../../atoms/Tag';
+import ColorPatch from '../../molecules/ColorPatch';
+import {
+  eventTypesMap,
+  validateNumber,
+  validateTitle,
+  formatMessageHandler,
+  getUICompatibleCommChannelsNames,
+  getHighlightedText,
+  debounceUtil,
+  compressData,
+} from '../../../utils/commonUtils';
+import { notifyHandledException } from '../../../utils/bugsnag';
+import * as Api from '../../../services/api';
+import { badgeOwners } from '../IssueBadgeWorkflowAction/constants';
+const {
+  makeSelectConfigWorkflow,
+  makeSelectEbillTemplates,
+  makeSelectDeleteAction,
+  makeSelectDeleteCondition,
+  makeSelectExpressionOnUpdate,
+  makeSelectRemountExpEditor,
+  makeSelectToggleOnAction,
+  makeSelectIsScrolling,
+  makeSelectDynamicWidth,
+  makeSelectAlternateCurrencyList,
+} = selectors;
+const { styles } = style;
+const {
+  CAP_G18,
+  FONT_COLOR_01,
+  CAP_SPACE_04,
+  CAP_SPACE_32,
+  CAP_WHITE,
+  CAP_G09,
+} = StyledVars;
+const { getProgramContext } = programSummaryContext;
+import penguin from '../../../assets/penguin.svg';
+
+export const WorkflowConfigurationSection = props => {
+  const {
+    /** Injected Props */
+    orgConfigDetails: {
+      getOrgConfigDetailsStatus,
+      orgConfigDetailsList,
+      getOrgConfigDraftDetailsStatus,
+      orgConfigDraftDetailsList,
+    },
+    match: {
+      params: { programId: paramProgramID, mode },
+    },
+    /** Inejcted Props */
+    isPromotionEditFlow = false,
+    source = SOURCE_LOYALTY,
+    intl: { formatMessage },
+    actions,
+    targetGroupsActionsMappedAction,
+    className,
+    eventType,
+    setSelectedRuleset,
+    showSearch,
+    userData,
+    workflowData: {
+      getRulesetsStatus,
+      rulesets = [],
+      upsertRulesetsStatus,
+      getRulesetsByEventTypeStatus,
+      rulesetsByEventType = [],
+      isRulesetsByEventTypeUpdated,
+      getGrammerStatus,
+      grammer = {},
+      getActionDependenciesStatus,
+      actionDependencies = {},
+      createRuleStatus,
+      saveRulesetStatus,
+      clearRulesetCacheStatus,
+    } = {},
+    trackersData: { getTrackersStatus, trackersDetails = [] } = {},
+    tiers: { getTierStatus, tier = {} } = {},
+    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,
+    programSummaryActions,
+    fleetLoyaltyEnabled,
+    programId,
+    currentProgram = {},
+    isGenericEvent = false,
+    triggerSaveExpression = false,
+    triggerSaveRuleset = false,
+    promotionFormData = {},
+    promotionRulesets = [],
+    getPromotionByIdStatus = '',
+    getPromotionById = () => {},
+    toggleOnAction,
+    setPromotionPayload = () => {},
+    draftDestinationName,
+    isScrolling,
+    dynamicWidth,
+    /** Scope/Cap related props */
+    handleUpdateTrackerCappedSets,
+    areProrateOnOptionsDisabled,
+    billType,
+    alternateCurrencyList: { alternateCurrencyListData = [] } = {},
+    alternateCurrencyFlag: {
+      alternateCurrencyStatus: {
+        value: alternateCurrencyFlagValue = false,
+      } = {},
+    } = {},
+    targetGroupData: { targetGroupsActionsMapped = [] } = {},
+  } = props;
+  const { currentOrgDetails, user: { id: userId = '' } = {} } = userData;
+  const {
+    basic_details: { name: orgName = '' } = {},
+    accessibleFeatures = [],
+  } = currentOrgDetails;
+  const hasProgramVersioningEnabled = accessibleFeatures.includes(
+    ENABLE_PROGRAM_VERSIONING,
+  );
+  const hasBadgesEnabled = accessibleFeatures.includes(BADGES_UI_ENABLED);
+  const hasIssueEarnPromotionActionEnabled = accessibleFeatures.includes(
+    ENABLE_ADVANCE_LOYALTY_PROMOTIONS,
+  );
+  const isAiRuleWritingDisabled = accessibleFeatures?.includes(
+    AI_RULE_WRITING_DISABLED,
+  );
+  /* Commented code to serve as a reference for implementing feature control for Quantity options in the future.
+  const hasQuantityOptionPresent = accessibleFeatures.includes(
+    SUPPORT_QUANTITY_FEATURE,
+  );
+   */
+  const hasQuantityOptionPresent = true;
+  const [isV2FlowEnabled, setIsV2FlowEnabled] = useState(true);
+  /* Commented code to serve as a reference for implementing feature control for promotions in the future. */
+  // const hasNewUIPromotionEnabled = accessibleFeatures.includes(
+  //   LOYALTY_PROMOTION_ENABLED,
+  // );
+  /** End */
+  const hasNewUIPromotionEnabled = true;
+  const toggleOnActionMemo = useMemo(() => toggleOnAction?.toJS(), [
+    toggleOnAction,
+  ]);
+  const [actionList, setActionList] = useState(null);
+
+  const [showActions, setShowActions] = useState(false);
+  const [selectedAction, setSelectedAction] = useState('');
+
+  const [showAction, setShowAction] = useState(false);
+  const [collapse, setCollapse] = useState(true);
+  const [collapseKey, setCollapseKey] = useState(`collapse_${uuidv4()}`);
+  const [modifiedGrammer, updateModifiedGrammer] = useState(grammer);
+  const [caseActionData, setCaseActionData] = useState({
+    actionCase: null,
+    action: {},
+    // by default, the mode of the action is CREATE.
+    mode: CREATE,
+  });
+  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);
+  const [startRuleIdentifier, setStartRuleIdentifier] = useState('');
+  const [setsConditionsSearch, setSetsConditionsSearch] = useState();
+  const [searchCounter, setSearchCounter] = useState(0);
+  const [searchConditionCounter, setSearchConditionCounter] = useState(0);
+  const [searchIndex, setSearchIndex] = useState(1);
+  const [localIsDraftPresent, setLocalIsDraftPresent] = useState(false);
+  // useState variable to track x in pointsRedeemedInPastDays(x)
+  const [isInvalidDays, setIsInvalidDays] = useState(false);
+  const [showUnClaimBadgeConfirmationModal, setShowUnClaimBadgeConfirmationModal] = useState(false);
+
+  let localCounter = 0;
+
+  const { isPreviewMode, maxGroupItemWidth } = getWorkflowMode();
+  let isDraftPresent =
+    orgConfigDraftDetailsList?.length > 0 || localIsDraftPresent;
+  /** Need to add versioning related check*/
+  if (hasProgramVersioningEnabled) {
+    var { version } = getProgramContext() || {};
+  }
+
+  const debouncedWidth = useRef(
+    debounceUtil(value => {
+      actions.setDynamicWidth(value);
+      actions.setIsScrolling(false);
+    }, 50),
+  );
+
+  const handleScroll = e => {
+    if (e.nativeEvent.target.scrollLeft !== dynamicWidth) {
+      if (!isScrolling) {
+        actions.setIsScrolling(true);
+        return;
+      }
+      const value = e.nativeEvent.target.scrollLeft;
+      debouncedWidth.current(value);
+    }
+  };
+
+  useDeepCompareEffect(() => setLocalPointStrategy(pointStrategy), [
+    pointStrategy,
+  ]);
+  useEffect(
+    () => {
+      try {
+        let grammerUpdateRequired = false;
+        let expUpdateRequired = false;
+        const onGoingRequestTemp = {};
+        const modifiedGrammer = cloneDeep(grammer);
+        /** Regex matching for pointsRedeemedInPastDays - Start */
+        let matchesAll;
+        let matches;
+        try {
+          matches = exp?.match(POINTS_REDEEMED_VALID_REGEX);
+          matchesAll = exp?.match(POINTS_REDEEMED_ALL_REGEX);
+        } catch (err) {
+          notifyHandledException(err);
+        }
+        let invalidMatch = false;
+        if (matches?.length !== matchesAll?.length) {
+          setExpError(true);
+          invalidMatch = true;
+        }
+        invalidMatch === true
+          ? setIsInvalidDays(true)
+          : setIsInvalidDays(false);
+        /** Regex matching for pointsRedeemedInPastDays - End */
+        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.forEach(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?.forEach((rule, index) => {
+              detailsValue.push(rule);
+              if (rule?.type?.includes('function')) {
+                hasFuntion = true;
+                functionIndex = index;
+              }
+            });
+          if (hasFuntion) {
+            detailsValue.forEach(({ 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 ||
+    createRuleStatus === REQUEST ||
+    deleteConditionStatus === REQUEST ||
+    saveRulesetStatus === REQUEST ||
+    clearRulesetCacheStatus === REQUEST ||
+    getRulesetsByEventTypeStatus === REQUEST ||
+    getOrgConfigDraftDetailsStatus === REQUEST;
+
+  const isAPIError =
+    getRulesetsStatus === FAILURE ||
+    getTrackersStatus === FAILURE ||
+    getTierStatus === FAILURE ||
+    clearRulesetCacheStatus === FAILURE ||
+    getRulesetsByEventTypeStatus === FAILURE ||
+    getOrgConfigDraftDetailsStatus === FAILURE ||
+    (hasProgramVersioningEnabled
+      ? getOrgConfigDetailsStatus === FAILURE
+      : false);
+
+  useEffect(
+    () => {
+      const isDisabled = showSpin || isAPIError;
+      if (isSaveDisabled !== isDisabled) setIsSaveDisabled(isDisabled);
+    },
+    [showSpin, isAPIError],
+  );
+
+  const onExpressionEditorChange = (expressionJSON, expression, isError) => {
+    setExp(expression);
+    setExpJSON(expressionJSON);
+    setExpError(isError);
+  };
+
+  useEffect(
+    () => {
+      if (!isPromotionEditFlow && source === SOURCE_PROMOTION) {
+        onCreateNewRuleSet();
+      } else {
+        processWorflowData(promotionRulesets);
+        setStartRuleIdentifier(promotionRulesets?.[0]?.name);
+      }
+      if (isGenericEvent) {
+        actions.getEvents();
+      }
+    },
+    [
+      JSON.stringify(promotionRulesets),
+      source,
+      isGenericEvent,
+      isPromotionEditFlow,
+    ],
+  );
+
+  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, programId);
+      clearRulesetsCache();
+    },
+    [eventType],
+  );
+
+  const getRulesets = queryParams =>
+    actions.getRulesets(programId, queryParams,eventType,null,false);
+
+  const getRulesetsV2 = queryParams =>
+    actions.getRulesets(programId, queryParams,eventType,null,true);
+
+  const getRulesetsByEventType = queryParams =>
+    actions.getRulesetsByEventType(programId, eventType, queryParams);
+
+  const getTiers = useCallback(() => capActions.getTier(programId), [
+    programId,
+    capActions,
+  ]);
+
+  useEffect(
+    () => {
+      if (programId !== undefined && !STATUS[getTierStatus]) {
+        getTiers();
+      }
+    },
+    [programId, getTierStatus, getTiers],
+  );
+
+  useEffect(
+    () => {
+      if(!isV2FlowEnabled){
+      if (
+        (mode === MODE_CONFIGURE || mode === MODE_VIEW) &&
+        source !== SOURCE_PROMOTION &&
+        getOrgConfigDraftDetailsStatus === SUCCESS &&
+        !version
+      ) {
+        getRulesets({
+          programId,
+          status: mode === MODE_CONFIGURE && isDraftPresent ? DRAFT : LIVE,
+          endpointName: POINTSENGINE_ENDPOINT,
+        });
+        return;
+      }
+      if (
+        mode !== MODE_CONFIGURE &&
+        getOrgConfigDetailsStatus === SUCCESS &&
+        version !== null
+      ) {
+        getRulesetsOrRulesetsByEventTypeV2(
+          mode,
+          version,
+          programId,
+          getRulesets,
+          orgConfigDetailsList,
+        );
+      }
+    }
+    },
+    [
+      programId,
+      mode,
+      version,
+      source,
+      getOrgConfigDraftDetailsStatus,
+      getOrgConfigDetailsStatus,
+      isV2FlowEnabled
+    ],
+  );
+  useEffect(
+    () => {
+      if(isV2FlowEnabled){
+      if (
+        (mode === MODE_CONFIGURE || mode === MODE_VIEW) &&
+        source !== SOURCE_PROMOTION &&
+        getOrgConfigDraftDetailsStatus === SUCCESS &&
+        !version
+      ) {
+        getRulesetsV2({
+          programId,
+          status: mode === MODE_CONFIGURE && isDraftPresent ? DRAFT : LIVE,
+          endpointName: POINTSENGINE_ENDPOINT,
+        });
+        return;
+      }
+      if (
+        mode !== MODE_CONFIGURE &&
+        getOrgConfigDetailsStatus === SUCCESS &&
+        version !== null
+      ) {
+        getRulesetsOrRulesetsByEventTypeV2(
+          mode,
+          version,
+          programId,
+          getRulesetsV2,
+          orgConfigDetailsList,
+          isV2FlowEnabled
+        );
+      }
+    }
+    },
+    [
+      programId,
+      mode,
+      version,
+      source,
+      getOrgConfigDraftDetailsStatus,
+      getOrgConfigDetailsStatus,
+      eventType
+    ],
+  );
+
+  useEffect(() => {
+    actions.getActionDependencies();
+  }, []);
+
+  useEffect(
+    () => {
+      if (
+        alternateCurrencyFlagValue &&
+        alternateCurrencyFlagValue !== 'false'
+      ) {
+        const queryParams = {
+          pageSize: 50,
+          pageNum: 0,
+          sortOrder: DESC,
+        };
+        actions.getCdnTransformationConfig();
+        actions.getAllAlternateCurrency(
+          { pageNumber: 0, programId: paramProgramID || programId },
+          false,
+          queryParams,
+        );
+      }
+    },
+    [alternateCurrencyFlagValue],
+  );
+
+  useEffect(
+    () => {
+      if (
+        (mode === MODE_CONFIGURE || mode === MODE_VIEW) &&
+        source !== SOURCE_PROMOTION &&
+        getOrgConfigDraftDetailsStatus === SUCCESS &&
+        !version
+      ) {
+        getRulesetsByEventType({
+          programId,
+          status: mode === MODE_CONFIGURE && isDraftPresent ? DRAFT : LIVE,
+          endpointName: POINTSENGINE_ENDPOINT,
+          eventType,
+        });
+        return;
+      }
+      if (
+        mode !== MODE_CONFIGURE &&
+        getOrgConfigDetailsStatus === SUCCESS &&
+        version !== null
+      ) {
+        getRulesetsOrRulesetsByEventTypeV2(
+          mode,
+          version,
+          programId,
+          getRulesetsByEventType,
+          orgConfigDetailsList,
+        );
+      }
+    },
+    [
+      eventType,
+      source,
+      version,
+      mode,
+      programId,
+      getOrgConfigDetailsStatus,
+      getOrgConfigDraftDetailsStatus,
+    ],
+  );
+
+  const clearRulesetsCache = () => {
+    if (source !== SOURCE_PROMOTION)
+      actions.clearRulesetsCache(programId, eventType);
+  };
+
+  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);
+        //BELOW BLOCK IS ADDED TO FIX THE EXPRESSION NOT GETTING UPDATED AFTER EVENT SWITCH
+        //TESTED WITH BOTH OLD AND NEW FLOW IN VIEW AND EDIT
+        if (mode !== MODE_VIEW) {
+          setExp('');
+        }
+      }
+    },
+    [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],
+  );
+
+  useDeepCompareEffect(
+    () => {
+      let cappingInfo =
+        processedRuleSets?.group[selectedRuleset]?.cappingInfo || [];
+      if (!isEmpty(cappingInfo)) {
+        cappingInfo.forEach(capping => {
+          if (capping.name === TRACKER_SOURCE_VALUE) {
+            try {
+              const { trackerId } = JSON.parse(capping.propertyValuesJson);
+              handleUpdateTrackerCappedSets(true, selectedRuleset, trackerId);
+            } catch (err) {
+              notifyHandledException(err);
+            }
+          }
+        });
+      }
+    },
+    [processedRuleSets, selectedRuleset],
+  );
+
+  const refreshStrategyData = () => {
+    actions.getStrategyDataWorkflow({ programId }, result => {
+      if (result?.result?.strategyValue) {
+        setLocalPointStrategy(result?.result?.strategyValue);
+        capActions.syncStrategyData(result?.result);
+      }
+    });
+  };
+
+  const processWorflowData = useCallback(
+    rulesets => {
+      const { downloadRuleSet } = actions;
+      const {
+        groupObj,
+        groupTreeList,
+        evaluatedTrackers,
+      } = processRuleSetsData({
+        eventType,
+        rulesets,
+        rulesetsByEventType,
+        trackersDetails,
+        currentProgram,
+        source,
+        downloadRuleSet,
+        // selectedRuleset,
+        draftDestinationName,
+        processWorflowData,
+        setIsV2FlowEnabled,
+      });
+      setGroups([...groupTreeList]);
+      
+      setProcessedRuleSets({
+        group: groupObj,
+      });
+      updateEvaluatedTrackers(evaluatedTrackers);
+    },
+    [
+      currentProgram,
+      eventType,
+      rulesetsByEventType,
+      // selectedRuleset,
+      setGroups,
+      source,
+      setProcessedRuleSets,
+      trackersDetails,
+      draftDestinationName,
+      actions,
+    ],
+  );
+
+  useEffect(
+    () => {
+      if (!selectedRuleset) {
+        onGroupItemClick([groups?.[0]?.key]);
+      }
+    },
+    [processedRuleSets],
+  );
+
+  useEffect(
+    () => {
+      saveExpression();
+    },
+    [triggerSaveExpression],
+  );
+
+  const getPayload = promotionData => {
+    const {
+      [components_constants.createPromotionForm]: {
+        id,
+        name,
+        description,
+        type,
+        startDate,
+        endDate,
+        programId,
+        eventName,
+        isActive,
+        useProportions,
+        promotionType,
+      } = {},
+      [components_constants.promotionAdvancedSettings]: {
+        pointsPerEventLimit,
+        eventsPerMemberLimit,
+        pointsPerMemberLimit,
+        pointsPerPromotionLimit,
+        externalIdentifier,
+        promotionMetadata,
+        isStackable,
+        isExclusive,
+        isAlwaysApply
+      } = {},
+      RULESETS = {},
+    } = promotionData || {};
+    const rulesetInfo = Object.keys(RULESETS).map(key => RULESETS[key]);
+    const payload = {
+      name,
+      description,
+      type,
+      useProportions,
+      startDate: parseInt(moment(startDate).format('x'), 10),
+      endDate: parseInt(
+        moment(endDate)
+          .endOf('day')
+          .format('x'),
+        10,
+      ),
+      isActive,
+      pointsPerEventLimit: pointsPerEventLimit || 0,
+      eventsPerMemberLimit: eventsPerMemberLimit || 0,
+      pointsPerMemberLimit: pointsPerMemberLimit || 0,
+      pointsPerPromotionLimit: pointsPerPromotionLimit || 0,
+      isStackable,
+      isExclusive,
+      isAlwaysApply,
+      programId,
+      eventName,
+      startRuleIdentifier,
+      id: id || `temp_${uuidv4()}`,
+      promotionEvaluationType: 'AFTER_EVENT',
+      sourceId: -1,
+      promotionSourceType: '',
+      promoIdentifer: externalIdentifier,
+      rulesetInfo,
+      promotionMetadata,
+      promotionType,
+    };
+    return payload;
+  };
+
+  useEffect(
+    () => {
+      if (triggerSaveRuleset) {
+        saveExpression(null, updatedPromotionRulesets => {
+          const clonnedPromotionFormData = cloneDeep(promotionFormData);
+          clonnedPromotionFormData['RULESETS'] = (
+            Object.keys(updatedPromotionRulesets?.group || {}) || []
+          ).length
+            ? updatedPromotionRulesets?.group
+            : processedRuleSets?.group;
+          const payload = getPayload(clonnedPromotionFormData);
+          setPromotionPayload(payload);
+        });
+      }
+    },
+    [triggerSaveRuleset],
+  );
+
+  useEffect(
+    () => {
+      if (
+        getRulesetsStatus === SUCCESS &&
+        getOrgConfigDetailsStatus === SUCCESS &&
+        mode !== MODE_CONFIGURE &&
+        source === SOURCE_LOYALTY
+      ) {
+        onGroupItemClick([groups?.[0]?.key]);
+      }
+    },
+    // Ignoring dependencies for mode, source, groups & onGroupItemClick
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getOrgConfigDetailsStatus, getRulesetsStatus, processedRuleSets],
+  );
+
+  const getConditionName = useCallback(
+    (index = '') => `${formatMessage(globalMessages.condition)} ${index}`,
+    [formatMessage],
+  );
+
+  const populateActiveRules = useCallback(
+    (activeRules = [], defaultSelectedRuleIndex = 0) => {
+      setSelectedRule(
+        !isEmpty(activeRules[defaultSelectedRuleIndex])
+          ? {
+              ...activeRules[defaultSelectedRuleIndex],
+              displayName: getConditionName(defaultSelectedRuleIndex + 1),
+            }
+          : {},
+      );
+      setRules(activeRules);
+    },
+    [setRules, setSelectedRule, getConditionName],
+  );
+
+  const onGroupItemClick = useCallback(
+    groupIds => {
+      const groupId = groupIds?.[0];
+      if (groupId) {
+        saveExpression(groupId);
+        const { group = {} } = processedRuleSets;
+        const { rules } = group[groupId] || {};
+        populateActiveRules(rules);
+        setSelectedRuleset(groupId);
+      }
+    },
+    [
+      populateActiveRules,
+      processedRuleSets,
+      saveExpression,
+      setSelectedRuleset,
+    ],
+  );
+
+  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 clonnedProcessedRuleSets = cloneDeep(processedRuleSets);
+    if (source === SOURCE_PROMOTION) {
+      const filteredRules = (
+        clonnedProcessedRuleSets?.group?.[selectedRuleset]?.rules || []
+      ).filter(rule => rule.id !== ruleId);
+      clonnedProcessedRuleSets.group[selectedRuleset].rules = filteredRules;
+      clonnedProcessedRuleSets.group[selectedRuleset].isPristine = false;
+      setProcessedRuleSets(clonnedProcessedRuleSets);
+      handleDeleteConditionOrAction(dependentRulesetIds, true);
+    } else {
+      clonnedProcessedRuleSets.group[selectedRuleset].isPristine = false;
+      handleDeleteConditionOrAction(dependentRulesetIds, true, clonnedProcessedRuleSets);
+      CapNotification.success({
+        message: formatMessage(messages.conditionDeletedSuccess),
+      });
+    }
+  };
+
+  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;
+      groupClone[selectedRuleset].isPristine = false;
+
+      populateActiveRules(ruleList, ruleList.length - 1);
+      setProcessedRuleSets({ ...processedRuleSets, group: groupClone });
+    }
+  };
+
+  const onAddCondition = updateProcessedRulesets =>
+    actions.createRule(
+      {
+        source,
+        allRulesLength: (
+          processedRuleSets?.group?.[selectedRuleset]?.rules || []
+        ).length,
+        userId,
+        programId,
+        eventType,
+        rulesetId: 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 = () => {
+    if (source === SOURCE_PROMOTION) {
+      const createdRuleset = getNewRuleSetInfo({
+        userId,
+        contextId: programId,
+        eventType,
+        orgName,
+      });
+      processWorflowData([createdRuleset]);
+      setStartRuleIdentifier(createdRuleset.name);
+    } else {
+      const compressedAllRulesetsData = compressData(
+        JSON.stringify(Object.values(processedRuleSets.group)),
+      );
+      const compressedEventRulesetsData = compressData(
+        JSON.stringify(
+          rulesetsByEventType.map(data => processedRuleSets?.group?.[data?.id]),
+        ),
+      );
+      actions.upsertRulesets(
+        programId,
+        eventType,
+        {
+          createRootRuleset: true,
+          allRulesetsData: compressedAllRulesetsData,
+          eventRulesetsData: compressedEventRulesetsData,
+        },
+        responseData => {
+          if (!isEmpty(responseData)) {
+            const rulesetList = Array.isArray(responseData)
+            ? responseData
+            : [responseData];
+            rulesetList.map(ruleset => ({ ...ruleset, eventType }));
+            processWorflowData(rulesetList);
+            setLocalIsDraftPresent(true);
+            getRulesets({
+              programId,
+              status: DRAFT,
+              endpointName: POINTSENGINE_ENDPOINT,
+            });
+          }
+        },
+      );
+    }
+  };
+
+  const CreateNewRuleSet = () => (
+    <CapRow className="create-ruleset-container">
+      <CapButton
+        type="flat"
+        isAddBtn
+        onClick={onCreateNewRuleSet}
+        disabled={showSpin || mode !== MODE_CONFIGURE}
+      >
+        {formatMessage(messages.createRuleset)}
+      </CapButton>
+    </CapRow>
+  );
+
+  const getHighlightedTextForConditions = (name, rulesLength = 0) => {
+    let counterObj = { counter: localCounter };
+    const highlightedText = getHighlightedText({
+      searchValue: setsConditionsSearch,
+      originalStr: name,
+      counterObj,
+      searchIndex,
+      isCondition: true,
+      setsCount: searchCounter,
+    });
+    if (counterObj.counter <= rulesLength) {
+      localCounter = counterObj.counter;
+      setSearchConditionCounter(counterObj.counter);
+    }
+    return highlightedText;
+  };
+
+  const getPlainConditionTitle = name => {
+    setSearchConditionCounter(0);
+    localCounter = 0;
+    return name;
+  };
+
+  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];
+    }
+    clonnedProcessedRuleSets.group[selectedRuleset].isPristine = false;
+    setProcessedRuleSets(clonnedProcessedRuleSets);
+  };
+
+  const unClaimBadge = (action) => {
+      const unClaimBadgePayload = {
+        ownerType: action.mandatoryPropertiesValues.ownerType || badgeOwners.LOYALTY,
+        referenceId: action.mandatoryPropertiesValues.referenceId || `${programId}_${eventType}`
+      };
+      const badgeId = action?.mandatoryPropertiesValues?.badgeMetaId;
+    const badgeMetaName = action?.mandatoryPropertiesValues?.badgeMetaName;
+      actions.unClaimBadge(unClaimBadgePayload, badgeId, res => {
+        if (res?.data && isEmpty(res?.errors)) {
+          CapNotification.success({
+            message: formatMessage(messages.badgeUnclaimedSuccessfully, {
+              badgeName: badgeMetaName || BADGE,
+            })
+          });
+        } else {
+          CapNotification.error({ message: res?.errors?.[0]?.message });
+        }
+      });
+  }
+
+  const removeActionHandler = (actionCase, action) => {
+    const dependentRulesetIds = getSubRulesetIds({
+      processedRuleSets,
+      rulesetIds: action?.dependentRulesetIds || [],
+    });
+    if (source === SOURCE_PROMOTION) {
+      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;
+      clonnedProcessedRuleSets.group[selectedRuleset].isPristine = false;
+      setProcessedRuleSets(clonnedProcessedRuleSets);
+      if (dependentRulesetIds.length > 0) {
+        handleDeleteConditionOrAction(
+          dependentRulesetIds,
+          false,
+          clonnedProcessedRuleSets,
+        );
+      }
+      // remove mapped targetGroup from multi select dropdown in promotion creation form
+      if (
+        action?.actionName === AWARD_TARGET_POINTS_ACTION ||
+        action?.actionName.includes(ISSUE_ALTERNATE_CURRENCY)
+      ) {
+        const { TargetGroupId } = action?.mandatoryPropertiesValues;
+        if (targetGroupsActionsMapped?.includes(String(TargetGroupId))) {
+          const updatedTargetGroupsActionsMapped = targetGroupsActionsMapped?.filter(
+            targetGroupId => targetGroupId !== TargetGroupId,
+          );
+          targetGroupsActionsMappedAction(updatedTargetGroupsActionsMapped);
+        }
+      }
+    } else {
+      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;
+
+      clonnedProcessedRuleSets.group[selectedRuleset].isPristine = false;
+
+      // 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);
+      }
+    }
+  };
+
+  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 filterFeatureGatedActions = actionId => {
+    switch (actionId) {
+      case ISSUE_PROMOTION_ACTION:
+      case ENROLL_IN_PROMOTION:
+        return hasIssueEarnPromotionActionEnabled;
+      default:
+        return true;
+    }
+  };
+
+  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],
+      isGenericEvent,
+    }).filter(actionId => !existingActionNames.includes(actionId))
+      .filter(actionId => filterFeatureGatedActions(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,
+        );
+
+        /* Only one of the either RETURN_BILL_ACTION or REEVALUATE_REGULAR_BILL can be selected at a time */
+        let isCardDisabled = false;
+        let tooltipProps = {};
+        let advanceProps = {};
+
+        if ([REEVALUATE_REGULAR_BILL, RETURN_BILL_ACTION].includes(actionId)) {
+          isCardDisabled = Boolean(
+            actions.find(action =>
+              [REEVALUATE_REGULAR_BILL, RETURN_BILL_ACTION].includes(
+                action?.actionName,
+              ),
+            ),
+          );
+          tooltipProps = {
+            title:
+              actionId === REEVALUATE_REGULAR_BILL
+                ? formatMessage(messages.reEvaluateActivityTooltip)
+                : formatMessage(messages.returnBillTooltip),
+            placement: 'bottom',
+            overlayClassName: 're-evaluate-activity-configure-popover',
+            getPopupContainer: trigger => trigger.parentElement,
+          };
+        } else if (actionId === BADGE_EARN_ACTION) {
+          isCardDisabled = !hasBadgesEnabled;
+          tooltipProps = {
+            title: formatMessage(messages.disabledBadges),
+            placement: 'bottom',
+            overlayClassName: 'badge-earn-configure-popover',
+            getPopupContainer: trigger => trigger.parentElement,
+          }
+        }
+          else if (actionId === AWARD_REFEREE_POINTS_ACTION || actionId === AWARD_REFERRER_POINTS_ACTION) {
+            const isSourcePromotion = source === SOURCE_PROMOTION;
+            isCardDisabled = isSourcePromotion;
+            tooltipProps = {
+              title: formatMessage(messages.disabledReferer),
+              placement: 'bottom',
+              overlayClassName: 'referrer-earn-configure-popover',
+              getPopupContainer: trigger => trigger.parentElement,
+            };
+        }
+
+        return {
+          text,
+          title: (
+            <div
+              className={classnames('truncate-text', 'action-item-text')}
+              title={validateTitle(text)}
+            >
+              {text}
+            </div>
+          ),
+          icon: isIcon ? (
+            <CapIcon type={iconValue} className="action-card-icon" />
+          ) : (
+            iconValue
+          ),
+          value: actionId,
+          disabled: isCardDisabled,
+          ...(isCardDisabled && { tooltipProps }),
+          ...(Object.keys(advanceProps).length && { ...advanceProps }),
+        };
+      })
+      .sort((current, next) => current.text.localeCompare(next.text));
+
+    let dynamicProcessedActions = [];
+    if (
+      alternateCurrencyFlagValue &&
+      alternateCurrencyListData?.length > 0 &&
+      checkForAlternateCurrencyEventType(eventType, group[selectedRuleset])
+    ) {
+      const newAlternateCurrencyNames = alternateCurrencyListData?.filter(
+        currency =>
+          actions.every(
+            action =>
+              action.actionName !==
+              `${ISSUE_ALTERNATE_CURRENCY}_${currency.identifier}`,
+          ),
+      );
+      dynamicProcessedActions = newAlternateCurrencyNames
+        ?.map(data => {
+          const iconValue = data?.metaData?.image;
+          const base_url = localStorage.getItem(CDN_BASE_URL);
+          const bucket_url = localStorage.getItem(CDN_BUCKET_PATH);
+          const cdn_suffix = localStorage.getItem(CDN_TRANSFORM_SUFFIX);
+          const imageURL = `${base_url}/${cdn_suffix}/quality=50/${bucket_url}${iconValue}`;
+          const isIcon = typeof iconValue === 'string';
+          const text = formatMessage(globalMessages.alternateCurrencyNameText, {
+            name: data?.name,
+          });
+          return {
+            text,
+            title: (
+              <div
+                className={classnames('truncate-text', 'action-item-text')}
+                title={text}
+              >
+                {text}
+              </div>
+            ),
+            icon: isIcon && (
+              <CapImage src={iconValue != 'no-image' ? imageURL : pointsDefaultImg} className="alternate-card-image" />
+            ),
+            value: `${ISSUE_ALTERNATE_CURRENCY}_${data?.identifier}`,
+            disabled: false,
+          };
+        })
+        .sort((current, next) => current.text.localeCompare(next.text));
+    }
+
+    const finalProcessedActions = [
+      ...processedActions,
+      ...dynamicProcessedActions,
+    ];
+
+    setActionList(finalProcessedActions);
+    toggleShowActions();
+    setCaseActionData({ actionCase, action: {} });
+  };
+
+  const toggleShowActions = () => setShowActions(!showActions);
+
+  const toggleCollapse = () => {
+    setCollapse(!collapse);
+    setCollapseKey(`collapse_${uuidv4()}`);
+  };
+  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,
+        source,
+      );
+      if (isNewRuleSet) {
+        const { group = {} } = updatedRuleSets;
+        processWorflowData(Object.values(group));
+      } else {
+        setProcessedRuleSets(updatedRuleSets);
+      }
+      CapNotification.success({
+        message: formatMessage(
+          isEditMode
+            ? globalMessages.editedSuccessfully
+            : globalMessages.actionAddedSuccessfully,
+        ),
+      });
+      const workflowActions = {
+        actionData,
+        promotionsData: promotionFormData,
+        source,
+      };
+      gtmPush('workflowActions', workflowActions);
+    } 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, mode } = 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,
+        // adding mode here since CONVERT_POINTS_TO_REWARDS needs this in view mode
+        mode,
+        // adding selectedRule here since CONVERT_POINTS_TO_REWARDS ALWAYS needs this in view mode
+        selectedRule,
+        UICompatibleChannels,
+        addTrackerTags,
+        showSenderInformation,
+        setShowSenderInformation: handleHideSenderInformation,
+        ...additionProps,
+        areProrateOnOptionsDisabled,
+        billType,
+      },
+      eventType,
+      updateRuleSet: updateRuleSetByAction,
+      closeSlidebox: closeActions,
+      errorWrapperSlideBoxClose: closeActions,
+      source,
+      currentProgram,
+    };
+  };
+
+  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({
+        programId,
+        status: isDraftPresent ? DRAFT : LIVE,
+        endpointName: POINTSENGINE_ENDPOINT,
+        eventType,
+      });
+    }
+    if (source !== SOURCE_PROMOTION && getRulesetsStatus === FAILURE) {
+      if (isV2FlowEnabled)
+        getRulesetsV2({
+          programId,
+          status: isDraftPresent ? DRAFT : LIVE,
+          endpointName: POINTSENGINE_ENDPOINT,
+        });
+      else
+        getRulesets({
+          programId,
+          status: isDraftPresent ? DRAFT : LIVE,
+          endpointName: POINTSENGINE_ENDPOINT,
+        });
+    }
+    if (getTrackersStatus === FAILURE) {
+      getTrackersData();
+    }
+    if (getTierStatus === FAILURE) {
+      getTiers();
+    }
+    if (clearRulesetCacheStatus === FAILURE) {
+      clearRulesetsCache();
+    }
+    if (source === SOURCE_PROMOTION && getPromotionByIdStatus === FAILURE) {
+      getPromotionById();
+    }
+    if (
+      getOrgConfigDraftDetailsStatus === FAILURE ||
+      getOrgConfigDetailsStatus === FAILURE
+    ) {
+      const queryParams = { status: 'LIVE, SNAPSHOT, DRAFT', limit: 5 };
+      programSummaryActions.getOrgConfigDetails(queryParams, programId);
+    }
+  };
+
+  return (
+    <CapSpin spinning={showSpin}>
+      {!HIDE_SCOPE_FOR_EVENT.includes(eventCategory) ? (
+        <ErrorBoundaryWrapper
+          useStyle
+          isApiErrorBoundary
+          onRefreshClick={onRefreshClick}
+          isApiError={isAPIError}
+        >
+          <CapRow className={className}>
+            <CapRow className="workflow-configuration-container">
+              <CapColumn
+                onScroll={handleScroll}
+                id="scrollingSets"
+                span={4}
+                className={`groups-column ${
+                  collapse ? 'groups-column-group' : 'groups-column-set'
+                }`}
+              >
+                <CapColumn
+                  className={classnames(
+                    'groups-column-content',
+                    'custom-scroll',
+                  )}
+                >
+                  {groups.length > 0 ? (
+                    <CapColumn
+                      style={{
+                        width: maxGroupItemWidth,
+                      }}
+                    >
+                      <CustomTree
+                        treeData={groups}
+                        onSelect={onGroupItemClick}
+                        selectedKeys={selectedRuleset}
+                        showSwither={false}
+                        showSearch={showSearch}
+                        setSetsConditionsSearch={setSetsConditionsSearch}
+                        setsConditionsSearch={setsConditionsSearch}
+                        setSearchCounter={setSearchCounter}
+                        setSearchConditionCounter={setSearchConditionCounter}
+                        totalSearchResult={
+                          searchCounter + searchConditionCounter
+                        }
+                        searchIndex={searchIndex}
+                        setSearchIndex={setSearchIndex}
+                        processWorflowData={processWorflowData}
+                        rulesets={rulesets}
+                        eventType={eventType}
+                        source={source}
+                      />
+                    </CapColumn>
+                  ) : (
+                    <CreateNewRuleSet />
+                  )}
+                </CapColumn>
+              </CapColumn>
+              <CapColumn
+                span={5}
+                className={`groups-column ${
+                  collapse ? 'groups-column-group' : 'groups-column-condition'
+                }`}
+              >
+                <Flex className="workflow-condition-container">
+                  <CapColumn
+                    className={classnames('condition-column', 'custom-scroll')}
+                  >
+                    {!HIDE_SCOPE_FOR_EVENT.includes(eventCategory) &&
+                      selectedRuleset && (
+                        <ConditionExpressionLayout
+                          description={formatMessage(messages.scopeSelected, {
+                            selectedData:
+                              processedRuleSets?.group[selectedRuleset]
+                                ?.filterInfo?.length || '0',
+                          })}
+                          isPreviewMode
+                          isActive={selectedRule?.id === SCOPE_UPPERCASE}
+                          onClick={() => {
+                            setSelectedRule({ id: SCOPE_UPPERCASE });
+                          }}
+                          getPlainConditionTitle={getPlainConditionTitle}
+                          getHighlightedTextForConditions={
+                            getHighlightedTextForConditions
+                          }
+                          key="condition-expression-scope"
+                          name={formatMessage(messages.scopeTitle)}
+                          id={SCOPE_UPPERCASE}
+                          mode={mode}
+                        />
+                      )}
+                    {eventType === eventTypesMap.TRANSACTIONADD &&
+                      source !== SOURCE_PROMOTION &&
+                      selectedRuleset && (
+                        <ConditionExpressionLayout
+                          description={formatMessage(messages.limitsSelected, {
+                            selectedData:
+                              processedRuleSets?.group[selectedRuleset]
+                                ?.cappingInfo?.length || '0',
+                          })}
+                          isPreviewMode
+                          isActive={selectedRule?.id === CAPPING_UPPERCASE}
+                          onClick={() => {
+                            setSelectedRule({ id: CAPPING_UPPERCASE });
+                          }}
+                          getPlainConditionTitle={getPlainConditionTitle}
+                          getHighlightedTextForConditions={
+                            getHighlightedTextForConditions
+                          }
+                          key="condition-expression-capping"
+                          name={formatMessage(
+                            messages.rewardCurrencyLimitTitle,
+                          )}
+                          id={CAPPING_UPPERCASE}
+                          mode={mode}
+                        />
+                      )}
+                    {selectedRuleset && (
+                      <CapDivider className="scope-rule-divder" />
+                    )}
+                    {(rules || []).map((rule, idx) => {
+                      const { id, caseToActions } = rule;
+                      const displayName = getConditionName(idx + 1);
+                      function handleClose(event) {
+                        onRemoveCondition(id);
+                        event.stopPropagation();
+                      }
+                      function handleActiveChange() {
+                        saveExpression();
+                        setSelectedRule({ ...rule, displayName });
+                      }
+                      return (
+                        <ConditionExpressionLayout
+                          description={formatMessage(messages.actionsSetup, {
+                            actionsDataCount: caseToActions?.true?.length || 0,
+                          })}
+                          handleClose={handleClose}
+                          isActive={selectedRule?.id === id}
+                          onClick={handleActiveChange}
+                          getPlainConditionTitle={getPlainConditionTitle}
+                          getHighlightedTextForConditions={
+                            getHighlightedTextForConditions
+                          }
+                          key={`condition-expression-${id}`}
+                          name={displayName}
+                          id={id}
+                          rulesLength={rules.length}
+                          setsConditionsSearch={setsConditionsSearch}
+                          mode={mode}
+                        />
+                      );
+                    })}
+                  </CapColumn>
+                  {!isPreviewMode &&
+                    selectedRuleset && (
+                      <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={classnames(
+                  'groups-column',
+                  { 'groups-column-expression': collapse },
+                  { 'groups-column-expand': !collapse },
+                  { 'groups-column-expression-bulk-view': mode === undefined },
+                  { 'groups-column-expression-view': mode !== MODE_CONFIGURE },
+                )}
+              >
+                {selectedRule?.id === 'SCOPE' ? (
+                  <ScopeSlidebox
+                    processedRuleSets={processedRuleSets}
+                    setProcessedRuleSets={setProcessedRuleSets}
+                    source={source}
+                    selectedRuleset={selectedRuleset}
+                    eventType={eventType}
+                    disabled={mode === MODE_VIEW}
+                    groupTreeList={groups}
+                  />
+                ) : selectedRule?.id === 'CAPPING' ? (
+                  <CappingSlidebox
+                    processedRuleSets={processedRuleSets}
+                    setProcessedRuleSets={setProcessedRuleSets}
+                    eventType={eventType}
+                    selectedRuleset={selectedRuleset}
+                    handleUpdateTrackerCappedSets={
+                      handleUpdateTrackerCappedSets
+                    }
+                    disabled={mode === MODE_VIEW}
+                    groups={groups}
+                  />
+                ) : (
+                  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 ? (
+                            <>
+                              {mode !== MODE_VIEW && (
+                                <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}
+                                  disabled={isPreviewMode}
+                                  data-testid="workflow-rule-editor"
+                                />
+                                {!isAiRuleWritingDisabled && (
+                                  <CapAskAira.RuleSummarizationBot
+                                    activity={eventType}
+                                    request={request}
+                                    getAPICallObject={getAPICallObject}
+                                    iconPlacement="float-br"
+                                  />
+                                )}
+                                {expError &&
+                                  isInvalidDays && (
+                                    <CapError
+                                      style={{ marginTop: `${CAP_SPACE_04}` }}
+                                      type="error"
+                                    >
+                                      <FormattedMessage
+                                        {...messages.invalidDaysErrorMessage}
+                                      />
+                                    </CapError>
+                                  )}
+                                {expError && (
+                                  <CapError
+                                    style={{ marginTop: `${CAP_SPACE_04}` }}
+                                    type="error"
+                                  >
+                                    <FormattedMessage
+                                      {...messages.expressionErrorMessage}
+                                    />
+                                  </CapError>
+                                )}
+                              </CapSpin>
+                            </>
+                          )}
+                        </>
+                      </CapRow>
+                      <CapRow
+                        className={classnames(
+                          'action-list-container',
+                          'custom-scroll',
+                        )}
+                      >
+                        <CapSpin
+                          spinning={
+                            toggleOnActionMemo[(selectedRule?.id)] || false
+                          }
+                        >
+                          {Object.keys(caseToActions || []).map(actionCase => {
+                            function handleAddActionClick() {
+                              onAddActionClick(
+                                actionCase,
+                                caseToActions[actionCase],
+                              );
+                            }
+
+                            return (
+                              <CapRow>
+                                <CapRow>
+                                  <CapRow className="optional-text-when">
+                                    <ColorPatch
+                                      height={CAP_SPACE_32}
+                                      color={CAP_G09}
+                                      align="center"
+                                    >
+                                      <CapHeading>
+                                        {formatMessage(globalMessages.when)}
+                                      </CapHeading>
+                                      {!isPreviewMode && (
+                                        <CapRow>
+                                          <CapIcon
+                                            className={classnames(
+                                              'close-icon',
+                                              'lp-icon-config-workflows-remove-when',
+                                            )}
+                                            onClick={() =>
+                                              closeWhenConditionHandler(
+                                                actionCase,
+                                              )
+                                            }
+                                            type="close"
+                                            data-testid="close-workflows-config"
+                                          />
+                                        </CapRow>
+                                      )}
+                                    </ColorPatch>
+                                  </CapRow>
+                                  <CapColumn
+                                    className="expression-option-container"
+                                    span={20}
+                                  >
+                                    <CapHeading>
+                                      {formatMessage(
+                                        globalMessages.expressionIs,
+                                      )}
+                                    </CapHeading>
+                                    {isPreviewMode ? (
+                                      <Tag
+                                        className="expression-tag-content"
+                                        tagText={
+                                          actionCase == 'true'
+                                            ? formatMessage(globalMessages.true)
+                                            : formatMessage(
+                                                globalMessages.false,
+                                              )
+                                        }
+                                        background={CAP_G18}
+                                        font={FONT_COLOR_01}
+                                        height={CAP_SPACE_32}
+                                        border
+                                        borderColor={CAP_G18}
+                                      />
+                                    ) : (
+                                      <>
+                                        <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 => {
+                                          let {
+                                            actionName,
+                                            description,
+                                            id,
+                                            mandatoryPropertiesValues,
+                                          } = action;
+                                          let dependentRulesetId = '';
+                                          if (
+                                            actionName === UPGRADE_SLAB_ACTION
+                                          ) {
+                                            if (
+                                              Object.getOwnPropertyNames(
+                                                mandatoryPropertiesValues,
+                                              ).indexOf('shouldRenewSlab') > -1
+                                            ) {
+                                              actionName = RENEW_SLAB_ACTION;
+                                            } else if (
+                                              Object.getOwnPropertyNames(
+                                                mandatoryPropertiesValues,
+                                              ).indexOf('ToSlabSerialNumber') >
+                                              -1
+                                            ) {
+                                              actionName = UPGRADE_SLAB_ACTION_SLAB;
+                                            } else {
+                                              actionName = UPGRADE_SLAB_ACTION_STRATEGY;
+                                            }
+                                          } else if (actionName === FORWARD) {
+                                            const {
+                                              description: forwardDescription,
+                                              dependentRulesetId: forwardDependentRulesetId,
+                                            } = getForwardToRulesetActionData(
+                                              action,
+                                            );
+                                            description = forwardDescription;
+                                            dependentRulesetId = forwardDependentRulesetId;
+                                          } else if (
+                                            actionName ===
+                                            CONVERT_POINTS_TO_REWARD_ACTION
+                                          ) {
+                                            const {
+                                              rewardId,
+                                              brandId,
+                                            } = mandatoryPropertiesValues;
+                                            description = `${brandId}_${rewardId}`;
+                                          }
+                                          function handleEditActionClick(mode = EDIT) {
+                                            setCaseActionData(
+                                              {
+                                                actionCase,
+                                                action,
+                                                isEditMode: true,
+                                                // mode = 'VIEW' if the eye icon was clicked.
+                                                mode,
+                                              },
+                                            )
+
+                                            setShowAction(true);
+                                            setSelectedAction(actionName);
+                                          }
+
+                                          // the delete confirmation modal related functions are being used only for issue badge action as of now, therefore have not used switch case here.
+                                          function getDeleteActionComfirmationModalTitle() {
+                                            return formatMessage(messages.deleteIssueBadgeActionModalTitle);
+                                          }
+
+                                          function getDeleteActionComfirmationModalDesc() {
+                                            return <CapRow>
+                                                <CapLabel type="label9">
+                                                  {formatMessage(
+                                                    messages.deleteIssueBadgeActionModalDesc_1,
+                                                  )}
+                                                </CapLabel>
+                                                <CapLabel type="label9" className="delete-action-modal-secondary-desc">
+                                                  {formatMessage(messages.deleteIssueBadgeActionModalDesc_2)}
+                                                </CapLabel>
+                                              </CapRow>;
+                                          }
+
+                                          function getDeleteActionComfirmationModalOkBtnText() {
+                                            return formatMessage(messages.deleteIssueBadgeActionModalOkBtnText);
+                                          }
+
+                                          function handleDeleteActionComfirmationModalOkClick() {
+                                            setShowUnClaimBadgeConfirmationModal(false);
+                                            removeActionHandler(actionCase, action);
+                                            unClaimBadge(action);
+                                          }
+
+                                          function handleDeleteActionComfirmationModalCancelClick() {
+                                            setShowUnClaimBadgeConfirmationModal(false);
+                                          }
+
+                                          function handleRemoveActionClick() {
+                                            switch (actionName) {
+                                              case BADGE_EARN_ACTION:
+                                                setShowUnClaimBadgeConfirmationModal(true);
+                                                return;
+                                              default:
+                                                removeActionHandler(actionCase, action);
+                                                return;
+                                            }
+                                          }
+
+                                          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}`,
+                                              ]);
+                                            }
+                                          }
+                                          const showDeleteActionConfirmationModal = ACTIONS_TO_CONFIRM_BEFORE_DELETE.includes(actionName) && showUnClaimBadgeConfirmationModal;
+                                          return (
+                                            <>
+                                              {showDeleteActionConfirmationModal && (
+                                                <ConfirmationModal
+                                                  className={classnames(className, 'delete-action-modal')}
+                                                  title={getDeleteActionComfirmationModalTitle()}
+                                                  handleCancel={handleDeleteActionComfirmationModalCancelClick}
+                                                  handleClose={handleDeleteActionComfirmationModalCancelClick}
+                                                  handleOk={handleDeleteActionComfirmationModalOkClick}
+                                                  isModalVisible={showDeleteActionConfirmationModal}
+                                                  description={getDeleteActionComfirmationModalDesc()}
+                                                  image={penguin}
+                                                  okText={getDeleteActionComfirmationModalOkBtnText()}
+                                                />
+                                          )}
+                                            <ActionExpression
+                                              id={id}
+                                              title={actionName}
+                                              iconType={getActionIcon(
+                                                actionName,
+                                              )}
+                                              actionContent={validateTitle(
+                                                description,
+                                              )}
+                                              onRemoveAction={
+                                                handleRemoveActionClick
+                                              }
+                                              onEditAction={
+                                                handleEditActionClick
+                                              }
+                                              onClickActionContent={
+                                                handleActionContentClick
+                                              }
+                                              pId={currentProgram?.id}
+                                              />
+                                            </>
+                                          );
+                                        },
+                                      )}
+                                      {!isPreviewMode ? (
+                                        <CapButton
+                                          className="add-action-button"
+                                          type="flat"
+                                          isAddBtn
+                                          onClick={handleAddActionClick}
+                                        >
+                                          {formatMessage(
+                                            globalMessages.addAction,
+                                          )}
+                                        </CapButton>
+                                      ) : (
+                                        <CapRow className="margin-b-15" />
+                                      )}
+                                    </CapColumn>
+                                  </CapSpin>
+                                </CapRow>
+                              </CapRow>
+                            );
+                          })}
+                        </CapSpin>
+                      </CapRow>
+                      {Object.keys(caseToActions || []).length < 2 &&
+                        !isPreviewMode && (
+                          <CapRow className="workflow-add-button-container">
+                            <CreateActionButton
+                              buttonText={formatMessage(globalMessages.when)}
+                              buttonAction={addWhenConditionHandler}
+                              buttonClassName="lp-btn-config-workflows-add-when-condition"
+                            />
+                          </CapRow>
+                        )}
+                    </Flex>
+                  )
+                )}
+                {
+                  <CapTooltip
+                    key={collapseKey}
+                    title={
+                      collapse
+                        ? formatMessage(globalMessages.collapse)
+                        : formatMessage(globalMessages.expand)
+                    }
+                    placement="right"
+                    getPopupContainer={trigger => trigger.parentNode}
+                    mouseLeaveDelay={0}
+                  >
+                    <CapIcon
+                      type={collapse ? 'chevron-left' : 'chevron-right'}
+                      className="workflow-collapse-btn"
+                      onClick={toggleCollapse}
+                      aria-label="btn-expand"
+                    />
+                  </CapTooltip>
+                }
+              </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}
+                    pointStrategy={localPointStrategy}
+                    trackersDetails={trackersDetails}
+                    allowedChannels={UICompatibleChannels}
+                    refreshStrategyData={refreshStrategyData}
+                    pointTypeIdData={pointTypeIdData}
+                    evaluatedTracker={evaluatedTracker}
+                    fleetLoyaltyEnabled={fleetLoyaltyEnabled}
+                    isGenericEvent={isGenericEvent}
+                    isLineItemLevel={
+                      promotionFormData?.CREATE_PROMOTION_FORM?.type ===
+                      type.LINE_ITEM
+                    }
+                    hasQuantityOptionPresent={hasQuantityOptionPresent}
+                  />
+                </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[
+                      `${
+                        hasNewUIPromotionEnabled
+                          ? 'promotionBannerText'
+                          : '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,
+  source: PropTypes.string,
+  triggerSaveExpression: PropTypes.bool,
+  isPromotionEditFlow: PropTypes.bool,
+  triggerSaveRuleset: PropTypes.bool,
+  promotionFormData: PropTypes.object,
+  promotionRulesets: PropTypes.array,
+  setShowPublishAndActivateModal: PropTypes.func,
+  areProrateOnOptionsDisabled: PropTypes.bool,
+  billType: PropTypes.string,
+};
+
+WorkflowConfigurationSection.defaultProps = {
+  selectedRuleset: '',
+  processedRuleSets: { group: {} },
+  setProcessedRuleSets: () => {},
+  showSearch: 'none',
+  setIsSaveDisabled: () => {},
+  isSaveDisabled: false,
+  areProrateOnOptionsDisabled: false,
+  billType: '',
+};
+
+const mapStateToProps = createStructuredSelector({
+  tiers: makeSelectTiers(),
+  userData: makeSelectCap(),
+  trackersData: makeSelectTrackers(),
+  workflowData: makeSelectConfigWorkflow(),
+  deleteActionData: makeSelectDeleteAction(),
+  deleteConditionData: makeSelectDeleteCondition(),
+  actionDetailsData: makeSelectUpsertAction(),
+  expressionOnUpdate: makeSelectExpressionOnUpdate(),
+  remountExpEditor: makeSelectRemountExpEditor(),
+  isScrolling: makeSelectIsScrolling(),
+  dynamicWidth: makeSelectDynamicWidth(),
+  toggleOnAction: makeSelectToggleOnAction(),
+  orgConfigDetails: makeSelectOrgConfigDetails(),
+  alternateCurrencyList: makeSelectAlternateCurrencyList(),
+  alternateCurrencyFlag: makeSelectAlternateCurrencyFlagStatus(),
+  targetGroupData: makeSelectTargetGroups(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    capActions: bindActionCreators(capActions, dispatch),
+    programSummaryActions: bindActionCreators(programSummaryActions, dispatch),
+    targetGroupsActionsMappedAction: bindActionCreators(
+      targetGroupsActionsMappedAction,
+      dispatch,
+    ),
+  };
+}
+
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
+const withSaga = [
+  { key: 'configureWorkflow', saga },
+  { key: 'targetPointAllocation', saga: targetPointAllocationWorkflowSaga },
+].map(saga => injectSaga(saga));
+
+const withReducer = [
+  { key: 'configureWorkflow', reducer },
+  {
+    key: 'targetPointAllocation',
+    reducer: targetPointAllocationWorkflowReducer,
+  },
+].map(reducer => injectReducer(reducer));
+export default withErrorBoundary(
+  compose(
+    ...withSaga,
+    ...withReducer,
+    withConnect,
+    withRouter,
+  )(
+    injectIntl(
+      clearDataOnUnmount(withStyles(WorkflowConfigurationSection, styles)),
+    ),
+  ),
+  { useStyle: true },
+);