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

package/components/organisms/ExpiryConditions/ExpiryConditions.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState } from 'react';
 import { injectIntl, intlShape } from 'react-intl';
 import { withRouter } from 'react-router';
 import { createStructuredSelector } from 'reselect';
@@ -9,15 +9,11 @@ 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 CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
 import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
@@ -26,23 +22,14 @@ 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 cloneDeep from 'lodash/cloneDeep';
+import find from 'lodash/find';
+import moment from 'moment';
+import withErrorBoundary from 'utils/withErrorBoundary';
 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';
@@ -53,12 +40,6 @@ 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;
@@ -66,7 +47,6 @@ const {
   EXPIRY_TYPE_MAP,
   MODULE_MAP,
   EXPIRY_TIME_MAP,
-  EXTENDED_FIELD_EXPIRY_TIME_MAP,
   SLAB_INDEPENDENT,
   EDIT,
   SLAB_BASED,
@@ -74,42 +54,27 @@ const {
   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 ExpiryConditions = props => {
   const {
     intl: { formatMessage },
     actions,
     className,
     show,
+    match: {
+      params: { programId },
+    },
     refreshStrategyData,
-    currentProgram: { slabs = [], id: programId } = {},
+    currentProgram: { slabs = [] } = {},
     currentExpiry = {},
     closeSlidebox,
     mode = '',
     upsertExpiryData: { upsertExpiryStatus },
     capActions,
     pointTypeIdData = {},
-    strategyData: { pointStrategy: { pointsExpiry = [] } = {} } = {},
-    extendedFieldsData: { extendedFields = [], getExtendedFieldStatus } = {},
   } = props;
+
   const {
     name,
     description,
@@ -119,119 +84,30 @@ export const ExpiryConditions = props => {
       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) => ({
+    () =>
+      Object.keys(EXPIRY_TIME_MAP).map((expiryTime, index) => ({
         label: formatMessageHandler(
           formatMessage,
-          globalMessages[EXPIRT_TIME_CONSTANTS[expiryTime]],
+          globalMessages[EXPIRY_TIME_MAP[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],
+      })),
+    [EXPIRY_TIME_MAP],
   );
-
-  const expiryConditionsDetailsObj = useMemo(
-    () => {
-      const expiryConditionsDetailsObj = {};
-      pointsExpiry.forEach(
-        expiryCondition =>
-          (expiryConditionsDetailsObj[
-            expiryCondition?.name?.trim()?.toLowerCase()
-          ] = expiryCondition),
-      );
-      return expiryConditionsDetailsObj;
-    },
-    [pointsExpiry.length],
+  const strategyId = currentExpiry?.id;
+  let { strategyTypeId: { pointsExpiry: strategyTypeId } = {} } =
+    getStratergyContext() || {};
+  const [expiryName, setExpiryName] = useState(name);
+  const [expiryDescription, setExpiryDescription] = useState(description);
+  const [module, setModule] = useState(owner);
+  const [expiryFrom, setExpiryFrom] = useState(expiry_from);
+  const [isSameTier, setIsSameTier] = useState(
+    expiry_type === SLAB_INDEPENDENT,
   );
   const expiryTimeUnitsArr = useMemo(() => expiry_time_units.split(','), [
     expiry_time_units,
@@ -253,6 +129,29 @@ export const ExpiryConditions = props => {
 
   const [expiryPeriod, setExpiryPeriod] = useState(getExpiryPeriodArray);
 
+  const expirePointsbasedOnOptions = useMemo(
+    () =>
+      Object.keys(EXPIRY_TYPE_MAP).map((expiryFrom, index) => ({
+        label: (
+          <SelectOptionLabelWithInfo
+            title={formatMessageHandler(
+              formatMessage,
+              globalMessages[EXPIRY_TYPE_MAP[expiryFrom]],
+              expiryFrom,
+            )}
+            tooltipText={formatMessageHandler(
+              formatMessage,
+              messages[EXPIRY_TYPE_MAP_TOOLTIP[expiryFrom]],
+              expiryFrom,
+            )}
+          />
+        ),
+        value: expiryFrom,
+        key: `expiryFrom${index}`,
+      })),
+    [EXPIRY_TYPE_MAP],
+  );
+
   const moduleOptions = useMemo(
     () =>
       Object.keys(MODULE_MAP).map((module, index) => ({
@@ -268,7 +167,6 @@ export const ExpiryConditions = props => {
   );
 
   const handleExpiryNameChange = e => {
-    setExpiryConditionNameExistsError(false);
     setExpiryName(e.target.value);
   };
 
@@ -276,33 +174,14 @@ export const ExpiryConditions = props => {
     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 `}
+        className="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}
@@ -315,308 +194,33 @@ export const ExpiryConditions = props => {
 
   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 handleExpiryTypeChange = value => {
+    setExpiryFrom(value);
   };
 
-  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">
+    <FlexWithMargin>
       <AllocationSelect
         showArrow
         showSearch
         label={formatMessage(messages.selectModule)}
         placeholder={formatMessage(messages.selectModulePlaceholder)}
-        inductiveText={formatMessage(globalMessages.selectModuleInductiveText)}
+        inductiveText={formatMessage(messages.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>
+      <AllocationSelect
+        showArrow
+        label={formatMessage(messages.expirePointsbasedOn)}
+        placeholder={formatMessage(messages.expirePointsbasedOn)}
+        inductiveText={formatMessage(messages.expirePointsEndInductive)}
+        options={expirePointsbasedOnOptions}
+        value={expiryFrom}
+        onChange={handleExpiryTypeChange}
+      />
     </FlexWithMargin>
   );
 
@@ -630,7 +234,7 @@ export const ExpiryConditions = props => {
   const TierSelection = () => (
     <FlexWithMargin>
       <CapCheckbox checked={isSameTier} onChange={onChangeIsSameTier}>
-        {formatMessage(globalMessages.tierConditions)}
+        {formatMessage(messages.tierConditions)}
       </CapCheckbox>
     </FlexWithMargin>
   );
@@ -669,25 +273,7 @@ export const ExpiryConditions = props => {
     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 (
+  const tierExpiryRenderer = serialNumber => (
     <FlexWithMargin>
       <AllocationSelect
         showArrow
@@ -705,12 +291,10 @@ export const ExpiryConditions = props => {
       (!isSameTier && expiryPeriod[serialNumber].unit === FIXED_DATE) ? (
         <CapDatePicker
           onChange={(date, dateString) =>
-            handlePeriodValueChange(date.format(DATE_FORMAT), serialNumber)
+            handlePeriodValueChange(dateString, serialNumber)
           }
           style={{ width: '100%' }}
           label={formatMessage(messages.expirePointsPeriodOnDate)}
-          placeholder={formatMessage(messages.selectDate)}
-          format={LOCALE_DATE_FORMAT}
           value={
             isSameTier
               ? expiryPeriod[0].value
@@ -727,9 +311,8 @@ export const ExpiryConditions = props => {
       {(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)}
+          placeholder={formatMessage(messages.enterPeriod)}
           onChange={e => handlePeriodValueChange(e.target.value, serialNumber)}
           disabled={
             isSameTier
@@ -741,97 +324,59 @@ export const ExpiryConditions = props => {
               ? expiryPeriod[0].value
               : expiryPeriod[serialNumber]?.value
           }
-          errorMessage={isError ? errorMessage : ''}
         />
       ) : (
         ''
       )}
     </FlexWithMargin>
   );
-};
 
-  const showSpin =
-    upsertExpiryStatus === REQUEST || getExtendedFieldStatus === REQUEST;
+  const showSpin = upsertExpiryStatus === 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>
+        <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
-    )));
-
-
+      (isSameTier && expiryPeriod[0].unit && expiryPeriod[0].value));
 
   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_from: expiryFrom,
         expiry_time_units: unitStr,
         expiry_time_values: valStr,
-        ...(extendedFieldName && {
-          extended_field_name: extendedFieldName,
-        }),
       },
       owner: module,
       strategyId: strategyId?.toString(),
@@ -883,7 +428,7 @@ export const ExpiryConditions = props => {
   return (
     <CapSlideBox
       showShadow
-      className={classnames(className, 'expiry-points-slide-box')}
+      className={className}
       show={show}
       header={
         <CapHeader
@@ -920,8 +465,6 @@ ExpiryConditions.propTypes = {
   upsertExpiryData: PropTypes.object,
   refreshStrategyData: PropTypes.func,
   pointTypeIdData: PropTypes.object,
-  strategyData: PropTypes.object,
-  extendedFieldsData: PropTypes.object,
 };
 
 ExpiryConditions.defaultProps = {
@@ -937,8 +480,6 @@ ExpiryConditions.defaultProps = {
 
 const mapStateToProps = createStructuredSelector({
   upsertExpiryData: makeSelectUpsertExpiry(),
-  strategyData: makeSelectPointStrategyDetails(),
-  extendedFieldsData: makeSelectExtendedFields(),
 });
 
 function mapDispatchToProps(dispatch) {