fuse-importer 0.1.3-testing → 0.1.4-testing

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

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/common/Spreadsheet/components/fields/index.js

@@ -87,29 +87,34 @@ export var useSpreadsheetField = function (name, record, fieldType) {
         validationWarning: validationWarning,
     };
 };
-var ContentContainer = styled(Div)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: calc(100% - 1px);\n  width: ", ";\n  overflow: hidden;\n\n  ", "\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  height: calc(100% - 1px);\n  width: ", ";\n  overflow: hidden;\n\n  ", "\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+var ContentContainer = styled(Div)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: calc(100% - 1px);\n  width: ", ";\n  overflow: hidden;\n\n  ", "\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  height: calc(100% - 1px);\n  width: ", ";\n  overflow: hidden;\n\n  ", "\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  &:focus-within, \n  &:hover {\n    ", "\n  }\n\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var defaultFieldWidth = _a.defaultFieldWidth;
     return defaultFieldWidth ? "".concat(defaultFieldWidth, "px") : "100%";
 }, function (_a) {
     var expandedFieldWidth = _a.expandedFieldWidth;
     return expandedFieldWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n    "], ["\n      position: absolute;\n    "])));
 }, function (_a) {
-    var expandedFieldWidth = _a.expandedFieldWidth, isHighlighted = _a.isHighlighted, theme = _a.theme, shouldExpandInput = _a.shouldExpandInput;
-    return shouldExpandInput && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        background: ", ";\n        box-shadow: 0px 0px 0px 2px ", " inset;\n        width: ", ";\n        z-index: 1;\n\n        .suffix {\n          right: 12px;\n        }\n      "], ["\n        background: ", ";\n        box-shadow: 0px 0px 0px 2px ", " inset;\n        width: ", ";\n        z-index: 1;\n\n        .suffix {\n          right: 12px;\n        }\n      "])), !isHighlighted
+    var hasError = _a.hasError, hasWarning = _a.hasWarning, isHighlighted = _a.isHighlighted, theme = _a.theme, shouldExpandInput = _a.shouldExpandInput;
+    return shouldExpandInput &&
+        !hasError &&
+        !hasWarning && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        background: ", ";\n        box-shadow: 0px 0px 0px 2px ", " inset;\n      "], ["\n        background: ", ";\n        box-shadow: 0px 0px 0px 2px ", " inset;\n      "])), !isHighlighted
         ? theme.colors.white
-        : theme.colors.blue100, function (p) { return p.theme.colors.blue500; }, expandedFieldWidth || "auto");
+        : theme.colors.blue100, function (p) { return p.theme.colors.blue500; });
+}, function (_a) {
+    var expandedFieldWidth = _a.expandedFieldWidth, shouldExpandInput = _a.shouldExpandInput;
+    return shouldExpandInput && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        width: ", ";\n        z-index: 1;\n\n        .suffix {\n          right: 12px;\n        }\n      "], ["\n        width: ", ";\n        z-index: 1;\n\n        .suffix {\n          right: 12px;\n        }\n      "])), expandedFieldWidth || "auto");
 }, function (p) { return p.theme.css.alignCenter; }, function (p) {
-    return p.isHighlighted && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n    "], ["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; });
+    return p.isHighlighted && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n    "], ["\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 2px ", " inset;\n    "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; });
 }, function (p) {
-    return p.hasWarning && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.orange1200; }, function (p) { return p.theme.colors.orange1100; }, function (p) { return p.theme.colors.orange500; });
+    return p.hasWarning && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.orange1200; }, function (p) { return p.theme.colors.orange1100; }, function (p) { return p.theme.colors.orange500; });
 }, function (p) {
-    return p.hasError && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.error; }, function (p) { return p.theme.colors.red100; }, function (p) { return p.theme.colors.error; });
+    return p.hasError && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.error; }, function (p) { return p.theme.colors.red100; }, function (p) { return p.theme.colors.error; });
 }, function (p) {
-    return p.isReadOnly && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
+    return p.isReadOnly && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 });
 export var SpreadsheetField = function (_a) {
     var validationError = _a.validationError, validationWarning = _a.validationWarning, children = _a.children, isHighlighted = _a.isHighlighted, expandedFieldWidth = _a.expandedFieldWidth, shouldExpandInput = _a.shouldExpandInput, defaultFieldWidth = _a.defaultFieldWidth;
     var isReadOnly = useSpreadsheetContext().isReadOnly;
     return (_jsx(Div, __assign({ dim: "100%" }, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError || validationWarning }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ hasError: !!validationError, hasWarning: !!validationWarning, isHighlighted: isHighlighted, expandedFieldWidth: expandedFieldWidth, defaultFieldWidth: defaultFieldWidth, shouldExpandInput: shouldExpandInput, isReadOnly: isReadOnly, className: "input-content" }, { children: children })) })) })) })));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/lib/esm/Importer/contexts/ImporterContextProvider.d.ts

