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

package/components/molecules/AddPartnerPrograms/AddPartnerPrograms.js

@@ -0,0 +1,1012 @@
+import React, { useEffect, useMemo, useState, useCallback } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { injectIntl } from 'react-intl';
+import moment from 'moment';
+import { compose, bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+
+import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapLink from '@capillarytech/cap-ui-library/CapLink';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapSkeleton from '@capillarytech/cap-ui-library/CapSkeleton';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import { CAP_GREEN01 } from '@capillarytech/cap-ui-library/styled/variables';
+
+import styles from './style';
+import * as partnerProgramActions from '../../organisms/PartnerProgramDashboard/actions';
+import * as capActions from '../../pages/Cap/actions';
+import messages from './messages';
+import { makeSelectCurrentProgram } from '../../pages/ProgramSummary/selectors';
+import globalMessages from '../../pages/Cap/messages';
+import partnerProgramsConfigPaneMessages from '../PartnerProgramsConfigPane/messages';
+import partnerProgramTierSettingMessages from '../../organisms/PartnerProgramTierSettings/messages';
+import withStyles from '../../../utils/withStyles';
+import withErrorBoundary from '../../../utils/withErrorBoundary';
+import { parnterProgramNameIsUnique } from './utils';
+import AddPartnerProgramsBasicDetails from '../AddPartnerProgramsBasicDetails';
+
+import {
+  DAYS,
+  NO_CAPITALIZATION,
+  MONTHS,
+  CHANNEL_EMAIL,
+  CHANNEL_MPUSH,
+  CHANNEL_SMS,
+  SUCCESS,
+  YES_CAPITALIZATION,
+  REQUEST,
+  VIEW,
+  EDIT,
+  FAILURE,
+  LONG_DATE_FORMAT,
+} from '../../pages/App/constants';
+import { NO, YES } from '../PartnerProgramsSettings/constants';
+import PartnerProgramsConfigPane from '../PartnerProgramsConfigPane';
+import {
+  SUPPLEMENTARY_PROGRAM,
+  EXTERNAL_PROGRAM,
+} from '../../pages/ProgramSummary/constants';
+import {
+  makeSelectPartnerProgramByIdDetails,
+  makeSelectAddPartnerProgramDetails,
+  makeSelectPartnerProgramDetails,
+} from '../../organisms/PartnerProgramDashboard/selectors';
+import { makeSelectPromotionsDetail } from '../../organisms/PromotionsDetail/selectors';
+import { makeSelectUser } from '../../pages/Cap/selectors';
+import { getPartnerProgramsContext } from '../../organisms/PartnerProgramDashboard/context';
+import ErrorBoundaryWrapper from '../ErrorBoundaryWrapper/ErrorBoundaryWrapper';
+import { PARTNER, POINTS } from './constants';
+
+const TrackingPeriodType = {
+  0: DAYS,
+  1: MONTHS,
+};
+
+const BenefitType = {
+  0: 'Loyalty Promotions',
+};
+
+export const AddPartnerPrograms = ({
+  className,
+  intl: { formatMessage },
+  match: {
+    params: { programId },
+  },
+  show,
+  handleClose,
+  currentProgramData: { currentProgram = {} } = {},
+  partnerProgramActions,
+  capActions,
+  partnerProgramData: {
+    getPartnerProgramByIdStatus,
+    getPartnerProgramByIdData,
+  },
+  loyaltyPromotionsDetails: { promotionDetails },
+  user,
+  partnerProgramType = SUPPLEMENTARY_PROGRAM,
+  partnerProgramId,
+  isExpiryReminderError,
+  setIsExpiryReminderError,
+  addPartnerProgramData: { addPartnerProgramStatus },
+  getAllPartnerProgramData: { partnerProgramDetails },
+}) => {
+  const partnerProgramData = useMemo(
+    () => {
+      if (getPartnerProgramByIdStatus === SUCCESS) {
+        return getPartnerProgramByIdData.toJS();
+      }
+      return {};
+    },
+    [getPartnerProgramByIdData, getPartnerProgramByIdStatus],
+  );
+
+  const { mode } = getPartnerProgramsContext();
+
+  const [supplementaryProgramName, setSupplementaryProgramName] = useState('');
+  const [
+    supplementaryProgramDuration,
+    setSupplementaryProgramDuration,
+  ] = useState('');
+  const [supplementaryProgramDesc, setSupplementaryProgramDesc] = useState('');
+  const [
+    supplementaryProgramDurationType,
+    setSupplementaryProgramDurationType,
+  ] = useState(DAYS);
+  const [displayBasicDetails, setDisplayBasicDetails] = useState(true);
+  const [
+    showInitialBenefitsAndLimits,
+    setShowInitialBenefitsAndLimits,
+  ] = useState(true);
+  const [benefitsAndLimitsData, setBenefitsAndLimitsData] = useState([]);
+  const [supplementaryExpiryValue, setSupplementaryExpiryValue] = useState(NO);
+  const [tierDowngradeOption, setTierDowngradeOption] = useState(NO);
+  const [validityDate, setValidityDate] = useState(moment());
+  const [
+    isSupplementaryExpiryMigerateSwitchChecked,
+    setIsSupplementaryExpiryMigerateSwitchChecked,
+  ] = useState(false);
+  const [supplementaryBackupProgram, setSupplementaryBackupProgram] = useState(
+    '',
+  );
+  const [downgradeTier, setDowngradeTier] = useState('');
+  const [showAddBenefitsAndLimits, setShowAddBenefitsAndLimits] = useState(
+    false,
+  );
+  const [
+    partnerTierSettingsCondition,
+    setPartnerTierSettingsCondition,
+  ] = useState(false);
+
+  const [
+    expiryReminderPartnerProgramInfo,
+    setExpiryReminderPartnerProgramInfo,
+  ] = useState([]);
+  const [
+    partnerProgramUniqueIdentifier,
+    setPartnerProgramUniqueIdentifier,
+  ] = useState('');
+
+  /** Tier setting in Coalition program */
+  const [tierSettingsType, setTierSettingsType] = useState(NO_CAPITALIZATION);
+  const [tierDowngradeType, setTierDowngradeType] = useState(NO_CAPITALIZATION);
+  const [partnerProgramTiersData, setPartnerProgramTiersData] = useState([
+    { tierNumber: 1, tierName: '', state: 'new' },
+    { tierNumber: 2, tierName: '', state: 'new' },
+  ]);
+  const [loyaltySyncTiersData, setLoyaltySyncTiersData] = useState({});
+  const [partnerSyncTiersData, setPartnerSyncTiersData] = useState({});
+  const [numberOfReminders, setNumberOfReminders] = useState(0);
+  /** End */
+  useEffect(
+    () => {
+      if (partnerProgramId) {
+        partnerProgramActions.getPartnerProgramById(
+          programId,
+          partnerProgramId,
+        );
+      }
+    },
+    [partnerProgramId, partnerProgramActions, programId],
+  );
+
+  /** Re - Initializing on unmount */
+  const initialize = () => {
+    setSupplementaryProgramName('');
+    setSupplementaryProgramDuration('');
+    setSupplementaryProgramDesc('');
+    setSupplementaryProgramDurationType(DAYS);
+    setDisplayBasicDetails(true);
+    setShowInitialBenefitsAndLimits(true);
+    setBenefitsAndLimitsData([]);
+    setSupplementaryExpiryValue(NO);
+    setTierDowngradeOption(NO);
+    setValidityDate(moment());
+    setIsSupplementaryExpiryMigerateSwitchChecked(false);
+    setSupplementaryBackupProgram('');
+    setDowngradeTier('');
+    setShowAddBenefitsAndLimits(false);
+    setPartnerTierSettingsCondition(false);
+    setExpiryReminderPartnerProgramInfo([]);
+    setPartnerProgramUniqueIdentifier('');
+    setTierSettingsType(NO_CAPITALIZATION);
+    setTierDowngradeType(NO_CAPITALIZATION);
+    setPartnerProgramTiersData([
+      { tierNumber: 1, tierName: '', state: 'new' },
+      { tierNumber: 2, tierName: '', state: 'new' },
+    ]);
+    setLoyaltySyncTiersData({});
+    setPartnerSyncTiersData({});
+    setNumberOfReminders(0);
+  };
+
+  useEffect(
+    () => () => {
+      initialize();
+      partnerProgramActions.clearPartnerProgramData();
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (mode === VIEW) {
+      setDisplayBasicDetails(false);
+    }
+  }, []);
+
+  useDeepCompareEffect(
+    () => {
+      if (!isEmpty(partnerProgramData)) {
+        const {
+          partnerProgramName,
+          description,
+          partnerProgramUniqueIdentifier,
+          partnerProgramMembershipCycle,
+          programToPartnerProgramPointsRatio,
+          isSyncWithLoyaltyTierOnDowngrade,
+          expiryDate,
+          benefitsAndLimitsInfo,
+          isTierBased,
+          expiryReminderPartnerProgramInfo: expiryReminderPartnerProgramInfoGet,
+          backupProgramId,
+        } = partnerProgramData;
+        if (partnerProgramName) setSupplementaryProgramName(partnerProgramName);
+        if (description) setSupplementaryProgramDesc(description);
+        if (partnerProgramUniqueIdentifier)
+          setPartnerProgramUniqueIdentifier(partnerProgramUniqueIdentifier);
+        if (partnerProgramMembershipCycle) {
+          const { cycleType, cycleValue } = partnerProgramMembershipCycle;
+          if (cycleValue) setSupplementaryProgramDuration(`${cycleValue}`);
+          if (cycleType !== undefined)
+            setSupplementaryProgramDurationType(TrackingPeriodType[cycleType]);
+        }
+        if (
+          isSyncWithLoyaltyTierOnDowngrade &&
+          partnerProgramType === SUPPLEMENTARY_PROGRAM
+        ) {
+          setTierDowngradeOption(YES);
+          const {
+            loyaltySyncTiers: { non_tier },
+          } = partnerProgramData;
+          setDowngradeTier(non_tier);
+        }
+        if (isTierBased && partnerProgramType === EXTERNAL_PROGRAM) {
+          const { partnerProgramTiers } = partnerProgramData;
+          setPartnerProgramTiersData(
+            partnerProgramTiers.map(data => ({ ...data, state: 'old' })),
+          );
+          setTierSettingsType(YES_CAPITALIZATION);
+        }
+        if (
+          isSyncWithLoyaltyTierOnDowngrade &&
+          partnerProgramType === EXTERNAL_PROGRAM
+        ) {
+          setTierDowngradeType(YES_CAPITALIZATION);
+          const { loyaltySyncTiers } = partnerProgramData;
+          if (!isTierBased) {
+            setPartnerSyncTiersData(loyaltySyncTiers);
+          } else {
+            setLoyaltySyncTiersData(loyaltySyncTiers);
+          }
+        }
+        if (expiryDate) {
+          setSupplementaryExpiryValue(YES);
+          setValidityDate(moment(expiryDate));
+        }
+        if (
+          Array.isArray(benefitsAndLimitsInfo) &&
+          benefitsAndLimitsInfo.length
+        ) {
+          /** Required format
+           * benefitLimit: "No Limit"
+           * benefitLimitValue: ""
+           * benefitType: "Loyalty Promotions"
+           * linkedPromotions: "id"
+           * id,
+           * createdBy,
+           * createdOn,
+           */
+          const formattedBenefitsAndLimits = benefitsAndLimitsInfo
+            ?.filter(data => data.isActive)
+            .map(
+              ({
+                benefitType,
+                maxUsageLimit,
+                promotionId,
+                id,
+                createdBy,
+                createdOn,
+                benefitName,
+                description,
+              }) => ({
+                benefitLimit:
+                  maxUsageLimit === -1
+                    ? formatMessage(globalMessages.noLimit)
+                    : formatMessage(globalMessages.enterValue),
+                benefitLimitValue: maxUsageLimit,
+                benefitType: BenefitType[benefitType],
+                linkedPromotions: promotionId,
+                benefitName,
+                description,
+                id,
+                createdBy,
+                createdOn,
+              }),
+            );
+          if (backupProgramId) {
+            setIsSupplementaryExpiryMigerateSwitchChecked(true);
+            setSupplementaryBackupProgram(backupProgramId);
+          }
+          setShowInitialBenefitsAndLimits(false);
+          setShowAddBenefitsAndLimits(true);
+          setBenefitsAndLimitsData(formattedBenefitsAndLimits);
+        }
+        if (expiryReminderPartnerProgramInfoGet?.length > 0) {
+          const expiryRemiderPartnerProgramGetInfo = expiryReminderPartnerProgramInfoGet.map(
+            item => ({
+              ...item,
+              index: item.autoIncId,
+              key: item.autoIncId,
+              //partnerProgramId: item.partnerProgramId, //kept for future reference
+            }),
+          );
+          setExpiryReminderPartnerProgramInfo(
+            expiryRemiderPartnerProgramGetInfo,
+          );
+        }
+      }
+    },
+    [partnerProgramData, partnerProgramType],
+  );
+
+  const partnerProgramTierSettingsData = useCallback(data => {
+    const {
+      tierSettingsType,
+      tierDowngradeType,
+      loyaltySyncTiersData,
+      partnerSyncTiersData,
+      partnerProgramTiersData,
+    } = data;
+
+    /* When both partner program tiers & loyalty tier downgrade features are not selected */
+    if (
+      tierSettingsType === NO_CAPITALIZATION &&
+      tierDowngradeType === NO_CAPITALIZATION
+    ) {
+      setPartnerTierSettingsCondition(false);
+      return;
+    }
+
+    /* When only partner program tiers is selected */
+    if (tierDowngradeType === NO_CAPITALIZATION) {
+      const nonEmptyTiers = partnerProgramTiersData.filter(
+        data => data.tierName !== '',
+      );
+      const result = nonEmptyTiers.length === partnerProgramTiersData.length;
+      setPartnerTierSettingsCondition(!result);
+      return;
+    }
+
+    /* When only loyalty tier downgrade is selected */
+    if (tierSettingsType === NO_CAPITALIZATION) {
+      const result = JSON.stringify(partnerSyncTiersData) === '{}';
+      setPartnerTierSettingsCondition(result);
+      return;
+    }
+
+    /* When both partner program tiers and loyalty tier downgrade features are selected */
+    let result;
+    const partnerTiersWithNames = partnerProgramTiersData.filter(
+      data => data.tierName !== '',
+    );
+    const condition_one =
+      partnerTiersWithNames?.length === partnerProgramTiersData?.length;
+    if (condition_one) {
+      const loyaltyTiersWithNames = partnerProgramTiersData.filter(data => {
+        const partnerTierName = data?.tierName;
+        return Boolean(loyaltySyncTiersData?.[partnerTierName]);
+      });
+      const condition_two =
+        loyaltyTiersWithNames?.length === partnerProgramTiersData?.length;
+      if (condition_two) {
+        result = false;
+      } else {
+        result = true;
+      }
+    } else {
+      result = true;
+    }
+    setPartnerTierSettingsCondition(result);
+  }, []);
+
+  const onClickNext = () => setDisplayBasicDetails(!displayBasicDetails);
+
+  const checkForSupplementaryProgramExpiry =
+    supplementaryExpiryValue === NO
+      ? false
+      : validityDate !== undefined &&
+        validityDate !== null &&
+        isSupplementaryExpiryMigerateSwitchChecked
+        ? supplementaryBackupProgram <= 0
+        : false;
+  const checkForSupplementaryTierDowngrade =
+    tierDowngradeOption === NO ? false : isEmpty(downgradeTier);
+
+  const checkForSaveDisabled = () => {
+    const checkForBasicDetails =
+      !supplementaryProgramName ||
+      !supplementaryProgramDesc ||
+      partnerProgramType === SUPPLEMENTARY_PROGRAM
+        ? isEmpty(supplementaryProgramDuration)
+        : false;
+
+    // const checkForBenefitsList = isEmpty(benefitsAndLimitsData);
+    return (
+      checkForSupplementaryProgramExpiry ||
+      checkForSupplementaryTierDowngrade ||
+      // checkForBenefitsList ||
+      checkForBasicDetails ||
+      partnerTierSettingsCondition ||
+      isExpiryReminderError
+    );
+  };
+
+  const onClickPreviewAndSave = () => {
+    // check if the name is unique first:
+    if (
+      parnterProgramNameIsUnique(
+        partnerProgramDetails,
+        supplementaryProgramName,
+        partnerProgramData,
+      )
+    ) {
+      const getIsSyncWithLoyaltyTierOnDowngrade = () => {
+        if (partnerProgramType === EXTERNAL_PROGRAM) {
+          return tierDowngradeType === YES ? true : false;
+        }
+        return tierDowngradeOption === YES ? true : false;
+      };
+
+      const getLoyaltySyncTiers = () => {
+        if (partnerProgramType === EXTERNAL_PROGRAM) {
+          if (tierSettingsType === NO && tierDowngradeType === YES) {
+            return partnerSyncTiersData || {};
+          }
+          if (tierSettingsType === YES && tierDowngradeType === YES) {
+            return loyaltySyncTiersData || {};
+          }
+        }
+        return tierDowngradeOption === YES ? { non_tier: downgradeTier } : {};
+      };
+
+      const getPartnerProgramTiers = () =>
+        tierSettingsType === YES_CAPITALIZATION ? partnerProgramTiersData : [];
+
+      const getIsTierBased = () =>
+        tierSettingsType === YES_CAPITALIZATION ? true : false;
+
+      const payload = {
+        partnerProgramInfo: {
+          partnerProgramId: partnerProgramId ? partnerProgramId : 0,
+          partnerProgramName: supplementaryProgramName,
+          description: supplementaryProgramDesc,
+          isTierBased: getIsTierBased(),
+          partnerProgramTiers: getPartnerProgramTiers(),
+          programToPartnerProgramPointsRatio: 1,
+          partnerProgramType:
+            partnerProgramType === EXTERNAL_PROGRAM
+              ? 'EXTERNAL'
+              : 'SUPPLEMENTARY',
+          partnerProgramMembershipCycle: {
+            cycleType:
+              supplementaryProgramDurationType === DAYS ? 'DAYS' : 'MONTHS',
+            cycleValue: supplementaryProgramDuration,
+          },
+          isSyncWithLoyaltyTierOnDowngrade: getIsSyncWithLoyaltyTierOnDowngrade(),
+          loyaltySyncTiers: getLoyaltySyncTiers(),
+          updatedViaNewUI: true,
+          expiryDate:
+            supplementaryExpiryValue === YES
+              ? validityDate.unix() * 1000
+              : null,
+          backupProgramId: isSupplementaryExpiryMigerateSwitchChecked
+            ? supplementaryBackupProgram
+            : null,
+        },
+        benefitsAndLimitsInfo: [],
+        isAddReminderSelected: false,
+      }; //pass -1 if it is create flow. In edit flow we will pass partnerProgramId. //check with backend or  Falansh // need to check in thrift it has DAYS and MONTHS and new UI has -MONTHS and YEARS
+      // expiryDate: supplementaryExpiryValue ? validityDate : '',
+      // backupProgramId: supplementaryBackupProgram
+      // ? supplementaryBackupProgram
+      // : null,
+      if (partnerProgramUniqueIdentifier) {
+        payload.partnerProgramInfo.partnerProgramUniqueIdentifier = partnerProgramUniqueIdentifier;
+      }
+      const finalExpiryReminders = [];
+      expiryReminderPartnerProgramInfo.forEach(item => {
+        if (item?.daysBeforeExpiryReminder) {
+          delete item.dataSource;
+          delete item.index;
+          delete item.key;
+          item.partnerProgramId = partnerProgramId ? partnerProgramId : 0;
+          item.partnerProgramName =
+            payload.partnerProgramInfo.partnerProgramName;
+          payload.isAddReminderSelected = true;
+          finalExpiryReminders.push(item);
+        }
+      });
+      if (expiryReminderPartnerProgramInfo.length) {
+        payload.expiryReminderPartnerProgramInfo = finalExpiryReminders;
+      }
+
+      if (benefitsAndLimitsData.length) {
+        /**
+         * benefitName: Joi.string().required(),
+         * benefitType: Joi.string().valid('POINTS', 'VOUCHER').required(),
+         * linkedProgramType: Joi.string().valid('PARTNER', 'LOYALTY').required(),
+         * description: Joi.string().required(),
+         * promotionId: Joi.number().required(),
+         * isActive: Joi.boolean().required(),
+         * maxUsageLimit: Joi.number().required(),
+         * createdBy: Joi.number().required(),
+         * createdOn: Joi.string().required(),
+         * id: Joi.number(), */
+        const promotionDetailsObject = promotionDetails.reduce((acc, promo) => {
+          acc[promo.id] = promo;
+          return acc;
+        }, {});
+        const benefitsAndLimitsResponse =
+          partnerProgramData?.benefitsAndLimitsInfo || [];
+        const newlyAddedBenefits = benefitsAndLimitsData.filter(
+          data => !data.id,
+        );
+        const payloadBenefitsAndLimitsData = [
+          ...newlyAddedBenefits,
+          ...benefitsAndLimitsResponse,
+        ];
+        const uniqueIds = benefitsAndLimitsData.map(data => data.id);
+        payloadBenefitsAndLimitsData.forEach(data => {
+          if (data?.id && !uniqueIds.includes(data.id)) {
+            data.isActive = false;
+          }
+          if (!data?.linkedPromotions) data.linkedPromotions = data.promotionId;
+        });
+        payload.benefitsAndLimitsInfo = payloadBenefitsAndLimitsData.map(
+          (data, index) => {
+            const {
+              linkedPromotions,
+              id,
+              createdBy,
+              createdOn,
+              benefitName,
+              description,
+              isActive = true,
+            } = data;
+            return {
+              benefitName:
+                benefitName ||
+                `${moment().unix()}_${index}_${
+                  promotionDetailsObject?.[linkedPromotions]?.name
+                }`,
+              description:
+                description ||
+                promotionDetailsObject?.[linkedPromotions]?.description,
+              promotionId: linkedPromotions,
+              benefitType: POINTS,
+              isActive, //Need to check this with BE
+              maxUsageLimit: -1, // it will be -1 in every case.
+              linkedProgramType: PARTNER,
+              createdBy: createdBy || user.refID,
+              createdOn:
+                createdOn || `${moment(Date.now()).format(LONG_DATE_FORMAT)}`,
+              id: id || -1,
+            };
+          },
+        );
+      }
+      const callback = res => {
+        handleClose();
+        partnerProgramActions.getAllPartnerPrograms(programId);
+        capActions.checkReconfigureProgram(programId);
+
+        if (res?.status === 200) {
+          let partnerProgramFlow;
+          if (partnerProgramId) {
+            partnerProgramFlow = formatMessage(globalMessages.edited);
+          } else {
+            partnerProgramFlow = formatMessage(globalMessages.created);
+          }
+          CapNotification.success({
+            message: formatMessage(messages.partnerProgramSuccessNotification, {
+              partnerProgramType:
+                partnerProgramType === EXTERNAL_PROGRAM
+                  ? formatMessage(globalMessages.external)
+                  : formatMessage(globalMessages.supplementary),
+              supplementaryProgramName,
+              partnerProgramFlow,
+            }),
+          });
+        }
+
+        if (res?.status === 500) {
+          const errorMessage =
+            res?.message?.errorMessage || res?.message?.partnerProgram;
+          CapNotification.error({
+            message: errorMessage,
+          });
+        }
+
+        /* Error notifications */
+        const benefitsAndLimitsFailureRes =
+          res?.result?.benefitsAndLimits?.failure || [];
+        const expiryReminderFailureRes =
+          res?.result?.expiryReminderForPartnerProgram?.failure || [];
+        if (benefitsAndLimitsFailureRes.length > 0) {
+          CapNotification.error({
+            message: formatMessage(messages.benefitsFailureNotification, {
+              failedBenefitsCount: benefitsAndLimitsFailureRes.length,
+            }),
+          });
+        }
+        if (expiryReminderFailureRes.length > 0) {
+          CapNotification.error({
+            message: formatMessage(messages.expiryFailureNotification, {
+              failedExpiryCount: expiryReminderFailureRes.length,
+            }),
+          });
+        }
+      };
+      partnerProgramActions.addPartnerProgram(
+        currentProgram.id,
+        payload,
+        callback,
+      );
+    } else {
+      CapNotification.error({
+        message: formatMessage(
+          messages.partnerProgramDuplicateNameNotification,
+          {
+            partnerProgramName: supplementaryProgramName,
+          }
+        ),
+      });
+    }
+
+    // /* Close slide box when save button is clicked */
+    // handleClose();
+  };
+  const onRefreshClick = () => {
+    if (getPartnerProgramByIdStatus === FAILURE)
+      partnerProgramActions.getPartnerProgramById(programId, partnerProgramId);
+  };
+  const getDescription = () => (
+    <CapRow className="supplementary-program-description">
+      <CapRow type="flex" className="supplementary-program">
+        {!displayBasicDetails ? (
+          <CapRow type="flex" className="supplementary-program-details-header">
+            <CapHeading type="label1">
+              {partnerProgramType == SUPPLEMENTARY_PROGRAM
+                ? formatMessage(messages.supplementaryPrograms)
+                : formatMessage(messages.externalPrograms)}
+            </CapHeading>
+            <CapHeading
+              type="label2"
+              className="supplementary-program-name programName-text"
+            >
+              {supplementaryProgramName}
+            </CapHeading>
+            {partnerProgramType == SUPPLEMENTARY_PROGRAM && (
+              <>
+                <CapHeading type="label1">
+                  {formatMessage(globalMessages.duration)}
+                </CapHeading>
+                <CapHeading
+                  type="label2"
+                  className="supplementary-program-name"
+                >
+                  {`${supplementaryProgramDuration} ${formatMessage(
+                    globalMessages[
+                      supplementaryProgramDurationType.toLowerCase()
+                    ],
+                  )}`}
+                </CapHeading>
+              </>
+            )}
+          </CapRow>
+        ) : (
+          ''
+        )}
+        <CapHeading type="label1">
+          {formatMessage(globalMessages.program)}
+        </CapHeading>
+        <CapHeading type="label2" className="supplementary-program-name">
+          {currentProgram?.name || ''}
+        </CapHeading>
+      </CapRow>
+    </CapRow>
+  );
+
+  const getHeaderMessage = () => {
+    if (mode === VIEW) {
+      if (partnerProgramType === SUPPLEMENTARY_PROGRAM)
+        return formatMessage(messages.viewSupplementaryPrograms);
+      return formatMessage(messages.viewExternalPrograms);
+    }
+    if (partnerProgramId) {
+      if (partnerProgramType === SUPPLEMENTARY_PROGRAM)
+        return formatMessage(messages.editSupplementaryPrograms);
+      return formatMessage(messages.editExternalPrograms);
+    }
+    if (partnerProgramType === SUPPLEMENTARY_PROGRAM)
+      return formatMessage(messages.addSupplementaryPrograms);
+    return formatMessage(messages.addExternalPrograms);
+  };
+
+  const SliderHeader = (
+    <CapRow className="add-supplementary-content-row">
+      <CapRow type="flex">
+        <CapHeader
+          title={getHeaderMessage()}
+          className="add-supplementary-form-header"
+          description={getDescription()}
+        />
+        {!displayBasicDetails && mode === EDIT ? (
+          <CapLink
+            onClick={onClickNext}
+            className="edit-supplementary-program"
+            title={
+              <CapRow type="flex">
+                <CapIcon
+                  type="edit"
+                  size="m"
+                  className={classnames(
+                    className,
+                    'pointer-cursor',
+                    'edit-supplementary-program-icon',
+                  )}
+                  onClick={onClickNext}
+                  aria-label="edit-btn"
+                />
+                <CapHeading
+                  type="h5"
+                  className="edit-supplementary-program-text"
+                >
+                  {formatMessage(globalMessages.edit)}
+                </CapHeading>
+              </CapRow>
+            }
+          />
+        ) : (
+          ''
+        )}
+      </CapRow>
+    </CapRow>
+  );
+
+  const showSpin = addPartnerProgramStatus === REQUEST;
+  const successIconStates = {
+    benefitsState: {
+      description: !isEmpty(benefitsAndLimitsData)
+        ? formatMessage(
+            partnerProgramsConfigPaneMessages.benefitsAndLimitsValueDesc,
+            {
+              size: benefitsAndLimitsData?.length,
+            },
+          )
+        : formatMessage(
+            partnerProgramsConfigPaneMessages.benefitsAndLimitsDesc,
+          ),
+      successState: !isEmpty(benefitsAndLimitsData),
+      reminderData: {
+        type: 'check-filled-plus',
+        svgProps: {
+          circleFill: !isEmpty(benefitsAndLimitsData) && CAP_GREEN01,
+        },
+      },
+    },
+    settingsState: {
+      description: formatMessage(
+        partnerProgramsConfigPaneMessages.settingsDesc,
+      ),
+      successState: !(
+        checkForSupplementaryProgramExpiry || checkForSupplementaryTierDowngrade
+      ),
+    },
+    tierSettingsState: {
+      description: formatMessage(
+        partnerProgramTierSettingMessages.tierSettingsDesc,
+      ),
+      successState: !partnerTierSettingsCondition,
+    },
+    reminderState: {
+      description: expiryReminderPartnerProgramInfo.length
+        ? formatMessage(partnerProgramsConfigPaneMessages.expiryReminderAdded, {
+            numberOfReminders: expiryReminderPartnerProgramInfo.length,
+          })
+        : formatMessage(partnerProgramsConfigPaneMessages.noReminderAdded),
+      successState: !!numberOfReminders,
+      reminderData: {
+        type: 'check-filled-plus',
+        svgProps: {
+          circleFill: expiryReminderPartnerProgramInfo.length && CAP_GREEN01,
+        },
+      },
+    },
+  };
+  const SliderContent = (
+    <CapSpin spinning={showSpin}>
+      <ErrorBoundaryWrapper
+        isApiErrorBoundary
+        onRefreshClick={onRefreshClick}
+        isApiError={getPartnerProgramByIdStatus === FAILURE}
+      >
+        {getPartnerProgramByIdStatus === REQUEST ? (
+          <CapSkeleton active paragraph={{ rows: 2 }} title={false} />
+        ) : displayBasicDetails ? (
+          <CapRow className="add-supplementary-basic-details">
+            <AddPartnerProgramsBasicDetails
+              supplementaryProgramName={supplementaryProgramName}
+              supplementaryProgramDuration={supplementaryProgramDuration}
+              supplementaryProgramDesc={supplementaryProgramDesc}
+              supplementaryProgramDurationType={
+                supplementaryProgramDurationType
+              }
+              setSupplementaryProgramName={setSupplementaryProgramName}
+              setSupplementaryProgramDuration={setSupplementaryProgramDuration}
+              setSupplementaryProgramDesc={setSupplementaryProgramDesc}
+              setSupplementaryProgramDurationType={
+                setSupplementaryProgramDurationType
+              }
+              onClickNext={onClickNext}
+              partnerProgramType={partnerProgramType}
+              successIconStates={successIconStates}
+            />
+          </CapRow>
+        ) : (
+          <CapRow className="add-supplementary-config-pane">
+            <PartnerProgramsConfigPane
+              commChannels={[CHANNEL_SMS, CHANNEL_EMAIL, CHANNEL_MPUSH]}
+              setShowInitialBenefitsAndLimits={setShowInitialBenefitsAndLimits}
+              showInitialBenefitsAndLimits={showInitialBenefitsAndLimits}
+              showAddBenefitsAndLimits={showAddBenefitsAndLimits}
+              setShowAddBenefitsAndLimits={setShowAddBenefitsAndLimits}
+              benefitsAndLimitsData={benefitsAndLimitsData}
+              setBenefitsAndLimitsData={setBenefitsAndLimitsData}
+              supplementaryExpiryValue={supplementaryExpiryValue}
+              tierDowngradeOption={tierDowngradeOption}
+              validityDate={validityDate}
+              isSupplementaryExpiryMigerateSwitchChecked={
+                isSupplementaryExpiryMigerateSwitchChecked
+              }
+              supplementaryBackupProgram={supplementaryBackupProgram}
+              downgradeTier={downgradeTier}
+              setSupplementaryExpiryValue={setSupplementaryExpiryValue}
+              setTierDowngradeOption={setTierDowngradeOption}
+              setValidityDate={setValidityDate}
+              setIsSupplementaryExpiryMigerateSwitchChecked={
+                setIsSupplementaryExpiryMigerateSwitchChecked
+              }
+              setSupplementaryBackupProgram={setSupplementaryBackupProgram}
+              setDowngradeTier={setDowngradeTier}
+              partnerProgramType={partnerProgramType}
+              partnerProgramTierSettingsData={partnerProgramTierSettingsData}
+              partnerTierSettingsCondition={partnerTierSettingsCondition}
+              tierSettingsType={tierSettingsType}
+              setTierSettingsType={setTierSettingsType}
+              tierDowngradeType={tierDowngradeType}
+              setTierDowngradeType={setTierDowngradeType}
+              partnerProgramTiersData={partnerProgramTiersData}
+              setPartnerProgramTiersData={setPartnerProgramTiersData}
+              loyaltySyncTiersData={loyaltySyncTiersData}
+              setLoyaltySyncTiersData={setLoyaltySyncTiersData}
+              partnerSyncTiersData={partnerSyncTiersData}
+              setPartnerSyncTiersData={setPartnerSyncTiersData}
+              setExpiryReminderPartnerProgramInfo={
+                setExpiryReminderPartnerProgramInfo
+              }
+              checkForSupplementarySettings={
+                !(
+                  checkForSupplementaryProgramExpiry ||
+                  checkForSupplementaryTierDowngrade
+                )
+              }
+              numberOfReminders={numberOfReminders}
+              setNumberOfReminders={setNumberOfReminders}
+              expiryReminderPartnerProgramInfo={
+                expiryReminderPartnerProgramInfo
+              }
+              setIsExpiryReminderError={setIsExpiryReminderError}
+            />
+          </CapRow>
+        )}
+      </ErrorBoundaryWrapper>
+    </CapSpin>
+  );
+  const message = checkForSaveDisabled()
+    ? formatMessage(messages.saveHoverMessage)
+    : '';
+  const savebutton = (
+    <span className="button-disabled-tooltip-wrapper">
+      <CapButton
+        className="preview-and-save-button"
+        onClick={onClickPreviewAndSave}
+        disabled={checkForSaveDisabled() || showSpin}
+      >
+        {formatMessage(globalMessages.save)}
+      </CapButton>
+    </span>
+  );
+
+  const SliderFooter =
+    mode === VIEW ? (
+      <></>
+    ) : (
+      <CapRow type="flex">
+        <CapTooltip placement="topLeft" title={message}>
+          {savebutton}
+        </CapTooltip>
+        <CapButton
+          type="secondary"
+          className="cancel-button"
+          onClick={handleClose}
+          disabled={showSpin}
+        >
+          {formatMessage(globalMessages.cancel)}
+        </CapButton>
+      </CapRow>
+    );
+
+  const customHandleClose = () => {
+    if (!showSpin) {
+      handleClose();
+    }
+  };
+
+  return (
+    <CapSlideBox
+      showShadow
+      size="size-l"
+      className={className}
+      show={show}
+      header={SliderHeader}
+      content={SliderContent}
+      handleClose={customHandleClose}
+      footer={SliderFooter}
+    />
+  );
+};
+
+AddPartnerPrograms.propTypes = {
+  partnerProgramId: PropTypes.string,
+  partnerProgramType: PropTypes.string,
+  partnerProgramData: PropTypes.object,
+  partnerProgramActions: PropTypes.object,
+  currentProgramData: PropTypes.object,
+  handleClose: PropTypes.func,
+  show: PropTypes.bool,
+  intl: PropTypes.object,
+  className: PropTypes.string,
+  match: PropTypes.object,
+  user: PropTypes.object,
+  loyaltyPromotionsDetails: PropTypes.object,
+  addPartnerProgramData: PropTypes.object,
+};
+
+const mapStateToProps = createStructuredSelector({
+  currentProgramData: makeSelectCurrentProgram(),
+  partnerProgramData: makeSelectPartnerProgramByIdDetails(),
+  loyaltyPromotionsDetails: makeSelectPromotionsDetail(),
+  user: makeSelectUser(),
+  addPartnerProgramData: makeSelectAddPartnerProgramDetails(),
+  getAllPartnerProgramData: makeSelectPartnerProgramDetails(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    partnerProgramActions: bindActionCreators(partnerProgramActions, dispatch),
+    capActions: bindActionCreators(capActions, dispatch),
+  };
+}
+
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
+
+export default withRouter(
+  compose(
+    withErrorBoundary,
+    withConnect,
+  )(injectIntl(withStyles(AddPartnerPrograms, styles))),
+);