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

package/components/organisms/TierUpgradeAndDowngrade/TierUpgradeAndDowngrade.js

@@ -8,23 +8,9 @@ import PropTypes from 'prop-types';
 import { intlShape, injectIntl } from 'react-intl';
 import withStyles from 'utils/withStyles';
 import { getTrackers } from 'utils/tiers';
-import moment from 'moment';
-import classnames from 'classnames';
 
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapTag from '@capillarytech/cap-ui-library/CapTag';
-import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
-import CapDatePicker from '@capillarytech/cap-ui-library/CapDatePicker';
-import CapLink from '@capillarytech/cap-ui-library/CapLink';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import StyledVars from '@capillarytech/cap-ui-library/styled';
-import CapModal from '@capillarytech/cap-ui-library/CapModal';
-import CapImage from '@capillarytech/cap-ui-library/CapImage';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
 
 import AddTierBanner from '../../molecules/AddTierBanner';
 import LabelWithDivider from '../../molecules/LabelWithDivider';
@@ -32,59 +18,16 @@ import UpgradeTier from '../../molecules/UpgradeTier';
 import UpgradeTrackerTier from '../../molecules/UpgradeTrackerTier';
 import DowngradeTier from '../../molecules/DowngradeTier';
 import SwitchWithDivider from '../../molecules/SwitchWithDivider';
-import * as globalStyles from '../../pages/Cap/style';
+
 import messages from './messages';
 import globalMessages from '../../pages/Cap/messages';
-import downgradeTierMessage from '../../molecules/DowngradeTier/messages';
-import addtierMessages from '../AddTier/messages';
 import * as programContext from '../../pages/ProgramSummary/context';
-import SelectOptionLabelWithInfo from '../../atoms/SelectOptionLabelWithInfo';
-import access from '../../../assets/access.png';
-
-import {
-  FIXED,
-  TRACKER_VALUE_BASED,
-  TILL_NEXT_REGISTRATION_DATE_OF_CUSTOMER,
-  FIXED_DURATION,
-  POSITIVE_INTEGER,
-  VALIDITY_PERIOD,
-  VALIDITY_PERIOD_TOOLTIP,
-  FIXED_CUSTOMER_REGISTRATION,
-  DATE_DD_MMM,
-} from '../../pages/App/constants';
+import { FIXED, TRACKER_VALUE_BASED } from '../../pages/App/constants';
 import styles from './style';
 import * as utils from './utils';
-import HeaderWithInput from '../../molecules/HeaderWithInput/HeaderWithInput';
-import NumberInput from '../../molecules/NumberInput';
-import UpgradeTierV2 from '../../molecules/UpgradeTierV2';
-import UpgradeTrackerTierV2 from '../../molecules/UpgradeTrackerTierV2';
-const { CAP_SPACE_04, CAP_SPACE_08, CAP_SPACE_12, CAP_SPACE_16 } = StyledVars;
-const { getProgramContext } = programContext;
-const {
-  populateTierData,
-  getStartDateError,
-  getDisabledUpgradeMode,
-  getDowngradeConditionData,
-  getValidityPeriodOption,
-  disabledDate,
-  tooltipforDisabledDate,
-} = utils;
-const { Flex } = globalStyles;
 
