fuse-importer 0.1.2-testing → 0.1.4-testing

package/lib/esm/Importer/ImporterWithContext.d.ts

@@ -1,6 +1,8 @@
 type LayoutProps = {
     zIndex: number;
+    isModal?: boolean;
 };
 export declare const Layout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../styled").CSSProps & LayoutProps, never>;
+export declare const Backdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ImporterWithContext: () => JSX.Element;
 export {};

package/lib/esm/Importer/ImporterWithContext.js

@@ -32,17 +32,21 @@ import { Footer } from "./common/Footer";
 import { GlobalStyle } from "./common/GlobalStyle";
 import { ImporterFonts } from "./common/ImporterFonts";
 import { useImporterContext } from "./contexts/ImporterContextProvider";
-import { AppLoadingContextProvider } from "../common/AppLoadingContextProvider";
-export var Layout = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  left: 0;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: ", ";\n  ", ";\n"], ["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  left: 0;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  z-index: ", ";\n  ", ";\n"])), function (_a) {
+import { AppLoadingContextProvider, } from "../common/AppLoadingContextProvider";
+export var Layout = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  z-index: ", ";\n  ", ";\n  ", "\n"], ["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  z-index: ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.backgroundInterface;
-}, function (p) { return p.zIndex; }, function (p) { return p.theme.css.scrollbarDark; });
-var Content = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+}, function (p) { return p.zIndex; }, function (p) { return p.theme.css.scrollbarDark; }, function (p) {
+    return p.isModal
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          top: 27px;\n          bottom: 27px;\n          left: 29px;\n          right: 29px;\n          border-radius: 4px;\n          overflow: hidden;\n        "], ["\n          top: 27px;\n          bottom: 27px;\n          left: 29px;\n          right: 29px;\n          border-radius: 4px;\n          overflow: hidden;\n        "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          height: 100vh;\n          width: 100vw;\n          top: 0;\n          left: 0;\n          overflow-y: auto;\n        "], ["\n          height: 100vh;\n          width: 100vw;\n          top: 0;\n          left: 0;\n          overflow-y: auto;\n        "])));
+});
+export var Backdrop = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: rgba(0, 0, 0, 0.75); // Opaque black\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: -1;\n"], ["\n  background: rgba(0, 0, 0, 0.75); // Opaque black\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: -1;\n"])));
+var Content = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var colors = _a.theme.colors, inTrialMode = _a.inTrialMode;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    flex: ", ";\n  "], ["\n    background-color: ", ";\n    flex: ", ";\n  "])), colors.backgroundInterface, inTrialMode ? "none" : 1);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    flex: ", ";\n  "], ["\n    background-color: ", ";\n    flex: ", ";\n  "])), colors.backgroundInterface, inTrialMode ? "none" : 1);
 });
 export var ImporterWithContext = function () {
-    var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, templateHeaders = _a.templateHeaders, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, initialRecords = _a.initialRecords, _b = _a.importerOptions, zIndex = _b.zIndex, previewMode = _b.previewMode;
+    var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, templateHeaders = _a.templateHeaders, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, initialRecords = _a.initialRecords, _b = _a.importerOptions, zIndex = _b.zIndex, previewMode = _b.previewMode, isModal = _b.modal;
     var layoutRef = useRef(null);
     var t = useTranslation().t;
     useEffect(function () {
@@ -58,6 +62,6 @@ export var ImporterWithContext = function () {
         return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [previewMode && _jsx(PreviewModeBanner, {}), !previewMode && _jsx(TrialModeBanner, {}), _jsx(Stepper, { stepLabels: stepLabels, logoURL: logoURL })] }), _jsxs(Content, { children: [currentStepIndex === 0 && _jsx(Uploader, {}), currentStepIndex === 1 && _jsx(Matcher, {}), currentStepIndex === 2 && templateHeaders && _jsx(Review, {})] }), inTrialMode && (_jsx(Content, __assign({ inTrialMode: inTrialMode }, { children: _jsx(Footer, {}) })))] }));
     }
     var shouldShowPreviewFirstTime = previewFirstTime && previewMode;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(AppLoadingContextProvider, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), templateHeaders ? (_jsx(ReviewContextProvider, __assign({ initialRecords: initialRecords }, { children: _jsx(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: shouldShowPreviewFirstTime ? (_jsx(PreviewFirstTime, {})) : (renderContent()) })) }))) : (_jsx(AppLoading, {}))] }) })));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(AppLoadingContextProvider, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), templateHeaders ? (_jsx(ReviewContextProvider, __assign({ initialRecords: initialRecords }, { children: _jsxs(_Fragment, { children: [isModal && _jsx(Backdrop, {}), _jsx(Layout, __assign({ zIndex: zIndex, ref: layoutRef, isModal: isModal }, { children: shouldShowPreviewFirstTime ? (_jsx(PreviewFirstTime, {})) : (renderContent()) }))] }) }))) : (_jsx(AppLoading, {}))] }) })));
 };
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -1,22 +1,11 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import styled, { css } from "styled-components";
-import { Div } from "../../styled/utils";
 import { useImporterContext } from "../contexts/ImporterContextProvider";
 import { HeaderMatcher } from "./HeaderMatcher";
 import { EnumFieldsMatchers } from "./EnumFieldsMatchers";
 import { areEqual } from "react-window";
