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

package/components/organisms/ExpiryConditions/ExpiryConditions.js

@@ -0,0 +1,964 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import { injectIntl, intlShape } from 'react-intl';
+import { withRouter } from 'react-router';
+import { createStructuredSelector } from 'reselect';
+import { compose, bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+import injectSaga from 'utils/injectSaga';
+import injectReducer from 'utils/injectReducer';
+import PropTypes from 'prop-types';
+import withStyles from 'utils/withStyles';
+import cloneDeep from 'lodash/cloneDeep';
+import find from 'lodash/find';
+import moment from 'moment';
+import withErrorBoundary from 'utils/withErrorBoundary';
+import * as styledVars from '@capillarytech/cap-ui-library/styled/variables';
+
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import CapDatePicker from '@capillarytech/cap-ui-library/CapDatePicker';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapTreeSelect from '@capillarytech/cap-ui-library/CapTreeSelect';
+import CapTree from '@capillarytech/cap-ui-library/CapTree';
+import CapInfoNote from '@capillarytech/cap-ui-library/CapInfoNote';
+import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+
+import saga from './saga';
+import reducer from './reducer';
+import NumberInput from '../../molecules/NumberInput';
+import { makeSelectUpsertExpiry } from './selectors';
+import {
+  makeSelectPointStrategyDetails,
+  makeSelectExtendedFields,
+} from '../../pages/Cap/selectors';
+import * as appConstants from '../../pages/App/constants';
+import messages from './messages';
+import * as actions from './actions';
+import * as capActions from '../../pages/Cap/actions';
+import globalMessages from '../../pages/Cap/messages';
+import * as style from './style';
+import { formatMessageHandler } from '../../../utils/commonUtils';
+import * as strategyContext from '../StrategyDashboard/context';
+import { gtmPush } from '../../../utils/gtmTrackers';
+import SelectOptionLabelWithInfo from '../../atoms/SelectOptionLabelWithInfo';
+import { NEVER100, NUM_MONTHS_END12 } from './constants';
+import { findExpiryTypeByExtendedField } from './utils';
+
+const { CAP_SPACE_08 } = styledVars;
+
+const { CapTreeNode } = CapTree;
+
+const { getStratergyContext } = strategyContext;
+const { styles, FlexWithMargin, AllocationSelect, PrimaryInput } = style;
+const {
+  EXPIRY_TYPE_MAP,
+  MODULE_MAP,
+  EXPIRY_TIME_MAP,
+  EXTENDED_FIELD_EXPIRY_TIME_MAP,
+  SLAB_INDEPENDENT,
+  EDIT,
+  SLAB_BASED,
+  REQUEST,
+  NEVER,
+  FIXED_DATE,
+  EXPIRY_TYPE_MAP_TOOLTIP,
+  LOCALE_DATE_FORMAT,
+  DATE_FORMAT,
+  CURRENT_DATE,
+  ENROLLMENT_DATE,
+  FIXED_DATE_WITHOUT_YEAR,
+  CUSTOMER_REGISTRATION_DATE,
+  DATE_DD_MM,
+  DATE_DD_MMM,
+  BILL_EXTENDED_FIELD,
+  LINEITEM_EXTENDED_FIELD,
+  CUSTOMER_EXTENDED_FIELD,
+  CAMPAIGN,
+  LOYALTY,
+  NUM_DAYS,
+  NUM_MONTHS_END,
+  MAX_MONTHS,
+  MAX_DAYS,
+} = appConstants;
+
+export const ExpiryConditions = props => {
+  const {
+    intl: { formatMessage },
+    actions,
+    className,
+    show,
+    refreshStrategyData,
+    currentProgram: { slabs = [], id: programId } = {},
+    currentExpiry = {},
+    closeSlidebox,
+    mode = '',
+    upsertExpiryData: { upsertExpiryStatus },
+    capActions,
+    pointTypeIdData = {},
+    strategyData: { pointStrategy: { pointsExpiry = [] } = {} } = {},
+    extendedFieldsData: { extendedFields = [], getExtendedFieldStatus } = {},
+  } = props;
+  const {
+    name,
+    description,
+    owner,
+    propertyValues: {
+      expiry_type,
+      expiry_from,
+      expiry_time_units = '',
+      expiry_time_values = '',
+      extended_field_name = '',
+    } = {},
+  } = currentExpiry;
+  const strategyId = currentExpiry?.id;
+  let { strategyTypeId: { pointsExpiry: strategyTypeId } = {} } =
+    getStratergyContext() || {};
+  const [expiryName, setExpiryName] = useState(name);
+  const [expiryDescription, setExpiryDescription] = useState(description);
+  const [module, setModule] = useState(owner || LOYALTY);
+  const [expiryFrom, setExpiryFrom] = useState(expiry_from);
+  const [extendedFieldType, setExtendedFieldType] = useState('');
+  const [extendedFieldName, setExtendedFieldName] = useState(
+    extended_field_name,
+  );
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [treeExpandedKeys, setTreeExpandedKeys] = useState([]);
+  const [isSameTier, setIsSameTier] = useState(
+    expiry_type === SLAB_INDEPENDENT,
+  );
+  const [
+    expiryConditionNameExistsError,
+    setExpiryConditionNameExistsError,
+  ] = useState(false);
+  const [dateWithoutYear, setDateWithoutYear] = useState(moment());
+
+  const timeUnitOptions = useMemo(
+    () => {
+      const EXPIRT_TIME_CONSTANTS = extendedFieldName
+        ? EXTENDED_FIELD_EXPIRY_TIME_MAP
+        : EXPIRY_TIME_MAP;
+
+      return Object.keys(EXPIRT_TIME_CONSTANTS).map((expiryTime, index) => ({
+        label: formatMessageHandler(
+          formatMessage,
+          globalMessages[EXPIRT_TIME_CONSTANTS[expiryTime]],
+          expiryTime,
+        ),
+        value: expiryTime,
+        key: `expiryTime${index}`,
+      }));
+    },
+    [extendedFieldName],
+  );
+
+  useEffect(
+    () => {
+      if (expiryFrom === CURRENT_DATE) {
+        const isEnrollmentDateOption = expiry_time_units.includes(
+          ENROLLMENT_DATE,
+        );
+        const isFixedDateOption = expiry_time_units.includes(
+          FIXED_DATE_WITHOUT_YEAR,
+        );
+
+        let expiryFormValue;
+        if (isEnrollmentDateOption) {
+          expiryFormValue = CUSTOMER_REGISTRATION_DATE;
+        } else if (isFixedDateOption) {
+          expiryFormValue = FIXED_DATE;
+          setDateWithoutYear(
+            moment(expiry_time_values.split(',')[0], DATE_DD_MM),
+          );
+        } else {
+          expiryFormValue = CURRENT_DATE;
+        }
+        setExpiryFrom(expiryFormValue);
+      }
+    },
+    [JSON.stringify(currentExpiry.propertyValues)],
+  );
+
+  useEffect(
+    () => {
+      if (module === CAMPAIGN) {
+        capActions.getMultipleExtendedFields(
+          [CUSTOMER_EXTENDED_FIELD],
+          programId,
+          'DATETIME, DATE',
+        );
+      } else if (module === LOYALTY) {
+        capActions.getMultipleExtendedFields(
+          [BILL_EXTENDED_FIELD, CUSTOMER_EXTENDED_FIELD],
+          programId,
+          'DATETIME, DATE',
+        );
+      }
+    },
+    [module],
+  );
+
+  useEffect(
+    () => {
+      if (expiryFrom === CUSTOMER_EXTENDED_FIELD) {
+        setTreeExpandedKeys(['customerFields']);
+      } else if (expiryFrom === BILL_EXTENDED_FIELD) {
+        setTreeExpandedKeys(['transactionFields']);
+      }
+    },
+    [expiryFrom, extendedFieldName],
+  );
+
+  const expiryConditionsDetailsObj = useMemo(
+    () => {
+      const expiryConditionsDetailsObj = {};
+      pointsExpiry.forEach(
+        expiryCondition =>
+          (expiryConditionsDetailsObj[
+            expiryCondition?.name?.trim()?.toLowerCase()
+          ] = expiryCondition),
+      );
+      return expiryConditionsDetailsObj;
+    },
+    [pointsExpiry.length],
+  );
+  const expiryTimeUnitsArr = useMemo(() => expiry_time_units.split(','), [
+    expiry_time_units,
+  ]);
+  const expiryTimeValuesArr = useMemo(() => expiry_time_values.split(','), [
+    expiry_time_values,
+  ]);
+  if (!strategyTypeId) {
+    strategyTypeId = pointTypeIdData?.pointsExpiry;
+  }
+
+  const getExpiryPeriodArray =
+    mode === EDIT
+      ? slabs.map((slab, index) => ({
+          unit: expiryTimeUnitsArr[index],
+          value: expiryTimeValuesArr[index],
+        }))
+      : slabs.map(() => ({ unit: timeUnitOptions?.[0].value, value: '' }));
+
+  const [expiryPeriod, setExpiryPeriod] = useState(getExpiryPeriodArray);
+
+  const moduleOptions = useMemo(
+    () =>
+      Object.keys(MODULE_MAP).map((module, index) => ({
+        label: formatMessageHandler(
+          formatMessage,
+          globalMessages[MODULE_MAP[module]],
+          module,
+        ),
+        value: module,
+        key: `module${index}`,
+      })),
+    [MODULE_MAP],
+  );
+
+  const handleExpiryNameChange = e => {
+    setExpiryConditionNameExistsError(false);
+    setExpiryName(e.target.value);
+  };
+
+  const handleExpiryDescriptionChange = e => {
+    setExpiryDescription(e.target.value);
+  };
+
+  const checkExpiryConditionNameExists = () => {
+    if (expiryConditionsDetailsObj[expiryName?.trim()?.toLowerCase()])
+      setExpiryConditionNameExistsError(true);
+    else setExpiryConditionNameExistsError(false);
+  };
+
+  const validateExpiryConditionName = () => {
+    if (!strategyId || (strategyId && expiryName?.trim() !== name?.trim()))
+      checkExpiryConditionNameExists();
+  };
+
+  const PrimaryInfo = (
+    <FlexWithMargin>
+      <PrimaryInput
+        className={`${expiryConditionNameExistsError &&
+          'error-border'} tier-input-margin `}
+        value={expiryName}
+        label={formatMessage(globalMessages.name)}
+        placeholder={formatMessage(messages.namePlaceholder)}
+        onChange={handleExpiryNameChange}
+        onBlur={validateExpiryConditionName}
+        error={expiryConditionNameExistsError}
+        errorMessage={
+          expiryConditionNameExistsError
+            ? formatMessage(messages.expiryConditionNameExistsError)
+            : ''
+        }
+      />
+      <PrimaryInput
+        value={expiryDescription}
+        label={formatMessage(globalMessages.description)}
+        placeholder={formatMessage(messages.descriptionPlaceholder)}
+        onChange={handleExpiryDescriptionChange}
+      />
+    </FlexWithMargin>
+  );
+
+  const handleModuleChange = value => {
+    setModule(value);
+
+    // Reset the expiry period on change on module
+    setExtendedFieldName(null);
+    setExpiryFrom(null);
+  };
+
+  const handleExpiryTypeChange = (value, type) => {
+    if (type) {
+      setExpiryFrom(type);
+      setExtendedFieldName(value);
+      setExtendedFieldType(type);
+    } else {
+      setExpiryFrom(value);
+      setExtendedFieldName('');
+      setExtendedFieldType('');
+    }
+
+    let localExpiryPeriodValue;
+    let localIsSameTierValue;
+    if (value === FIXED_DATE) {
+      localExpiryPeriodValue = slabs.map(() => ({
+        unit: FIXED_DATE_WITHOUT_YEAR,
+        value: dateWithoutYear.format(DATE_DD_MM),
+      }));
+      localIsSameTierValue = true;
+    } else if (value === CUSTOMER_REGISTRATION_DATE) {
+      localExpiryPeriodValue = slabs.map(() => ({
+        unit: ENROLLMENT_DATE,
+        value: -1,
+      }));
+      localIsSameTierValue = true;
+    } else {
+      localExpiryPeriodValue = getExpiryPeriodArray;
+      localIsSameTierValue = isSameTier;
+    }
+    setIsSameTier(localIsSameTierValue);
+    setExpiryPeriod(localExpiryPeriodValue);
+  };
+
+  const onStartDateChange = date => {
+    setDateWithoutYear(date);
+    setExpiryPeriod(
+      slabs.map(() => ({
+        unit: FIXED_DATE_WITHOUT_YEAR,
+        value: date.format(DATE_DD_MM),
+      })),
+    );
+  };
+
+  const getExtendedFieldTooltipMessage = (title, description) => (
+    <CapRow className="extended-field-tooltip-container">
+      <CapLabel type="label32" style={{ lineHeight: 'unset' }}>
+        {title}
+      </CapLabel>
+      <CapLabel type="label10" style={{ marginTop: CAP_SPACE_08 }}>
+        {description}
+      </CapLabel>
+    </CapRow>
+  );
+  const expiryPointsInitialData = useMemo(
+    () => {
+      let DEFAULT_EXPIRY_TYPE_MAP = { ...EXPIRY_TYPE_MAP };
+      delete DEFAULT_EXPIRY_TYPE_MAP.BILL_EXTENDED_FIELD;
+      delete DEFAULT_EXPIRY_TYPE_MAP.CUSTOMER_EXTENDED_FIELD;
+
+      let finalData = Object.keys(DEFAULT_EXPIRY_TYPE_MAP).map(
+        (expiryFrom, index) => ({
+          title: formatMessageHandler(
+            formatMessage,
+            globalMessages[EXPIRY_TYPE_MAP[expiryFrom]],
+            expiryFrom,
+          ),
+          value: expiryFrom,
+          key: `expiryFrom${index}`,
+          tooltipMessage: formatMessageHandler(
+            formatMessage,
+            messages[EXPIRY_TYPE_MAP_TOOLTIP[expiryFrom]],
+            expiryFrom,
+          ),
+        }),
+      );
+
+      for (const key in extendedFields) {
+        if (
+          extendedFields.hasOwnProperty(key) &&
+          [BILL_EXTENDED_FIELD, CUSTOMER_EXTENDED_FIELD].includes(key) &&
+          extendedFields[key].length > 0
+        ) {
+          let value = '';
+          let title = '';
+          let children = [];
+          let tooltipMessage = '';
+          let selectable = true;
+
+          switch (key) {
+            case BILL_EXTENDED_FIELD:
+              value = 'transactionFields';
+              title = formatMessage(globalMessages.transactionExtendedFields);
+              tooltipMessage = getExtendedFieldTooltipMessage(
+                formatMessage(messages.transactionExtendedFieldTitle),
+                formatMessage(messages.transactionExtendedFieldDsc),
+              );
+              children = extendedFields[key].map(field => ({
+                value: field.name,
+                title: field.label,
+                tooltipMessage: field.name,
+                type: BILL_EXTENDED_FIELD,
+              }));
+              selectable = false;
+              break;
+            case CUSTOMER_EXTENDED_FIELD:
+              value = 'customerFields';
+              title = formatMessage(globalMessages.customerExtendedFields);
+              tooltipMessage = getExtendedFieldTooltipMessage(
+                formatMessage(messages.customerExtendedFieldTitle),
+                formatMessage(messages.customerExtendedFieldDsc),
+              );
+              children = extendedFields[key].map(field => ({
+                value: field.name,
+                title: field.label,
+                tooltipMessage: field.name,
+                type: CUSTOMER_EXTENDED_FIELD,
+              }));
+              selectable = false;
+              break;
+          }
+
+          finalData = [
+            ...finalData,
+            { value, title, children, tooltipMessage, selectable },
+          ];
+        }
+      }
+
+      return finalData;
+    },
+    [extendedFields],
+  );
+  const getExpirePointNodes = dataList => {
+    return dataList.map(data => {
+      const {
+        value,
+        title,
+        tooltipMessage,
+        children,
+        type,
+        selectable = true,
+      } = data;
+
+      const onTreeNodeClick = () => {
+        if (!['transactionFields', 'customerFields'].includes(value))
+          handleExpiryTypeChange(value, type);
+      };
+      const toolTipTitle = dropdownOpen
+        ? ''
+        : `${
+            type
+              ? `${formatMessageHandler(
+                  formatMessage,
+                  globalMessages[EXPIRY_TYPE_MAP[type]],
+                  type,
+                )}: `
+              : ''
+          }${title}`;
+
+      const nodeTitle = (
+        <CapRow className="expire-points-tree-row" onClick={onTreeNodeClick}>
+          <CapRow className="expire-title-span-container">
+            <CapTooltip
+              title={toolTipTitle}
+              overlayClassName="extended-field-tooltip-overlay"
+              getPopupContainer={trigger =>
+                document.querySelector('.expiry-points-slide-box') || trigger
+              }
+            >
+              {[BILL_EXTENDED_FIELD, CUSTOMER_EXTENDED_FIELD].includes(
+                type,
+              ) && (
+                <span className="expire-points-span-selected-value">
+                  {formatMessageHandler(
+                    formatMessage,
+                    globalMessages[EXPIRY_TYPE_MAP[type]],
+                    type,
+                  )}
+                  :
+                </span>
+              )}
+              <span className="expire-points-span-dropdown">{title}</span>
+            </CapTooltip>
+          </CapRow>
+          {tooltipMessage && (
+            <CapTooltipWithInfo
+              title={tooltipMessage}
+              ariaLabel={`${title}-info-label`}
+            />
+          )}
+        </CapRow>
+      );
+
+      // Construct node properties
+      const nodeProps = {
+        title: nodeTitle,
+        value: value,
+        key: value,
+        selectable,
+      };
+
+      // If there are children, recursively build the child nodes
+      if (children && children.length) {
+        nodeProps.children = getExpirePointNodes(children);
+      }
+
+      return <CapTreeNode {...nodeProps} />;
+    });
+  };
+
+  const filterTreeNode = (inputValue, treeNode) => {
+    const titleElement = treeNode.props.title;
+    // Function to recursively extract string from the title prop which can be a complex JSX
+    const extractInnerText = element => {
+      if (typeof element === 'string') {
+        return element;
+      }
+      if (React.isValidElement(element) && element.props.children) {
+        return React.Children.toArray(element.props.children)
+          .map(child => extractInnerText(child))
+          .join('');
+      }
+      return '';
+    };
+
+    const titleText = extractInnerText(titleElement);
+    return titleText.toLowerCase().includes(inputValue.toLowerCase());
+  };
+
+  const onDropdownChange = flag => setDropdownOpen(flag);
+  const ModuleSelectedCondition = () => (
+    <FlexWithMargin className="expiry-condition-config-container">
+      <AllocationSelect
+        showArrow
+        showSearch
+        label={formatMessage(messages.selectModule)}
+        placeholder={formatMessage(messages.selectModulePlaceholder)}
+        inductiveText={formatMessage(globalMessages.selectModuleInductiveText)}
+        options={moduleOptions}
+        onChange={handleModuleChange}
+        value={module}
+        data-testid="input-box-owner"
+      />
+      <CapRow type="flex" align="middle" className="expire-points-container">
+        <CapRow type="flex" className="expiry-points-tree-container">
+          <CapHeader
+            size="label"
+            className="expire-points-header"
+            title={formatMessage(messages.expirePointsbasedOn)}
+            description={formatMessage(messages.expirePointsbasedOnInductive)}
+          />
+          <CapTreeSelect
+            showSearch
+            dropdownMatchSelectWidth
+            filterTreeNode={filterTreeNode}
+            searchPlaceholder={
+              <CapRow type="flex" align="middle">
+                <CapIcon type="search" size="s" className="tree-search-icon" />
+                <span>{formatMessage(globalMessages.search)}</span>
+              </CapRow>
+            }
+            placeholder={formatMessage(messages.expirePointsbasedOn)}
+            value={extendedFieldName ? extendedFieldName : expiryFrom}
+            getPopupContainer={() =>
+              document.querySelector('.expiry-points-slide-box')
+            }
+            dropdownStyle={{
+              maxHeight: 290,
+              overflowX: 'hidden',
+            }}
+            className="expire-points-tree"
+            popupClassName="expire-points-popup"
+            disabled={!module}
+            autoExpandParent
+            open={dropdownOpen}
+            onDropdownVisibleChange={onDropdownChange}
+            onTreeExpand={value => setTreeExpandedKeys(value)}
+            treeExpandedKeys={treeExpandedKeys}
+          >
+            {getExpirePointNodes(expiryPointsInitialData)}
+          </CapTreeSelect>
+        </CapRow>
+
+        {[FIXED_DATE].includes(expiryFrom) && (
+          <CapDatePicker
+            format={DATE_DD_MMM}
+            value={moment(dateWithoutYear, DATE_DD_MM)}
+            onChange={onStartDateChange}
+            placeholder={formatMessage(
+              globalMessages.dayMonthCalenderPlaceholder,
+            )}
+            getCalendarContainer={triggerNode => triggerNode}
+            className="expire-points-popup"
+          />
+        )}
+      </CapRow>
+    </FlexWithMargin>
+  );
+
+  const onChangeIsSameTier = () => {
+    setExpiryPeriod(
+      slabs.map(() => ({ unit: timeUnitOptions?.[0]?.value, value: '' })),
+    );
+    setIsSameTier(!isSameTier);
+  };
+
+  const TierSelection = () => (
+    <FlexWithMargin>
+      <CapCheckbox checked={isSameTier} onChange={onChangeIsSameTier}>
+        {formatMessage(globalMessages.tierConditions)}
+      </CapCheckbox>
+    </FlexWithMargin>
+  );
+
+  const handlePeriodValueChange = (value, serialNumber) => {
+    let newExpiryPeriod;
+    if (isSameTier) {
+      newExpiryPeriod = expiryPeriod.map(({ unit }) => ({
+        value: value,
+        unit,
+      }));
+    } else {
+      newExpiryPeriod = cloneDeep(expiryPeriod);
+      newExpiryPeriod[serialNumber] = {
+        unit: newExpiryPeriod[serialNumber].unit,
+        value: value,
+      };
+    }
+    setExpiryPeriod(newExpiryPeriod);
+  };
+
+  const handlePeriodUnitChange = (val, serialNumber) => {
+    let newExpiryPeriod;
+    if (isSameTier) {
+      newExpiryPeriod = expiryPeriod.map(({ value }) => ({
+        unit: val,
+        value: val === NEVER ? '0' : '',
+      }));
+    } else {
+      newExpiryPeriod = cloneDeep(expiryPeriod);
+      newExpiryPeriod[serialNumber] = {
+        value: val === NEVER ? '0' : '',
+        unit: val,
+      };
+    }
+    setExpiryPeriod(newExpiryPeriod);
+  };
+
+  const tierExpiryRenderer = serialNumber => {
+  const daysError = expiryPeriod?.[serialNumber]?.unit === NUM_DAYS && expiryPeriod?.[serialNumber]?.value > MAX_DAYS;
+  const monthsError = expiryPeriod?.[serialNumber]?.unit === NUM_MONTHS_END && expiryPeriod?.[serialNumber]?.value > MAX_MONTHS;
+  
+  const sameTierDaysError = isSameTier && expiryPeriod[0]?.unit === NUM_DAYS && expiryPeriod[0]?.value > MAX_DAYS;
+  const sameTierMonthsError = isSameTier && expiryPeriod[0]?.unit === NUM_MONTHS_END && expiryPeriod[0]?.value > MAX_MONTHS;
+
+  const isError = daysError || monthsError || sameTierDaysError || sameTierMonthsError;
+  const errorMessage = daysError
+    ? formatMessage(messages.daysErrorMessage)
+    : monthsError
+    ? formatMessage(messages.monthsErrorMessage)
+    : sameTierDaysError
+    ? formatMessage(messages.daysErrorMessage)
+    : sameTierMonthsError
+    ? formatMessage(messages.monthsErrorMessage)
+    : '';
+
+  return (
+    <FlexWithMargin>
+      <AllocationSelect
+        showArrow
+        label={formatMessage(messages.timeUnit)}
+        placeholder={formatMessage(messages.timeUnitPlaceholder)}
+        options={timeUnitOptions}
+        value={
+          isSameTier
+            ? expiryPeriod[0].unit || timeUnitOptions[0].value
+            : expiryPeriod[serialNumber]?.unit || timeUnitOptions[0].value
+        }
+        onChange={value => handlePeriodUnitChange(value, serialNumber)}
+      />
+      {(isSameTier && expiryPeriod[0].unit === FIXED_DATE) ||
+      (!isSameTier && expiryPeriod[serialNumber].unit === FIXED_DATE) ? (
+        <CapDatePicker
+          onChange={(date, dateString) =>
+            handlePeriodValueChange(date.format(DATE_FORMAT), serialNumber)
+          }
+          style={{ width: '100%' }}
+          label={formatMessage(messages.expirePointsPeriodOnDate)}
+          placeholder={formatMessage(messages.selectDate)}
+          format={LOCALE_DATE_FORMAT}
+          value={
+            isSameTier
+              ? expiryPeriod[0].value
+                ? moment(expiryPeriod[0].value, 'YYYY-MM-DD')
+                : ''
+              : expiryPeriod[serialNumber].value
+                ? moment(expiryPeriod[serialNumber]?.value, 'YYYY-MM-DD')
+                : ''
+          }
+        />
+      ) : (
+        ''
+      )}
+      {(isSameTier && expiryPeriod[0].unit !== FIXED_DATE) ||
+      (!isSameTier && expiryPeriod[serialNumber].unit !== FIXED_DATE) ? (
+        <NumberInput
+          className={isError ? 'error-border' : ''}
+          label={formatMessage(messages.expirePointsPeriod)}
+          placeholder={formatMessage(globalMessages.enterPeriod)}
+          onChange={e => handlePeriodValueChange(e.target.value, serialNumber)}
+          disabled={
+            isSameTier
+              ? expiryPeriod[0].unit === NEVER
+              : expiryPeriod[serialNumber].unit === NEVER
+          }
+          value={
+            isSameTier
+              ? expiryPeriod[0].value
+              : expiryPeriod[serialNumber]?.value
+          }
+          errorMessage={isError ? errorMessage : ''}
+        />
+      ) : (
+        ''
+      )}
+    </FlexWithMargin>
+  );
+};
+
+  const showSpin =
+    upsertExpiryStatus === REQUEST || getExtendedFieldStatus === REQUEST;
+  const SliderContent = (
+    <CapSpin spinning={showSpin}>
+      <CapRow>
+        {[NEVER100, NUM_MONTHS_END12].includes(currentExpiry?.name) && (
+          <CapInfoNote
+            className="expiry-condition-alert"
+            noteText={formatMessage(globalMessages.caution)}
+            message={formatMessage(messages.expiryConditionNote)}
+            type="alert-warning"
+          />
+        )}
+        {PrimaryInfo}
+        <ModuleSelectedCondition />
+        {![CUSTOMER_REGISTRATION_DATE, FIXED_DATE].includes(expiryFrom) && (
+          <>
+            <TierSelection />
+            {isSameTier ? (
+              tierExpiryRenderer()
+            ) : (
+              <CapRow>
+                {React.Children.toArray(
+                  slabs.map(slab => (
+                    <CapRow>
+                      <CapHeading type="h4">{slab.name}</CapHeading>
+                      <CapDivider />
+                      {tierExpiryRenderer(slab.serialNumber - 1)}
+                    </CapRow>
+                  )),
+                )}
+              </CapRow>
+            )}
+          </>
+        )}
+      </CapRow>
+    </CapSpin>
+  );
+  const isSaveEnabled =
+    expiryName &&
+    !expiryConditionNameExistsError &&
+    module &&
+    expiryFrom &&
+    ((!isSameTier &&
+      !find(expiryPeriod, { unit: '' }) &&
+      !find(expiryPeriod, { value: '' })) ||
+      (isSameTier && expiryPeriod[0].unit && expiryPeriod[0].value)) &&
+    (!expiryPeriod.some((period) => {
+      const daysError = period.unit === NUM_DAYS && period.value > 5000;
+      const monthsError = period.unit === NUM_MONTHS_END && period.value > 150;
+      return daysError || monthsError;
+    }) ||
+    (isSameTier && ![CUSTOMER_REGISTRATION_DATE, FIXED_DATE].includes(
+      expiryFrom
+    ) && (
+      expiryPeriod[0].unit === NUM_DAYS && expiryPeriod[0].value <= 5000 ||
+      expiryPeriod[0].unit === NUM_MONTHS_END && expiryPeriod[0].value <= 150
+    )));
+
+
+
+  const preparePayload = () => {
+    let unitStr = expiryPeriod.map(period => period.unit).join();
+    let valStr = expiryPeriod.map(period => period.value).join();
+    const expiryFromData = [CUSTOMER_REGISTRATION_DATE, FIXED_DATE].includes(
+      expiryFrom,
+    )
+      ? CURRENT_DATE
+      : expiryFrom;
+
+    return {
+      name: expiryName,
+      description: expiryDescription || `${expiryName}_description`,
+      strategyTypeId,
+      propertyValues: {
+        expiry_type: isSameTier ? SLAB_INDEPENDENT : SLAB_BASED,
+        expiry_from: extendedFieldType ? extendedFieldType : expiryFromData,
+        expiry_time_units: unitStr,
+        expiry_time_values: valStr,
+        ...(extendedFieldName && {
+          extended_field_name: extendedFieldName,
+        }),
+      },
+      owner: module,
+      strategyId: strategyId?.toString(),
+    };
+  };
+
+  const saveStrategy = () => {
+    const payload = preparePayload();
+    actions.upsertExpiryStrategy(programId, payload, result => {
+      if (result?.success) {
+        if (strategyId) {
+          CapNotification.success({
+            message: formatMessage(globalMessages.editedSuccessfully),
+          });
+        } else {
+          CapNotification.success({
+            message: formatMessage(globalMessages.createdSuccessfully),
+          });
+        }
+        const mode = strategyId && strategyId !== -1 ? 'EDIT' : 'CREATE';
+        const expiryPointDetails = Object.assign(payload, {
+          programId: programId,
+          mode,
+        });
+        gtmPush('expiryPointDetails', expiryPointDetails);
+        refreshStrategyData();
+        closeSlidebox();
+        capActions.checkReconfigureProgram(programId);
+      } else {
+        CapNotification.error({
+          message: formatMessage(globalMessages.errorMessage),
+        });
+      }
+    });
+  };
+
+  const SlideBoxFooter = (
+    <CapButton
+      type={!isSaveEnabled ? 'secondary' : 'primary'}
+      disabled={!isSaveEnabled || showSpin}
+      onClick={saveStrategy}
+      id="loyalty-expiry-point-create-edit-button"
+      className="lp-btn-config-points"
+    >
+      {formatMessage(globalMessages.done)}
+    </CapButton>
+  );
+
+  return (
+    <CapSlideBox
+      showShadow
+      className={classnames(className, 'expiry-points-slide-box')}
+      show={show}
+      header={
+        <CapHeader
+          size="h1"
+          title={formatMessage(
+            globalMessages[
+              `${
+                mode === EDIT ? 'editExpiryConditions' : 'addExpiryConditions'
+              }`
+            ],
+          )}
+          description={formatMessage(globalMessages.expiryConditionDescription)}
+        />
+      }
+      content={SliderContent}
+      footer={SlideBoxFooter}
+      handleClose={closeSlidebox}
+      size="slide-box-size-medium"
+    />
+  );
+};
+
+ExpiryConditions.propTypes = {
+  className: PropTypes.string,
+  intl: intlShape.isRequired,
+  show: PropTypes.bool,
+  closeSlidebox: PropTypes.func,
+  currentProgram: PropTypes.object,
+  currentExpiry: PropTypes.object,
+  mode: PropTypes.string,
+  actions: PropTypes.object,
+  capActions: PropTypes.object,
+  match: PropTypes.object,
+  upsertExpiryData: PropTypes.object,
+  refreshStrategyData: PropTypes.func,
+  pointTypeIdData: PropTypes.object,
+  strategyData: PropTypes.object,
+  extendedFieldsData: PropTypes.object,
+};
+
+ExpiryConditions.defaultProps = {
+  intl: { formatMessage: {} },
+  show: false,
+  closeSlidebox: () => {},
+  currentProgram: {},
+  currentExpiry: {},
+  mode: '',
+  match: {},
+  refreshStrategyData: () => {},
+};
+
+const mapStateToProps = createStructuredSelector({
+  upsertExpiryData: makeSelectUpsertExpiry(),
+  strategyData: makeSelectPointStrategyDetails(),
+  extendedFieldsData: makeSelectExtendedFields(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    capActions: bindActionCreators(capActions, dispatch),
+  };
+}
+
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
+
+const withSaga = injectSaga({ key: 'upsertExpiry', saga });
+const withReducer = injectReducer({ key: 'upsertExpiry', reducer });
+
+export default compose(
+  withErrorBoundary,
+  withSaga,
+  withReducer,
+  withConnect,
+)(withRouter(injectIntl(withStyles(ExpiryConditions, styles))));