fuse-importer 0.13.0 → 0.16.0

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

@@ -1,8 +1,8 @@
 import Fuse from "fuse.js";
 import React from "react";
-import { EnvironmentType, OnValidateBatch, OnValidateRecord } from "../types";
+import { ImporterOptions, OnValidateBatch, OnValidateRecord } from "../types";
 import { FuseApi } from "./FuseApi";
-export declare const options: Fuse.IFuseOptions<string>;
+export declare const fusejsOptions: Fuse.IFuseOptions<string>;
 export declare type HeaderMatchings = {
     [templateHeaderLabel: string]: string;
 };
@@ -39,21 +39,22 @@ declare type State = {
     matcherSubstep: number;
     setMatcherSubstep: React.Dispatch<number>;
     uploadedDataEnumFieldValues: UploadedDataEnumFieldValues;
-    templateId: string;
+    templateSlug: string;
     apiToken: string;
     inTrialMode: boolean;
     onClose: () => void;
     fuseApi: FuseApi;
+    importerOptions: ImporterOptions;
 };
 declare type Props = {
-    templateId: string;
+    templateSlug: string;
     apiToken: string;
-    environment?: EnvironmentType;
+    options: ImporterOptions;
     onClose: () => void;
     children: JSX.Element;
     onValidateRecord?: OnValidateRecord;
     onValidateBatch?: OnValidateBatch;
 };
-export declare const ImporterContextProvider: ({ templateId, environment, apiToken, children, onClose, onValidateBatch, onValidateRecord, }: Props) => JSX.Element;
+export declare const ImporterContextProvider: ({ templateSlug, apiToken, children, options, onClose, onValidateBatch, onValidateRecord, }: Props) => JSX.Element;
 export declare const useImporterContext: () => State;
 export {};

package/lib/esm/Importer/ImporterContextProvider.js

@@ -48,25 +48,26 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import Fuse from "fuse.js";
 import { createContext, useContext, useEffect, useState } from "react";
-import { isEnumField } from "./common/utils";
+import { FieldTypes, } from "../types";
+import { getColumnType } from "./common/utils";
 import { FuseApi } from "./FuseApi";