-var Dot = styled(Div)(function (_a) {
-    var colors = _a.theme.colors, isSelected = _a.isSelected;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    height: 8px;\n    width: 8px;\n    border-radius: 100%;\n    background: ", ";\n    ", "\n  "], ["\n    height: 8px;\n    width: 8px;\n    border-radius: 100%;\n    background: ", ";\n    ", "\n  "])), colors.outlineInputs, isSelected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 12px;\n      width: 12px;\n      background: ", ";\n    "], ["\n      height: 12px;\n      width: 12px;\n      background: ", ";\n    "])), colors.highlight01));
-});
 var Matcher = function () {
     var matcherSubstep = useImporterContext().matcherSubstep;
     return (_jsxs(_Fragment, { children: [matcherSubstep === 0 && _jsx(HeaderMatcher, {}), matcherSubstep === 1 && _jsx(EnumFieldsMatchers, {})] }));
 };
 export default React.memo(Matcher, areEqual);
-var templateObject_1, templateObject_2;

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

@@ -71,7 +71,7 @@ import Papa from "papaparse";
 import { AppLoading } from "../common/AppLoading";
 import { isRecordEmpty } from "../common/Spreadsheet/common";
 import { sendRecordsToIntegrations } from "../common/utils";
-import { useImporterContext } from "../contexts/ImporterContextProvider";
+import { useImporterContext, } from "../contexts/ImporterContextProvider";
 import { transformToRecords } from "../data/index";
 import { getPreviewDataSet, getReviewDataSet, getTemplateFields, recordListToDataSet, } from "../data";
 import { useAppLoadingContext } from "../../common/AppLoadingContextProvider";
@@ -98,6 +98,41 @@ var trackImportedRowsCount = function (fuseApi, templateSlug, rowCount) { return
         }
     });
 }); };
+var buildColumnMappingsFromHeaderMatchings = function (templateHeaders, templateHeaderMatchings, columnMappingsAttributes) {
+    return templateHeaders.map(function (column) {
+        var existingMatching = columnMappingsAttributes.find(function (matching) {
+            return matching.template_column_name === column.label &&
+                matching.matched_column_name === templateHeaderMatchings[column.label];
+        });
+        var mappedColumn = {
+            matched_column_name: templateHeaderMatchings[column.label],
+            template_column_name: column.label,
+        };
+        if (existingMatching) {
+            mappedColumn.id = existingMatching.id;
+        }
+        return mappedColumn;
+    });
+};
+var saveMappedColumns = function (columnMappings, fuseApi, templateSlug) { return __awaiter(void 0, void 0, void 0, function () {
+    var error_2;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 2, , 3]);
+                return [4 /*yield*/, fuseApi.patch("/api/v1/templates/".concat(templateSlug), {
+                        column_mappings_attributes: columnMappings,
+                    })];
+            case 1:
+                _a.sent();
+                return [3 /*break*/, 3];
+            case 2:
+                error_2 = _a.sent();
+                throw new Error("There was an error trying to save column mappings");
+            case 3: return [2 /*return*/];
+        }
+    });
+}); };
 var getImportWasSuccessful = function (response) {
     return !response.errors || !Object.keys(response.errors).length;
 };
