fuse-importer 0.27.0 → 0.30.0

package/lib/esm/Importer/Review/ReviewContextProvider.js

@@ -45,229 +45,79 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
-import Papa from "papaparse";
+import { useAppLoadingContext } from "../../common/AppLoadingContextProvider";
 import { AppLoading } from "../common/AppLoading";
-import { isRecordEmpty } from "../common/Spreadsheet/common";
-import { sendRecordsToIntegrations } from "../common/utils";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
+import { getPreviewDataSet, getReviewDataSet, getTemplateFields, } from "../data";
 import { transformToRecords } from "../data/index";
-import { getPreviewDataSet, getReviewDataSet, getTemplateFields, recordListToDataSet, } from "../data";
-import { useAppLoadingContext } from "../../common/AppLoadingContextProvider";
+import { useSubmitToServer } from "../hooks/useSubmitToServer";
 var ReviewContext = createContext({});
-var trackImportedRowsCount = function (fuseApi, templateSlug, rowCount) { return __awaiter(void 0, void 0, void 0, function () {
-    var error_1, errorMessage;
-    var _a, _b;
-    return __generator(this, function (_c) {
-        switch (_c.label) {
-            case 0:
-                _c.trys.push([0, 2, , 3]);
-                return [4 /*yield*/, fuseApi.post("/api/v1/importer/templates/".concat(templateSlug, "/imports"), {
-                        row_count: rowCount,
-                    })];
-            case 1:
-                _c.sent();
-                return [3 /*break*/, 3];
-            case 2:
-                error_1 = _c.sent();
-                errorMessage = ((_b = (_a = error_1 === null || error_1 === void 0 ? void 0 : error_1.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) ||
-                    "There was an error submitting your dataset";
-                throw new Error(errorMessage);
-            case 3: return [2 /*return*/];
-        }
-    });
-}); };
-var getImportWasSuccessful = function (response) {
-    return !response.errors || !Object.keys(response.errors).length;
-};
-var filterAndMapWithBackendErrors = function (dataSet, errors) {
-    return Object.keys(errors).map(function (rId) {
-        var record = dataSet[rId];
-        var meta = record === null || record === void 0 ? void 0 : record._meta;
-        return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { isInvalid: true, backendErrors: errors[rId] }) });
-    }, []);
-};
-function downloadCsv(data, fileName) {
-    var blob = new Blob([data], { type: "text/csv;charset=utf-8;" });
-    var link = document.createElement("a");
-    link.href = URL.createObjectURL(blob);
-    link.download = fileName;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-}
-function csvExport(data) {
-    var valuesWithQuotesWhenNecessary = data.map(function (obj) {
-        var newObj = {};
-        for (var key in obj) {
-            var value = obj[key];
-            newObj[key] =
-                typeof value === "string" && value.includes(",") ? "\"".concat(value, "\"") : value;
-        }
-        return newObj;
-    });
-    var csv = Papa.unparse(valuesWithQuotesWhenNecessary);
-    downloadCsv(csv, "export.csv");
-}
 export var ReviewContextProvider = function (_a) {
     var initialRecords = _a.initialRecords, children = _a.children;
-    var _b = useImporterContext(), templateHeaderMatchings = _b.templateHeaderMatchings, enumFieldValueMatchings = _b.enumFieldValueMatchings, templateHeaders = _b.templateHeaders, uploadedDataHeaders = _b.uploadedDataHeaders, headerRowIndex = _b.headerRowIndex, uploadedData = _b.uploadedData, currentStepIndex = _b.currentStepIndex, integrations = _b.integrations, templateSlug = _b.templateSlug, fuseApi = _b.fuseApi, setSelectedRows = _b.setSelectedRows, _c = _b.importerOptions, disableSubmitIfInvalid = _c.disableSubmitIfInvalid, batchValidationDelayMs = _c.batchValidationDelayMs, batchValidationSize = _c.batchValidationSize, previewMode = _c.previewMode, loadingComponent = _c.loadingComponent, onSubmit = _b.onSubmit, onValidateRecord = _b.onValidateRecord, formatRecord = _b.formatRecord, selectedRows = _b.selectedRows;
+    var _b = useImporterContext(), templateHeaderMatchings = _b.templateHeaderMatchings, enumFieldValueMatchings = _b.enumFieldValueMatchings, templateHeaders = _b.templateHeaders, uploadedDataHeaders = _b.uploadedDataHeaders, headerRowIndex = _b.headerRowIndex, uploadedData = _b.uploadedData, currentStepIndex = _b.currentStepIndex, setSelectedRows = _b.setSelectedRows, _c = _b.importerOptions, disableSubmitIfInvalid = _c.disableSubmitIfInvalid, batchValidationDelayMs = _c.batchValidationDelayMs, batchValidationSize = _c.batchValidationSize, loadingComponent = _c.loadingComponent, onValidateRecord = _b.onValidateRecord, formatRecord = _b.formatRecord;
+    var _d = useState(false), hasTransformedRecords = _d[0], setHasTransformedRecords = _d[1];
+    var _e = useSubmitToServer(setHasTransformedRecords), appResponse = _e.appResponse, isSubmitting = _e.isSubmitting, importWasSuccessful = _e.importWasSuccessful, onSubmitToServer = _e.onSubmitToServer;
     var setIsLoadingApp = useAppLoadingContext().setIsLoadingApp;
-    var _d = useState(false), isSubmitting = _d[0], setIsSubmitting = _d[1];
-    var _e = useState(false), isSubmitDisabled = _e[0], setIsSubmitDisabled = _e[1];
-    var _f = useState(false), importWasSuccessful = _f[0], setImportWasSuccessful = _f[1];
-    var _g = useState(null), appResponse = _g[0], setAppResponse = _g[1];
-    var _h = useState([]), previewFields = _h[0], setPreviewFields = _h[1];
-    var _j = useState(null), previewInitialDataSet = _j[0], setPreviewInitialDataSet = _j[1];
-    var _k = useState([]), reviewFields = _k[0], setReviewFields = _k[1];
-    var _l = useState(null), reviewInitialDataSet = _l[0], setReviewInitialDataSet = _l[1];
-    var _m = useState(null), initialDataSetUpdatedAt = _m[0], setInitialDataSetUpdatedAt = _m[1];
+    var _f = useState([]), previewFields = _f[0], setPreviewFields = _f[1];
+    var _g = useState(null), previewInitialDataSet = _g[0], setPreviewInitialDataSet = _g[1];
+    var _h = useState([]), reviewFields = _h[0], setReviewFields = _h[1];
+    var reviewInitialDataSet = useRef(null);
+    var _j = useState(null), initialDataSetUpdatedAt = _j[0], setInitialDataSetUpdatedAt = _j[1];
+    var _k = useState(false), _ = _k[0], setInefficientRerender = _k[1];
+    var setReviewInitialDataSetDeprecated = function (dataSet) {
+        reviewInitialDataSet.current = dataSet;
+        setInefficientRerender(function (prev) { return !prev; });
+    };
     useEffect(function () {
         if (currentStepIndex === 1)
-            setReviewInitialDataSet(null);
+            setReviewInitialDataSetDeprecated(null);
     }, [currentStepIndex]);
     var reviewDataSetRef = useRef(null);
     var options = useMemo(function () { return ({
         batchValidationDelayMs: batchValidationDelayMs,
         batchValidationSize: batchValidationSize,
     }); }, [batchValidationDelayMs, batchValidationSize]);
-    var onExport = useCallback(function (dataType) {
-        if (!reviewDataSetRef.current)
-            return;
-        var dataSet = reviewDataSetRef.current;
-        var dataSetValues = Object.values(dataSet);
-        if (dataType === "csv") {
-            var valuesWithoutMeta = dataSetValues.map(function (_a) {
-                var _meta = _a._meta, rest = __rest(_a, ["_meta"]);
-                return rest;
-            });
-            csvExport(valuesWithoutMeta);
-        }
-    }, [reviewFields, selectedRows]);
-    var onSubmitData = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var dataSet, dataSetValues, validDataSetValues, validDataSetLength, invalidRecords_1, applicationResponse, isAppResponseSuccessful, _a, errors, isDataValid, recordsToDisplayFiltered, invalidDataSet, error_2;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    _b.trys.push([0, 5, 6, 7]);
-                    if (!reviewDataSetRef.current)
-                        return [2 /*return*/];
-                    setIsSubmitting(true);
-                    dataSet = reviewDataSetRef.current;
-                    dataSetValues = Object.values(dataSet);
-                    validDataSetValues = dataSetValues.filter(function (record) {
-                        return !record._meta.isInvalid && !isRecordEmpty(record, reviewFields);
-                    });
-                    validDataSetLength = validDataSetValues.length;
-                    invalidRecords_1 = dataSetValues.filter(function (v) { return v._meta.isInvalid; });
-                    return [4 /*yield*/, onSubmit(validDataSetValues)];
-                case 1:
-                    applicationResponse = _b.sent();
-                    isAppResponseSuccessful = getImportWasSuccessful(applicationResponse);
-                    if (!isAppResponseSuccessful) {
-                        _a = (applicationResponse !== null && applicationResponse !== void 0 ? applicationResponse : {}).errors, errors = _a === void 0 ? {} : _a;
-                        invalidRecords_1 = __spreadArray(__spreadArray([], filterAndMapWithBackendErrors(dataSet, errors), true), invalidRecords_1, true);
-                    }
-                    isDataValid = invalidRecords_1.length === 0;
-                    setImportWasSuccessful(isDataValid && isAppResponseSuccessful);
-                    setAppResponse(applicationResponse);
-                    if (applicationResponse.recordsToDisplay) {
-                        recordsToDisplayFiltered = applicationResponse.recordsToDisplay.filter(function (record) {
-                            var recordId = record._meta.id;
-                            return !invalidRecords_1.some(function (invalidRecord) { return invalidRecord._meta.id === recordId; });
-                        });
-                        invalidRecords_1 = __spreadArray(__spreadArray([], invalidRecords_1, true), (recordsToDisplayFiltered || []), true);
-                    }
-                    invalidDataSet = recordListToDataSet(invalidRecords_1, reviewFields);
-                    setReviewInitialDataSet(invalidDataSet);
-                    if (!!previewMode) return [3 /*break*/, 4];
-                    return [4 /*yield*/, trackImportedRowsCount(fuseApi, templateSlug, validDataSetLength)];
-                case 2:
-                    _b.sent();
-                    return [4 /*yield*/, sendRecordsToIntegrations(dataSetValues, integrations)];
-                case 3:
-                    _b.sent();
-                    _b.label = 4;
-                case 4: return [3 /*break*/, 7];
-                case 5:
-                    error_2 = _b.sent();
-                    console.error(error_2);
-                    return [3 /*break*/, 7];
-                case 6:
-                    setIsSubmitting(false);
-                    return [7 /*endfinally*/];
-                case 7: return [2 /*return*/];
-            }
-        });
-    }); }, [reviewFields, onSubmit]);
     var onDataSetChanged = useCallback(function (dataSet) {
         reviewDataSetRef.current = dataSet;
     }, []);
