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

package/components/organisms/PromotionsDetail/PromotionsDetail.js

@@ -1,1411 +0,0 @@
-/**
- * PromotionsDetail
- */
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from 'react-intl';
-import { withRouter } from 'react-router-dom';
-import injectSaga from 'utils/injectSaga';
-import injectReducer from 'utils/injectReducer';
-import classnames from 'classnames';
-import moment from 'moment';
-
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapTable from '@capillarytech/cap-ui-library/CapTable';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapEventCalendar from '@capillarytech/cap-ui-library/CapEventCalendar';
-import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-
-import { compose, bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import { connect } from 'react-redux';
-
-import map from 'lodash/map';
-import isEmpty from 'lodash/isEmpty';
-import EmptyStateIllustrationForPromos from '../../../assets/EmptyStateIllustrationForPromos.png';
-import { handleStopPropagation } from '../../../utils/commonUtils';
-import CustomSkeleton from '../../atoms/CustomSkeleton';
-import StatusColor from '../../atoms/StatusColor';
-import TableOption from '../../molecules/TableOption';
-import PromotionsTableHeader from '../../molecules/PromotionsTableHeader';
-import InfoBanner from '../../molecules/InfoBanner';
-import EllipsisText from '../../atoms/EllipsisText';
-import styles from './style';
-import messages from './messages';
-import EmptyStateIllustration from '../../molecules/EmptyStateIllustration';
-import PromotionCalendarPopoverContent from '../../molecules/PromotionCalendarPopoverContent';
-import promotionMessages from '../../pages/Promotions/messages';
-import globalMessages from '../../pages/Cap/messages';
-import {
-  PROMOTION_NAME,
-  DOUBLE_VAL,
-  DURATION,
-  DATE_RANGE,
-  PROMOTION_PROGRAM,
-  CUSTOMER_ACTIVITY,
-  PROMOTION_STATUS,
-  LINEITEM,
-  BILL,
-  CUSTOMER,
-  POINTS_OFFER_TYPE,
-  quarterLabels,
-  dayLabels,
-  allQuartersLabel,
-  monthLabels,
-  KPI_STATS,
-  PROMOTION_TYPE,
-  promotionsTypeMapFilter
-} from './constants';
-import {
-  DATE_FORMAT,
-  LOCALE_DATE_FORMAT,
-  EDIT,
-  SUCCESS,
-  FAILURE,
-  REQUEST,
-  PROMOTIONS,
-  CREATE_LOWERCASE,
-  EDIT_LOWERCASE,
-  MODE_VIEW,
-  ENABLE_ADVANCE_LOYALTY_PROMOTIONS,
-  FEATURE_GATED_ORG,
-} from '../../pages/App/constants';
-
-import { promotionTypeMap } from '../../pages/Cap/constants';
-
-import * as actions from './actions';
-import * as capActions from '../../pages/Cap/actions';
-import { makeSelectPromotionsDetail } from './selectors';
-import {
-  makeSelectUsers,
-  makeSelectCap,
-  makeSelectEMFStatus,
-  makeSelectTimeZone,
-  makeSelectGetProgramConfigDetails,
-  makeSelectOrg
-} from '../../pages/Cap/selectors';
-import saga from './saga';
-import reducer from './reducer';
-import {
-  getColumns,
-  getDayDifference,
-  getAppliedFilters,
-  getUserIds,
-  getStatusOptions,
-  getActivityList,
-  getPromotionStatusValue,
-  getPromotionTableDoubleValue,
-  getPromotionCalendarStatusColors,
-  getPerformanceStatsKeys,
-  getPromotionKpiStats,
-  calenderGetPromotionKpiStats,
-  getPromotionTypeValue,
-  getPromotionsTypeList,
-  getStackability
-} from './utils';
-import {
-  debounceUtil,
-  eventTypesMap,
-  formatMessageHandler,
-  isTrue,
-} from '../../../utils/commonUtils';
-import { publicPath } from '../../../config/path';
-import ErrorBoundaryWrapper from '../../molecules/ErrorBoundaryWrapper';
-import withErrorBoundary from '../../../utils/withErrorBoundary';
-import withStyles from '../../../utils/withStyles';
-import PromotionCalendarLazyLoad from '../../molecules/PromotionCalendarLazyLoad';
-import PromotionListLazyLoad from '../../molecules/PromotionListLazyLoad';
-import { gtmPush } from '../../../utils/gtmTrackers';
-
-import { RBAC_CONFIGURATION_PARAMETERS } from '../../../utils/authWrapper';
-import { checkRBACPermission } from '../../pages/Cap/utils';
-import AccessDeniedTooltipMessage from '../../atoms/AccessDeniedTooltipMessage';
-
-export const PromotionsDetail = ({
-  className,
-  history,
-  intl: { formatMessage },
-  capActions,
-  isLoading: isTableLoading,
-  isUpdating: isTableUpdating,
-  isApiError = false,
-  mode,
-  onOptionClick,
-  programDetails,
-  promotionsDetails: {
-    getPromotionsStatus,
-    promotionDetails,
-    promotionPageDetails,
-    stopPagination,
-    lazyLoading,
-    filterLoading,
-    getPromotionsPerformanceStatus,
-  },
-  EMFData: { getEMFStatus, EMFStatus: { value: isMLPActive } = {} } = {},
-  match: {
-    params: { programId: pId },
-  },
-  actions,
-  usersData: { getUsersByIdsStatus, usersObj = {} } = {},
-  userData: { currentOrgDetails = {} } = {},
-  isEditable = false,
-  currentProgram = {},
-  timeZoneData: { getTimeZoneStatus, timezone = '' } = {},
-  fetchedProgramConfigData,
-  orgData: { orgID },
-}) => {
-  const isPromotionEditable = checkRBACPermission(
-    RBAC_CONFIGURATION_PARAMETERS.LOYALTY_UPDATE_PROMOTION,
-  );
-  const { accessibleFeatures = [],basic_details = {} } = currentOrgDetails;
-  const orgId = basic_details.org_id;
-  const isPromotionTypeEnabled = accessibleFeatures.includes(ENABLE_ADVANCE_LOYALTY_PROMOTIONS); // Check for loyalty promotions is enabled or not
-   const [pagination, setPagination] = useState({
-    limit: 10,
-    offset: 0,
-    isFilterLoading: false,
-  });
-  const [searchValue, setSearchValue] = useState('');
-  const [startDate, setStartDate] = useState(null);
-  const [endDate, setEndDate] = useState(null);
-  const [programId, setProgramId] = useState(pId);
-  const [programName, setProgramName] = useState([]);
-  const [eventName, setEventName] = useState([]);
-  const [status, setStatus] = useState([]);
-  const [promotionType,setPromotionsType]=useState([]);
-  const [isCalendarView, setIsCalendarView] = useState(false);
-  const [quarter, setQuarter] = useState(quarterLabels[moment().quarter() - 1]);
-  const [disableBackMovement, setDisableBackMovement] = useState(false); //to disable the left button
-  const [
-    formattedPromotionEventsForCalendar,
-    setFormattedPromotionEventsForCalendar,
-  ] = useState([]);
-  const [emptyState, setEmptyState] = useState(false);
-  const [promoCalendarDate, setPromoCalendarDate] = useState(moment().format()); //to handle the mount and unmount of calendar and show relevant dates
-
-  const performanceStatsKeys = getPerformanceStatsKeys(formatMessage);
-
-  const isLoading =
-    getPromotionsStatus === REQUEST ||
-    getUsersByIdsStatus === REQUEST ||
-    getEMFStatus === REQUEST ||
-    filterLoading === REQUEST ||
-    getTimeZoneStatus === REQUEST;
-
-  useEffect(() => {
-    capActions.getTimeZone();
-  }, [])
-
-  useEffect(
-    () => {
-      if (filterLoading === FAILURE || filterLoading === SUCCESS) {
-        setPagination(prevState => ({
-          ...prevState,
-          isFilterLoading: false,
-        }));
-      }
-    },
-    [filterLoading],
-  );
-
-  useEffect(
-    () => {
-      if (isPromotionTypeEnabled && programDetails) {
-        const allProgramIds = programDetails.map(data => data.id);
-        capActions.getProgramConfig(
-          orgId,
-          allProgramIds,
-          'PROMOTION_RANKING_STACKING_STRATEGY',
-        );
-      }
-    },
-    [],
-  );
-
-  useEffect(
-    () => {
-      if (!getUsersByIdsStatus && promotionDetails.length > 0) {
-        const userIds = getUserIds(promotionDetails);
-        capActions.getUsersByIds(userIds);
-      }
-    },
-    [promotionDetails, getUsersByIdsStatus],
-  );
-
-  useEffect(
-    () => {
-      //call handleCalendarEventsRender only on success to check for empty state
-      getPromotionsStatus === SUCCESS && handleCalendarEventsRender();
-    },
-    [promotionDetails],
-  );
-
-  const handleCalendarEventsRender = () => {
-    if (!promotionDetails.length) {
-      setEmptyState(true); //this section handled showing empty states for both list and calendar view
-      setFormattedPromotionEventsForCalendar([]);
-    } else {
-      setEmptyState(false);
-      setFormattedPromotionEventsForCalendar(
-        promotionDetails.map(event => {
-          const { name, id, startDate, endDate, promotionStatus } = event;
-          return {
-            key: id,
-            event_id: id,
-            start: startDate,
-            end: endDate,
-            title: name,
-            backgroundColor: getPromotionCalendarStatusColors(promotionStatus),
-            popoverProps: { ...event },
-          };
-        }),
-      );
-    }
-  };
-
-  const gtmPushViewPromoDetails = filters => {
-    const {
-      promotionName,
-      startDate,
-      endDate,
-      program,
-      activity,
-      status,
-      promotionType,
-    } = filters;
-    const viewPromotionDetails = {
-      searchString: promotionName,
-      startDate,
-      endDate,
-      programId: program,
-      activityName: activity,
-      status,
-      isCalendarView,
-      promotionType,
-    };
-    gtmPush('viewPromotionDetails', viewPromotionDetails);
-  };
-
-  const gtmPushOpenPromotions = (programId, promotionId) => {
-    const promotionDetails = {
-      programId,
-      promotionId,
-      eventKey: 'OPEN_EXISTING_PROMOTION',
-    };
-    gtmPush('promotionDetails', promotionDetails);
-  };
-
-  const onRefreshClick = () => {
-    if (getPromotionsStatus === FAILURE) {
-      getPromotionsListData();
-    }
-    if (getUsersByIdsStatus === FAILURE && promotionDetails.length > 0) {
-      const userIds = getUserIds(promotionDetails);
-      capActions.getUsersByIds(userIds);
-    }
-  };
-
-  const getPromotionsListData = props => {
-    const {
-      searchValue: searchValueProp,
-      pagination: paginationProp,
-      startDate: startDateProp,
-      endDate: endDateProp,
-      programId: programIdProp,
-      eventName: eventNameProp,
-      status: statusProp,
-      promotionType: promotionsTypeProp,
-    } = {
-      searchValue,
-      pagination,
-      startDate,
-      endDate,
-      programId,
-      eventName,
-      status,
-      promotionType,
-      ...props,
-    };
-    const { limit, offset, isFilterLoading } = paginationProp;
-    const isLazyLoading = offset !== 0;
-
-    let filters = { limit, offset };
-    if (!isEmpty(searchValueProp)) {
-      const promotionName = searchValueProp;
-      filters = { ...filters, promotionName };
-    }
-    if (startDateProp !== null && endDateProp !== null) {
-      const formattedStartDate = moment(startDateProp)
-        .format()
-        .replace(/\+/g, '%2b');
-      const formattedEndDate = moment(endDateProp)
-        .format()
-        .replace(/\+/g, '%2b');
-      filters = {
-        ...filters,
-        startDate: formattedStartDate,
-        endDate: formattedEndDate,
-      };
-    }
-    if (programIdProp) {
-      const program = programIdProp;
-      filters = { ...filters, program };
-    }
-    if (eventNameProp.length) {
-      const activity = eventNameProp;
-      filters = { ...filters, activity };
-    }
-    if (statusProp.length) {
-      filters = { ...filters, status: statusProp };
-    }
-    if (promotionsTypeProp.length) {
-      filters = { ...filters, promotionType: promotionsTypeProp };
-    }
-    if (isCalendarView) filters.limit = 100;
-    const queryParams = getQueryParams(filters);
-    if (getPromotionsStatus !== REQUEST) {
-      actions.getPromotions(
-        queryParams,
-        isLazyLoading,
-        isFilterLoading,
-        offset,
-      );
-      const gtmFilters = Object.keys(filters).filter(
-        f => ['limit', 'offset'].indexOf(f) == -1,
-      );
-      if (gtmFilters.length) {
-        gtmPushViewPromoDetails(filters);
-      }
-    }
-  };
-
-  const debouncedSearch = useCallback(
-    debounceUtil(props => getPromotionsListData(props), 1000),
-    [],
-  );
-  const searchCache = useRef(searchValue);
-
-  useEffect(
-    () => {
-      if (searchCache.current !== searchValue) {
-        debouncedSearch({
-          searchValue,
-          pagination,
-          startDate,
-          endDate,
-          programId,
-          eventName,
-          status,
-          promotionType,
-        });
-      } else {
-        getPromotionsListData();
-      }
-
-      return () => {
-        searchCache.current = searchValue;
-      };
-    },
-    [
-      searchValue,
-      debouncedSearch,
-      pagination.offset,
-      endDate,
-      programId,
-      eventName,
-      status,
-      promotionType,
-    ],
-  );
-
-  const getQueryParams = params => {
-    let queryParams = '';
-    for (const key in params) {
-      if (params.hasOwnProperty(key)) {
-        queryParams = !queryParams
-          ? `${key}=${params[key]}`
-          : `${queryParams}&${key}=${params[key]}`;
-      }
-    }
-    return queryParams;
-  };
-
-  const redirectToPromotionsTab = () => {
-    const link = `${publicPath}/${PROMOTIONS}/list`;
-    window.location.pathname = link;
-  };
-
-  const onCreatePromotionFormClick = () =>
-    history.push(`${publicPath}/${PROMOTIONS}/${CREATE_LOWERCASE}`);
-
-  const handleSearchValueChange = event => {
-    setSearchValue(event.target.value);
-    setPagination({
-      limit: 10,
-      offset: 0,
-      isFilterLoading: true,
-    });
-  };
-  const handleDateRangePickerChange = dates => {
-    setStartDate(dates[0] ? moment(dates[0]).format(DATE_FORMAT) : null);
-    setEndDate(dates[1] ? moment(dates[1]).format(DATE_FORMAT) : null);
-    setPagination({
-      limit: 10,
-      offset: 0,
-      isFilterLoading: true,
-    });
-  };
-  const handleProgramFilterChange = value => {
-    const programName = programDetails.find(
-      programDetail => programDetail.id === value,
-    )?.name;
-    setProgramName(programName);
-    setProgramId(value);
-    setPagination({
-      limit: 10,
-      offset: 0,
-      isFilterLoading: true,
-    });
-  };
-  const handlePromotionsFilterChange = value => {
-    setPromotionsType(promotionsTypeMapFilter[value]);
-    setPagination({
-      limit: 10,
-      offset: 0,
-      isFilterLoading: true,
-    });
-  };
-  const handleStatusFilterChange = value => {
-    setStatus(value);
-    setPagination({
-      limit: 10,
-      offset: 0,
-      isFilterLoading: true,
-    });
-  };
-  const handleEventFilterChange = value => {
-    setEventName(value);
-    setPagination({
-      limit: 10,
-      offset: 0,
-      isFilterLoading: true,
-    });
-  };
-
-
-  const onCloseFilterTag = filter => {
-    const { id } = filter;
-    switch (id) {
-      case DATE_RANGE: {
-        setStartDate(null);
-        setEndDate(null);
-        break;
-      }
-      case PROMOTION_PROGRAM: {
-        setProgramId(pId);
-        setProgramName([]);
-        break;
-      }
-      case CUSTOMER_ACTIVITY: {
-        setEventName([]);
-        break;
-      }
-      case PROMOTION_STATUS: {
-        setStatus([]);
-        break;
-      }
-      case PROMOTION_TYPE: {
-        setPromotionsType([]);
-        break;
-      }
-    }
-
-    setPagination(prevState => ({
-      ...prevState,
-      limit: 10,
-      offset: 0,
-    }));
-  };
-  const onClickClearAll = () => {
-    setProgramId(pId);
-    setProgramName([]);
-    setEventName([]);
-    setStatus([]);
-    setPromotionsType([]);
-
-    //clear all applies to start and end date only if the list view is active
-    if (!isCalendarView) {
-      setStartDate(null);
-      setEndDate(null);
-    }
-
-    setPagination(prevState => ({
-      ...prevState,
-      limit: 10,
-      offset: 0,
-    }));
-  };
-
-  const getPerformanceColumn = () => {
-    const performanceColumns = map(performanceStatsKeys, stats => ({
-      title: (
-        <CapRow type="flex" align="bottom" className = 'truncate-text'> 
-          {stats.header}
-          <CapTooltipWithInfo
-           title={stats.tooltip}
-           className="kpi-performace-col-tooltip"
-           />
-        </CapRow>
-      ),
-      description: (
-        <CapRow type="flex" align="bottom" className = 'truncate-text' >
-          {stats.description}
-          <CapTooltipWithInfo
-            title={stats.descTooltip}
-            className="kpi-performace-col-tooltip"
-          />
-        </CapRow>
-      ),
-      dataKey: `${stats.kpiHeader}`,
-      dataValue: `performanceStats_${stats.header}`,
-      descDataKey: `${stats.kpiDescription}`,
-      descDataValue: `performanceStats_${stats.description}`,
-      width: '18%',
-      columnType: KPI_STATS,
-    }));
-    return performanceColumns;
-  };
-
-  const columns = [
-    {
-      title: formatMessage(globalMessages.promotionName),
-      description: `${
-        isTrue(isMLPActive)
-          ? `${formatMessage(messages.promotionNameDescriptionProgram)} | `
-          : ''
-      }${formatMessage(messages.promotionNameDescriptionCustomerActivity)}`,
-      width: '20%',
-      columnType: PROMOTION_NAME,
-    },
-    {
-      title: formatMessage(globalMessages.duration),
-      description: formatMessage(globalMessages.status),
-      width: '17%',
-      dataKey: 'startDate',
-      dataValue: 'endDate',
-      columnType: DURATION,
-    },
-    ...(isPromotionTypeEnabled ? [
-      {
-        title: formatMessage(globalMessages.type),
-        description: formatMessage(messages.stackability),
-        width: '13%',
-        dataKey: 'pointsOfferType',
-        dataValue: 'pointsOfferType',
-        columnType: POINTS_OFFER_TYPE,
-      }
-    ] : []),
-    {
-      title: formatMessage(globalMessages.lastUpdated),
-      description: formatMessage(globalMessages.createdBy),
-      width: '14%',
-      dataKey: 'lastUpdateDate',
-      dataValue: 'lastUpdatedBy',
-      columnType: DOUBLE_VAL,
-    },
-    ...getPerformanceColumn(),
-    {
-      key: 'more',
-      dataIndex: 'more',
-      width: '6%',
-    },
-  ];
-
-  const editableColumn = [
-    {
-      title: formatMessage(globalMessages.promotionName),
-      description: `${
-        isTrue(isMLPActive)
-          ? `${formatMessage(messages.promotionNameDescriptionProgram)} | `
-          : ''
-      }${formatMessage(messages.promotionNameDescriptionCustomerActivity)}`,
-      width: '18%',
-      columnType: PROMOTION_NAME,
-    },
-    {
-      title: formatMessage(globalMessages.duration),
-      description: formatMessage(globalMessages.status),
-      width: '17%',
-      dataKey: 'startDate',
-      dataValue: 'endDate',
-      columnType: DURATION,
-    },
-    ...(isPromotionTypeEnabled ? [
-      {
-        title: formatMessage(globalMessages.type),
-        description: formatMessage(messages.stackability),
-        width: '13%',
-        dataKey: 'pointsOfferType',
-        dataValue: 'pointsOfferType',
-        columnType: POINTS_OFFER_TYPE,
-      }
-    ] : []),
-    {
-      title: formatMessage(globalMessages.lastUpdated),
-      description: formatMessage(globalMessages.createdBy),
-      width: '15%',
-      dataKey: 'lastUpdateDate',
-      dataValue: 'lastUpdatedBy',
-      columnType: DOUBLE_VAL,
-    },
-    ...getPerformanceColumn(),
-  ];
-
-  const programsList = programDetails.map(({ name, id }) => ({
-    label: name,
-    value: id,
-    key: id,
-  }));
-
-  const PopoverContent = event => {
-    const { id, promotionStatus, eventName } = event;
-    const { statusType } = getPromotionStatusValue(promotionStatus);
-    const formatterEventName = getActivityList(formatMessage).find(
-      item => item.value.toLowerCase() === eventName.toLowerCase(),
-    ).label;
-    return (
-      <PromotionCalendarPopoverContent
-        event={event}
-        statusType={statusType}
-        performanceStatsKeys={performanceStatsKeys}
-        usersObj={usersObj}
-        className={className}
-        eventTypesMap={eventTypesMap}
-        getPromotionKpiStats={calenderGetPromotionKpiStats}
-        getPromotionStatusValue={getPromotionStatusValue}
-        handleFullPreviewClick={handleFullPreviewClick}
-        key={id}
-        formatMessage={formatMessage}
-        formatterEventName={formatterEventName}
-        currentOrgDetails={currentOrgDetails}
-        getPromotionsPerformanceStatus={getPromotionsPerformanceStatus}
-        isPromotionEditable={isPromotionEditable}
-      />
-    );
-  };
-
-  const handleFullPreviewClick = (programId, promotionId) => {
-    gtmPushOpenPromotions(programId, promotionId);
-    if(FEATURE_GATED_ORG.includes(orgID)){
-    window.open(
-      `${publicPath}/${PROMOTIONS}/${
-        isPromotionEditable ? EDIT_LOWERCASE : MODE_VIEW
-      }/${programId}/${promotionId}`,
-      { toStep: 1 },
-    )}
-    else{
-      history.push(
-        `${publicPath}/${PROMOTIONS}/${
-          isPromotionEditable ? EDIT_LOWERCASE : MODE_VIEW
-        }/${programId}/${promotionId}`,
-        { toStep: 1 },
-      )
-    }
-  };
-
-  const fetchEventsForQuarter = (quarterNum, refDate) => {
-    const refYear = moment(refDate).year(); //to pass year in start and end date on carousel movement
-    setPromoCalendarDate(moment(refDate).format());
-    if (quarterNum === 1 && refYear === moment().year() - 1) {
-      setDisableBackMovement(true);
-    } else {
-      setDisableBackMovement(false);
-    }
-    setQuarter(quarterLabels[quarterNum - 1]);
-    setStartDate(
-      moment()
-        .set('year', refYear)
-        .quarter(quarterNum)
-        .startOf('quarter')
-        .format(),
-    );
-    setEndDate(
-      moment()
-        .set('year', refYear)
-        .quarter(quarterNum)
-        .endOf('quarter')
-        .format(),
-    );
-    setPagination({
-      limit: 100,
-      offset: 0,
-      isFilterLoading: true,
-    });
-  };
-
-  const filters = {
-    startDate,
-    endDate,
-    programName,
-    eventName,
-    status,
-    formatMessage,
-    promotionType,
-  };
-  const appliedFilters = getAppliedFilters(filters);
-
-  const getColumnTitle = (title, description) => (
-    <CapRow className={classnames('promotions-detail-table-header-row')}>
-      <CapHeader size="small" title={title} description={description} />
-    </CapRow>
-  );
-
-  const getColumnByType = (
-    columnType,
-    promotionsDetail,
-    dataKey,
-    dataValue,
-    descDataKey,
-  ) => {
-    switch (columnType) {
-      case PROMOTION_NAME:
-        return getPromotionName(promotionsDetail);
-      case DURATION:
-        return getDurationValue(promotionsDetail);
-      case DOUBLE_VAL:
-        return getPromotionTableDoubleValue(
-          promotionsDetail[dataKey],
-          promotionsDetail[dataValue],
-          usersObj,
-        );
-      case KPI_STATS:
-        return getPromotionKpiStats(
-          promotionsDetail,
-          dataKey,
-          descDataKey,
-          currentOrgDetails,
-          getPromotionsPerformanceStatus,
-        );
-      case POINTS_OFFER_TYPE:
-        return getPromotionsOfferType(promotionsDetail);
-      default:
-        return getOption(promotionsDetail);
-    }
-  };
-
-  const getOption = rowData => {
-    function handleEditClick(event) {
-      onEditClick(rowData, event);
-    }
-    return (
-      <TableOption
-        onEditClick={handleEditClick}
-        className="lp-menu-config-promo"
-        isEditOptionDisabled={!isPromotionEditable}
-      />
-    );
-  };
-
-  const onEditClick = (rowData, event) => {
-    const { programId, id } = rowData;
-    gtmPushOpenPromotions(programId, id);
-    onOptionClick(EDIT, rowData, event);
-  };
-
-const getPromotionContent = promotionsDetail => {
-  const {
-    name,
-    id,
-    description,
-    programName,
-    eventName,
-    promotionType,
-  } = promotionsDetail;
-  const promotionTypeConverted = promotionTypeMap[promotionType];
-   const handleCopyClick = async () => {
-     try {
-       await navigator.clipboard.writeText(id);
-       CapNotification.success({
-         message: formatMessage(messages.promotionIdCopied, { name: name }),
-       });
-       gtmPush('promotionIdCopied', { id, name });
-     } catch (err) {}
-   };
-  let promotionTypeIcon = '';
-  switch (promotionType) {
-      case LINEITEM: {
-      promotionTypeIcon = 'list-active';
-      break;
-      }
-      case BILL: {
-      promotionTypeIcon = 'bill';
-      break;
-      }
-      case CUSTOMER: {
-      promotionTypeIcon = 'user';
-      break;
-  }
-    }
-  const formatterEventName = (
-    getActivityList(formatMessage).find(
-      item => item?.value?.toLowerCase() === eventName?.toLowerCase(),
-    ) || {}
-  )?.label || eventName;
-  return <CapRow className="promotions-name-container" type="flex">
-      {/* <CapColumn span={4}>
-            <CapTooltip
-              title={formatMessageHandler(
-                formatMessage,
-                promotionMessages[promotionTypeConverted],
-              )}
-            >
-            </CapTooltip>
-            Requirement by the design team right now: to remove the icons, if required in future, the comment could be removed
-            <CapIcon type={promotionTypeIcon} />
-          </CapTooltip>
-        </CapColumn> */}
-      <CapColumn span={20}>
-          <CapHeader
-            className="promotions-name-container-header"
-            size="regular"
-            title={
-              <CapHeading
-                type="h3"
-                className={classnames('truncate-to-two-lines-text')}
-              >
-                <CapTooltip
-                  overlayClassName={
-                    description
-                      ? 'promo-tooltip-with-description'
-                      : 'promo-tooltip-without-description'
-                  }
-                  getPopupContainer={() =>
-                    document.querySelector('#promotionsListTable')
-                  }
-                  title={
-                    <>
-                      <CapRow
-                        type="flex"
-                        className="promotion-id-tooltip"
-                        onClick={handleStopPropagation}
-                      >
-                        <CapRow className="promotion-name">{name}</CapRow>
-                        <CapRow type="flex" className="promotion-id">
-                          <CapLabel
-                            type="label3"
-                            className={
-                              description
-                                ? 'promotion-code-subheading'
-                                : 'promotion-code-subheading-without-description'
-                            }
-                          >
-                            {formatMessage(messages.promotionCode)}
-                          </CapLabel>
-                          <CapLabel type="label10" className="promo-code">
-                            {id}
-                          </CapLabel>
-                          <CapIcon
-                            type="copy"
-                            className="promo-code-copy-icon"
-                            size="s"
-                            onClick={handleCopyClick}
-                          />
-                        </CapRow>
-                        {description && (
-                          <CapRow className="promotion-description">
-                            <CapLabel.CapLabelInline
-                              type="label3"
-                              className="promotion-description-subheading"
-                            >
-                              {formatMessage(globalMessages.description)}
-                            </CapLabel.CapLabelInline>
-                            <CapLabel.CapLabelInline
-                              type="label10"
-                              className="promotion-description-content"
-                            >
-                              {description}
-                            </CapLabel.CapLabelInline>
-                          </CapRow>
-                        )}
-                      </CapRow>
-                    </>
-                  }
-                >
-                  <span className="truncate-to-two-lines-text" title={name}>
-                    {name}
-                  </span>
-                </CapTooltip>
-              </CapHeading>
-            }
-            description={
-              <CapHeading type="label1" className={classnames('truncate-text')}>
-                {isTrue(isMLPActive) ? (
-                  <>
-                    <EllipsisText title={programName} /> |
-                  </>
-                ) : null}
-                <EllipsisText title={` ${formatterEventName}`} />
-              </CapHeading>
-            }
-          />
-        </CapColumn>
-    </CapRow>;
-};
-
-  const getPromotionName = promotionsDetail => (
-    <CapRow>{getPromotionContent(promotionsDetail)}</CapRow>
-  );
-
-  const getPromotionStatus = (promotionStatus, secondaryText) => {
-    const { statusType, intlMessageId } = getPromotionStatusValue(
-      promotionStatus,
-    );
-    return (
-      <CapRow className="status-container" type="flex" align="middle">
-        <StatusColor
-          className="status-color-margin-right"
-          colorType={statusType}
-        />
-        {globalMessages[intlMessageId] && (
-          <>
-            <CapLabel.CapLabelInline type="label2">
-              {formatMessage(globalMessages[intlMessageId])}
-            </CapLabel.CapLabelInline>
-            {secondaryText && <>{secondaryText}</>}
-          </>
-        )}
-      </CapRow>
-    );
-  };
-
-  const getPromotionsOfferType = promotionsDetail => {
-    const { pointsOfferType ,promotionRestrictions, programId } = promotionsDetail;
-    const { intlMessageId } = getPromotionTypeValue(pointsOfferType);
-    const isStackingDone = fetchedProgramConfigData?.fetchedProgramConfigData?.[programId]?.[0]?.value
-      ? JSON.parse(fetchedProgramConfigData.fetchedProgramConfigData[programId][0].value)?.isStackingEnabled
-      : false;
-    const intlMessageIdStackability = getStackability(promotionRestrictions,isStackingDone);
-    return (
-      <CapHeader
-        size="regular"
-        title={
-          <>
-            <CapHeading
-              type="h5"
-              title={formatMessage(globalMessages[intlMessageId])}
-            >
-              {formatMessage(globalMessages[intlMessageId])}
-            </CapHeading>
-            <CapLabel.CapLabelInline type="label2" className="stackability-value">
-            {formatMessage(messages[intlMessageIdStackability])}
-            </CapLabel.CapLabelInline>
-          </>
-        }
-      />
-    );
-  };
-  const getDurationValue = promotionsDetail => {
-    const tz = timezone === 'GMT' ? 'utc' : timezone;
-    moment.tz.setDefault(tz);
-    const { startDate, endDate, promotionStatus } = promotionsDetail;
-    const duration = `${moment(startDate).format(
-      LOCALE_DATE_FORMAT,
-    )} - ${moment(endDate).format(LOCALE_DATE_FORMAT)}`;
-
-    let secondaryText = '';
-    if (moment().isSameOrBefore(moment(startDate))) {
-      const dayDiff = getDayDifference(moment(), startDate);
-      let startsText = '';
-      if (dayDiff === 0) {
-        startsText = formatMessage(messages.startstoday);
-      } else if (dayDiff > 0) {
-        startsText = formatMessage(messages.startsIn, { value: dayDiff });
-      }
-      secondaryText = (
-        <CapLabel className="start-secondary-text-label">{startsText}</CapLabel>
-      );
-    } else if (moment().isSameOrAfter(moment(endDate))) {
-      const dayDiff = getDayDifference(endDate, moment());
-      let endsText = '';
-      if (dayDiff === 0) {
-        endsText = formatMessage(messages.endsToday);
-      } else if (dayDiff > 0) {
-        endsText = formatMessage(messages.endedAgo, { value: dayDiff });
-      }
-      secondaryText = (
-        <CapLabel className="end-secondary-text-label" type="label1">
-          {endsText}
-        </CapLabel>
-      );
-    }
-
-    return (
-      <CapHeader
-        size="regular"
-        title={
-          <>
-            <CapHeading type="h5" className="truncate-text-enhanced" title={duration}>
-              {duration}
-            </CapHeading>
-            {getPromotionStatus(promotionStatus, secondaryText)}
-          </>
-        }
-      />
-    );
-  };
-
-  const tableScrollHeight = () => {
-    let height = window.innerHeight - 342;
-    if (isEditable) {
-      height -= 100;
-    }
-    return height;
-  };
-
-
-  const tableProps = {
-    columns: getColumns(
-      columns,
-      getColumnTitle,
-      getColumnByType,
-      isEditable,
-      editableColumn,
-    ),
-    dataSource: (promotionDetails || [])
-      .map(data => {
-        const { endDate } = data;
-  
-        /* Updating moment's timezone wrt the cluster */
-        const tz = timezone === 'GMT' ? 'utc' : timezone;
-        moment.tz.setDefault(tz);
-  
-        return { ...data, endDate: moment(endDate) };
-      })
-      .sort((a, b) => new Date(b.lastUpdateDate) - new Date(a.lastUpdateDate)),
-    onRow: record => ({
-      onClick: () => {
-        const { id, programId } = record || {};
-        gtmPushOpenPromotions(programId, id);
-        if (mode === MODE_VIEW || FEATURE_GATED_ORG.includes(orgID)) {
-          window.open(
-            `${publicPath}/${PROMOTIONS}/${isPromotionEditable ? EDIT_LOWERCASE : MODE_VIEW}/${programId}/${id}`
-          );
-        } else {
-          history.push(
-            `${publicPath}/${PROMOTIONS}/${isPromotionEditable ? EDIT_LOWERCASE : MODE_VIEW}/${programId}/${id}`
-          );
-        }
-      },
-    }),
-    rowClassName: 'promotion-listing-row-container lp-link-promo-config',
-    scroll: { y: tableScrollHeight() },
-    locale: {
-      emptyText: formatMessage(messages.noPromotionFound),
-    },
-    rowKey: 'id',
-    offset_limit: pagination,
-    id: 'promotionsListTable',
-    infinteScroll: true,
-    showLoader: lazyLoading === REQUEST,
-    loading: filterLoading === REQUEST,
-    setPagination: () => {
-      if (
-        !stopPagination &&
-        lazyLoading !== REQUEST &&
-        promotionPageDetails.pageNumber < promotionPageDetails.pageCount - 1
-      ) {
-        setPagination(prevState => ({
-          ...prevState,
-          offset: prevState.offset + 1,
-        }));
-      }
-    },
-  };
-
-  const dateRangePickerFilterProps = {
-    startDateId: 'promotion_start_date',
-    endDateId: 'promotion_end_date',
-    onChange: handleDateRangePickerChange,
-    displayFormat: LOCALE_DATE_FORMAT,
-    startDate: startDate ? moment(startDate) : null,
-    endDate: endDate ? moment(endDate) : null,
-    isOutsideRange: () => false,
-    startDatePlaceholderText: formatMessage(globalMessages.startDate),
-    endDatePlaceholderText: formatMessage(globalMessages.endDate),
-  };
-
-  const searchFilterProps = {
-    value: searchValue,
-    placeholder: formatMessage(messages.searchPromotions),
-    onChange: handleSearchValueChange,
-    allowClear: false,
-  };
-
-  const programFilterProps = {
-    value: programId,
-    options: programsList,
-    onChange: handleProgramFilterChange,
-    selectPlaceholder: formatMessage(globalMessages.program),
-    searchPlaceholder: formatMessage(globalMessages.search),
-    noResultsFoundText: formatMessage(globalMessages.noResultsFound),
-    popoverClassName: 'filters-pop-over',
-    showSearch: true,
-  };
-
-  const promotionsTypeFilterProps = {
-    options: getPromotionsTypeList(formatMessage),
-    selectPlaceholder: formatMessage(globalMessages.type),
-    searchPlaceholder: formatMessage(globalMessages.search),
-    noResultsFoundText: formatMessage(globalMessages.noResultsFound),
-    popoverClassName: 'promotions-filters-pop-over',
-    onChange: handlePromotionsFilterChange,
-    value: promotionType,
-  }
-
-  const activityFilterProps = {
-    value: eventName,
-    options: getActivityList(formatMessage),
-    selectPlaceholder: formatMessage(globalMessages.activity),
-    searchPlaceholder: formatMessage(globalMessages.search),
-    noResultsFoundText: formatMessage(globalMessages.noResultsFound),
-    onChange: handleEventFilterChange,
-    showSearch: true,
-    popoverClassName: 'filters-pop-over',
-  };
-
-  const statusFilterProps = {
-    options: getStatusOptions({ formatMessage }),
-    selectPlaceholder: formatMessage(globalMessages.status),
-    searchPlaceholder: formatMessage(globalMessages.search),
-    noResultsFoundText: formatMessage(globalMessages.noResultsFound),
-    onChange: handleStatusFilterChange,
-    value: status,
-    width: '200px',
-    popoverClassName: 'status-filter-class',
-  };
-
-  const tableRowHeaderProps = {
-    isMLPActive: isTrue(isMLPActive),
-    className: 'promotions-detail-head-row-container',
-    title: formatMessage(globalMessages.promotions),
-    buttonText: `${formatMessage(messages.createPromotionButton)}`,
-    onButtonClick: onCreatePromotionFormClick,
-    showButton: true,
-    isButtonLoading: isTableLoading,
-    promotionsSearchProps: searchFilterProps,
-    dateRangePickerProps: dateRangePickerFilterProps,
-    promotionsTypeProps: promotionsTypeFilterProps,
-    promotionsProgramProps: programFilterProps,
-    promotionsActivityProps: activityFilterProps,
-    promotionsStatusProps: statusFilterProps,
-    hasFiltersApplied: !!appliedFilters.length,
-    appliedFilters: appliedFilters,
-    onCloseFilterTag: onCloseFilterTag,
-    onClickClearAll: onClickClearAll,
-    filters: filters,
-    isEditable: isEditable,
-    isCreateBtnDisabled: !isPromotionEditable,
-  };
-
-  /**
-   * to perform quarter data fetch if calendar is chosen with different query param values
-   * if not reset the filters and pagination to fetch data for list view
-   * @param {Boolean} showCalendar
-   */
-  const handleToggleView = showCalendar => {
-    setIsCalendarView(showCalendar);
-    setEmptyState(false);
-    if (showCalendar)
-      fetchEventsForQuarter(
-        quarterLabels.indexOf(quarter) + 1,
-        promoCalendarDate,
-      );
-    else {
-      setStartDate(null);
-      setEndDate(null);
-      //reset the limit to 10 for list view for pagination purposes
-      setPagination({
-        limit: 10,
-        offset: 0,
-      });
-    }
-  };
-
-  return (
-    <CapRow className={className}>
-      {isEditable && (
-        <InfoBanner
-          description={
-            <CapRow type="flex">
-              <CapLabel className="pld-info-banner" type="label2">
-                {formatMessage(messages.promotionsInfoBanner_1)}
-              </CapLabel>
-              <CapLabel className="pld-info-banner" type="label4">
-                {formatMessage(messages.promotionsInfoBanner_2, {
-                  programName: currentProgram.name,
-                })}
-              </CapLabel>
-              <CapLabel type="label2">
-                {formatMessage(messages.promotionsInfoBanner_3)}
-              </CapLabel>
-            </CapRow>
-          }
-          actionDescription={formatMessage(messages.goToPromotions)}
-          actions={redirectToPromotionsTab}
-          showAction
-          style={{ marginTop: 0 }}
-        />
-      )}
-      <PromotionsTableHeader
-        {...tableRowHeaderProps}
-        togglePromotionView={handleToggleView}
-        isCalendarView={isCalendarView}
-        isPromotionTypeEnabled={isPromotionTypeEnabled}
-      />
-      <ErrorBoundaryWrapper
-        showImage
-        useStyle
-        isApiErrorBoundary
-        isApiError={
-          isApiError ||
-          getPromotionsStatus === FAILURE ||
-          getUsersByIdsStatus === FAILURE
-        }
-        onRefreshClick={onRefreshClick}
-      >
-        <>
-          {isCalendarView && (
-            <>
-              {isLoading ? (
-                <PromotionCalendarLazyLoad />
-              ) : (
-                <div
-                  className={classnames(
-                    'calendar-container',
-                    disableBackMovement ? 'disable-left' : '',
-                  )}
-                >
-                  <CapEventCalendar
-                    events={formattedPromotionEventsForCalendar}
-                    onQuarterChange={fetchEventsForQuarter}
-                    popoverContent={PopoverContent}
-                    selectedQuarter={quarter}
-                    calendarDate={promoCalendarDate}
-                    calendarGridLineLabel={formatMessage(
-                      messages.promotionCalendarDropdownLabel,
-                    )}
-                    dayLabels={dayLabels(formatMessage)}
-                    allQuartersLabel={allQuartersLabel(formatMessage)}
-                    monthLabels={monthLabels(formatMessage)}
-                    emptyState={emptyState}
-                    emptyStateDescription={formatMessage(
-                      messages.emptyStateDescriptionForPromotionCalendar,
-                    )}
-                    emptyStateTitle={formatMessage(
-                      messages.emptyStateTitleForPromotions,
-                    )}
-                    emptyStateButtonLabel={formatMessage(
-                      messages.createPromotionButton,
-                    )}
-                    onEmptyStateButtonClick={onCreatePromotionFormClick}
-                    minCanvasHeight={0}
-                    isButtonDisabled={!isPromotionEditable}
-                  />
-                </div>
-              )}
-            </>
-          )}
-          {!isCalendarView && (
-            <>
-              {isLoading ? (
-                <PromotionListLazyLoad />
-              ) : emptyState ? (
-                <EmptyStateIllustration
-                  title={formatMessage(messages.emptyStateTitleForPromotions)}
-                  buttonLabel={formatMessage(messages.createPromotionButton)}
-                  onClick={onCreatePromotionFormClick}
-                  description={formatMessage(
-                    messages.emptyStateDescriptionForPromotionList,
-                  )}
-                  descriptionPosition="bottom"
-                  showButton
-                  emptyStateImage={EmptyStateIllustrationForPromos}
-                  disabled={!isPromotionEditable}
-                  hasAccess={isPromotionEditable}
-                  accessForbiddenMsg={
-                    <AccessDeniedTooltipMessage formatMessage={formatMessage} />
-                  }
-                />
-              ) : isTableLoading ? (
-                <CustomSkeleton isTitle height="384px" />
-              ) : (
-                <CapTable {...tableProps} />
-              )}
-            </>
-          )}
-        </>
-      </ErrorBoundaryWrapper>
-    </CapRow>
-  );
-};
-
-PromotionsDetail.propTypes = {
-  className: PropTypes.string,
-  history: PropTypes.object,
-  intl: intlShape.isRequired,
-  capActions: PropTypes.object,
-  isLoading: PropTypes.bool,
-  isUpdating: PropTypes.bool,
-  isApiError: PropTypes.bool,
-  onOptionClick: PropTypes.func,
-  programDetails: PropTypes.array,
-  promotionsDetails: PropTypes.object,
-  match: PropTypes.object,
-  actions: PropTypes.object.isRequired,
-  usersData: PropTypes.object.isRequired,
-  isEditable: PropTypes.bool,
-  currentProgram: PropTypes.object,
-  EMFData: PropTypes.object,
-  timeZoneData: PropTypes.object,
-  fetchedProgramConfigData: PropTypes.object,
-};
-
-const mapStateToProps = createStructuredSelector({
-  promotionsDetails: makeSelectPromotionsDetail(),
-  usersData: makeSelectUsers(),
-  userData: makeSelectCap(),
-  EMFData: makeSelectEMFStatus(),
-  timeZoneData: makeSelectTimeZone(),
-  fetchedProgramConfigData: makeSelectGetProgramConfigDetails(),
-  orgData: makeSelectOrg(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    capActions: bindActionCreators(capActions, dispatch),
-    actions: bindActionCreators(actions, dispatch),
-  };
-}
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-const withSaga = injectSaga({ key: 'promotionsDetail', saga });
-const withReducer = injectReducer({ key: 'promotionsDetail', reducer });
-
-export default withErrorBoundary(
-  compose(
-    withSaga,
-    withReducer,
-    withConnect,
-  )(withRouter(injectIntl(withStyles(PromotionsDetail, styles)))),
-  { useStyle: true, showImage: true },
-);