@@ -132,7 +167,7 @@ function csvExport(data) {
 }
 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, 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, columnMappingsAttributes = _b.columnMappingsAttributes;
     var setIsLoadingApp = useAppLoadingContext().setIsLoadingApp;
     var _d = useState(false), isSubmitting = _d[0], setIsSubmitting = _d[1];
     var _e = useState(false), isSubmitDisabled = _e[0], setIsSubmitDisabled = _e[1];
@@ -166,11 +201,11 @@ export var ReviewContextProvider = function (_a) {
         }
     }, [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;
+        var dataSet, dataSetValues, validDataSetValues, validDataSetLength, invalidRecords_1, applicationResponse, isAppResponseSuccessful, _a, errors, isDataValid, recordsToDisplayFiltered, invalidDataSet, columnMappings, error_3;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    _b.trys.push([0, 5, 6, 7]);
+                    _b.trys.push([0, 6, 7, 8]);
                     if (!reviewDataSetRef.current)
                         return [2 /*return*/];
                     setIsSubmitting(true);
@@ -202,23 +237,27 @@ export var ReviewContextProvider = function (_a) {
                     invalidDataSet = recordListToDataSet(invalidRecords_1, reviewFields);
                     setReviewInitialDataSet(invalidDataSet);
                     setInitialDataSetUpdatedAt(Date.now());
-                    if (!!previewMode) return [3 /*break*/, 4];
+                    if (!!previewMode) return [3 /*break*/, 5];
                     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];
+                    columnMappings = buildColumnMappingsFromHeaderMatchings(templateHeaders, templateHeaderMatchings, columnMappingsAttributes);
+                    return [4 /*yield*/, saveMappedColumns(columnMappings, fuseApi, templateSlug)];
+                case 4:
+                    _b.sent();
+                    _b.label = 5;
+                case 5: return [3 /*break*/, 8];
                 case 6:
+                    error_3 = _b.sent();
+                    console.error(error_3);
+                    return [3 /*break*/, 8];
+                case 7:
                     setIsSubmitting(false);
                     return [7 /*endfinally*/];
-                case 7: return [2 /*return*/];
+                case 8: return [2 /*return*/];
             }
         });
     }); }, [reviewFields, onSubmit]);
@@ -242,7 +281,9 @@ export var ReviewContextProvider = function (_a) {
             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
@@ -292,7 +333,7 @@ export var ReviewContextProvider = function (_a) {
                 });
             }); })();
         }