-    var onValidationStateChanged = useCallback(function (state) {
-        var isInvalid = !state.isValid;
-        var isValidating = !state.isValidationCompleted;
-        var disableSubmitIfInvalidFromOption = disableSubmitIfInvalid === undefined ? true : false;
-        var isDisabled = (disableSubmitIfInvalidFromOption && isInvalid) || isValidating;
-        setIsSubmitDisabled(isDisabled);
-    }, [disableSubmitIfInvalid]);
     useEffect(function () {
         if (!uploadedData && currentStepIndex === 0) {
             //Reset data to clean the memory
             setPreviewFields([]);
-            setPreviewInitialDataSet(null);
             setReviewFields([]);
-            setReviewInitialDataSet(null);
+            setReviewInitialDataSetDeprecated(null);
             reviewDataSetRef.current = null;
             return;
         }
-        var sleep = function (n) { return new Promise(function (resolve) { return setTimeout(resolve, n); }); };
+        var sleep = function (n) {
+            return new Promise(function (resolve) { return setTimeout(resolve, n); });
+        };
         if (currentStepIndex === 0) {
-            if (!previewInitialDataSet) {
-                //Uploader spreadsheet data
-                var _a = getPreviewDataSet({ uploadedData: uploadedData }), fields = _a.fields, initialDataSet = _a.initialDataSet;
-                setPreviewFields(fields);
-                setPreviewInitialDataSet(initialDataSet);
-            }
+            //Uploader spreadsheet data
+            var _a = getPreviewDataSet({ uploadedData: uploadedData }), fields = _a.fields, initialDataSet = _a.initialDataSet;
+            setPreviewFields(fields);
+            setPreviewInitialDataSet(initialDataSet);
+            setInitialDataSetUpdatedAt(Date.now());
         }
         else if (currentStepIndex === 2) {
             setIsLoadingApp(true);
             (function () { return __awaiter(void 0, void 0, void 0, function () {
-                var fields, _records, initialDataSet;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                var generateRecords, fields, records, _a, isDatasetTransformed, initialDataSet;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
-                            if (!(uploadedData.length > 10000)) return [3 /*break*/, 2];
+                            if (!(uploadedData && uploadedData.length > 1000)) return [3 /*break*/, 2];
                             // wait for the first render to complete before blocking main thread with review step logic
                             return [4 /*yield*/, sleep(200)];
                         case 1:
                             // wait for the first render to complete before blocking main thread with review step logic
-                            _a.sent();
-                            _a.label = 2;
+                            _b.sent();
+                            _b.label = 2;
                         case 2:
-                            fields = getTemplateFields({ templateHeaders: templateHeaders });
-                            _records = initialRecords ||
-                                transformToRecords({
+                            generateRecords = function () {
+                                return transformToRecords({
                                     templateHeaderMatchings: templateHeaderMatchings,
                                     enumFieldValueMatchings: enumFieldValueMatchings,
                                     templateHeaders: templateHeaders,
@@ -275,37 +125,64 @@ export var ReviewContextProvider = function (_a) {
                                     uploadedData: uploadedData.slice(headerRowIndex + 1),
                                     formatRecord: formatRecord,
                                 });
-                            initialDataSet = getReviewDataSet({
-                                records: _records,
+                            };
+                            fields = getTemplateFields({ templateHeaders: templateHeaders });
+                            records = initialRecords !== null && initialRecords !== void 0 ? initialRecords : generateRecords();
+                            _a = getReviewDataSet({
+                                records: records,
                                 fields: fields,
-                            }).initialDataSet;
+                            }), isDatasetTransformed = _a.isDatasetTransformed, initialDataSet = _a.initialDataSet;
+                            if (isDatasetTransformed)
+                                setHasTransformedRecords(true);
                             setSelectedRows([]);
                             setReviewFields(fields);
-                            setReviewInitialDataSet(initialDataSet);
+                            setReviewInitialDataSetDeprecated(initialDataSet);
                             setInitialDataSetUpdatedAt(Date.now());
-                            setIsLoadingApp(false);
                             return [2 /*return*/];
                     }
                 });
             }); })();
         }
-    }, [uploadedData, currentStepIndex, templateHeaders, uploadedData]);
+    }, [currentStepIndex, templateHeaders, uploadedData]);
+    var onSubmit = useCallback(function (dataSet) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: 
+                // passing a callback to the onSubmit function (from hook) to get
+                // access to the functions declared inside the context provider
+                return [4 /*yield*/, onSubmitToServer(dataSet, function (invalidDataSet) {
+                        setReviewInitialDataSetDeprecated(invalidDataSet);
+                        setInitialDataSetUpdatedAt(Date.now());
+                    })];
+                case 1:
+                    // passing a callback to the onSubmit function (from hook) to get
+                    // access to the functions declared inside the context provider
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [
+        setReviewInitialDataSetDeprecated,
+        setInitialDataSetUpdatedAt,
+        onSubmitToServer,
+    ]);
     var value = {
         previewInitialDataSet: previewInitialDataSet,
         previewFields: previewFields,
-        reviewInitialDataSet: reviewInitialDataSet,
+        reviewInitialDataSet: reviewInitialDataSet.current,
         reviewFields: reviewFields,
-        isSubmitDisabled: isSubmitDisabled,
         importWasSuccessful: importWasSuccessful,
         appResponse: appResponse,
         isSubmitting: isSubmitting,
         options: options,
         initialDataSetUpdatedAt: initialDataSetUpdatedAt,
-        onSubmit: onSubmitData,
-        onExport: onExport,
+        onSubmit: onSubmit,
         onValidateRecord: onValidateRecord,
         onDataSetChanged: onDataSetChanged,
-        onValidationStateChanged: onValidationStateChanged,
+        setReviewInitialDataSetDeprecated: setReviewInitialDataSetDeprecated,
+        setInitialDataSetUpdatedAt: setInitialDataSetUpdatedAt,
+        hasTransformedRecords: hasTransformedRecords,
+        setHasTransformedRecords: setHasTransformedRecords,
     };
     function renderLoading() {
         return isSubmitting ? (loadingComponent ? (loadingComponent()) : (_jsx(AppLoading, {}))) : null;

package/lib/esm/Importer/Review/ReviewWithContext.js

@@ -23,10 +23,10 @@ import { AppResponseModal } from "./AppResponseModal";
 import { useReviewContext } from "./ReviewContextProvider";
 var TitleContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var ReviewWithContext = function () {
-    var _a = useReviewContext(), fields = _a.reviewFields, initialDataSet = _a.reviewInitialDataSet, options = _a.options, initialDataSetUpdatedAt = _a.initialDataSetUpdatedAt, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged;
+    var _a = useReviewContext(), fields = _a.reviewFields, initialDataSet = _a.reviewInitialDataSet, options = _a.options, initialDataSetUpdatedAt = _a.initialDataSetUpdatedAt, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged;
     var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows, isUsingManualImport = _b.isUsingManualImport;
     var t = useTranslation("review").t;
-    var spreadsheetUI = initialDataSet && (_jsx(Spreadsheet, { initialDataSetUpdatedAt: initialDataSetUpdatedAt, options: __assign(__assign({}, options), { showCheckboxColumn: true }), selectedRows: selectedRows, setSelectedRows: setSelectedRows, initialDataSet: initialDataSet, fields: fields, onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged }));
+    var spreadsheetUI = initialDataSet && (_jsx(Spreadsheet, { initialDataSetUpdatedAt: initialDataSetUpdatedAt, options: __assign(__assign({}, options), { showCheckboxColumn: true }), selectedRows: selectedRows, setSelectedRows: setSelectedRows, initialDataSet: initialDataSet, fields: fields, onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord }));
     return (_jsxs(Div, __assign({ centered: true, flexColumn: true, h100: true }, { children: [_jsx(AppResponseModal, {}), _jsxs(Div, __assign({ w100: true, h100: true, flexColumn: true }, { children: [_jsx(TitleContainer, __assign({ flexColumn: true, ml: 32 }, { children: _jsx(Div, __assign({ h2: true, mt: 40, mb: 40 }, { children: t(isUsingManualImport.current ? "manual_importer_title" : "title") })) })), _jsx(Div, __assign({ h100: true, w100: true, justifyCenter: true }, { children: spreadsheetUI }))] }))] })));
 };
 export default ReviewWithContext;

package/lib/esm/Importer/Stepper/StepperSubmitModal.d.ts

@@ -1,7 +1,8 @@
+import { RecordDataSet } from "../../types";
 type StepperSubmitModalProps = {
     isSubmitModalOpen: boolean;
     onCloseModal: () => void;
-    onSubmit: () => void;
+    onSubmit: (dataSet: RecordDataSet) => void;
 };
 export declare const StepperSubmitModal: ({ isSubmitModalOpen, onCloseModal, onSubmit, }: StepperSubmitModalProps) => JSX.Element;
 export {};

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

@@ -14,11 +14,13 @@ import { Div } from "../../styled";
 import { Button, Modal } from "../../common";
 import { submitIcon } from "./common/icons";
 import { useTranslation } from "react-i18next";
+import { useDataSetContext } from "../../Importer/common/Spreadsheet/DataSetContextProvider";
 export var StepperSubmitModal = function (_a) {
     var isSubmitModalOpen = _a.isSubmitModalOpen, onCloseModal = _a.onCloseModal, onSubmit = _a.onSubmit;
     var t = useTranslation("general").t;
-    return (_jsx(Modal, __assign({ isOpen: isSubmitModalOpen, onClose: function () { return onCloseModal(); } }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 60 }, { children: [_jsx(Div, { children: submitIcon }), _jsx(Div, __assign({ h5: true, mt: 20 }, { children: t("submit_modal.title") })), _jsx(Div, __assign({ body1: true, mt: 12, w: 448, textAlignCenter: true }, { children: t("submit_modal.description") })), _jsxs(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: [_jsx(Button, __assign({ w: 115, variant: "secondary", mr: 10, onClick: function () { return onCloseModal(); }, "data-test-id": "submit-modal-go-back" }, { children: t("submit_modal.cancel") })), _jsx(Button, __assign({ w: 140, ml: 10, onClick: function () {
-                                onSubmit();
+    var dataSet = useDataSetContext().dataSet;
+    return (_jsx(Modal, __assign({ isOpen: isSubmitModalOpen, onClose: function () { return onCloseModal(); } }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 60 }, { children: [_jsx(Div, { children: submitIcon }), _jsx(Div, __assign({ h5: true, mt: 20, "data-cy": "submit-modal-title" }, { children: t("submit_modal.title") })), _jsx(Div, __assign({ body1: true, mt: 12, w: 448, textAlignCenter: true, "data-cy": "submit-modal-description" }, { children: t("submit_modal.description") })), _jsxs(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: [_jsx(Button, __assign({ w: 115, variant: "secondary", mr: 10, onClick: function () { return onCloseModal(); }, "data-test-id": "submit-modal-go-back" }, { children: t("submit_modal.cancel") })), _jsx(Button, __assign({ "data-cy": "yes-submit", w: 140, ml: 10, onClick: function () {
+                                onSubmit(dataSet === null || dataSet === void 0 ? void 0 : dataSet.current);
                                 onCloseModal();
                             } }, { children: t("submit_modal.submit") }))] }))] })) })));
 };

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

@@ -27,5 +27,5 @@ export var UnmatchedHeadersModal = function (_a) {
                         })
                         : t("unmatched_headers_modal.description_plural", {
                             count: unmatchedHeadersCount,
-                        }) })), _jsxs(Div, __assign({ dflex: true, centered: true, mt: 40 }, { children: [_jsx(Button, __assign({ variant: "secondary", onClick: function () { return onCloseUnmatchedHeadersModal(); }, w: 160, mr: 16 }, { children: t("unmatched_headers_modal.assign_headers") })), _jsx(Button, __assign({ variant: "primary", onClick: skipStep }, { children: t("unmatched_headers_modal.skip") }))] }))] })) })));
+                        }) })), _jsxs(Div, __assign({ dflex: true, centered: true, mt: 40 }, { children: [_jsx(Button, __assign({ variant: "secondary", onClick: function () { return onCloseUnmatchedHeadersModal(); }, w: 160, mr: 16 }, { children: t("unmatched_headers_modal.assign_headers") })), _jsx(Button, __assign({ "data-cy": "skip", variant: "primary", onClick: skipStep }, { children: t("unmatched_headers_modal.skip") }))] }))] })) })));
 };

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