-export var options = {
+export var fusejsOptions = {
     includeScore: true,
     threshold: 0.35,
 };
 var ImporterContext = createContext({});
 export var ImporterContextProvider = function (_a) {
-    var templateId = _a.templateId, _b = _a.environment, environment = _b === void 0 ? "local" : _b, apiToken = _a.apiToken, children = _a.children, onClose = _a.onClose, onValidateBatch = _a.onValidateBatch, onValidateRecord = _a.onValidateRecord;
-    var _c = useState(0), currentStepIndex = _c[0], setCurrentStepIndex = _c[1];
-    var _d = useState(0), matcherSubstep = _d[0], setMatcherSubstep = _d[1];
-    var _e = useState(null), templateError = _e[0], setTemplateError = _e[1];
-    var _f = useState(null), templateHeaders = _f[0], setTemplateHeaders = _f[1];
-    var _g = useState(null), uploadedData = _g[0], setUploadedData = _g[1];
-    var _h = useState(null), templateHeaderMatchings = _h[0], setTemplateHeaderMatchings = _h[1];
-    var _j = useState(null), enumFieldValueMatchings = _j[0], setEnumFieldValueMatchings = _j[1];
-    var _k = useState(null), uploadedDataEnumFieldValues = _k[0], setUploadedDataEnumFieldValues = _k[1];
-    var _l = useState(false), inTrialMode = _l[0], setInTrialMode = _l[1];
-    var fuseApi = new FuseApi(environment, apiToken);
+    var templateSlug = _a.templateSlug, apiToken = _a.apiToken, children = _a.children, options = _a.options, onClose = _a.onClose, onValidateBatch = _a.onValidateBatch, onValidateRecord = _a.onValidateRecord;
+    var _b = useState(0), currentStepIndex = _b[0], setCurrentStepIndex = _b[1];
+    var _c = useState(0), matcherSubstep = _c[0], setMatcherSubstep = _c[1];
+    var _d = useState(null), templateError = _d[0], setTemplateError = _d[1];
+    var _e = useState(null), templateHeaders = _e[0], setTemplateHeaders = _e[1];
+    var _f = useState(null), uploadedData = _f[0], setUploadedData = _f[1];
+    var _g = useState(null), templateHeaderMatchings = _g[0], setTemplateHeaderMatchings = _g[1];
+    var _h = useState(null), enumFieldValueMatchings = _h[0], setEnumFieldValueMatchings = _h[1];
+    var _j = useState(null), uploadedDataEnumFieldValues = _j[0], setUploadedDataEnumFieldValues = _j[1];
+    var _k = useState(false), inTrialMode = _k[0], setInTrialMode = _k[1];
+    var fuseApi = new FuseApi(options.env, apiToken);
     var uploadedDataHeaders = uploadedData &&
         uploadedData[0].map(function (ud) { return (typeof ud === "number" ? ud.toString() : ud); });
     useEffect(function () {
@@ -75,7 +76,7 @@ export var ImporterContextProvider = function (_a) {
         var _uploadedDataEnumFieldValues = {};
         var templateLabels = Object.keys(templateHeaderMatchings);
         var enumFieldsLabels = templateLabels.filter(function (templateLabel) {
-            return isEnumField({ templateLabel: templateLabel, templateHeaders: templateHeaders });
+            return getColumnType({ templateLabel: templateLabel, templateHeaders: templateHeaders }) === FieldTypes.enum;
         });
         enumFieldsLabels.forEach(function (templateLabel) {
             var uploadedDataHeader = templateHeaderMatchings[templateLabel];
@@ -101,7 +102,7 @@ export var ImporterContextProvider = function (_a) {
                 switch (_c.label) {
                     case 0:
                         _c.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, fuseApi.get("/api/v1/importer/templates/".concat(templateId))];
+                        return [4 /*yield*/, fuseApi.get("/api/v1/importer/templates/".concat(templateSlug))];
                     case 1:
                         data = (_c.sent()).data;
                         setTemplateHeaders(data.columns);
@@ -128,7 +129,7 @@ export var ImporterContextProvider = function (_a) {
     };
     var setHeadersFromDataset = function () {
         var _templateHeaderMatchings = {};
-        var fuse = new Fuse(uploadedDataHeaders, options);
+        var fuse = new Fuse(uploadedDataHeaders, fusejsOptions);
         templateHeaders.forEach(function (templateHeader, _index) {
             var _a;
             var fuseResults = fuse.search(templateHeader.label);
@@ -145,6 +146,7 @@ export var ImporterContextProvider = function (_a) {
         setEnumFieldValueMatchings: setEnumFieldValueMatchings,
         templateHeaderMatchings: templateHeaderMatchings,
         uploadedDataEnumFieldValues: uploadedDataEnumFieldValues,
+        importerOptions: options,
         setTemplateHeaderMatchings: setTemplateHeaderMatchings,
         resetImport: resetImport,
         uploadedData: uploadedData,
@@ -155,7 +157,7 @@ export var ImporterContextProvider = function (_a) {
         matcherSubstep: matcherSubstep,
         setMatcherSubstep: setMatcherSubstep,
         apiToken: apiToken,
-        templateId: templateId,
+        templateSlug: templateSlug,
         inTrialMode: inTrialMode,
         onClose: onClose,
         fuseApi: fuseApi,

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

@@ -10,19 +10,22 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { TableView } from "../../../../common/Table/TableView";
+import { colors } from "../../../../styled/theme/colorPalette";
 import { Div } from "../../../../styled/utils";
 import { useImporterContext } from "../../../ImporterContextProvider";
 import { MatcherStatus } from "../../common/types";
 import { EnumFieldMatcherContextProvider } from "../EnumFieldMatcherContext";
 import { tableColumns } from "./tableColumns";
 import { defaultTableHeaderHeightPx } from "../../../../common/Table/TableView/common";
-import { colors } from "../../../../styled/theme/colorPalette";
-import { matcherTableMinHeightPx, matcherTableMaxHeightPx, } from "../../common/index";
+import { getTableHeight } from "../../../common";
+import { MAX_VISIBLE_ROWS } from "../../common";
 export var EnumFieldMatcher = function (_a) {
     var _b;
     var templateHeaderLabel = _a.templateHeaderLabel;
     var _c = useImporterContext(), enumFieldValueMatchings = _c.enumFieldValueMatchings, templateHeaders = _c.templateHeaders;
+    var isRequired = (_b = templateHeaders.find(function (th) { return th.label === templateHeaderLabel; })) === null || _b === void 0 ? void 0 : _b.required;
     var enumFieldValueMatching = enumFieldValueMatchings[templateHeaderLabel];
     var uploadedDataValues = Object.keys(enumFieldValueMatching);
     var data = uploadedDataValues.map(function (uploadedDataValue) { return ({
@@ -32,7 +35,20 @@ export var EnumFieldMatcher = function (_a) {
             ? MatcherStatus.matched
             : MatcherStatus.unmatched,
     }); });
-    var isRequired = (_b = templateHeaders.find(function (th) { return th.label === templateHeaderLabel; })) === null || _b === void 0 ? void 0 : _b.required;
+    var dataSortingOrderRef = useRef(uploadedDataValues
+        .map(function (uploadedDataValue, index) { return ({
+        index: index,
+        isMatched: !!enumFieldValueMatching[uploadedDataValue],
+    }); })
+        .sort(function (a, b) { return (b.isMatched ? 1 : -1); }));
+    //sort data based on automatched items
+    var sortedData = dataSortingOrderRef.current.map(function (sorting) { return data[sorting.index]; });
     var tableRowHeight = 100;
-    return (_jsxs(Div, { children: [_jsx(Div, __assign({ h5: true, mb: 16 }, { children: "Values for the '".concat(templateHeaderLabel).concat(isRequired ? "*" : "", "' Column") }), void 0), _jsx(Div, __assign({ mb: 40 }, { children: _jsx(EnumFieldMatcherContextProvider, __assign({ templateHeaderLabel: templateHeaderLabel }, { children: _jsx(TableView, { minh: matcherTableMinHeightPx, maxh: matcherTableMaxHeightPx, rowHeight: tableRowHeight, h: data.length * tableRowHeight + defaultTableHeaderHeightPx, data: data, columns: tableColumns, bg: colors.white }, void 0) }), void 0) }), void 0)] }, void 0));
+    var tableHeight = getTableHeight({
+        headerHeight: defaultTableHeaderHeightPx,
+        rowHeight: tableRowHeight,
+        dataCount: data.length,
+        maxVisibleRows: MAX_VISIBLE_ROWS,
+    });
+    return (_jsxs(Div, { children: [_jsx(Div, __assign({ h5: true, mb: 16 }, { children: "Values for the '".concat(templateHeaderLabel).concat(isRequired ? "*" : "", "' Column") }), void 0), _jsx(Div, __assign({ mb: 40 }, { children: _jsx(EnumFieldMatcherContextProvider, __assign({ templateHeaderLabel: templateHeaderLabel }, { children: _jsx(TableView, { h: tableHeight, rowHeight: tableRowHeight, data: sortedData, columns: tableColumns, bg: colors.white }, void 0) }), void 0) }), void 0)] }, void 0));
 };

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcher/tableColumns.js

@@ -9,13 +9,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Autocomplete } from "../../../../common/inputs/Autocomplete";
 import { Div } from "../../../../styled/utils";
 import { useImporterContext } from "../../../ImporterContextProvider";
-import { greenCheckIcon, warningIcon } from "../../common/icons";
+import { matchedIndicatorUI, unmatchedIndicatorUI } from "../../common";
 import { MatcherStatus } from "../../common/types";
-import { StatusColumn } from "../../HeaderMatcher/tableColumns";
 import { useEnumFieldMatcherContext } from "../EnumFieldMatcherContext";
 export var tableColumns = [
     {
@@ -40,7 +39,7 @@ export var tableColumns = [
                 newEnumFieldValueMatchings[templateHeaderLabel][uploadedDataValue] = selected;
                 setEnumFieldValueMatchings(newEnumFieldValueMatchings);
             };
-            return (_jsx(Div, __assign({ w100: true }, { children: _jsx(Autocomplete, { placeholder: "Select option...", onChange: onChange, value: uploadedDataValueMatching, options: valueOptions.map(function (vo) { return ({
+            return (_jsx(Div, __assign({ w100: true }, { children: _jsx(Autocomplete, { w: "90%", placeholder: "Select option...", onChange: onChange, value: uploadedDataValueMatching, options: valueOptions.map(function (vo) { return ({
                         value: vo,
                         label: vo,
                     }); }) }, void 0) }), void 0));
@@ -51,7 +50,9 @@ export var tableColumns = [
         width: 1,
         Content: function (_a) {
             var status = _a.status;
-            return (_jsxs(StatusColumn, __assign({ matched: status, justifyCenter: true, body2: true, dflex: true, alignCenter: true }, { children: [status === MatcherStatus.matched ? greenCheckIcon : warningIcon, _jsx(Div, __assign({ ml: 6 }, { children: status }), void 0)] }), void 0));
+            return (_jsx(_Fragment, { children: status === MatcherStatus.matched
+                    ? matchedIndicatorUI
+                    : unmatchedIndicatorUI }, void 0));
         },
     },
 ];

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

@@ -14,13 +14,14 @@ 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 { useRef } from "react";
 import styled from "styled-components";
-import { TableView } from "../../../common/Table/TableView";
+import { defaultTableHeaderHeightPx, TableView, } from "../../../common/Table/TableView";
 import { colors } from "../../../styled/theme";
 import { Div } from "../../../styled/utils";
-import { contentWidth } from "../../common/index";
+import { contentWidth, getTableHeight } from "../../common/index";
 import { useImporterContext } from "../../ImporterContextProvider";
-import { matcherTableMaxHeightPx, matcherTableMinHeightPx, } from "../common/index";
+import { MAX_VISIBLE_ROWS } from "../common";
 import { MatcherStatus } from "../common/types";
 import { tableColumns } from "./tableColumns";
 var CardContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n  > div {\n    margin: 16px;\n  }\n"], ["\n  flex-direction: row;\n  > div {\n    margin: 16px;\n  }\n"])));
@@ -37,8 +38,22 @@ var HeaderMatcher = function () {
                 : MatcherStatus.unmatched,
         };
     });
+    var dataSortingOrderRef = useRef(templateHeaderLabels
+        .map(function (templateHeaderLabel, index) { return ({
+        index: index,
+        isMatched: !!templateHeaderMatchings[templateHeaderLabel],
+    }); })
+        .sort(function (a, b) { return (b.isMatched ? 1 : -1); }));
+    //sort data based on automatched items
+    var sortedData = dataSortingOrderRef.current.map(function (sorting) { return data[sorting.index]; });
     var tableRowHeight = 100;
-    var headerMatcher = (_jsx(Div, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Match Your Columns with Ours" }), void 0), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "We were able to match ".concat(numberOfMatchedHeaders, " of ").concat(templateHeaders.length, " columns correctly!") }), void 0), _jsx(CardContainer, __assign({ dflex: true, centered: true, alignStart: true }, { children: _jsx(Div, __assign({ w: contentWidth }, { children: _jsx(TableView, { minh: matcherTableMinHeightPx, maxh: matcherTableMaxHeightPx, data: data, rowHeight: tableRowHeight, columns: tableColumns, bg: colors.white }, void 0) }), void 0) }), void 0)] }), void 0) }, void 0));
+    var tableHeight = getTableHeight({
+        headerHeight: defaultTableHeaderHeightPx,
+        rowHeight: tableRowHeight,
+        dataCount: data.length,
+        maxVisibleRows: MAX_VISIBLE_ROWS,
+    });
+    var headerMatcher = (_jsx(Div, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Match Your Columns with Ours" }), void 0), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "We were able to match ".concat(numberOfMatchedHeaders, " of ").concat(templateHeaders.length, " columns correctly!") }), void 0), _jsx(CardContainer, __assign({ dflex: true, centered: true, alignStart: true }, { children: _jsx(Div, __assign({ w: contentWidth }, { children: _jsx(TableView, { h: tableHeight, data: sortedData, rowHeight: tableRowHeight, columns: tableColumns, bg: colors.white }, void 0) }), void 0) }), void 0)] }), void 0) }, void 0));
     return _jsx(_Fragment, { children: headerMatcher }, void 0);
 };
 export { HeaderMatcher };

package/lib/esm/Importer/Matcher/HeaderMatcher/tableColumns.d.ts

@@ -1,8 +1,4 @@
 /// <reference types="react" />
-declare type StatusColumnProps = {
-    matched: boolean;
-};
-export declare const StatusColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps & StatusColumnProps, never>;
 export declare const tableColumns: ({
     header: string;
     width: number;
@@ -17,4 +13,3 @@ export declare const tableColumns: ({
         status: any;
     }) => JSX.Element;
 })[];
-export {};

package/lib/esm/Importer/Matcher/HeaderMatcher/tableColumns.js

@@ -1,7 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -13,16 +9,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from "styled-components";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Autocomplete } from "../../../common/inputs/Autocomplete";
 import { Div } from "../../../styled/utils";
 import { useImporterContext } from "../../ImporterContextProvider";
-import { greenCheckIcon, warningIcon } from "../common/icons";
+import { matchedIndicatorUI, unmatchedIndicatorUI } from "../common/index";
 import { MatcherStatus } from "../common/types";
-export var StatusColumn = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: 8px 6px;\n  border-radius: 5px;\n  ", "\n"], ["\n  background-color: ", ";\n  padding: 8px 6px;\n  border-radius: 5px;\n  ", "\n"])), function (p) { return p.theme.colors.orange50; }, function (props) {
-    return props.matched && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), function (props) { return props.theme.colors.green50; });
-});
 export var tableColumns = [
     {
         header: "Your Columns",
@@ -35,7 +27,7 @@ export var tableColumns = [
                 newTemplateHeaderMatchings[ourColumns] = selected;
                 setTemplateHeaderMatchings(newTemplateHeaderMatchings);
             };
-            return (_jsx(Autocomplete, { mr: 10, onChange: onChange, value: yourColumns, options: uploadedDataHeaders.map(function (h) { return ({
+            return (_jsx(Autocomplete, { w: "92%", onChange: onChange, value: yourColumns, options: uploadedDataHeaders.map(function (h) { return ({
                     value: h,
                     label: h,
                 }); }) }, void 0));
@@ -49,7 +41,7 @@ export var tableColumns = [
             var ourColumns = _a.ourColumns;
             var templateHeaders = useImporterContext().templateHeaders;
             var isRequired = (_b = templateHeaders.find(function (th) { return th.label === ourColumns; })) === null || _b === void 0 ? void 0 : _b.required;
-            return (_jsxs(Div, __assign({ body1: true }, { children: [ourColumns, isRequired ? "*" : "", " "] }), void 0));
+            return (_jsxs(Div, __assign({ body1: true }, { children: [ourColumns, isRequired ? "*" : ""] }), void 0));
         },
     },
     {
@@ -57,8 +49,9 @@ export var tableColumns = [
         width: 1,
         Content: function (_a) {
             var status = _a.status;
-            return (_jsxs(StatusColumn, __assign({ matched: status, alignCenter: true, body2: true, dflex: true }, { children: [status === MatcherStatus.matched ? greenCheckIcon : warningIcon, _jsx(Div, __assign({ ml: 6 }, { children: status }), void 0)] }), void 0));
+            return (_jsx(_Fragment, { children: status === MatcherStatus.matched
+                    ? matchedIndicatorUI
+                    : unmatchedIndicatorUI }, void 0));
         },
     },
 ];
-var templateObject_1, templateObject_2;

package/lib/esm/Importer/Matcher/common/index.d.ts

@@ -1,2 +1,4 @@
-export declare const matcherTableMinHeightPx = 420;
-export declare const matcherTableMaxHeightPx = 700;
+/// <reference types="react" />
+export declare const MAX_VISIBLE_ROWS = 5;
+export declare const matchedIndicatorUI: JSX.Element;
+export declare const unmatchedIndicatorUI: JSX.Element;

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

@@ -1,2 +1,32 @@
-export var matcherTableMinHeightPx = 420;
-export var matcherTableMaxHeightPx = 700;
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { colors, Div } from "../../../styled";
+export var MAX_VISIBLE_ROWS = 5;
+var successIcon = (_jsx("svg", __assign({ width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 11.5C9.03757 11.5 11.5 9.03757 11.5 6C11.5 2.96243 9.03757 0.5 6 0.5C2.96243 0.5 0.5 2.96243 0.5 6C0.5 9.03757 2.96243 11.5 6 11.5ZM4.94194 5.53291C4.69786 5.28883 4.30214 5.28883 4.05806 5.53291C3.81398 5.77699 3.81398 6.17272 4.05806 6.4168L5.11872 7.47746C5.3628 7.72153 5.75852 7.72153 6.0026 7.47746L8.12392 5.35614C8.368 5.11206 8.368 4.71633 8.12392 4.47225C7.87984 4.22817 7.48412 4.22817 7.24004 4.47225L5.56066 6.15163L4.94194 5.53291Z", fill: colors.green300 }, void 0) }), void 0));
+var warningIcon = (_jsx("svg", __assign({ width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 11.5C9.03757 11.5 11.5 9.03757 11.5 6C11.5 2.96243 9.03757 0.5 6 0.5C2.96243 0.5 0.5 2.96243 0.5 6C0.5 9.03757 2.96243 11.5 6 11.5ZM6 2.875C6.34518 2.875 6.625 3.15482 6.625 3.5V6C6.625 6.34518 6.34518 6.625 6 6.625C5.65482 6.625 5.375 6.34518 5.375 6V3.5C5.375 3.15482 5.65482 2.875 6 2.875ZM6 7.375C6.34518 7.375 6.625 7.65482 6.625 8V8.25C6.625 8.59518 6.34518 8.875 6 8.875C5.65482 8.875 5.375 8.59518 5.375 8.25V8C5.375 7.65482 5.65482 7.375 6 7.375Z", fill: colors.orange500 }, void 0) }), void 0));
+var Wrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 2px 7px;\n  ", ";\n"], ["\n  padding: 2px 7px;\n  ", ";\n"])), function (p) {
+    var c = p.theme.css;
+    return [c.label3, c.alignCenter, c.selectNone];
+});
+var UnmatchedIndicator = styled(Wrapper)(function (_a) {
+    var _b = _a.theme, colors = _b.colors, c = _b.css;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    border-radius: 24px;\n  "], ["\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    border-radius: 24px;\n  "])), function (p) { return p.theme.colors.warning01; });
+});
+export var matchedIndicatorUI = (_jsxs(Wrapper, { children: [_jsx(Div, __assign({ centered: true }, { children: successIcon }), void 0), _jsx(Div, __assign({ ml: 8 }, { children: "MATCHED" }), void 0)] }, void 0));
+export var unmatchedIndicatorUI = (_jsxs(UnmatchedIndicator, { children: [_jsx(Div, __assign({ centered: true }, { children: warningIcon }), void 0), _jsx(Div, __assign({ ml: 8 }, { children: "UNMATCHED" }), void 0)] }, void 0));
+var templateObject_1, templateObject_2;

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

@@ -31,5 +31,5 @@ export var AppResponseModal = function () {
     var defaultMessage = importWasSuccessful
         ? "Data imported successfully"
         : "Some records could not be imported. Please review the errors and resubmit.";
-    return (_jsx(Modal, __assign({ isOpen: isAppResponseModalOpen, onClose: onCloseModal }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 40 }, { children: [_jsx(Div, __assign({ h5: true, w: 300, textAlignCenter: true, mt: 20 }, { children: (appResponse === null || appResponse === void 0 ? void 0 : appResponse.message) || defaultMessage }), void 0), _jsx(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: _jsx(Button, __assign({ w: 100, ml: 10, onClick: onCloseModal }, { children: "OK" }), void 0) }), void 0)] }), void 0) }), void 0));
+    return (_jsx(Modal, __assign({ isOpen: isAppResponseModalOpen, onClose: onCloseModal }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 40 }, { children: [_jsx(Div, __assign({ h6: true, w: 300, textAlignCenter: true, mt: 20 }, { children: (appResponse === null || appResponse === void 0 ? void 0 : appResponse.message) || defaultMessage }), void 0), _jsx(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: _jsx(Button, __assign({ w: 100, ml: 10, onClick: onCloseModal }, { children: "OK" }), void 0) }), void 0)] }), void 0) }), void 0));
 };

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

@@ -14,12 +14,20 @@ import { useMemo } from "react";
 import { Div } from "../../styled/utils";
 import { FieldTypes } from "../../types";
 import { Spreadsheet } from "../common/Spreadsheet";
-import { getSpreadsheetRowWidth, isEnumField } from "../common/utils";
-import { useImporterContext, } from "../ImporterContextProvider";
+import { getColumnType, getSpreadsheetRowWidth } from "../common/utils";
+import { useImporterContext } from "../ImporterContextProvider";
 import { useSpreadsheetReviewContext } from "../SpreadsheetReviewContextProvider";
 import { AppResponseModal } from "./AppResponseModal";
-var useInitialData = function (_a) {
-    var uploadedData = _a.uploadedData, templateHeaderMatchings = _a.templateHeaderMatchings, enumFieldValueMatchings = _a.enumFieldValueMatchings, uploadedDataHeaders = _a.uploadedDataHeaders, templateHeaders = _a.templateHeaders;
+var valueIsTrue = function (value) {
+    var _value = value.toLowerCase();
+    return ["true", "yes", "1", "y", "on", "t"].includes(_value);
+};
+var valueIsInteger = function (value) { return /^-?[0-9]+$/.test(value + ""); };
+var valueIsNumber = function (value) {
+    return /^-?[0-9]+(?:\.[0-9]+)?$/.test(value + "");
+};
+var useInitialData = function () {
+    var _a = useImporterContext(), templateHeaderMatchings = _a.templateHeaderMatchings, enumFieldValueMatchings = _a.enumFieldValueMatchings, templateHeaders = _a.templateHeaders, uploadedDataHeaders = _a.uploadedDataHeaders, uploadedData = _a.uploadedData;
     return useMemo(function () {
         var templateHeaderLabelsWithMatchings = Object.keys(templateHeaderMatchings).filter(function (thl) { return !!templateHeaderMatchings[thl]; });
         var getUploadedDataRowIndex = function (templateHeaderLabel) {
@@ -35,13 +43,18 @@ var useInitialData = function (_a) {
             templateHeaderLabelsWithMatchings.forEach(function (templateLabel) {
                 var key = getTemplateHeaderKey(templateLabel);
                 var value = row[getUploadedDataRowIndex(templateLabel)];
-                if (isEnumField({ templateLabel: templateLabel, templateHeaders: templateHeaders })) {
-                    var templateOption = enumFieldValueMatchings[templateLabel][value];
-                    record[key] = templateOption || value;
-                }
-                else {
-                    record[key] = value;
-                }
+                record[key] = value;
+                if (value === undefined)
+                    return;
+                var columnType = getColumnType({ templateLabel: templateLabel, templateHeaders: templateHeaders });
+                if (columnType === FieldTypes.enum)
+                    record[key] = enumFieldValueMatchings[templateLabel][value];
+                if (columnType === FieldTypes.boolean)
+                    record[key] = valueIsTrue(value);
+                if (columnType === FieldTypes.float)
+                    record[key] = valueIsNumber(value) ? parseFloat(value) : undefined;
+                if (columnType === FieldTypes.integer)
+                    record[key] = valueIsInteger(value) ? parseInt(value) : undefined;
             });
             return record;
         };
@@ -55,15 +68,9 @@ var useInitialData = function (_a) {
     ]);
 };
 var Review = function () {
-    var _a = useImporterContext(), templateHeaderMatchings = _a.templateHeaderMatchings, enumFieldValueMatchings = _a.enumFieldValueMatchings, templateHeaders = _a.templateHeaders, uploadedDataHeaders = _a.uploadedDataHeaders, uploadedData = _a.uploadedData, onValidateRecord = _a.onValidateRecord, onValidateBatch = _a.onValidateBatch;
-    var _b = useSpreadsheetReviewContext(), submittedData = _b.submittedData, appResponse = _b.appResponse, setReviewedData = _b.setReviewedData;
-    var initialData = useInitialData({
-        uploadedData: uploadedData,
-        uploadedDataHeaders: uploadedDataHeaders,
-        templateHeaderMatchings: templateHeaderMatchings,
-        enumFieldValueMatchings: enumFieldValueMatchings,
-        templateHeaders: templateHeaders,
-    });
+    var _a = useImporterContext(), templateHeaders = _a.templateHeaders, onValidateRecord = _a.onValidateRecord, onValidateBatch = _a.onValidateBatch, _b = _a.importerOptions, batchValidationDelayMs = _b.batchValidationDelayMs, batchValidationSize = _b.batchValidationSize;
+    var initialData = useInitialData();
+    var _c = useSpreadsheetReviewContext(), submittedData = _c.submittedData, appResponse = _c.appResponse, setReviewedData = _c.setReviewedData;
     var fields = templateHeaders.map(function (templateHeader) { return ({
         label: templateHeader.label,
         name: templateHeader.internal_key,
@@ -71,7 +78,10 @@ var Review = function () {
         isRequired: templateHeader.required,
         options: templateHeader.values,
     }); });
-    var spreadsheetUI = useMemo(function () { return (_jsx(Div, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(fields, 6) }, {
+    var spreadsheetUI = useMemo(function () { return (_jsx(Div, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(fields, 6), options: {
+                batchValidationDelayMs: batchValidationDelayMs,
+                batchValidationSize: batchValidationSize || initialData.length,
+            } }, {
             submittedData: submittedData,
             appResponse: appResponse,
             setReviewedData: setReviewedData,
@@ -80,6 +90,6 @@ var Review = function () {
             onValidateBatch: onValidateBatch,
             onValidateRecord: onValidateRecord,
         }), void 0) }, void 0)); }, [appResponse, submittedData]);
-    return (_jsxs(Div, __assign({ centered: true, flexColumn: true }, { children: [_jsx(AppResponseModal, {}, void 0), _jsx(Div, __assign({ h2: true, mt: 40 }, { children: "Review Your Spreadsheet before Submitting" }), void 0), _jsx(Div, __assign({ body1: true, mt: 20, w: 540, mb: 15, textAlignCenter: true }, { children: "Some cells in the document might have errors in format or missing information. Please review these to continue." }), void 0), initialData && spreadsheetUI] }), void 0));
+    return (_jsxs(Div, __assign({ centered: true, flexColumn: true }, { children: [_jsx(AppResponseModal, {}, void 0), _jsxs(Div, __assign({ w: 1400 }, { children: [_jsxs(Div, __assign({ centered: true, textAlignCenter: true, flexColumn: true }, { children: [_jsx(Div, __assign({ h2: true, mt: 40 }, { children: "Review Your Spreadsheet before Submitting" }), void 0), _jsx(Div, __assign({ body1: true, mt: 20, w: 540, mb: 15 }, { children: "Some cells in the document might have errors in format or missing information. Please review these to continue." }), void 0)] }), void 0), initialData && spreadsheetUI] }), void 0)] }), void 0));
 };
 export default Review;

package/lib/esm/Importer/SpreadsheetReviewContextProvider.js

@@ -57,7 +57,7 @@ export var SpreadsheetReviewContextProvider = function (_a) {
     var _c = useState(null), reviewedData = _c[0], setReviewedData = _c[1];
     var _d = useState(null), submittedData = _d[0], setSubmittedData = _d[1];
     var _e = useState(null), appResponse = _e[0], setAppResponse = _e[1];
-    var _f = useImporterContext(), templateId = _f.templateId, fuseApi = _f.fuseApi;
+    var _f = useImporterContext(), templateSlug = _f.templateSlug, fuseApi = _f.fuseApi;
     var getImportWasSuccessful = function (response) {
         return !response.errors || !Object.keys(response.errors).length;
     };
@@ -69,7 +69,7 @@ export var SpreadsheetReviewContextProvider = function (_a) {
                     trackImportedRowsCount = function (rowCount) { return __awaiter(void 0, void 0, void 0, function () {
                         return __generator(this, function (_a) {
                             switch (_a.label) {
-                                case 0: return [4 /*yield*/, fuseApi.post("/api/v1/importer/templates/".concat(templateId, "/imports"), {
+                                case 0: return [4 /*yield*/, fuseApi.post("/api/v1/importer/templates/".concat(templateSlug, "/imports"), {
                                         row_count: rowCount,
                                     })];
                                 case 1:

package/lib/esm/Importer/Stepper.js

@@ -18,7 +18,7 @@ import { Button } from "../common/buttons";
 import { whiteCheckIcon, closeIconCondensed, ChevronRightIcon, } from "../common/icons";
 import { useState } from "react";
 import styled, { css } from "styled-components";
-import { options, useImporterContext, } from "./ImporterContextProvider";
+import { useImporterContext, } from "./ImporterContextProvider";
 import { colors } from "../styled/theme/colorPalette";
 import { Div } from "../styled/utils";
 import { Modal } from "../common/Modal";
@@ -26,6 +26,7 @@ import { useSpreadsheetReviewContext } from "./SpreadsheetReviewContextProvider"
 import { ColumnType } from "./Matcher/common/types";
 import Fuse from "fuse.js";
 import { contentWidth } from "./common";
+import { fusejsOptions } from "./ImporterContextProvider";
 var StepIndexWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 22px;\n  width: 22px;\n  color: ", ";\n  border-radius: 50%;\n  background-color: none;\n  border: 1px solid ", ";\n\n  ", ";\n"], ["\n  height: 22px;\n  width: 22px;\n  color: ", ";\n  border-radius: 50%;\n  background-color: none;\n  border: 1px solid ", ";\n\n  ", ";\n"])), function (p) { return p.theme.colors.gray400; }, function (p) { return p.theme.colors.gray400; }, function (p) {
     return p.isSelected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 32px;\n      width: 32px;\n      border: solid 1px ", ";\n      color: ", ";\n      background-color: ", ";\n    "], ["\n      height: 32px;\n      width: 32px;\n      border: solid 1px ", ";\n      color: ", ";\n      background-color: ", ";\n    "])), function (p) { return p.theme.colors.blue500; }, function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.blue500; });
 });
@@ -47,7 +48,7 @@ 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, options);
+            var fuse = new Fuse(templateOptions, fusejsOptions);
             var fuseResults = fuse.search(uploadedValue);
             var previousRes = __assign({}, (res[templateLabel] || {}));
             res[templateLabel] = previousRes;
@@ -63,7 +64,7 @@ var getEnumFieldValueMatchingsInitialValue = function (_a) {
 var Stepper = function (_a) {
     var stepLabels = _a.stepLabels, logoURL = _a.logoURL;
     var _b = useState(false), isUnmatchedHeadersModalOpen = _b[0], setIsUnmatchedHeadersModalOpen = _b[1];
-    var _c = useSpreadsheetReviewContext(), isSpreadsheetReviewComplete = _c.isSpreadsheetReviewComplete, onSubmit = _c.onSubmit;
+    var _c = useSpreadsheetReviewContext(), appResponse = _c.appResponse, isSpreadsheetReviewComplete = _c.isSpreadsheetReviewComplete, onSubmit = _c.onSubmit;
     var _d = useState(false), isSubmitModalOpen = _d[0], setIsSubmitModalOpen = _d[1];
     var _e = useImporterContext(), currentStepIndex = _e.currentStepIndex, setEnumFieldValueMatchings = _e.setEnumFieldValueMatchings, setCurrentStepIndex = _e.setCurrentStepIndex, templateHeaderMatchings = _e.templateHeaderMatchings, matcherSubstep = _e.matcherSubstep, setMatcherSubstep = _e.setMatcherSubstep, templateHeaders = _e.templateHeaders, uploadedDataEnumFieldValues = _e.uploadedDataEnumFieldValues, onClose = _e.onClose;
     var submitModalUI = (_jsx(Modal, __assign({ isOpen: isSubmitModalOpen, onClose: function () { return setIsSubmitModalOpen(false); } }, { children: _jsxs(Div, __assign({ centered: true, flexColumn: true, p: 60 }, { children: [_jsx(Div, { children: submitSvg }, void 0), _jsx(Div, __assign({ h5: true, mt: 20 }, { children: "Ready to submit?" }), void 0), _jsx(Div, __assign({ body1: true, mt: 12, w: 448, textAlignCenter: true }, { children: "We didn't find anything wrong with your file. You're good to go!" }), void 0), _jsxs(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: [_jsx(Button, __assign({ w: 115, variant: "secondary", mr: 10, onClick: function () { return setIsSubmitModalOpen(false); } }, { children: "Go back" }), void 0), _jsx(Button, __assign({ w: 140, ml: 10, onClick: function () {
@@ -118,10 +119,10 @@ var Stepper = function (_a) {
         setStep();
         setIsUnmatchedHeadersModalOpen(false);
     };
-    var unmatchedHeadersModalUI = (_jsx(Modal, __assign({ isOpen: isUnmatchedHeadersModalOpen, onClose: function () { return setIsUnmatchedHeadersModalOpen(false); } }, { children: _jsxs(Div, __assign({ p: "17px 20px" }, { children: [_jsx(Div, __assign({ textAlignCenter: true, mb: 24, mt: 5 }, { children: errorIcon }), void 0), _jsx(Div, __assign({ textAlignCenter: true, h3: true, mb: 8 }, { children: "Unmatched Headers" }), void 0), _jsxs(Div, __assign({ maxw: 395, textAlignCenter: true, body1: true, mb: 40 }, { children: ["There are ", unmatchedHeadersCount, " unmatched column headers. You will have to fill these out manually if you proceed."] }), void 0), _jsxs(Div, __assign({ dflex: true, centered: true }, { children: [_jsx(Button, __assign({ variant: "secondary", onClick: function () { return setIsUnmatchedHeadersModalOpen(false); }, w: 160, mr: 16 }, { children: "Assign Headers" }), void 0), _jsx(Button, __assign({ variant: "primary", w: 68, onClick: skipStep }, { children: "Skip" }), void 0)] }), void 0)] }), void 0) }), void 0));
+    var unmatchedHeadersModalUI = (_jsx(Modal, __assign({ isOpen: isUnmatchedHeadersModalOpen, onClose: function () { return setIsUnmatchedHeadersModalOpen(false); } }, { children: _jsxs(Div, __assign({ p: "17px 20px" }, { children: [_jsx(Div, __assign({ textAlignCenter: true, mb: 24, mt: 5 }, { children: errorIcon }), void 0), _jsx(Div, __assign({ textAlignCenter: true, h5: true }, { children: "Unmatched Column Headers" }), void 0), _jsxs(Div, __assign({ w: 448, mt: 12, textAlignCenter: true, body1: true }, { children: [unmatchedHeadersCount === 1 ? "There is " : "There are ", unmatchedHeadersCount, " unmatched column headers. You will have to fill these out manually if you proceed."] }), void 0), _jsxs(Div, __assign({ dflex: true, centered: true, mt: 40 }, { children: [_jsx(Button, __assign({ variant: "secondary", onClick: function () { return setIsUnmatchedHeadersModalOpen(false); }, w: 160, mr: 16 }, { children: "Assign Headers" }), void 0), _jsx(Button, __assign({ w: 83, variant: "primary", onClick: skipStep }, { children: "Skip" }), void 0)] }), void 0)] }), void 0) }), void 0));
     var isMatchStep = currentStepIndex === 1;
     var isReviewStep = currentStepIndex === 2;
-    var leftButtonUI = (_jsx(Div, __assign({ w: 100 }, { children: currentStepIndex > 0 && (_jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: "Go back" }), void 0)) }), void 0));
+    var leftButtonUI = (_jsx(Div, __assign({ w: 100 }, { children: currentStepIndex > 0 && !appResponse && (_jsx(Button, __assign({ variant: "secondary", onClick: goBack }, { children: "Go back" }), void 0)) }), void 0));
     var rightButtonUI = (_jsxs(Div, __assign({ w: 100 }, { children: [isMatchStep && (_jsx(Button, __assign({ variant: "primary", onClick: continueToNextStep }, { children: "Continue" }), void 0)), isReviewStep && (_jsx(Button, __assign({ variant: "primary", isDisabled: !isSpreadsheetReviewComplete, onClick: function () { return setIsSubmitModalOpen(true); } }, { children: "Submit" }), void 0))] }), void 0));
     return (_jsxs(_Fragment, { children: [unmatchedHeadersModalUI, submitModalUI, _jsxs(StepperWrapper, __assign({ pRelative: true, alignCenter: true, w100: true, h: 96, centered: true }, { children: [logoURL && _jsx(Logo, { src: logoURL, alt: "" }, void 0), _jsxs(Content, __assign({ spaceBetween: true, w: contentWidth }, { children: [leftButtonUI, _jsx(Div, __assign({ alignCenter: true }, { children: stepsUI }), void 0), rightButtonUI] }), void 0), _jsx(CloseIcon, __assign({ centered: true, clickable: true, onClick: onClose }, { children: closeIconCondensed }), void 0)] }), void 0)] }, void 0));
 };
@@ -139,5 +140,5 @@ var submitSvg = (_jsxs("svg", __assign({ width: 64, height: 64, fill: "none", xm
             } }, void 0), _jsx("rect", { x: 38.727, y: 44.871, width: 17.915, height: 35.878, rx: 2, transform: "rotate(131.582 38.727 44.87)", fill: "url(#b)", style: {
                 mixBlendMode: "darken",
             } }, void 0), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "a", x1: 18.672, y1: 47.198, x2: 37.603, y2: 58.473, gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#D0A617" }, void 0), _jsx("stop", { offset: 1, stopColor: "#FEE18F" }, void 0)] }), void 0), _jsxs("linearGradient", __assign({ id: "b", x1: 47.684, y1: 44.871, x2: 36.123, y2: 89.527, gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#6BEEFF" }, void 0), _jsx("stop", { offset: 1, stopColor: "#08CABE" }, void 0)] }), void 0)] }, void 0)] }), void 0));
-var errorIcon = (_jsxs("svg", __assign({ width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("circle", { cx: "32.0003", cy: "32", r: "29.3333", stroke: "#CF4520", strokeWidth: "5" }, void 0), _jsx("path", { d: "M32 18.6667V32", stroke: "#CF4520", strokeWidth: "5", strokeLinecap: "round", strokeLinejoin: "round" }, void 0), _jsx("path", { d: "M32 42.6667V44", stroke: "#CF4520", strokeWidth: "5", strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
+var errorIcon = (_jsxs("svg", __assign({ width: "68", height: "68", viewBox: "0 0 68 68", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsxs("g", __assign({ clipPath: "url(#clip0_1052_34495)" }, { children: [_jsx("rect", { width: "68", height: "68", fill: "white" }, void 0), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M28.5668 8.05854C29.6943 6.10577 32.5129 6.10576 33.6403 8.05854L59.1466 52.2368C60.274 54.1895 58.8648 56.6305 56.6099 56.6305H5.59726C3.34239 56.6305 1.93309 54.1895 3.06053 52.2368L28.5668 8.05854Z", fill: "url(#paint0_linear_1052_34495)" }, void 0) }), void 0), _jsx("g", __assign({ style: { mixBlendMode: "multiply" } }, { children: _jsx("path", { d: "M34.4375 9.68867C35.5649 7.73589 38.3835 7.73589 39.511 9.68867L65.816 55.2503C66.9434 57.2031 65.5341 59.6441 63.2793 59.6441H10.6692C8.41432 59.6441 7.00502 57.2031 8.13246 55.2503L34.4375 9.68867Z", fill: "url(#paint1_linear_1052_34495)" }, void 0) }), void 0), _jsx("rect", { x: "29.0371", y: "21.2632", width: "6.43183", height: "21.3972", rx: "2.92916", fill: "#FFFDF8" }, void 0), _jsx("rect", { x: "29.0371", y: "44.7898", width: "6.43183", height: "5.61436", rx: "2.80718", fill: "#FFFDF8" }, void 0)] }), void 0), _jsxs("defs", { children: [_jsxs("linearGradient", __assign({ id: "paint0_linear_1052_34495", x1: "10.0099", y1: "28.8136", x2: "30.2646", y2: "54.4823", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#FD5C39" }, void 0), _jsx("stop", { offset: "1", stopColor: "#FFB869" }, void 0)] }), void 0), _jsxs("linearGradient", __assign({ id: "paint1_linear_1052_34495", x1: "18.8007", y1: "74.0811", x2: "85.2567", y2: "33.8684", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#E7C551" }, void 0), _jsx("stop", { offset: "1", stopColor: "#FEE18F" }, void 0)] }), void 0), _jsx("clipPath", __assign({ id: "clip0_1052_34495" }, { children: _jsx("rect", { width: "68", height: "68", fill: "white" }, void 0) }), void 0)] }, void 0)] }), void 0));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib/esm/Importer/TrialModeBanner.js

@@ -16,7 +16,7 @@ import { Div, Span } from "../styled/utils";
 import { useImporterContext } from "./ImporterContextProvider";
 export var TrialModeBanner = function () {
     var inTrialMode = useImporterContext().inTrialMode;
-    return (_jsx(_Fragment, { children: inTrialMode && (_jsxs(Div, __assign({ bg: theme.colors.orange100, h: 80, dflex: true, alignCenter: true, justifyCenter: true }, { children: [_jsx(Div, __assign({ ml: 33, mr: 8 }, { children: exclamationPointIcon }), void 0), _jsx(Span, __assign({ mr: 16 }, { children: "You're currently in Test mode. Subscribe to a plan to deploy to your website." }), void 0), _jsx(Button, __assign({ w: 120, br: 8, variant: "secondary", onClick: function () {
+    return (_jsx(_Fragment, { children: inTrialMode && (_jsxs(Div, __assign({ bg: theme.colors.orange100, h: 80, dflex: true, alignCenter: true, justifyCenter: true }, { children: [_jsx(Div, __assign({ ml: 33, mr: 8 }, { children: exclamationPointIcon }), void 0), _jsx(Span, __assign({ mr: 16 }, { children: "You're currently in Trial mode. Subscribe to a plan to deploy to your website." }), void 0), _jsx(Button, __assign({ w: 120, br: 8, variant: "secondary", onClick: function () {
                         window.location.href = "".concat(process.env.REACT_APP_API_BASE_URL, "/account/billing");
                     } }, { children: "Select plan" }), void 0)] }), void 0)) }, void 0));
 };

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

@@ -36,7 +36,7 @@ var HeaderButtons = function () {
     var onClick = function () {
         setCurrentStepIndex(1);
     };
-    return (_jsxs(HeaderButtonsWrapper, __assign({ dflex: true, spaceBetween: true, mb: 24 }, { children: [_jsx(Button, __assign({ w: 180, isSmall: true, variant: "secondary", onClick: resetImport }, { children: "No, Re-upload file" }), void 0), _jsx(Button, __assign({ w: 142, isSmall: true, onClick: onClick }, { children: "Yes, continue" }), void 0)] }), void 0));
+    return (_jsxs(HeaderButtonsWrapper, __assign({ dflex: true, spaceBetween: true, mb: 12 }, { children: [_jsx(Button, __assign({ w: 180, isSmall: true, variant: "secondary", onClick: resetImport }, { children: "No, Re-upload file" }), void 0), _jsx(Button, __assign({ w: 142, isSmall: true, onClick: onClick }, { children: "Yes, continue" }), void 0)] }), void 0));
 };
 var HeadersPreview = function () {
     var uploadedData = useImporterContext().uploadedData;
@@ -72,7 +72,7 @@ var HeadersPreview = function () {
             isRequired: false,
         };
     });
-    return (_jsx(_Fragment, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Verify Your Column Headers" }), void 0), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "File must contain column headers to proceed." }), void 0), _jsx(HeaderButtons, {}, void 0), _jsx(Div, __assign({ w100: true, centered: true, mt: 30, mb: 36 }, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(readonlyFields, 6), isReadOnly: true, initialData: formattedData }, { fields: readonlyFields }, { highlightFirstRow: true }), void 0) }), void 0)] }), void 0) }, void 0));
+    return (_jsx(_Fragment, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Verify Your Column Headers" }), void 0), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "File must contain column headers to proceed." }), void 0), _jsx(HeaderButtons, {}, void 0), _jsx(Div, __assign({ w100: true, centered: true, mb: 36 }, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(readonlyFields, 6), isReadOnly: true, initialData: formattedData }, { fields: readonlyFields }, { highlightFirstRow: true }), void 0) }), void 0)] }), void 0) }, void 0));
 };
 export default HeadersPreview;
 var templateObject_1;