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

package/components/molecules/CreateTracker/CreateTracker.js

@@ -0,0 +1,1300 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { intlShape, FormattedMessage, injectIntl } from 'react-intl';
+import { compose, bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import withStyles from 'utils/withStyles';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapDatePicker from '@capillarytech/cap-ui-library/CapDatePicker';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import {
+  CAP_G06,
+  CAP_SPACE_04,
+} from '@capillarytech/cap-ui-library/styled/variables';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import moment from 'moment';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import CapTag from '@capillarytech/cap-ui-library/CapTag';
+import isEmpty from 'lodash/isEmpty';
+import withErrorBoundary from 'utils/withErrorBoundary';
+import CapInfoNote from '@capillarytech/cap-ui-library/CapInfoNote';
+import injectSaga from '../../../utils/injectSaga';
+import injectReducer from '../../../utils/injectReducer';
+import messages from './messages';
+import * as actions from './actions';
+import * as capActions from '../../pages/Cap/actions';
+import {
+  makeSelectExtendedFields,
+  makeSelectUpsertTrackersStrategy,
+} from './selectors';
+import saga from './saga';
+import reducer from './reducer';
+import globalMessages from '../../pages/Cap/messages';
+import {
+  makeSelectAlternateCurrencyFlagStatus,
+  makeSelectCap,
+} from '../../pages/Cap/selectors';
+import styles from './style';
+import * as appConstants from '../../pages/App/constants';
+import { formatMessageHandler, sorter } from '../../../utils/commonUtils';
+import NumberInput from '../NumberInput';
+import { gtmPush } from '../../../utils/gtmTrackers';
+import SelectApiWrapper from '../SelectApiWrapper';
+import SelectOptionLabelWithInfo from '../../atoms/SelectOptionLabelWithInfo';
+import {
+  makeSelectAlternateCurrencyList,
+  makeSelectTrackers,
+} from '../../pages/ProgramSummary/selectors';
+import { ALTERNATE_CURRENCIES } from './constants';
+import StatusColor from '../../atoms/StatusColor/StatusColor';
+import { getAlternateCurrencyStatus } from '../../organisms/AlternateCurrencyList/utils';
+
+const {
+  WINDOW_TYPE_MAP,
+  WINDOW_TYPE_TOOLTIP_MAP,
+  POSSIBLE_OPERATION_MAP,
+  POSSIBLE_OPERATORS_MAP,
+  POSSIBLE_OPERATORS_DESC_MAP,
+  TRACKER_TYPE_MAP,
+  OP_BETWEEN,
+  TIER_CHANGE_WINDOW,
+  CALENDAR_BASED_CYCLIC_WINDOW,
+  POINT_TYPES_MAP,
+  POINTS,
+  BILL_EXTENDED_FIELD,
+  LINEITEM_EXTENDED_FIELD,
+  REQUEST,
+  DATE_FORMAT,
+  POSITIVE_DECIMALS,
+  EDIT,
+  FAILURE,
+  LOCALE_DATE_FORMAT,
+  DATE_DISPLAY_FORMAT,
+} = appConstants;
+
+export const CreateTracker = props => {
+  const {
+    className,
+    intl: { formatMessage },
+    showSlidebox,
+    toggleSlideboxState,
+    extendedFieldsData: { extendedFields, getExtendedFieldStatus },
+    upsertTrackerStrategy,
+    actions,
+    match: {
+      params: { programId },
+    },
+    currentTracker = {},
+    refreshTrackersData,
+    capActions,
+    actionMode,
+    makeSelectCapData: { currentOrgDetails = {} } = {},
+    trackersData: { trackersDetails = [] } = {},
+    alternateCurrencyFlag: {
+      alternateCurrencyStatus: {
+        value: alternateCurrencyFlagValue = false,
+      } = {},
+    } = {},
+    alternateCurrencyList: { alternateCurrencyListData = [] } = {},
+  } = props;
+  const trackerDetailsObj = useMemo(
+    () => {
+      const trackerDetailsObj = {};
+      trackersDetails.forEach(
+        tracker =>
+          (trackerDetailsObj[tracker?.name?.trim()?.toLowerCase()] = tracker),
+      );
+      return trackerDetailsObj;
+    },
+    [trackersDetails.length],
+  );
+
+  const strategyId = currentTracker.id || -1;
+  const [trackerName, setTrackerName] = useState();
+  const [trackerType, setTrackerType] = useState();
+  const [trackerMode, setTrackerMode] = useState();
+  const [trackerConditions, setTrackerConditions] = useState([]);
+  const [trackerActiveDate, setTrackerActiveDate] = useState(moment());
+  const [trackerPointType, setTrackerPointType] = useState();
+  const [trackerExtendedField, setTrackerExtendedField] = useState();
+  const [trackerNameExistsError, setTrackerNameExistsError] = useState(false);
+  const [isTrackerWarning, setIsTrackerWarning] = useState({
+    isTrackerNameWarning: false,
+    isTrackerCaseNameWarning: [],
+  });
+
+  const getManipulatedPeriod = (trackerMode, period, trackingPeriodType) => {
+    if (
+      trackerMode === CALENDAR_BASED_CYCLIC_WINDOW &&
+      trackingPeriodType === 0
+    ) {
+      return Number((period / 30).toFixed(2));
+    }
+    return period;
+  };
+
+  useEffect(
+    () => {
+      const {
+        name,
+        conditions = [],
+        propertyValues: {
+          tracker_mode,
+          tracker_type,
+          type_of_points,
+          extended_field,
+          tracker_active_date,
+        } = {},
+      } = currentTracker;
+
+      const cond = conditions.map(condition => {
+        const {
+          id = -1,
+          name,
+          period,
+          trackingPeriodType,
+          maxTimesSuccessSignals,
+          expression: {
+            aggrFunc,
+            operator,
+            threasholdValue1,
+            threasholdValue2,
+          },
+          rank,
+        } = condition;
+
+        return {
+          id,
+          name,
+          period:
+            period === -1
+              ? ''
+              : getManipulatedPeriod(tracker_mode, period, trackingPeriodType),
+          tracking_period_type: trackingPeriodType,
+          aggrFunc,
+          operator,
+          threashold1: threasholdValue1,
+          threashold2: threasholdValue2,
+          max_time_success_signals:
+            maxTimesSuccessSignals !== -1 ? maxTimesSuccessSignals : '',
+          rank,
+          rulesetName: name,
+          should_limit_num_success: maxTimesSuccessSignals > 0,
+          conditionStatus: 'NEW',
+        };
+      });
+      setTrackerPointType(type_of_points);
+      setTrackerName(name);
+      setTrackerType(tracker_type);
+      setTrackerMode(tracker_mode);
+      setTrackerConditions(cond);
+      setTrackerExtendedField(extended_field);
+      setTrackerActiveDate(
+        moment(tracker_active_date || moment(), DATE_FORMAT),
+      );
+    },
+    [JSON.stringify(currentTracker)],
+  );
+  const clearState = () => {
+    setTrackerPointType();
+    setTrackerName();
+    setTrackerType();
+    setTrackerMode();
+    setTrackerConditions([]);
+    setTrackerExtendedField();
+    setTrackerActiveDate(moment());
+  };
+
+  useEffect(
+    () => {
+      getExtendedFields();
+      //reset tracker operator to sum if tracker type is points or alternate currency
+      if (trackerType === POINTS || checkIfAlternateCurrency) {
+        setTrackerConditions(prev =>
+          prev.map(condition => ({
+            ...condition,
+            aggrFunc: 'SUM',
+          })),
+        );
+      }
+    },
+    [trackerType],
+  );
+
+  const getExtendedFields = () => {
+    if (
+      trackerType === BILL_EXTENDED_FIELD ||
+      trackerType === LINEITEM_EXTENDED_FIELD
+    ) {
+      actions.getExtendedFields(trackerType, programId);
+    }
+  };
+
+  const extendedFieldsList = extendedFields.map(extendedField => ({
+    label: extendedField.label,
+    value: extendedField.name,
+    key: extendedField.id,
+  }));
+
+  const modesList = Object.keys(WINDOW_TYPE_MAP).map((windowType, index) => ({
+    label: (
+      <SelectOptionLabelWithInfo
+        title={formatMessageHandler(
+          formatMessage,
+          globalMessages[WINDOW_TYPE_MAP[windowType]],
+          windowType,
+        )}
+        tooltipText={
+          <CapRow className={className}>
+            <CapRow>
+              {formatMessageHandler(
+                formatMessage,
+                messages[WINDOW_TYPE_TOOLTIP_MAP[windowType]],
+                windowType,
+              )}
+            </CapRow>
+            <CapRow className="window-type-tooltip-subtitle">
+              {formatMessageHandler(
+                formatMessage,
+                messages[`${WINDOW_TYPE_TOOLTIP_MAP[windowType]}StartDate`],
+                '',
+              )}
+            </CapRow>
+            <CapRow className="window-type-tooltip-subtitle">
+              {formatMessageHandler(
+                formatMessage,
+                messages[`${WINDOW_TYPE_TOOLTIP_MAP[windowType]}EndDate`],
+                '',
+              )}
+            </CapRow>
+            <CapRow className="window-type-tooltip-subtitle">
+              {formatMessageHandler(
+                formatMessage,
+                messages[`${WINDOW_TYPE_TOOLTIP_MAP[windowType]}Note`],
+                '',
+              )}
+            </CapRow>
+          </CapRow>
+        }
+      />
+    ),
+    value: windowType,
+    key: `mode${index}`,
+  }));
+  const checkIfAlternateCurrency =
+    trackerType && trackerType.indexOf(ALTERNATE_CURRENCIES) !== -1; //moved to top for initialization error
+
+  const operationList = Object.keys(POSSIBLE_OPERATION_MAP).map(
+    (operation, index) => ({
+      label: formatMessageHandler(
+        formatMessage,
+        globalMessages[POSSIBLE_OPERATION_MAP[operation]],
+        operation,
+      ),
+      value: operation,
+      key: `operation${index}`,
+      disabled:
+        (trackerType === POINTS || checkIfAlternateCurrency) &&
+        operation === 'COUNT',
+    }),
+  );
+
+  const operatorList = Object.keys(POSSIBLE_OPERATORS_MAP).map(
+    (operator, index) => ({
+      label: (
+        <SelectOptionLabelWithInfo
+          title={formatMessageHandler(
+            formatMessage,
+            globalMessages[POSSIBLE_OPERATORS_MAP[operator]],
+            operator,
+          )}
+          tooltipText={formatMessageHandler(
+            formatMessage,
+            globalMessages[POSSIBLE_OPERATORS_DESC_MAP[operator]],
+            operator,
+          )}
+        />
+      ),
+      value: operator,
+      key: `operator${index}`,
+    }),
+  );
+
+  const pointTypesList = Object.keys(POINT_TYPES_MAP).map((point, index) => ({
+    label: formatMessageHandler(
+      formatMessage,
+      globalMessages[POINT_TYPES_MAP[point]],
+      point,
+    ),
+    value: point,
+    key: `point${index}`,
+  }));
+
+  const getTrackerItemList = () => {
+    const staticTrackedItemList = Object.keys(TRACKER_TYPE_MAP).map(
+      (trackerType, index) => ({
+        label: (
+          <SelectOptionLabelWithInfo
+            title={formatMessageHandler(
+              formatMessage,
+              globalMessages[TRACKER_TYPE_MAP[trackerType]],
+              trackerType,
+            )}
+            tooltipText={formatMessage(
+              messages[`${TRACKER_TYPE_MAP[trackerType]}Info`],
+            )}
+          />
+        ),
+        value: `${trackerType}`,
+        key: `itemList${index}`,
+      }),
+    );
+    let dynamicTrackedItemList = [];
+    if (alternateCurrencyFlagValue && alternateCurrencyListData.length) {
+      dynamicTrackedItemList = alternateCurrencyListData.map(
+        (currentCurrencyData, index) => {
+          const {
+            startDate,
+            endDate,
+            name,
+            isActive: active,
+            identifier,
+            metaData: { description } = {},
+          } = currentCurrencyData;
+          const startedOn = moment(parseInt(startDate, 10)).format(
+            DATE_DISPLAY_FORMAT,
+          );
+          const endedOn = moment(parseInt(endDate, 10)).format(
+            DATE_DISPLAY_FORMAT,
+          );
+          const { statusType, intlMessageId } = getAlternateCurrencyStatus(
+            startDate,
+            endDate,
+            name,
+          );
+          return {
+            label: (
+              <SelectOptionLabelWithInfo
+                title={name}
+                tooltipText={
+                  <CapRow className={className}>
+                    <CapRow classname="tracker-currency-header-details">
+                      <CapRow type="flex" align="middle">
+                        <CapLabel
+                          type="label6"
+                          className="alternate-status-label"
+                        >
+                          {formatMessage(globalMessages.status)}
+                        </CapLabel>
+                        <StatusColor
+                          className="alternate-status-label"
+                          colorType={statusType}
+                        />
+                        {globalMessages[intlMessageId] && (
+                          <CapLabel.CapLabelInline
+                            type="label10"
+                            className="alternate-status-label"
+                          >
+                            {formatMessage(globalMessages[intlMessageId])}
+                          </CapLabel.CapLabelInline>
+                        )}
+                        <CapTag className="active-tag-value">
+                          {active
+                            ? formatMessage(globalMessages.active)
+                            : formatMessage(globalMessages.inactive)}
+                        </CapTag>
+                        <CapColumn className="filters-vertical-divider" />
+                      </CapRow>
+                      <CapRow type="flex" align="middle">
+                        <CapLabel
+                          type="label6"
+                          className="alternate-status-label"
+                        >
+                          {formatMessage(globalMessages.duration)}
+                        </CapLabel>
+                        <CapLabel type="label10" className="enrolment-duration">
+                          {moment(endDate).year() > 3000
+                            ? formatMessage(
+                                globalMessages.inceptionNeverExpires,
+                              )
+                            : `${startedOn} - ${endedOn}`}
+                        </CapLabel>
+                      </CapRow>
+                      <CapRow type="flex" align="middle">
+                        <CapLabel
+                          type="label6"
+                          className="alternate-duration-label"
+                        >
+                          {formatMessage(globalMessages.description)}
+                        </CapLabel>
+                        <CapLabel
+                          type="label10"
+                          className="enrolment-description"
+                        >
+                          {description}
+                        </CapLabel>
+                      </CapRow>
+                    </CapRow>
+                  </CapRow>
+                }
+                tooltipPlacement="right"
+              />
+            ),
+            value: `${ALTERNATE_CURRENCIES}_${identifier}`,
+            key: `alternateCurrencyList${index}`,
+          };
+        },
+      );
+    }
+
+    const trackedItemList = [
+      ...staticTrackedItemList,
+      ...dynamicTrackedItemList,
+    ];
+    return trackedItemList;
+  };
+
+  const handleAddNewCondition = index => {
+    setTrackerConditions([
+      ...trackerConditions,
+      {
+        aggrFunc: Object.keys(POSSIBLE_OPERATION_MAP)[0],
+        id: -1,
+        max_time_success_signals: '',
+        name: '',
+        operator: Object.keys(POSSIBLE_OPERATORS_MAP)[0],
+        period: '',
+        rank: index + 1,
+        rulesetName: '',
+        should_limit_num_success: false,
+        threashold1: '',
+        threashold2: '',
+        tracking_period_type: 0,
+        conditionStatus: 'NEW',
+      },
+    ]);
+  };
+
+  const checkTrackerNameExists = () => {
+    if (trackerDetailsObj[trackerName?.trim()?.toLowerCase()])
+      setTrackerNameExistsError(true);
+    else setTrackerNameExistsError(false);
+  };
+
+  const validateTrackerName = () => {
+    if (
+      !strategyId ||
+      (strategyId && trackerName?.trim() !== currentTracker?.name?.trim())
+    )
+      checkTrackerNameExists();
+    setIsTrackerWarning(prevState => ({
+      ...prevState,
+      isTrackerNameWarning: false,
+    }));
+  };
+
+  const enableTrackerWarning = () => {
+    setIsTrackerWarning(prevState => ({
+      ...prevState,
+      isTrackerNameWarning: true,
+    }));
+  };
+
+  const toggleTrackerCaseNameWarning = (index, warningNote) => {
+    return () => {
+      if (currentTracker?.conditions?.[index]?.name) {
+        setIsTrackerWarning(prevState => {
+          const updatedWarnings = [...prevState.isTrackerCaseNameWarning];
+          updatedWarnings[index] = warningNote === appConstants.ENABLE;
+          return {
+            ...prevState,
+            isTrackerCaseNameWarning: updatedWarnings,
+          };
+        });
+      }
+    };
+  };
+  const conditionHandler = e => {
+    const index = e.target.id.split('_')[0];
+    const operation = e.target.id.split('_')[1];
+    const trackerConditionsClonned = [...trackerConditions];
+    switch (operation) {
+      case 'nameChange': {
+        trackerConditionsClonned[index].name = e.target.value;
+        trackerConditionsClonned[index].rulesetName = e.target.value;
+        break;
+      }
+      case 'periodChange': {
+        trackerConditionsClonned[index].period = e.target.value;
+        break;
+      }
+      case 'threshold1Change': {
+        trackerConditionsClonned[index].threashold1 = e.target.value;
+        break;
+      }
+      case 'threshold2Change': {
+        trackerConditionsClonned[index].threashold2 = e.target.value;
+        break;
+      }
+      case 'shouldLimitNumSuccessChange': {
+        trackerConditionsClonned[
+          index
+        ].should_limit_num_success = !trackerConditionsClonned[index]
+          .should_limit_num_success;
+        break;
+      }
+      case 'maxTimesSuccessSignalChange': {
+        trackerConditionsClonned[index].max_time_success_signals =
+          e.target.value;
+        break;
+      }
+      default:
+        break;
+    }
+    setTrackerConditions(trackerConditionsClonned);
+  };
+
+  const getConditionContent = (condition, index) => {
+    const {
+      name,
+      period,
+      aggrFunc,
+      operator,
+      threashold1,
+      threashold2,
+      max_time_success_signals,
+      should_limit_num_success,
+    } = condition;
+
+    const handleRemoveCondition = () => {
+      if (trackerConditions.length > 1) {
+        let counter = 1;
+        const finalConditions = [];
+        trackerConditions.forEach((condition, i) => {
+          if (index !== i) {
+            finalConditions.push({
+              ...condition,
+              rank: counter++,
+            });
+          }
+        });
+        setTrackerConditions(finalConditions);
+      }
+    };
+
+    const handleConditionOperationChange = value => {
+      const trackerConditionsClonned = [...trackerConditions];
+      trackerConditionsClonned[index].aggrFunc = value;
+      setTrackerConditions(trackerConditionsClonned);
+    };
+
+    const handleConditionOperatorChange = value => {
+      const trackerConditionsClonned = [...trackerConditions];
+      trackerConditionsClonned[index].operator = value;
+      setTrackerConditions(trackerConditionsClonned);
+    };
+
+    const previewText = `${formatMessage(globalMessages.case)} ${
+      name ? name : `<${formatMessage(globalMessages.caseName)}>`
+    } ${formatMessage(messages.activationText)} ${aggrFunc} ${
+      trackerMode !== TIER_CHANGE_WINDOW ? formatMessage(messages.inThe) : ''
+    } ${
+      period
+        ? period
+        : trackerMode !== TIER_CHANGE_WINDOW
+          ? `<${formatMessage(globalMessages.period)}>`
+          : ''
+    } ${
+      trackerMode !== TIER_CHANGE_WINDOW
+        ? trackerMode === CALENDAR_BASED_CYCLIC_WINDOW
+          ? formatMessage(globalMessages.months)
+          : formatMessage(globalMessages.days)
+        : ''
+    } ${
+      trackerMode !== TIER_CHANGE_WINDOW ? formatMessage(messages.window) : ''
+    } ${formatMessageHandler(
+      formatMessage,
+      globalMessages[POSSIBLE_OPERATORS_MAP[operator]],
+      operator,
+    )} ${
+      threashold1
+        ? threashold1
+        : `<${formatMessage(messages.threasholdValue1)}>`
+    } ${
+      operator === OP_BETWEEN
+        ? `${formatMessage(globalMessages.and)} ${
+            threashold2
+              ? threashold2
+              : `<${formatMessage(messages.threasholdValue2)}>`
+          }`
+        : ''
+    }`;
+
+    return (
+      <>
+        <CapColumn span={14} className="preview-divider">
+          <CapRow className="create-tracker-content-row">
+            <CapColumn span={10}>
+              <CapInput
+                id={`${index}_nameChange`}
+                labelPosition="top"
+                label={formatMessage(globalMessages.caseName)}
+                placeholder={formatMessage(messages.nameDesc)}
+                value={name}
+                onChange={conditionHandler}
+                onFocus={toggleTrackerCaseNameWarning(
+                  index,
+                  appConstants.ENABLE,
+                )}
+                onBlur={toggleTrackerCaseNameWarning(
+                  index,
+                  appConstants.DISABLE,
+                )}
+              />
+              {isTrackerWarning.isTrackerCaseNameWarning?.[index] &&
+                actionMode === EDIT && (
+                  <WarningMessage name={appConstants.CASE_NAME_LOWERCASE} />
+                )}
+            </CapColumn>
+            {trackerMode !== TIER_CHANGE_WINDOW && (
+              <>
+                <CapColumn span={7} offset={1}>
+                  <NumberInput
+                    id={`${index}_periodChange`}
+                    labelPosition="top"
+                    label={formatMessage(messages.trackFor)}
+                    placeholder={formatMessage(globalMessages.enterPeriod)}
+                    value={period}
+                    onChange={conditionHandler}
+                    data-testid="tracker-period-input"
+                    type={POSITIVE_DECIMALS}
+                    className={!Number.isInteger(+period) ? 'input-error' : ''}
+                    errorMessage={
+                      !Number.isInteger(+period) &&
+                      formatMessage(messages.decimalErrorMessage)
+                    }
+                  />
+                </CapColumn>
+                <CapColumn span={5} offset={1}>
+                  <CapLabel className="days-label">
+                    {trackerMode === CALENDAR_BASED_CYCLIC_WINDOW
+                      ? formatMessage(globalMessages.months)
+                      : formatMessage(globalMessages.days)}
+                  </CapLabel>
+                </CapColumn>
+              </>
+            )}
+          </CapRow>
+          <CapRow className="create-tracker-content-row">
+            <CapRow>
+              <CapLabel className="condition-met-label">
+                {formatMessage(messages.conditionMet)}
+              </CapLabel>
+            </CapRow>
+            <CapColumn span={4}>
+              <CapSelect
+                data-testid="tracker-condition-type"
+                style={{ width: '100%' }}
+                options={operationList}
+                labelPosition="top"
+                value={aggrFunc}
+                onChange={handleConditionOperationChange}
+              />
+            </CapColumn>
+            <CapColumn span={1}>
+              <CapHeading type="h5" className="is-label">
+                {formatMessage(globalMessages.is)}
+              </CapHeading>
+            </CapColumn>
+            <CapColumn span={8}>
+              <CapSelect
+                data-testid="tracker-condition-operator"
+                style={{ width: '100%' }}
+                options={operatorList}
+                labelPosition="top"
+                value={operator}
+                onChange={handleConditionOperatorChange}
+              />
+            </CapColumn>
+            <CapColumn span={4} offset={1}>
+              <NumberInput
+                id={`${index}_threshold1Change`}
+                placeholder={formatMessage(globalMessages.value)}
+                value={threashold1}
+                onChange={conditionHandler}
+                type={POSITIVE_DECIMALS}
+              />
+            </CapColumn>
+            {operator === OP_BETWEEN && (
+              <>
+                <CapColumn span={1}>
+                  <CapHeading type="h5" className="is-label">
+                    {formatMessage(globalMessages.and)}
+                  </CapHeading>
+                </CapColumn>
+                <CapColumn span={4} offset={1}>
+                  <NumberInput
+                    id={`${index}_threshold2Change`}
+                    placeholder={formatMessage(globalMessages.value)}
+                    value={threashold2}
+                    onChange={conditionHandler}
+                    type={POSITIVE_DECIMALS}
+                  />
+                </CapColumn>
+              </>
+            )}
+          </CapRow>
+          {(trackerType === POINTS || checkIfAlternateCurrency) && (
+            <CapInfoNote
+              className="sum-supported-info-note"
+              message={
+                <CapLabel type="label2">
+                  {formatMessage(messages.sumSupportedPointsAndACTracker)}
+                </CapLabel>
+              }
+            />
+          )}
+          <CapRow className="create-tracker-content-row">
+            <CapColumn span={14}>
+              <CapCheckbox
+                id={`${index}_shouldLimitNumSuccessChange`}
+                className="limit-forward-checkbox"
+                checked={should_limit_num_success}
+                onChange={conditionHandler}
+              >
+                {formatMessage(messages.limitForwards)}
+              </CapCheckbox>
+            </CapColumn>
+            {should_limit_num_success && (
+              <CapColumn offset={1} span={4}>
+                <NumberInput
+                  id={`${index}_maxTimesSuccessSignalChange`}
+                  placeholder={formatMessage(globalMessages.value)}
+                  value={max_time_success_signals}
+                  onChange={conditionHandler}
+                />
+              </CapColumn>
+            )}
+          </CapRow>
+        </CapColumn>
+        <CapColumn span={10}>
+          <CapRow>
+            {trackerConditions.length > 1 &&
+              strategyId &&
+              strategyId === -1 && (
+                <CapColumn span={2} offset={20}>
+                  <CapIcon
+                    type="close"
+                    data-testid="create-tracker-close"
+                    onClick={handleRemoveCondition}
+                  />
+                </CapColumn>
+              )}
+          </CapRow>
+          <CapRow>
+            <CapHeading type="h5" className="preview-text">
+              {formatMessage(globalMessages.preview)}
+            </CapHeading>
+          </CapRow>
+          <CapRow className="create-tracker-content-row">
+            <CapColumn offset={1} span={20}>
+              <CapLabel className="condition-preview">{previewText}</CapLabel>
+            </CapColumn>
+          </CapRow>
+        </CapColumn>
+        <CapDivider />
+      </>
+    );
+  };
+
+  const addNewConditionButton = (
+    <CapColumn span={4}>
+      <CapButton
+        type="flat"
+        isAddBtn
+        onClick={() => handleAddNewCondition(trackerConditions.length)}
+        className="lp-btn-config-add-tracker-case"
+      >
+        {formatMessage(messages.addCondition)}
+      </CapButton>
+    </CapColumn>
+  );
+
+  const handleTrackerNameChange = e => {
+    setTrackerNameExistsError(false);
+    setTrackerName(e.target.value);
+  };
+
+  const handleTrackerTypeChange = value => {
+    setTrackerType(value);
+    setTrackerExtendedField();
+  };
+
+  const handleTrackerModeChange = value => setTrackerMode(value);
+
+  const handleTrackerActiveDateChange = date => setTrackerActiveDate(date);
+
+  const handleTrackerPointTypeChange = value => setTrackerPointType(value);
+
+  const handleTrackerExtendedFieldChange = value =>
+    setTrackerExtendedField(value);
+
+  const showExtendedSpin = getExtendedFieldStatus === REQUEST;
+  const spin = upsertTrackerStrategy === REQUEST;
+
+  if (!trackerConditions.length) {
+    handleAddNewCondition(0);
+  }
+
+  const onExtendedFieldRefreshClick = () => getExtendedFields();
+
+  const getAlternateCurrencyDataFromIdentifier = () => {
+    const alternateCurrencyId = trackerType?.split('_')[2];
+    const { propertyValues: { points_category_id } = {} } = currentTracker;
+    const alternateCurrencyData = alternateCurrencyListData?.find(
+      currency =>
+        currency.identifier === alternateCurrencyId ||
+        currency?.alternateCategoryPointCategory?.[0]?.categoryId ===
+          points_category_id,
+    );
+    return alternateCurrencyData;
+  };
+
+  const getPointsMessage = defaultMessage => {
+    if (checkIfAlternateCurrency) {
+      return formatMessage(messages.alternateCurrencyPointTypes, {
+        name: getAlternateCurrencyDataFromIdentifier()?.name || defaultMessage,
+      });
+    }
+    return defaultMessage;
+  };
+
+  const getPointsLabelMessage = defaultMessage => {
+    if (checkIfAlternateCurrency) {
+      return formatMessage(messages.alternateCurrencyPointsTypesDesc, {
+        name: getAlternateCurrencyDataFromIdentifier()?.name || defaultMessage,
+      });
+    }
+    return defaultMessage;
+  };
+
+  const getAlternatePointId = () => {
+    const alternateCurrencyData = getAlternateCurrencyDataFromIdentifier();
+    return alternateCurrencyData?.alternateCategoryPointCategory?.[0]
+      ?.categoryId;
+  };
+
+  const getAlternateTrackerName = () => {
+    const alternateCurrencyData = getAlternateCurrencyDataFromIdentifier();
+    return alternateCurrencyData?.name || trackerType;
+  };
+
+  const WarningMessage = ({ name }) => {
+    return (
+      <CapRow>
+        <CapAlert
+          className="tracker-warning-container"
+          message={
+            <CapRow type="flex" className="tracker-flex">
+              <CapRow>
+                <CapIcon type="warning" />
+              </CapRow>
+              <CapRow className="tracker-warning-text-container">
+                <CapLabel type="label31">
+                  {formatMessage(messages.trackerNameWarning, {
+                    name: name,
+                  })}
+                </CapLabel>
+              </CapRow>
+            </CapRow>
+          }
+          type="warning"
+        />
+      </CapRow>
+    );
+  };
+
+  const getSlideBoxContent = (
+    <CapSpin spinning={spin}>
+      <CapRow className="create-tracker-content-row">
+        <CapRow className="trackers-note">
+          <CapAlert
+            className="trackers-note-desc"
+            message={formatMessage(messages.trackersNote)}
+            type="warning"
+          />
+        </CapRow>
+        <CapColumn span={8}>
+          <CapInput
+            labelPosition="top"
+            label={formatMessage(globalMessages.name)}
+            inductiveText={formatMessage(messages.nameDesc)}
+            placeholder={formatMessage(messages.nameDesc)}
+            value={trackerName}
+            onChange={handleTrackerNameChange}
+            onBlur={validateTrackerName}
+            onFocus={enableTrackerWarning}
+            error={trackerNameExistsError}
+            errorMessage={
+              trackerNameExistsError
+                ? formatMessage(messages.trackerNameExistsError)
+                : ''
+            }
+            className={trackerNameExistsError ? 'error-border' : ''}
+          />
+          {isTrackerWarning?.isTrackerNameWarning &&
+            actionMode === EDIT && (
+              <WarningMessage name={appConstants.NAME_LOWERCASE} />
+            )}
+        </CapColumn>
+        <CapColumn span={8} offset={2}>
+          <CapSelect
+            data-testid="create-tracker-select-entity"
+            style={{ width: '100%' }}
+            options={getTrackerItemList()}
+            label={formatMessage(messages.trackedItem)}
+            inductiveText={formatMessage(messages.trackedItemDesc)}
+            placeholder={formatMessage(messages.trackedItemPlaceholder)}
+            labelPosition="top"
+            value={
+              checkIfAlternateCurrency && actionMode === EDIT
+                ? getAlternateTrackerName()
+                : trackerType
+            }
+            onChange={handleTrackerTypeChange}
+            disabled={actionMode === EDIT}
+          />
+        </CapColumn>
+      </CapRow>
+      <CapRow className="create-tracker-content-row">
+        <CapColumn span={8}>
+          <CapTooltip title={formatMessage(messages.trackingMethodTooltip)}>
+            <CapSelect
+              data-testid="create-tracking-method-select"
+              style={{ width: '100%' }}
+              options={modesList}
+              label={formatMessage(messages.trackingMethod)}
+              inductiveText={formatMessage(messages.trackingMethodDesc)}
+              placeholder={formatMessage(messages.trackingMethodPlaceholder)}
+              labelPosition="top"
+              value={trackerMode}
+              onChange={handleTrackerModeChange}
+            />
+          </CapTooltip>
+        </CapColumn>
+        {(trackerType === POINTS || checkIfAlternateCurrency) && (
+          <CapColumn span={8} offset={2}>
+            <CapSelect
+              data-testid="tracker-point-types"
+              style={{ width: '100%' }}
+              options={pointTypesList}
+              label={getPointsMessage(formatMessage(messages.pointTypes))}
+              inductiveText={getPointsLabelMessage(
+                formatMessage(messages.pointTypesDesc),
+              )}
+              placeholder={getPointsLabelMessage(
+                formatMessage(messages.pointTypesDesc),
+              )}
+              labelPosition="top"
+              value={trackerPointType}
+              onChange={handleTrackerPointTypeChange}
+              disabled={actionMode === EDIT}
+            />
+          </CapColumn>
+        )}
+        {(trackerType === BILL_EXTENDED_FIELD ||
+          trackerType === LINEITEM_EXTENDED_FIELD) && (
+          <CapColumn span={8} offset={2}>
+            <SelectApiWrapper
+              isLoading={showExtendedSpin}
+              isApiError={getExtendedFieldStatus === FAILURE}
+              onRefreshClick={onExtendedFieldRefreshClick}
+              label={formatMessage(messages.extendedField)}
+              inductiveText={formatMessage(messages.extendedFieldDesc)}
+            >
+              <CapSelect
+                data-testid="tracker-extended-field"
+                style={{ width: '100%' }}
+                options={extendedFieldsList}
+                placeholder={formatMessage(messages.extendedFieldPlaceholder)}
+                value={trackerExtendedField}
+                onChange={handleTrackerExtendedFieldChange}
+                disabled={actionMode === EDIT}
+              />
+            </SelectApiWrapper>
+          </CapColumn>
+        )}
+      </CapRow>
+      <CapRow className="create-tracker-content-row">
+        {trackerMode === CALENDAR_BASED_CYCLIC_WINDOW && (
+          <CapColumn span={8}>
+            <CapDatePicker
+              data-testid="tracker-start-date"
+              onChange={handleTrackerActiveDateChange}
+              format={LOCALE_DATE_FORMAT}
+              style={{
+                width: '100%',
+                border: `1px solid ${CAP_G06}`,
+                borderRadius: `${CAP_SPACE_04}`,
+              }}
+              label={formatMessage(messages.startDate)}
+              placeholder={formatMessage(messages.startDateDesc)}
+              value={moment(trackerActiveDate, DATE_FORMAT)}
+            />
+          </CapColumn>
+        )}
+      </CapRow>
+      <CapRow className="create-tracker-content-row">
+        <CapColumn span={12}>
+          <CapHeading type="h5" style={{ fontWeight: 'bold' }}>
+            {formatMessage(messages.conditionTitle)}
+          </CapHeading>
+          <CapLabel>{formatMessage(messages.conditionDesc)}</CapLabel>
+        </CapColumn>
+      </CapRow>
+      {trackerConditions.length &&
+        trackerConditions
+          .sort(sorter)
+          .map((condition, index) => getConditionContent(condition, index))}
+      {addNewConditionButton}
+    </CapSpin>
+  );
+
+  const prepareTrackerData = () => {
+    const { basic_details: { name = '' } = {} } = currentOrgDetails;
+    const finalConditions = trackerConditions.map(
+      cond =>
+        trackerMode === TIER_CHANGE_WINDOW
+          ? { ...cond, period: -1 }
+          : {
+              ...cond,
+              tracking_period_type:
+                trackerMode === CALENDAR_BASED_CYCLIC_WINDOW ? 1 : 0,
+            },
+    );
+    const payload = {
+      programId,
+      name: trackerName,
+      description: `${trackerName}_decription`,
+      entity: trackerType,
+      mode: trackerMode,
+      strategyId,
+      conditions: finalConditions,
+      orgName: name,
+    };
+    if (trackerType === POINTS || checkIfAlternateCurrency) {
+      payload.typeOfPoints = trackerPointType;
+    }
+    if (checkIfAlternateCurrency) {
+      payload.entity = ALTERNATE_CURRENCIES;
+      payload.alternatePointCategoryId = getAlternatePointId();
+    }
+    if (
+      trackerType === BILL_EXTENDED_FIELD ||
+      trackerType === LINEITEM_EXTENDED_FIELD
+    ) {
+      payload.extendedField = trackerExtendedField;
+    }
+    if (trackerMode === CALENDAR_BASED_CYCLIC_WINDOW) {
+      payload.tracker_active_date = moment(trackerActiveDate).format(
+        DATE_FORMAT,
+      );
+    }
+    return payload;
+  };
+
+  const clearAndToggleState = () => {
+    clearState();
+    toggleSlideboxState();
+  };
+
+  const handleSaveTracker = () => {
+    if (!trackerNameExistsError) {
+      const payload = prepareTrackerData();
+      actions.upsertTrackerStrategy(payload, result => {
+        if (result?.success) {
+          if (strategyId !== -1) {
+            CapNotification.success({
+              message: formatMessage(globalMessages.editedSuccessfully),
+            });
+          } else {
+            CapNotification.success({
+              message: formatMessage(globalMessages.createdSuccessfully),
+            });
+          }
+          const actionMode =
+            strategyId && strategyId !== -1 ? 'EDIT' : 'CREATE';
+          const trackerDetails = Object.assign(payload, {
+            programId: programId,
+            actionMode,
+          });
+          gtmPush('trackerDetails', trackerDetails);
+          refreshTrackersData();
+          clearAndToggleState();
+          capActions.checkReconfigureProgram(programId);
+        } else {
+          CapNotification.error({
+            message: formatMessage(globalMessages.errorMessage),
+          });
+        }
+      });
+    }
+  };
+
+  let isSaveDisabled = false;
+  if (
+    isEmpty(trackerName) ||
+    isEmpty(trackerType) ||
+    isEmpty(trackerMode) ||
+    ((trackerType === POINTS || checkIfAlternateCurrency) &&
+      isEmpty(trackerPointType)) ||
+    ((trackerType === BILL_EXTENDED_FIELD ||
+      trackerType === LINEITEM_EXTENDED_FIELD) &&
+      isEmpty(trackerExtendedField)) ||
+    (trackerMode === CALENDAR_BASED_CYCLIC_WINDOW &&
+      isEmpty(moment(trackerActiveDate).format(DATE_FORMAT))) ||
+    trackerNameExistsError
+  ) {
+    isSaveDisabled = true;
+  }
+  trackerConditions.forEach(condition => {
+    const {
+      name,
+      threashold1,
+      threashold2,
+      period,
+      should_limit_num_success,
+      operator,
+      max_time_success_signals,
+    } = condition;
+    if (isSaveDisabled) return;
+    if (
+      !name ||
+      (trackerMode !== TIER_CHANGE_WINDOW && !period) ||
+      !threashold1 ||
+      (operator === OP_BETWEEN && !threashold2) ||
+      (should_limit_num_success && !max_time_success_signals)
+    ) {
+      isSaveDisabled = true;
+    }
+  });
+  const trackerPeriodInDecimalError = useMemo(
+    () => trackerConditions.some(cond => !Number.isInteger(+cond.period)),
+    [trackerConditions],
+  );
+  const getSlideBoxFooter = (
+    <CapTooltip
+      placement="topLeft"
+      title={
+        trackerPeriodInDecimalError
+          ? formatMessage(messages.requiredTootipText)
+          : ''
+      }
+    >
+      <span className="button-disabled-tooltip-wrapper">
+        <CapButton
+          onClick={handleSaveTracker}
+          disabled={isSaveDisabled || spin || trackerPeriodInDecimalError}
+          id="loyalty-add-edit-tracker-button"
+          className="lp-btn-config-trackers"
+          tooltipText
+        >
+          <FormattedMessage {...globalMessages.save} />
+        </CapButton>
+      </span>
+    </CapTooltip>
+  );
+
+  const getSlideBoxHeader = (
+    <CapHeader
+      size="regular"
+      titleClass="create-tracker-header"
+      title={
+        <CapHeading type="h1">
+          {currentTracker?.id
+            ? formatMessage(messages.editTracker)
+            : formatMessage(globalMessages.addTracker)}
+        </CapHeading>
+      }
+      description={
+        <CapHeading type="h5">
+          {formatMessage(messages.addTrackerDesc)}
+        </CapHeading>
+      }
+    />
+  );
+
+  return (
+    <CapSlideBox
+      showShadow
+      className={className}
+      show={showSlidebox}
+      size="size-l"
+      header={getSlideBoxHeader}
+      content={getSlideBoxContent}
+      footer={getSlideBoxFooter}
+      handleClose={clearAndToggleState}
+    />
+  );
+};
+
+CreateTracker.defaultProps = {
+  className: '',
+  toggleSlideboxState: () => {},
+  refreshTrackersData: () => {},
+};
+
+CreateTracker.propTypes = {
+  intl: intlShape.isRequired,
+  className: PropTypes.string,
+  showSlidebox: PropTypes.bool,
+  toggleSlideboxState: PropTypes.func,
+  upsertTrackerStrategy: PropTypes.object,
+  refreshTrackersData: PropTypes.func,
+  makeSelectCapData: PropTypes.object,
+};
+
+const mapStateToProps = createStructuredSelector({
+  extendedFieldsData: makeSelectExtendedFields(),
+  upsertTrackerStrategy: makeSelectUpsertTrackersStrategy(),
+  makeSelectCapData: makeSelectCap(),
+  trackersData: makeSelectTrackers(),
+  alternateCurrencyList: makeSelectAlternateCurrencyList(),
+  alternateCurrencyFlag: makeSelectAlternateCurrencyFlagStatus(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    capActions: bindActionCreators(capActions, dispatch),
+  };
+}
+const withSaga = injectSaga({ key: 'createTracker', saga });
+const withReducer = injectReducer({ key: 'createTracker', reducer });
+
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
+
+export default compose(
+  withErrorBoundary,
+  withSaga,
+  withReducer,
+  withConnect,
+)(withRouter(injectIntl(withStyles(CreateTracker, styles))));