@@ -14,10 +14,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } 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";
@@ -26,7 +28,7 @@ import { ConfirmCloseModal } from "./ConfirmCloseModal";
 import { Step } from "./Step";
 import { StepperSubmitModal } from "./StepperSubmitModal";
 import { UnmatchedHeadersModal } from "./UnmatchedHeadersModal";
-import { getEnumFieldValueMatchingsInitialValue } from "./common/getEnumFieldValueMatchingsInitialValue";
+import { useDataSetContext } from "../common/Spreadsheet/DataSetContextProvider";
 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"])));
@@ -43,21 +45,42 @@ 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 _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;
+    var _e = useDataSetContext(), dataSetLength = _e.dataSetLength, emptyRecordIds = _e.emptyRecordIds;
+    var _f = useState(true), isSubmitDisabled = _f[0], setIsSubmitDisabled = _f[1];
+    var headerMappingsLoaded = useImporterContext().headerMappingsLoaded;
+    var _g = useReviewContext(), appResponse = _g.appResponse, onSubmit = _g.onSubmit;
+    var _h = useValidationContext(), totalErrorCount = _h.totalErrorCount, spreadsheetInitialized = _h.spreadsheetInitialized;
+    var _j = useEventManagerContext(), on = _j.on, off = _j.off, EVENTS = _j.EVENTS;
+    var updateSpreadsheetDisabled = function () {
+        var isSpreadsheetEmpty = dataSetLength.current === emptyRecordIds.current.size;
+        var isDisabled = totalErrorCount.current > 0 ||
+            !spreadsheetInitialized ||
+            isSpreadsheetEmpty;
+        setIsSubmitDisabled(isDisabled);
+    };
+    useEffect(function () {
+        on(EVENTS.UPDATE_TOTAL_ERROR_COUNT, updateSpreadsheetDisabled);
+        return function () {
+            off(EVENTS.UPDATE_TOTAL_ERROR_COUNT, updateSpreadsheetDisabled);
+        };
+    }, [appResponse, spreadsheetInitialized]);
+    useEffect(function () {
+        updateSpreadsheetDisabled();
+    }, [spreadsheetInitialized]);
+    var _k = useImporterContext(), initialRecords = _k.initialRecords, currentStepIndex = _k.currentStepIndex, templateHeaderMatchings = _k.templateHeaderMatchings, matcherSubstep = _k.matcherSubstep, templateHeaders = _k.templateHeaders, setMatcherSubstep = _k.setMatcherSubstep, setCurrentStepIndex = _k.setCurrentStepIndex, onClose = _k.onClose, isUsingManualImport = _k.isUsingManualImport, resetImporterWhenUsingManualImport = _k.resetImporterWhenUsingManualImport, uploadedData = _k.uploadedData;
+    var _l = useState(true), isContinueDisabled = _l[0], setIsContinueDisabled = _l[1];
     var templateHeaderLabels = Object.keys(templateHeaderMatchings || []);
     var unmatchedHeadersCount = templateHeaderLabels.filter(function (templateHeaderLabel) { return !templateHeaderMatchings[templateHeaderLabel]; }).length;
     var isLastSubMatchStep = matcherSubstep === 1;
