fuse-importer 0.1.4-testing → 0.1.6-testing

package/lib/esm/Importer/Stepper/index.js

@@ -13,47 +13,13 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
+import { useValidationContext } from "../../Importer/common/Spreadsheet/ValidationContextProvider";
 import { Button, ChevronRightIcon, closeIconCondensed } from "../../common";
+import { useEventManagerContext } from "../../common/EventManagerContextProvider";
 import { Div } from "../../styled/utils";
 import { ColumnType } from "../Matcher/common/types";
 import { useReviewContext } from "../Review/ReviewContextProvider";
@@ -62,8 +28,6 @@ import { ConfirmCloseModal } from "./ConfirmCloseModal";
 import { Step } from "./Step";
 import { StepperSubmitModal } from "./StepperSubmitModal";
 import { UnmatchedHeadersModal } from "./UnmatchedHeadersModal";
-import { getEnumFieldValueMatchingsInitialValue } from "./common/getEnumFieldValueMatchingsInitialValue";
-import { useAppLoadingContext } from "../../common/AppLoadingContextProvider";
 var StepperWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  user-select: none;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  user-select: none;\n"])), function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.gray300; });
 var StepperContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  padding-left: 32px;\n  padding-right: 32px;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  padding-left: 32px;\n  padding-right: 32px;\n  width: 100%;\n"])));
 var Steps = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  @media (max-width: 630px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 630px) {\n    display: none;\n  }\n"])));
