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

package/components/organisms/IssueCouponsWorkflowAction/IssueCouponsWorkflowAction.js

@@ -1,18 +1,12 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { injectIntl, intlShape } from 'react-intl';
 import PropTypes from 'prop-types';
-import useDeepCompareEffect from 'use-deep-compare-effect';
 
 import { compose, bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
-import cloneDeep from 'lodash/cloneDeep';
 import { connect } from 'react-redux';
 import injectSaga from 'utils/injectSaga';
 import injectReducer from 'utils/injectReducer';
-import withStyles from 'utils/withStyles';
-import uniq from 'lodash/uniq';
-import classnames from 'classnames';
-
 import clearDataOnUnmount from 'utils/clearDataOnUnmount';
 import {
   getCommSaveData,
@@ -29,22 +23,9 @@ import {
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
-import CapTreeSelect from '@capillarytech/cap-ui-library/CapTreeSelect';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-import StyledVars from '@capillarytech/cap-ui-library/styled';
-import CapTree from '@capillarytech/cap-ui-library/CapTree';
-import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
-import CapRadio from '@capillarytech/cap-ui-library/CapRadio';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import withErrorBoundary from 'utils/withErrorBoundary';
-import NumberInput from '../../molecules/NumberInput';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
 
+import withErrorBoundary from 'utils/withErrorBoundary';
 import * as style from './style';
 import messages from './messages';
 import globalMessages from '../../pages/Cap/messages';
@@ -52,54 +33,19 @@ import { Flex } from '../../pages/Cap/style';
 import SwitchWithDivider from '../../molecules/SwitchWithDivider';
 import TriggerAction from '../../atoms/TriggerAction';
 import MandatoryAndPriorityChannel from '../MandatoryAndPriorityChannel';
-import {
-  REQUEST,
-  FAILURE,
-  MODE_VIEW,
-  COUPON,
-  POSITIVE_INTEGER,
-} from '../../pages/App/constants';
-import * as globalConstants from '../../pages/Cap/constants';
+import { REQUEST, FAILURE } from '../../pages/App/constants';
 import * as globalActions from '../../pages/Cap/actions';
-import {
-  couponQunatityOption,
-  FIXED_QUANTITY,
-  TRANSACTION_STEP_FUNCTION,
-  TRANSACTION_ADD,
-  MAX_LIMIT,
-  SAME_FOR_ALL_TIERS,
-  DIFFERENT_FOR_EACH_TIER,
-} from './constants';
-import {
-  makeSelectUpsertAction,
-  makeSelectCap,
-} from '../../pages/Cap/selectors';
+import { makeSelectUpsertAction } from '../../pages/Cap/selectors';
 import * as actions from './actions';
 import * as selectors from './selectors';
 import saga from './saga';
 import reducer from './reducer';
 import ActionTitle from '../../molecules/ActionTitle';
 import ErrorBoundaryWrapper from '../../molecules/ErrorBoundaryWrapper';
-import StepFunctionEarnStrategy from '../../molecules/StepFunctionEarnStrategy/StepFunctionEarnStrategy';
-import { Provider } from '../AddEarnCondition/context';
-import {
-  DIFFERENT_CURRENCY,
-  SAME_CURRENCY,
-} from '../AddEarnCondition/constants';
-import { publicPath } from '../../../config/path';
-
-import { getWorkflowMode } from '../ConfigureWorkflows/context';
-import { getCouponStatus, millisecondsToDate } from './utils';
-import { COMPLETED, LIVE } from '../IssuePromotionWorkflowAction/constants';
-import InfoBanner from '../../molecules/InfoBanner';
-
-const { CAP_G05 } = StyledVars;
-const { PROGRAM_PERFIX_PATH } = globalConstants;
-const { CapTreeNode } = CapTree;
 
 const { makeSelectIssueCouponsWorkflowAction } = selectors;
-const { CapRowWithSpacing, styles } = style;
-export const IssueCouponsWorkflowAction = ({
+const { CapRowWithSpacing } = style;
+const IssueCouponsWorkflowAction = ({
   intl: { formatMessage },
   actions,
   closeSlidebox,
@@ -110,20 +56,13 @@ export const IssueCouponsWorkflowAction = ({
   couponsData: { getCouponsStatus, coupons = [] } = {},
   allowedChannels = [],
   eventType = '',
-  source,
-  currentProgram = {},
-  className,
-  userData,
 }) => {
-  const { isPreviewMode } = getWorkflowMode() ?? { isPreviewMode: false };
-
   const {
+    isEditMode,
     actionType = '',
     addTrackerTags = false,
     setShowSenderInformation,
   } = actionData;
-  const { currentOrgDetails } = userData || {};
-  const baseCurrency = currentOrgDetails?.basic_details?.base_currency || '';
   const [priorityChannels, setPriorityChannels] = useState([]);
   const [mandatoryChannels, setMandatoryChannels] = useState([]);
   const [smsDataSource, setSmsDataSource] = useState({});
@@ -133,24 +72,7 @@ export const IssueCouponsWorkflowAction = ({
 
   const [issueCoupons, setIssueCoupons] = useState();
   const [setupCommunication, setSetupCommunication] = useState(false);
-  const [enableAllocation, setEnableAllocation] = useState(false);
   const [couponOpts, setCouponOpts] = useState([]);
-  const [maxCouponLimit, setMaxCouponLimit] = useState('');
-  const [type, setType] = useState(SAME_CURRENCY);
-  const [stepSize, setStepSize] = useState(null);
-  const [earnAllocationValue, setEarnAllocationValue] = useState(
-    currentProgram.slabs.map(() => ({ value: '' })),
-  );
-  const [showCouponError, setShowCouponError] = useState(false);
-  const [couponQunatityType, setCouponQunatityType] = useState();
-  const [fixedAllTiers, setFixedAllTiers] = useState();
-  const [fixedAllTiersError, setFixedAllTiersErorr] = useState();
-  const [fixedDifferentTiers, setFixedDifferentTiers] = useState(
-    new Array(currentProgram.slabs.length).fill(''),
-  );
-  const [fixedDifferentTiersError, setFixedDifferentTiersError] = useState(
-    new Array(currentProgram.slabs.length).fill(''),
-  );
   // Need to verify here
   const showAddAction = false;
 
@@ -160,163 +82,31 @@ export const IssueCouponsWorkflowAction = ({
   useEffect(() => {
     getCoupons();
   }, []);
-  useEffect(
-    () => {
-      let {
-        quantityBasedOn = '',
-        couponDetailsPerTier = '[]',
-        isEditMode = false,
-        stepSize = '',
-      } = actionData;
-      couponDetailsPerTier = JSON.parse(couponDetailsPerTier);
-      const qtyBasedOn = quantityBasedOn
-        ? quantityBasedOn
-        : stepSize
-          ? TRANSACTION_STEP_FUNCTION
-          : '';
-      if (isEditMode) {
-        setCouponQunatityType(qtyBasedOn);
-        const sameForAllTiersEdit = couponDetailsPerTier?.every(
-          tier =>
-            tier?.couponsPerStep === couponDetailsPerTier[0]?.couponsPerStep,
-        )
-          ? SAME_CURRENCY
-          : DIFFERENT_CURRENCY;
-        setType(sameForAllTiersEdit);
-        if (
-          sameForAllTiersEdit === SAME_CURRENCY &&
-          qtyBasedOn === FIXED_QUANTITY
-        ) {
-          setFixedAllTiers(couponDetailsPerTier[0]?.couponsPerStep);
-        } else if (
-          sameForAllTiersEdit === DIFFERENT_CURRENCY &&
-          qtyBasedOn === FIXED_QUANTITY
-        ) {
-          const couponDetails = couponDetailsPerTier.map(
-            couponDetail => couponDetail?.couponsPerStep,
-          );
-          setFixedDifferentTiers(couponDetails);
-          //  if tier has been increased then set default value '' for new tier slab
-          if (currentProgram?.slabs.length > couponDetailsPerTier.length) {
-            const newTiers = new Array(
-              currentProgram.slabs.length - couponDetailsPerTier.length,
-            ).fill('');
-            setFixedDifferentTiers([...couponDetails, ...newTiers]);
-          }
-        }
-        if (!qtyBasedOn && !stepSize) {
-          setCouponQunatityType(FIXED_QUANTITY);
-          setFixedAllTiers('1');
-        }
-        if (qtyBasedOn === TRANSACTION_STEP_FUNCTION) {
-          setStepSize(actionData.stepSize);
-          const allocationValues = couponDetailsPerTier.map(couponDetail => ({
-            value: couponDetail?.couponsPerStep,
-          }));
-          setEarnAllocationValue(allocationValues);
-          // if tier has been increased then set default value '' for new tier slab
-          if (currentProgram?.slabs.length > couponDetailsPerTier.length) {
-            const newTiers = new Array(
-              currentProgram.slabs.length - couponDetailsPerTier.length,
-            ).fill({ value: '' });
-            setEarnAllocationValue([...allocationValues, ...newTiers]);
-          }
-        }
-      } else {
-        setCouponQunatityType(
-          eventType !== TRANSACTION_ADD ? FIXED_QUANTITY : null,
-        );
-      }
-    },
-
-    [],
-  );
 
   const getCoupons = () => {
     const { programId } = actionData;
     if (programId) {
-      actions.getCoupons(programId, true);
+      actions.getCoupons(programId);
     }
   };
-  const checkNewTierCreated = (values, typeValue) => {
-    let allocationValues = [...values];
-    currentProgram.slabs.forEach(slab => {
-      if (allocationValues[slab.serialNumber - 1] === undefined) {
-        if (typeValue === DIFFERENT_CURRENCY) allocationValues.push('');
-        else allocationValues.push(allocationValues[0]);
-      }
-    });
-    return allocationValues;
-  };
-  const validateFixedDifferentTiers = type =>
-    type === 'error'
-      ? fixedDifferentTiersError.every(value => value === '')
-      : fixedDifferentTiers.every(value => value !== '');
-  useDeepCompareEffect(
+
+  useEffect(
     () => {
-      const {couponDetailsPerTier, isEditMode } = actionData;
       if (Array.isArray(coupons) && coupons.length) {
         const { VoucherSeriesId } = actionData;
-        const couponList = [];
-        coupons.forEach(coupon => {
-          if (
-            coupon.seriesExpiryValue &&
-            getCouponStatus(coupon?.valid_till_date) === LIVE
-          ) {
-            couponList.push({
-              ...coupon,
-              label: coupon.seriesName,
-              value: `${coupon.id}`,
-              key: `${coupon.id}_coupon`,
-            });
-          } else if (coupon.id == VoucherSeriesId) {
-            couponList.push({
-              ...coupon,
-              label: coupon.seriesName,
-              value: `${coupon.id}`,
-              key: `${coupon.id}_coupon`,
-            });
-            // commented this code as this logic is not matching for current flow  will delete after proper testing but kept for reference
-            // setShowCouponError(true);
-          }
-        });
+        const couponList = coupons.map(({ seriesName, id }) => ({
+          label: seriesName,
+          value: `${id}`,
+          key: `${id}_coupon`,
+        }));
         setCouponOpts(couponList);
-        const coupon = couponList.find(coupon => coupon.id == VoucherSeriesId);
-        // if (isEditMode) {
-          onChangeOffer(
-            VoucherSeriesId,
-            coupon?.maxIssualsFromSeriesValue || null,
-          );
-        // }
+        onChangeOffer(VoucherSeriesId);
       }
-      // commenting as this flow is not matching for current flow will delete after proper e2e testing but kept for reference
-      // if (couponDetailsPerTier) {
-      //   const allocationValuesArr = [];
-      //   let allocationValues = JSON.parse(couponDetailsPerTier).map(
-      //     couponDetail => {
-      //       allocationValuesArr.push(couponDetail?.couponsPerStep);
-      //       return {
-      //         value: couponDetail?.couponsPerStep,
-      //       };
-      //     },
-      //   );
-      //   const typeValue = !(uniq(allocationValuesArr).length > 1)
-      //     ? SAME_CURRENCY
-      //     : DIFFERENT_CURRENCY;
-      //   setType(typeValue);
-      //   // if (typeValue) setEnableAllocation(true);
-      //   if (stepSize) {
-      //     setStepSize(stepSize);
-      //     setEarnAllocationValue(allocationValues);
-      //   }
-      //   // if coupons are issued and then user creates a niew tier, the coupons should be blank and save button should be disabled
-      //   allocationValues = checkNewTierCreated(allocationValues, typeValue);
-      // }
     },
-    [actionData, coupons],
+    [JSON.stringify(actionData), JSON.stringify(coupons)],
   );
 
-  useDeepCompareEffect(
+  useEffect(
     () => {
       const sms = getSmsCreativesData(actionData);
       const email = getEmailCreativesData(actionData);
@@ -335,79 +125,20 @@ export const IssueCouponsWorkflowAction = ({
         setSetupCommunication(true);
       }
     },
-    [actionData],
+    [JSON.stringify(actionData)],
   );
 
   let isSaveDisabled = useMemo(
-    () => {
-      let disabled = false;
-      if (
-        eventType === TRANSACTION_ADD &&
-        couponQunatityType === TRANSACTION_STEP_FUNCTION
-      ) {
-        if (type === DIFFERENT_CURRENCY) {
-          earnAllocationValue.forEach(allocationValue => {
-            if (
-              (!allocationValue.value && allocationValue.value !== 0) ||
-              (Boolean(maxCouponLimit) &&
-                allocationValue.value > Number(maxCouponLimit)) ||
-              !stepSize ||
-              allocationValue.value > MAX_LIMIT
-            ) {
-              disabled = true;
-            }
-          });
-        } else if (
-          (type === SAME_CURRENCY &&
-            !earnAllocationValue[0].value &&
-            earnAllocationValue[0].value !== 0) ||
-          !stepSize ||
-          earnAllocationValue[0].value > MAX_LIMIT
-        ) {
-          disabled = true;
-        }
-      } else if (!couponQunatityType || !type) {
-        disabled = true;
-      } else if (couponQunatityType === FIXED_QUANTITY) {
-        if (type === SAME_CURRENCY) {
-          if (fixedAllTiersError || !fixedAllTiers) {
-            disabled = true;
-          }
-        }
-        if (type === DIFFERENT_CURRENCY) {
-          if (
-            !validateFixedDifferentTiers('error') ||
-            !validateFixedDifferentTiers()
-          ) {
-            disabled = true;
-          }
-        }
-      }
-      return (
-        showSpin ||
-        !issueCoupons ||
-        disabled ||
-        isCreativesDelayError({
-          smsDataSource,
-          emailDataSource,
-          weChatDataSource,
-          mPushDataSource,
-        })
-      );
-    },
-    [
-      showSpin,
-      issueCoupons,
-      stepSize,
-      JSON.stringify(earnAllocationValue),
-      type,
-      enableAllocation,
-      couponQunatityType,
-      fixedAllTiersError,
-      fixedAllTiers,
-      fixedDifferentTiers,
-      fixedDifferentTiersError,
-    ],
+    () =>
+      showSpin ||
+      !issueCoupons ||
+      isCreativesDelayError({
+        smsDataSource,
+        emailDataSource,
+        weChatDataSource,
+        mPushDataSource,
+      }),
+    [showSpin, issueCoupons],
   );
 
   const isCommSaveDisabled = getCommChannelsDisableStatus({
@@ -420,447 +151,24 @@ export const IssueCouponsWorkflowAction = ({
   });
   const changeCommunication = () => setSetupCommunication(!setupCommunication);
 
-  //Commenting this code as of now as this fucntion was not used anywhere in the code but kept for reference
-  // const onAllocationChange = () => {
-  //   setEnableAllocation(!enableAllocation);
-  //   const defaultValues = currentProgram.slabs.map(() => ({ value: '' }));
-  //   setType(SAME_CURRENCY);
-  //   setEarnAllocationValue(defaultValues);
-  //   setStepSize(null);
-  // };
-
-  const onChangeOffer = (value, maxIssualsFromSeriesValue) => {
-    setIssueCoupons(value);
-    setMaxCouponLimit(maxIssualsFromSeriesValue);
+  const onChangeOffer = value => setIssueCoupons(value);
+
+  const selectOffer = {
+    label: formatMessage(globalMessages.selectOffers),
+    placeholder: formatMessage(messages.issueCouponPlaceholder),
+    inductiveText: formatMessage(
+      globalMessages.defineCriteriaForAcceptingPointBack,
+    ),
+    options: couponOpts,
+    value: issueCoupons,
+    onChange: onChangeOffer,
   };
 
-  const navigateToViewOffer = offerId => {
-    const { programId } = actionData;
-    window.open(
-      `${publicPath}${PROGRAM_PERFIX_PATH}${programId}/${MODE_VIEW}?currentStep=OFFERS&offerId=${offerId}`,
-      '_blank',
-      'noreferrer',
-    );
-  };
-
-  const Tooltip = ({ coupon }) => {
-    const {
-      maxIssualsPerCustomer,
-      maxIssualsPerCustomerValue,
-      minDaysBetweenIssualsValue,
-      minDaysBetweenIssuals,
-      maxIssualsFromSeries,
-      maxIssualsFromSeriesValue,
-      notifyCouponDeficiencyLimit,
-      mutuallyExclusiveCoupons,
-      setMutuallyExclusiveCoupons,
-      valid_till_date,
-    } = coupon || {};
-    const maxIssuals =
-      Number(maxIssualsPerCustomer) === -1
-        ? 'No Limit'
-        : Number(maxIssualsPerCustomer) === 1
-          ? 1
-          : maxIssualsPerCustomerValue;
-    const gap = minDaysBetweenIssuals ? minDaysBetweenIssualsValue : 0;
-    return (
-      <CapRow className="coupon-tooltip-container">
-        <CapHeading type="h4" className="tooltip-heading">
-          {formatMessage(messages.couponOfferExpires)}
-        </CapHeading>
-        <CapLabel type="label10" className="tooltip-label">
-          {valid_till_date
-            ? formatMessage(messages.couponOfferExpiresDate, {
-                date: millisecondsToDate(valid_till_date),
-              })
-            : ''}
-        </CapLabel>
-        <CapHeading type="h4" className="tooltip-heading">
-          {formatMessage(messages.restrictOnCouponIssuals)}
-        </CapHeading>
-        <CapLabel type="label10" className="tooltip-label">
-          {setMutuallyExclusiveCoupons
-            ? formatMessage(messages.yes, {
-                value: mutuallyExclusiveCoupons.length,
-              })
-            : formatMessage(globalMessages.no)}
-        </CapLabel>
-        <CapHeading type="h4" className="tooltip-heading">
-          {formatMessage(messages.maxIssualPerCustomer)}
-        </CapHeading>
-        <CapLabel className="tooltip-label" type="label10">
-          {formatMessage(messages.issualsWithGap, { maxIssuals, gap })}
-        </CapLabel>
-        <CapHeading type="h4" className="tooltip-heading">
-          {formatMessage(messages.totalIssualLimit)}
-        </CapHeading>
-        <CapLabel className="tooltip-label" type="label10">
-          <>
-            {maxIssualsFromSeries
-              ? formatMessage(messages.coupons, {
-                  coupons: maxIssualsFromSeriesValue,
-                })
-              : formatMessage(messages.noLimit)}
-          </>
-          <>
-            {notifyCouponDeficiencyLimit &&
-              formatMessage(messages.notifyRemainingCoupons, {
-                remainingCoupons: notifyCouponDeficiencyLimit,
-              })}
-          </>
-        </CapLabel>
-        <CapDivider />
-        <CapRow onClick={() => navigateToViewOffer(coupon.value)}>
-          <CapHeading type="h4" className="coupon-configuration">
-            {formatMessage(messages.openCouponConfiguration)}
-          </CapHeading>
-          <CapIcon type="open-in-new" className="open-in-new-icon" />
-        </CapRow>
-      </CapRow>
-    );
-  };
-
-  const Heading = ({ value }) => <CapHeading type="h4">{value}</CapHeading>;
-
   const setupCommunications = {
-    dataTestId: 'communication-switch',
-    label: <Heading value={formatMessage(globalMessages.setupCommunication)} />,
+    label: formatMessage(globalMessages.setupCommunication),
     isSwitchChecked: setupCommunication,
     onSwitchChange: changeCommunication,
   };
-  const fixedCouponQuantity = () => {
-    const renderFixedQuantityContent = () => {
-      switch (type) {
-        case SAME_CURRENCY:
-          return (
-            <CapRow>
-              <CapColumn span={5}>
-                <NumberInput
-                  label={formatMessage(messages.quantityLabelAllTiers)}
-                  labelPosition="top"
-                  value={fixedAllTiers}
-                  placeholder={formatMessage(
-                    messages.couponQuantityPlaceholder,
-                  )}
-                  onChange={handleQuantityChange(SAME_CURRENCY, null)}
-                  type={POSITIVE_INTEGER}
-                  showSuffix={fixedAllTiersError ? true : false}
-                  errorMessage={fixedAllTiersError}
-                  className={fixedAllTiersError ? 'error-boundary' : ''}
-                />
-              </CapColumn>
-            </CapRow>
-          );
-        case DIFFERENT_CURRENCY:
-          return (
-            <CapRow>
-              {currentProgram.slabs.map((slab, index) => (
-                <CapColumn key={index} span={5} className="tiers-margin">
-                  <NumberInput
-                    label={formatMessage(messages.quantityLabelDiiferentTiers, {
-                      tier: slab?.name,
-                    })}
-                    labelPosition="top"
-                    value={fixedDifferentTiers[index]}
-                    placeholder={formatMessage(
-                      messages.couponQuantityPlaceholder,
-                    )}
-                    onChange={handleQuantityChange(DIFFERENT_CURRENCY, index)}
-                    type={POSITIVE_INTEGER}
-                    showSuffix={fixedDifferentTiersError[index] ? true : false}
-                    errorMessage={fixedDifferentTiersError[index]}
-                    className={
-                      fixedDifferentTiersError[index] ? 'error-boundary' : ''
-                    }
-                    allowLeadingZero
-                  />
-                </CapColumn>
-              ))}
-            </CapRow>
-          );
-        default:
-          return null;
-      }
-    };
-
-    return (
-      <>
-        {couponQunatityType === FIXED_QUANTITY && (
-          <>
-            <CapRow>
-              <CapHeading type="h4" className="issue-coupon-heading">
-                {formatMessage(messages.couponQuantityFixedQuantity)}
-              </CapHeading>
-              <CapRow>
-                <CapRadioGroup
-                  className="fixed-coupon-quantity-radio-group"
-                  onChange={handleTiersChange}
-                  value={type}
-                >
-                  <CapRow type="flex">
-                    <CapRadio
-                      value={SAME_CURRENCY}
-                      name={formatMessage(messages.couponQunatityFixed)}
-                      className="fixed-coupon-quantity-radio-group"
-                    >
-                      {formatMessage(messages.couponQuantitySameTiers)}
-                    </CapRadio>
-                    <CapRadio
-                      value={DIFFERENT_CURRENCY}
-                      name={formatMessage(messages.couponQunatityFixed)}
-                      className="fixed-coupon-quantity-radio-group"
-                    >
-                      {formatMessage(messages.couponQuantityDifferentTiers)}
-                    </CapRadio>
-                  </CapRow>
-                </CapRadioGroup>
-              </CapRow>
-            </CapRow>
-            {renderFixedQuantityContent()}
-          </>
-        )}
-      </>
-    );
-  };
-
-  let viewModeSliderContent = () => {
-    const coupon = coupons?.find(coupon => coupon?.id == issueCoupons);
-    const seriesName = coupon ? coupon?.seriesName : '';
-    let isExpired = getCouponStatus(coupon?.valid_till_date) === COMPLETED;
-    const allocationFixedCouponsQuantity =
-      type === SAME_CURRENCY ? SAME_FOR_ALL_TIERS : DIFFERENT_FOR_EACH_TIER;
-
-    return (
-      <CapSpin spinning={showSpin}>
-        <ErrorBoundaryWrapper
-          isApiErrorBoundary
-          onRefreshClick={onRefreshClick}
-          isApiError={getCouponsStatus === FAILURE}
-        />
-        <CapRow className={className}>
-          <CapRow type="flex" className="coupon-view-container">
-            <CapRow className="coupon-view-type">
-              {formatMessage(globalMessages.coupon)}
-              <CapTooltip
-                arrowPointAtCenter
-                placement="rightTop"
-                title={
-                  isExpired
-                    ? formatMessage(messages.issueCouponExpiredNote)
-                    : formatMessage(messages.bulkIssueCouponNote)
-                }
-              >
-                <CapIcon type="info" size="s" className="coupon-view-info" />
-              </CapTooltip>
-            </CapRow>
-            <CapRow>
-              {seriesName}
-              <CapTooltip
-                arrowPointAtCenter
-                placement="rightTop"
-                getPopupContainer={() =>
-                  document.querySelector('.coupon-view-type')
-                }
-                className="coupon-tooltip"
-                overlayClassName="coupon-tooltip-overlay"
-                title={<Tooltip coupon={coupon} />}
-              >
-                <CapIcon type="info" size="s" className="coupon-view-info" />
-              </CapTooltip>
-            </CapRow>
-          </CapRow>
-
-          <CapRow type="flex" className="coupon-view-container">
-            <CapRow className="coupon-view-type">
-              {formatMessage(messages.couponQunatityHeading)}
-              <CapTooltip
-                arrowPointAtCenter
-                placement="rightTop"
-                title={formatMessage(messages.couponQunatitySubHeading)}
-              >
-                <CapIcon type="info" size="s" className="coupon-view-info" />
-              </CapTooltip>
-            </CapRow>
-            <CapRow>
-              {couponQunatityType === FIXED_QUANTITY ? (
-                <>
-                  {formatMessage(messages.couponQunatityTypeFixed)}
-                  <CapTooltip
-                    arrowPointAtCenter
-                    placement="rightTop"
-                    title={formatMessage(messages.couponQunatityFixedNode)}
-                  >
-                    <CapIcon
-                      type="info"
-                      size="s"
-                      className="coupon-view-info"
-                    />
-                  </CapTooltip>
-                </>
-              ) : (
-                <>
-                  {formatMessage(messages.couponQunatityTypeTransaction)}
-                  <CapTooltip
-                    arrowPointAtCenter
-                    placement="rightTop"
-                    title={formatMessage(
-                      messages.couponQunatityFixedNodeTransaction,
-                    )}
-                  >
-                    <CapIcon
-                      type="info"
-                      size="s"
-                      className="coupon-view-info"
-                    />
-                  </CapTooltip>
-                </>
-              )}
-            </CapRow>
-          </CapRow>
-          <CapRow type="flex" className="coupon-view-container">
-            <CapRow className="coupon-view-type">
-              {formatMessage(messages.couponQuantityFixedQuantity)}
-            </CapRow>
-            <CapRow>{allocationFixedCouponsQuantity}</CapRow>
-          </CapRow>
-          {couponQunatityType === FIXED_QUANTITY && type === SAME_CURRENCY ? (
-            <CapRow type="flex" className="coupon-view-container">
-              <CapRow className="coupon-view-type">
-                {formatMessage(globalMessages.allTiers)}
-              </CapRow>
-              <CapRow>{fixedAllTiers}</CapRow>
-            </CapRow>
-          ) : couponQunatityType === FIXED_QUANTITY &&
-          type === DIFFERENT_CURRENCY ? (
-            <CapRow>
-              {currentProgram.slabs.map((slab, index) => (
-                <CapRow key={index}>
-                  <CapRow
-                    type="flex"
-                    className="coupon-view-different-currency"
-                  >
-                    <CapRow className="coupon-view-type">{slab?.name}</CapRow>
-                    <CapRow>{fixedDifferentTiers[index] || 0}</CapRow>
-                  </CapRow>
-                </CapRow>
-              ))}
-            </CapRow>
-          ) : (
-            ''
-          )}
-          {couponQunatityType === TRANSACTION_STEP_FUNCTION &&
-          type === SAME_CURRENCY ? (
-            <CapRow type="flex" className="transaction-step-view-mode-same">
-              {formatMessage(globalMessages.forEvery)}
-              <CapLabel
-                type="label31"
-                className="transaction-step-view-mode-same-text"
-              >
-                {stepSize}
-                <span className="transaction-currency-view">
-                  {baseCurrency}
-                </span>
-              </CapLabel>
-              {formatMessage(globalMessages.transaction)}
-              {', '}
-              {formatMessage(globalMessages.allocate)}
-              <CapLabel
-                type="label31"
-                className="transaction-step-view-mode-same-text"
-              >
-                {earnAllocationValue[0]?.value}
-              </CapLabel>
-              {formatMessage(messages.couponsForAllTiers)}
-            </CapRow>
-          ) : couponQunatityType === TRANSACTION_STEP_FUNCTION &&
-          type === DIFFERENT_CURRENCY ? (
-            <CapRow>
-              <CapRow className="transaction-step-view-mode-same">
-                {formatMessage(globalMessages.forEvery)}
-                <CapLabel
-                  type="label31"
-                  className="transaction-step-view-mode-same-text"
-                >
-                  {stepSize}
-                  <span className="transaction-currency-view">
-                    {baseCurrency}
-                  </span>
-                </CapLabel>
-                {formatMessage(globalMessages.transaction)},
-              </CapRow>
-              <CapRow>
-                {currentProgram.slabs.map((slab, index) => (
-                  <CapRow key={index}>
-                    <CapRow
-                      type="flex"
-                      className="coupon-view-different-currency"
-                    >
-                      <CapRow className="transaction-step-view-mode-different">
-                        {formatMessage(globalMessages.allocateUpperCase)}
-                        <CapLabel
-                          type="label31"
-                          className="transaction-step-view-mode-same-text"
-                        >
-                          {earnAllocationValue[index] &&
-                            (earnAllocationValue[index]?.value || 0)}
-                        </CapLabel>
-                        {formatMessage(globalMessages.couponsFor)} {slab?.name}
-                      </CapRow>
-                    </CapRow>
-                  </CapRow>
-                ))}
-              </CapRow>
-            </CapRow>
-          ) : (
-            ''
-          )}
-        </CapRow>
-        <CapRow className={className}>
-          <CapRow type="flex" className="setup-comunication-container">
-            <CapRow className="setup-comunication-text">
-              <CapHeading type="h4">
-                {formatMessage(globalMessages.setupCommunication)}
-              </CapHeading>
-            </CapRow>
-            <CapRow className="setup-comunication-value">
-              {setupCommunication
-                ? formatMessage(globalMessages.yes)
-                : formatMessage(globalMessages.no)}
-            </CapRow>
-          </CapRow>
-          {setupCommunication && (
-            <MandatoryAndPriorityChannel
-              sms={smsDataSource}
-              email={emailDataSource}
-              weChat={weChatDataSource}
-              mPush={mPushDataSource}
-              priorityProps={priorityProps}
-              mandatoryProps={mandatoryProps}
-              onChangeCreatives={onChangeCreatives}
-              allowedChannels={allowedChannels}
-              mode={eventType}
-              actionType={actionType}
-              addTrackerTags={addTrackerTags}
-              setShowSenderInformation={setShowSenderInformation}
-              currentProgram={currentProgram}
-            />
-          )}
-        </CapRow>
-      </CapSpin>
-    );
-  };
-  //Commenting this code as of now as this fucntion was not used anywhere in the code but kept for reference
-  // const allocationBasedOnStepFunction = {
-  //   dataTestId: 'allocation-based-on-switch',
-  //   label: (
-  //     <Heading value={formatMessage(messages.allocateBasedOnStepFunction)} />
-  //   ),
-  //   isSwitchChecked: enableAllocation,
-  //   onSwitchChange: onAllocationChange,
-  //   disabled: !issueCoupons,
-  //   inductiveText: formatMessage(messages.allocateBasedOnDescription),
-  //   isDivider: false,
-  // };
 
   const mandatoryProps = {
     value: mandatoryChannels,
@@ -888,51 +196,12 @@ export const IssueCouponsWorkflowAction = ({
     const { programId, actionType } = actionData;
     if (programId && actionType) {
       let payload = {
-        source,
-        quantityBasedOn: couponQunatityType,
-        isCouponIssualForCustomerActivity: 'true',
         voucher_series: issueCoupons,
         description: couponOpts.find(
           ({ value }) => `${value}` === `${issueCoupons}`,
         )?.label,
         ...getCommSaveData({ dataSource: actionData }),
       };
-      if (
-        eventType === TRANSACTION_ADD &&
-        couponQunatityType === TRANSACTION_STEP_FUNCTION
-      ) {
-        payload.step_size = `${stepSize}`;
-        payload.coupon_details_per_tier = JSON.stringify(
-          earnAllocationValue.map((allocationValue, index) => ({
-            slabSerial: index + 1,
-            couponsPerStep:
-              type === SAME_CURRENCY
-                ? Number(earnAllocationValue[0]?.value)
-                : Number(allocationValue?.value),
-          })),
-        );
-      }
-      if (couponQunatityType === FIXED_QUANTITY) {
-        payload.coupon_details_per_tier =
-          type == SAME_CURRENCY
-            ? JSON.stringify(
-                currentProgram.slabs?.map((value, index) => {
-                  return {
-                    slabSerial: index + 1,
-                    couponsPerStep: fixedAllTiers,
-                  };
-                }),
-              )
-            : JSON.stringify(
-                fixedDifferentTiers.map((value, index) => {
-                  return {
-                    slabSerial: index + 1,
-                    couponsPerStep: value,
-                  };
-                }),
-              );
-      }
-
       if (setupCommunication) {
         // Send communication payload only if enabled
         payload = {
@@ -954,154 +223,9 @@ export const IssueCouponsWorkflowAction = ({
       );
     }
   };
-  const getNote = () => (
-    <CapRow className="coupon-allocation-strategy-note">
-      <CapRow>
-        {maxCouponLimit
-          ? formatMessage(messages.maxCouponAllocationStrategy, {
-              couponValue: maxCouponLimit,
-            })
-          : formatMessage(messages.unlimitedAllocationLimit)}
-      </CapRow>
-      <CapRow>{formatMessage(messages.couponAllocationStrategNote)}</CapRow>
-    </CapRow>
-  );
-
-  const getCouponsListingNodes = () => {
-    const treeNodes = [];
-    couponOpts?.forEach(coupon => {
-      const { label, value } = coupon;
-      const nodeProps = {
-        title: (
-          <Flex
-            className="coupon-select-container"
-            onClick={() =>
-              onChangeOffer(value, coupon?.maxIssualsFromSeriesValue)
-            }
-            data-testid={value}
-          >
-            <CapHeading
-              type="h5"
-              title={label}
-              className="select-component-title"
-            >
-              {label}
-            </CapHeading>
-            <CapTooltip
-              arrowPointAtCenter
-              placement="rightTop"
-              getPopupContainer={() =>
-                document.querySelector('.select-coupon-menu')
-              }
-              className="coupon-tooltip"
-              overlayClassName="coupon-tooltip-overlay"
-              title={<Tooltip coupon={coupon} />}
-            >
-              <CapIcon data-testid="coupons-tooltip" type="info" size="s" />
-            </CapTooltip>
-          </Flex>
-        ),
-        value: value,
-        label: label,
-      };
-      treeNodes.push(<CapTreeNode {...nodeProps} />);
-    });
-    return treeNodes;
-  };
-  const shouldAddCouponQuantity = (eventType, value) => {
-    if (eventType !== TRANSACTION_ADD && value === TRANSACTION_STEP_FUNCTION) {
-      return false;
-    }
-    return true;
-  };
-  const getCouponsQuantityNodes = () => {
-    const treeNodes = [];
-
-    couponQunatityOption?.forEach(coupon => {
-      const { label, value } = coupon;
-      const nodeProps = {
-        title: (
-          <Flex className="coupon-select-container" data-testid={value}>
-            <CapHeading
-              type="h5"
-              title={label}
-              className="select-component-title"
-            >
-              {label}
-            </CapHeading>
-            <CapTooltip
-              placement="rightTop"
-              title={
-                value == FIXED_QUANTITY
-                  ? formatMessage(messages.couponQunatityFixedNode)
-                  : formatMessage(messages.couponQunatityFixedNodeTransaction)
-              }
-            >
-              <CapIcon
-                data-testid={`option-${value}`}
-                type="info"
-                size="s"
-                className="coupon-tooltip"
-              />
-            </CapTooltip>
-          </Flex>
-        ),
-        value: value,
-        label: label,
-      };
-      if (shouldAddCouponQuantity(eventType, value)) {
-        treeNodes.push(<CapTreeNode {...nodeProps} />);
-      }
-    });
-    return treeNodes;
-  };
-  const handleTiersChange = tier => {
-    setType(tier.target.value);
-  };
-  const handleFixedQuantityChange = (type, index, value) => {
-    if (value === 0 || value === '0') return;
-    const isValid = Number(value) <= MAX_LIMIT;
-    if (type === SAME_CURRENCY) {
-      setFixedAllTiers(value);
-      !isValid
-        ? setFixedAllTiersErorr(formatMessage(messages.couponErrorMaxLimit))
-        : setFixedAllTiersErorr('');
-    } else if (type === DIFFERENT_CURRENCY) {
-      const updatedValues = [...fixedDifferentTiers];
-      updatedValues[index] = value;
-      setFixedDifferentTiers(updatedValues);
-      setFixedDifferentTiersError(prevErrors => {
-        const newErrors = [...prevErrors];
-        newErrors[index] = !isValid
-          ? formatMessage(messages.couponErrorMaxLimit)
-          : '';
-        return newErrors;
-      });
-    }
-  };
-
-  const handleQuantityChange = (type, index) => (e, value) => {
-    handleFixedQuantityChange(type, index, value);
-  };
-  // commented this code as this logic is not matching for current flow  will delete after proper testing but kept for reference
-  // const handleSelect = selectedOptionId => {
-  //   if (selectedOptionId == actionData?.VoucherSeriesId) {
-  //     setShowCouponError(true);
-  //   } else {
-  //     setShowCouponError(false);
-  //   }
-  // };
-
-  const handleQuantitySelect = couponQuantity => {
-    setCouponQunatityType(couponQuantity);
-    // if (actionData?.isEditMode) setFixedAllTiers('');
-  };
-  const getFilteredNodes = (searchText, item) =>
-    item.props?.label?.toLowerCase().includes(searchText.toLowerCase());
 
   const onRefreshClick = () => getCoupons();
-  const couponStatus =
-    coupons?.find(coupon => coupon?.id == issueCoupons) || {};
+
   const sliderContent = (
     <CapSpin spinning={showSpin}>
       <ErrorBoundaryWrapper
@@ -1109,217 +233,51 @@ export const IssueCouponsWorkflowAction = ({
         onRefreshClick={onRefreshClick}
         isApiError={getCouponsStatus === FAILURE}
       >
-        <CapRowWithSpacing
-          className={className}
-          showCouponError={showCouponError}
-        >
-          {actionData?.isEditMode &&
-            (getCouponStatus(couponStatus?.valid_till_date) === COMPLETED && (
-              <InfoBanner
-                className="issue-coupon-info-text"
-                title={formatMessage(messages.issueCouponExpiredNote)}
-                iconType="info"
-              />
-            ))}
-          <CapHeading type="h4" className="issue-coupon-heading">
-            {formatMessage(globalMessages.coupons)}
-          </CapHeading>
-          <CapLabel type="label3" className="issue-coupon-sub-text">
-            {formatMessage(messages.issueCouponSubText)}
-          </CapLabel>
-          <CapAlert
-            message={
-              <Flex>
-                <CapIcon type="info" size="s" />
-                <CapRow className="issue-coupon-note-message">
-                  {formatMessage(messages.bulkIssueCouponNote)}
-                </CapRow>
-              </Flex>
-            }
-            className="issue-coupon-alert-message"
-          />
-          <CapTreeSelect
-            showSearch
-            filterTreeNode={getFilteredNodes}
-            searchPlaceholder={formatMessage(
-              messages.issueCouponSearchPlaceholder,
-            )}
-            getPopupContainer={trigger => trigger.parentElement}
-            value={issueCoupons}
-            notFoundContent={
-              <CapRow className="not-found-content-container">
-                <CapIcon
-                  type="alert"
-                  size="m"
-                  svgProps={{
-                    fill: CAP_G05,
-                  }}
-                />
-                <CapLabel className="not-found-message">
-                  {formatMessage(globalMessages.noResultsFound)}
-                </CapLabel>
-              </CapRow>
-            }
-            dropdownStyle={{ maxHeight: 290, overflowX: 'hidden' }}
-            size="large"
-            placeholder={formatMessage(messages.issueCouponPlaceholder)}
-            className="select-coupon-menu"
-            // onSelect={handleSelect}
-            disabled={isPreviewMode}
-            suffixIcon={<CapIcon type="chevron-down" />}
-          >
-            {getCouponsListingNodes()}
-          </CapTreeSelect>
-          {showCouponError ? (
-            <CapRow className="issue-coupon-expiry-error">
-              {formatMessage(messages.issueCouponExpiryDateError)}
-            </CapRow>
-          ) : null}
-          {showAddAction && (
-            <CapButton
-              className="add-offer-issue-coupon"
-              onClick={addOfferAction}
-              type="flat"
-              isAddBtn
-              disabled={isPreviewMode}
-            >
-              {formatMessage(globalMessages.addOffer)}
-            </CapButton>
-          )}
-
-          <CapHeading type="h4" className="issue-coupon-heading">
-            {formatMessage(messages.couponQunatityHeading)}
-          </CapHeading>
-          <CapLabel type="label3" className="issue-coupon-sub-text">
-            {formatMessage(messages.couponQunatitySubHeading)}
-          </CapLabel>
-          <CapTooltip
-            placement="topLeft"
-            title={
-              eventType !== TRANSACTION_ADD
-                ? formatMessage(messages.fixedQuantityDisabled)
-                : ''
-            }
-          >
-            <CapRow type="flex" className="coupon-allocation-limit-tooltip">
-              <CapTreeSelect
-                getPopupContainer={trigger => trigger.parentElement}
-                dropdownStyle={{ maxHeight: 290, overflowX: 'hidden' }}
-                size="large"
-                placeholder={formatMessage(
-                  messages.couponQuantitySameAsPlaceholder,
-                )}
-                className="select-coupon-quantity"
-                onSelect={handleQuantitySelect}
-                value={couponQunatityType}
-                disabled={isPreviewMode || eventType !== TRANSACTION_ADD}
-                suffixIcon={<CapIcon type="chevron-down" />}
-              >
-                {getCouponsQuantityNodes()}
-              </CapTreeSelect>
-              <CapTooltip
-                placement="right"
-                title={formatMessage(messages.couponsAllocationLimit)}
-                getPopupContainer={trigger => trigger.parentElement}
-              >
-                <CapIcon
-                  type="info"
-                  size="s"
-                  className="coupon-allocation-limit coupon-tooltip"
-                />
-              </CapTooltip>
-            </CapRow>
-          </CapTooltip>
-          {fixedCouponQuantity()}
-          {eventType === TRANSACTION_ADD && (
-            <>
-              {couponQunatityType === TRANSACTION_STEP_FUNCTION && (
-                <CapRow className="step-function-content">
-                  <Provider
-                    value={{
-                      section: COUPON,
-                      maxCouponLimit,
-                      stepSize,
-                      earnAllocationValue,
-                      setStepSize,
-                      setEarnAllocationValue,
-                      type,
-                      setType,
-                      disableStrategy: false,
-                      classNameNoteInfo: 'coupon-note',
-                      note: getNote(),
-                      sameStrategyLabel: formatMessage(
-                        messages.sameCouponsForAllTiers,
-                      ),
-                      differentStrategyLabel: formatMessage(
-                        messages.differentCouponsForAllTiers,
-                      ),
-                      fixedAllTiersError,
-                      setFixedAllTiersErorr,
-                      fixedDifferentTiersError,
-                      setFixedDifferentTiersError,
-                      baseCurrency,
-                    }}
-                  >
-                    <StepFunctionEarnStrategy
-                      slabs={currentProgram.slabs}
-                      isCouponQuantity
-                    />
-                  </Provider>
-                </CapRow>
-              )}
-            </>
-          )}
-          <CapRow className="communication-content">
-            <SwitchWithDivider
-              {...setupCommunications}
-              disabled={isPreviewMode}
+        <CapRowWithSpacing>
+          <Flex>
+            <CapSelect
+              className="select-offer-issue-coupons"
+              {...selectOffer}
             />
-            {setupCommunication && (
-              <MandatoryAndPriorityChannel
-                sms={smsDataSource}
-                email={emailDataSource}
-                weChat={weChatDataSource}
-                mPush={mPushDataSource}
-                priorityProps={priorityProps}
-                mandatoryProps={mandatoryProps}
-                onChangeCreatives={onChangeCreatives}
-                allowedChannels={allowedChannels}
-                mode={eventType}
-                actionType={actionType}
-                addTrackerTags={addTrackerTags}
-                setShowSenderInformation={setShowSenderInformation}
-                currentProgram={currentProgram}
-              />
+            {showAddAction && (
+              <CapButton
+                className="add-offer-issue-coupon"
+                onClick={addOfferAction}
+                type="flat"
+                isAddBtn
+              >
+                {formatMessage(globalMessages.addOffer)}
+              </CapButton>
             )}
-          </CapRow>
+          </Flex>
+          <SwitchWithDivider {...setupCommunications} />
+          {setupCommunication && (
+            <MandatoryAndPriorityChannel
+              sms={smsDataSource}
+              email={emailDataSource}
+              weChat={weChatDataSource}
+              mPush={mPushDataSource}
+              priorityProps={priorityProps}
+              mandatoryProps={mandatoryProps}
+              onChangeCreatives={onChangeCreatives}
+              allowedChannels={allowedChannels}
+              mode={eventType}
+              actionType={actionType}
+              addTrackerTags={addTrackerTags}
+              setShowSenderInformation={setShowSenderInformation}
+            />
+          )}
         </CapRowWithSpacing>
       </ErrorBoundaryWrapper>
     </CapSpin>
   );
 
   const slideBoxFooter = (
-    <CapTooltip
-      placement="right"
-      title={
-        isSaveDisabled && !isPreviewMode
-          ? formatMessage(messages.saveDisabledTooltip)
-          : ''
-      }
-      overlayClassName="save-button-tooltip"
-    >
-      <sapn>
-        <TriggerAction
-          title={formatMessage(globalMessages.save)}
-          triggerAction={saveSlidebox}
-          isDisabled={
-            isSaveDisabled ||
-            (setupCommunication && isCommSaveDisabled) ||
-            isPreviewMode
-          }
-        />
-      </sapn>
-    </CapTooltip>
+    <TriggerAction
+      title={formatMessage(globalMessages.save)}
+      triggerAction={saveSlidebox}
+      isDisabled={isSaveDisabled || (setupCommunication && isCommSaveDisabled)}
+    />
   );
 
   return (
@@ -1327,8 +285,8 @@ export const IssueCouponsWorkflowAction = ({
       showShadow
       show
       header={<ActionTitle actionData={actionData} />}
-      content={isPreviewMode ? viewModeSliderContent() : sliderContent}
-      footer={!isPreviewMode ? slideBoxFooter : ''}
+      content={sliderContent}
+      footer={slideBoxFooter}
       handleClose={closeSlidebox}
       size="size-l"
     />
@@ -1346,7 +304,6 @@ IssueCouponsWorkflowAction.propTypes = {
   actions: PropTypes.object,
   updateRuleSet: PropTypes.func,
   allowedChannels: PropTypes.array,
-  source: PropTypes.string,
 };
 
 IssueCouponsWorkflowAction.defaultProps = {
@@ -1360,7 +317,6 @@ IssueCouponsWorkflowAction.defaultProps = {
 const mapStateToProps = createStructuredSelector({
   actionDetailsData: makeSelectUpsertAction(),
   couponsData: makeSelectIssueCouponsWorkflowAction(),
-  userData: makeSelectCap(),
 });
 
 function mapDispatchToProps(dispatch) {
@@ -1386,8 +342,4 @@ export default compose(
   withSaga,
   withReducer,
   withConnect,
-)(
-  injectIntl(
-    clearDataOnUnmount(withStyles(IssueCouponsWorkflowAction, styles)),
-  ),
-);
+)(injectIntl(clearDataOnUnmount(IssueCouponsWorkflowAction)));