+    useEffect(function () {
+        setIsContinueDisabled(currentStepIndex === 1 && !headerMappingsLoaded);
+    }, [currentStepIndex, headerMappingsLoaded]);
     var setStep = function () {
-        var templateHasEnumFields = !!(templateHeaders === null || templateHeaders === void 0 ? void 0 : templateHeaders.find(function (header) { return header.column_type === ColumnType.enum; }));
+        var templateEnumFields = templateHeaders === null || templateHeaders === void 0 ? void 0 : templateHeaders.filter(function (header) { return header.column_type === ColumnType.enum; });
+        var templateHasEnumFields = !!(templateEnumFields === null || templateEnumFields === void 0 ? void 0 : templateEnumFields.length);
         if (templateHasEnumFields) {
-            var _enumFieldValueMatchings = getEnumFieldValueMatchingsInitialValue({
-                uploadedDataEnumFieldValues: uploadedDataEnumFieldValues,
-                templateHeaders: templateHeaders,
-            });
-            var anyTemplateEnumFieldsMatched = Object.keys(_enumFieldValueMatchings).length > 0;
-            if (anyTemplateEnumFieldsMatched) {
-                setEnumFieldValueMatchings(_enumFieldValueMatchings);
+            var templateEnumFieldsWithHeaderMatchings = templateEnumFields.filter(function (header) { return !!templateHeaderMatchings[header.label]; });
+            if (templateEnumFieldsWithHeaderMatchings.length > 0) {
                 setMatcherSubstep(1);
             }
             else {
@@ -110,7 +133,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", isDisabled: isContinueDisabled, 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,36 +14,31 @@ 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 { 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 = 60;
+        var headersCountLimit = 70;
         if (headersLength > headersCountLimit) {
             addToast("File cannot contain more than ".concat(headersCountLimit, " columns"), "error");
             return false;
@@ -52,56 +47,12 @@ var ImporterDropzone = function () {
             return true;
         }
     };
-    var onDrop = function (acceptedFiles) {
-        acceptedFiles.forEach(function (file) {
-            setIsUploading(true);
-            setFileName(file.name);
-            var reader = new FileReader();
-            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;
-                var getDataFromFile = function (fileResults) {
-                    var csvString = new TextDecoder().decode(fileResults instanceof ArrayBuffer
-                        ? fileResults
-                        : new TextEncoder().encode(fileResults));
-                    var data = Papa.parse(csvString).data;
-                    return data;
-                };
-                var fileData = getDataFromFile(results);
-                var headersCount = (_a = fileData[0]) === null || _a === void 0 ? void 0 : _a.length;
-                if (validHeadersCount(headersCount)) {
-                    setUploadedData(fileData);
-                }
-                setIsUploading(false);
-            };
-            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",
-        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/ImporterSectionHeader/index.js

@@ -28,7 +28,7 @@ var HeadersList = function (_a) {
     var title = _a.title, headers = _a.headers, props = __rest(_a, ["title", "headers"]);
     return (_jsxs(_Fragment, { children: [_jsx(Div, __assign({ label3: true }, props, { children: title })), headers.map(function (header, index) {
                 var isLast = index === headers.length - 1;
-                return (_jsx(S.HeaderListItem, __assign({ body1: true, isLast: isLast, mt: 16 }, { children: header }), index));
+                return (_jsx(S.HeaderListItem, __assign({ body1: true, "data-cy": header, isLast: isLast, mt: 16 }, { children: header }), index));
             })] }));
 };
 export var HeaderCard = function (_a) {
@@ -40,5 +40,5 @@ export var HeaderCard = function (_a) {
         .filter(function (h) { return !h.required; })
         .map(function (h) { return h.label; });
     var t = useTranslation("upload").t;
-    return (_jsx(S.HeaderCardWrapper, { children: _jsxs(S.HeaderCardContainer, __assign({}, props, { children: [_jsx(Div, __assign({ body3: true, mb: 24 }, { children: t("header.title") })), requiredHeaders.length > 0 && (_jsx(HeadersList, { title: t("header.required_headers"), headers: requiredHeaders })), optionalHeaders.length > 0 && (_jsx(HeadersList, { title: t("header.optional_headers"), headers: optionalHeaders, mt: 30 }))] })) }));
+    return (_jsx(S.HeaderCardWrapper, { children: _jsxs(S.HeaderCardContainer, __assign({}, props, { children: [_jsx(Div, __assign({ "data-cy": "header_title", body3: true, mb: 24 }, { children: t("header.title") })), requiredHeaders.length > 0 && (_jsx(HeadersList, { "data-cy": "required_header", title: t("header.required_headers"), headers: requiredHeaders })), optionalHeaders.length > 0 && (_jsx(HeadersList, { "data-cy": "optional_header", title: t("header.optional_headers"), headers: optionalHeaders, mt: 30 }))] })) }));
 };