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

package/components/molecules/DifferentDestinationPrograms/DifferentDestinationPrograms.js

@@ -1,692 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { createStructuredSelector } from 'reselect';
-import { injectIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import cloneDeep from 'lodash/cloneDeep';
-import { connect } from 'react-redux';
-import classnames from 'classnames';
-import { compose } from 'redux';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapTable from '@capillarytech/cap-ui-library/CapTable';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import styles from './style';
-import messages from './messages';
-import globalMessages from '../../pages/Cap/messages';
-import withStyles from '../../../utils/withStyles';
-import { FAILED, SUCCESS } from '../../pages/Cap/constants';
-import { makeSelectCreateBulkDraftData } from '../../organisms/ProgramDestinationMapper/selectors';
-import isEmpty from 'lodash/isEmpty';
-import {
-  FAILURE,
-  REQUEST,
-  DRAFT_ALREADY_EXIST,
-  CREATE,
-  EDIT
-} from '../../pages/App/constants';
-import CustomSkeleton from '../../atoms/CustomSkeleton';
-import ConfirmationModal from '../ConfirmationModal';
-import ReplaceExistingDraftNotification from '../ReplaceExistingDraftNotification';
-import {
-  DRAFT_CREATED,
-  DRAFT_INVALID,
-  getProgramsAppliedFiltersRow,
-  getProgramStatusFilterOptions,
-  getUploadProgramAlertNote,
-  setInitialProgramData,
-} from './utils';
-import {
-  SAME_DESTINATION,
-  DIFFERENT_DESTINATION,
-} from '../../pages/Cap/constants';
-import { BulkConfigStatusSelect } from '../../organisms/BulkConfigurationsDetail/style';
-import { gtmPush } from '../../../utils/gtmTrackers';
-
-export const DifferentDestinationPrograms = ({
-  className,
-  intl: { formatMessage },
-  userId,
-  selectedPrograms,
-  bulkConfigName,
-  createBulkDraft,
-  fileHandle = '',
-  createBulkConfigDraftData: { createBulkDraftStatus, createBulkDraftData },
-  moveToPreviewStep,
-  setBulkConfigId,
-  handleSelectedPrograms,
-  onChangePreviewPrograms,
-  programsList,
-  bulkConfigData,
-}) => {
-
-  const [destinationPrograms, setDestinationPrograms] = useState(
-    setInitialProgramData(bulkConfigData,selectedPrograms),
-  );
-  const [filteredPrograms, setFilteredPrograms] = useState(
-    setInitialProgramData(bulkConfigData,selectedPrograms),
-  );
-  const [successPrograms, setSuccessPrograms] = useState(0);
-  const [failedPrograms, setFailedPrograms] = useState(0);
-  const [programSearchTerm, setProgramSearchTerm] = useState('');
-  const [searchFilterValue, setSearchFilterValue] = useState('');
-  const [confirmationModalVisible, setConfirmationModalVisible] = useState(
-    false,
-  );
-  const [destProgramBkp, setDestProgramBkp] = useState(setInitialProgramData(bulkConfigData,selectedPrograms));
-  const [isShowDraftModal, setIsShowDraftModal] = useState(false);
-
-  useEffect(
-    () => {
-      let programSearch = destinationPrograms?.filter(programs =>
-        programs?.program
-          ?.toLowerCase()
-          .includes(programSearchTerm.toLowerCase()),
-      );
-      if (searchFilterValue === DRAFT_CREATED) {
-        programSearch = 
-          programSearch?.filter(element => element.status === SUCCESS);
-      } else if (searchFilterValue === DRAFT_INVALID) {
-        programSearch = 
-          programSearch?.filter(element => element.status === FAILED);
-      }
-      setFilteredPrograms(programSearch);
-    },
-    [programSearchTerm,searchFilterValue],
-  );
-
-  useEffect(
-    () => {
-      setSuccessPrograms(
-        destinationPrograms.filter(element => element.status === SUCCESS)
-          .length,
-      );
-      setFailedPrograms(
-        destinationPrograms.filter(element => element.status === FAILED).length,
-      );
-    },
-    [destinationPrograms],
-  );
-
-  useEffect(
-    () => {
-      let newSelectedPrograms = selectedPrograms.filter(
-        element =>
-          !destinationPrograms.some(data => element.id === data.programId),
-      );
-      const filteredPrograms = destinationPrograms.filter(element =>
-        selectedPrograms.some(data => element.programId === data.id),
-      );
-      const updatedDestPrograms = [
-        ...newSelectedPrograms.map(selectedProgram => {
-          return {
-            programId: selectedProgram.id,
-            program: selectedProgram.name,
-            rulesetLabel: '',
-            status: '',
-            error: {
-              type: '',
-              errorMessage: '',
-            },
-          };
-        }),
-        ...filteredPrograms,
-      ];
-      setDestinationPrograms(updatedDestPrograms);
-      setFilteredPrograms(updatedDestPrograms);
-      setProgramSearchTerm('');
-      setSearchFilterValue('');
-    },
-    [selectedPrograms],
-  );
-
-  useEffect(
-    () => {
-      if (createBulkDraftStatus === SUCCESS) {
-        let destProgramBkpClone = cloneDeep(destProgramBkp);
-        const { destination = [], id: bulkConfigId } = createBulkDraftData;
-        const updatedBulkDraft = (destProgramBkpClone || []).map(oldDest => {
-          const foundInNew = destination.find(
-            item => item.programId === oldDest?.programId,
-          );
-          return {
-            programId: foundInNew ? foundInNew.programId : oldDest?.programId,
-            program: selectedPrograms?.find(
-              element =>
-                element.id ===
-                (foundInNew ? foundInNew?.programId : oldDest?.programId),
-            )?.name,
-            rulesetLabel: foundInNew
-              ? foundInNew.rulesetLabel
-              : oldDest?.rulesetLabel,
-            status: foundInNew ? foundInNew.status : oldDest?.status,
-            error: {
-              type: foundInNew ? foundInNew?.error?.type : oldDest?.error?.type,
-              errorMessage: foundInNew
-                ? foundInNew?.error?.errorMessage
-                : oldDest?.error?.errorMessage,
-            },
-          };
-        });
-        setDestinationPrograms(updatedBulkDraft);
-        setFilteredPrograms(updatedBulkDraft);
-        setBulkConfigId(bulkConfigId);
-        if (checkForExistingDrafts(updatedBulkDraft)) setIsShowDraftModal(true);
-      }
-    },
-    [JSON.stringify(createBulkDraftData), createBulkDraftStatus],
-  );
-
-  const checkForExistingDrafts = bulkDraftResponse =>
-    bulkDraftResponse.some(
-      response => response.error.errorMessage === DRAFT_ALREADY_EXIST,
-    );
-
-  const destinationTooltip = () => {
-    return (
-      <CapRow className={className}>
-        <CapRow className="destination-tooltip-header">
-          {formatMessage(messages.destinationTooltipHeader)}
-        </CapRow>
-        <CapRow className="destination-tooltip-desc">
-          {formatMessage(messages.destinationTooltipDesc)}
-        </CapRow>
-      </CapRow>
-    );
-  };
-
-  const createDraftTooltip = () => {
-    return (
-      <CapRow className={className}>
-        <CapRow className="createDraft-tooltip-header">
-          {formatMessage(messages.createDraftTooltipInfo)}
-        </CapRow>
-        <CapRow className="createdDraft-tooltip-desc">
-          {formatMessage(messages.createDraftTooltipDesc)}
-        </CapRow>
-      </CapRow>
-    );
-  };
-
-  const onSearchChange = event => setProgramSearchTerm(event.target.value);
-
-  const onSetChange = (event, index) => {
-    let updatedFilteredPrograms = filteredPrograms.map(element => {
-      if (element.programId == index) {
-        return { ...element, rulesetLabel: event.target.value };
-      }
-      return element;
-    });
-    let updatedDestinationPrograms = destinationPrograms.map(element => {
-      if (element.programId == index) {
-        return { ...element, rulesetLabel: event.target.value };
-      }
-      return element;
-    });
-    setDestinationPrograms(updatedDestinationPrograms);
-    setFilteredPrograms(updatedFilteredPrograms);
-  };
-
-  const validate = () =>
-    destinationPrograms.every(element => !isEmpty(element.rulesetLabel)) &&
-    destinationPrograms.length > 0 &&
-    createBulkDraftStatus !== REQUEST;
-
-  const removeBtnValidate = () =>
-    destinationPrograms.some(element => element.status === FAILED) &&
-    filteredPrograms.length > 0;
-
-  const onRemoveClickHandler = () => {
-    const failedProgramsFilter = destinationPrograms.filter(
-      element => element.status != FAILED,
-    );
-    setDestinationPrograms(failedProgramsFilter);
-    setFilteredPrograms(failedProgramsFilter);
-    setConfirmationModalVisible(false);
-    handleSelectedPrograms(
-      failedProgramsFilter.map(element => `${element.programId}`),
-    );
-  };
-
-  const onDeleteChange = (index, data) => {
-    const findProgramFilter = destinationPrograms.filter(
-      element => element.programId != index,
-    );
-    setDestinationPrograms(findProgramFilter);
-    setFilteredPrograms(findProgramFilter);
-    handleSelectedPrograms(
-      selectedPrograms
-        .filter(element => element.id != index)
-        .map(element => `${element.id}`),
-    );
-    const bulkConfigDetails = Object.assign( data, {
-      destinationType: DIFFERENT_DESTINATION,
-      configuredData: bulkConfigData,
-      mode: !isEmpty(bulkConfigData)? EDIT : CREATE,
-      eventKey: 'BULK_CONFIG_DELETE_PROGRAM',
-    });
-    gtmPush('bulkConfigDetails', bulkConfigDetails);
-  };
-
-  const onClearSearch = () => setProgramSearchTerm('');
-
-  const openRemoveModal = () => setConfirmationModalVisible(true);
-
-  const handleCloseModal = () => setConfirmationModalVisible(false);
-
-  const onChangeStatusFilter = value => setSearchFilterValue(value);
-
-  const checkForStatusDisable = () =>
-    filteredPrograms.some(element => isEmpty(element.status));
-
-  const handleRemoveExistingDraft = () => {
-    const filteredDestPrograms = destinationPrograms?.filter(
-      element => element?.error?.errorMessage !== DRAFT_ALREADY_EXIST,
-    );
-    setDestinationPrograms(filteredDestPrograms);
-    setFilteredPrograms(filteredDestPrograms);
-    setIsShowDraftModal(false);
-    handleSelectedPrograms(
-      filteredDestPrograms.map(element => `${element.programId}`),
-    );
-  };
-
-  const handleContinueCreatingDraft = () => {
-    const draftDestPrograms = destinationPrograms
-      ?.filter(element => element?.error?.errorMessage === DRAFT_ALREADY_EXIST)
-      .map(value => ({
-        rulesetLabel: value.rulesetLabel,
-        programId: value.programId,
-      }));
-    onClickHandler(true, draftDestPrograms);
-    setIsShowDraftModal(false);
-    handleSelectedPrograms(
-      destinationPrograms.map(element => `${element.programId}`),
-    );
-  };
-
-  const renderConfigStatus = data => {
-    switch (data.status) {
-      case SUCCESS:
-        return (
-          <>
-            <CapIcon type="check-circle" size="s" className="check-icon" />
-            {formatMessage(messages.draftCreated)}
-          </>
-        );
-      case FAILED:
-        return (
-          <>
-            <CapIcon type="alert-warning" size="s" className="alert-icon" />
-            {formatMessage(globalMessages.invalid)}
-            <CapTooltip title={data.error.errorMessage} placement="top">
-              <CapIcon type="info" size="s" className="error-infoBtn" />
-            </CapTooltip>
-          </>
-        );
-      default:
-        return '';
-    }
-  };
-
-  const renderStatusColumn = data => {
-    if(!isEmpty(bulkConfigData))return renderConfigStatus(data);
-    switch (createBulkDraftStatus) {
-      case REQUEST:
-        return <CustomSkeleton isTitle height="24px" width="116px" />;
-      case SUCCESS:
-      case FAILURE:
-        return renderConfigStatus(data);
-      default:
-        return '';
-    }
-  };
-
-  const handleMoveToPreviewStep = () => {
-    onChangePreviewPrograms(destinationPrograms);
-    moveToPreviewStep();
-    const bulkConfigDetails = Object.assign({ name: bulkConfigName } , {
-      destinationType: DIFFERENT_DESTINATION,
-      configuredData: bulkConfigData,
-      mode: !isEmpty(bulkConfigData)? EDIT : CREATE,
-      eventKey: 'BULK_CONFIG_COMPLETED_UPLOAD_STEP_2',
-    });
-    gtmPush('bulkConfigDetails', bulkConfigDetails);
-  };
-
-  const onClickHandler = (discardExistingDrafts, setPrograms) => {
-    setDestProgramBkp(destinationPrograms);
-    setSearchFilterValue('');
-    setProgramSearchTerm('');
-    const payload = {
-      name: bulkConfigName,
-      createdBy: userId,
-      fileHandle,
-      destinationType: 'RULESET',
-      destination: setPrograms,
-      discardExistingDrafts,
-    };
-    if (!isEmpty(createBulkDraftData.id)) payload.id = createBulkDraftData.id;
-    else if(!isEmpty(bulkConfigData?.id)) payload.id = bulkConfigData.id;
-    createBulkDraft(payload);
-  };
-
-  const getBulkConfigProgramDetails = useMemo(
-    () =>
-      filteredPrograms?.map((data, index) => {
-        const onSetChangeHandler = event => {
-          onSetChange(event, data.programId);
-        };
-        const onDeleteHandler = () => onDeleteChange(data.programId, data);
-        return {
-          key: `bulkConfigProgramTable-${Math.random()}`,
-          program: (
-            <CapHeader
-              size="small"
-              title={
-                <CapHeading type="h3" aria-label="program-name">
-                  {data.program}
-                </CapHeading>
-              }
-            />
-          ),
-          destinationParent: (
-            <CapHeader
-              size="small"
-              title={
-                <CapInput
-                  placeholder={formatMessage(messages.setInput)}
-                  className={`setInput ${data.status === FAILED &&
-                    'setInvalid'}`}
-                  value={data.rulesetLabel}
-                  disabled={
-                    createBulkDraftStatus === REQUEST ||
-                    data?.status === SUCCESS
-                  }
-                  onChange={onSetChangeHandler}
-                />
-              }
-            />
-          ),
-          status: (
-            <CapHeader
-              size="small"
-              title={
-                <CapRow type="flex" className="status-row">
-                  <CapHeading type="h5">{renderStatusColumn(data)}</CapHeading>
-                  <CapTooltip
-                    title={formatMessage(messages.deleteProgramText)}
-                    placement="top"
-                  >
-                    <CapIcon
-                      type="delete"
-                      size="s"
-                      className="delete-btn lp-btn-bulkconfig-delete-program"
-                      onClick={onDeleteHandler}
-                      aria-label="deleteBtn"
-                    />
-                  </CapTooltip>
-                </CapRow>
-              }
-            />
-          ),
-        };
-      }),
-    [
-      selectedPrograms,
-      destinationPrograms,
-      filteredPrograms,
-      programSearchTerm,
-    ],
-  );
-  const getColumnAttribute = (keyName, widthPercentage) => ({
-    dataIndex: keyName,
-    key: keyName,
-    width: widthPercentage,
-    title: (
-      <CapRow type="flex" align="middle">
-        <CapHeader
-          size="small"
-          title={
-            keyName === 'program'
-              ? `${formatMessage(globalMessages.program)} (${
-                  filteredPrograms.length
-                })`
-              : formatMessage(messages[`${keyName}Title`])
-          }
-        />
-        {keyName === 'destinationParent' && (
-          <CapTooltip
-            className="destination-tooltip"
-            title={destinationTooltip}
-            placement="top"
-          >
-            <CapIcon
-              type="info"
-              size="s"
-              className="destination-info-btn"
-              aria-label="dest-tooltip"
-            />
-          </CapTooltip>
-        )}
-      </CapRow>
-    ),
-  });
-
-  const getColumns = () => [
-    getColumnAttribute('program', '33%'),
-    getColumnAttribute('destinationParent', '33%'),
-    getColumnAttribute('status', '33%'),
-  ];
-
-  const tableProps = {
-    key: 'bulkConfigProgramTable',
-    dataSource: getBulkConfigProgramDetails,
-    columns: getColumns(),
-    rowKey: 'bulkConfigProgramId',
-    className: 'bulk-configurations-program-table',
-    id: 'bulkConfigProgramTable',
-    scroll: {
-      y: '75vh',
-    },
-    locale: {
-      emptyText: formatMessage(globalMessages.noData),
-    },
-    infinteScroll: true,
-    setPagination: () => {},
-  };
-
-  const onKeepExistingAndCreateDraft = () => {
-    const setPrograms = destinationPrograms
-      .filter(item => item.status !== SUCCESS)
-      .map(value => ({
-        rulesetLabel: value.rulesetLabel,
-        programId: value.programId,
-      }));
-    onClickHandler(false, setPrograms);
-  };
-  const isAllProgramsDraftCreated =
-    destinationPrograms.every(item => item.status === SUCCESS) &&
-    destinationPrograms.length;
-  return (
-    <CapRow className={className}>
-      <CapRow className="search-program-row">
-        <CapHeading type="h4">
-          {formatMessage(messages.programDestination)}
-        </CapHeading>
-        <CapRow type="flex" className="search-filter-head">
-          <CapInput.Search
-            className="searchBar-program"
-            value={programSearchTerm}
-            placeholder={formatMessage(messages.searchProgram)}
-            onChange={onSearchChange}
-            onClear={onClearSearch}
-          />
-          <CapRow className="status-filter-head">
-            <BulkConfigStatusSelect
-              style={{ width: 86 }}
-              options={getProgramStatusFilterOptions(formatMessage)}
-              value={formatMessage(globalMessages.status)}
-              onChange={onChangeStatusFilter}
-              dropdownClassName="programs-status-filter-dropdown"
-              getPopupContainer={trigger => trigger}
-              disabled={checkForStatusDisable()}
-            />
-          </CapRow>
-        </CapRow>
-        <CapRow>
-          {getProgramsAppliedFiltersRow({
-            destinationPrograms,
-            setFilteredPrograms,
-            searchFilterValue,
-            setSearchFilterValue,
-            formatMessage,
-          })}
-        </CapRow>
-        {getUploadProgramAlertNote(formatMessage)}
-        <CapRow className="program-table">
-          <CapTable {...tableProps} />
-          <CapRow className="create-draft-row" type="flex">
-            {isAllProgramsDraftCreated ? (
-              <CapButton
-                className="create-draft-button-continue"
-                onClick={handleMoveToPreviewStep}
-              >
-                {formatMessage(globalMessages.continue)}
-              </CapButton>
-            ) : (
-              <CapRow>
-                <CapButton
-                  className="create-draft-button"
-                  disabled={!validate()}
-                  onClick={onKeepExistingAndCreateDraft}
-                >
-                  {formatMessage(
-                    messages[
-                      createBulkDraftStatus === REQUEST
-                        ? 'creatingDraft'
-                        : 'createDraft'
-                    ],
-                  )}
-                </CapButton>
-                <CapTooltip
-                  placement="top"
-                  title={createDraftTooltip()}
-                  aria-label="createDraftTooltip"
-                >
-                  <CapIcon
-                    type="info"
-                    size="s"
-                    className="create-draft-btnIcon"
-                  />
-                </CapTooltip>
-              </CapRow>
-            )}
-            {failedPrograms > 0 && (
-              <CapButton
-                className="remove-invalid-btn lp-btn-bulkconfig-remove-invalid-prog"
-                type="secondary"
-                disabled={!removeBtnValidate()}
-                onClick={openRemoveModal}
-              >
-                {formatMessage(messages.removeInvalidProgram)}
-              </CapButton>
-            )}
-            <CapRow type="flex" className="programsSummary">
-              <CapRow type="flex">
-                <CapRow className="summary-length">
-                  {destinationPrograms.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 className="removeInvalidInductiveText">
-              {failedPrograms > 0 &&
-                formatMessage(messages.removeInvalidInductiveText)}
-            </CapRow>
-          </CapRow>
-        </CapRow>
-      </CapRow>
-      <ConfirmationModal
-        cancelButtonId="delete-file-config-cancel"
-        isModalVisible={confirmationModalVisible}
-        handleOk={onRemoveClickHandler}
-        handleCancel={handleCloseModal}
-        handleClose={handleCloseModal}
-        title={
-          <CapRow className="removeProgramTitle">
-            {formatMessage(messages.removeProgramModalTitle)}
-          </CapRow>
-        }
-        description={
-          <CapRow className="removeProgramDesc">
-            <CapRow>{formatMessage(messages.removeProgramModalDesc)}</CapRow>
-            <CapRow className="removeProgramInfo">
-              {formatMessage(messages.removeProgramModalInfo)}
-            </CapRow>
-          </CapRow>
-        }
-        okText={formatMessage(messages.removeProgramModalOkText)}
-        className={classnames(className, 'modal-delete-config-programs')}
-      />
-      {isShowDraftModal && (
-        <ReplaceExistingDraftNotification
-          handleRemoveExistingDraft={handleRemoveExistingDraft}
-          programList={selectedPrograms}
-          selectedPrograms={createBulkDraftData?.destination}
-          handleContinueCreatingDraft={handleContinueCreatingDraft}
-          programsList={programsList}
-          fileHandle={fileHandle}
-        />
-      )}
-    </CapRow>
-  );
-};
-
-DifferentDestinationPrograms.propTypes = {
-  selectedPrograms: PropTypes.object,
-  bulkConfigName: PropTypes.string,
-  className: PropTypes.string,
-  createBulkDraft: PropTypes.func,
-  userId: PropTypes.string,
-  fileHandle: PropTypes.string,
-  moveToPreviewStep: PropTypes.func,
-  setBulkConfigId: PropTypes.func,
-};
-
-const mapStateToProps = createStructuredSelector({
-  createBulkConfigDraftData: makeSelectCreateBulkDraftData(),
-});
-
-const withConnect = connect(mapStateToProps);
-
-export default compose(withConnect)(
-  injectIntl(withStyles(DifferentDestinationPrograms, styles)),
-);

package/components/molecules/DifferentDestinationPrograms/index.js

@@ -1 +0,0 @@
-export {default} from "./DifferentDestinationPrograms";