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

package/components/pages/ProgramSummary/ProgramSummary.js

@@ -4,33 +4,30 @@ import { injectIntl, intlShape } from 'react-intl';
 import withStyles from 'utils/withStyles';
 import { withRouter } from 'react-router-dom';
 import isEmpty from 'lodash/isEmpty';
+import CapModal from '@capillarytech/cap-ui-library/CapModal';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
 import { compose, bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { connect } from 'react-redux';
 import injectSaga from 'utils/injectSaga';
 import injectReducer from 'utils/injectReducer';
 import clearDataOnUnmount from 'utils/clearDataOnUnmount';
-import {
-  isTrue,
-  showReonNotEnabledIllustration,
-  parseQueryParams,
-} from 'utils/commonUtils';
+import { isTrue, showReonNotEnabledIllustration } from 'utils/commonUtils';
 import withErrorBoundary from 'utils/withErrorBoundary';
+
+import addEvent from 'assets/add-event.png';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
 import CapTab from '@capillarytech/cap-ui-library/CapTab';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapColoredTag from '@capillarytech/cap-ui-library/CapColoredTag';
-import { CAP_PINK } from '@capillarytech/cap-ui-library/styled/variables';
-import CustomSkeleton from '../../atoms/CustomSkeleton';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import classNames from 'classnames';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
 
-import PublishAndActivateModal from '../../molecules/PublishAndActivateModal';
 import integration from '../../../assets/integration.svg';
 import PageTemplate from '../../templates/PageTemplate';
-import PageHeader from '../../organisms/PageHeader';
+import PageHeader from '../../molecules/PageHeader';
 import CreateProgram from '../../organisms/CreateProgram';
 import ProgramPerformance from '../../organisms/ProgramPerformance';
 import Trackers from '../../organisms/Trackers';
@@ -40,32 +37,32 @@ import Coupons from '../../organisms/Coupons';
 import Communication from '../../organisms/Communication';
 import ConfigureProgram from '../ConfigureProgram';
 import ReviewTierUnloadModal from '../../organisms/ReviewTierUnloadModal';
-import PromotionsDetail from '../../organisms/PromotionsDetail';
-import LabelCustomisation from '../../atoms/LabelCustomisation';
-import ConfigureWorkflows from '../../organisms/ConfigureWorkflows';
-import EmptyStateIllustration from '../../molecules/EmptyStateIllustration';
-import VersioningPublishModal from '../../molecules/VersioningPublishModal';
-import notSupportedYet from '../../../assets/not-supported-yet.svg';
 
-import {
-  PERFORMANCE,
-  TIERS,
-  POINT_CONDITIONS,
-  COMMUNICATION,
-  OFFERS,
-  TRACKERS,
-  PROMOTIONS,
-  WORKFLOWS,
-  POINTSENGINE_ENDPOINT,
-  SUPPLEMENTARY_PROGRAM,
-  EXTERNAL_PROGRAM,
-} from './constants';
-import { PROGRAM_PERFIX_PATH } from '../Cap/constants';
+import * as constants from './constants';
+import * as globalConstants from '../Cap/constants';
 import styles from './style';
 import messages from './messages';
 import globalMessages from '../Cap/messages';
-import { publicPath } from '../../../config/path';
-import {
+import * as path from '../../../config/path';
+import * as appConstants from '../App/constants';
+import * as globalSelectors from '../Cap/selectors';
+import * as uitls from './utils';
+import * as actions from './actions';
+import * as capActions from '../Cap/actions';
+import * as workflowActions from '../../organisms/ConfigureWorkflows/actions';
+import * as selectors from './selectors';
+import saga from './saga';
+import reducer from './reducer';
+import * as context from './context';
+import ConfirmationModal from '../../molecules/ConfirmationModal';
+import { gtmPush } from '../../../utils/gtmTrackers';
+import ErrorBoundaryWrapper from '../../molecules/ErrorBoundaryWrapper';
+
+const modalTypeMap = {
+  PUBLISH: 'PUBLISH',
+  ACTIVATE: 'ACTIVATE',
+};
+const {
   REQUEST,
   UPDATE,
   SUCCESS,
@@ -74,58 +71,32 @@ import {
   MODE_VIEW,
   MODE_CONFIGURE,
   ENTITY_MESSAGE_TYPE,
-  //LOYALTY_PROMOTION_ENABLED,
-  LABEL_CUSTOMISATION_ENABLED,
-  LIVE,
-  SOURCE_LOYALTY,
-  ENABLE_PROGRAM_VERSIONING,
-  VIEW,
-  DESC,
-  SMS,
-  EMAIL,
-} from '../App/constants';
-import {
+} = appConstants;
+const {
+  makeSelectCurrentProgram,
+  makeSelectTrackers,
+  makeSelectReconfigureProgram,
+} = selectors;
+const {
   makeSelectMappedEntities,
   makeSelectProgramFilterType,
   makeSelectCheckReconfigureProgram,
   makeSelectEMFStatus,
   makeSelectPointStrategyDetails,
-  makeSelectPrograms,
-  makeSelectCap,
-  makeSelectCustomLabels,
-  makeSelectAlternateCurrencyFlagStatus,
-} from '../Cap/selectors';
-import { parseContactInfo } from './utils';
-import * as actions from './actions';
-import * as capActions from '../Cap/actions';
-import * as workflowActions from '../../organisms/ConfigureWorkflows/actions';
-import {
-  makeSelectCurrentProgram,
-  makeSelectTrackers,
-  makeSelectReconfigureProgram,
-  makeSelectOrgConfigDetails,
-  makeSelectPartnerProgramLinking,
-  makeSelectAlternateCurrencyList,
-} from './selectors';
-import saga from './saga';
-import reducer from './reducer';
-import { Provider } from './context';
-import ConfirmationModal from '../../molecules/ConfirmationModal';
-import { gtmPush } from '../../../utils/gtmTrackers';
-import ErrorBoundaryWrapper from '../../molecules/ErrorBoundaryWrapper';
-import { STEP_3 } from '../../organisms/ConfigureProgramSteps/constants';
-import PartnerProgramDashboard from '../../organisms/PartnerProgramDashboard';
-
-import { RBAC_CONFIGURATION_PARAMETERS } from '../../../utils/authWrapper';
-import { checkRBACPermission } from '../Cap/utils';
-import CenteredSkeleton from '../../atoms/CenteredSkeleton';
+} = globalSelectors;
+const { parseContactInfo } = uitls;
+const { publicPath } = path;
+const { PROGRAM_PERFIX_PATH } = globalConstants;
+const { Provider } = context;
 
-import { Status } from '../../../services/api';
-import * as CapTypes from '../Cap/constants';
-const modalTypeMap = {
-  PUBLISH: 'PUBLISH',
-  ACTIVATE: 'ACTIVATE',
-};
+const {
+  PERFORMANCE,
+  TIERS,
+  POINT_CONDITIONS,
+  COMMUNICATION,
+  OFFERS,
+  TRACKERS,
+} = constants;
 
 export const ProgramSummary = ({
   actions,
@@ -162,45 +133,7 @@ export const ProgramSummary = ({
   } = {},
   reconfigureData: { reconfigureStatus } = {},
   workflowActions,
-  programData: { getProgramsStatus, programDetails = [] } = {},
-  userData = {},
-  customLabelsData: { customLabels = {}, getCustomLabelsStatus } = {},
-  orgConfigDetailsData: {
-    getOrgConfigDetailsStatus,
-    orgConfigDetailsList = [],
-    isDraftPresent,
-  },
-  isPartnerProgramEnabledData: {
-    getPartnerProgramEnabledStatus = '',
-    isPartnerProgramEnabled = [],
-  },
-  alternateCurrencyFlag: {
-    getAlternateCurrencyStatus,
-    alternateCurrencyStatus: { value: alternateCurrencyFlagValue = false } = {},
-  } = {},
-  alternateCurrencyList: { alternateCurrencyListData = [] } = {},
 }) => {
-  const isProgramEditable = checkRBACPermission(
-    RBAC_CONFIGURATION_PARAMETERS.LOYALTY_UPDATE_PROGRAM,
-  );
-
-  const search = history?.location?.search || '';
-  const { currentOrgDetails: { accessibleFeatures = [] } = {} } = userData;
-  /* Commented code to serve as a reference for implementing feature control for promotions in the future. */
-  // const hasNewUIPromotionEnabled = accessibleFeatures.includes(
-  //   LOYALTY_PROMOTION_ENABLED,
-  // );
-  const hasNewUIPromotionEnabled = true;
-  const hasLabelCustomisationEnabled = accessibleFeatures.includes(
-    LABEL_CUSTOMISATION_ENABLED,
-  );
-  const { params: { programId, mode } = {} } = match;
-
-  const hasProgramVersioningEnabled = accessibleFeatures.includes(
-    ENABLE_PROGRAM_VERSIONING,
-  );
-  const hasPartnerProgramEnabled =
-    `${isPartnerProgramEnabled[0]?.value}` === '1';
   useEffect(
     () => {
       capActions.getStrategyData({ programId });
@@ -221,33 +154,6 @@ export const ProgramSummary = ({
     [getEMFStatus],
   );
 
-  useEffect(() => {
-    let isRetryApplicable = Status.getApiFailureCount(CapTypes.GET_CUSTOM_LABELS_REQUEST) 
-      ? Status.getApiFailureCount(CapTypes.GET_CUSTOM_LABELS_REQUEST) < 3 
-      : true;
-    if (getCustomLabelsStatus !== REQUEST && getCustomLabelsStatus !== SUCCESS && isRetryApplicable) {
-      capActions.getCustomLabels();
-    }
-  }, [getCustomLabelsStatus])
-
-  useEffect(() => {
-    let isRetryApplicable = Status.getApiFailureCount(CapTypes.ALTERNATE_CURRENCY_FLAG_REQUEST) 
-      ? Status.getApiFailureCount(CapTypes.ALTERNATE_CURRENCY_FLAG_REQUEST) < 3 
-      : true;
-    if (getAlternateCurrencyStatus !== REQUEST && getAlternateCurrencyStatus !== SUCCESS && isRetryApplicable) {
-      capActions.getAlternateCurrencyFlag();
-    }
-  }, [getAlternateCurrencyStatus])
-
-  useEffect(
-    () => {
-      if (!getProgramsStatus) {
-        capActions.getPrograms();
-      }
-    },
-    [getProgramsStatus],
-  );
-
   const refreshStrategyData = () =>
     capActions.getStrategyDataWithoutRefresh({ programId }, result => {
       if (result?.result?.strategyValue) {
@@ -255,29 +161,19 @@ export const ProgramSummary = ({
         capActions.syncStrategyData(result?.result);
       }
     });
+
   const [localPointStrategy, setLocalPointStrategy] = useState(pointStrategy);
+  const { params: { programId, mode } = {} } = match;
   const [currentStep, setCurrentStep] = useState(null);
   const [showSlideBox, setShowSlideBox] = useState(false);
   const [showPublishModal, setShowPublishModal] = useState(false);
+  const [userMessage, setUserMessage] = useState('');
   const [showActivateProgramModal, setShowActivateProgramModal] = useState(
     false,
   );
   const [showPublishWarningModal, setShowPublishWarningModal] = useState(false);
   const [suppressActivateModal, setSuppressActivateModal] = useState(false);
   const [reviewTierCallback, setReviewTierCallback] = useState(null);
-  const [version, setVersion] = useState(null);
-  const [isInitialVersionPristine, setIsInitialVersionPristine] = useState(
-    true,
-  );
-  const [versionStatus, setVersionStatus] = useState(null);
-  const [configureModeStep, setConfigureModeStep] = useState(null);
-  const [isFirstNonDefaultProgram, setIsFirstNonDefaultProgram] = useState(false);
-  const [isFixedValueEmptyForUntilTierUpgradeValidity, setIsFixedValueEmptyForUntilTierUpgradeValidity] = useState(false);
-
-  useEffect(()=> {
-    const firstNonDefault = programDetails.some((program, index) => (program?.id == programId && index === 1));
-    setIsFirstNonDefaultProgram(firstNonDefault);
-  }, [programId, programDetails])
 
   useEffect(
     () => {
@@ -286,23 +182,107 @@ export const ProgramSummary = ({
     [JSON.stringify(pointStrategy)],
   );
 
-  useEffect(
-    () => {
-      let toStep;
-      if (search && mode === MODE_VIEW) {
-        toStep = parseQueryParams(search || '')?.currentStep;
-        if (toStep) setCurrentStep(toStep);
+  const handleUserMessageChange = e => setUserMessage(e.target.value);
+  const renderModal = modalType => (
+    <CapModal
+      className={classNames(className, {
+        'publish-modal-container': true,
+        'lp-modal-config-publish-changes': modalType === modalTypeMap.PUBLISH,
+        'lp-modal-program-mode-change': modalType === modalTypeMap.ACTIVATE,
+      })}
+      width={modalType === modalTypeMap.PUBLISH ? 560 : 500}
+      visible={
+        modalType === modalTypeMap.PUBLISH
+          ? showPublishModal
+          : showActivateProgramModal
       }
-    },
-    [search, mode],
+      footer={null}
+      centered
+      onCancel={
+        modalType === modalTypeMap.PUBLISH
+          ? handlePublishModalCloseClick
+          : handleActivateModalCloseClick
+      }
+    >
+      <CapRow>
+        <CapColumn span={7}>
+          <CapImage
+            className={`publish-modal-image-${
+              modalType === modalTypeMap.PUBLISH ? 'publish' : 'activate'
+            }`}
+            src={addEvent}
+            alt="default"
+          />
+        </CapColumn>
+        <CapColumn span={14} offset={1}>
+          <CapRow>
+            <CapHeading type="h4" className="publish-modal-title">
+              {modalType === modalTypeMap.PUBLISH
+                ? formatMessage(messages.publishChangesTo, {
+                    programName: currentProgram?.name,
+                  })
+                : formatMessage(messages.activateProgramTitle)}
+            </CapHeading>
+            <CapHeading type="h5" className="publish-modal-description">
+              {modalType === modalTypeMap.PUBLISH
+                ? formatMessage(messages.publishModalDescription)
+                : formatMessage(messages.activateModalDescription)}
+            </CapHeading>
+          </CapRow>
+          {modalType === modalTypeMap.PUBLISH && (
+            <CapRow>
+              <CapInput.TextArea
+                value={userMessage}
+                onChange={handleUserMessageChange}
+                placeholder={formatMessage(messages.publishInputPlaceholder)}
+              />
+            </CapRow>
+          )}
+          <CapRow>
+            <CapButton
+              key="publish-ok"
+              id="loyalty-program-activate-publish-modal-button"
+              onClick={
+                modalType === modalTypeMap.PUBLISH
+                  ? handlePublishModalOkClick
+                  : handleActivateModalOkClick
+              }
+              disabled={modalType === modalTypeMap.PUBLISH && !userMessage}
+              className="publish-modal-ok-button"
+            >
+              {formatMessage(
+                globalMessages[
+                  `${
+                    modalType === modalTypeMap.PUBLISH ? 'publish' : 'activate'
+                  }`
+                ],
+              )}
+            </CapButton>
+            <CapButton
+              key="publish-cancel"
+              type="secondary"
+              onClick={
+                modalType === modalTypeMap.PUBLISH
+                  ? handlePublishModalCloseClick
+                  : handleActivateModalCloseClick
+              }
+              className="publish-modal-cancel-button"
+            >
+              {formatMessage(globalMessages.cancel)}
+            </CapButton>
+          </CapRow>
+        </CapColumn>
+      </CapRow>
+    </CapModal>
   );
+
   const isParamMatchMode = mode === MODE_VIEW || mode === MODE_CONFIGURE;
 
   useEffect(
     () => {
       getProgramById();
     },
-    [programId],
+    [programId, mode],
   );
 
   const getProgramById = isUpdate => {
@@ -331,207 +311,25 @@ export const ProgramSummary = ({
   );
 
   useEffect(() => {
-    if(getTrackersStatus !== REQUEST || getTrackersStatus !== SUCCESS) actions.getTrackersData({ programId });
-    if(getPartnerProgramEnabledStatus !== REQUEST || getPartnerProgramEnabledStatus !== SUCCESS) actions.getIsPartnerProgramEnabled();
-    if(mode !== MODE_VIEW) capActions.checkReconfigureProgram(programId);
-  }, [mode]);
-
-  useEffect(
-    () => {
-      if (alternateCurrencyFlagValue && alternateCurrencyFlagValue != 'false') {
-        const queryParams = {
-          pageSize: 50,
-          pageNum: 0,
-          sortOrder: DESC,
-        };
-        actions.getAllAlternateCurrency(
-          { pageNumber: 0, programId },
-          false,
-          queryParams,
-        );
-      }
-    },
-    [alternateCurrencyFlagValue],
-  );
-
-  const [rewardCurrencyLabel, setRewardCurrencyLabel] = useState('');
-  const [offersCustomLabel, setOffersCustomLabel] = useState('');
-
-  useEffect(
-    () => {
-      if (getCustomLabelsStatus === 'SUCCESS' && customLabels.length) {
-        setRewardCurrencyLabel(customLabels[0]?.labels?.points);
-        setOffersCustomLabel(customLabels[0]?.labels?.offers);
-      }
-    },
-    [getCustomLabelsStatus],
-  );
-
-  const getOrgConfigDetails = () => {
-    const queryParams = { status: 'LIVE, SNAPSHOT, DRAFT', limit: 5 };
-    actions.getOrgConfigDetails(queryParams, programId);
-  };
-
-  useEffect(
-    () => {
-      if (
-        getOrgConfigDetailsStatus === '' ||
-        getOrgConfigDetailsStatus === SUCCESS
-      ) {
-        getOrgConfigDetails();
-      }
-      if (
-        mode === MODE_CONFIGURE &&
-        isDraftPresent &&
-        hasProgramVersioningEnabled
-      ) {
-        CapNotification.open({
-          message: (
-            <CapRow>
-              <CapHeading
-                type="h5"
-                style={{ display: 'flex', alignItems: 'start' }}
-              >
-                <CapIcon
-                  type="info"
-                  size="s"
-                  style={{ margin: 2, marginRight: 10 }}
-                />
-                <CapColumn style={{ display: 'inline' }}>
-                  {formatMessage(messages.editDraftMessage)}
-                </CapColumn>
-              </CapHeading>
-            </CapRow>
-          ),
-        });
-      }
-    },
-    [mode],
-  );
-
-  useEffect(
-    () => {
-      if (
-        getOrgConfigDetailsStatus === SUCCESS &&
-        orgConfigDetailsList.length > 0 &&
-        hasProgramVersioningEnabled
-      ) {
-        orgConfigDetailsList.forEach(data => {
-          const status = data?.status;
-
-          /* To set Live version as initial version */
-          if (
-            status === LIVE &&
-            mode === MODE_VIEW &&
-            isInitialVersionPristine
-          ) {
-            const versionName = `Version ${Math.round(data?.version)}`;
-            setVersion(versionName);
-            setVersionStatus(status);
-            setIsInitialVersionPristine(false);
-          }
-
-          /* Updating version status on change of selected version */
-          if (version !== null) {
-            const currentVersion = Math.round(data?.version);
-            const selectedVersion = version?.replace('Version', '');
-            if (currentVersion == selectedVersion) {
-              setVersionStatus(status);
-            }
-          }
-
-          /* To show select version text in program's edit mode */
-          if (mode === MODE_CONFIGURE && !isInitialVersionPristine) {
-            setVersion(null);
-            setVersionStatus(null);
-            setIsInitialVersionPristine(true);
-          }
-        });
-      }
-    },
-    [mode, version, getOrgConfigDetailsStatus],
-  );
-
-  const createOrRestoreRulesetsDraft = isRestoreVersioningFlow => {
-    const versionNumber = version?.split('Version')[1];
-
-    const queryParams = {
-      endpointName: POINTSENGINE_ENDPOINT,
-      version: versionNumber?.trim(),
-      status: versionStatus,
-      contextId: programId,
-    };
-
-    if (isRestoreVersioningFlow) {
-      queryParams['publish'] = true;
-    }
-
-    actions.restoreVersioning(queryParams, res => {
-      if (res?.status === 200 && res?.message) {
-        getOrgConfigDetails();
-        if (mode === MODE_CONFIGURE) {
-          setConfigureModeStep(STEP_3);
-          CapNotification.success({
-            message: formatMessage(messages.createDraftSuccessNotification, {
-              version: version?.split('Version')[1],
-            }),
-          });
-        } else {
-          setIsInitialVersionPristine(true);
-          CapNotification.success({
-            message: res?.message,
-          });
-        }
-      } else {
-        CapNotification.error({
-          message: res?.message || formatMessage(globalMessages.errorMessage),
-        });
-      }
-    });
-  };
-
-  const isVersioningError = hasProgramVersioningEnabled
-    ? getOrgConfigDetailsStatus === FAILURE
-    : false;
+    actions.getTrackersData({ programId });
+    capActions.checkReconfigureProgram(programId);
+  }, []);
 
   const onChangeTab = tab => setCurrentStep(tab);
+
   const onClickEdit = () => setShowSlideBox(true);
   const reconfigureProgram = (payload = {}) => {
     actions.reconfigureProgram(programId, payload, result => {
       if (result.success && result.status === 200) {
+        CapNotification.success({
+          message: formatMessage(messages.reconfiguredSuccessfully),
+        });
         capActions.checkReconfigureProgram(programId);
-
-        // To update versioning dropdown data
-        getOrgConfigDetails();
-
         const publishChanges = Object.assign(payload, { programId });
         gtmPush('publishChanges', publishChanges);
         history.push(
           `${publicPath}${PROGRAM_PERFIX_PATH}${programId}/${MODE_VIEW}`,
         );
-
-        if (hasProgramVersioningEnabled) {
-          let draftVersion = '';
-          if (isDraftPresent) {
-            /* When rulesets changes are present, draft object will be present */
-            draftVersion = orgConfigDetailsList[0].version;
-            setCurrentStep(WORKFLOWS);
-          } else {
-            /* When rulesets changes are not present, reconfigure api will still
-            publish a new version even though draft object is not present */
-            draftVersion = parseInt(orgConfigDetailsList[0].version, 10) + 1;
-          }
-
-          CapNotification.success({
-            message: formatMessage(messages.updatedReconfiguredSuccessfully, {
-              draftVersion: JSON.stringify(draftVersion),
-            }),
-          });
-        } else {
-          CapNotification.success({
-            message: formatMessage(messages.reconfiguredSuccessfully),
-          });
-        }
       } else {
         CapNotification.error({
           message: formatMessage(messages.reconfiguredFailed),
@@ -540,182 +338,54 @@ export const ProgramSummary = ({
       }
     });
   };
-  const isProgramStatusUpdating = getProgramsStatus === UPDATE;
-  const isUpdating = getProgramByIdStatus === UPDATE;
-
-  const isProgramStatusLoading =
-    !isUpdating && (!getProgramsStatus || getProgramsStatus === REQUEST);
-  const isProgramStatusApiError = getProgramsStatus === FAILURE;
 
-  const getTabPansContent = Component =>
-    versionStatus === LIVE || !hasProgramVersioningEnabled ? (
-      Component
-    ) : (
-      <EmptyStateIllustration
-        emptyStateImage={notSupportedYet}
-        title={formatMessage(messages.illustrationTitle)}
-        titleClassName="not-supported-yet-illustration-title"
-        description={formatMessage(messages.illustrationTitleDesc)}
-        descriptionPosition="bottom"
-      />
-    );
-  const rewardCurrencyFeatureTooltip = () => (
-    <CapRow type="flex" className="reward-currency-tooltip-container">
-      <CapColoredTag className="tooltip-new-tag" tagColor={CAP_PINK}>
-        {formatMessage(globalMessages.new)}
-      </CapColoredTag>
-
-      <CapRow>
-        <CapHeading type="h9">
-          {formatMessage(messages.rewardCurrencyFeatureTooltip)}
-        </CapHeading>
-      </CapRow>
-    </CapRow>
-  );
-  const rewardCurrencyNewFeature = () => (
-    <CapTooltip
-      overlayClassName="reward-currency-tab"
-      title={rewardCurrencyFeatureTooltip}
-      placement="top"
-      getPopupContainer={() => document.querySelector('.strategy-tab')}
-    >
-      {
-        <CapRow>
-          {formatMessage(globalMessages.rewardCurrency)}
-          <span className="new-feature-icon" />
-        </CapRow>
-      }
-    </CapTooltip>
-  );
   const tabPanes = [
     {
       tab: formatMessage(globalMessages.tiers),
-      content: getTabPansContent(
-        <Tiers programId={programId} mode={MODE_VIEW} isFixedValueEmptyForUntilTierUpgradeValidity={isFixedValueEmptyForUntilTierUpgradeValidity} setIsFixedValueEmptyForUntilTierUpgradeValidity={setIsFixedValueEmptyForUntilTierUpgradeValidity} />,
-      ),
+      content: <Tiers programId={programId} mode={MODE_VIEW} />,
       key: TIERS,
     },
     {
-      tab: rewardCurrencyNewFeature(),
-      content: getTabPansContent(
-        <>
-          {hasLabelCustomisationEnabled && !isEmpty(rewardCurrencyLabel) ? (
-            <LabelCustomisation
-              isProgramDefault={currentProgram.isDefault && !mode === MODE_VIEW}
-              customisedLabel={formatMessage(
-                globalMessages.labelCustomizationInfo,
-                {
-                  customLabelName: formatMessage(globalMessages.rewardCurrency),
-                },
-              )}
-              customLabelValue={rewardCurrencyLabel}
-            />
-          ) : (
-            ''
-          )}
-          <StrategyDashboard
-            mode={MODE_VIEW}
-            programId={programId}
-            pointStrategy={localPointStrategy}
-            pointTypeIdData={pointTypeIdData}
-            refreshStrategyData={refreshStrategyData}
-          />
-        </>,
+      tab: formatMessage(messages.pointConditions),
+      content: (
+        <StrategyDashboard
+          mode={MODE_VIEW}
+          programId={programId}
+          pointStrategy={localPointStrategy}
+          pointTypeIdData={pointTypeIdData}
+          refreshStrategyData={refreshStrategyData}
+        />
       ),
       key: POINT_CONDITIONS,
     },
     {
-      tab: formatMessage(globalMessages.offers),
-      content: getTabPansContent(
-        <>
-          {hasLabelCustomisationEnabled && !isEmpty(rewardCurrencyLabel) ? (
-            <LabelCustomisation
-              isProgramDefault={currentProgram.isDefault && !mode === MODE_VIEW}
-              customisedLabel={formatMessage(
-                globalMessages.labelCustomizationInfo,
-                {
-                  customLabelName: formatMessage(globalMessages.offers),
-                },
-              )}
-              customLabelValue={offersCustomLabel}
-            />
-          ) : (
-            ''
-          )}
-          <Coupons mode={VIEW} key={VIEW} currentStep={currentStep} />
-        </>,
-      ),
-      key: OFFERS,
-    },
-    {
-      tab: formatMessage(globalMessages.communication),
-      content: getTabPansContent(
-        <Communication currentProgram={currentProgram} programId={programId} />,
-      ),
+      tab: formatMessage(messages.communication),
+      content: <Communication programId={programId} />,
       key: COMMUNICATION,
     },
     {
-      tab: formatMessage(globalMessages.trackers),
-      content: getTabPansContent(
-        <Trackers
-          programId={programId}
-          trackersDetails={trackersDetails}
-          alternateCurrencyListData={alternateCurrencyListData}
-        />,
-      ),
-      key: TRACKERS,
+      tab: formatMessage(messages.offers),
+      content: <Coupons mode="VIEW" key="VIEW" />,
+      key: OFFERS,
     },
     {
-      tab: formatMessage(globalMessages.workflows),
+      tab: formatMessage(messages.trackers),
       content: (
-        <ConfigureWorkflows
-          mode={mode}
-          source={SOURCE_LOYALTY}
-          currentProgram={currentProgram}
-        />
+        <Trackers programId={programId} trackersDetails={trackersDetails} />
       ),
-      key: WORKFLOWS,
+      key: TRACKERS,
     },
+    // {
+    //   tab: formatMessage(messages.workflows),
+    //   content: <ProgramWorkflows />,
+    //   key: WORKFLOWS,
+    // },
   ];
-  if (hasNewUIPromotionEnabled) {
-    tabPanes.push({
-      tab: formatMessage(globalMessages.promotions),
-      content: getTabPansContent(
-        <PromotionsDetail
-          programDetails={programDetails}
-          isEditable
-          isLoading={isProgramStatusLoading}
-          isUpdating={isProgramStatusUpdating}
-          isApiError={isProgramStatusApiError}
-          currentProgram={currentProgram}
-          mode={mode}
-        />,
-      ),
-      key: PROMOTIONS,
-    });
-  }
-  if (hasPartnerProgramEnabled) {
-    tabPanes.push(
-      {
-        tab: formatMessage(globalMessages.supplementaryProgram),
-        content: getTabPansContent(
-          <PartnerProgramDashboard mode="VIEW" type={SUPPLEMENTARY_PROGRAM} />,
-        ),
-        key: SUPPLEMENTARY_PROGRAM,
-      },
-      {
-        tab: formatMessage(globalMessages.externalProgram),
-        content: getTabPansContent(
-          <PartnerProgramDashboard mode="VIEW" type={EXTERNAL_PROGRAM} />,
-        ),
-        key: EXTERNAL_PROGRAM,
-      },
-    );
-  }
+
   if (!isTrue(isEMFActive) && showReonNotEnabledIllustration()) {
     tabPanes.unshift({
       tab: formatMessage(messages.performance),
-      content: getTabPansContent(<ProgramPerformance programId={programId} />),
+      content: <ProgramPerformance programId={programId} />,
       key: PERFORMANCE,
     });
   }
@@ -763,13 +433,13 @@ export const ProgramSummary = ({
             }
             return acc;
           }, []);
-          if (entitiesNameList.length > 0 && mode !== MODE_CONFIGURE)
+          if (entitiesNameList.length > 0)
             returnList.push({
               label: `${formatMessage(
                 globalMessages[(ENTITY_MESSAGE_TYPE?.[entityType])] ||
                   globalMessages.entities,
               )}`,
-              value: entitiesNameList,
+              value: entitiesNameList.join(),
               key: `entities`,
             });
         }
@@ -851,10 +521,11 @@ export const ProgramSummary = ({
 
   // PUBLISH MODAL STARTS
   const openPublishModal = () => {
+    setUserMessage('');
     setShowPublishModal(true);
   };
 
-  const handlePublishModalOkClick = userMessage => {
+  const handlePublishModalOkClick = () => {
     reconfigureProgram({
       userMessage,
     });
@@ -899,6 +570,8 @@ export const ProgramSummary = ({
     showSlideBox,
   ]);
 
+  const isUpdating = getProgramByIdStatus === UPDATE;
+
   const handleOnWheel = () => {
     let elements = document.getElementsByClassName('balloon');
     if (elements[0]) {
@@ -906,32 +579,16 @@ export const ProgramSummary = ({
       workflowActions.remountExpEditor();
     }
   };
-  const showSpin =
-    !getProgramByIdStatus ||
-    getProgramByIdStatus === REQUEST ||
-    getEMFStatus === REQUEST ||
-    getCustomLabelsStatus === REQUEST ||
-    (hasProgramVersioningEnabled ? getOrgConfigDetailsStatus === REQUEST : false);
 
-  const showSpinForHeader = 
+  const showSpin =
     !getProgramByIdStatus ||
     getProgramByIdStatus === REQUEST ||
-    getEMFStatus === REQUEST ||
-    (hasProgramVersioningEnabled ? getOrgConfigDetailsStatus === REQUEST : false);
+    getEMFStatus === REQUEST;
 
-  const onRefreshClick = () => {
-    if (getOrgConfigDetailsStatus === FAILURE && hasProgramVersioningEnabled) {
-      getOrgConfigDetails();
-    }
-    getProgramById();
-  };
+  const onRefreshClick = () => getProgramById();
 
   const onCloseSlideBox = () => setShowSlideBox(false);
 
-  const publishAndActivateModalConditions =
-    showActivateProgramModal ||
-    (!hasProgramVersioningEnabled && showPublishModal);
-
   return (
     <PageTemplate className={className}>
       <ErrorBoundaryWrapper
@@ -939,70 +596,40 @@ export const ProgramSummary = ({
         showImage
         isApiErrorBoundary
         onRefreshClick={onRefreshClick}
-        isApiError={
-          currentProgramError || !isParamMatchMode || isVersioningError
-        }
+        isApiError={currentProgramError || !isParamMatchMode}
       >
-        <Provider
-          value={{
-            programId,
-            currentProgram,
-            mode,
-            getProgramById,
-            orgConfigDetailsList,
-            getOrgConfigDetailsStatus,
-            version,
-            versionStatus,
-            userData,
-            getOrgConfigDetails,
-            setConfigureModeStep,
-            isDraftPresent,
-            hasProgramVersioningEnabled,
+        <PageHeader
+          showButton
+          showBackIcon={isTrue(isEMFActive) || mode === MODE_CONFIGURE}
+          isLoading={showSpin || (isUpdating && mode === MODE_VIEW)}
+          title={currentProgram.name}
+          labelValues={headerDescription}
+          onClickBack={onClickBack}
+          onClickEdit={onClickEdit}
+          onClickButton={onClickHeaderActionButton}
+          showDivider={mode === MODE_CONFIGURE}
+          showEditButton={!showSlideBox && mode === MODE_VIEW}
+          buttonText={`${formatMessage(
+            messages[
+              mode === MODE_VIEW ? 'reconfigureProgram' : 'publishChanges'
+            ],
+          )}`}
+          disableButton={
+            mode !== MODE_VIEW && (!changesMade.length && !requireReconfigure)
+          }
+          changesMade={changesMade}
+          dividerClassName="configure-program-divider"
+          mode={mode}
+          buttonProps={{
+            ...(mode === MODE_CONFIGURE && {
+              loading: reconfigureStatus === REQUEST,
+              id: 'loyalty-program-publish-changes-button',
+            }),
           }}
-        >
-          <PageHeader
-            showButton
-            showBackIcon={isTrue(isEMFActive) || mode === MODE_CONFIGURE}
-            isLoading={showSpinForHeader || (isUpdating && mode === MODE_VIEW)}
-            title={currentProgram.name}
-            labelValues={headerDescription}
-            onClickBack={onClickBack}
-            onClickEdit={onClickEdit}
-            onClickButton={onClickHeaderActionButton}
-            showDivider={mode === MODE_CONFIGURE}
-            showEditButton={
-              isProgramEditable && (!showSlideBox && mode === MODE_VIEW)
-            }
-            buttonText={`${formatMessage(
-              messages[
-                mode === MODE_VIEW
-                  ? 'reconfigureProgram'
-                  : hasProgramVersioningEnabled
-                    ? 'publishDraft'
-                    : 'publishChanges'
-              ],
-            )}`}
-            mode={mode}
-            disableButton={
-              !isProgramEditable ||
-              (mode !== MODE_VIEW &&
-                (!changesMade.length && !requireReconfigure))
-            }
-            changesMade={changesMade}
-            dividerClassName="configure-program-divider"
-            buttonProps={{
-              ...(mode === MODE_CONFIGURE && {
-                loading: reconfigureStatus === REQUEST,
-                id: 'loyalty-program-publish-changes-button',
-              }),
-            }}
-            setVersion={setVersion}
-            createOrRestoreRulesetsDraft={createOrRestoreRulesetsDraft}
-            isFixedValueEmptyForUntilTierUpgradeValidity={isFixedValueEmptyForUntilTierUpgradeValidity}
-            setIsFixedValueEmptyForUntilTierUpgradeValidity={setIsFixedValueEmptyForUntilTierUpgradeValidity}
-          />
-          {!showSpin ? (
-            mode === MODE_VIEW ? (
+        />
+        {!showSpin && (
+          <Provider value={{ programId, currentProgram, mode, getProgramById }}>
+            {mode === MODE_VIEW ? (
               <CapRow className="strategy-tab">
                 <CapTab
                   activeKey={currentStep}
@@ -1013,24 +640,16 @@ export const ProgramSummary = ({
             ) : (
               <div onWheel={handleOnWheel}>
                 <ConfigureProgram
-                  configureModeStep={configureModeStep}
                   className="configure-program"
                   currentProgram={currentProgram}
                   refreshStrategyData={refreshStrategyData}
                   pointStrategy={localPointStrategy}
                   pointTypeIdData={pointTypeIdData}
-                  hasLabelCustomisationEnabled={hasLabelCustomisationEnabled}
-                  setVersion={setVersion}
-                  createOrRestoreRulesetsDraft={createOrRestoreRulesetsDraft}
-                  isFixedValueEmptyForUntilTierUpgradeValidity={isFixedValueEmptyForUntilTierUpgradeValidity}
-                  setIsFixedValueEmptyForUntilTierUpgradeValidity={setIsFixedValueEmptyForUntilTierUpgradeValidity}
                 />
               </div>
-            )
-          ) : (
-            <CenteredSkeleton width="90vw" height="90vh" borderRadius="5px"/>
-          )}
-        </Provider>
+            )}
+          </Provider>
+        )}
       </ErrorBoundaryWrapper>
 
       {showSlideBox && (
@@ -1048,43 +667,21 @@ export const ProgramSummary = ({
             isActive: currentProgram.isActive,
           }}
           errorWrapperSlideBoxClose={onCloseSlideBox}
-          isFirstNonDefaultProgram={isFirstNonDefaultProgram}
-        />
-      )}
-      {publishAndActivateModalConditions && (
-        <PublishAndActivateModal
-          currentProgram={currentProgram}
-          modalType={
-            showPublishModal ? modalTypeMap.PUBLISH : modalTypeMap.ACTIVATE
-          }
-          handleActivateModalOkClick={handleActivateModalOkClick}
-          handlePublishModalOkClick={handlePublishModalOkClick}
-          handleActivateModalCloseClick={handleActivateModalCloseClick}
-          handlePublishModalCloseClick={handlePublishModalCloseClick}
-          visible={showPublishModal || showActivateProgramModal}
-        />
-      )}
-      {hasProgramVersioningEnabled &&
-        showPublishModal && (
-          <VersioningPublishModal
-            handlePublishModalOkClick={handlePublishModalOkClick}
-            handlePublishModalCloseClick={handlePublishModalCloseClick}
-            visible={showPublishModal}
-          />
-        )}
-      {showPublishWarningModal && (
-        <ConfirmationModal
-          isModalVisible={showPublishWarningModal}
-          handleOk={handlePublishWarningModalOkClick}
-          handleCancel={handlePublishWarningModalCancelClick}
-          handleClose={handlePublishWarningModalCloseClick}
-          title={formatMessage(globalMessages.unsavedChanges)}
-          description={formatMessage(messages.unsavedChangesDesc)}
-          image={integration}
-          okText={formatMessage(messages.publishDraft)}
-          className="lp-modal-program-publish-changes"
         />
       )}
+      {showPublishModal && renderModal(modalTypeMap.PUBLISH)}
+      {showActivateProgramModal && renderModal(modalTypeMap.ACTIVATE)}
+      <ConfirmationModal
+        isModalVisible={showPublishWarningModal}
+        handleOk={handlePublishWarningModalOkClick}
+        handleCancel={handlePublishWarningModalCancelClick}
+        handleClose={handlePublishWarningModalCloseClick}
+        title={formatMessage(messages.unsavedChanges)}
+        description={formatMessage(messages.unsavedChangesDesc)}
+        image={integration}
+        okText={formatMessage(messages.publishChanges)}
+        className="lp-modal-program-publish-changes"
+      />
       <ReviewTierUnloadModal
         callback={reviewTierCallback}
         setCallback={setReviewTierCallback}
@@ -1108,12 +705,6 @@ ProgramSummary.propTypes = {
   EMFData: PropTypes.object,
   strategyData: PropTypes.object,
   reconfigureData: PropTypes.object,
-  workflowActions: PropTypes.object,
-  programData: PropTypes.object,
-  orgConfigDetailsData: PropTypes.object,
-  isPartnerProgramEnabledData: PropTypes.object,
-  alternateCurrencyFlag: PropTypes.object,
-  alternateCurrencyList: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1125,13 +716,6 @@ const mapStateToProps = createStructuredSelector({
   EMFData: makeSelectEMFStatus(),
   strategyData: makeSelectPointStrategyDetails(),
   reconfigureData: makeSelectReconfigureProgram(),
-  programData: makeSelectPrograms(),
-  userData: makeSelectCap(),
-  customLabelsData: makeSelectCustomLabels(),
-  orgConfigDetailsData: makeSelectOrgConfigDetails(),
-  isPartnerProgramEnabledData: makeSelectPartnerProgramLinking(),
-  alternateCurrencyFlag: makeSelectAlternateCurrencyFlagStatus(),
-  alternateCurrencyList: makeSelectAlternateCurrencyList(),
 });
 
 function mapDispatchToProps(dispatch) {