@@ -1,8 +1,6 @@
-import Fuse from "fuse.js";
 import React from "react";
-import { CustomAction, FormatRecord, ImporterOptions, Integration, OnSubmit, OnValidateRecord, Record, TemplateHeader } from "../../types";
+import { ColumnMapping, CustomAction, FormatRecord, ImporterOptions, Integration, OnSubmit, OnValidateRecord, Record, TemplateHeader } from "../../types";
 import { FuseApi } from "../common/FuseApi";
-export declare const fusejsOptions: Fuse.IFuseOptions<string>;
 export type HeaderMatchings = {
     [templateHeaderLabel: string]: string;
 };
@@ -46,6 +44,7 @@ export type State = {
     setCurrentStepIndex: React.Dispatch<number>;
     setEnumFieldValueMatchings: React.Dispatch<React.SetStateAction<EnumFieldValueMatchings>>;
     setUploadedData: React.Dispatch<any[]>;
+    setHeadersMappings: React.Dispatch<any[]>;
     setTemplateHeaderMatchings: React.Dispatch<React.SetStateAction<HeaderMatchings>>;
     setPreviewFirstTime: React.Dispatch<boolean>;
     formatRecord: FormatRecord;
@@ -56,6 +55,7 @@ export type State = {
     isUsingManualImport: React.MutableRefObject<boolean>;
     resetImporterWhenUsingManualImport: () => void;
     manualDataImportSelected: () => void;
+    columnMappingsAttributes: ColumnMapping[];
     customActions: CustomAction[];
 };
 export type Props = {

package/lib/esm/Importer/contexts/ImporterContextProvider.js

@@ -55,16 +55,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import Fuse from "fuse.js";
 import { createContext, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { FieldTypes, } from "../../types";
 import { FuseApi } from "../common/FuseApi";
 import { getCustomTheme, theme } from "../common/theme";
 import { getColumnType, verifyDuplicateValue } from "../common/utils";
-export var fusejsOptions = {
-    includeScore: true,
-    threshold: 0.35,
-};
 var ImporterContext = createContext({});
 export var ImporterContextProvider = function (_a) {
     var templateSlug = _a.templateSlug, initialRecords = _a.initialRecords, apiToken = _a.apiToken, children = _a.children, options = _a.options, onSubmit = _a.onSubmit, onClose = _a.onClose, formatRecord = _a.formatRecord, onValidateRecord = _a.onValidateRecord, dynamicColumns = _a.dynamicColumns, customActions = _a.customActions;
@@ -76,16 +71,18 @@ export var ImporterContextProvider = function (_a) {
     var _g = useState(null), uploadedData = _g[0], setUploadedData = _g[1];
     var _h = useState(null), organization = _h[0], setOrganization = _h[1];
     var _j = useState(null), previewFirstTime = _j[0], setPreviewFirstTime = _j[1];
-    var _k = useState({
+    var _k = useState(null), columnMappingsAttributes = _k[0], setColumnMappingsAttributes = _k[1];
+    var _l = useState(null), headersMappings = _l[0], setHeadersMappings = _l[1];
+    var _m = useState({
         theme: theme,
         logoURL: null,
-    }), style = _k[0], setStyle = _k[1];
-    var _l = useState(null), templateHeaderMatchings = _l[0], setTemplateHeaderMatchings = _l[1];
-    var _m = useState(null), enumFieldValueMatchings = _m[0], setEnumFieldValueMatchings = _m[1];
-    var _o = useState(null), uploadedDataEnumFieldValues = _o[0], setUploadedDataEnumFieldValues = _o[1];
-    var _p = useState([]), selectedRows = _p[0], setSelectedRows = _p[1];
+    }), style = _m[0], setStyle = _m[1];
+    var _o = useState(null), templateHeaderMatchings = _o[0], setTemplateHeaderMatchings = _o[1];
+    var _p = useState(null), enumFieldValueMatchings = _p[0], setEnumFieldValueMatchings = _p[1];
+    var _q = useState(null), uploadedDataEnumFieldValues = _q[0], setUploadedDataEnumFieldValues = _q[1];
+    var _r = useState([]), selectedRows = _r[0], setSelectedRows = _r[1];
     var isUsingManualImport = useRef(false);
-    var _q = useState(0), headerRowIndex = _q[0], setHeaderRowIndex = _q[1];
+    var _s = useState(0), headerRowIndex = _s[0], setHeaderRowIndex = _s[1];
     var fuseApi = useMemo(function () { return new FuseApi(options.env, apiToken); }, [
         options.env,
         apiToken,
@@ -107,18 +104,29 @@ export var ImporterContextProvider = function (_a) {
     useEffect(function () {
         var setHeadersFromDataset = function () {
             var _templateHeaderMatchings = {};
-            var fuse = new Fuse(uploadedDataHeaders, fusejsOptions);
             templateHeaders.forEach(function (templateHeader, _index) {
-                var _a;
-                var fuseResults = fuse.search(templateHeader.label);
-                _templateHeaderMatchings[templateHeader.label] = (_a = fuseResults[0]) === null || _a === void 0 ? void 0 : _a.item;
+                var mappedHeader = headersMappings.find(function (headerMapping) {
+                    var matchedColumn = Object.values(headerMapping)[0];
+                    if (matchedColumn) {
+                        return (matchedColumn.toLowerCase() === templateHeader.label.toLowerCase());
+                    }
+                    else {
+                        return false;
+                    }
+                });
+                if (mappedHeader) {
+                    _templateHeaderMatchings[templateHeader.label] = Object.keys(mappedHeader)[0];
+                }
+                else {
+                    _templateHeaderMatchings[templateHeader.label] = null;
+                }
             });
             setTemplateHeaderMatchings(_templateHeaderMatchings);
         };
-        if (uploadedDataHeaders) {
+        if (uploadedDataHeaders && headersMappings) {
             setHeadersFromDataset();
         }
-    }, [uploadedDataHeaders]);
+    }, [uploadedDataHeaders, headersMappings]);
     useEffect(function () {
         if (!templateHeaderMatchings || !uploadedDataHeaders)
             return;
@@ -145,7 +153,7 @@ export var ImporterContextProvider = function (_a) {
     }, [templateHeaderMatchings, uploadedDataHeaders]);
     useEffect(function () {
         (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var _a, organization_1, columns_1, importer_style_preferences, integrations_1, preview_first_time, error_1, errorMsg;
+            var _a, organization_1, columns_1, importer_style_preferences, integrations_1, preview_first_time, column_mappings_attributes, error_1, errorMsg;
             var _b, _c;
             return __generator(this, function (_d) {
                 switch (_d.label) {
@@ -153,7 +161,7 @@ export var ImporterContextProvider = function (_a) {
                         _d.trys.push([0, 2, , 3]);
                         return [4 /*yield*/, fuseApi.get("/api/v1/importer/templates/".concat(templateSlug))];
                     case 1:
-                        _a = (_d.sent()).data, organization_1 = _a.organization, columns_1 = _a.columns, importer_style_preferences = _a.importer_style_preferences, integrations_1 = _a.integrations, preview_first_time = _a.preview_first_time;
+                        _a = (_d.sent()).data, organization_1 = _a.organization, columns_1 = _a.columns, importer_style_preferences = _a.importer_style_preferences, integrations_1 = _a.integrations, preview_first_time = _a.preview_first_time, column_mappings_attributes = _a.column_mappings_attributes;
                         setOrganization(organization_1);
                         setTemplateHeaders(function () {
                             // user has created dynamic columns
@@ -170,6 +178,7 @@ export var ImporterContextProvider = function (_a) {
                         });
                         setIntegrations(integrations_1);
                         setPreviewFirstTime(preview_first_time);
+                        setColumnMappingsAttributes(column_mappings_attributes);
                         if (organization_1.plan && organization_1.plan.allow_style_customization) {
                             setStyle(getCustomTheme(importer_style_preferences));
                         }
@@ -222,10 +231,12 @@ export var ImporterContextProvider = function (_a) {
         theme: style.theme,
         logoURL: style.logoURL,
         integrations: integrations,
+        columnMappingsAttributes: columnMappingsAttributes,
         previewFirstTime: previewFirstTime,
         headerRowIndex: headerRowIndex,
         setHeaderRowIndex: setHeaderRowIndex,
         setUploadedData: setUploadedData,
+        setHeadersMappings: setHeadersMappings,
         formatRecord: formatRecord,
         setCurrentStepIndex: setCurrentStepIndex,
         setEnumFieldValueMatchings: setEnumFieldValueMatchings,

package/lib/esm/common/datePatterns.js

@@ -43,14 +43,6 @@ export var datePatterns = [
         value: "yy/MM/dd",
         label: "yy/MM/dd (e.g. 23/08/31)",
     },
-    {
-        value: "EEEE MMMM yyyy",
-        label: "Day MMMM Year (e.g. Tuesday August 2023)",
-    },
-    {
-        value: "EEEE dd MMMM yyyy",
-        label: "Day Day-of-Month Month Year (e.g. Tuesday 08 August 2023)",
-    },
     {
         value: "MM-dd-yy",
         label: "MM-dd-yy (e.g. 01-15-90)",
@@ -61,7 +53,7 @@ export var datePatterns = [
     },
     {
         value: "dd-MM-yy",
-        label: "dd-MM-yy  (e.g. 15-01-90)",
+        label: "dd-MM-yy (e.g. 15-01-90)",
     },
     {
         value: "dd-MM-yyyy",
@@ -167,6 +159,14 @@ export var datePatterns = [
         value: "EEE, MMM dd, yyyy",
         label: "EEE, MMM dd, yyyy (e.g. Mon, Jan 15, 1990)",
     },
+    {
+        value: "EEEE MMMM yyyy",
+        label: "Day MMMM Year (e.g. Tuesday August 2023)",
+    },
+    {
+        value: "EEEE dd MMMM yyyy",
+        label: "Day Day-of-Month Month Year (e.g. Tuesday 08 August 2023)",
+    },
 ];
 export var dateTimePatterns = [
     {
@@ -317,7 +317,7 @@ export var timePatterns = [
     },
     {
         value: "hh:mm:ss a",
-        label: "hh:mm:ss a  (e.g. 01:30:45 PM)",
+        label: "hh:mm:ss a (e.g. 01:30:45 PM)",
     },
 ];
 export var allowedPatterns = {

package/lib/esm/types.d.ts

@@ -114,6 +114,8 @@ export type TemplateHeader = {
     validations: FieldValidation[];
     transformations: FieldTransformation[];
     position: number;
+    id?: number;
+    archived?: boolean;
 };
 type CARecordFn = (record: Record) => Promise<Record> | Record;
 export type CustomActionTypes = "record";
@@ -140,6 +142,11 @@ export type Integration = {
     active: boolean;
     provider: string;
 };
+export type ColumnMapping = {
+    matched_column_name: string;
+    template_column_name: string;
+    id?: number;
+};
 export type TemplateInfo = {
     columns: TemplateHeader[];
     integrations: Integration[];
@@ -147,6 +154,7 @@ export type TemplateInfo = {
     organization: Organization;
     name: string;
     preview_first_time: boolean;
+    column_mappings_attributes?: ColumnMapping[];
 };
 export type Field = {
     name: string;