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

package/components/pages/BulkConfiguration/BulkConfigurations.js

@@ -1,877 +0,0 @@
-import React, { useEffect, useState, useCallback, useRef } from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { createStructuredSelector } from 'reselect';
-import { injectIntl, intlShape } from 'react-intl';
-import classnames from 'classnames';
-import { compose, bindActionCreators } from 'redux';
-
-import CapStepsAccordian from '@capillarytech/cap-ui-library/CapStepsAccordian';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapLink from '@capillarytech/cap-ui-library/CapLink';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import isEmpty from 'lodash/isEmpty';
-import { publicPath } from '../../../config/path';
-import { debounceUtil } from '../../../utils/commonUtils';
-import CreateBulkConfigForm from '../../organisms/CreateBulkConfigForm';
-import ConfirmationModal from '../../molecules/ConfirmationModal';
-import { StepAccordianHeader } from '../Promotions/style';
-import FileSelector from '../../molecules/FileSelector';
-import injectSaga from '../../../utils/injectSaga';
-import injectReducer from '../../../utils/injectReducer';
-import withErrorBoundary from '../../../utils/withErrorBoundary';
-import styles from './style';
-import BulkConfigPulishAlert from '../../molecules/BulkConfigPulishAlert/BulkConfigPulishAlert';
-import bulkConfigurationSaga from './saga';
-import bulkConfigurationDetailSaga from '../../organisms/BulkConfigurationsDetail/saga';
-import reducer from './reducer';
-import withStyles from '../../../utils/withStyles';
-import globalMessages from '../Cap/messages';
-import messages from './messages';
-import ProgramDestinationMapper from '../../organisms/ProgramDestinationMapper/ProgramDestinationMapper';
-import { makeSelectCap } from '../Cap/selectors';
-import {
-  makeSelectUploadTemplateData,
-  makeSelectPublishBulkConfigData,
-  makeSelectGetBulkConfigFileData,
-} from './selector';
-import * as actions from './actions';
-import * as bulkConfigurationsDetailActions from '../../organisms/BulkConfigurationsDetail/actions';
-import { UPLOAD_STEP, PREVIEW_STEP, DESTINATION_STEP } from './constants';
-import {
-  BULK_CONFIGURATIONS,
-  LIST_LOWERCASE,
-  REQUEST,
-  SUCCESS,
-  CREATE,
-  EDIT,
-} from '../App/constants';
-import PreviewBulkConfiguration from '../../organisms/ConfigureWorkflows/PreviewBulkConfiguration';
-import {
-  DIFFERENT_DESTINATION,
-  SAME_DESTINATION,
-  FAILED,
-} from '../Cap/constants';
-import { gtmPush } from '../../../utils/gtmTrackers';
-
-export const BulkConfigurations = ({
-  className,
-  intl: { formatMessage } = {},
-  userData: { user: { firstName = '', lastName = '' } = {} } = {},
-  actions,
-  uploadTemplateData: {
-    uploadConfigContentTemplateStatus = '',
-    uploadConfigTemplate = {},
-  } = {},
-  publishBulkConfigData: { publishBulkConfigStatus = '' } = {},
-  getBulkConfigFileData: { getBulkConfigFileStatus = '' } = {},
-  history,
-}) => {
-  // used history just to cover EDIT flow previously was using redux store for it.
-  const { bulkConfigData } = history?.location?.state || {};
-  const EDIT_MODE = !isEmpty(bulkConfigData);
-  if (EDIT_MODE) {
-    //used 'var' here instead of const/let because of similar names of different parameter and they are scope-based.
-    var { id: bulkId, name: bulkName, fileHandle: bulkFile } =
-      bulkConfigData || {};
-  }
-  const [name, setName] = useState(bulkName || '');
-  const [isDuplicateBulkConfigName, setIsDuplicateBulkConfigName] = useState(
-    false,
-  );
-  const [bulkConfigId, setBulkConfigId] = useState(bulkId || '');
-  const [bulkConfigHeader, setBulkConfigHeader] = useState('');
-  const [showNextContent, setShowNextContent] = useState(false);
-  const [key, setkey] = useState(0);
-  const [fileHandle, setFileHandle] = useState(bulkFile || '');
-  const [bulkConfigFile, setBulkConfigFile] = useState(null);
-  const [currentStep, setCurrentStep] = useState(0);
-  const [nextStep, updateNextStep] = useState(null);
-  const [configFileContent, setConfigFileContent] = useState(null);
-  const [configFileName, setConfigFileName] = useState(bulkFile || '');
-  const [confirmationModalVisible, setConfirmationModalVisible] = useState(
-    false,
-  );
-  const [showPublishAlert, setShowPublishAlert] = useState(false);
-  const [showUploadAlert, setShowUploadAlert] = useState(false);
-  const [fileUploadDone, setFileUploadDone] = useState(EDIT_MODE);
-  const [stepDestinationDone, setStepDestinationDone] = useState(false);
-  const [previewPrograms, setPreviewPrograms] = useState([]);
-  const [successPrograms, setSuccessPrograms] = useState(0);
-  const [failedPrograms, setFailedPrograms] = useState(0);
-  const [triggerClearState, setClearTriggerState] = useState(false);
-  const [destinationValue, setDestinationValue] = useState('');
-  const [currentProgramStatus, setCurrentProgramStatus] = useState(false);
-  useEffect(() => {
-    if (!isEmpty(bulkConfigData)) {
-      actions.getBulkConfigFile(fileHandle, response => {
-        const { status = '', result = {} } = response;
-        if (status === 200) {
-          setConfigFileContent(result);
-        }
-      });
-    }
-  }, []);
-  useEffect(
-    () => {
-      setSuccessPrograms(
-        previewPrograms.filter(element => element.status === SUCCESS).length,
-      );
-      setFailedPrograms(
-        previewPrograms.filter(element => element.status === FAILED).length,
-      );
-    },
-    [previewPrograms],
-  );
-  const debouncedSearch = useCallback(
-    debounceUtil(({ name }) => {
-      if (name !== bulkName) {
-        const queryParams = { name, limit: 100, pageNumber: 0 };
-        actions.checkDuplicateName(queryParams, response =>
-          checkNameDuplicate(response, name),
-        );
-        return;
-      }
-    }, 300),
-    [],
-  );
-
-  const checkNameDuplicate = (response = {}, originalString) => {
-    const { bulkConfigs = [] } = response;
-    setIsDuplicateBulkConfigName(
-      bulkConfigs
-        .map(({ name: configName }) => configName)
-        .includes(originalString),
-    );
-    if (isEmpty(bulkConfigData)) setIsDuplicateBulkConfigName(false);
-  };
-
-  const searchCache = useRef(name);
-  useEffect(
-    () => {
-      if (!isEmpty(name)) debouncedSearch({ name });
-
-      return () => (searchCache.current = name);
-    },
-    [name],
-  );
-
-  const updateName = newName => {
-    setIsDuplicateBulkConfigName(false);
-    setName(newName);
-  };
-  const onClickNext = () => {
-    setBulkConfigHeader(name);
-    setShowNextContent(!showNextContent);
-    showNext();
-    const bulkConfigDetails = Object.assign(
-      { name },
-      {
-        configuredData: bulkConfigData,
-        mode: EDIT_MODE ? EDIT : CREATE,
-        eventKey: 'BULK_CONFIG_COMPLETED_STEP_0',
-      },
-    );
-    gtmPush('bulkConfigDetails', bulkConfigDetails);
-  };
-  const getDescription = () => {
-    return `${formatMessage(messages.bulkCreatedBy)} ${firstName} ${lastName}`;
-  };
-  const changeUploadFile = ({ fileList }) => {
-    const reader = new FileReader();
-    reader.onload = function(event) {
-      const content = event?.target.result;
-      setConfigFileContent(JSON.parse(content));
-    };
-    if (!fileList.length) {
-      setConfigFileContent(null);
-    } else {
-      fileList.map(file => {
-        file.status = 'success';
-        reader.readAsText(file.originFileObj);
-        setBulkConfigFile(file.originFileObj);
-        setConfigFileName(file?.name);
-      });
-    }
-  };
-
-  const fileSelector = {
-    onChange: changeUploadFile,
-    fileType: '.json',
-    fileTypeLabel: 'JSON',
-  };
-
-  const showNext = () => {
-    if (currentStep < Number(PREVIEW_STEP)) {
-      let step = Number(currentStep) + 1;
-      setCurrentStep(step.toString());
-    }
-    if (currentStep === DESTINATION_STEP) {
-      setStepDestinationDone(true);
-    }
-  };
-  const onStepChange = step => {
-    updateNextStep(step);
-    if (step === PREVIEW_STEP) setkey(key + 1);
-    setCurrentStep(step);
-  };
-  const submitJsonFileAndShowNext = () => {
-    handleHideFileUploadConfirmModal();
-    actions.uploadBulkConfig(bulkConfigFile, response => {
-      const { status = '', result: { s3Path = null } = {} } = response;
-      if (status === 200) {
-        setFileHandle(s3Path);
-        showNext();
-        setFileUploadDone(true);
-        setClearTriggerState(true);
-        gtmPushBulkConfigUploadFile(s3Path);
-      } else {
-        CapNotification.error({
-          message: formatMessage(messages.uploadFailError),
-        });
-      }
-    });
-  };
-
-  const gtmPushBulkConfigUploadFile = fileHandle => {
-    const bulkConfigDetails = Object.assign(
-      { name, fileHandle },
-      {
-        configuredData: bulkConfigData,
-        mode: EDIT_MODE ? EDIT : CREATE,
-        eventKey: 'BULK_CONFIG_COMPLETED_UPLOAD_STEP_1',
-      },
-    );
-    gtmPush('bulkConfigDetails', bulkConfigDetails);
-  };
-
-  const handleShowFileUploadConfirmModal = () => {
-    if (!fileUploadDone) {
-      setShowUploadAlert(true);
-    } else {
-      //for edit mode
-      showNext();
-      const { fileHandle } = bulkConfigData;
-      gtmPushBulkConfigUploadFile(fileHandle);
-    }
-  };
-  const handleHideFileUploadConfirmModal = () => setShowUploadAlert(false);
-
-  const showUploadSpin = uploadConfigContentTemplateStatus === REQUEST;
-
-  const handleFileDelete = () => {
-    setConfigFileContent(null);
-    setBulkConfigFile(null);
-    setConfigFileName('');
-    handleCloseModal();
-  };
-
-  const renderFileDescriptionChip = ({
-    key,
-    value,
-    showInfoIcon = false,
-    activityName = '',
-  }) => (
-    <CapColumn span={5}>
-      <CapRow className="upload-step-description-chip-container">
-        <CapHeading type="h5" className="upload-step-file-detail-key-1">
-          {key}
-        </CapHeading>
-        {showInfoIcon ? (
-          <CapTooltip
-            placement="top"
-            title={
-              <CapRow type="flex" className={className}>
-                <CapHeading
-                  className="upload-step-set-type-tooltip-h5"
-                  type="h5"
-                >
-                  {formatMessage(messages.setTooltip1, {
-                    customerActivityName: activityName,
-                  })}
-                </CapHeading>
-                <CapLink
-                  onClick={() => {}}
-                  className="upload-step-caplink-container"
-                  title={
-                    <>
-                      <CapHeading
-                        type="h5"
-                        className="upload-step-set-type-support"
-                      >
-                        {formatMessage(globalMessages.supportDocumentation)}
-                      </CapHeading>
-                      <CapIcon
-                        type="open-in-new"
-                        className="upload-step-goto-icon"
-                      />
-                    </>
-                  }
-                />
-                <CapHeading
-                  type="h5"
-                  className="upload-step-set-type-tooltip-h5"
-                >
-                  {formatMessage(messages.setTooltip3)}
-                </CapHeading>
-              </CapRow>
-            }
-          >
-            <CapIcon type="info" className="upload-step-info-icon" />
-          </CapTooltip>
-        ) : (
-          ''
-        )}
-        <CapHeading type="h5" className="upload-step-file-detail-key-2">
-          {value}
-        </CapHeading>
-      </CapRow>
-    </CapColumn>
-  );
-
-  const openProgramInNewTab = programName => {
-    const originUrl = window.location.origin;
-    const { source: { programId } = {} } = configFileContent || {};
-    window.open(
-      `${originUrl}/loyalty/ui/program/${programId}/configure`,
-      '_blank',
-    );
-    const bulkConfigDetails = Object.assign(
-      { programId, programName },
-      {
-        configuredData: bulkConfigData,
-        mode: EDIT_MODE ? EDIT : CREATE,
-        eventKey: 'BULK_CONFIG_OPEN_PROGRAM',
-      },
-    );
-    gtmPush('bulkConfigDetails', bulkConfigDetails);
-  };
-
-  const renderFileDescriptionProgramName = programName => {
-    const openProgramHandler = () => openProgramInNewTab(programName);
-    return (
-      <CapColumn span={5}>
-        <CapRow>
-          <CapColumn span={12}>
-            <CapHeading type="h5" className="upload-step-file-detail-key-1">
-              {formatMessage(messages.sourceProgram)}
-            </CapHeading>
-          </CapColumn>
-          <CapColumn span={12}>
-            <CapLink
-              onClick={openProgramHandler}
-              title={
-                <CapRow>
-                  <CapColumn span={22}>
-                    <CapHeading type="h5" className="upload-step-program-name">
-                      {programName}
-                    </CapHeading>
-                  </CapColumn>
-                  <CapColumn span={2}>
-                    <CapIcon
-                      type="open-in-new"
-                      className="upload-step-goto-icon"
-                    />
-                  </CapColumn>
-                </CapRow>
-              }
-            />
-          </CapColumn>
-        </CapRow>
-      </CapColumn>
-    );
-  };
-
-  const handleFileDeleteModal = () => setConfirmationModalVisible(true);
-  const handleCloseModal = () => setConfirmationModalVisible(false);
-  const getUploadFileAlertNote = () => (
-    <CapRow className="upload-note-container">
-      <CapColumn span={11}>
-        <CapAlert
-          message={
-            <CapRow>
-              <CapColumn span={1}>
-                <CapIcon type="info" className="upload-note-info-icon" />
-              </CapColumn>
-              <CapColumn span={2}>
-                <CapHeading type="h4" className="upload-note-text">
-                  {formatMessage(globalMessages.note)}:
-                </CapHeading>
-              </CapColumn>
-              <CapColumn span={21}>
-                <CapHeading type="h5" className="upload-note-inductive">
-                  {formatMessage(messages.fileUploadNote)}
-                </CapHeading>
-              </CapColumn>
-            </CapRow>
-          }
-          type="warning"
-        />
-      </CapColumn>
-    </CapRow>
-  );
-  const getSteps = () => {
-    const {
-      program: jsonContentProgram = '',
-      event: jsonContentEvent = '',
-      rulesetLabel: jsonContentRulesetLabel = '',
-    } = configFileContent?.source || {};
-    const allSteps = [
-      {
-        header: (
-          <CapRow>
-            <StepAccordianHeader
-              size="label"
-              title={formatMessage(messages.bulkConfigurationTemplate)}
-              description={formatMessage(
-                messages.bulkConfigurationTemplateDesc,
-              )}
-              disabled={!showNextContent}
-            />
-            {currentStep !== UPLOAD_STEP ? (
-              <CapRow>
-                <CapRow className="step1-file-uploaded-text-container">
-                  <CapHeading type="h4" className="step1-file-uploaded-text">
-                    {fileUploadDone ? configFileName?.slice(0, -5) : ''}
-                  </CapHeading>
-                </CapRow>
-                <CapRow className="step1-file-uploaded-text-format">
-                  <CapHeading type="h4">
-                    {fileUploadDone ? '.json' : ''}
-                  </CapHeading>
-                </CapRow>
-              </CapRow>
-            ) : (
-              ''
-            )}
-          </CapRow>
-        ),
-        disabled: !showNextContent,
-        key: UPLOAD_STEP,
-        completed: currentStep > UPLOAD_STEP || fileUploadDone,
-        content: (
-          <CapSpin spinning={showUploadSpin}>
-            {!isEmpty(configFileName) ? (
-              <>
-                <CapRow>
-                  <CapColumn span={23}>
-                    <CapHeading type="h4" className="upload-step-file-name">
-                      {configFileName}
-                    </CapHeading>
-                  </CapColumn>
-                  <CapColumn span={1}>
-                    <CapTooltip
-                      title={
-                        fileUploadDone ? (
-                          <CapRow className={className}>
-                            <CapRow>
-                              <CapHeading
-                                type="h5"
-                                className="delete-tooltip-white-text"
-                              >
-                                {formatMessage(messages.deleteDisabledNote1)}
-                              </CapHeading>
-                            </CapRow>
-                            <CapRow>
-                              <CapHeading
-                                type="h5"
-                                className="delete-tooltip-white-text"
-                              >
-                                {formatMessage(messages.deleteDisabledNote2)}
-                              </CapHeading>
-                            </CapRow>
-                          </CapRow>
-                        ) : (
-                          formatMessage(messages.deleteIconTooltip)
-                        )
-                      }
-                    >
-                      <span className="button-disabled-tooltip-wrapper">
-                        <CapIcon
-                          type="delete"
-                          className="upload-step-delete-icon lp-btn-bulkconfig-upload-file-delete"
-                          onClick={handleFileDeleteModal}
-                          aria-label="delete-template-icon"
-                          disabled={fileUploadDone}
-                        />
-                      </span>
-                    </CapTooltip>
-                  </CapColumn>
-                </CapRow>
-                <CapRow>
-                  {!isEmpty(configFileContent)
-                    ? renderFileDescriptionProgramName(jsonContentProgram)
-                    : ''}
-                  <CapColumn span={1} className="upload-step-divider">
-                    |
-                  </CapColumn>
-                  {!isEmpty(configFileContent)
-                    ? renderFileDescriptionChip({
-                        key: formatMessage(messages.customerActivity),
-                        value: jsonContentEvent,
-                      })
-                    : ''}
-                  {!isEmpty(configFileContent) &&
-                  !isEmpty(jsonContentRulesetLabel) &&
-                  jsonContentEvent === 'TransactionAdd' ? (
-                    <>
-                      <CapColumn span={1} className="upload-step-divider">
-                        |
-                      </CapColumn>
-                      {renderFileDescriptionChip({
-                        key: formatMessage(messages.setType),
-                        showInfoIcon: true,
-                        activityName: jsonContentEvent,
-                        value: jsonContentRulesetLabel,
-                      })}
-                    </>
-                  ) : (
-                    ''
-                  )}
-                </CapRow>
-                {getUploadFileAlertNote()}
-              </>
-            ) : (
-              <FileSelector
-                className="upload-step-file-selector"
-                {...fileSelector}
-              />
-            )}
-            <CapRow>
-              <CapButton
-                onClick={handleShowFileUploadConfirmModal}
-                className="upload-step-continue-button"
-                disabled={
-                  isEmpty(configFileContent) &&
-                  isEmpty(bulkConfigData?.fileHandle)
-                }
-              >
-                {formatMessage(globalMessages.continue)}
-              </CapButton>
-            </CapRow>
-          </CapSpin>
-        ),
-      },
-      {
-        header: (
-          <CapRow>
-            <StepAccordianHeader
-              size="label"
-              title={formatMessage(messages.bulkConfigurationProgram)}
-              description={formatMessage(messages.bulkConfigurationProgramDesc)}
-              disabled={!showNextContent}
-            />
-            {currentStep !== DESTINATION_STEP ? (
-              <CapRow>
-                <CapRow className="step2-program-container">
-                  <CapHeading type="h4">
-                    {destinationValue === DIFFERENT_DESTINATION
-                      ? formatMessage(messages.differentDestInfo)
-                      : destinationValue === SAME_DESTINATION
-                        ? formatMessage(messages.sameDestInfo)
-                        : ''}
-                  </CapHeading>
-                </CapRow>
-                <CapRow>
-                  {destinationValue !== '' ? (
-                    <CapRow type="flex" className="step2-program-summary">
-                      <CapRow type="flex">
-                        <CapRow className="summary-length">
-                          {previewPrograms.length}
-                        </CapRow>
-                        <CapRow className="summary-name">
-                          {formatMessage(globalMessages.programs)}
-                        </CapRow>
-                      </CapRow>
-                      <CapRow className="summary-margin" type="flex">
-                        <CapRow className="summary-length">
-                          {successPrograms}
-                        </CapRow>
-                        <CapRow className="summary-name">
-                          {formatMessage(messages.draftCreated)}
-                        </CapRow>
-                        <CapIcon
-                          type="check-circle"
-                          size="s"
-                          className="check-summary-icon"
-                        />
-                      </CapRow>
-                      <CapRow className="summary-margin" type="flex">
-                        <CapRow className="summary-length">
-                          {failedPrograms}
-                        </CapRow>
-                        <CapRow className="summary-name">
-                          {formatMessage(globalMessages.invalid)}
-                        </CapRow>
-                        <CapIcon
-                          type="alert-warning"
-                          size="s"
-                          className="alert-summary-icon"
-                        />
-                      </CapRow>
-                    </CapRow>
-                  ) : (
-                    ''
-                  )}
-                </CapRow>
-              </CapRow>
-            ) : (
-              ''
-            )}
-          </CapRow>
-        ),
-        disabled: !showNextContent || !fileUploadDone,
-        key: DESTINATION_STEP,
-        completed: currentStep !== DESTINATION_STEP && stepDestinationDone,
-        content: (
-          <ProgramDestinationMapper
-            setCurrentProgramStatus={setCurrentProgramStatus}
-            fileHandle={fileHandle}
-            bulkConfigName={name}
-            moveToPreviewStep={showNext}
-            setBulkConfigId={setBulkConfigId}
-            createDraftCalled={
-              !isEmpty(bulkConfigId) && isEmpty(bulkConfigData)
-            }
-            onChangePreviewPrograms={setPreviewPrograms}
-            setClearTriggerState={setClearTriggerState}
-            triggerClearState={triggerClearState}
-            setDestinationValue={setDestinationValue}
-            bulkConfigData={bulkConfigData}
-          />
-        ),
-      },
-      {
-        header: (
-          <>
-            <StepAccordianHeader
-              size="label"
-              title={formatMessage(messages.bulkConfigurationPreview)}
-              description={formatMessage(messages.bulkConfigurationPreviewDesc)}
-              disabled={!showNextContent}
-            />
-          </>
-        ),
-        key: PREVIEW_STEP,
-        disabled: !showNextContent || !stepDestinationDone || !fileUploadDone,
-        content: (
-          <PreviewBulkConfiguration
-            setCurrentProgramStatus={setCurrentProgramStatus}
-            currentProgramStatus={currentProgramStatus}
-            selectedPrograms={previewPrograms}
-          />
-        ),
-      },
-    ];
-    return allSteps;
-  };
-
-  const handleEditStep0 = () => {
-    setCurrentStep(0);
-    setShowNextContent(!showNextContent);
-  };
-  const getPublishButtonDisabledStatus = () => isEmpty(bulkConfigId);
-
-  const handlePublishBulkConfig = () => {
-    actions.publishBulkConfig(bulkConfigId, res => {
-      if (res?.code === 200) {
-        const bulkConfigDetails = Object.assign(
-          { bulkConfigId, name },
-          {
-            configuredData: bulkConfigData,
-            mode: EDIT_MODE ? EDIT : CREATE,
-            eventKey: 'BULK_CONFIG_PUBLISH_CHANGES',
-          },
-        );
-        gtmPush('bulkConfigDetails', bulkConfigDetails);
-        history.push(`${publicPath}/bulk-configurations/list`);
-        CapNotification.success({
-          message: formatMessage(messages.publishSuccessMessage, {
-            bulkConfigName: name,
-          }),
-          description: formatMessage(messages.publishSuccessInductiveMessage),
-        });
-      } else {
-        CapNotification.error({
-          message: formatMessage(messages.publishFailedMessage),
-        });
-      }
-    });
-  };
-
-  const handleClosePublishAlert = () => setShowPublishAlert(false);
-  const handleShowPublishAlert = () => setShowPublishAlert(true);
-  const handleMoveBackToBulkConfigListPage = () =>
-    history.push(`${publicPath}/${BULK_CONFIGURATIONS}/${LIST_LOWERCASE}`);
-  const { program: sourceProgram } = configFileContent?.source || {};
-
-  return (
-    <CapRow className={className}>
-      <CapRow className="create-bulkConfig-form-container">
-        <CapSpin spinning={publishBulkConfigStatus === REQUEST}>
-          <CapRow>
-            {showNextContent && (
-              <CapLink
-                onClick={handleEditStep0}
-                className="edit-basic-detail-link lp-link-bulkconfig-edit-details"
-                title={
-                  <>
-                    <CapIcon
-                      type="edit"
-                      className="pointer-cursor"
-                      onClick={handleEditStep0}
-                      aria-label="edit-btn"
-                    />
-                    {formatMessage(globalMessages.edit)}
-                  </>
-                }
-              />
-            )}
-            <CapHeader
-              title={
-                showNextContent
-                  ? bulkConfigHeader
-                  : formatMessage(messages.newBulkConfiguration)
-              }
-              prefix={
-                <CapIcon
-                  type="back"
-                  aria-label="back-icon"
-                  onClick={handleMoveBackToBulkConfigListPage}
-                />
-              }
-              className="create-bulkConfig-form-header"
-              description={
-                showNextContent
-                  ? getDescription()
-                  : formatMessage(messages.newBulkConfigurationDesc)
-              }
-            />
-          </CapRow>
-          <CapRow className="create-bulkConfig-form-row">
-            {!showNextContent && (
-              <CreateBulkConfigForm
-                name={name}
-                onChange={updateName}
-                onClickNext={onClickNext}
-                isDuplicateBulkConfigName={isDuplicateBulkConfigName}
-                bulkConfigData={bulkConfigData}
-              />
-            )}
-            <CapRow className="create-bulkConfig-form-accordian">
-              <CapStepsAccordian
-                items={getSteps()}
-                onChange={onStepChange}
-                activeKey={currentStep}
-              />
-            </CapRow>
-            <CapRow className="create-bulkConfig-form-button">
-              <CapButton
-                disabled={getPublishButtonDisabledStatus()}
-                className="lp-btn-bulkConfig-save-publish"
-                onClick={handleShowPublishAlert}
-              >
-                {formatMessage(messages.bulkConfigurationPublish)}
-              </CapButton>
-            </CapRow>
-          </CapRow>
-        </CapSpin>
-      </CapRow>
-      <ConfirmationModal
-        cancelButtonId="delete-file-config-cancel"
-        isModalVisible={confirmationModalVisible}
-        handleOk={handleFileDelete}
-        handleCancel={handleCloseModal}
-        handleClose={handleCloseModal}
-        title={formatMessage(messages.deleteConfigFile, {
-          fileName: configFileName,
-        })}
-        description={formatMessage(messages.deleteFileConfirmation)}
-        okText={formatMessage(messages.yesDelete)}
-        className={classnames(className, 'modal-delete-config-file')}
-      />
-      {showPublishAlert ? (
-        <BulkConfigPulishAlert
-          className="publish-alert-container"
-          show={showPublishAlert}
-          handleClose={handleClosePublishAlert}
-          handlePublishBulkConfiguration={handlePublishBulkConfig}
-        />
-      ) : (
-        ''
-      )}
-      <ConfirmationModal
-        className={className}
-        isModalVisible={showUploadAlert}
-        handleOk={submitJsonFileAndShowNext}
-        handleCancel={handleHideFileUploadConfirmModal}
-        title={formatMessage(messages.confirmationModalTitle)}
-        description={
-          <CapRow>
-            <CapRow>
-              {formatMessage(messages.confirmationModalDescription1, {
-                programName: sourceProgram,
-              })}
-            </CapRow>
-            <CapRow className="delete-confirmation-modal-description">
-              {formatMessage(messages.deleteDisabledNote1)}
-            </CapRow>
-          </CapRow>
-        }
-        okText={formatMessage(messages.okText)}
-      />
-    </CapRow>
-  );
-};
-
-BulkConfigurations.propTypes = {
-  intl: intlShape.isRequired,
-  className: PropTypes.string,
-  userData: PropTypes.object,
-  actions: PropTypes.object,
-  bulkConfigurationsDetailActions: PropTypes.object,
-  uploadTemplateData: PropTypes.object,
-  publishBulkConfigData: PropTypes.object,
-};
-const mapDispatchToProps = dispatch => ({
-  actions: bindActionCreators(actions, dispatch),
-  bulkConfigurationsDetailActions: bindActionCreators(
-    bulkConfigurationsDetailActions,
-    dispatch,
-  ),
-});
-
-const mapStateToProps = createStructuredSelector({
-  userData: makeSelectCap(),
-  uploadTemplateData: makeSelectUploadTemplateData(),
-  publishBulkConfigData: makeSelectPublishBulkConfigData(),
-  getBulkConfigFileData: makeSelectGetBulkConfigFileData(),
-});
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-const withSaga = [
-  { key: 'bulkConfiguration', saga: bulkConfigurationSaga },
-  { key: 'bulkConfigurationsDetail', saga: bulkConfigurationDetailSaga },
-].map(saga => injectSaga(saga));
-const withReducer = injectReducer({ key: 'bulkConfiguration', reducer });
-
-export default withErrorBoundary(
-  compose(
-    ...withSaga,
-    withReducer,
-    withConnect,
-  )(injectIntl(withStyles(BulkConfigurations, styles))),
-  { showImage: true, useStyle: true },
-);