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

package/components/organisms/ConfigureWorkflows/WorkflowConfigurationSection.js

@@ -4,191 +4,105 @@
  * WorkflowConfigurationSection
  *
  */
-import React, {
-  useState,
-  useEffect,
-  useMemo,
-  useCallback,
-  useRef,
-} from 'react';
+
+import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import cloneDeep from 'lodash/cloneDeep';
 import findIndex from 'lodash/findIndex';
 import withStyles from 'utils/withStyles';
-import { withRouter } from 'react-router-dom';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
-import { v4 as uuidv4 } from 'uuid';
+import {
+  validateNumber,
+  validateTitle,
+  formatMessageHandler,
+  getUICompatibleCommChannelsNames,
+} from 'utils/commonUtils';
+
 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 injectSaga from 'utils/injectSaga';
+import injectReducer from 'utils/injectReducer';
+import clearDataOnUnmount from 'utils/clearDataOnUnmount';
 
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapBanner from '@capillarytech/cap-ui-library/CapBanner';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
+import CapError from '@capillarytech/cap-ui-library/CapError';
 import StyledVars from '@capillarytech/cap-ui-library/styled';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import 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 CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 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 Tag from '../../atoms/Tag';
 import CustomTree from '../../molecules/CustomTree';
 import AddActionConditionWorkflow from '../../molecules/AddActionConditionWorkflow';
+import ColorPatch from '../../molecules/ColorPatch';
+import ActionExpression from '../../molecules/ActionExpression';
 import {
   getActionList,
   processRuleSetsData,
   getUpdatedRuleSetByAction,
   processRuleSetDelete,
-  getNewRuleSetInfo,
-  getRulesetsOrRulesetsByEventTypeV2,
-  checkForAlternateCurrencyEventType,
 } from './utils';
 import * as actions from './actions';
-import { targetGroupsActionsMapped as targetGroupsActionsMappedAction } from '../TargetPointAllocationWorkflowAction/actions';
+import * as tiersActions from '../Tiers/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 * as programContext from '../../pages/ProgramSummary/context';
 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 { makeSelectTrackers } from '../../pages/ProgramSummary/selectors';
 import {
   makeSelectCap,
   makeSelectUpsertAction,
-  makeSelectTiers,
-  makeSelectAlternateCurrencyFlagStatus,
 } from '../../pages/Cap/selectors';
+import { makeSelectTiers } from '../Tiers/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,
+  LINEITEM_EXTENDED_FIELD,
   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
+  UPGRADE_SLAB_ACTION_STRATEGY,
 } from './constants';
-import { AI_RULE_WRITING_DISABLED } from '../NavigationBar/constants';
-
 import WorkflowActions from './WorkflowActions';
 import CreateActionButton from '../../molecules/CreateActionButton';
+import EllipsisText from '../../atoms/EllipsisText';
 import { Flex } from '../../pages/Cap/style';
 import ErrorBoundaryWrapper from '../../molecules/ErrorBoundaryWrapper';
-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,
+  makeSelectExtendedFields,
   makeSelectEbillTemplates,
+  makeSelectLabels,
   makeSelectDeleteAction,
   makeSelectDeleteCondition,
   makeSelectExpressionOnUpdate,
   makeSelectRemountExpEditor,
-  makeSelectToggleOnAction,
-  makeSelectIsScrolling,
-  makeSelectDynamicWidth,
-  makeSelectAlternateCurrencyList,
 } = selectors;