-    }, [uploadedData, currentStepIndex, templateHeaders, uploadedData]);
+    }, [currentStepIndex, templateHeaders, uploadedData]);
     var value = {
         previewInitialDataSet: previewInitialDataSet,
         previewFields: previewFields,

package/lib/esm/Importer/Stepper/common/getEnumFieldValueMatchingsInitialValue.js

@@ -10,7 +10,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import Fuse from "fuse.js";
-import { fusejsOptions, } from "../../contexts/ImporterContextProvider";
+var fusejsOptions = {
+    includeScore: true,
+    threshold: 0.35,
+};
 export var getEnumFieldValueMatchingsInitialValue = function (_a) {
     var uploadedDataEnumFieldValues = _a.uploadedDataEnumFieldValues, templateHeaders = _a.templateHeaders;
     var res = {};
@@ -18,11 +21,11 @@ export var getEnumFieldValueMatchingsInitialValue = function (_a) {
         uploadedDataEnumFieldValues[templateLabel].forEach(function (uploadedValue, _index) {
             var _a, _b;
             var templateOptions = (_a = templateHeaders.find(function (th) { return th.label === templateLabel; })) === null || _a === void 0 ? void 0 : _a.values;
-            var fuse = new Fuse(templateOptions, fusejsOptions);
-            var fuseResults = fuse.search(uploadedValue);
+            var fuzzySearch = new Fuse(templateOptions, fusejsOptions);
+            var fuzzySearchResults = fuzzySearch.search(uploadedValue);
             var previousRes = __assign({}, (res[templateLabel] || {}));
             res[templateLabel] = previousRes;
-            res[templateLabel][uploadedValue] = (_b = fuseResults[0]) === null || _b === void 0 ? void 0 : _b.item;
+            res[templateLabel][uploadedValue] = (_b = fuzzySearchResults[0]) === null || _b === void 0 ? void 0 : _b.item;
         });
     };
     var templateLabels = Object.keys(uploadedDataEnumFieldValues);

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

@@ -13,8 +13,44 @@ 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 } from "react";
+import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import { Button, ChevronRightIcon, closeIconCondensed } from "../../common";
@@ -27,6 +63,7 @@ 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"])));
@@ -43,8 +80,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;
+    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;
+    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 templateHeaderLabels = Object.keys(templateHeaderMatchings || []);
     var unmatchedHeadersCount = templateHeaderLabels.filter(function (templateHeaderLabel) { return !templateHeaderMatchings[templateHeaderLabel]; }).length;
     var isLastSubMatchStep = matcherSubstep === 1;

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

@@ -58,22 +58,25 @@ var ImporterDropzone = function () {
             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;
-                var isCsvFile = file.type === "text/csv";
-                // rounded value to 20MB
-                var isLargeFile = file.size > 20000000;
+                if (isCsvFile) {
+                    Papa.parse(results, {
+                        worker: true,
+                        complete: function (parserResults) {
+                            setUploadedData(parserResults.data);
+                            setIsUploading(false);
+                        },
+                    });
+                    return;
+                }
                 var getDataFromFile = function (fileResults) {
-                    if (isCsvFile) {
-                        var csvString = new TextDecoder().decode(fileResults instanceof ArrayBuffer
-                            ? fileResults
-                            : new TextEncoder().encode(fileResults));
-                        var data = Papa.parse(csvString).data;
-                        return data;
-                    }
+                    // rounded value to 20MB
+                    var isLargeFile = file.size > 20000000;
                     var workBook = XLSX.read(fileResults, {
                         type: "array",
                         codepage: 65001,
@@ -91,7 +94,12 @@ var ImporterDropzone = function () {
                 }
                 setIsUploading(false);
             };
-            reader.readAsArrayBuffer(file);
+            if (isCsvFile) {
+                reader.readAsText(file);
+            }
+            else {
+                reader.readAsArrayBuffer(file);
+            }
         });
     };
     var onDropRejected = function (rejectedFiles) {

package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/filterMethods.js

@@ -1,3 +1,4 @@
+import { rowIsEmpty } from "./utils";
 //Filter records by search value
 export var filterRecordsBySearchValue = function (obj, value) {
     var isObject = function (value) {
@@ -28,18 +29,10 @@ export var filterRecordsBySearchValue = function (obj, value) {
 };
 export var filterRecordsByType = function (obj, filterType) {
     var _a, _b;
-    var rowIsEmpty = function (row) {
-        return Object.keys(row).every(function (key) {
-            if (key === "_meta")
-                return true;
-            return !row[key];
-        });
-    };
     var filteredObj = {};
     for (var key in obj) {
         if (filterType === "all" ||
-            (((_b = (_a = obj[key]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.isInvalid) !== (filterType === "valid") &&
-                !rowIsEmpty(obj[key]))) {
+            (((_b = (_a = obj[key]) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.isInvalid) && !rowIsEmpty(obj[key]))) {
             filteredObj[key] = obj[key];
         }
     }

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { SpreadsheetOptions } from "../../../..";
-import { BatchValidationErrors, Field, Record, RecordDataSet } from "../../../../types";
+import { BatchValidationErrors, DuplicateRecords, Field, Record, RecordDataSet } from "../../../../types";
 import { SortBy, SpreadsheetProps } from "../common/types";
 import { ValidationState } from "../hooks";
 import { SpreadsheetFilter } from "./useSpreadsheetFilter";
@@ -9,7 +9,6 @@ export type OnValidationStateChanged = (state: ValidationState) => void;
 type State = {
     data: Record[];
     fields: Field[];
-    isLoading: boolean;
     isReadOnly?: boolean;
     errors: BatchValidationErrors;
     warnings: BatchValidationErrors;
@@ -17,7 +16,6 @@ type State = {
     sortByFieldErrors: string;
     sortByFieldWarnings: string;
     updateRecord: (record: Record) => void;
-    setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
     setSortByFieldErrors: React.Dispatch<React.SetStateAction<string>>;
     selectedRows: string[];
     setSelectedRows: React.Dispatch<React.SetStateAction<string[]>>;
@@ -39,6 +37,7 @@ type State = {
     setSortBy: React.Dispatch<React.SetStateAction<SortBy>>;
     setIsTransformTooltipOpened: React.Dispatch<React.SetStateAction<boolean>>;
     isTransformTooltipOpened: boolean;
+    duplicateRecords: DuplicateRecords;
 } & ValidationState;
 type Props = SpreadsheetProps & {
     children: JSX.Element;

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

@@ -27,7 +27,7 @@ import { addMeta } from "../../../data";
 import { useValidationState } from "../hooks";
 import { useSpreadsheetFilter, } from "./useSpreadsheetFilter";
 import { filterRecordsByType, filterRecordsByError, filterRecordsBySearchValue, } from "./filterMethods";
-import { hasValueInAnyField } from "./utils";
+import { hasValueInAnyField, rowIsEmpty } from "./utils";
 var getDefaultSortCompareFn = function (sortBy) {
     return function (a, b) {
         var aField = get(a, sortBy.field);
@@ -47,24 +47,22 @@ var SpreadsheetContext = createContext({});
 export var SpreadsheetContextProvider = function (_a) {
     var initialDataSet = _a.initialDataSet, fields = _a.fields, options = _a.options, isReadOnly = _a.isReadOnly, children = _a.children, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows, _b = _a.getSortCompareFn, getSortCompareFn = _b === void 0 ? getDefaultSortCompareFn : _b;
     var _c = useState(initialDataSet), dataSet = _c[0], setDataSet = _c[1];
-    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
-    var _e = useState(null), sortByFieldErrors = _e[0], setSortByFieldErrors = _e[1];
-    var _f = useState(null), sortByFieldWarnings = _f[0], setSortByFieldWarnings = _f[1];
-    var _g = useState(""), filteredInputValue = _g[0], setFilteredInputValue = _g[1];
-    var _h = useState(null), sortBy = _h[0], setSortBy = _h[1];
+    var _d = useState(null), sortByFieldErrors = _d[0], setSortByFieldErrors = _d[1];
+    var _e = useState(null), sortByFieldWarnings = _e[0], setSortByFieldWarnings = _e[1];
+    var _f = useState(""), filteredInputValue = _f[0], setFilteredInputValue = _f[1];
+    var _g = useState(null), sortBy = _g[0], setSortBy = _g[1];
     var addRowTimeoutRef = useRef(null);
-    var _j = useState(false), isTransformTooltipOpened = _j[0], setIsTransformTooltipOpened = _j[1];
-    var _k = useSpreadsheetFilter(), spreadsheetFilter = _k.spreadsheetFilter, filterRecordsByRowType = _k.filterRecordsByRowType, filterRecordsByFieldErrors = _k.filterRecordsByFieldErrors, resetSpreadsheetFilter = _k.resetSpreadsheetFilter;
-    var _l = useValidationState({
+    var _h = useState(false), isTransformTooltipOpened = _h[0], setIsTransformTooltipOpened = _h[1];
+    var _j = useSpreadsheetFilter(), spreadsheetFilter = _j.spreadsheetFilter, filterRecordsByRowType = _j.filterRecordsByRowType, filterRecordsByFieldErrors = _j.filterRecordsByFieldErrors, resetSpreadsheetFilter = _j.resetSpreadsheetFilter;
+    var _k = useValidationState({
         dataSet: dataSet,
         initialDataSet: initialDataSet,
         fields: fields,
         options: options,
         isReadOnly: isReadOnly,
         setDataSet: setDataSet,
-        setIsLoading: setIsLoading,
         onValidateRecord: onValidateRecord,
-    }), updateRecordAndRevalidate = _l.updateRecordAndRevalidate, deleteRecords = _l.deleteRecords, warnings = _l.warnings, errors = _l.errors, validationState = __rest(_l, ["updateRecordAndRevalidate", "deleteRecords", "warnings", "errors"]);
+    }), updateRecordAndRevalidate = _k.updateRecordAndRevalidate, deleteRecords = _k.deleteRecords, warnings = _k.warnings, errors = _k.errors, validationState = __rest(_k, ["updateRecordAndRevalidate", "deleteRecords", "warnings", "errors"]);
     var addNewRowsToSpreadsheet = function () {
         addRowTimeoutRef.current = setTimeout(function () {
             var _a, _b;
@@ -83,10 +81,62 @@ export var SpreadsheetContextProvider = function (_a) {
     var handleDeleteErrors = function (selectedRows) {
         deleteRecords(selectedRows, errors, warnings);
     };
+    var duplicateRecords = useMemo(function () {
+        if (isReadOnly)
+            return { records: {}, count: 0 };
+        var uniqueRecords = new Map();
+        var duplicateGroups = [];
+        var _loop_1 = function (recordKey) {
+            if (Object.prototype.hasOwnProperty.call(dataSet, recordKey)) {
+                var record_1 = dataSet[recordKey];
+                if (rowIsEmpty(record_1))
+                    return "continue";
+                var key = fields.map(function (field) { return record_1[field.name]; }).join("|");
+                if (uniqueRecords.has(key)) {
+                    var saved_1 = uniqueRecords.get(key);
+                    var existingGroup = duplicateGroups.find(function (group) {
+                        return group.some(function (item) { return item._meta.id === saved_1._meta.id; });
+                    });
+                    if (existingGroup) {
+                        existingGroup.push(record_1);
+                    }
+                    else {
+                        duplicateGroups.push([saved_1, record_1]);
+                    }
+                }
+                else {
+                    uniqueRecords.set(key, record_1);
+                }
+            }
+        };
+        for (var recordKey in dataSet) {
+            _loop_1(recordKey);
+        }
+        var count = duplicateGroups.length;
+        var records = {};
+        for (var i = 0; i < duplicateGroups.length; i++) {
+            var group = duplicateGroups[i];
+            for (var j = 0; j < group.length; j++) {
+                var record = group[j];
+                records[record._meta.id] = __assign({}, record);
+            }
+        }
+        return { records: records, count: count };
+    }, [dataSet]);
     var dataSnapshot = useMemo(function () {
-        var filteredData = spreadsheetFilter.type === "rowBased"
-            ? filterRecordsByType(dataSet, spreadsheetFilter.byRow)
-            : filterRecordsByError(dataSet, spreadsheetFilter.byColumn.field, errors);
+        var filteredData = dataSet;
+        switch (spreadsheetFilter.type) {
+            case "rowBased":
+                if (spreadsheetFilter.byRow === "duplicates") {
+                    filteredData = duplicateRecords.records;
+                    break;
+                }
+                filteredData = filterRecordsByType(dataSet, spreadsheetFilter.byRow);
+                break;
+            case "columnBased":
+                filteredData = filterRecordsByError(dataSet, spreadsheetFilter.byColumn.field, errors);
+                break;
+        }
         var filteredDatasetByString = filteredInputValue
             ? filterRecordsBySearchValue(filteredData, filteredInputValue)
             : filteredData;
@@ -109,6 +159,7 @@ export var SpreadsheetContextProvider = function (_a) {
         spreadsheetFilter,
         sortBy,
         Object.keys(dataSet).length,
+        duplicateRecords.count,
         sortByFieldErrors,
         sortByFieldWarnings,
     ]);
@@ -170,7 +221,7 @@ export var SpreadsheetContextProvider = function (_a) {
             return updatedData;
         });
     }, [dataSet, dataSnapshot]);
-    var value = __assign(__assign({ data: updatedDataSnapshot, fields: fields, isLoading: isLoading }, validationState), { isReadOnly: isReadOnly, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, options: options, recordsWithValuesCount: recordsWithValuesCount, filteredDataCount: filteredDataCount, sortBy: sortBy, warnings: warnings, errors: errors, setIsLoading: setIsLoading, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: handleDeleteErrors, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet, spreadsheetFilter: spreadsheetFilter, resetSpreadsheetFilter: resetSpreadsheetFilter, filterRecordsByRowType: filterRecordsByRowType, filterRecordsByFieldErrors: filterRecordsByFieldErrors, checkboxColumnWidth: checkboxColumnWidth, setSortBy: setSortBy, isFiltering: isFiltering, setIsTransformTooltipOpened: setIsTransformTooltipOpened, isTransformTooltipOpened: isTransformTooltipOpened });
+    var value = __assign(__assign({ data: updatedDataSnapshot, fields: fields }, validationState), { isReadOnly: isReadOnly, sortByFieldErrors: sortByFieldErrors, sortByFieldWarnings: sortByFieldWarnings, options: options, recordsWithValuesCount: recordsWithValuesCount, filteredDataCount: filteredDataCount, sortBy: sortBy, warnings: warnings, errors: errors, setSortByFieldErrors: handleSortByFieldErrors, setSortByFieldWarnings: handleSortByFieldWarnings, onValidateRecord: onValidateRecord, updateRecord: updateRecordAndRevalidate, selectedRows: selectedRows, setSelectedRows: setSelectedRows, deleteRecords: handleDeleteErrors, filteredInputValue: filteredInputValue, setFilteredInputValue: setFilteredInputValue, lastClickedIndexRef: lastClickedIndexRef, addNewRowsToSpreadsheet: addNewRowsToSpreadsheet, spreadsheetFilter: spreadsheetFilter, resetSpreadsheetFilter: resetSpreadsheetFilter, filterRecordsByRowType: filterRecordsByRowType, filterRecordsByFieldErrors: filterRecordsByFieldErrors, checkboxColumnWidth: checkboxColumnWidth, setSortBy: setSortBy, isFiltering: isFiltering, setIsTransformTooltipOpened: setIsTransformTooltipOpened, isTransformTooltipOpened: isTransformTooltipOpened, duplicateRecords: duplicateRecords });
     return (_jsx(SpreadsheetContext.Provider, __assign({ value: value }, { children: children })));
 };
 export var useSpreadsheetContext = function () { return useContext(SpreadsheetContext); };

package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/useSpreadsheetFilter.d.ts

@@ -1,6 +1,6 @@
 export type SpreadsheetFilter = {
     type: "rowBased" | "columnBased";
-    byRow?: "all" | "invalid" | "valid";
+    byRow?: "all" | "invalid" | "duplicates";
     byColumn?: {
         type: "fieldWithErrors";
         field: string;

package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/utils.d.ts

@@ -1,2 +1,3 @@
 import { Record } from "../../../../types";
 export declare const hasValueInAnyField: (record: Record) => boolean;
+export declare const rowIsEmpty: (row: Record) => boolean;

package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/utils.js

@@ -12,3 +12,10 @@ export var hasValueInAnyField = function (record) {
         return value !== null && value !== undefined;
     });
 };
+export var rowIsEmpty = function (row) {
+    return Object.keys(row).every(function (key) {
+        if (key === "_meta")
+            return true;
+        return !row[key];
+    });
+};

package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetData.js

@@ -38,7 +38,7 @@ import { useImporterContext } from "../../../../Importer/contexts/ImporterContex
 import useWindowDimensions from "../../../../utils/hooks/useWindowSize";
 var getItemKey = function (record) { return record._meta.id; };
 var SpreadsheetData = function (props) {
-    var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data, isLoading = _a.isLoading, isReadOnly = _a.isReadOnly, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors, options = _a.options, setSortByFieldWarnings = _a.setSortByFieldWarnings, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows, checkboxColumnWidth = _a.checkboxColumnWidth, isFiltering = _a.isFiltering;
+    var _a = useSpreadsheetContext(), fields = _a.fields, data = _a.data, isReadOnly = _a.isReadOnly, totalErrors = _a.totalErrors, validationPercentage = _a.validationPercentage, setSortByFieldErrors = _a.setSortByFieldErrors, options = _a.options, setSortByFieldWarnings = _a.setSortByFieldWarnings, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows, checkboxColumnWidth = _a.checkboxColumnWidth, isFiltering = _a.isFiltering;
     var currentStepIndex = useImporterContext().currentStepIndex;
     var isOnSmallScreens = useWindowDimensions().isOnSmallScreens;
     var canShowCheckboxOnCheckboxRowHover = currentStepIndex === 2;
@@ -105,6 +105,6 @@ var SpreadsheetData = function (props) {
     var showValidationProgress = !isReadOnly && validationPercentage < 100;
     var isReviewStep = currentStepIndex === 2;
     return (_jsxs(S.SpreadSheetData, __assign({ h100: true, flexColumn: true, className: props.className }, { children: [_jsx(GlobalStyle, {}), showValidationProgress && (_jsx(Div, __assign({ h: 32 }, { children: _jsx(ValidationProgress, { totalErrors: totalErrors, validationPercentage: validationPercentage }) }))), _jsxs(S.SpreadSheetContainer, __assign({ flexColumn: true, w100: true, h100: true }, { children: [_jsx(Div, __assign({ w100: true, justifyCenter: true }, { children: isReviewStep && _jsx(TableActions, {}) })), _jsxs(S.SpreadSheetWrapper, __assign({ canShowCheckboxOnHover: !showValidationProgress && canShowCheckboxOnCheckboxRowHover, shouldShowOnlyCheckbox: (!showValidationProgress && selectedRows.length > 0) ||
-                            currentStepIndex === 0, dflex: true, h100: true }, { children: [(options === null || options === void 0 ? void 0 : options.showCheckboxColumn) && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, height: spreadsheetHeight, isLoadingData: showValidationProgress })), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, rowHeight: spreadsheetRowHeightPx, h: null, rowWidthScalingFactor: rowWidthScalingFactor, data: data, columns: columns, isLoading: isLoading, onTableScroll: onTableScroll, getItemKey: getItemKey, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering })] }))] }))] })));
+                            currentStepIndex === 0, dflex: true, h100: true }, { children: [(options === null || options === void 0 ? void 0 : options.showCheckboxColumn) && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, height: spreadsheetHeight, isLoadingData: showValidationProgress })), _jsx(S.TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, rowHeight: spreadsheetRowHeightPx, h: null, rowWidthScalingFactor: rowWidthScalingFactor, data: data, columns: columns, onTableScroll: onTableScroll, getItemKey: getItemKey, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering })] }))] }))] })));
 };
 export default React.memo(SpreadsheetData, areEqual);