@capillarytech/creatives-library 7.10.34 → 7.10.35

package/v2Containers/SmsTrai/Create/index.js

@@ -1,6 +1,10 @@
+/* eslint-disable no-trailing-spaces */
+/* eslint-disable guard-for-in */
+/* eslint-disable no-loop-func */
+/* eslint-disable no-restricted-syntax */
 /* eslint-disable no-undef */
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import styled from 'styled-components';
@@ -17,7 +21,7 @@ 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 { cloneDeep, isEmpty } from 'lodash';
 import {
   CAP_SPACE_16,
   CAP_SPACE_24,
@@ -27,6 +31,7 @@ import {
   CAP_PRIMARY,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import './index.scss';
+import makeSelectSmsTrai from './selectors';
 import dragdropImage from '../../../assets/group.png';
 import * as smsTraiActions from './actions';
 import {
@@ -47,6 +52,9 @@ import {
   SAVED_COLUMNS,
   MAPPED_SAVED_COLUMN,
   SMS,
+  FAILURE,
+  SUCCESS,
+  DUPLICATE,
 } from './constants';
 import messages from './messages';
 import withCreatives from '../../../hoc/withCreatives';
@@ -58,15 +66,25 @@ export const SmsTraiCreate = (props) => {
     onCreateComplete,
     isFullMode,
     onShowTemplates,
+    traiSms: {
+      duplicateDetails = {},
+      duplicateDetailsError = '',
+      duplicateDetailsStatus = '',
+    } = {},
   } = props;
   const { formatMessage } = intl;
+  const [traiFileData, setTraiFileData] = useState({});
+  const [traiFileMeta, setTraiFileMeta] = useState(null);
+  const [validatedData, setValidatedData] = useState([]);
   const [files, setFiles] = useState([]);
+  const [templateRegistrationIndex, setTemplateRegistrationIndex] = useState(null);
   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 [uploadValidated, setUploadValidated] = useState(false);
 
   const SMSTraiFooter = styled.div`
     background-color: ${CAP_WHITE};
@@ -80,8 +98,229 @@ export const SmsTraiCreate = (props) => {
     }
     }
 `;
+  useEffect(() => {
+    if (!isEmpty(traiFileData) && traiFileMeta?.name) {
+      if (traiFileMeta?.name?.split('.').pop() === 'csv') {
+        const mandatoryColNotPresent = [];
+        const headerAliasPresent = [];
+        const templateIdAliasPresent = [];
+        const templateMessageAliasPresent = [];
+        const statusAliasPresent = [];
+        const typeAliasPresent = [];
+        const colCounts = {};
+        const traiFileDataCopy = cloneDeep(traiFileData);
+        //removing last empty row if each cell is empty
+        if (traiFileDataCopy?.data[traiFileDataCopy?.data?.length - 1]?.every((cell) => !cell)) {
+          traiFileDataCopy.data.pop();
+        }
+        const fileLen = traiFileDataCopy?.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;
+        }
+
+        const cols = getAllColumnNames(traiFileDataCopy.data[0]);
+
+        for (let i = 0; i < MANDATORY_COLUMNS.length; i += 1) {
+          if (!cols.includes(MANDATORY_COLUMNS[i])) {
+            mandatoryColNotPresent.push(MANDATORY_COLUMNS[i]);
+          }
+        }
+        if (mandatoryColNotPresent.length > 0) {
+          setErrorText(formatMessage(messages.mandatoryColErrorDescription));
+          return;
+        }
+
+        //one of the mandatory header alias should be available.
+        for (let i = 0; i < HEADER_ALIASES.length; i += 1) {
+          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 += 1) {
+          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 += 1) {
+          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;
+        }
+        //one of the mandatory status alias should be available.
+        for (let i = 0; i < STATUS_ALIASES.length; i += 1) {
+          if (cols.includes(STATUS_ALIASES[i])) {
+            statusAliasPresent.push(STATUS_ALIASES[i]);
+          }
+        }
+        if (statusAliasPresent.length === 0) {
+          setErrorText(
+            formatMessage(messages.statusAliasErrorDescription, {
+              statusAliases: STATUS_ALIASES.join(' / '),
+            }),
+          );
+          return;
+        }
+        //one of the mandatory type alias should be available.
+        for (let i = 0; i < TYPE_ALIASES.length; i += 1) {
+          if (cols.includes(TYPE_ALIASES[i])) {
+            typeAliasPresent.push(TYPE_ALIASES[i]);
+          }
+        }
+        if (typeAliasPresent.length === 0) {
+          setErrorText(
+            formatMessage(messages.typeAliasErrorDescription, {
+              typeAliases: TYPE_ALIASES.join(' / '),
+            }),
+          );
+          return;
+        }
+        // count of each col to validate repetitive cols
+        for (const num of cols) {
+          colCounts[num] = colCounts[num] ? colCounts[num] + 1 : 1;
+        }
 
-  let uploadValidated = false;
+        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.join(', '),
+            }),
+          );
+          return;
+        }
+        //perform required data transformation
+        dataTransformHandler(
+          cols,
+          traiFileDataCopy,
+          headerAliasPresent,
+          templateIdAliasPresent,
+          statusAliasPresent,
+        );
+      } else {
+        setErrorText(formatMessage(messages.nonCsvErrorDescription));
+      }
+    }
+  }, [traiFileData, traiFileMeta]);
+
+  useEffect(() => {
+    const { count = 0, template_ids = [] } = duplicateDetails || {};
+
+    if (errorText && !uploadValidated) {
+      setIsFileDropped(false); // Stop the spinner
+      const selectedFiles = cloneDeep(files);
+      selectedFiles.push({
+        fileMeta: traiFileMeta,
+        fileData: traiFileData,
+        columnMapping: [],
+      });
+      setFiles(selectedFiles);
+      setPreviewFileIndex(selectedFiles.length - 1);
+      setDropZone(false);
+    } else if (uploadValidated && duplicateDetailsStatus === FAILURE) {
+      deleteOrCancelCSV();
+      CapNotification.error({ message: duplicateDetailsError || FAILURE });
+    } else if (uploadValidated && duplicateDetailsStatus === SUCCESS && !isEmpty(validatedData)) {
+      if (!isEmpty(duplicateDetails) && count > 0 && templateRegistrationIndex !== null) {
+        const clonedValidatedData = cloneDeep(validatedData);
+        let duplicateTemplateNameCounts = 0;
+        const apiResponseIds = [...new Set(template_ids)];
+        
+        for (let i = 1; i < clonedValidatedData.length; i += 1) {
+          const duplicatePresent = apiResponseIds?.includes(clonedValidatedData[i][templateRegistrationIndex]?.replace(/[“”"'‘’`´]/g, ''));
+          if (duplicatePresent) {
+            //if rejection reason for this row is empty, consider as new error
+            if (!clonedValidatedData[i][clonedValidatedData[i]?.length - 1]) {
+              duplicateTemplateNameCounts += 1;
+            }
+            //add rejection reason to rejection reason column
+            clonedValidatedData[i][
+              clonedValidatedData[i]?.length - 1
+            ] += ` This template name is already present in the database.Duplicate template names are not allowed.`;
+          }
+        } //Duplicate should match constant DUPLICATE
+        setTotalFailCount((prev) => prev + duplicateTemplateNameCounts);
+        setValidatedData(clonedValidatedData);
+      }
+      updateSaveTemplate(true);
+    }
+  }, [duplicateDetailsStatus, errorText, templateRegistrationIndex]);
+
+  useEffect(() => {
+    if (saveTemplate && !isEmpty(traiFileData) && !isEmpty(validatedData)) {
+      setIsFileDropped(false); // Stop the spinner
+      const selectedFiles = cloneDeep(files);
+      const traiFileDataCopy = cloneDeep(traiFileData);
+      //removing last empty row if each cell is empty
+      if (traiFileDataCopy?.data[traiFileDataCopy?.data?.length - 1]?.every((cell) => !cell)) {
+        traiFileDataCopy.data.pop();
+      }
+      //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(
+        traiFileDataCopy.data[0],
+      ).indexOf(CAPILLARY_REJECTION_REASON.toLowerCase());
+      if (rejectionIndex !== -1) {
+        traiFileDataCopy.data.forEach((row) => {
+          row.splice(rejectionIndex, 1);
+        });
+      }
+      //adding validated rejection reason column to original results
+      for (let i = 0; i < validatedData.length; i += 1) {
+        traiFileDataCopy.data[i].push(
+          validatedData[i][validatedData[i]?.length - 1],
+        );
+      }
+
+      selectedFiles.push({
+        fileMeta: traiFileMeta,
+        fileData: traiFileDataCopy,
+        columnMapping: [],
+      });
+      setFiles(selectedFiles);
+      setPreviewFileIndex(selectedFiles.length - 1);
+      setDropZone(false);
+    }
+  }, [validatedData, saveTemplate]);
 
   const getIndexofColumn = (allColumnNames, columnName) =>
     allColumnNames.findIndex(
@@ -134,9 +373,34 @@ export const SmsTraiCreate = (props) => {
     return isError;
   };
 
-  const duplicateTemplateNameValidation = (
+  const checkDuplicateTemplateNameInDb = (
+    transformedResults,
+    templateIdIndex,
+    templateNameIndex,
+  ) => {
+    //filtering out rows that have duplicate template name in CSV and rows which have template name/template id missing
+    const checkInDb = transformedResults
+      ?.map((elem, index) => {
+        const rejectionReason = elem[elem?.length - 1]?.trim();
+        if (index !== 0 && !rejectionReason?.includes(DUPLICATE)) {
+          return {
+            template_id: elem[templateIdIndex]?.replace(/[“”"'‘’`´]/g, ''),
+            template_name: elem[templateNameIndex],
+          };
+        }
+      })
+      ?.filter((obj) => obj && obj.template_name !== '' && obj.template_id !== '');
+    setUploadValidated(true);
+    setValidatedData(transformedResults);
+    setTemplateRegistrationIndex(templateIdIndex);
+    actions.checkDuplicatesInDb(checkInDb);
+  };
+
+  const checkDuplicateTemplateNameInCSV = (
     transformedResults,
     templateNameObj,
+    templateIdIndex,
+    templateNameIndex,
   ) => {
     //filtering and extracting index of template names with more than 1 occurence
     const duplicateTemplateNameRows =
@@ -155,11 +419,15 @@ export const SmsTraiCreate = (props) => {
         }
         transformedResults[row][
           transformedResults[row]?.length - 1
-        ] += ` Duplicate template names are not allowed.`;
+        ] += ` This template name is repeated in this CSV.Duplicate template names are not allowed.`;
       });
       setTotalFailCount((prev) => prev + duplicateTemplateNameCounts);
     }
-    return transformedResults;
+    checkDuplicateTemplateNameInDb(
+      transformedResults,
+      templateIdIndex,
+      templateNameIndex,
+    );
   };
 
   const checkCSVRowsValidation = (
@@ -207,8 +475,8 @@ export const SmsTraiCreate = (props) => {
           errorArray.push(`"${transformedResults[0][index]}"`);
         } else if (index === templateNameIndex && cell) {
           if (templateNameObj[cell]) {
-            templateNameObj[cell]['count'] += 1;
-            templateNameObj[cell]['csvRow']?.push(row);
+            templateNameObj[cell].count += 1;
+            templateNameObj[cell].csvRow?.push(row);
           } else {
             templateNameObj[cell] = { count: 1, csvRow: [row] };
           }
@@ -236,154 +504,17 @@ export const SmsTraiCreate = (props) => {
         setTotalFailCount((prev) => prev + 1);
       }
     }
-    uploadValidated = true;
-    return duplicateTemplateNameValidation(transformedResults, templateNameObj);
-  };
-
-  const checkCSVValidation = (results, file) => {
-    if (file?.name?.split('.').pop() === 'csv') {
-      const mandatoryColNotPresent = [];
-      const headerAliasPresent = [];
-      const templateIdAliasPresent = [];
-      const templateMessageAliasPresent = [];
-      const statusAliasPresent = [];
-      const typeAliasPresent = [];
-      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;
-      }
-
-      const cols = getAllColumnNames(results.data[0]);
-
-      for (let i = 0; i < MANDATORY_COLUMNS.length; i += 1) {
-        if (!cols.includes(MANDATORY_COLUMNS[i])) {
-          mandatoryColNotPresent.push(MANDATORY_COLUMNS[i]);
-        }
-      }
-      if (mandatoryColNotPresent.length > 0) {
-        setErrorText(formatMessage(messages.mandatoryColErrorDescription));
-        return;
-      }
-
-      //one of the mandatory header alias should be available.
-      for (let i = 0; i < HEADER_ALIASES.length; i += 1) {
-        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 += 1) {
-        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 += 1) {
-        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;
-      }
-      //one of the mandatory status alias should be available.
-      for (let i = 0; i < STATUS_ALIASES.length; i += 1) {
-        if (cols.includes(STATUS_ALIASES[i])) {
-          statusAliasPresent.push(STATUS_ALIASES[i]);
-        }
-      }
-      if (statusAliasPresent.length === 0) {
-        setErrorText(
-          formatMessage(messages.statusAliasErrorDescription, {
-            statusAliases: STATUS_ALIASES.join(' / '),
-          }),
-        );
-        return;
-      }
-      //one of the mandatory type alias should be available.
-      for (let i = 0; i < TYPE_ALIASES.length; i += 1) {
-        if (cols.includes(TYPE_ALIASES[i])) {
-          typeAliasPresent.push(TYPE_ALIASES[i]);
-        }
-      }
-      if (typeAliasPresent.length === 0) {
-        setErrorText(
-          formatMessage(messages.typeAliasErrorDescription, {
-            typeAliases: TYPE_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.join(', '),
-          }),
-        );
-        return;
-      }
-      //perform required data transformation
-      return dataTransformHandler(
-        cols,
-        results,
-        headerAliasPresent,
-        templateIdAliasPresent,
-        statusAliasPresent,
-      );
-    } else {
-      setErrorText(formatMessage(messages.nonCsvErrorDescription));
-    }
+    checkDuplicateTemplateNameInCSV(
+      transformedResults,
+      templateNameObj,
+      templateIdIndex,
+      templateNameIndex,
+    );
   };
 
   const dataTransformHandler = (
     cols,
-    results,
+    traiFileDataCopy,
     headerAliasPresent,
     templateIdAliasPresent,
     statusAliasPresent,
@@ -404,14 +535,14 @@ export const SmsTraiCreate = (props) => {
     }
     //transforming data to keep only mandatory cols data using their index
     const transformedResults = [];
-    for (const key in results.data) {
+    for (const key in traiFileDataCopy.data) {
       transformedResults.push(
-        indexArray.map((i) => results.data[key][i]?.trim()),
+        indexArray.map((i) => traiFileDataCopy.data[key][i]?.trim()),
       );
     }
     //add rejection header
     transformedResults[0].push(CAPILLARY_REJECTION_REASON);
-    return checkCSVRowsValidation(
+    checkCSVRowsValidation(
       transformedResults,
       headerAliasPresent[0],
       templateIdAliasPresent[0],
@@ -422,57 +553,18 @@ export const SmsTraiCreate = (props) => {
   //returns the headers(first row) of the uploaded file in lowercase
   const getAllColumnNames = (data) => data.map((x) => x?.toLowerCase()?.trim());
 
-  const onDrop = (droppedFile) => {
+  const onDrop = (traiFile) => {
     // 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 += 1) {
-            results.data[i].push(
-              validatedResults[i][validatedResults[i]?.length - 1],
-            );
-          }
-          updateSaveTemplate(true);
-        }
-        selectedFiles.push({
-          file,
-          fileResult: results,
-          columnMapping: [],
-        });
-
-        setFiles(selectedFiles);
-        setPreviewFileIndex(selectedFiles.length - 1);
-        setDropZone(false);
+    Papa.parse(traiFile[0], {
+      complete: (fileData, fileMeta) => {
+        setTraiFileData(fileData);
+        setTraiFileMeta(fileMeta);
       },
     });
   };
 
-  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(
@@ -490,14 +582,14 @@ export const SmsTraiCreate = (props) => {
   const downloadIssuesCSV = (event) => {
     let csvContent = [];
     let tempArray = [];
-    const fileData = files[0].fileResult.data;
-    const rejectionIndex = fileData[0].indexOf(CAPILLARY_REJECTION_REASON);
+    const csvData = files[0].fileData.data;
+    const rejectionIndex = csvData[0].indexOf(CAPILLARY_REJECTION_REASON);
 
     if (rejectionIndex !== -1) {
-      tempArray.push(fileData[0]);
-      for (let row = 1; row < fileData.length; row += 1) {
-        if (fileData[row][rejectionIndex]) {
-          tempArray.push(fileData[row]);
+      tempArray.push(csvData[0]);
+      for (let row = 1; row < csvData.length; row += 1) {
+        if (csvData[row][rejectionIndex]) {
+          tempArray.push(csvData[row]);
         }
       }
       tempArray = tempArray.map((row) =>
@@ -527,15 +619,15 @@ export const SmsTraiCreate = (props) => {
   const onDoneCallback = () => {
     //start spinner
     setIsFileDropped(true);
-    const fileData = files[0].fileResult.data;
-    const rejectionIndex = fileData[0].indexOf(CAPILLARY_REJECTION_REASON);
+    const csvData = files[0].fileData.data;
+    const rejectionIndex = csvData[0].indexOf(CAPILLARY_REJECTION_REASON);
     const tempArray = [];
-    tempArray.push(fileData[0]);
+    tempArray.push(csvData[0]);
 
     // filter out non rejected rows
-    for (let row = 1; row < fileData.length; row += 1) {
-      if (!fileData[row][rejectionIndex]) {
-        tempArray.push(fileData[row]);
+    for (let row = 1; row < csvData.length; row += 1) {
+      if (!csvData[row][rejectionIndex]) {
+        tempArray.push(csvData[row]);
       }
     }
     // Filter out the columns index that needs to save
@@ -610,16 +702,26 @@ export const SmsTraiCreate = (props) => {
     if (
       previewFileIndex !== null &&
       saveTemplate &&
-      files[0].fileResult.data.length - 1 - totalFailCount >= 1
+      files[0].fileData.data.length - 1 - totalFailCount >= 1
     ) {
       return false;
     }
     return true;
   };
 
-  const onCancel = () => {
+  const deleteOrCancelCSV = () => {
+    setTraiFileData({});
+    setTraiFileMeta(null);
+    setValidatedData([]);
     setFiles([]);
+    setTemplateRegistrationIndex(null);
+    setErrorText('');
+    setDropZone(true);
+    setPreviewFileIndex(null);
+    setIsFileDropped(false);
+    setTotalFailCount(0);
     updateSaveTemplate(false);
+    setUploadValidated(false);
   };
 
   const InstructionComp = (inst) => (
@@ -631,8 +733,8 @@ export const SmsTraiCreate = (props) => {
     </CapRow>
   );
 
-  const fileData = files[previewFileIndex] || {};
-  const { fileResult, file } = fileData;
+  const fileZero = files[previewFileIndex] || {};
+  const { fileData, fileMeta } = fileZero;
   return (
     <>
       <CapRow span={24} className="dlt-csv-upload-container">
@@ -643,7 +745,7 @@ export const SmsTraiCreate = (props) => {
           {previewFileIndex === null && dropZone && (
             <>
               <CapSpin spinning={isFileDropped}>
-                <Dropzone onDrop={onDrop} onFileDialogCancel={onCancel}>
+                <Dropzone onDrop={onDrop} onFileDialogCancel={deleteOrCancelCSV}>
                   {({ getRootProps, getInputProps }) => (
                     <div {...getRootProps()} className="file-drop-zone">
                       <input {...getInputProps()} />
@@ -685,7 +787,7 @@ export const SmsTraiCreate = (props) => {
                   <CapRow>
                     <CapColumn span={10}>
                       <CapLabel.CapLabelInline type="label9">
-                        {file.name}
+                        {fileMeta.name}
                       </CapLabel.CapLabelInline>
                       <CapLabel.CapLabelInline
                         type="label1"
@@ -693,7 +795,7 @@ export const SmsTraiCreate = (props) => {
                       >
                         (
                         {formatMessage(messages.numberOfRecords, {
-                          value: fileResult.data.length - 1,
+                          value: fileData.data.length - 1,
                         })}
                         )
                       </CapLabel.CapLabelInline>
@@ -729,8 +831,7 @@ export const SmsTraiCreate = (props) => {
                             className="validation-count-label"
                           >
                             {formatMessage(messages.passedVal, {
-                              number:
-                                fileResult.data.length - 1 - totalFailCount,
+                              number: fileData.data.length - 1 - totalFailCount,
                             })}
                           </CapLabel>
                           <CapIcon
@@ -773,7 +874,7 @@ export const SmsTraiCreate = (props) => {
                       <CapIcon
                         type="delete"
                         size="s"
-                        onClick={deleteCSV}
+                        onClick={deleteOrCancelCSV}
                       ></CapIcon>
                     </CapColumn>
                   </CapRow>
@@ -852,7 +953,9 @@ SmsTraiCreate.propTypes = {
   dispatch: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = createStructuredSelector({});
+const mapStateToProps = createStructuredSelector({
+  traiSms: makeSelectSmsTrai(),
+});
 
 const mapDispatchToProps = (dispatch) => ({
   actions: bindActionCreators(smsTraiActions, dispatch),