@@ -80,43 +44,30 @@ export var Stepper = function (_a) {
     var t = useTranslation("general").t;
     var _c = useState(false), isSubmitModalOpen = _c[0], setIsSubmitModalOpen = _c[1];
     var _d = useState(false), isConfirmCloseModalOpen = _d[0], setIsConfirmCloseModalOpen = _d[1];
-    var setIsLoadingApp = useAppLoadingContext().setIsLoadingApp;
-    var _e = useReviewContext(), appResponse = _e.appResponse, isSubmitDisabled = _e.isSubmitDisabled, onSubmit = _e.onSubmit;
-    var _f = useImporterContext(), initialRecords = _f.initialRecords, currentStepIndex = _f.currentStepIndex, templateHeaderMatchings = _f.templateHeaderMatchings, matcherSubstep = _f.matcherSubstep, templateHeaders = _f.templateHeaders, uploadedDataEnumFieldValues = _f.uploadedDataEnumFieldValues, setEnumFieldValueMatchings = _f.setEnumFieldValueMatchings, setMatcherSubstep = _f.setMatcherSubstep, setCurrentStepIndex = _f.setCurrentStepIndex, onClose = _f.onClose, isUsingManualImport = _f.isUsingManualImport, resetImporterWhenUsingManualImport = _f.resetImporterWhenUsingManualImport, uploadedData = _f.uploadedData, setHeadersMappings = _f.setHeadersMappings, uploadedDataHeaders = _f.uploadedDataHeaders, fuseApi = _f.fuseApi, templateSlug = _f.templateSlug;
+    var _e = useState(false), isSubmitDisabled = _e[0], setIsSubmitDisabled = _e[1];
+    var _f = useReviewContext(), appResponse = _f.appResponse, onSubmit = _f.onSubmit;
+    var totalErrorCount = useValidationContext().totalErrorCount;
+    var _g = useEventManagerContext(), on = _g.on, off = _g.off, EVENTS = _g.EVENTS;
     useEffect(function () {
-        (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var mappings;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!uploadedDataHeaders) return [3 /*break*/, 2];
-                        setIsLoadingApp(true);
-                        return [4 /*yield*/, fuseApi.post("/api/v1/importer/templates/".concat(templateSlug, "/mappings"), {
-                                file_headers: uploadedDataHeaders,
-                            })];
-                    case 1:
-                        mappings = (_a.sent()).data.mappings;
-                        setIsLoadingApp(false);
-                        setHeadersMappings(mappings);
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, [uploadedDataHeaders]);
+        var listener = function () {
+            var isDisabled = totalErrorCount.current > 0;
+            setIsSubmitDisabled(isDisabled);
+        };
+        on(EVENTS.UPDATE_TOTAL_ERROR_COUNT, listener);
+        return function () {
+            off(EVENTS.UPDATE_TOTAL_ERROR_COUNT, listener);
+        };
+    }, [appResponse]);
+    var _h = useImporterContext(), initialRecords = _h.initialRecords, currentStepIndex = _h.currentStepIndex, templateHeaderMatchings = _h.templateHeaderMatchings, matcherSubstep = _h.matcherSubstep, templateHeaders = _h.templateHeaders, enumFieldValueMatchings = _h.enumFieldValueMatchings, setMatcherSubstep = _h.setMatcherSubstep, setCurrentStepIndex = _h.setCurrentStepIndex, onClose = _h.onClose, isUsingManualImport = _h.isUsingManualImport, resetImporterWhenUsingManualImport = _h.resetImporterWhenUsingManualImport, uploadedData = _h.uploadedData;
     var templateHeaderLabels = Object.keys(templateHeaderMatchings || []);
     var unmatchedHeadersCount = templateHeaderLabels.filter(function (templateHeaderLabel) { return !templateHeaderMatchings[templateHeaderLabel]; }).length;
     var isLastSubMatchStep = matcherSubstep === 1;
     var setStep = function () {
         var templateHasEnumFields = !!(templateHeaders === null || templateHeaders === void 0 ? void 0 : templateHeaders.find(function (header) { return header.column_type === ColumnType.enum; }));
         if (templateHasEnumFields) {
-            var _enumFieldValueMatchings = getEnumFieldValueMatchingsInitialValue({
-                uploadedDataEnumFieldValues: uploadedDataEnumFieldValues,
-                templateHeaders: templateHeaders,
-            });
-            var anyTemplateEnumFieldsMatched = Object.keys(_enumFieldValueMatchings).length > 0;
+            var anyTemplateEnumFieldsMatched = !!enumFieldValueMatchings &&
+                Object.keys(enumFieldValueMatchings).length > 0;
             if (anyTemplateEnumFieldsMatched) {
-                setEnumFieldValueMatchings(_enumFieldValueMatchings);
                 setMatcherSubstep(1);
             }
             else {
@@ -169,7 +120,7 @@ export var Stepper = function (_a) {
                 return (_jsxs(Div, __assign({ centered: true }, { children: [_jsx(Step, { index: index, label: label, isCompleted: isCompleted, isSelected: index === currentStepIndex }), !isLast && (_jsx(Div, __assign({ ml: 18, mr: 18, dflex: true }, { children: _jsx(ChevronRightIcon, {}) })))] }), index));
             }) })));
     var leftButtonUI = (_jsx(Div, __assign({ style: { flex: 1 } }, { children: !initialRecords && (_jsxs(StepperButtonContainer, __assign({ align: "left" }, { children: [logoURL && (_jsx(Div, __assign({ forDesktop: true }, { children: _jsx(Logo, { src: logoURL, alt: "" }) }))), currentStepIndex > 0 && !appResponse && (_jsx(GoBackButtonWrapper, { children: _jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: t("stepper.go_back") })) }))] }))) })));
