@capillarytech/creatives-library 7.9.13 → 7.9.15

package/v2Containers/SmsTrai/Create/index.js

@@ -0,0 +1,681 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import styled from 'styled-components';
+import Dropzone from 'react-dropzone';
+import { bindActionCreators } from 'redux';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import Papa from 'papaparse';
+import cloneDeep from 'lodash/cloneDeep';
+import {
+  CAP_SPACE_12,
+  CAP_SPACE_16,
+  CAP_SPACE_24,
+  CAP_SPACE_32,
+  CAP_WHITE,
+  CAP_RED01,
+  CAP_PRIMARY,
+} from '@capillarytech/cap-ui-library/styled/variables';
+import './index.scss';
+import dragdropImage from '../../../assets/group.png';
+import * as smsTraiActions from './actions';
+import {
+  MANDATORY_COLUMNS,
+  HEADER_ALIASES,
+  SAMPLE_CSV_DATA,
+  DOWNLOAD_ISSUES_CSV,
+  SAMPLE_CSV,
+  CAPILLARY_REJECTION_REASON,
+  APPROVAL_STATUS,
+  APPROVED,
+  TEMPLATE_ID_ALIASES,
+  TEMPLATE_MESSAGE_ALIASES,
+  SAVED_COLUMNS,
+  MAPPED_SAVED_COLUMN,
+  SMS,
+} from './constants';
+import messages from './messages';
+import withCreatives from '../../../hoc/withCreatives';
+
+export const SmsTraiCreate = (props) => {
+  const { intl, actions, onCreateComplete } = props;
+  const { formatMessage } = intl;
+  const [files, setFiles] = useState([]);
+  const [errorText, setErrorText] = useState('');
+  const [dropZone, setDropZone] = useState(true);
+  const [previewFileIndex, setPreviewFileIndex] = useState(null);
+  const [isFileDropped, setIsFileDropped] = useState(false);
+  const [totalFailCount, setTotalFailCount] = useState(0);
+  const [saveTemplate, updateSaveTemplate] = useState(false);
+
+  const SMSTraiFooter = styled.div`
+    background-color: ${CAP_WHITE};
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    margin-left: -32px;
+    padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
+    .ant-btn {
+      margin-right: ${CAP_SPACE_16};
+    }
+    }
+`;
+
+  let uploadValidated = false;
+
+  const getIndexofColumn = (allColumnNames, columnName) =>
+    allColumnNames.findIndex(
+      (column) => column.toLowerCase().trim() === columnName,
+    );
+
+  const checkCSVRowsValidation = (transformedResults, selectedHeaderAlias) => {
+    const headerIndex = getIndexofColumn(
+      transformedResults[0],
+      selectedHeaderAlias,
+    );
+    const approvalIndex = getIndexofColumn(
+      transformedResults[0],
+      APPROVAL_STATUS,
+    );
+
+    for (let row = 1; row < transformedResults.length; row++) {
+      const errorArray = [];
+      const headerErrorArray = [];
+      const approvalErrorArray = [];
+      let rejectionReasons = '';
+      //adding rejection reasons
+      transformedResults[row].forEach((cell, index) => {
+        if (index === headerIndex && cell.length < 6) {
+          headerErrorArray.push(
+            `${selectedHeaderAlias.toUpperCase()} is mandatory and it should be 6 characters. `,
+          );
+        } else if (index === approvalIndex && cell.toLowerCase() !== APPROVED) {
+          approvalErrorArray.push(`Template is not approved. `);
+        } else if (!cell && index !== headerIndex && index !== approvalIndex) {
+          errorArray.push(`"${transformedResults[0][index]}"`);
+        }
+      });
+
+      if (errorArray.length !== 0) {
+        rejectionReasons = `${rejectionReasons} Please include these mandatory fields: ${errorArray.join(
+          ' ',
+        )}.`;
+      }
+      if (headerErrorArray.length !== 0 || approvalErrorArray.length !== 0) {
+        rejectionReasons = `${rejectionReasons} ${headerErrorArray.toString()} ${approvalErrorArray.toString()}`;
+      }
+      transformedResults[row].push(rejectionReasons);
+      //if there are rejected reasons present in this row at column 6(where we store rejected reasons),  consider it as failure
+      if (transformedResults[row][6]) {
+        setTotalFailCount((prev) => prev + 1);
+      }
+    }
+    uploadValidated = true;
+    return transformedResults;
+  };
+
+  const checkCSVValidation = (results, file) => {
+    if (file?.name?.split('.').pop() === 'csv') {
+      const mandatoryColNotPresent = [];
+      const headerAliasPresent = [];
+      const templateIdAliasPresent = [];
+      const templateMessageAliasPresent = [];
+      const colCounts = {};
+      //removing last empty row if each cell is empty
+      if (results?.data[results.data.length - 1]?.every((cell) => !cell)) {
+        results.data.pop();
+      }
+      const fileLen = results?.data?.length || 0;
+      // at least 1 records should be available
+      if (fileLen < 2) {
+        setErrorText(formatMessage(messages.fileMinlengthError));
+        return;
+      }
+      // more then 500 records are not available.
+      if (fileLen > 501) {
+        setErrorText(formatMessage(messages.fileMaxlengthError));
+        return;
+      }
+      // mandatory 3 header name should be available.
+      const cols = getAllColumnNames(results.data[0]);
+
+      for (let i = 0; i < MANDATORY_COLUMNS.length; i++) {
+        if (!cols.includes(MANDATORY_COLUMNS[i])) {
+          mandatoryColNotPresent.push(MANDATORY_COLUMNS[i]);
+        }
+      }
+      if (mandatoryColNotPresent.length > 0) {
+        setErrorText(
+          formatMessage(messages.invalidFileErrorDescription, {
+            columns: mandatoryColNotPresent.join(','),
+          }),
+        );
+        return;
+      }
+
+      //one of the mandatory header alias should be available.
+      for (let i = 0; i < HEADER_ALIASES.length; i++) {
+        if (cols.includes(HEADER_ALIASES[i])) {
+          headerAliasPresent.push(HEADER_ALIASES[i]);
+        }
+      }
+      if (headerAliasPresent.length === 0) {
+        setErrorText(
+          formatMessage(messages.headerAliasErrorDescription, {
+            headerAliases: HEADER_ALIASES.join(' / '),
+          }),
+        );
+        return;
+      }
+      //one of the mandatory template id alias should be available.
+      for (let i = 0; i < TEMPLATE_ID_ALIASES.length; i++) {
+        if (cols.includes(TEMPLATE_ID_ALIASES[i])) {
+          templateIdAliasPresent.push(TEMPLATE_ID_ALIASES[i]);
+        }
+      }
+      if (templateIdAliasPresent.length === 0) {
+        setErrorText(
+          formatMessage(messages.templateIdAliasErrorDescription, {
+            templateIdAliases: TEMPLATE_ID_ALIASES.join(' / '),
+          }),
+        );
+        return;
+      }
+      //one of the mandatory template message alias should be available.
+      for (let i = 0; i < TEMPLATE_MESSAGE_ALIASES.length; i++) {
+        if (cols.includes(TEMPLATE_MESSAGE_ALIASES[i])) {
+          templateMessageAliasPresent.push(TEMPLATE_MESSAGE_ALIASES[i]);
+        }
+      }
+      if (templateMessageAliasPresent.length === 0) {
+        setErrorText(
+          formatMessage(messages.templateMessageAliasErrorDescription, {
+            templateMessageAliases: TEMPLATE_MESSAGE_ALIASES.join(' / '),
+          }),
+        );
+        return;
+      }
+      // count of each col to validate blank and repetitive cols
+      for (const num of cols) {
+        colCounts[num] = colCounts[num] ? colCounts[num] + 1 : 1;
+      }
+
+      const repetitiveColsArray = Object.keys(
+        Object.fromEntries(
+          Object.entries(colCounts).filter(
+            ([key, value]) => key !== '' && value > 1,
+          ),
+        ),
+      );
+      //throw validation if repetitive columns present
+      if (repetitiveColsArray.length !== 0) {
+        setErrorText(
+          formatMessage(messages.repetitiveColsErrorDescription, {
+            repetitiveCols: repetitiveColsArray,
+          }),
+        );
+        return;
+      }
+      //perform required data transformation
+      return dataTransformHandler(cols, results, headerAliasPresent);
+    } else {
+      setErrorText(formatMessage(messages.nonCsvErrorDescription));
+    }
+  };
+
+  const dataTransformHandler = (cols, results, headerAliasPresent) => {
+    //getting the index of the cols for 6 mandatory cols and also taking care of alias of headers of mandatory columns
+    const indexArray = [];
+    for (let i = 0; i < cols.length; i++) {
+      if (
+        MANDATORY_COLUMNS.includes(cols[i]) ||
+        HEADER_ALIASES.includes(cols[i]) ||
+        TEMPLATE_ID_ALIASES.includes(cols[i]) ||
+        TEMPLATE_MESSAGE_ALIASES.includes(cols[i])
+      ) {
+        indexArray.push(i);
+      }
+    }
+    //transforming data to keep only mandatory cols data using their index
+    const transformedResults = [];
+    for (const key in results.data) {
+      transformedResults.push(indexArray.map((i) => results.data[key][i]));
+    }
+    //add rejection header
+    transformedResults[0].push(CAPILLARY_REJECTION_REASON);
+    return checkCSVRowsValidation(transformedResults, headerAliasPresent[0]);
+  };
+
+  //returns the headers(first row) of the uploaded file in lowercase
+  const getAllColumnNames = (data) => data.map((x) => x.toLowerCase().trim());
+
+  const onDrop = (droppedFile) => {
+    // Sets isFileDropped state to true to load the spinner while the file is being parsed.
+    setIsFileDropped(true);
+
+    Papa.parse(droppedFile[0], {
+      complete: (results, file) => {
+        setIsFileDropped(false); // Stop the spinner
+        const validatedResults = checkCSVValidation(results, file);
+        const selectedFiles = cloneDeep(files);
+        if (uploadValidated) {
+          //remove capillary rejection reason column if already present on reupload
+          //ex: user reuploads a csv which was earlier validated and rejection reasons were added for failed templates
+          const rejectionIndex = getAllColumnNames(results.data[0]).indexOf(
+            CAPILLARY_REJECTION_REASON.toLowerCase(),
+          );
+          if (rejectionIndex !== -1) {
+            results.data.forEach((row) => {
+              row.splice(rejectionIndex, 1);
+            });
+          }
+          //adding validated rejection reason column to original results
+          for (let i = 0; i < validatedResults.length; i++) {
+            results.data[i].push(validatedResults[i][6]);
+          }
+          updateSaveTemplate(true);
+        }
+        selectedFiles.push({
+          file,
+          fileResult: results,
+          columnMapping: [],
+        });
+
+        setFiles(selectedFiles);
+        setPreviewFileIndex(selectedFiles.length - 1);
+        setDropZone(false);
+      },
+    });
+  };
+
+  const deleteCSV = () => {
+    setFiles([]);
+    setTotalFailCount(0);
+    setErrorText('');
+    setIsFileDropped(false);
+    setPreviewFileIndex(null);
+    setDropZone(true);
+    updateSaveTemplate(false);
+  };
+
+  //common function to handle csv downloads
+  const downloadHandler = (event, data, downloadedFileName) => {
+    event.target.setAttribute(
+      'href',
+      `data:text/csv;charset=utf-8,${encodeURIComponent(data)}`,
+    );
+    event.target.setAttribute('download', downloadedFileName);
+  };
+
+  const downloadSampleCSV = (event) => {
+    const csvContent = SAMPLE_CSV_DATA.map((e) => e.join(',')).join('\n');
+    downloadHandler(event, csvContent, SAMPLE_CSV);
+  };
+
+  const downloadIssuesCSV = (event) => {
+    let csvContent = [];
+    const tempArray = [];
+    const fileData = files[0].fileResult.data;
+    const rejectionIndex = fileData[0].indexOf(CAPILLARY_REJECTION_REASON);
+
+    if (rejectionIndex !== -1) {
+      tempArray.push(fileData[0]);
+      for (let row = 1; row < fileData.length; row++) {
+        if (fileData[row][rejectionIndex]) {
+          tempArray.push(fileData[row]);
+        }
+      }
+      csvContent = tempArray
+        .map((e) => e.join(','))
+        .map((e) => e.replace(/(\r\n|\n|\r)/gm, ' '))
+        .join('\n');
+    }
+    downloadHandler(event, csvContent, DOWNLOAD_ISSUES_CSV);
+  };
+
+  const createCallback = ({ errorMessage }) => {
+    if (!errorMessage) {
+      CapNotification.success({
+        message: formatMessage(messages.smsCreateNotification),
+      });
+      actions.clearCreateResponse();
+    } else {
+      CapNotification.error({
+        message: errorMessage,
+      });
+    }
+  };
+
+  const onDoneCallback = () => {
+    //start spinner
+    setIsFileDropped(true);
+    const fileData = files[0].fileResult.data;
+    const rejectionIndex = fileData[0].indexOf(CAPILLARY_REJECTION_REASON);
+    const tempArray = [];
+    tempArray.push(fileData[0]);
+
+    // filter out non rejected rows
+    for (let row = 1; row < fileData.length; row++) {
+      if (!fileData[row][rejectionIndex]) {
+        tempArray.push(fileData[row]);
+      }
+    }
+
+    // Filter out the columns index that needs to save
+    const cols = getAllColumnNames(tempArray[0]);
+    const indexArray = [];
+    for (let i = 0; i < cols.length; i++) {
+      if (
+        SAVED_COLUMNS.includes(cols[i]) ||
+        HEADER_ALIASES.includes(cols[i]) ||
+        TEMPLATE_ID_ALIASES.includes(cols[i]) ||
+        TEMPLATE_MESSAGE_ALIASES.includes(cols[i])
+      ) {
+        indexArray.push(i);
+      }
+    }
+
+    //transforming data to keep only saved cols data using their index
+    const transformedResults = [];
+    for (const key in tempArray) {
+      transformedResults.push(
+        indexArray.map((i) => {
+          if (key === '0') {
+            return MAPPED_SAVED_COLUMN[tempArray[key][i]];
+          }
+          return tempArray[key][i];
+        }),
+      );
+    }
+
+    // prepare data based on API
+    const savedData = [];
+    transformedResults.forEach((arr, index) => {
+      if (index !== 0) {
+        const obj = {};
+        arr.forEach((data, i) => {
+          obj[transformedResults[0][i]] = arr[i];
+        });
+        obj['unicode-validity'] = false;
+        obj['updated-sms-editor'] = '';
+        obj['var-mapped'] = {};
+        const history = obj;
+        history.tabKey = 1;
+        savedData.push({
+          versions: { base: obj },
+          history: [history],
+          type: SMS,
+          traiEnable: true,
+          name: obj.template_name,
+        });
+      }
+    });
+    actions.createSMSTRAITemplates(
+      { templates: savedData },
+      (resp, errorMessage) => {
+        createCallback({ errorMessage });
+        onCreateComplete();
+      },
+    );
+  };
+
+  const isDisableDone = () => {
+    //only if there is a file which is validated and has passed templates
+    //the done is not disabled otherwise it is disabled
+    if (
+      previewFileIndex !== null &&
+      saveTemplate &&
+      files[0].fileResult.data.length - 1 - totalFailCount >= 1
+    ) {
+      return false;
+    }
+    return true;
+  };
+
+  const onCancel = () => {
+    setFiles([]);
+    updateSaveTemplate(false);
+  };
+
+  const InstructionComp = (inst) => (
+    <CapRow className="instruction">
+      <CapColumn span={3}>
+        <span className="instruction-num">{inst.number}</span>
+      </CapColumn>
+      <CapColumn span={21}>{inst.message}</CapColumn>
+    </CapRow>
+  );
+
+  const fileData = files[previewFileIndex] || {};
+  const { fileResult, file } = fileData;
+  return (
+    <>
+      <CapRow span={24} className="upload-type-group-create-container">
+        <CapColumn span={16}>
+          <CapHeading type="h4" className="upload-file-title">
+            {formatMessage(messages.uploadFile)}
+          </CapHeading>
+          {previewFileIndex === null && dropZone && (
+            <>
+              <CapSpin spinning={isFileDropped}>
+                <Dropzone onDrop={onDrop} onFileDialogCancel={onCancel}>
+                  {({ getRootProps, getInputProps }) => (
+                    <div {...getRootProps()} className="file-drop-zone">
+                      <input {...getInputProps()} />
+                      <div>
+                        <img
+                          src={dragdropImage}
+                          role="presentation"
+                          alt="dropzone"
+                        />
+                        <div className="drop-zone-text">
+                          <CapHeading type="h2" className="drop-zone-text-1">
+                            {formatMessage(messages.dropCsvFile)}
+                          </CapHeading>
+                          <CapHeading type="h3" className="drop-zone-text-2">
+                            {formatMessage(messages.or)}
+                          </CapHeading>
+                          <CapButton
+                            type="secondary"
+                            className="drop-zone-text-3"
+                          >
+                            {formatMessage(messages.selectFileFromComputer)}
+                          </CapButton>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </Dropzone>
+              </CapSpin>
+            </>
+          )}
+          {previewFileIndex !== null && (
+            <>
+              <CapRow span={24} className="upload-type-group-create-container">
+                <div className="upload-file-preview">
+                  <CapDivider
+                    type="horizontal"
+                    className="upload-file-preview-divider-1"
+                  />
+                  <CapRow>
+                    <CapColumn span={13}>
+                      <CapLabel.CapLabelInline type="label9">
+                        {file.name}
+                      </CapLabel.CapLabelInline>
+                      <CapLabel.CapLabelInline
+                        type="label1"
+                        className="number-of-records"
+                      >
+                        (
+                        {formatMessage(messages.numberOfRecords, {
+                          value: fileResult.data.length - 1,
+                        })}
+                        )
+                      </CapLabel.CapLabelInline>
+                    </CapColumn>
+                    {errorText && (
+                      <>
+                        <CapColumn
+                          span={10}
+                          className="upload-failed-container"
+                        >
+                          <CapLabel
+                            type="label9"
+                            className="upload-failed-message"
+                          >
+                            {formatMessage(messages.failedToUpload)}
+                          </CapLabel>
+                          <CapIcon
+                            type="warning"
+                            className="upload-failed-icon"
+                            svgProps={{ color: CAP_RED01 }}
+                          ></CapIcon>
+                        </CapColumn>
+                      </>
+                    )}
+                    {!errorText && (
+                      <>
+                        <CapColumn
+                          span={3}
+                          className="validation-count-container"
+                        >
+                          <CapLabel
+                            type="label9"
+                            className="validation-count-label"
+                          >
+                            {formatMessage(messages.passedVal, {
+                              number:
+                                fileResult.data.length - 1 - totalFailCount,
+                            })}
+                          </CapLabel>
+                          <CapIcon
+                            type="check-circle"
+                            className="validation-count-icon"
+                            svgProps={{ color: CAP_PRIMARY.base }}
+                          ></CapIcon>
+                        </CapColumn>
+                        <CapColumn
+                          span={3}
+                          className="validation-count-container"
+                        >
+                          <CapLabel
+                            type="label9"
+                            className="validation-count-label"
+                          >
+                            {formatMessage(messages.failedVal, {
+                              number: totalFailCount,
+                            })}
+                          </CapLabel>
+                          <CapIcon
+                            type="warning"
+                            className="validation-count-icon"
+                            svgProps={{ color: CAP_RED01 }}
+                          ></CapIcon>
+                        </CapColumn>
+                        <CapColumn span={4}>
+                          {totalFailCount >= 1 && (
+                            <a
+                              onClick={downloadIssuesCSV}
+                              className="download-issues-csv-link"
+                            >
+                              {formatMessage(messages.downloadIssues)}
+                            </a>
+                          )}
+                        </CapColumn>
+                      </>
+                    )}
+                    <CapColumn span={1} className="delete-csv">
+                      <CapIcon
+                        type="delete"
+                        size="s"
+                        onClick={deleteCSV}
+                      ></CapIcon>
+                    </CapColumn>
+                  </CapRow>
+                  <CapDivider
+                    type="horizontal"
+                    className="upload-file-preview-divider-2"
+                  />
+                  {errorText && <CapError>{errorText}</CapError>}
+                </div>
+              </CapRow>
+            </>
+          )}
+        </CapColumn>
+        <CapColumn span={8} className="upload-instructions-container">
+          <CapHeading type="h4">
+            {formatMessage(messages.uploadInstructions)}
+          </CapHeading>
+          <div className="upload-instruction-list">
+            <InstructionComp
+              number={1}
+              message={
+                <FormattedMessage
+                  {...messages.downloadInstruction}
+                  values={{
+                    link: (
+                      <a
+                        onClick={downloadSampleCSV}
+                        className="download-sample-link"
+                      >
+                        {formatMessage(messages.sampleCsv)}
+                      </a>
+                    ),
+                  }}
+                />
+              }
+            />
+            <InstructionComp
+              number={2}
+              message={formatMessage(messages.firstRowInstruction)}
+            />
+            <InstructionComp
+              number={3}
+              message={formatMessage(messages.secondRowInstruction)}
+            />
+            <InstructionComp
+              number={4}
+              message={formatMessage(messages.duplicateEntriesInstruction)}
+            />
+          </div>
+        </CapColumn>
+        <SMSTraiFooter>
+          <CapButton
+            className="done-button"
+            onClick={onDoneCallback}
+            disabled={isDisableDone()}
+          >
+            <FormattedMessage {...messages.doneButtonLabel} />
+          </CapButton>
+        </SMSTraiFooter>
+      </CapRow>
+    </>
+  );
+};
+
+SmsTraiCreate.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(smsTraiActions, dispatch),
+});
+
+export default withCreatives({
+  WrappedComponent: injectIntl(SmsTraiCreate),
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});