+const { getProgramContext } = programContext;
 const { styles } = style;
 const {
   CAP_G18,
@@ -197,151 +111,79 @@ const {
   CAP_SPACE_32,
   CAP_WHITE,
   CAP_G09,
+  CAP_PALE_GREY,
 } = 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 WorkflowConfigurationSection = ({
+  intl: { formatMessage },
+  actions,
+  className,
+  eventType,
+  setSelectedRuleset,
+  workflowData: {
+    getRulesetsStatus,
+    rulesets = [],
+    upsertRulesetsStatus,
+    getRulesetsByEventTypeStatus,
+    rulesetsByEventType = [],
+    isRulesetsByEventTypeUpdated,
+    getGrammerStatus,
+    grammer = {},
+    getActionDependenciesStatus,
+    actionDependencies = {},
+    createRuleStatus,
+    saveRulesetStatus,
+    clearRulesetCacheStatus,
+  } = {},
+  extendedFieldsData: { extendedFields } = {},
+  trackersData: { getTrackersStatus, trackersDetails = [] } = {},
+  tiers: { getTierStatus, tier = {} } = {},
+  ebillTemplatesData: {
+    ebillTemplates = [],
+    getEbillTemplatesStatus = '',
+  } = {},
+  labelData: { labels = [] },
+  selectedRuleset,
+  processedRuleSets,
+  setProcessedRuleSets,
+  groups,
+  setGroups,
+  pointStrategy = {},
+  pointTypeIdData = {},
+  deleteActionData: { deleteActionStatus } = {},
+  deleteConditionData: { deleteConditionStatus } = {},
+  capActions,
+  eventCategory,
+  actionDetailsData: { upsertActionStatus } = {},
+  exp,
+  setExp,
+  expJSON,
+  setExpJSON,
+  expError,
+  setExpError,
+  selectedRule,
+  setSelectedRule,
+  saveExpression,
+  rules,
+  setRules,
+  expressionOnUpdate: { expressionOnUpdate = {} },
+  isSaveDisabled,
+  setIsSaveDisabled,
+  remountExpEditor: { remountExpEditor = false } = {},
+  addTrackerTags,
+  tiersActions,
+  programSummaryActions,
+  fleetLoyaltyEnabled,
+}) => {
+  const { programId, currentProgram = {} } = getProgramContext();
+  const [actionList, setActionList] = useState(null);
   const [showActions, setShowActions] = useState(false);
   const [selectedAction, setSelectedAction] = useState('');
-
   const [showAction, setShowAction] = useState(false);
-  const [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);
@@ -356,47 +198,6 @@ export const WorkflowConfigurationSection = props => {
   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 {
@@ -404,24 +205,6 @@ export const WorkflowConfigurationSection = props => {
         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 => {
@@ -439,7 +222,7 @@ export const WorkflowConfigurationSection = props => {
         } else {
           operandsArray.push(parsedJSON?.operands);
         }
-        operandsArray.forEach(operands => {
+        operandsArray.map(operands => {
           let detailsValue = [];
           let grammerMethod;
           let grammerTypeValue;
@@ -452,7 +235,7 @@ export const WorkflowConfigurationSection = props => {
           let functionIndex = false;
           let hasFuntion = false;
           Array.isArray(operands) &&
-            operands?.forEach((rule, index) => {
+            operands?.map((rule, index) => {
               detailsValue.push(rule);
               if (rule?.type?.includes('function')) {
                 hasFuntion = true;
@@ -460,7 +243,7 @@ export const WorkflowConfigurationSection = props => {
               }
             });
           if (hasFuntion) {
-            detailsValue.forEach(({ type, value }, index) => {
+            detailsValue.map(({ type, value }, index) => {
               if (index === 0) {
                 grammerTypeValue = type?.split(':')?.[0];
                 grammerType = grammer?.types?.[type.split(':')?.[0]];
@@ -548,23 +331,19 @@ export const WorkflowConfigurationSection = props => {
     getTrackersStatus === REQUEST ||
     upsertRulesetsStatus === REQUEST ||
     getActionDependenciesStatus === REQUEST ||
+    getEbillTemplatesStatus === REQUEST ||
     createRuleStatus === REQUEST ||
     deleteConditionStatus === REQUEST ||
     saveRulesetStatus === REQUEST ||
     clearRulesetCacheStatus === REQUEST ||
-    getRulesetsByEventTypeStatus === REQUEST ||
-    getOrgConfigDraftDetailsStatus === REQUEST;
+    getRulesetsByEventTypeStatus === REQUEST;
 
   const isAPIError =
     getRulesetsStatus === FAILURE ||
     getTrackersStatus === FAILURE ||
     getTierStatus === FAILURE ||
     clearRulesetCacheStatus === FAILURE ||
-    getRulesetsByEventTypeStatus === FAILURE ||
-    getOrgConfigDraftDetailsStatus === FAILURE ||
-    (hasProgramVersioningEnabled
-      ? getOrgConfigDetailsStatus === FAILURE
-      : false);
+    getRulesetsByEventTypeStatus === FAILURE;
 
   useEffect(
     () => {
@@ -580,25 +359,11 @@ export const WorkflowConfigurationSection = props => {
     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(() => {
+    actions.getExtendedFields(LINEITEM_EXTENDED_FIELD, programId);
+    actions.getEbillTemplates();
+    actions.getLabels();
+  }, []);
 
   useEffect(
     () => {
@@ -628,191 +393,33 @@ export const WorkflowConfigurationSection = props => {
       setSelectedRule({});
       setActionList(null);
       setRules([]);
-      actions.getGrammer(eventType, programId);
+      actions.getGrammer(eventType);
       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,
-        );
-      }
+      getRulesets();
+      actions.getActionDependencies();
     },
-    [alternateCurrencyFlagValue],
+    [programId],
   );
 
   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,
-        );
-      }
+      getRulesetsByEventType();
     },
-    [
-      eventType,
-      source,
-      version,
-      mode,
-      programId,
-      getOrgConfigDetailsStatus,
-      getOrgConfigDraftDetailsStatus,
-    ],
+    [eventType, programId],
   );
 
-  const clearRulesetsCache = () => {
-    if (source !== SOURCE_PROMOTION)
-      actions.clearRulesetsCache(programId, eventType);
-  };
-
+  const getRulesets = () => actions.getRulesets(programId);
+  const getRulesetsByEventType = () =>
+    actions.getRulesetsByEventType(programId, eventType);
+  const clearRulesetsCache = () =>
+    actions.clearRulesetsCache(programId, eventType);
+  const getTiers = () => tiersActions.getTier(programId);
   const getTrackersData = () =>
     programSummaryActions.getTrackersData({ programId });
 
@@ -835,11 +442,6 @@ export const WorkflowConfigurationSection = props => {
         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],
@@ -879,26 +481,6 @@ export const WorkflowConfigurationSection = props => {
     [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) {
@@ -908,46 +490,20 @@ export const WorkflowConfigurationSection = props => {
     });
   };
 
-  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,
+  const processWorflowData = rulesets => {
+    const { groupObj, groupTreeList, evaluatedTrackers } = processRuleSetsData({
       eventType,
+      rulesets,
       rulesetsByEventType,
-      // selectedRuleset,
-      setGroups,
-      source,
-      setProcessedRuleSets,
       trackersDetails,
-      draftDestinationName,
-      actions,
-    ],
-  );
+      currentProgram,
+    });
+    setGroups([...groupTreeList]);
+    setProcessedRuleSets({
+      group: groupObj,
+    });
+    updateEvaluatedTrackers(evaluatedTrackers);
+  };
 
   useEffect(
     () => {
@@ -958,149 +514,30 @@ export const WorkflowConfigurationSection = props => {
     [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;
+  const onGroupItemClick = groupIds => {
+    const groupId = groupIds?.[0];
+    if (groupId) {
+      saveExpression(groupId);
+      const { group = {} } = processedRuleSets;
+      const { rules } = group[groupId] || {};
+      populateActiveRules(rules);
+      setSelectedRuleset(groupId);
+    }
+  };
+  const populateActiveRules = (
+    activeRules = [],
+    defaultSelectedRuleIndex = 0,
+  ) => {
+    setSelectedRule(
+      !isEmpty(activeRules[defaultSelectedRuleIndex])
+        ? {
+            ...activeRules[defaultSelectedRuleIndex],
+            displayName: getConditionName(defaultSelectedRuleIndex + 1),
+          }
+        : {},
+    );
+    setRules(activeRules);
   };
-
-  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]) {
@@ -1117,22 +554,24 @@ export const WorkflowConfigurationSection = props => {
         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 payload = {
+      rule_id: ruleId,
+      event_type: eventType,
+      ruleset_id: selectedRuleset,
+      dependentRulesetIds,
+    };
+    actions.deleteCondition(programId, eventType, payload, res => {
+      if (res?.success) {
+        handleDeleteConditionOrAction(dependentRulesetIds, true);
+        CapNotification.success({
+          message: formatMessage(messages.conditionDeletedSuccess),
+        });
+      } else {
+        CapNotification.error({
+          message: formatMessage(globalMessages.errorMessage),
+        });
+      }
+    });
   };
 
   const handleConditionAction = ({ createdRule, updateProcessedRulesets }) => {
@@ -1152,8 +591,6 @@ export const WorkflowConfigurationSection = props => {
         ruleList.push(createdRule);
       }
       groupClone[selectedRuleset].rules = ruleList;
-      groupClone[selectedRuleset].isPristine = false;
-
       populateActiveRules(ruleList, ruleList.length - 1);
       setProcessedRuleSets({ ...processedRuleSets, group: groupClone });
     }
@@ -1161,16 +598,9 @@ export const WorkflowConfigurationSection = props => {
 
   const onAddCondition = updateProcessedRulesets =>
     actions.createRule(
-      {
-        source,
-        allRulesLength: (
-          processedRuleSets?.group?.[selectedRuleset]?.rules || []
-        ).length,
-        userId,
-        programId,
-        eventType,
-        rulesetId: selectedRuleset,
-      },
+      programId,
+      eventType,
+      selectedRuleset,
       (res, createdRule) => {
         if (res?.success) {
           handleConditionAction({ createdRule, updateProcessedRulesets });
@@ -1188,52 +618,21 @@ export const WorkflowConfigurationSection = props => {
   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)
+  const onCreateNewRuleSet = () =>
+    actions.upsertRulesets(
+      programId,
+      eventType,
+      { createRootRuleset: true },
+      responseData => {
+        if (!isEmpty(responseData)) {
+          const rulesetList = Array.isArray(responseData)
             ? responseData
             : [responseData];
-            rulesetList.map(ruleset => ({ ...ruleset, eventType }));
-            processWorflowData(rulesetList);
-            setLocalIsDraftPresent(true);
-            getRulesets({
-              programId,
-              status: DRAFT,
-              endpointName: POINTSENGINE_ENDPOINT,
-            });
-          }
-        },
-      );
-    }
-  };
+          rulesetList.map(ruleset => ({ ...ruleset, eventType }));
+          processWorflowData(rulesetList);
+        }
+      },
+    );
 
   const CreateNewRuleSet = () => (
     <CapRow className="create-ruleset-container">
@@ -1241,35 +640,48 @@ export const WorkflowConfigurationSection = props => {
         type="flat"
         isAddBtn
         onClick={onCreateNewRuleSet}
-        disabled={showSpin || mode !== MODE_CONFIGURE}
+        disabled={showSpin}
       >
         {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 ConditionExpressionLayout = ({
+    id,
+    changeActive,
+    isActive,
+    name,
+    description,
+    handleClose,
+  }) => (
+    <ColorPatch
+      className="pointer-cursor"
+      onClick={changeActive}
+      height="88px"
+      width="100%"
+      color={isActive ? CAP_PALE_GREY : CAP_WHITE}
+      data-id={id}
+    >
+      <CapHeader
+        titleClass={classnames('condition-patch-header', {
+          selected: isActive,
+        })}
+        size="label"
+        title={name}
+        description={<EllipsisText title={description} />}
+      />
+      <CapIcon
+        onClick={handleClose}
+        disabled={!isActive}
+        className={classnames(
+          'close-icon',
+          'lp-icon-config-workflows-remove-condition',
+        )}
+        type="close"
+      />
+    </ColorPatch>
+  );
 
   const getSelectedRuleLocal = () => {
     const ruleIndex = findIndex(
@@ -1318,89 +730,53 @@ export const WorkflowConfigurationSection = props => {
       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) => {
+    // getSubRulesetIds for future reference
+    const dependentRulesetIds =
+      [] ||
+      getSubRulesetIds({
+        processedRuleSets,
+        rulesetIds: action?.dependentRulesetIds || [],
       });
-  }
 
-  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,
+    const payload = {
+      action_id: validateNumber(action?.id),
+      case_value: actionCase,
+      rule_id: validateNumber(selectedRule?.id),
+      event_type: eventType,
+      ruleset_id: validateNumber(selectedRuleset),
+      dependentRulesetIds,
+    };
+
+    actions.deleteAction({ payload, programId, eventType }, result => {
+      if (result?.success) {
+        const clonnedProcessedRuleSets = cloneDeep(processedRuleSets);
+        const { ruleIndex, selectedRuleLocal } = getSelectedRuleLocal();
+        const filteredCases = selectedRuleLocal[actionCase].filter(
+          ruleAction => ruleAction.id !== action.id,
         );
-      }
-      // 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,
+        clonnedProcessedRuleSets.group[selectedRuleset].rules[
+          ruleIndex
+        ].caseToActions[actionCase] = filteredCases;
+        // DEPENDENT RULESET ID IS ONLY FOR FORWARD TO RULE SET AND TRACKER EVALUATION
+        if (action?.dependentRulesetIds?.length > 0) {
+          handleDeleteConditionOrAction(
+            dependentRulesetIds,
+            false,
+            clonnedProcessedRuleSets,
           );
-          targetGroupsActionsMappedAction(updatedTargetGroupsActionsMapped);
+        } else {
+          setProcessedRuleSets(clonnedProcessedRuleSets);
         }
-      }
-    } 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);
+        CapNotification.error({
+          message: formatMessage(globalMessages.errorMessage),
+        });
       }
-    }
+    });
   };
 
   const addWhenConditionHandler = () => {
@@ -1419,16 +795,6 @@ export const WorkflowConfigurationSection = props => {
     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
@@ -1437,9 +803,7 @@ export const WorkflowConfigurationSection = props => {
       }
       return acc;
     }, []);
-
     const { group = {} } = processedRuleSets;
-
     const filterActionList = getActionList({
       tier,
       groups,
@@ -1447,10 +811,7 @@ export const WorkflowConfigurationSection = props => {
       currentProgram,
       actionDependencies,
       ruleset: group[selectedRuleset],
-      isGenericEvent,
-    }).filter(actionId => !existingActionNames.includes(actionId))
-      .filter(actionId => filterFeatureGatedActions(actionId));
-
+    }).filter(actionId => !existingActionNames.includes(actionId));
     const processedActions = filterActionList
       .map(actionId => {
         const iconValue = ACTIONS_ICON_MAP[actionId];
@@ -1461,49 +822,6 @@ export const WorkflowConfigurationSection = props => {
           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: (
@@ -1514,80 +832,21 @@ export const WorkflowConfigurationSection = props => {
               {text}
             </div>
           ),
-          icon: isIcon ? (
-            <CapIcon type={iconValue} className="action-card-icon" />
-          ) : (
-            iconValue
-          ),
+          icon: isIcon ? <CapIcon type={iconValue} /> : 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);
+    setActionList(processedActions);
     toggleShowActions();
-    setCaseActionData({ actionCase, action: {} });
+    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);
@@ -1597,6 +856,7 @@ export const WorkflowConfigurationSection = props => {
     setShowActions(false);
     setSelectedAction('');
   };
+
   const updateRuleSetByAction = (actionData, res) => {
     if (res?.success) {
       const { isEditMode } = actionData || {};
@@ -1608,7 +868,6 @@ export const WorkflowConfigurationSection = props => {
         processedRuleSets,
         actionData,
         responseData,
-        source,
       );
       if (isNewRuleSet) {
         const { group = {} } = updatedRuleSets;
@@ -1620,15 +879,9 @@ export const WorkflowConfigurationSection = props => {
         message: formatMessage(
           isEditMode
             ? globalMessages.editedSuccessfully
-            : globalMessages.actionAddedSuccessfully,
+            : globalMessages.createdSuccessfully,
         ),
       });
-      const workflowActions = {
-        actionData,
-        promotionsData: promotionFormData,
-        source,
-      };
-      gtmPush('workflowActions', workflowActions);
     } else {
       CapNotification.error({
         message: formatMessage(globalMessages.errorMessage),
@@ -1655,7 +908,7 @@ export const WorkflowConfigurationSection = props => {
     let propData = {};
     let actionId = -1;
     let additionProps = {};
-    const { actionCase, action, isEditMode = false, mode } = caseActionData;
+    const { actionCase, action, isEditMode = false } = caseActionData;
     if (!isEmpty(action)) {
       const { id, mandatoryPropertiesValues = {} } = action;
       actionId = id;
@@ -1681,26 +934,20 @@ export const WorkflowConfigurationSection = props => {
         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 getConditionName = (index = '') =>
+    `${formatMessage(globalMessages.condition)} ${index}`;
 
   const handleDeleteConditionOrAction = (
     dependentRulesetIds,
@@ -1735,26 +982,10 @@ export const WorkflowConfigurationSection = props => {
 
   const onRefreshClick = () => {
     if (getRulesetsByEventTypeStatus === FAILURE) {
-      getRulesetsByEventType({
-        programId,
-        status: isDraftPresent ? DRAFT : LIVE,
-        endpointName: POINTSENGINE_ENDPOINT,
-        eventType,
-      });
+      getRulesetsByEventType();
     }
-    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 (getRulesetsStatus === FAILURE) {
+      getRulesets();
     }
     if (getTrackersStatus === FAILURE) {
       getTrackersData();
@@ -1765,21 +996,11 @@ export const WorkflowConfigurationSection = props => {
     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) ? (
+      {!['Behavioral', 'Target Loyalty'].includes(eventCategory) ? (
         <ErrorBoundaryWrapper
           useStyle
           isApiErrorBoundary
@@ -1788,14 +1009,10 @@ export const WorkflowConfigurationSection = props => {
         >
           <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 span={4} className="groups-column">
+                <CapRow className="event-view-headers">
+                  {formatMessage(messages.groups)}
+                </CapRow>
                 <CapColumn
                   className={classnames(
                     'groups-column-content',
@@ -1803,101 +1020,27 @@ export const WorkflowConfigurationSection = props => {
                   )}
                 >
                   {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>
+                    <CustomTree
+                      treeData={groups}
+                      onSelect={onGroupItemClick}
+                      selectedKeys={[selectedRuleset]}
+                      showSwither={false}
+                    />
                   ) : (
                     <CreateNewRuleSet />
                   )}
                 </CapColumn>
               </CapColumn>
-              <CapColumn
-                span={5}
-                className={`groups-column ${
-                  collapse ? 'groups-column-group' : 'groups-column-condition'
-                }`}
-              >
+              <CapColumn span={5} className="groups-column">
+                <CapRow className="event-view-headers">
+                  {formatMessage(messages.allConditions)}
+                </CapRow>
                 <Flex className="workflow-condition-container">
                   <CapColumn
                     className={classnames('condition-column', 'custom-scroll')}
                   >
-                    {!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;
+                    {rules.map((rule, idx) => {
+                      const { id, exp } = rule;
                       const displayName = getConditionName(idx + 1);
                       function handleClose(event) {
                         onRemoveCondition(id);
@@ -1909,507 +1052,282 @@ export const WorkflowConfigurationSection = props => {
                       }
                       return (
                         <ConditionExpressionLayout
-                          description={formatMessage(messages.actionsSetup, {
-                            actionsDataCount: caseToActions?.true?.length || 0,
-                          })}
+                          description={`${exp}`}
                           handleClose={handleClose}
                           isActive={selectedRule?.id === id}
-                          onClick={handleActiveChange}
-                          getPlainConditionTitle={getPlainConditionTitle}
-                          getHighlightedTextForConditions={
-                            getHighlightedTextForConditions
-                          }
+                          changeActive={handleActiveChange}
                           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>
-                    )}
+                  <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 ? (
+              <CapColumn span={15} className="groups-column">
+                <CapRow className="event-view-headers">
+                  {selectedRule?.displayName || getConditionName()}
+                </CapRow>
+                {selectedRule?.id && (
+                  <Flex className="workflow-condition-container">
+                    <CapRow
+                      className={classnames(
+                        'expression-editor-container',
+                        'custom-scroll',
+                      )}
+                    >
+                      <CapHeading type="h4" className="expression-heading">
+                        {formatMessage(messages.expression)}
+                      </CapHeading>
+                      <>
+                        {showSpin ? (
+                          <CapInput
+                            className="rule-editior"
+                            value={exp}
+                            disabled
+                          />
+                        ) : Object.keys(modifiedGrammer || {}).length === 0 ? (
+                          <>
+                            <CapAlert
+                              className="rule-editior"
+                              style={{ maxWidth: '396px' }}
+                              message={
+                                <FormattedMessage {...messages.emfAlert} />
+                              }
+                              type="warning"
+                            />
                             <CapInput
                               className="rule-editior"
-                              value={exp}
+                              defaultValue={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}
                               />
-                            </>
-                          ) : (
-                            <>
-                              <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 && (
+                                <CapError
+                                  style={{ marginTop: `${CAP_SPACE_04}` }}
+                                  type="error"
+                                >
+                                  <FormattedMessage
+                                    {...messages.expressionErrorMessage}
                                   />
-                                )}
-                                {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',
+                                </CapError>
+                              )}
+                            </CapSpin>
+                          </>
                         )}
-                      >
-                        <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>
+                      </>
+                    </CapRow>
+                    <CapRow
+                      className={classnames(
+                        'action-list-container',
+                        'custom-scroll',
+                      )}
+                    >
+                      {Object.keys(caseToActions || []).map((actionCase, i) => {
+                        function handleAddActionClick() {
+                          onAddActionClick(
+                            actionCase,
+                            caseToActions[actionCase],
+                          );
+                        }
+
+                        return (
+                          <CapRow key={`when-condition-${i}`}>
+                            <CapRow>
+                              <CapRow className="optional-text-when">
+                                <ColorPatch
+                                  height={CAP_SPACE_32}
+                                  color={CAP_G09}
+                                  align="center"
+                                >
+                                  <CapHeading>
+                                    {formatMessage(globalMessages.when)}
+                                  </CapHeading>
+                                  <CapRow>
+                                    <CapIcon
+                                      className={classnames(
+                                        'close-icon',
+                                        'lp-icon-config-workflows-remove-when',
                                       )}
-                                    </ColorPatch>
+                                      onClick={() =>
+                                        closeWhenConditionHandler(actionCase)
+                                      }
+                                      type="close"
+                                    />
                                   </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,
-                                              )
+                                </ColorPatch>
+                              </CapRow>
+                              <CapColumn
+                                className="expression-option-container"
+                                span={20}
+                              >
+                                <CapHeading>
+                                  {formatMessage(globalMessages.expressionIs)}
+                                </CapHeading>
+                                <Tag
+                                  className="expression-tag-content"
+                                  tagText={formatMessage(globalMessages.true)}
+                                  background={
+                                    actionCase == 'true' ? CAP_G18 : CAP_WHITE
+                                  }
+                                  font={FONT_COLOR_01}
+                                  height={CAP_SPACE_32}
+                                  onClick={() =>
+                                    actionCase == 'false' &&
+                                    toggleActionCase(true)
+                                  }
+                                  border
+                                  borderColor={CAP_G18}
+                                />
+                                <Tag
+                                  className="expression-tag-content"
+                                  tagText={formatMessage(globalMessages.false)}
+                                  background={
+                                    actionCase == 'false' ? CAP_G18 : CAP_WHITE
+                                  }
+                                  font={FONT_COLOR_01}
+                                  height={CAP_SPACE_32}
+                                  onClick={() =>
+                                    actionCase == 'true' &&
+                                    toggleActionCase(false)
+                                  }
+                                  border
+                                  borderColor={CAP_G18}
+                                />
+                              </CapColumn>
+                            </CapRow>
+                            <CapRow>
+                              <CapSpin spinning={showActionSpinner}>
+                                <CapColumn offset={1} span={23}>
+                                  {(caseToActions[actionCase] || []).map(
+                                    (action, i) => {
+                                      let {
+                                        actionName,
+                                        description,
+                                        id,
+                                      } = action;
+                                      let dependentRulesetId = '';
+                                      if (actionName === UPGRADE_SLAB_ACTION) {
+                                        actionName = action?.actionType;
+                                      } else if (actionName === FORWARD) {
+                                        const {
+                                          description: forwardDescription,
+                                          dependentRulesetId: forwardDependentRulesetId,
+                                        } = getForwardToRulesetActionData(
+                                          action,
+                                        );
+                                        description = forwardDescription;
+                                        dependentRulesetId = forwardDependentRulesetId;
+                                      }
+
+                                      function handleEditActionClick() {
+                                        setCaseActionData({
+                                          actionCase,
+                                          action,
+                                          isEditMode: true,
+                                        });
+                                        setShowAction(true);
+                                        setSelectedAction(actionName);
+                                      }
+
+                                      function handleRemoveActionClick() {
+                                        removeActionHandler(actionCase, action);
+                                      }
+
+                                      function getActionIcon(icon) {
+                                        return typeof ACTIONS_ICON_MAP[icon] ===
+                                          'string' ? (
+                                          <CapIcon
+                                            style={{ color: 'black' }}
+                                            type={ACTIONS_ICON_MAP[icon]}
+                                          />
+                                        ) : (
+                                          ACTIONS_ICON_MAP[icon]
+                                        );
+                                      }
+
+                                      function handleActionContentClick() {
+                                        if (
+                                          actionName === FORWARD &&
+                                          dependentRulesetId
+                                        ) {
+                                          onGroupItemClick([
+                                            `${dependentRulesetId}`,
+                                          ]);
                                         }
-                                        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,
+                                      }
+
+                                      return (
+                                        <ActionExpression
+                                          id={id}
+                                          title={actionName}
+                                          iconType={getActionIcon(actionName)}
+                                          key={`${actionName}-${i}`}
+                                          actionContent={validateTitle(
+                                            description,
                                           )}
-                                          background={
-                                            actionCase == 'false'
-                                              ? CAP_G18
-                                              : CAP_WHITE
+                                          onRemoveAction={
+                                            handleRemoveActionClick
                                           }
-                                          font={FONT_COLOR_01}
-                                          height={CAP_SPACE_32}
-                                          onClick={() =>
-                                            actionCase == 'true' &&
-                                            toggleActionCase(false)
+                                          onEditAction={handleEditActionClick}
+                                          onClickActionContent={
+                                            handleActionContentClick
                                           }
-                                          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"
-                            />
+                                      );
+                                    },
+                                  )}
+                                  <CapButton
+                                    className="add-action-button"
+                                    type="flat"
+                                    isAddBtn
+                                    onClick={handleAddActionClick}
+                                  >
+                                    {formatMessage(globalMessages.addAction)}
+                                  </CapButton>
+                                </CapColumn>
+                              </CapSpin>
+                            </CapRow>
                           </CapRow>
-                        )}
-                    </Flex>
-                  )
+                        );
+                      })}
+                    </CapRow>
+                    {Object.keys(caseToActions || []).length < 2 && (
+                      <CapRow className="workflow-add-button-container">
+                        <CreateActionButton
+                          buttonText={formatMessage(globalMessages.when)}
+                          buttonAction={addWhenConditionHandler}
+                          buttonClassName="lp-btn-config-workflows-add-when-condition"
+                        />
+                      </CapRow>
+                    )}
+                  </Flex>
                 )}
-                {
-                  <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 && (
@@ -2438,19 +1356,17 @@ export const WorkflowConfigurationSection = props => {
                     props={getActionProps()}
                     action={selectedAction}
                     eventType={eventType}
+                    currentProgram={currentProgram}
                     pointStrategy={localPointStrategy}
                     trackersDetails={trackersDetails}
+                    extendedFields={extendedFields}
+                    ebillTemplates={ebillTemplates}
+                    labels={labels}
                     allowedChannels={UICompatibleChannels}
                     refreshStrategyData={refreshStrategyData}
                     pointTypeIdData={pointTypeIdData}
                     evaluatedTracker={evaluatedTracker}
                     fleetLoyaltyEnabled={fleetLoyaltyEnabled}
-                    isGenericEvent={isGenericEvent}
-                    isLineItemLevel={
-                      promotionFormData?.CREATE_PROMOTION_FORM?.type ===
-                      type.LINE_ITEM
-                    }
-                    hasQuantityOptionPresent={hasQuantityOptionPresent}
                   />
                 </div>
               )}
@@ -2474,15 +1390,7 @@ export const WorkflowConfigurationSection = props => {
             bannerContent={
               <div>
                 <CapLabel type="label1" className="navigation-label">
-                  {formatMessage(
-                    messages[
-                      `${
-                        hasNewUIPromotionEnabled
-                          ? 'promotionBannerText'
-                          : 'promotionsNotSupportedText'
-                      }`
-                    ],
-                  )}
+                  {formatMessage(messages.PromotionsNotSupportedText)}
                 </CapLabel>
               </div>
             }
@@ -2510,26 +1418,14 @@ WorkflowConfigurationSection.propTypes = {
   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({
@@ -2537,29 +1433,22 @@ const mapStateToProps = createStructuredSelector({
   userData: makeSelectCap(),
   trackersData: makeSelectTrackers(),
   workflowData: makeSelectConfigWorkflow(),
+  extendedFieldsData: makeSelectExtendedFields(),
+  ebillTemplatesData: makeSelectEbillTemplates(),
+  labelData: makeSelectLabels(),
   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),
+    tiersActions: bindActionCreators(tiersActions, dispatch),
     programSummaryActions: bindActionCreators(programSummaryActions, dispatch),
-    targetGroupsActionsMappedAction: bindActionCreators(
-      targetGroupsActionsMappedAction,
-      dispatch,
-    ),
   };
 }
 
@@ -2567,24 +1456,15 @@ 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));
+
+const withSaga = injectSaga({ key: 'configureWorkflow', saga });
+const withReducer = injectReducer({ key: 'configureWorkflow', reducer });
+
 export default withErrorBoundary(
   compose(
-    ...withSaga,
-    ...withReducer,
+    withSaga,
+    withReducer,
     withConnect,
-    withRouter,
   )(
     injectIntl(
       clearDataOnUnmount(withStyles(WorkflowConfigurationSection, styles)),