-    var rightButtonUI = (_jsxs(StepperButtonContainer, __assign({ align: "right" }, { children: [(isMatchStep || isVerifyStep) && (_jsx(Button, __assign({ variant: "primary", onClick: continueToNextStep }, { children: t("stepper.continue") }))), isReviewStep && (_jsx(Button, __assign({ variant: "primary", isDisabled: isSubmitDisabled, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: t("stepper.submit") }))), _jsx(CloseIcon, __assign({ "data-test-id": "close-importer", centered: true, clickable: true, onClick: handleOnClose }, { children: closeIconCondensed }))] })));
+    var rightButtonUI = (_jsxs(StepperButtonContainer, __assign({ align: "right" }, { children: [(isMatchStep || isVerifyStep) && (_jsx(Button, __assign({ "data-cy": "continue-button", variant: "primary", onClick: continueToNextStep }, { children: t("stepper.continue") }))), isReviewStep && (_jsx(Button, __assign({ variant: "primary", isDisabled: isSubmitDisabled, "data-cy": "submit_disabled_" + isSubmitDisabled, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: t("stepper.submit") }))), _jsx(CloseIcon, __assign({ "data-test-id": "close-importer", centered: true, clickable: true, onClick: handleOnClose }, { children: closeIconCondensed }))] })));
     return (_jsxs(_Fragment, { children: [_jsx(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 72, centered: true }, { children: _jsxs(StepperContainer, { children: [leftButtonUI, _jsx(Steps, __assign({ alignCenter: true }, { children: stepsUI })), rightButtonUI] }) })), _jsx(UnmatchedHeadersModal, { isUnmatchedHeadersModalOpen: isUnmatchedHeadersModalOpen, unmatchedHeadersCount: unmatchedHeadersCount, onSetStep: function () { return setStep(); }, onCloseUnmatchedHeadersModal: function () {
                     return setIsUnmatchedHeadersModalOpen(false);
                 } }), _jsx(StepperSubmitModal, { isSubmitModalOpen: isSubmitModalOpen, onCloseModal: function () { return setIsSubmitModalOpen(false); }, onSubmit: onSubmit }), _jsx(ConfirmCloseModal, { isOpen: isConfirmCloseModalOpen, onClose: function () { return setIsConfirmCloseModalOpen(false); }, onCloseImporter: onClose })] }));

package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterDropzone.d.ts

@@ -1,2 +1,3 @@
-declare const ImporterDropzone: () => JSX.Element;
+import { DropzoneProps as ImporterDropzoneProps } from "../../../common";
+declare const ImporterDropzone: ({ onComplete, setIsLoading, saveFileName, }: ImporterDropzoneProps) => JSX.Element;
 export { ImporterDropzone };

package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterDropzone.js

@@ -14,35 +14,29 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useDropzone } from "react-dropzone";
 import styled, { css } from "styled-components";
-import { useUploaderContext } from "../UploaderContextProvider";
-import { useImporterContext } from "../../contexts/ImporterContextProvider";
+import { useImporterContext } from "../../../Importer/contexts/ImporterContextProvider";
 import { Div } from "../../../styled/utils";
 import { theme } from "../../../styled/theme";
-import { addToast } from "../../../common/Toast";
-import { Button } from "../../../common/buttons";
-import { DragAndDropSvg, UploadIndicatorSvg } from "./backgrounds";
+import { DragAndDropSvg, UploadIndicatorSvg, } from "../../../Importer/Uploader/DragAndDropImporter/backgrounds";
 import { useTranslation } from "react-i18next";
