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

package/components/pages/Promotions/Promotions.js

@@ -0,0 +1,1698 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
+import { injectIntl, intlShape } from 'react-intl';
+import classnames from 'classnames';
+import cloneDeep from 'lodash/cloneDeep';
+
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapStepsAccordian from '@capillarytech/cap-ui-library/CapStepsAccordian';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapLink from '@capillarytech/cap-ui-library/CapLink';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+
+import { createStructuredSelector } from 'reselect';
+import { connect } from 'react-redux';
+import { compose, bindActionCreators } from 'redux';
+import moment from 'moment';
+import { styles, StepAccordianHeader } from './style';
+import messages from './messages';
+import promotionDetailsMessages from '../../organisms/PromotionsDetail/messages';
+import * as actions from './actions';
+import * as capActions from '../Cap/actions';
+import * as workflowActions from '../../organisms/ConfigureWorkflows/actions';
+import * as targetPointAllocationWorkflowActions from '../../organisms/TargetPointAllocationWorkflowAction/actions';
+import {
+  makeSelectPointStrategyDetails,
+  makeSelectCap,
+  makeSelectCheckReconfigureProgram,
+  makeSelectTimeZone,
+  makeSelectGetProgramConfigDetails,
+  makeSelectSegregatePromotionsFlagStatus,
+} from '../Cap/selectors';
+import injectSaga from '../../../utils/injectSaga';
+import injectReducer from '../../../utils/injectReducer';
+import saga from './saga';
+import reducer from './reducer';
+import globalMessages from '../Cap/messages';
+import creativesSaga from '../../organisms/Creatives/saga';
+import {
+  eventTypesMap,
+  formatMessageHandler,
+} from '../../../utils/commonUtils';
+import CreatePromotionFormMessages from '../../organisms/CreatePromotionForm/messages';
+import CreatePromotionForm from '../../organisms/CreatePromotionForm';
+import PromotionAdvancedSettings from '../../organisms/PromotionAdvancedSettings';
+import ConfigureWorkflows from '../../organisms/ConfigureWorkflows';
+import ConfirmationModal from '../../molecules/ConfirmationModal';
+import integration from '../../../assets/integration.svg';
+import targetPointAllocationWorkflowSaga from '../../organisms/TargetPointAllocationWorkflowAction/saga';
+import targetPointAllocationWorkflowReducer from '../../organisms/TargetPointAllocationWorkflowAction/reducer';
+import { makeSelectTargetGroups } from '../../organisms/TargetPointAllocationWorkflowAction/selectors';
+import {
+  REQUEST,
+  SOURCE_PROMOTION,
+  DATE_FORMAT,
+  CREATE,
+  EDIT,
+  MODE_VIEW,
+  LOCALE_DATE_FORMAT,
+  CUSTOM,
+  SUCCESS,
+  ALWAYS_APPLY,
+  EXCLUSIVE,
+  //LOYALTY_PROMOTION_ENABLED,
+} from '../App/constants';
+import {
+  makeSelectCurrentProgram,
+  makeSelectEnablePromoIdentifierStatus,
+  makeSelectCurrentPromotion,
+} from './selectors';
+import {
+  components as components_constants,
+  promotionTypeMap,
+  promotionTypeTooltipMap,
+} from '../Cap/constants';
+import { initialFormData } from './initialState';
+import {
+  STEP_1,
+  STEP_2,
+  BEHAVIORAL_EVENTS,
+  getPeriodUnit,
+  getRestrictionsDuration,
+  MAX_ALLOWED_POINTS_PER_EVENT,
+  MAX_ALLOWED_TIMES_PER_CUSTOMER,
+  MAX_ALLOWED_POINTS_PER_CUSTOMER,
+  MAX_ALLOWED_TIMES_PER_PROMOTION,
+  MAX_ALLOWED_POINTS_PER_PROMOTION,
+  PERIOD_BASED,
+  NON_PERIOD_BASED,
+  MOVING_WINDOW,
+  POINTS_PROMOTION_ENHANCEMENTS,
+  GENERIC,
+  LOYALTY,
+  LOYALTY_EARNING,
+  MAX_REDEMPTIONS_PER_EARN_PER_CUSTOMER,
+  MAX_NUMBER_OF_EARNS_PER_CUSTOMER,
+  ISSUAL_PROMOTION_EXPIRY_BASED_ON,
+  EARN_PROMOTION_EXPIRY_BASED_ON,
+  MAX_NUMBER_OF_ISSUALS_PER_CUSTOMER,
+  MAX_POINTS_PER_EARN_PER_CUSTOMER,
+  ENABLE_ADVANCE_LOYALTY_PROMOTIONS,
+  DEFAULT,
+} from './constants';
+import withErrorBoundary from '../../../utils/withErrorBoundary';
+import withStyles from '../../../utils/withStyles';
+import { publicPath } from '../../../config/path';
+import ReconfigurePromotions from '../../organisms/ReconfigurePromotions';
+import PublishAndActivateModal from '../../molecules/PublishAndActivateModal';
+import { gtmPush } from '../../../utils/gtmTrackers';
+import {
+  NO_LIMIT,
+  SPECIFIC_VALUE,
+} from '../../organisms/PromotionSettings/constants';
+import { getStackability } from '../../organisms/PromotionsDetail/utils';
+
+import {
+  TRANSACTION_ADD,
+  TARGET_COMPLETED,
+  AWARD_TARGET_POINTS_ACTION,
+  ISSUE_ALTERNATE_CURRENCY,
+} from '../../organisms/ConfigureWorkflows/constants';
+import { CapTooltip } from '@capillarytech/cap-ui-library';
+import ReviewPromotionSlider from '../../organisms/ReviewPromotionSlider'
+
+const headerDivider = <div className="header-divider">|</div>;
+
+export const Promotions = ({
+  history,
+  actions,
+  workflowActions,
+  capActions,
+  targetPointAllocationWorkflowActions,
+  className,
+  intl: { formatMessage },
+  match: {
+    params: {
+      programId: programIdEdit,
+      promotionId: promotionIdEdit,
+      mode: currentUserMode,
+    },
+  },
+  currentProgramData: { currentProgram: currentProgramProp = {} } = {},
+  currentPromotionData: { promotion = [], getPromotionByIdStatus = '' } = {},
+  strategyData: { pointStrategy = {}, pointTypeIdData } = {},
+  enablePromoIdentifierStatusData: {
+    getStatusEnablePromoIdentifierStatus = '',
+    enablePromoIdentifier = {},
+  } = {},
+  checkReconfigureData: {
+    checkReconfigureProgramDetails: { requireReconfigure = false } = {},
+  } = {},
+  userData = {},
+  timeZoneData: { timezone = '' } = {},
+  fetchedProgramConfigData,
+  segregatePromotionsFlagData: {
+    getSegregatePromotionsStatus = '',
+    getSegregatePromotionsData = {},
+  } = {},
+  targetGroupData: {
+    getCompressedTargetGroupsStatus = '',
+    targetGroupsWithTargets = {},
+    targetGroupKeysPayload = {},
+    targetGroupObjectPayload = [],
+    isMultiselectTargetGroup = false,
+    targetGroupsActionsMapped = [],
+  } = {},
+}) => {
+  const { currentOrgDetails: { accessibleFeatures = [],basic_details = {} } = {} } = userData;
+  const hasPointsPromotionEnhancementsEnabled = accessibleFeatures.includes(
+    ENABLE_ADVANCE_LOYALTY_PROMOTIONS,
+  );
+  const isPromotionTypeEnabled = accessibleFeatures.includes(
+    ENABLE_ADVANCE_LOYALTY_PROMOTIONS,
+  );
+  const isSegragationEnabled = getSegregatePromotionsData?.[0]?.value == '1';
+  const [showUnsavedChanges, setShowUnsavedChange] = useState(false);
+  const [
+    showPublishAndActivateModal,
+    setShowPublishAndActivateModal,
+  ] = useState(false);
+  const [showReviewPromotionSlider, setShowReviewPromotionSlider] = useState(
+    false,
+  );
+  const [showSavePromotionSpinner, setShowSavePromotionSpinner] = useState(
+    false,
+  );
+  const [eventName, setEventName] = useState('');
+  const { toStep = 1 } = history?.location?.state || {};
+  useEffect(() => {
+    actions.getStatusEnablePromoIdentifierInPromoCreate();
+    setMode(!!programIdEdit ? EDIT : CREATE);
+  }, []);
+
+  useEffect(() => {
+    capActions.getTimeZone();
+    if (![REQUEST, SUCCESS].includes(getSegregatePromotionsStatus))
+      capActions.getSegregatePromotionsFlag();
+  }, []);
+
+  useEffect(
+    () => {
+      if (eventName === TARGET_COMPLETED) {
+        targetPointAllocationWorkflowActions.getTargetGroupsWithTargets();
+      }
+    },
+    [eventName],
+  );
+
+  const moreTooltipOptionObject = useMemo(
+    () => {
+      if (isMultiselectTargetGroup) {
+        return targetGroupObjectPayload;
+      } else if (targetGroupsActionsMapped?.length > 0) {
+        return targetGroupsActionsMapped.map(
+          targetGroupId => targetGroupsWithTargets[targetGroupId],
+        );
+      }
+    },
+    [
+      targetGroupsActionsMapped,
+      targetGroupKeysPayload,
+      targetGroupsWithTargets,
+    ],
+  );
+
+  const renderMoreTooltipOption = () =>
+    moreTooltipOptionObject?.map(targetGroup => {
+      return (
+        <CapRow key={targetGroup?.id} className="milestone-tooltip-margin">
+          {targetGroup?.name}
+        </CapRow>
+      );
+    });
+
+  const setTargetsPayload = value => {
+    let valueArray = [...value];
+    let payloadKeys = {};
+    let payloadObject = {};
+    valueArray.forEach(val => {
+      let targetIds = targetGroupsWithTargets[val]?.targets?.map(
+        target => target?.id,
+      );
+      // optimization scope for redux store payload store only neseccery data
+      payloadKeys[val] = targetIds;
+      payloadObject[val] = targetGroupsWithTargets[val];
+    });
+    const targetGroupObjectPayload = Object.values(payloadObject);
+    const isMultiselectTargetGroup = targetGroupObjectPayload?.length > 0;
+
+    targetPointAllocationWorkflowActions.setTargetsPayload(
+      payloadKeys,
+      targetGroupObjectPayload,
+      isMultiselectTargetGroup,
+    );
+  };
+
+  const getIssuePointsActionTargetGroupIds = () => {
+    const usedIssuePointTargetGroups = [];
+    const rulesetInfo = promotion?.[0]?.rulesetInfos || [];
+    rulesetInfo?.forEach(ruleset => {
+      ruleset?.rules?.forEach(rule => {
+        const caseToActions = rule.caseToActions;
+        // Loop through true actions
+        if (caseToActions?.true) {
+          caseToActions.true.forEach(action => {
+            if (
+              AWARD_TARGET_POINTS_ACTION === action?.actionName ||
+              action?.actionName?.includes(ISSUE_ALTERNATE_CURRENCY)
+            ) {
+              usedIssuePointTargetGroups.push(
+                action?.mandatoryPropertiesValues?.TargetGroupId,
+              );
+            }
+          });
+        }
+
+        // Loop through false actions
+        if (caseToActions?.false) {
+          caseToActions.false.forEach(action => {
+            if (
+              AWARD_TARGET_POINTS_ACTION === action?.actionName ||
+              action?.actionName?.includes(ISSUE_ALTERNATE_CURRENCY)
+            ) {
+              usedIssuePointTargetGroups.push(
+                action?.mandatoryPropertiesValues?.TargetGroupId,
+              );
+            }
+          });
+        }
+      });
+    });
+    targetPointAllocationWorkflowActions.targetGroupsActionsMapped(
+      usedIssuePointTargetGroups,
+    );
+  };
+  const getPromotionById = () => {
+    actions.getPromotionByProgramIdAndPromotionId(
+      {
+        programId: programIdEdit,
+        promotionId: promotionIdEdit,
+      },
+      res => {
+        if (res.status.code === 200) {
+          const currentPromotion = res?.data?.[0];
+          const {
+            id = '',
+            name = '',
+            description = '',
+            allocatePointsOn = '',
+            startDate = '',
+            endDate = '',
+            programId = '',
+            programName = '',
+            eventName = '',
+            eventSubTypeName = '',
+            isActive = null,
+            promotionStatus = '',
+            limits: {
+              totalPointsPerEventLimit,
+              numberOfTimesPerCustomer,
+              pointsPerCustomer,
+              totalPointsInPromotion,
+            } = {},
+            metadata = {},
+            useProportions,
+            pointsOfferType,
+          } = currentPromotion || {};
+          const linkedTargetGroupVsTargetRuleIdMap =
+            currentPromotion?.promotionRestrictions
+              ?.linkedTargetGroupVsTargetRuleIdMap || null;
+          let eventNameLocal = '';
+          if (eventName === eventTypesMap.GENERICEVENT) {
+            eventNameLocal = eventSubTypeName;
+            setEventCategory(BEHAVIORAL_EVENTS);
+          } else {
+            eventNameLocal = eventTypesMap[eventName];
+          }
+          setEventName(eventNameLocal);
+          /* Updating moment's timezone wrt the cluster */
+          // commenting for future refrence
+          // const tz = timezone === 'GMT' ? 'utc' : timezone;
+          // moment.tz.setDefault(tz);
+          moment.tz.setDefault(basic_details?.timezone);
+
+          const createPromotionFormObj = {
+            id,
+            name,
+            description,
+            type: allocatePointsOn,
+            startDate: moment(startDate).format(DATE_FORMAT),
+            endDate: moment(endDate).format(DATE_FORMAT),
+            programId,
+            programName,
+            eventName: eventNameLocal,
+            isActive,
+            useProportions,
+            promotionEvaluationType: 'AFTER_EVENT',
+            sourceId: -1,
+            promotionSourceType: '',
+            promotionStatus,
+            promotionType: pointsOfferType,
+            linkedTargetGroupVsTargetRuleIdMap,
+          };
+          const useLimits = [
+            totalPointsPerEventLimit,
+            numberOfTimesPerCustomer,
+            pointsPerCustomer,
+            totalPointsInPromotion,
+          ].find(limit => limit !== -1 && limit !== 0);
+          const advancedPromotionSettingsObj = {
+            pointsPerEventLimit:
+              totalPointsPerEventLimit === -1 ? 0 : totalPointsPerEventLimit,
+            eventsPerMemberLimit:
+              numberOfTimesPerCustomer === -1 ? 0 : numberOfTimesPerCustomer,
+            pointsPerMemberLimit:
+              pointsPerCustomer === -1 ? 0 : pointsPerCustomer,
+            pointsPerPromotionLimit:
+              totalPointsInPromotion === -1 ? 0 : totalPointsInPromotion,
+            isPointAllocationLimits: !!useLimits,
+            isPromotionExternalIdentifier: !!currentPromotion?.identifier,
+            isPromotionAttributes: metadata.length,
+            externalIdentifier: currentPromotion?.identifier,
+            promotionMetaData: metadata,
+          };
+          updateFormDataValue(
+            components_constants.createPromotionForm,
+            createPromotionFormObj,
+          );
+          updateFormDataValue(
+            components_constants.promotionAdvancedSettings,
+            advancedPromotionSettingsObj,
+          );
+          getProgramById(createPromotionFormObj?.programId);
+          toStep === 1 ? onStepChange(STEP_1) : setShowNextContent(true);
+        }
+      },
+    );
+  };
+  useEffect(
+    () => {
+      if (promotionIdEdit && programIdEdit) {
+        getPromotionById();
+        getPointsStrategies(programIdEdit);
+        capActions.checkReconfigureProgram(programIdEdit);
+      }
+    },
+    [promotionIdEdit, programIdEdit, timezone],
+  );
+  const getProgramById = programId => actions.getProgramById(programId);
+  const getPointsStrategies = programId =>
+    capActions.getStrategyData({ programId });
+
+  const [freezeFields, setFreezeFields] = useState(false);
+  const [currentProgram, setCurrentProgram] = useState({});
+  const [eventCategory, setEventCategory] = useState('');
+  const [showNextContent, setShowNextContent] = useState(!promotionIdEdit);
+  const [formData, setFormData] = useState(initialFormData);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [key, setkey] = useState(0);
+  const [nextStep, updateNextStep] = useState(null);
+  const [showModal, updateShowModal] = useState(false);
+  const [triggerSaveExpression, setTriggerSaveExpression] = useState(false);
+  const [triggerSaveRuleset, setTriggerSaveRuleset] = useState(false);
+  const [loadActivities, setLoadActivities] = useState(true);
+  const [mode, setMode] = useState(CREATE);
+  const [promotionPayload, setPromotionPayload] = useState({});
+  const [liabilitySettings, setLiabilitySettings] = useState([]);
+  const [
+    showUnsavedChangeshWarningModal,
+    setUnsavedChangeshWarningModal,
+  ] = useState(false);
+
+  const [isPointsAllocationEnabled, setIsPointsAllocationEnabled] = useState(
+    false,
+  );
+  useEffect(
+    () => {
+      if (
+        getCompressedTargetGroupsStatus === SUCCESS &&
+        eventName === TARGET_COMPLETED &&
+        mode === EDIT
+      ) {
+        const targetGroupsId =
+          formData?.[components_constants.createPromotionForm]
+            ?.linkedTargetGroupVsTargetRuleIdMap || {};
+        if (!isMultiselectTargetGroup) {
+          const targetGroupsIArray = Object.keys(targetGroupsId);
+          targetGroupsIArray?.length > 0 &&
+            setTargetsPayload(Object.keys(targetGroupsId));
+        }
+      }
+    },
+
+    [
+      eventName,
+      formData?.[components_constants.createPromotionForm]
+        ?.linkedTargetGroupVsTargetRuleIdMap,
+      getCompressedTargetGroupsStatus,
+      mode,
+    ],
+  );
+  useEffect(
+    () => {
+      if (mode === EDIT && promotion && eventName === TARGET_COMPLETED) {
+        getIssuePointsActionTargetGroupIds();
+      }
+    },
+    [promotion, mode, eventName],
+  );
+  useEffect(
+    () => () => {
+      // clean up the targetPointAllocation redux store
+      targetPointAllocationWorkflowActions.setTargetsPayload({}, [], false);
+      targetPointAllocationWorkflowActions.targetGroupsActionsMapped([]);
+    },
+    [],
+  );
+  const pointsAllocationDefaultState = {
+    maxPointsAllocationPerActivity: { name: NO_LIMIT, value: '' },
+    maxPointsAllocationPerCustomer: {
+      name: NO_LIMIT,
+      value: '',
+      duration: '',
+    },
+    maxNoOfActivitiesPerCustomer: {
+      name: NO_LIMIT,
+      value: '',
+      duration: '',
+    },
+    maxPointsAllocAcrossCustomers: {
+      name: NO_LIMIT,
+      value: '',
+      duration: '',
+    },
+    maxNoOfActivitiesAcrossCustomer: {
+      name: NO_LIMIT,
+      value: '',
+      duration: '',
+    },
+    issualExpiry: {
+      name: EARN_PROMOTION_EXPIRY_BASED_ON,
+      type: SOURCE_PROMOTION,
+      value: '',
+    },
+    issualLimit: {
+      name: MAX_NUMBER_OF_EARNS_PER_CUSTOMER,
+      value: '1',
+    },
+    enrolmentExpiry: {
+      name: ISSUAL_PROMOTION_EXPIRY_BASED_ON,
+      type: SOURCE_PROMOTION,
+      value: '',
+    },
+    enrolmentLimit: {
+      name: MAX_NUMBER_OF_ISSUALS_PER_CUSTOMER,
+      value: '1',
+    },
+    redemptionLimit: {
+      name: MAX_REDEMPTIONS_PER_EARN_PER_CUSTOMER,
+      value: '1',
+    },
+  };
+  const [pointsAllocationLimitData, setPointsAllocationLimitData] = useState(
+    pointsAllocationDefaultState,
+  );
+  const [stackingData, setStackingData] = useState({
+    value: DEFAULT,
+    isStackable: false,
+    isExclusive: false,
+    isAlwaysApply: false,
+  });
+  const [
+    pointsAllocationLimitDataLocal,
+    setPointsAllocationLimitDataLocal,
+  ] = useState(pointsAllocationDefaultState);
+
+  const PromotionIssueTypeMap = {
+    [GENERIC]: 'typeTitleAvailableForAll',
+    [LOYALTY]: 'typeTitleDirectIssue',
+    [LOYALTY_EARNING]: 'typeTitleEnrollAndIssue',
+  };
+
+  const showNext = () => {
+    if (currentStep < Number(STEP_2)) {
+      let step = Number(currentStep) + 1;
+      setCurrentStep(step.toString());
+    }
+  };
+
+  const currentProgramId = mode === EDIT ? programIdEdit : currentProgram.id;
+  const isStackingDone = fetchedProgramConfigData?.fetchedProgramConfigData?.[
+    currentProgramId
+  ]?.[0]?.value
+    ? JSON.parse(
+        fetchedProgramConfigData.fetchedProgramConfigData[currentProgramId][0]
+          .value,
+      )?.isStackingEnabled
+    : false;
+
+  useEffect(
+    () => {
+      if (mode === EDIT) {
+        const redemptionRestrictionsArr =
+          promotion[0]?.promotionRestrictions?.restrictions
+            ?.redemptionRestrictions || [];
+        const earnRestrictionsArr =
+          promotion[0]?.promotionRestrictions?.restrictions?.earnRestrictions ||
+          [];
+        const expiryRestrictionsArr =
+          promotion[0]?.promotionRestrictions?.restrictions
+            ?.expiryRestrictions || [];
+        const issualRestrictionsArr =
+          promotion[0]?.promotionRestrictions?.restrictions
+            ?.issualRestrictions || [];
+        const isStackable =
+          promotion[0]?.promotionRestrictions?.isStackable || false;
+        const isExclusive =
+          promotion[0]?.promotionRestrictions?.isExclusive || false;
+        const isAlwaysApply =
+          promotion[0]?.promotionRestrictions?.isAlwaysApply || false;
+        let pointsAllocationInitialState = cloneDeep(
+          pointsAllocationDefaultState,
+        );
+        switch (true) {
+          case redemptionRestrictionsArr.length > 0:
+            redemptionRestrictionsArr.forEach(data => {
+              const { name, value, type, periodUnit } = data;
+              const customObj = {
+                name: value ? SPECIFIC_VALUE : NO_LIMIT,
+                value: value ? value.toString() : '',
+                duration: value
+                  ? type === PERIOD_BASED
+                    ? getRestrictionsDuration[periodUnit]
+                    : 'promotion duration'
+                  : '',
+              };
+
+              switch (name) {
+                case MAX_ALLOWED_POINTS_PER_EVENT: {
+                  pointsAllocationInitialState = {
+                    ...pointsAllocationInitialState,
+                    maxPointsAllocationPerActivity: {
+                      name: value ? SPECIFIC_VALUE : NO_LIMIT,
+                      value: value ? value.toString() : '',
+                    },
+                  };
+                  break;
+                }
+                case MAX_ALLOWED_TIMES_PER_CUSTOMER: {
+                  pointsAllocationInitialState = {
+                    ...pointsAllocationInitialState,
+                    maxNoOfActivitiesPerCustomer: customObj,
+                  };
+                  break;
+                }
+                case MAX_ALLOWED_POINTS_PER_CUSTOMER: {
+                  pointsAllocationInitialState = {
+                    ...pointsAllocationInitialState,
+                    maxPointsAllocationPerCustomer: customObj,
+                  };
+                  break;
+                }
+                case MAX_ALLOWED_TIMES_PER_PROMOTION: {
+                  pointsAllocationInitialState = {
+                    ...pointsAllocationInitialState,
+                    maxNoOfActivitiesAcrossCustomer: customObj,
+                  };
+                  break;
+                }
+                case MAX_ALLOWED_POINTS_PER_PROMOTION: {
+                  pointsAllocationInitialState = {
+                    ...pointsAllocationInitialState,
+                    maxPointsAllocAcrossCustomers: customObj,
+                  };
+                  break;
+                }
+                case MAX_REDEMPTIONS_PER_EARN_PER_CUSTOMER:
+                  pointsAllocationInitialState = {
+                    ...pointsAllocationInitialState,
+                    redemptionLimit: {
+                      name: MAX_REDEMPTIONS_PER_EARN_PER_CUSTOMER,
+                      value,
+                    },
+                  };
+                  break;
+              }
+            });
+          case earnRestrictionsArr.length > 0:
+            earnRestrictionsArr.map(data => {
+              const { name, value } = data;
+              switch (name) {
+                case MAX_NUMBER_OF_EARNS_PER_CUSTOMER:
+                  pointsAllocationInitialState = {
+                    ...pointsAllocationInitialState,
+                    issualLimit: {
+                      name: MAX_NUMBER_OF_EARNS_PER_CUSTOMER,
+                      value,
+                    },
+                  };
+                  break;
+              }
+            });
+          case expiryRestrictionsArr.length > 0:
+            expiryRestrictionsArr.map(data => {
+              const { name, type, value } = data;
+              switch (name) {
+                case ISSUAL_PROMOTION_EXPIRY_BASED_ON:
+                  pointsAllocationInitialState = {
+                    ...pointsAllocationInitialState,
+                    enrolmentExpiry: {
+                      name: ISSUAL_PROMOTION_EXPIRY_BASED_ON,
+                      type,
+                      value,
+                    },
+                  };
+                  break;
+                case EARN_PROMOTION_EXPIRY_BASED_ON:
+                  pointsAllocationInitialState = {
+                    ...pointsAllocationInitialState,
+                    issualExpiry: {
+                      name: EARN_PROMOTION_EXPIRY_BASED_ON,
+                      type,
+                      value,
+                    },
+                  };
+                  break;
+              }
+            });
+          case issualRestrictionsArr.length > 0:
+            issualRestrictionsArr.map(data => {
+              const { name, value } = data;
+              switch (name) {
+                case MAX_NUMBER_OF_ISSUALS_PER_CUSTOMER:
+                  pointsAllocationInitialState = {
+                    ...pointsAllocationInitialState,
+                    enrolmentLimit: {
+                      name: MAX_NUMBER_OF_ISSUALS_PER_CUSTOMER,
+                      value,
+                    },
+                  };
+                  break;
+              }
+            });
+        }
+        let value = '';
+        if (isAlwaysApply) {
+          value = 'ALWAYS_APPLY';
+        } else if (isExclusive) {
+          value = 'EXCLUSIVE';
+        } else if (isStackable) {
+          value = 'NON_EXCLUSIVE';
+        } else {
+          value = 'DEFAULT';
+        }
+        setPointsAllocationLimitDataLocal(pointsAllocationInitialState);
+        setStackingData({
+          value,
+          isStackable,
+          isExclusive,
+          isAlwaysApply,
+        });
+        setPointsAllocationLimitData(pointsAllocationInitialState);
+
+        // moved edit mode points allocation toggle check here
+        const propertiesToExclude = [
+          'issualLimit',
+          'enrolmentLimit',
+          'redemptionLimit',
+        ];
+        const filteredData = Object.entries(pointsAllocationInitialState)
+          .filter(([key]) => !propertiesToExclude.includes(key))
+          .map(([, value]) => value);
+        // Check if any value has a length greater than 0
+        const isPointsAllocConfigured = filteredData.some(
+          ({ value }) => value.length > 0,
+        );
+        if (isPointsAllocConfigured) {
+          setIsPointsAllocationEnabled(true);
+        } else {
+          setIsPointsAllocationEnabled(false);
+        }
+      }
+    },
+    [promotion?.[0]?.promotionRestrictions, mode],
+  );
+  useEffect(
+    () => {
+      if (Object.keys(currentProgramProp).length)
+        setCurrentProgram(currentProgramProp);
+    },
+    [currentProgramProp],
+  );
+  useEffect(
+    () => {
+      if (triggerSaveRuleset) {
+        requireReconfigure
+          ? setShowUnsavedChange(true)
+          : setShowPublishAndActivateModal(true);
+          setShowReviewPromotionSlider(true);
+        const promoFormData =
+          formData[components_constants.createPromotionForm];
+        const promotionDetails = Object.assign(promoFormData, {
+          unpublishedChanges: requireReconfigure,
+          mode,
+          eventKey: 'INITIATE_SAVE_AND_PUBLISH_PROMOTION',
+        });
+        gtmPush('promotionDetails', promotionDetails);
+      }
+    },
+    [triggerSaveRuleset],
+  );
+  const showSpin =
+    getStatusEnablePromoIdentifierStatus === REQUEST ||
+    getPromotionByIdStatus === REQUEST ||
+    showSavePromotionSpinner ||
+    getCompressedTargetGroupsStatus === REQUEST;
+
+  const onStepChange = step => {
+    if (currentStep === STEP_1) {
+      setTriggerSaveExpression(true);
+    }
+    if (currentStep === STEP_2) {
+      setTriggerSaveExpression(false);
+      updateNextStep(step);
+    }
+    if (step === STEP_2) setkey(key + 1);
+    setCurrentStep(step);
+  };
+
+  const redirectToPromotionsListView = () =>
+    history.push(`${publicPath}/promotions/list`);
+
+  const handleCancel = () => {
+    setCurrentStep(nextStep);
+    updateNextStep(null);
+    updateShowModal(false);
+  };
+
+  const handlePublishWarningModalOkClick = () =>
+    setUnsavedChangeshWarningModal(false);
+
+  const handleUnsavedChangeshWarningModalCancel = () => {
+    redirectToPromotionsListView();
+    handleUnsavedChangeshWarningModalClose();
+  };
+
+  const handleUnsavedChangeshWarningModalClose = () =>
+    setUnsavedChangeshWarningModal(false);
+
+  const updateFormDataValue = (key, obj) => {
+    setFormData(prevFormData => ({
+      ...prevFormData,
+      [key]: obj,
+    }));
+  };
+
+  const showPromoIdentifier = enablePromoIdentifier?.[0]?.value === '1';
+
+  const getHeaderDescriptionRecord = ({ labelText, value }) => (
+    <>
+      <CapLabel type="label1" className="description-cap-label">
+        {formatMessage(globalMessages[labelText])}
+      </CapLabel>
+      <CapLabel type="label2">
+        {formData[components_constants.promotionAdvancedSettings]?.[value]
+          ? formatMessage(globalMessages.yes)
+          : formatMessage(globalMessages.no)}
+      </CapLabel>
+    </>
+  );
+
+  const getHeaderDescriptionRecordGeneric = ({ labelText, value }) => (
+    <>
+      <CapLabel type="label1" className="description-cap-label">
+        {formatMessage(labelText)}
+      </CapLabel>
+      <CapLabel type="label2">{value}</CapLabel>
+    </>
+  );
+
+  const getHeaderDescriptionRecordPromotionType = ({ type, value }) => (
+    <>
+      <CapLabel type="label1" className="description-cap-label">
+        {formatMessage(messages[type])}
+      </CapLabel>
+      <CapLabel type="label2">
+        {value
+          ? formatMessage(globalMessages.yes)
+          : formatMessage(globalMessages.default)}
+      </CapLabel>
+    </>
+  );
+
+  const issualLimitValue = () => {
+    let issualValues = false;
+    if (
+      pointsAllocationLimitData.issualExpiry.type === CUSTOM &&
+      pointsAllocationLimitData.issualExpiry.value
+    ) {
+      issualValues = true;
+      return issualValues;
+    }
+    if (pointsAllocationLimitData.issualLimit.value) {
+      issualValues = true;
+      return issualValues;
+    }
+    if (pointsAllocationLimitData.redemptionLimit.value) {
+      issualValues = true;
+      return issualValues;
+    }
+    return issualValues;
+  };
+
+  const enrolmentLimitValue = () => {
+    let enrolmentValue = false;
+    if (
+      pointsAllocationLimitData.enrolmentExpiry.type === CUSTOM &&
+      pointsAllocationLimitData.enrolmentExpiry.value
+    ) {
+      enrolmentValue = true;
+      return enrolmentValue;
+    }
+    if (pointsAllocationLimitData.enrolmentLimit.value) {
+      enrolmentValue = true;
+      return enrolmentValue;
+    }
+    return enrolmentValue;
+  };
+
+  const getAdvanceSettingsDescription = () => (
+    <>
+      {formatMessage(messages.advancedSettingDesc)}
+      <CapRow className="advanced-setting-description" type="flex">
+        {formData[components_constants.createPromotionForm]?.promotionType ===
+          'LOYALTY_EARNING' && (
+          <>
+            {getHeaderDescriptionRecordPromotionType({
+              type: 'enrolmentLimit',
+              value: enrolmentLimitValue(),
+            })}
+            {headerDivider}
+          </>
+        )}
+        {(formData[components_constants.createPromotionForm]?.promotionType ===
+          'LOYALTY' ||
+          formData[components_constants.createPromotionForm]?.promotionType ===
+            'LOYALTY_EARNING') && (
+          <>
+            {getHeaderDescriptionRecordPromotionType({
+              type: 'issualLimit',
+              value: issualLimitValue(),
+            })}
+            {headerDivider}
+          </>
+        )}
+        {hasPointsPromotionEnhancementsEnabled
+          ? getHeaderDescriptionRecordGeneric({
+              labelText: globalMessages.pointAllocationLimits,
+              value: isPointsAllocationEnabled
+                ? formatMessage(globalMessages.yes)
+                : formatMessage(globalMessages.no),
+            })
+          : getHeaderDescriptionRecord({
+              labelText: 'pointAllocationLimits',
+              value: 'isPointAllocationLimits',
+            })}
+        {headerDivider}
+        {showPromoIdentifier ? (
+          <>
+            {getHeaderDescriptionRecord({
+              labelText: 'externalIdentifier',
+              value: 'isPromotionExternalIdentifier',
+            })}
+            {headerDivider}
+          </>
+        ) : (
+          ''
+        )}
+        {getHeaderDescriptionRecord({
+          labelText: 'promotionAttributes',
+          value: 'isPromotionAttributes',
+        })}
+        {getStackability(stackingData, isStackingDone) !== formatMessage(messages.notStackableText) && hasPointsPromotionEnhancementsEnabled && (
+          <>
+            {headerDivider}
+            {getHeaderDescriptionRecordGeneric({
+              labelText: messages.stackability,
+              value: formatMessage(
+                promotionDetailsMessages[
+                  getStackability(stackingData, isStackingDone)
+                ],
+              ),
+            })}
+          </>
+        )}
+      </CapRow>
+    </>
+  );
+
+  const getSteps = () => {
+    const promotionRulesets = promotion?.[0]?.rulesetInfos || [];
+    const allSteps = [
+      {
+        header: (
+          <>
+            <StepAccordianHeader
+              className="promotion-accordian-header"
+              size="label"
+              title={formatMessage(messages.promotionWorkflows)}
+              description={formatMessage(messages.promotionWorkflowsDesc)}
+              disabled={showNextContent}
+            />
+          </>
+        ),
+        key: STEP_1,
+        disabled: showNextContent,
+        content: (
+          <ConfigureWorkflows
+            key={1}
+            currentProgram={currentProgram}
+            showNext={showNext}
+            pointStrategy={pointStrategy}
+            pointTypeIdData={pointTypeIdData}
+            showModal={showModal}
+            updateShowModal={updateShowModal}
+            handleCancel={handleCancel}
+            source={SOURCE_PROMOTION}
+            eventType={
+              formData[components_constants.createPromotionForm].eventName
+            }
+            isGenericEvent={eventCategory === BEHAVIORAL_EVENTS}
+            triggerSaveExpression={triggerSaveExpression}
+            triggerSaveRuleset={triggerSaveRuleset}
+            promotionFormData={formData}
+            isPromotionEditFlow={!!promotionIdEdit}
+            promotionRulesets={promotionRulesets}
+            getPromotionByIdStatus={getPromotionByIdStatus}
+            getPromotionById={getPromotionById}
+            setPromotionPayload={setPromotionPayload}
+            /* Commented code to serve as a reference for implementing feature control for promotions in the future. */
+            // hasNewUIPromotionEnabled={accessibleFeatures.includes(
+            //   LOYALTY_PROMOTION_ENABLED,
+            // )}
+            hasNewUIPromotionEnabled
+            promotionsEventCategory={eventCategory}
+          />
+        ),
+      },
+      {
+        header: (
+          <CapRow
+            type="flex"
+            className="promotion-advanced-settings-header-row"
+          >
+            <StepAccordianHeader
+              className={classnames('promotion-accordian-header')}
+              size="label"
+              title={formatMessage(globalMessages.advancedSettingsOptional)}
+              description={getAdvanceSettingsDescription()}
+              disabled={showNextContent}
+            />
+            <PromotionAdvancedSettings
+              updateFormDataValue={updateFormDataValue}
+              className="promotion-advanced-settings"
+              formData={
+                formData[components_constants.promotionAdvancedSettings]
+              }
+              showNext={showNext}
+              mode={mode}
+              showPromoIdentifier={showPromoIdentifier}
+              programId={programIdEdit || currentProgram.id}
+              promotionId={promotionIdEdit}
+              eventName={
+                formData[components_constants.createPromotionForm]?.eventName
+              }
+              showNextContent={showNextContent}
+              liabilitySettings={liabilitySettings}
+              setLiabilitySettings={setLiabilitySettings}
+              pointsAllocationLimitData={pointsAllocationLimitData}
+              setPointsAllocationLimitData={setPointsAllocationLimitData}
+              isPointsAllocationEnabled={isPointsAllocationEnabled}
+              setIsPointsAllocationEnabled={setIsPointsAllocationEnabled}
+              hasPointsPromotionEnhancementsEnabled={
+                hasPointsPromotionEnhancementsEnabled
+              }
+              promotionType={
+                formData[components_constants.createPromotionForm]
+                  ?.promotionType
+              }
+              pointsAllocationLimitDataLocal={pointsAllocationLimitDataLocal}
+              setPointsAllocationLimitDataLocal={
+                setPointsAllocationLimitDataLocal
+              }
+              setStackingData={setStackingData}
+              stackingData={stackingData}
+            />
+          </CapRow>
+        ),
+        disabled: showNextContent,
+        className: 'promotions-steps-advance-setting',
+        key: STEP_2,
+      },
+    ];
+    return allSteps;
+  };
+
+  const handlePromotionFormEdit = () => {
+    setLoadActivities(!!promotionIdEdit);
+    setShowNextContent(true);
+    setCurrentStep(0);
+  };
+
+  const handleCloseUnsavedslidebox = () => {
+    setShowUnsavedChange(false);
+    setTriggerSaveRuleset(false);
+  };
+
+  const getDescriptionRecord = ({ title, value, isProgram = false }) => (
+    <>
+      <CapLabel title={title} type="label1" className="description-cap-label">
+        {title}
+      </CapLabel>
+      <CapLabel
+        type="label2"
+        title={value}
+        className={isProgram ? 'description-cap-content' : ''}
+      >
+        {value}
+      </CapLabel>
+    </>
+  );
+  const getDescription = () => (
+    <CapRow className="create-promotion-description">
+      {showNextContent ? (
+        formatMessage(messages.newPromotionDesc)
+      ) : (
+        <CapRow>
+          {getDescriptionRecord({
+            title: formatMessage(globalMessages.program),
+            value:
+              formData[components_constants.createPromotionForm]?.programName,
+            isProgram: true,
+          })}
+          {headerDivider}
+          {getDescriptionRecord({
+            title: formatMessage(globalMessages.customerActivity),
+            value:
+              formData[components_constants.createPromotionForm]?.eventName,
+          })}
+          {formData[components_constants.createPromotionForm].eventName !==
+            TARGET_COMPLETED && (
+            <>
+              {headerDivider}
+              {getDescriptionRecord({
+                title: formatMessage(messages.promotionAppliedOn),
+                value: (
+                  <CapRow className="promotion-appliedOn-tooltip">
+                    {formatMessageHandler(
+                      formatMessage,
+                      messages[
+                        promotionTypeMap[
+                          (formData[components_constants.createPromotionForm]
+                            ?.type)
+                        ]
+                      ],
+                      formData[components_constants.createPromotionForm]?.type,
+                    )}
+                    {/* <CapTooltipWithInfo
+                title={formatMessageHandler(
+                  formatMessage,
+                  messages[
+                  promotionTypeTooltipMap[
+                  (formData[components_constants.createPromotionForm]?.type)
+                  ]
+                  ],
+                  formData[components_constants.createPromotionForm]?.type,
+                )}
+              /> */}
+                  </CapRow>
+                ),
+              })}
+            </>
+          )}
+
+          {headerDivider}
+          {getDescriptionRecord({
+            title: formatMessage(CreatePromotionFormMessages.promotionType),
+            value: formatMessageHandler(
+              formatMessage,
+              messages[
+                PromotionIssueTypeMap[
+                  (formData[components_constants.createPromotionForm]
+                    ?.promotionType)
+                ]
+              ],
+              formData[components_constants.createPromotionForm]?.promotionType,
+            ),
+          })}
+          {headerDivider}
+          {getDescriptionRecord({
+            title: formatMessage(globalMessages.dateRange),
+            value: `${moment(
+              formData[components_constants.createPromotionForm]?.startDate,
+              DATE_FORMAT,
+            ).format(LOCALE_DATE_FORMAT)} - ${moment(
+              formData[components_constants.createPromotionForm]?.endDate,
+              DATE_FORMAT,
+            ).format(LOCALE_DATE_FORMAT)}`,
+          })}
+          {/* {headerDivider}
+          {getDescriptionRecord({
+            title: formatMessage(messages.status),
+            value: `Live`, // TODO :: Need to implement when actual data is available.
+          })} */}
+          {formData[components_constants.createPromotionForm].eventName ===
+            TARGET_COMPLETED && (
+            <>
+              {headerDivider}
+              {getDescriptionRecord({
+                title: formatMessage(messages.milestoneStreaks),
+                value: (
+                  <CapRow className="milestone-streak-more-tolltip">
+                    {moreTooltipOptionObject?.length > 0 &&
+                    isMultiselectTargetGroup ? (
+                      <>
+                        <CapTooltip
+                          title={
+                            <CapRow className="more-tooltip-container">
+                              {renderMoreTooltipOption()}
+                            </CapRow>
+                          }
+                          placement="top"
+                          getPopupContainer={() =>
+                            document.querySelector(
+                              '.create-promotion-form-header',
+                            )
+                          }
+                        >
+                          <span>{moreTooltipOptionObject?.length}</span>
+                          <CapIcon type="info" />
+                        </CapTooltip>
+                      </>
+                    ) : (
+                      '-'
+                    )}
+                  </CapRow>
+                ),
+              })}
+            </>
+          )}
+          {currentUserMode !== MODE_VIEW && (
+            <CapLink
+              onClick={handlePromotionFormEdit}
+              className="lp-link-promo-edit-details"
+              title={
+                <>
+                  <CapIcon type="edit" />
+                  {formatMessage(globalMessages.edit)}
+                </>
+              }
+            />
+          )}
+        </CapRow>
+      )}
+    </CapRow>
+  );
+
+  const onClickNext = showNextContent => {
+    setShowNextContent(showNextContent);
+    setLoadActivities(true);
+    showNext();
+  };
+
+  const handleMoveBackToListingPage = () => {
+    if (currentUserMode === MODE_VIEW) {
+      redirectToPromotionsListView();
+    } else {
+      setUnsavedChangeshWarningModal(true);
+    }
+  };
+
+  const savePromotionAndRedirect = () => {
+    setShowReviewPromotionSlider(true);
+    setTriggerSaveRuleset(true);
+  };
+  const handleSavePromotion = () => {
+    setShowPublishAndActivateModal(true);
+  };
+  const closePublishModal = () => {
+    setShowPublishAndActivateModal(false);
+    setShowReviewPromotionSlider(false);
+    setTriggerSaveRuleset(false);
+  };
+
+  const validatePromotionPayload = () => {
+    const { name, startDate, endDate, startRuleIdentifier } =
+      promotionPayload || {};
+    return name && startDate && endDate && startRuleIdentifier;
+  };
+  const getPointsAllocationPeriod = redemptionRestrictionObj => {
+    const periodsObj = {
+      type: NON_PERIOD_BASED,
+      periodType: undefined,
+      periodUnit: undefined,
+    };
+
+    if (
+      (redemptionRestrictionObj?.duration || '').length > 0 &&
+      redemptionRestrictionObj.duration !== 'promotion duration'
+    ) {
+      periodsObj.type = PERIOD_BASED;
+      periodsObj.periodType = MOVING_WINDOW;
+      periodsObj.periodUnit = getPeriodUnit[redemptionRestrictionObj.duration];
+    }
+
+    return periodsObj;
+  };
+  const getLoyaltyConfigMetaData = () => {
+    const parsePointsAllocationLimitValue = obj =>
+      obj?.value.length > 0 ? parseInt(obj.value, 10) : undefined;
+
+    const {
+      maxPointsAllocationPerActivity,
+      maxPointsAllocationPerCustomer,
+      maxNoOfActivitiesPerCustomer,
+      maxPointsAllocAcrossCustomers,
+      maxNoOfActivitiesAcrossCustomer,
+      enrolmentExpiry,
+      issualExpiry,
+      enrolmentLimit,
+      issualLimit,
+      redemptionLimit,
+    } = pointsAllocationLimitData;
+    const { isStackable, isExclusive, isAlwaysApply } = stackingData;
+    let result = {
+      restrictions: {
+        redemptionRestrictions: [],
+        expiryRestrictions: [],
+      },
+      loyaltyEarningType:
+        formData[components_constants.createPromotionForm]?.promotionType,
+      // need to apply logic for sending
+      linkedTargetGroupVsTargetRuleIdMap: isMultiselectTargetGroup
+        ? targetGroupKeysPayload
+        : formData?.[components_constants.createPromotionForm]
+            ?.linkedTargetGroupVsTargetRuleIdMap
+          ? formData?.[components_constants.createPromotionForm]
+              ?.linkedTargetGroupVsTargetRuleIdMap
+          : null,
+    };
+
+    //added additional points allocation toggle check since it was getting skipped
+    if (isPointsAllocationEnabled) {
+      if (maxPointsAllocationPerActivity.name !== NO_LIMIT) {
+        result.restrictions.redemptionRestrictions.push({
+          name: MAX_ALLOWED_POINTS_PER_EVENT,
+          value: parsePointsAllocationLimitValue(
+            maxPointsAllocationPerActivity,
+          ),
+          ...getPointsAllocationPeriod(maxPointsAllocationPerActivity),
+        });
+      }
+
+      if (maxNoOfActivitiesPerCustomer.name !== NO_LIMIT) {
+        result.restrictions.redemptionRestrictions.push({
+          name: MAX_ALLOWED_TIMES_PER_CUSTOMER,
+          value: parsePointsAllocationLimitValue(maxNoOfActivitiesPerCustomer),
+          ...getPointsAllocationPeriod(maxNoOfActivitiesPerCustomer),
+        });
+      }
+
+      if (maxPointsAllocationPerCustomer.name !== NO_LIMIT) {
+        result.restrictions.redemptionRestrictions.push({
+          name: MAX_ALLOWED_POINTS_PER_CUSTOMER,
+          value: parsePointsAllocationLimitValue(
+            maxPointsAllocationPerCustomer,
+          ),
+          ...getPointsAllocationPeriod(maxPointsAllocationPerCustomer),
+        });
+      }
+
+      if (maxNoOfActivitiesAcrossCustomer.name !== NO_LIMIT) {
+        result.restrictions.redemptionRestrictions.push({
+          name: MAX_ALLOWED_TIMES_PER_PROMOTION,
+          value: parsePointsAllocationLimitValue(
+            maxNoOfActivitiesAcrossCustomer,
+          ),
+          ...getPointsAllocationPeriod(maxNoOfActivitiesAcrossCustomer),
+        });
+      }
+
+      if (maxPointsAllocAcrossCustomers.name !== NO_LIMIT) {
+        result.restrictions.redemptionRestrictions.push({
+          name: MAX_ALLOWED_POINTS_PER_PROMOTION,
+          value: parsePointsAllocationLimitValue(maxPointsAllocAcrossCustomers),
+          ...getPointsAllocationPeriod(maxPointsAllocAcrossCustomers),
+        });
+      }
+    }
+    if (
+      formData[components_constants.createPromotionForm]?.promotionType ===
+      'LOYALTY_EARNING'
+    ) {
+      result.restrictions = {
+        ...result.restrictions,
+        redemptionRestrictions: [
+          ...result.restrictions.redemptionRestrictions,
+          {
+            name: redemptionLimit.name,
+            value: redemptionLimit.value || 1,
+            ...getPointsAllocationPeriod({}),
+          },
+        ],
+        earnRestrictions: [
+          {
+            name: issualLimit.name,
+            // Default value is 1
+            value: issualLimit.value,
+          },
+          {
+            name: MAX_POINTS_PER_EARN_PER_CUSTOMER,
+            value: -1,
+          },
+        ],
+        issualRestrictions: [
+          {
+            name: enrolmentLimit.name,
+            // Default value is 1
+            value: enrolmentLimit.value,
+          },
+        ],
+        expiryRestrictions: [
+          {
+            name: enrolmentExpiry.name,
+            type: enrolmentExpiry.type,
+            value: enrolmentExpiry.value,
+          },
+          {
+            name: issualExpiry.name,
+            type: issualExpiry.type,
+            value: issualExpiry.value,
+          },
+        ],
+      };
+    }
+
+    if (
+      formData[components_constants.createPromotionForm]?.promotionType ===
+      'LOYALTY'
+    ) {
+      result.restrictions = {
+        ...result.restrictions,
+        redemptionRestrictions: [
+          ...result.restrictions.redemptionRestrictions,
+          {
+            name: redemptionLimit.name,
+            value: redemptionLimit.value || 1,
+            ...getPointsAllocationPeriod({}),
+          },
+        ],
+        earnRestrictions: [
+          {
+            name: issualLimit.name,
+            value: issualLimit.value,
+          },
+          {
+            name: MAX_POINTS_PER_EARN_PER_CUSTOMER,
+            value: -1,
+          },
+        ],
+        issualRestrictions: [
+          {
+            name: enrolmentLimit.name,
+            value: -1,
+          },
+        ],
+        expiryRestrictions: [
+          {
+            name: issualExpiry.name,
+            type: issualExpiry.type,
+            value: issualExpiry.value,
+          },
+        ],
+      };
+    }
+    if (
+      formData[components_constants.createPromotionForm]?.eventName ===
+      TRANSACTION_ADD
+    ) {
+      result = {
+        ...result,
+        isStackable,
+        isExclusive,
+        isAlwaysApply,
+      };
+    }
+    return result;
+  };
+  const handlePublishModalOkClick = userMessage => {
+    closePublishModal();
+    setShowUnsavedChange(false);
+    if (validatePromotionPayload()) {
+      setShowSavePromotionSpinner(true);
+      workflowActions.savePromotion(
+        {
+          ...promotionPayload,
+          userMessage,
+          liabilitySettings,
+          programName: currentProgram.name,
+          ...(mode !== EDIT && hasPointsPromotionEnhancementsEnabled
+            ? isPointsAllocationEnabled
+              ? { loyaltyConfigMetaData: getLoyaltyConfigMetaData() }
+              : {}
+            : {}),
+          ...(formData[components_constants.createPromotionForm]
+            ?.promotionType !== 'GENERIC'
+            ? { loyaltyConfigMetaData: getLoyaltyConfigMetaData() }
+            : {}),
+          ...(isPromotionTypeEnabled
+            ? {
+                loyaltyConfigMetaData: getLoyaltyConfigMetaData(),
+              }
+            : {}),
+        },
+        response => {
+          if (response.success) {
+            let notificationMessage = '';
+            if (programIdEdit) notificationMessage = 'editedSuccessfully';
+            else notificationMessage = 'createdSuccessfully';
+            CapNotification.success({
+              message: formatMessage(globalMessages[notificationMessage]),
+            });
+            if (response?.result?.liabilityErrorMessage) {
+              CapNotification.error({
+                message: formatMessage(messages.liabilityErrorMessage),
+              });
+            }
+            const promotionDetails = Object.assign(promotionPayload, {
+              mode,
+              eventKey: 'SAVE_AND_PUBLISH_PROMOTION',
+            });
+            gtmPush('promotionDetails', promotionDetails);
+            history.push(`${publicPath}/promotions/list`);
+          }
+          setTriggerSaveRuleset(false);
+          setShowSavePromotionSpinner(false);
+        },
+      );
+    } else {
+      CapNotification.error({
+        message: formatMessage(messages.promotionValidationFailMessage),
+      });
+    }
+  };
+
+  return (
+    <CapSpin spinning={showSpin}>
+      <CapRow className={className}>
+        <CapHeader
+          title={`${
+            currentUserMode === MODE_VIEW
+              ? `${formatMessage(globalMessages.viewPromotion)}:`
+              : ''
+          } ${
+            !showNextContent
+              ? formData[components_constants.createPromotionForm].name
+              : formatMessage(messages.newPromotion)
+          }`}
+          prefix={
+            <CapIcon
+              type="back"
+              data-testid="back-icon"
+              onClick={handleMoveBackToListingPage}
+            />
+          }
+          className="create-promotion-form-header"
+          description={getDescription()}
+        />
+        <CapRow className="create-promotion-form-row">
+          {showNextContent && (
+            <CreatePromotionForm
+              onClickNext={onClickNext}
+              updateFormDataValue={updateFormDataValue}
+              formData={formData[components_constants.createPromotionForm]}
+              getProgramById={getProgramById}
+              currentProgram={currentProgram}
+              setCurrentProgram={setCurrentProgram}
+              getPointsStrategies={getPointsStrategies}
+              setEventCategory={setEventCategory}
+              loadActivities={loadActivities}
+              mode={mode}
+              setFreezeFields={setFreezeFields}
+              freezeFields={freezeFields}
+            />
+          )}
+          <ConfirmationModal
+            className="lp-modal-config-promotions"
+            isModalVisible={showUnsavedChangeshWarningModal}
+            handleOk={handlePublishWarningModalOkClick}
+            handleCancel={handleUnsavedChangeshWarningModalCancel}
+            handleClose={handleUnsavedChangeshWarningModalClose}
+            title={formatMessage(globalMessages.unsavedChanges)}
+            description={formatMessage(messages.unsavedChangesDesc)}
+            image={integration}
+            okText={formatMessage(messages.okText)}
+            cancelText={formatMessage(messages.cancelText)}
+          />
+          <CapRow className="next-step-wrapper">
+            <CapStepsAccordian
+              className="promotions-steps-accordian"
+              onChange={onStepChange}
+              activeKey={currentStep}
+              items={getSteps()}
+            />
+          </CapRow>
+          {currentUserMode !== MODE_VIEW && (
+            <CapRow className="next-step-wrapper">
+              <CapButton
+                onClick={savePromotionAndRedirect}
+                disabled={showNextContent}
+                className="lp-btn-promo-save-publish"
+              >
+                {formatMessage(messages.savePromotion)}
+              </CapButton>
+            </CapRow>
+          )}
+        </CapRow>
+      </CapRow>
+      {!isSegragationEnabled ? (
+        <>
+          {showUnsavedChanges && (
+            <ReconfigurePromotions
+              show={showUnsavedChanges}
+              handleClose={() => handleCloseUnsavedslidebox()}
+              handleSavePromotion={handleSavePromotion}
+              showSpinner={showSavePromotionSpinner}
+              programId={currentProgram?.id}
+            />
+          )}
+          {showPublishAndActivateModal && (
+            <PublishAndActivateModal
+              currentProgram={currentProgram}
+              modalType="PUBLISH"
+              handlePublishModalOkClick={handlePublishModalOkClick}
+              handlePublishModalCloseClick={closePublishModal}
+              visible={showPublishAndActivateModal}
+            />
+          )}
+        </>
+      ) : (
+        <>
+          {showReviewPromotionSlider && (
+            <ReviewPromotionSlider
+              show={showReviewPromotionSlider}
+              treeData={promotionPayload}
+              handlePublishModalOkClick={handlePublishModalOkClick}
+              handleClose={closePublishModal}
+            />
+          )}
+        </>
+      )}
+    </CapSpin>
+  );
+};
+Promotions.propTypes = {
+  currentProgramData: PropTypes.object,
+  intl: intlShape.isRequired,
+  className: PropTypes.string,
+  actions: PropTypes.object,
+  strategyData: PropTypes.object,
+  capActions: PropTypes.object,
+  enablePromoIdentifierStatusData: PropTypes.object,
+  match: PropTypes.object,
+  currentPromotionData: PropTypes.object,
+  history: PropTypes.object,
+  checkReconfigureData: PropTypes.object,
+  userData: PropTypes.object,
+  timeZoneData: PropTypes.object,
+  targetGroupData: PropTypes.object,
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    capActions: bindActionCreators(capActions, dispatch),
+    workflowActions: bindActionCreators(workflowActions, dispatch),
+    targetPointAllocationWorkflowActions: bindActionCreators(
+      targetPointAllocationWorkflowActions,
+      dispatch,
+    ),
+  };
+}
+
+const mapStateToProps = createStructuredSelector({
+  currentProgramData: makeSelectCurrentProgram(),
+  strategyData: makeSelectPointStrategyDetails(),
+  enablePromoIdentifierStatusData: makeSelectEnablePromoIdentifierStatus(),
+  currentPromotionData: makeSelectCurrentPromotion(),
+  checkReconfigureData: makeSelectCheckReconfigureProgram(),
+  userData: makeSelectCap(),
+  timeZoneData: makeSelectTimeZone(),
+  fetchedProgramConfigData: makeSelectGetProgramConfigDetails(),
+  segregatePromotionsFlagData: makeSelectSegregatePromotionsFlagStatus(),
+  targetGroupData: makeSelectTargetGroups(),
+});
+
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
+
+const withSaga = [
+  { key: 'promotions', saga },
+  { key: 'targetPointAllocation', saga: targetPointAllocationWorkflowSaga },
+].map(saga => injectSaga(saga));
+
+const withReducer = [
+  { key: 'promotions', reducer },
+  {
+    key: 'targetPointAllocation',
+    reducer: targetPointAllocationWorkflowReducer,
+  },
+].map(reducer => injectReducer(reducer));
+const creativesWithSaga = creativesSaga.map(saga => injectSaga(saga));
+
+export default withErrorBoundary(
+  compose(
+    ...withSaga,
+    ...creativesWithSaga,
+    ...withReducer,
+    withConnect,
+  )(withRouter(injectIntl(withStyles(Promotions, styles)))),
+  { showImage: true, useStyle: true },
+);