-const validityPeriodOptions = formatMessage =>
-  Object.keys(VALIDITY_PERIOD).map(condition => ({
-    label: (
-      <SelectOptionLabelWithInfo
-        title={formatMessage(globalMessages[VALIDITY_PERIOD[condition]])}
-        tooltipText={formatMessage(
-          globalMessages[VALIDITY_PERIOD_TOOLTIP[condition]],
-        )}
-        additionalIconClassName="validity-period-select"
-      />
-    ),
-    value: condition,
-    key: condition,
-  }));
+const { getProgramContext } = programContext;
+const { populateTierData, getStartDateError, getDisabledUpgradeMode } = utils;
 
 const TierUpgradeAndDowngrade = ({
   isAdvanceSetting,
@@ -113,40 +56,12 @@ const TierUpgradeAndDowngrade = ({
   secondaryThresholdErrorData,
   setDataHistory,
   renewalSwitchProps = {},
-  validitySwitch,
-  toggleAdvancedSetting,
-  setValidateDowngrade,
-  validateDowngradeOnReturnEnabled,
-  downgradeOnReturnEnabled,
-  validityMinDuration,
-  setValidityMinDuration,
-  onValidityMinDurationChange,
-  setIsFixedTypeWithoutYear,
-  isFixedTypeWithoutYear,
-  setRenewal,
-  tierRenewalValidityData,
-  setTierRenewalValidityData,
-  setRenewalTierValidityPeriodText,
-  additionalEligibilityCriteria,
-  setAdditionalEligibilityCriteria,
-  setExpressionRelation,
-  additionalSlabUpgradeAndRenewal,
 }) => {
-  const validityPeriodOptionsLocal = validityPeriodOptions(formatMessage);
   const { currentProgram = {} } = getProgramContext();
   const [disableCommons, setDisableCommons] = useState(false);
   const [isOnlyTwoTiers, setIsOnlyTwoTiers] = useState(false);
+
   const isDowngradeFieldDisable = !isOnlyTwoTiers && downgradeDisableCommons;
-  //checkbox for the minimum duration when it is checked
-  const [isChecked, setIsChecked] = useState(false);
-  const [showValidityModal, setShowValidityModal] = useState({
-    prevValidityPeriod: '',
-    show: false,
-  });
-  //ADVANCED SETTINGS VALIDTY DROPDOWN
-  const [advanceValidityPeriod, setAdvancedValidityPeriod] = useState(
-    validityPeriodOptionsLocal[0].value,
-  );
   // TRACKER DATAS
   const trackers = useMemo(() => getTrackers(trackersDetails, formatMessage), [
     trackersDetails,
@@ -180,8 +95,6 @@ const TierUpgradeAndDowngrade = ({
         downgradeOptionVal,
         shouldDowngradeVal,
         totalSlabs,
-        downgradeConditionCustomData,
-        tierRenewalValidityData,
       } = populateTierData({
         tierData,
         showTracker,
@@ -195,7 +108,6 @@ const TierUpgradeAndDowngrade = ({
         downgradeOption,
         secondaryThresholdErrorData,
       });
-
       setDataHistory({
         upgradeCriteria: upgradeCriteriaVal,
         additionalUpgradeCriteria: additionalUpgradeCriteriaVal,
@@ -216,26 +128,6 @@ const TierUpgradeAndDowngrade = ({
           setDisableCommons(disableCommonsVal);
         }
       }
-
-      const validityPeriodOption = getValidityPeriodOption({
-        downgradeOptionVal,
-        downgradeConditionCustomData,
-      });
-      const isMinDurationChecked =
-        downgradeConditionCustomData?.minimumDuration > 0;
-      setAdvancedValidityPeriod(validityPeriodOption);
-      setShowValidityModal(prevState => ({
-        ...prevState,
-        prevValidityPeriod: validityPeriodOption,
-      }));
-      setIsChecked(isMinDurationChecked);
-      setValidityMinDuration(downgradeConditionCustomData.minimumDuration);
-      setIsFixedTypeWithoutYear(
-        downgradeConditionCustomData.isFixedTypeWithoutYear,
-      );
-      if (!isAdvanceSetting) {
-        setTierRenewalValidityData(tierRenewalValidityData);
-      }
     },
     [
       JSON.stringify(tierData),
@@ -260,37 +152,14 @@ const TierUpgradeAndDowngrade = ({
     ],
   );
 
-  // Disable Validity & Renewal switch in Create/Edit tier wrt following condition
-  const isValidityAndRenewalSwitchDisabled =
-    !isAdvanceSetting &&
-    (downgradeOption?.downgradeCondition === FIXED_CUSTOMER_REGISTRATION ||
-      (downgradeOption?.downgradeCondition === FIXED &&
-        isFixedTypeWithoutYear));
-
-  useEffect(
-    () => {
-      // TO ACCOMMODATE VALIDITY PERIOD NEW OPTIONS: Should Disable validity & renew switch with ON state
-      if (isValidityAndRenewalSwitchDisabled) {
-        setShouldDowngrade(true);
-        setRenewal(true);
-      }
-    },
-    [JSON.stringify(downgradeOption)],
-  );
-
   const toggleDowngradeSwitch = () => setShouldDowngrade(!shouldDowngrade);
 
   const eligibilityHeaderProps = {
     size: 'label',
     className: 'section-eligibility-header',
-    title: formatMessage(messages.eligibility),
+    title: formatMessage(messages.defineEligibility),
     description: formatMessage(messages.defineEligibilityDescription),
   };
-  const ValidityHeaderPropsAdvancedSettings = {
-    className: 'section-eligibility-header',
-    title: formatMessage(messages.validity),
-    description: formatMessage(messages.validityNote),
-  };
 
   const eligibilityBannerInfoProps = {
     title: `${formatMessage(globalMessages.note)}: `,
@@ -316,14 +185,7 @@ const TierUpgradeAndDowngrade = ({
     isUpgradeTrackerBased,
     additionalUpgradeCriteria,
     setAdditionalUpgradeCriteria,
-    additionalEligibilityCriteria,
-    setAdditionalEligibilityCriteria,
-    setExpressionRelation,
     isSingleTierInAdvSetting,
-    toggleAdvancedSetting,
-    currentTier,
-    tierData,
-    additionalSlabUpgradeAndRenewal,
   };
 
   const upgradeTrackerTierProps = {
@@ -334,117 +196,16 @@ const TierUpgradeAndDowngrade = ({
     disabledUpgradeMode,
     additionalUpgradeCriteria,
     setAdditionalUpgradeCriteria,
-    additionalEligibilityCriteria,
-    setAdditionalEligibilityCriteria,
-    setExpressionRelation,
-    isEditMode,
-    currentTier,
   };
 
-  const getExtendedTooltipContent = () => (
-    <CapRow className="extended-section-container">
-      <CapRow className="editTier-tooltip-content">
-        {formatMessage(addtierMessages.redirectToAdvancedSettingsText)}
-      </CapRow>
-      <CapRow className="tooltip-anchor">
-        <CapLink
-          title={
-            <>
-              <CapIcon
-                type="open-in-new"
-                className="go-to-advance-settings"
-                aria-label="go-to-advance-settings-hover"
-              />
-              <CapRow className="go-to-advance-settings-text">
-                {formatMessage(addtierMessages.redirectToAdvancedSettingsLink)}
-              </CapRow>
-            </>
-          }
-          onClick={handleRedirectToAdvanceSettings}
-        />
-      </CapRow>
-    </CapRow>
-  );
-  const getValidityTooltipContent = () => (
-    <CapRow className="extended-section-container">
-      <CapRow
-        style={{
-          padding: `${CAP_SPACE_12} 0 ${CAP_SPACE_08} ${CAP_SPACE_12}`,
-        }}
-      >
-        {formatMessage(messages.validityRedirectToAdvancedSettingsText)}
-      </CapRow>
-      <CapRow className="tooltip-anchor">
-        <CapLink
-          title={
-            <>
-              <CapIcon
-                type="open-in-new"
-                size="xs"
-                aria-label="dest-mapping-hover"
-                style={{ marginRight: CAP_SPACE_04 }}
-              />
-              <CapRow
-                style={{
-                  marginLeft: CAP_SPACE_16,
-                  marginTop: '-1rem',
-                }}
-              >
-                {formatMessage(addtierMessages.redirectToAdvancedSettingsLink)}
-              </CapRow>
-            </>
-          }
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            margin: `${CAP_SPACE_04} 0 ${CAP_SPACE_08} ${CAP_SPACE_08}`,
-          }}
-          onClick={handleRedirectToAdvanceSettings}
-        />
-      </CapRow>
-    </CapRow>
-  );
-  const addMinimumDurationTooltip = () => (
-    <CapRow className={className}>
-      <CapRow>
-        {advanceValidityPeriod === FIXED_DURATION
-          ? formatMessage(messages.addMinimumdurationTooltipMessage)
-          : formatMessage(
-              messages.addMinimumdurationTooltipCustomerRegistration,
-            )}
-      </CapRow>
-      <CapRow type="flex">
-        <CapRow className="minimum-duration-example">
-          {advanceValidityPeriod === FIXED_DURATION
-            ? formatMessage(messages.addMinimumdurationTooltipMessageExample)
-            : formatMessage(
-                messages.addMinimumdurationTooltipCustomerRegistrationExample,
-              )}
-        </CapRow>
-        <CapRow className="minimum-duration-example-note">
-          {formatMessage(messages.addMinimumdurationTooltipMessageExample1)}
-        </CapRow>
-      </CapRow>
-    </CapRow>
-  );
   const shouldDowngradeSwitchProps = {
-    label: formatMessage(messages.validity),
+    label: formatMessage(messages.setValidity),
     isSwitchChecked: shouldDowngrade,
     onSwitchChange: toggleDowngradeSwitch,
-    inductiveText: formatMessage(messages.validityDescription),
-    className: classnames('validity-switch', {
-      'validity-title-disable-state': isValidityAndRenewalSwitchDisabled,
-    }),
-    isDivider: false,
-    disabled: isValidityAndRenewalSwitchDisabled,
-    toolTipProps: {
-      mouseEnterDelay: 1,
-    },
-    hoverToolTipText: isValidityAndRenewalSwitchDisabled
-      ? getValidityTooltipContent
-      : '',
-    tooltipPlacement: 'topRight',
+    inductiveText: formatMessage(messages.setValidityDescription),
+    className: 'validity-switch',
   };
+
   const downgradeTierProps = {
     isAdvanceSetting,
     disableCommons: isDowngradeFieldDisable,
@@ -453,338 +214,73 @@ const TierUpgradeAndDowngrade = ({
     setDowngradeOption,
   };
 
+  const validityBannerInfoProps = {
+    title: `${formatMessage(globalMessages.note)}: `,
+    description: formatMessage(
+      isAdvanceSetting
+        ? messages.validityExtensionAdv
+        : messages.validityExtensionSame,
+    ),
+    actionDescription: formatMessage(globalMessages.advancedSettings),
+    actions: toggleAdvanceSetting,
+    showAction: isDowngradeFieldDisable,
+  };
+
   const eligibilityAdvProps = {
-    title: formatMessage(messages.eligibility),
+    title: formatMessage(messages.eligibiltySettings),
     type: 'h4',
-    className: 'advanced-settings-title',
     dividerProps: {
       className: 'tier-label-divider',
     },
-    isDivider: false,
-    isDescription: true,
-    description: formatMessage(messages.eligibilityDescription),
   };
 
-  const handleRedirectToAdvanceSettings = () => {
-    toggleAdvancedSetting({ fromEditTier: true });
-  };
-  // Validity downgrade switch props
-  const validateDowngradeSwitch = {
-    label: formatMessage(messages.validityDowngradeSwitchTitle),
-    isSwitchChecked: downgradeOnReturnEnabled,
-    inductiveText: formatMessage(messages.validityDowngradeSwitchDesc),
-    disabled: true,
-    isDivider: false,
-    hoverToolTipText: getExtendedTooltipContent,
-    tooltipPlacement: 'bottomLeft',
-    toolTipProps: { getPopupContainer: trigger => trigger, mouseEnterDelay: 1 },
+  const downgradeAdvProps = {
+    title: formatMessage(messages.validitySettings),
+    type: 'h4',
+    className: 'adv-downgrade-label',
+    dividerProps: {
+      className: 'tier-label-divider',
+    },
   };
 
-  const handleCheckboxChange = e => {
-    setIsChecked(e.target.checked);
-    if (isChecked) setValidityMinDuration('');
-  };
   const { secondaryCriteriaEnabled } = additionalUpgradeCriteria;
 
-  const onAdvancedValiditySelectChange = value => {
-    setAdvancedValidityPeriod(value);
-
-    // Based on combination of validity and extended option, set downgrade type condition
-    const localDowngradeCondition = getDowngradeConditionData(
-      value,
-      downgradeOption.downgradeCondition,
-    );
-    setDowngradeOption({
-      ...downgradeOption,
-      downgradeCondition: localDowngradeCondition,
-    });
-
-    // Set following state when validity 3rd option is selected
-    setIsFixedTypeWithoutYear(value === FIXED_DURATION);
-
-    // Set default state of minimum duration checkbox & value when validity option is changed
-    setIsChecked(false);
-    setValidityMinDuration('');
-
-    // Set Validity modal as true when validity period option changes
-    setShowValidityModal({
-      prevValidityPeriod: advanceValidityPeriod,
-      show: true,
-    });
-  };
-
-  const downgradePeriodValueProps = {
-    allowZero: false,
-    type: POSITIVE_INTEGER,
-    value: validityMinDuration,
-    onChange: onValidityMinDurationChange,
-    suffix: formatMessage(globalMessages.tierMonths),
-    placeholder: formatMessage(messages.exampleMonthInput),
-  };
-
-  const disabledYear = current => {
-    let customYear = '11-25';
-    return current && current < moment(customYear, 'MM-DD');
-  };
-  const disabledDateHandler = current => {
-    const { isDisabled, tooltip } = tooltipforDisabledDate(current, formatMessage);
-
-    if (isDisabled && tooltip) {
-      return (
-        <CapTooltip title={tooltip}>
-          <span className="ant-calendar-date">{current.date()}</span>
-        </CapTooltip>
-      );
-    } else {
-      return <span className="ant-calendar-date">{current.date()}</span>;
-    }
-  };
-  const onStartDateChange = date => {
-    setDowngradeOption({
-      ...downgradeOption,
-      startDate: date,
-    });
-  };
-
-  const startDateValue = downgradeOption?.startDate
-    ? moment(downgradeOption.startDate, 'YYYY-MM-DD')
-    : '';
-
-  const shouldDowngradeAdvancedSettings = isAdvanceSetting && shouldDowngrade;
-
-  const handleValidityModalClick = () =>
-    setShowValidityModal(prevState => ({
-      ...prevState,
-      show: !showValidityModal.show,
-    }));
-
-  const showValidityModalDescription = () => {
-    if (
-      showValidityModal.prevValidityPeriod ===
-      TILL_NEXT_REGISTRATION_DATE_OF_CUSTOMER
-    ) {
-      return formatMessage(messages.validityModalDsc_1);
-    } else {
-      return formatMessage(messages.validityModalDsc_2);
-    }
-  }; 
-
   return (
     <CapRow className={className}>
-      <CapRow className="tier-upgrade-info-container">
-        {isAdvanceSetting ? (
-          <LabelWithDivider {...eligibilityAdvProps} />
-        ) : (
-          <CapHeader {...eligibilityHeaderProps} />
+      {isAdvanceSetting ? (
+        <LabelWithDivider {...eligibilityAdvProps} />
+      ) : (
+        <CapHeader {...eligibilityHeaderProps} />
+      )}
+      <AddTierBanner {...eligibilityBannerInfoProps} />
+
+      {/* Upgrade */}
+      <UpgradeTier {...upgradeTierProps} />
+      {secondaryCriteriaEnabled &&
+        showTracker &&
+        !isSingleTierInAdvSetting && (
+          <UpgradeTrackerTier {...upgradeTrackerTierProps} />
         )}
-        {isAdvanceSetting && <AddTierBanner {...eligibilityBannerInfoProps} />}
-        {/* Upgrade */}
-
-        {/* <UpgradeTier {...upgradeTierProps} />
-        {secondaryCriteriaEnabled &&
-          showTracker &&
-          !isSingleTierInAdvSetting && (
-            <UpgradeTrackerTier {...upgradeTrackerTierProps} />
-          )} */}
 
-        <UpgradeTierV2 {...upgradeTierProps} />
-
-        {isEditMode && (
-          <CapRow className="validity-downgrade-switch">
-            <SwitchWithDivider {...validateDowngradeSwitch} />
-          </CapRow>
-        )}
-        {shouldDowngradeAdvancedSettings && (
-          <SwitchWithDivider
-            className="tier-advanced-option"
-            label={formatMessage(messages.validateDowngradeOnReturn)}
-            inductiveText={formatMessage(
-              messages.transanctionReturnifDowngraded,
-            )}
-            isSwitchChecked={validateDowngradeOnReturnEnabled}
-            onSwitchChange={setValidateDowngrade}
-            isDivider={false}
+      {/* Downgrade */}
+      {isAdvanceSetting ? (
+        shouldDowngrade && <LabelWithDivider {...downgradeAdvProps} />
+      ) : (
+        <SwitchWithDivider {...shouldDowngradeSwitchProps} />
+      )}
+      {shouldDowngrade && (
+        <>
+          <DowngradeTier
+            {...downgradeTierProps}
+            renewalSwitchProps={renewalSwitchProps}
           />
-        )}
-        {/* Downgrade */}
-        {!isAdvanceSetting && (
-          <CapRow className="validity-container">
-            <SwitchWithDivider {...shouldDowngradeSwitchProps} />
-            <CapRow className="validity-note">
-              <AddTierBanner
-                description={formatMessage(messages.validityNoteEditTier)}
-              />
-            </CapRow>
-          </CapRow>
-        )}
-
-        {shouldDowngradeAdvancedSettings && (
-          <CapRow>
-            <CapHeader size="h2" {...ValidityHeaderPropsAdvancedSettings} />
-            <CapRow>
-              <Flex className="validity-period">
-                {/* Advanced settings validity section */}
-                <HeaderWithInput
-                  headerSize="label1"
-                  isDivider={false}
-                  selectWidth="25.714rem"
-                  value={advanceValidityPeriod}
-                  onSelectChange={onAdvancedValiditySelectChange}
-                  options={validityPeriodOptions(formatMessage)}
-                  titleHeader={formatMessage(globalMessages.validityPeriod)}
-                  getPopupContainer={trigger =>
-                    document.querySelector('.options-advanced-settings') ||
-                    trigger
-                  }
-                />
-                {advanceValidityPeriod === FIXED_DURATION && (
-                  <CapRow type="flex" className="till-fixed-date-container">
-                    <CapDatePicker
-                      label={formatMessage(globalMessages.fixedDate)}
-                      placeholder={formatMessage(messages.selectDayMonth)}
-                      format={DATE_DD_MMM}
-                      disabledYear={disabledYear}
-                      value={startDateValue}
-                      onChange={onStartDateChange}
-                      errorMessage={
-                        isStartDateError &&
-                        formatMessage(downgradeTierMessage.startDateError)
-                      }
-                      getCalendarContainer={triggerNode => triggerNode}
-                      disabledDate={disabledDate}
-                      dateRender={disabledDateHandler}
-                    />
-                  </CapRow>
-                )}
-              </Flex>
-            </CapRow>
-
-            {/* Advanced settings validity section*/}
-            {[FIXED_DURATION, TILL_NEXT_REGISTRATION_DATE_OF_CUSTOMER].includes(
-              advanceValidityPeriod,
-            ) && (
-              <CapRow className="advance-minimum-check">
-                <CapCheckbox
-                  checked={isChecked}
-                  onChange={handleCheckboxChange}
-                >
-                  {formatMessage(downgradeTierMessage.addMinimumDuration)}
-                </CapCheckbox>
-                <CapTooltip
-                  title={addMinimumDurationTooltip}
-                  placement="top"
-                  getPopupContainer={() =>
-                    document.querySelector('.minimun-duration-info-icon')
-                  }
-                >
-                  <CapIcon
-                    type="info"
-                    size="s"
-                    className="minimun-duration-info-icon"
-                    aria-label="minimumDurationInfo"
-                  />
-                </CapTooltip>
-                <CapColumn
-                  className="minimum-duration-input"
-                  tooltipPlacement="bottomLeft"
-                >
-                  <CapTooltip
-                    className="advance-minimum-duration-tooltip"
-                    title={
-                      !isChecked
-                        ? formatMessage(messages.minimumDurationTooltip)
-                        : ''
-                    }
-                    getPopupContainer={trigger => trigger}
-                    placement="topRight"
-                  >
-                    <span>
-                      <NumberInput
-                        className="advance-minimum-duration-input"
-                        disabled={!isChecked}
-                        {...downgradePeriodValueProps}
-                      />
-                    </span>
-                  </CapTooltip>
-                </CapColumn>
-              </CapRow>
+          {!isAdvanceSetting &&
+            renewalSwitchProps.isSwitchChecked && (
+              <AddTierBanner {...validityBannerInfoProps} />
             )}
-          </CapRow>
-        )}
-
-        {shouldDowngrade && (
-          <>
-            <DowngradeTier
-              {...downgradeTierProps}
-              renewalSwitchProps={{
-                ...renewalSwitchProps,
-                disabled: isValidityAndRenewalSwitchDisabled,
-                className: classnames(renewalSwitchProps.className, {
-                  'renewal-title-disable-state': isValidityAndRenewalSwitchDisabled,
-                }),
-                hoverToolTipText: isValidityAndRenewalSwitchDisabled
-                  ? getValidityTooltipContent
-                  : '',
-                tooltipPlacement: 'topRight',
-                toolTipProps: {
-                  className: 'renewal-condition-tooltip',
-                  mouseEnterDelay: 1,
-                },
-              }}
-              isEditMode={isEditMode}
-              validitySwitch={validitySwitch}
-              toggleAdvancedSetting={toggleAdvancedSetting}
-              advanceValidityPeriod={advanceValidityPeriod}
-              isChecked={isChecked}
-              validityMinDuration={validityMinDuration}
-              setIsFixedTypeWithoutYear={setIsFixedTypeWithoutYear}
-              onAdvancedValiditySelectChange={onAdvancedValiditySelectChange}
-              handleCheckboxChange={handleCheckboxChange}
-              onValidityMinDurationChange={onValidityMinDurationChange}
-              validityFixedDateOnChange={onStartDateChange}
-              tierRenewalValidityData={tierRenewalValidityData}
-              setTierRenewalValidityData={setTierRenewalValidityData}
-              setRenewalTierValidityPeriodText={
-                setRenewalTierValidityPeriodText
-              }
-            />
-            {children}
-          </>
-        )}
-
-        <CapModal
-          className={classnames(className, 'validity-period-modal')}
-          visible={showValidityModal.show}
-          footer={null}
-          centered
-        >
-          <CapRow className="validity-modal-content-container">
-            <CapColumn span={9}>
-              <CapImage
-                className="validity-period-modal-image"
-                src={access}
-                alt="default"
-              />
-            </CapColumn>
-            <CapColumn span={15}>
-              <CapRow className="validity-modal-note-container">
-                <CapHeading type="h3" className="validity-period-modal-title">
-                  {formatMessage(messages.validityModalTitle)}
-                </CapHeading>
-                <CapHeading
-                  type="label2"
-                  className="validity-period-modal-description"
-                >
-                  {showValidityModalDescription()}
-                </CapHeading>
-                <CapButton onClick={handleValidityModalClick}>
-                  {formatMessage(globalMessages.yesSure)}
-                </CapButton>
-              </CapRow>
-            </CapColumn>
-          </CapRow>
-        </CapModal>
-      </CapRow>
+          {children}
+        </>
+      )}
     </CapRow>
   );
 };
@@ -815,7 +311,6 @@ TierUpgradeAndDowngrade.propTypes = {
   secondaryThresholdErrorData: PropTypes.object,
   setDataHistory: PropTypes.func,
   renewalSwitchProps: PropTypes.object,
-  additionalSlabUpgradeAndRenewal: PropTypes.object,
 };
 
 TierUpgradeAndDowngrade.defaultProps = {
@@ -843,7 +338,6 @@ TierUpgradeAndDowngrade.defaultProps = {
   isEditMode: false,
   secondaryThresholdErrorData: {},
   setDataHistory: () => {},
-  additionalSlabUpgradeAndRenewal: {},
 };
 
 export default injectIntl(withStyles(TierUpgradeAndDowngrade, styles));