-import Papa from "papaparse";
-import * as XLSX from "xlsx";
+import { Button, addToast, useDragAndDrop, } from "../../../common";
 var DragAndDropCard = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  margin-right: ", ";\n  width: 100%;\n  height: 100%;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n\n  @media (max-width: 1050px) {\n    padding: 24px;\n    width: auto;\n  }\n\n  ", "\n"], ["\n  border-radius: 8px;\n  margin-right: ", ";\n  width: 100%;\n  height: 100%;\n  display: flex;\n  background: ", ";\n  border: 1px dashed ", ";\n\n  @media (max-width: 1050px) {\n    padding: 24px;\n    width: auto;\n  }\n\n  ", "\n"])), function (props) { return (props.isDragActive ? "-10px" : "revert"); }, theme.colors.white, theme.colors.red50, function (props) {
     return props.isDragActive && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      border: 1px solid ", ";\n      justify-content: center;\n    "], ["\n      background: ", ";\n      border: 1px solid ", ";\n      justify-content: center;\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; });
 });
 var DropzoneUploadingContainer = styled(Div)(function (_a) {
-    var _b = _a.theme, colors = _b.colors, c = _b.css;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    background: ", ";\n    border: 1px solid ", ";\n  "], ["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    background: ", ";\n    border: 1px solid ", ";\n  "])), theme.colors.blue100, theme.colors.blue500);
+    var colors = _a.theme.colors;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    background: ", ";\n    border: 1px solid ", ";\n  "], ["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    background: ", ";\n    border: 1px solid ", ";\n  "])), colors.blue100, colors.blue500);
 });
 var dropzoneUploadingUI = (_jsx(DropzoneUploadingContainer, __assign({ centered: true }, { children: _jsxs(Div, { children: [_jsx(Div, __assign({ centered: true, mb: 12 }, { children: UploadIndicatorSvg })), _jsx(Div, __assign({ h5: true }, { children: " Drop your file here to upload!" }))] }) })));
 var DragAndDropComponent = function (_a) {
     var openUploadFileDialog = _a.openUploadFileDialog;
     var t = useTranslation("upload").t;
     var manualDataImportSelected = useImporterContext().manualDataImportSelected;
-    return (_jsxs(Div, __assign({ centered: true, flexColumn: true }, { children: [_jsx(Div, __assign({ mb: 12 }, { children: DragAndDropSvg })), _jsx(Div, __assign({ h5: true }, { children: t("dropzone.title") })), _jsx(Button, __assign({ mt: 20, variant: "secondary", w: "fit-content", p: 12, isSmall: true, onClick: openUploadFileDialog }, { children: t("dropzone.button") })), _jsx(Div, __assign({ body1: true, textAlignCenter: true, m: 4, mt: 24 }, { children: t("dropzone.description") })), _jsx(Div, { children: _jsx(Button, __assign({ variant: "link", w: "fit-content", p: 12, isSmall: true, onClick: manualDataImportSelected }, { children: t("dropzone.enter_data_manually") })) })] })));
+    return (_jsxs(Div, __assign({ centered: true, flexColumn: true }, { children: [_jsx(Div, __assign({ mb: 12 }, { children: DragAndDropSvg })), _jsx(Div, __assign({ h5: true }, { children: t("dropzone.title") })), _jsx(Button, __assign({ mt: 20, variant: "secondary", w: "fit-content", p: 12, isSmall: true, onClick: openUploadFileDialog }, { children: t("dropzone.button") })), _jsx(Div, __assign({ body1: true, textAlignCenter: true, m: 4, mt: 24 }, { children: t("dropzone.description") })), _jsx(Div, { children: _jsx(Button, __assign({ "data-cy": "enter-manually", variant: "link", w: "fit-content", p: 12, isSmall: true, onClick: manualDataImportSelected }, { children: t("dropzone.enter_data_manually") })) })] })));
 };
-var ImporterDropzone = function () {
-    var _a = useUploaderContext(), setIsUploading = _a.setIsUploading, setFileName = _a.setFileName;
-    var setUploadedData = useImporterContext().setUploadedData;
+var ImporterDropzone = function (_a) {
+    var onComplete = _a.onComplete, setIsLoading = _a.setIsLoading, saveFileName = _a.saveFileName;
     var validHeadersCount = function (headersLength) {
         var headersCountLimit = 70;
         if (headersLength > headersCountLimit) {
@@ -53,78 +47,12 @@ var ImporterDropzone = function () {
             return true;
         }
     };
-    var onDrop = function (acceptedFiles) {
-        acceptedFiles.forEach(function (file) {
-            setIsUploading(true);
-            setFileName(file.name);
-            var reader = new FileReader();
-            var isCsvFile = file.type === "text/csv";
-            reader.onabort = function () { return console.log("file reading was aborted"); };
-            reader.onerror = function () { return console.log("file reading has failed"); };
-            reader.onload = function (event) {
-                var _a;
-                var results = event.target.result;
-                if (isCsvFile) {
-                    Papa.parse(results, {
-                        worker: true,
-                        complete: function (parserResults) {
-                            setUploadedData(parserResults.data);
-                            setIsUploading(false);
-                        },
-                    });
-                    return;
-                }
-                var getDataFromFile = function (fileResults) {
-                    // rounded value to 20MB
-                    var isLargeFile = file.size > 20000000;
-                    var workBook = XLSX.read(fileResults, {
-                        type: "array",
-                        codepage: 65001,
-                        raw: true,
-                        dense: isLargeFile,
-                    });
-                    var workBookName = workBook.SheetNames[0];
-                    var sheet = workBook.Sheets[workBookName];
-                    return XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false });
-                };
-                var fileData = getDataFromFile(results);
-                var headersCount = (_a = fileData[0]) === null || _a === void 0 ? void 0 : _a.length;
-                if (validHeadersCount(headersCount)) {
-                    setUploadedData(fileData);
-                }
-                setIsUploading(false);
-            };
-            if (isCsvFile) {
-                reader.readAsText(file);
-            }
-            else {
-                reader.readAsArrayBuffer(file);
-            }
-        });
-    };
-    var onDropRejected = function (rejectedFiles) {
-        var errorMessages = rejectedFiles.map(function (file) {
-            if (file.errors[0].code === "file-too-large") {
-                return "Maximum file size is 200MB";
-            }
-            else {
-                return file.errors[0].message;
-            }
-        });
-        var uniqueMessages = Array.from(new Set(errorMessages));
-        uniqueMessages.forEach(function (message) {
-            addToast(message, "error");
-        });
-    };
-    var _b = useDropzone({
-        onDrop: onDrop,
-        onDropRejected: onDropRejected,
-        noClick: true,
-        noKeyboard: true,
-        accept: ".csv, .xls, .xlsx",
-        maxFiles: 1,
-        maxSize: 200000000, // 200MB
-    }), getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, open = _b.open, isDragActive = _b.isDragActive;
+    var _b = useDragAndDrop({
+        onComplete: onComplete,
+        saveFileName: saveFileName,
+        setIsLoading: setIsLoading,
+        validHeadersCount: validHeadersCount,
+    }), getInputProps = _b.getInputProps, getRootProps = _b.getRootProps, isDragActive = _b.isDragActive, open = _b.open;
     return (_jsxs(DragAndDropCard, __assign({ isDragActive: isDragActive, centered: true, pRelative: true }, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), isDragActive && dropzoneUploadingUI, _jsx(DragAndDropComponent, { openUploadFileDialog: open })] })));
 };
 export { ImporterDropzone };

package/lib/esm/Importer/Uploader/DragAndDropImporter/index.js

@@ -15,10 +15,10 @@ import { Div } from "../../../styled/utils";
 import { closeIconWithCircle, errorIcon, fileExtensionIcon, } from "../../common/icons";
 import { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { useUploaderContext } from "../UploaderContextProvider";
-import { ImporterDropzone } from "./ImporterDropzone";
 import { useTranslation } from "react-i18next";
 import { HeaderCard } from "./ImporterSectionHeader";
 import * as S from "./DragAndDropImporter.styles";
+import { ImporterDropzone } from "./ImporterDropzone";
 export var ErrorCard = function () {
     var templateError = useImporterContext().templateError;
     var t = useTranslation("upload").t;
@@ -33,8 +33,16 @@ var LoadingCard = function () {
     return (_jsxs(S.LoadingCardWrapper, __assign({ spaceBetween: true, centered: true }, { children: [fileExtensionUI, _jsxs(Div, __assign({ mr: 30, ml: 30 }, { children: [_jsx(Div, __assign({ label2: true }, { children: fileName })), _jsx(Div, __assign({ helperText: true, c: colors.gray500 }, { children: t("loading.title") }))] })), _jsx(Div, __assign({ clickable: true, onClick: resetImport }, { children: closeIconWithCircle }))] })));
 };
 var ImporterSection = function () {
-    var _a = useImporterContext(), templateHeaders = _a.templateHeaders, templateError = _a.templateError;
-    return templateError ? (_jsx(ErrorCard, {})) : (_jsx(_Fragment, { children: templateHeaders && (_jsxs(S.ImporterSectionContainer, { children: [_jsx(ImporterDropzone, {}), _jsx(HeaderCard, { templateHeaders: templateHeaders })] })) }));
+    var _a = useImporterContext(), templateHeaders = _a.templateHeaders, templateError = _a.templateError, setUploadedData = _a.setUploadedData;
+    var _b = useUploaderContext(), setIsUploading = _b.setIsUploading, setFileName = _b.setFileName;
+    var onComplete = function (data) {
+        setUploadedData(data);
+        setIsUploading(false);
+    };
+    var saveFileName = function (fileName) {
+        setFileName(fileName);
+    };
+    return templateError ? (_jsx(ErrorCard, {})) : (_jsx(_Fragment, { children: templateHeaders && (_jsxs(S.ImporterSectionContainer, { children: [_jsx(ImporterDropzone, { onComplete: onComplete, saveFileName: saveFileName, setIsLoading: setIsUploading }), _jsx(HeaderCard, { templateHeaders: templateHeaders })] })) }));
 };
 var DragAndDropImporter = function () {
     var isUploading = useUploaderContext().isUploading;

package/lib/esm/Importer/Uploader/HeadersPreview.js

@@ -14,6 +14,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import { Div } from "../../styled/utils";
@@ -21,7 +22,6 @@ import { useReviewContext } from "../Review/ReviewContextProvider";
 import SpreadsheetBase from "../common/Spreadsheet";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
 import { HeaderButtons } from "./HeaderButtons";
-import { useEffect } from "react";
 var Spreadsheet = styled(SpreadsheetBase)(function () { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    /* rows will be removed for match and review steps */\n    .before-selected-row {\n      opacity: 0.2;\n    }\n  "], ["\n    /* rows will be removed for match and review steps */\n    .before-selected-row {\n      opacity: 0.2;\n    }\n  "]))); });
 var HeaderContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: 32px;\n\n  @media (max-width: 1050px) {\n    margin-left: 0px;\n\n    > div:first-of-type {\n      text-align: center;\n    }\n\n    div:last-of-type {\n      margin-left: 0px;\n    }\n  }\n"], ["\n  margin-left: 32px;\n\n  @media (max-width: 1050px) {\n    margin-left: 0px;\n\n    > div:first-of-type {\n      text-align: center;\n    }\n\n    div:last-of-type {\n      margin-left: 0px;\n    }\n  }\n"])));
 var DescriptionAndButtons = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  @media (max-width: 1050px) {\n    flex-direction: column;\n    gap: 16px;\n  }\n"], ["\n  @media (max-width: 1050px) {\n    flex-direction: column;\n    gap: 16px;\n  }\n"])));

package/lib/esm/Importer/common/Spreadsheet/DataSetContextProvider/index.d.ts

@@ -0,0 +1,16 @@
+import React, { MutableRefObject } from "react";
+import { Record, RecordDataSet } from "../../../../types";
+export type State = {
+    getRecord: (recordId: string) => Record;
+    setRecord: (recordId: string, record: Record) => Record;
+    deleteRecord: (recordId: string) => void;
+    dataSet: MutableRefObject<RecordDataSet>;
+    dataSetLength: MutableRefObject<number>;
+    emptyRecordIds: MutableRefObject<Set<string>>;
+};
+export declare const DataSetContext: React.Context<State>;
+export declare const DataSetContextProvider: ({ initialDataSet, children }: {
+    initialDataSet: any;
+    children: any;
+}) => JSX.Element;
+export declare const useDataSetContext: () => State;

package/lib/esm/Importer/common/Spreadsheet/DataSetContextProvider/index.js

@@ -0,0 +1,63 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, } from "react";
+import { rowIsEmpty } from "../SpreadsheetContextProvider/utils";
+export var DataSetContext = createContext({});
+export var DataSetContextProvider = function (_a) {
+    var initialDataSet = _a.initialDataSet, children = _a.children;
+    var dataSet = useRef(initialDataSet);
+    var dataSetLength = useRef(Object.keys(dataSet.current).length);
+    var emptyRecordIds = useRef(new Set());
+    var reset = function () {
+        emptyRecordIds.current = new Set();
+    };
+    useEffect(function () {
+        reset();
+        // without the hook, with the changes on where the context would
+        // live, the dataSet was not being correctly updated for the Match step
+        dataSet.current = initialDataSet;
+        dataSetLength.current = Object.keys(initialDataSet).length;
+    }, [initialDataSet]);
+    var getRecord = function (recordId) {
+        return dataSet.current[recordId];
+    };
+    var deleteRecord = function (recordId) {
+        if (dataSet.current[recordId]) {
+            dataSetLength.current -= 1;
+        }
+        delete dataSet.current[recordId];
+    };
+    var setRecord = function (recordId, record) {
+        if (!dataSet.current[recordId]) {
+            dataSetLength.current += 1;
+        }
+        if (rowIsEmpty(record)) {
+            emptyRecordIds.current.add(recordId);
+        }
+        else {
+            emptyRecordIds.current.delete(recordId);
+        }
+        dataSet.current[recordId] = record;
+        return getRecord(recordId);
+    };
+    var value = {
+        getRecord: getRecord,
+        setRecord: setRecord,
+        deleteRecord: deleteRecord,
+        dataSet: dataSet,
+        dataSetLength: dataSetLength,
+        emptyRecordIds: emptyRecordIds,
+    };
+    return (_jsx(DataSetContext.Provider, __assign({ value: value }, { children: children })));
+};
+export var useDataSetContext = function () { return useContext(DataSetContext); };

package/lib/esm/Importer/common/Spreadsheet/DuplicateDataContextProvider/index.d.ts

@@ -0,0 +1,18 @@
+import React, { MutableRefObject } from "react";
+import { DuplicateValuesCollection, Field, RecordDataSet } from "../../../../types";
+type DuplicateDataProps = {
+    fields: Field[];
+    isReadOnly: boolean;
+    children: any;
+};
+export type State = {
+    duplicateRecordIds: Set<string>;
+    duplicateValues: MutableRefObject<DuplicateValuesCollection>;
+    fieldsWithUniquenessConstraints: MutableRefObject<Field[]>;
+    calculateDuplicateRecords: () => void;
+    updateDuplicateValues: (oldRecord: RecordDataSet, newRecord: RecordDataSet, initialValidation: boolean, updateRecordAndRevalidate: (record: RecordDataSet) => void) => void;
+};
+export declare const DuplicateDataContext: React.Context<State>;
+export declare const DuplicateDataContextProvider: ({ fields, isReadOnly, children, }: DuplicateDataProps) => JSX.Element;
+export declare const useDuplicateDataContext: () => State;
+export {};

package/lib/esm/Importer/common/Spreadsheet/DuplicateDataContextProvider/index.js

@@ -0,0 +1,101 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useRef, useState, createContext, useContext, } from "react";
+import { RecordHashCalculator } from "../SpreadsheetContextProvider/hashCalculators";
+import { useDataSetContext } from "../DataSetContextProvider";
+export var DuplicateDataContext = createContext({});
+export var DuplicateDataContextProvider = function (_a) {
+    var fields = _a.fields, isReadOnly = _a.isReadOnly, children = _a.children;
+    var _b = useState(new Set()), duplicateRecordIds = _b[0], setDuplicateRecordIds = _b[1];
+    var _c = useDataSetContext(), dataSet = _c.dataSet, getRecord = _c.getRecord;
+    var duplicateValues = useRef({});
+    var fieldsWithUniquenessConstraints = useRef([]);
+    var reset = function () {
+        fieldsWithUniquenessConstraints.current = [];
+        duplicateValues.current = {};
+        setDuplicateRecordIds(new Set());
+    };
+    var calculateFieldsWithUniquenessConstraints = function () {
+        var uniqueFields = fields.filter(function (f) {
+            if (!f.validations)
+                return;
+            return (f.validations.find(function (v) {
+                return (["unique_case_sensitive", "unique_case_insensitive"].indexOf(v.validation_type) >= 0);
+            }) !== undefined);
+        });
+        fieldsWithUniquenessConstraints.current = uniqueFields;
+    };
+    var updateDuplicateValues = function (oldRecord, newRecord, initialValidation, updateRecordAndRevalidate) {
+        fieldsWithUniquenessConstraints.current.forEach(function (f) {
+            duplicateValues.current[f.name] = duplicateValues.current[f.name] || {};
+            var duplicatesForField = duplicateValues.current[f.name];
+            var isCaseInsensitive = f.validations.find(function (v) { return v.validation_type === "unique_case_insensitive"; }) !== undefined;
+            var recordId = oldRecord._meta.id;
+            var oldValue = oldRecord[f.name];
+            var newValue = newRecord[f.name];
+            if (newValue === oldValue && !initialValidation) {
+                return;
+            }
+            if (oldValue && !initialValidation) {
+                var oldValueAccessor = isCaseInsensitive
+                    ? oldValue.toLowerCase()
+                    : oldValue;
+                if (duplicatesForField[oldValueAccessor]) {
+                    var oldIndex = duplicatesForField[oldValueAccessor].indexOf(recordId);
+                    if (oldIndex >= 0) {
+                        duplicatesForField[oldValueAccessor].splice(oldIndex, 1);
+                    }
+                    if (duplicatesForField[oldValueAccessor].length === 1) {
+                        var remainingRecordId = duplicatesForField[oldValueAccessor][0];
+                        updateRecordAndRevalidate(getRecord(remainingRecordId));
+                    }
+                }
+            }
+            if (newValue) {
+                var newValueAccessor = isCaseInsensitive
+                    ? newValue.toLowerCase()
+                    : newValue;
+                duplicatesForField[newValueAccessor] =
+                    duplicatesForField[newValueAccessor] || [];
+                duplicatesForField[newValueAccessor].push(recordId);
+                if (duplicatesForField[newValueAccessor].length === 2) {
+                    var firstRecordIdToHaveValue = duplicatesForField[newValueAccessor][0];
+                    updateRecordAndRevalidate(getRecord(firstRecordIdToHaveValue));
+                }
+            }
+        });
+    };
+    var calculateDuplicateRecords = function () {
+        var computeHashesForRecords = RecordHashCalculator().computeHashesForRecords;
+        computeHashesForRecords(dataSet.current, fields, function (hashes) {
+            var duplicateIds = hashes.map(function (hash) { return hash["id"]; });
+            setDuplicateRecordIds(new Set(duplicateIds));
+        });
+    };
+    useMemo(function () {
+        if (dataSet.current && !isReadOnly) {
+            reset();
+            calculateDuplicateRecords();
+            calculateFieldsWithUniquenessConstraints();
+        }
+    }, [dataSet.current]);
+    var value = {
+        duplicateRecordIds: duplicateRecordIds,
+        duplicateValues: duplicateValues,
+        fieldsWithUniquenessConstraints: fieldsWithUniquenessConstraints,
+        calculateDuplicateRecords: calculateDuplicateRecords,
+        updateDuplicateValues: updateDuplicateValues,
+    };
+    return (_jsx(DuplicateDataContext.Provider, __assign({ value: value }, { children: children })));
+};
+export var useDuplicateDataContext = function () { return useContext(DuplicateDataContext); };

package/lib/esm/Importer/common/Spreadsheet/FilteredDataContextProvider/index.d.ts

@@ -0,0 +1,29 @@
+import React, { MutableRefObject } from "react";
+import { SpreadsheetFilter } from "../SpreadsheetContextProvider/useSpreadsheetFilter";
+import { SortBy } from "../common/types";
+export type State = {
+    filteredDataIds: string[];
+    filteredInputValue: string;
+    setFilteredInputValue: (value: string) => void;
+    sortByFieldErrors: string;
+    sortByFieldWarnings: string;
+    handleSortByFieldErrors: (field: string) => void;
+    handleSortByFieldWarnings: (field: string) => void;
+    resetSpreadsheetFilter: () => void;
+    filterRecordsByRowType: (filterByRow: string) => void;
+    filterRecordsByFieldErrors: (filterByColumn: string) => void;
+    sortBy: SortBy;
+    setSortBy: React.Dispatch<React.SetStateAction<SortBy>>;
+    spreadsheetFilter: SpreadsheetFilter;
+    isFiltering: boolean;
+    lastFilteredRecordId: MutableRefObject<string>;
+    setRecalculateFilters: React.Dispatch<React.SetStateAction<boolean>>;
+};
+type ContextArgs = {
+    getSortCompareFn: any;
+    children: any;
+};
+export declare const FilteredDataContext: React.Context<State>;
+export declare const FilteredDataContextProvider: ({ getSortCompareFn, children, }: ContextArgs) => JSX.Element;
+export declare const useFilteredDataContext: () => State;
+export {};