fuse-importer 0.23.8 → 0.23.9

package/README.md

@@ -1,7 +1,7 @@
 <div>
 <center>
-<a href="https://fuse.flatironsdevelopment.com/users/sign-up?utm_source=npmjs&utm_medium=Fuse+importer+logo&utm_campaign=NPM">
-<img alt="Flatirons Fuse" src="https://wp.flatironsdevelopment.com/wp-content/uploads/2022/07/fuse-logo.png">
+<a href="https://fuse.flatirons.com/users/sign-up?utm_source=npmjs&utm_medium=Fuse+importer+logo&utm_campaign=NPM">
+<img alt="Flatirons Fuse" src="https://wp.flatirons.com/wp-content/uploads/2022/07/fuse-logo.png">
 </a>
 </center>
 <br>
@@ -16,7 +16,7 @@ Flatirons Fuse is a customizable and powerful CSV Importer that works with all f
 - [Installation](#installation)
 - [Introduction](#introduction)
 - [Registration](#registration)
-- [Create Your First Template](#create-your-first-template)
+- [Create Your First Importer](#create-your-first-template)
 - [Getting started](#getting-started)
 - [More Examples](#more-examples)
 - [Usage](#usage)
@@ -57,30 +57,30 @@ Install with CDN:
 
 Flatirons Fuse is our solution to the inevitable difficulties of getting customer data into your solution. We provide a white-labeled, customizable CSV and Spreadsheet import experience that is above all effective and flexible. Not only do we save you the time and effort of developing your own import solution, but we also ensure that setup and integration with your systems are a breeze.
 
-To get started with our solution, you're going to need a free account and to create a template on our platform: [Flatirons Fuse](https://fuse.flatironsdevelopment.com/users/sign-up?utm_source=npmjs&utm_medium=Flatirons+Fuse+Get+Started&utm_campaign=NPM)
+To get started with our solution, you're going to need a free account and to create a template on our platform: [Flatirons Fuse](https://fuse.flatirons.com/users/sign-up?utm_source=npmjs&utm_medium=Flatirons+Fuse+Get+Started&utm_campaign=NPM)
 
 To use the importer you will need two keys:
 
-- Your **Organization's API key**: You can find this at the top of the [Templates page](#create-your-first-template).
-- Your **Template's ID**: You can find this in the table on the [Templates page](#create-your-first-template).
+- Your **Organization's API key**: You can find this at the top of the [Importers page](#create-your-first-template).
+- Your **Importer's ID**: You can find this in the table on the [Importers page](#create-your-first-template).
 
-For more information see our [full documentation.](https://fuse-docs.flatironsdevelopment.com?utm_source=npmjs&utm_medium=Fuse+importer+Full+Documentation&utm_campaign=NPM)
+For more information see our [full documentation.](https://fuse-docs.flatirons.com?utm_source=npmjs&utm_medium=Fuse+importer+Full+Documentation&utm_campaign=NPM)
 
 Check it out in action:
 
 <div>
 <center>
-<img alt="Check it out in action" src="https://wp.flatironsdevelopment.com/wp-content/uploads/2022/07/ezgif-1-242e10926e.gif">
+<img alt="Check it out in action" src="https://wp.flatirons.com/wp-content/uploads/2022/07/ezgif-1-242e10926e.gif">
 </center>
 </div>
 
 ## Registration
 
-If you don't have an account yet, you can go over the [Registration](https://fuse-docs.flatironsdevelopment.com/getting-started/registration?utm_source=npmjs&utm_medium=Registration&utm_campaign=NPM).
+If you don't have an account yet, you can go over the [Registration](https://fuse-docs.flatirons.com/getting-started/registration?utm_source=npmjs&utm_medium=Registration&utm_campaign=NPM).
 
-## Create Your First Template
+## Create Your First Importer
 
-If you don’t have a Template yet, you can go over [Create Your First Template](https://fuse-docs.flatironsdevelopment.com/getting-started/create-your-first-template?utm_source=npmjs&utm_medium=Create+Your+First+Template&utm_campaign=NPM). Template represents the fields and validations that your own system accepts, also known as your data schema.
+If you don’t have a Importer yet, you can go over [Create Your First Importer](https://fuse-docs.flatirons.com/getting-started/create-your-first-template?utm_source=npmjs&utm_medium=Create+Your+First+Template&utm_campaign=NPM). Importer represents the fields and validations that your own system accepts, also known as your data schema.
 
 ## Getting started
 
@@ -94,7 +94,7 @@ If you don’t have a Template yet, you can go over [Create Your First Template]
     ></script>
     <script type="text/javascript">
       const organizationApiKey = "YOUR ORGANIZATIONS API KEY";
-      const templateId = "YOUR TEMPLATE ID";
+      const templateId = "YOUR IMPORTER ID";
       const importer = new FuseImporter(organizationApiKey, templateId);
 
       importer.onValidateRecord = async (record) => {
@@ -116,7 +116,7 @@ If you don’t have a Template yet, you can go over [Create Your First Template]
           templateId.indexOf("YOUR") !== -1
         ) {
           window.confirm(
-            "You need to configure your organization api key and template id."
+            "You need to configure your organization api key and Importer id."
           );
           return;
         }
@@ -133,10 +133,10 @@ If you don’t have a Template yet, you can go over [Create Your First Template]
 
 ## More Examples
 
-- [Quickstart Examples](https://fuse-docs.flatironsdevelopment.com/installation/quickstart-examples?utm_source=npmjs&utm_medium=More+Examples+Quickstart+Examples&utm_campaign=NPM)
-- [React.js](https://fuse-docs.flatironsdevelopment.com/use-cases/react.js-csv-importer?utm_source=npmjs&utm_medium=More+Examples+React&utm_campaign=NPM)
-- [Angular](https://fuse-docs.flatironsdevelopment.com/use-cases/angular-csv-importer?utm_source=npmjs&utm_medium=More+Examples+Angular&utm_campaign=NPM)
-- [Vue.js](https://fuse-docs.flatironsdevelopment.com/use-cases/vue.js-csv-importer?utm_source=npmjs&utm_medium=More+Examples+Vue&utm_campaign=NPM)
+- [Quickstart Examples](https://fuse-docs.flatirons.com/installation/quickstart-examples?utm_source=npmjs&utm_medium=More+Examples+Quickstart+Examples&utm_campaign=NPM)
+- [React.js](https://fuse-docs.flatirons.com/use-cases/react.js-csv-importer?utm_source=npmjs&utm_medium=More+Examples+React&utm_campaign=NPM)
+- [Angular](https://fuse-docs.flatirons.com/use-cases/angular-csv-importer?utm_source=npmjs&utm_medium=More+Examples+Angular&utm_campaign=NPM)
+- [Vue.js](https://fuse-docs.flatirons.com/use-cases/vue.js-csv-importer?utm_source=npmjs&utm_medium=More+Examples+Vue&utm_campaign=NPM)
 
 ## Usage
 
@@ -144,7 +144,7 @@ If you don’t have a Template yet, you can go over [Create Your First Template]
 import FuseImporter from "fuse-importer";
 
 const organizationApiKey = "YOUR ORGANIZATIONS API KEY";
-const templateId = "YOUR TEMPLATE ID";
+const templateId = "YOUR IMPORTER ID";
 const importer = new FuseImporter(organizationApiKey, templateId);
 ```
 
@@ -180,7 +180,7 @@ importer.onClose = () => {
 
 #### `onValidateRecord`
 
-The `onValidationRecord` hook is called for each row (record) that a customer uploads. It allows you to specify custom frontend validations and display error messages in the importer for the user to fix. When you create a Template, each column contains an `internal key`. These internal keys represent the
+The `onValidationRecord` hook is called for each row (record) that a customer uploads. It allows you to specify custom frontend validations and display error messages in the importer for the user to fix. When you create a importer, each column contains an `internal key`. These internal keys represent the
 
 Return values:
 

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type LayoutProps = {
+    zIndex: number;
+};
+export declare const Layout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../styled").CSSProps & LayoutProps, never>;
+export declare const ImporterWithContext: () => JSX.Element;
+export {};

package/lib/esm/Importer/ImporterWithContext.js

@@ -0,0 +1,69 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import styled, { css, ThemeProvider } from "styled-components";
+import { Toast } from "../common";
+import { Div } from "../styled";
+import { Footer } from "./common/Footer";
+import { GlobalStyle } from "./common/GlobalStyle";
+import { ImporterFonts } from "./common/ImporterFonts";
+import { useImporterContext } from "./contexts/ImporterContextProvider";
+import Matcher from "./Matcher";
+import { PreviewFirstTime } from "./PreviewFirstTime";
+import { PreviewModeBanner } from "./PreviewModeBanner";
+import Review from "./Review";
+import { ReviewContextProvider } from "./Review/ReviewContextProvider";
+import { Stepper } from "./Stepper/index";
+import { TrialModeBanner } from "./TrialModeBanner";
+import Uploader from "./Uploader";
+var steps = [
+    {
+        label: "Upload",
+        component: _jsx(Uploader, {}),
+    },
+    {
+        label: "Match",
+        component: _jsx(Matcher, {}),
+    },
+    {
+        label: "Review",
+        component: _jsx(Review, {}),
+    },
+];
+export var Layout = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  height: 100vh;\n  width: 100vw;\n  overflow-y: scroll;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: ", ";\n  ", ";\n"], ["\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  height: 100vh;\n  width: 100vw;\n  overflow-y: scroll;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: ", ";\n  ", ";\n"])), function (p) { return p.zIndex; }, function (p) { return p.theme.css.scrollbarDark; });
+var Content = styled(Div)(function (_a) {
+    var _b = _a.theme, colors = _b.colors, c = _b.css;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    padding-bottom: 70px;\n  "], ["\n    background-color: ", ";\n    padding-bottom: 70px;\n  "])), colors.backgroundInterface);
+});
+export var ImporterWithContext = function () {
+    var _a = useImporterContext(), inTrialMode = _a.inTrialMode, currentStepIndex = _a.currentStepIndex, matcherSubstep = _a.matcherSubstep, theme = _a.theme, logoURL = _a.logoURL, previewFirstTime = _a.previewFirstTime, _b = _a.importerOptions, zIndex = _b.zIndex, loadingComponent = _b.loadingComponent, previewMode = _b.previewMode;
+    var layoutRef = useRef(null);
+    useEffect(function () {
+        layoutRef.current.scrollTo(0, 0);
+    }, [currentStepIndex, matcherSubstep]);
+    function renderContent() {
+        return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [previewMode && _jsx(PreviewModeBanner, {}), !previewMode && _jsx(TrialModeBanner, {}), _jsx(Stepper, { stepLabels: steps.map(function (step) { return step.label; }), logoURL: logoURL })] }), _jsx(Content, { children: steps[currentStepIndex].component }), inTrialMode && (_jsx(Content, { children: _jsx(Footer, {}) }))] }));
+    }
+    function renderPreviewFirstTime() {
+        return _jsx(PreviewFirstTime, {});
+    }
+    var shouldShowPreviewFirstTime = previewFirstTime && previewMode;
+    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Toast, {}), _jsx(GlobalStyle, {}), _jsx(ImporterFonts, {}), _jsx(ReviewContextProvider, { children: _jsx(Layout, __assign({ zIndex: zIndex, ref: layoutRef }, { children: shouldShowPreviewFirstTime
+                        ? renderPreviewFirstTime()
+                        : renderContent() })) })] })));
+};
+var templateObject_1, templateObject_2;

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

@@ -14,13 +14,13 @@ 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 { getTableHeight } from "../../../common";
+import { useImporterContext } from "../../../contexts/ImporterContextProvider";
 import { MAX_VISIBLE_ROWS } from "../../common";
+import { MatcherStatus } from "../../common/types";
+import { EnumFieldMatcherContextProvider } from "../EnumFieldMatcherContext";
+import { tableColumns } from "./tableColumns";
 export var EnumFieldMatcher = function (_a) {
     var _b;
     var templateHeaderLabel = _a.templateHeaderLabel;

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

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 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 { useImporterContext } from "../../../contexts/ImporterContextProvider";
 import { matchedIndicatorUI, unmatchedIndicatorUI } from "../../common";
 import { MatcherStatus } from "../../common/types";
 import { useEnumFieldMatcherContext } from "../EnumFieldMatcherContext";

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

@@ -11,9 +11,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Div } from "../../../styled/utils";
-import { useImporterContext } from "../../ImporterContextProvider";
-import { EnumFieldMatcher } from "./EnumFieldMatcher";
 import { contentWidth } from "../../common/index";
+import { useImporterContext } from "../../contexts/ImporterContextProvider";
+import { EnumFieldMatcher } from "./EnumFieldMatcher";
 export var EnumFieldsMatchers = function () {
     var enumFieldValueMatchings = useImporterContext().enumFieldValueMatchings;
     return (_jsxs(_Fragment, { children: [_jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Match Your Columns with Ours" })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true, maxw: 928 }, { children: "Our system only accepts certain values for some columns. Below you can match the values from your spreadsheet to the values we accept." }))] })), _jsx(Div, __assign({ flexColumn: true, alignCenter: true, mb: 20, centered: true }, { children: Object.keys(enumFieldValueMatchings).map(function (templateHeaderLabel, index) {

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

@@ -20,7 +20,7 @@ import { defaultTableHeaderHeightPx, TableView, } from "../../../common/Table/Ta
 import { colors } from "../../../styled/theme";
 import { Div } from "../../../styled/utils";
 import { contentWidth, getTableHeight } from "../../common/index";
-import { useImporterContext } from "../../ImporterContextProvider";
+import { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { MAX_VISIBLE_ROWS } from "../common";
 import { MatcherStatus } from "../common/types";
 import { tableColumns } from "./tableColumns";
@@ -52,8 +52,7 @@ var HeaderMatcher = function () {
         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" })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "We were able to match ".concat(numberOfMatchedHeaders, " of ").concat(templateHeaders.length, " columns correctly!") })), _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 }) })) }))] })) }));
-    return _jsx(_Fragment, { children: headerMatcher });
+    return (_jsx(_Fragment, { children: _jsx(Div, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Match Your Columns with Ours" })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "We were able to match ".concat(numberOfMatchedHeaders, " of ").concat(templateHeaders.length, " columns correctly!") })), _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 }) })) }))] })) }) }));
 };
 export { HeaderMatcher };
 var templateObject_1;

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

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 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 { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { matchedIndicatorUI, unmatchedIndicatorUI } from "../common/index";
 import { MatcherStatus } from "../common/types";
 export var tableColumns = [

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Matcher: () => JSX.Element;
-export { Matcher };
+import React from "react";
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;

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

@@ -14,13 +14,14 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 import { FieldTypes } from "../..";
 import { Div } from "../../styled/utils";
-import { useImporterContext } from "../ImporterContextProvider";
+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));
@@ -33,5 +34,5 @@ var Matcher = function () {
     var dotsUI = (_jsxs(_Fragment, { children: [_jsx(Dot, { isSelected: matcherSubstep === 0 }), _jsx(Dot, { isSelected: matcherSubstep === 1 })] }));
     return (_jsxs(_Fragment, { children: [_jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 30, mt: 40, mb: 16, alignCenter: true, spaceBetween: true }, { children: enumFieldsCount > 0 && dotsUI })) })), matcherSubstep === 0 && _jsx(HeaderMatcher, {}), matcherSubstep === 1 && _jsx(EnumFieldsMatchers, {})] }));
 };
-export { Matcher };
+export default React.memo(Matcher, areEqual);
 var templateObject_1, templateObject_2;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PreviewFirstTime: () => JSX.Element;

package/lib/esm/Importer/PreviewFirstTime.js

@@ -0,0 +1,78 @@
+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);
+};
+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 (_) 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 } from "react/jsx-runtime";
+import { theme } from "./common/theme";
+import { Div, Span } from "../styled";
+import { spreedSheetIcon } from "../common/Table/icons";
+import styled, { css } from "styled-components";
+import { Button } from "../common";
+import { useImporterContext } from "./contexts/ImporterContextProvider";
+var Content = styled(Div)(function (_a) {
+    var _b = _a.theme, colors = _b.colors, c = _b.css;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    padding-bottom: 70px;\n  "], ["\n    background-color: ", ";\n    padding-bottom: 70px;\n  "])), colors.backgroundInterface);
+});
+var Wrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 129px;\n  grid-auto-rows: minmax(auto, auto);\n  justify-items: center;\n\n  @media all and ", " {\n    display: flex !important;\n    flex-direction: column !important;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 129px;\n  grid-auto-rows: minmax(auto, auto);\n  justify-items: center;\n\n  @media all and ", " {\n    display: flex !important;\n    flex-direction: column !important;\n  }\n"])), theme.media.mobile);
+var LeftSection = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  grid-column: 1 / 2;\n  grid-row: 1;\n  padding: 24px 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"], ["\n  grid-column: 1 / 2;\n  grid-row: 1;\n  padding: 24px 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"])));
+var RightSection = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  grid-column: 2 / 2;\n  grid-row: 1;\n  padding: 24px 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"], ["\n  grid-column: 2 / 2;\n  grid-row: 1;\n  padding: 24px 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"])));
+export var PreviewFirstTime = function () {
+    var _a = useImporterContext(), templateSlug = _a.templateSlug, fuseApi = _a.fuseApi, setPreviewFirstTime = _a.setPreviewFirstTime;
+    var downloadCsvExample = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            window.open("/api/v1/importer/templates/".concat(templateSlug, "/preview.csv?api_token=").concat(fuseApi.apiToken));
+            setPreviewFirstTime(false);
+            return [2 /*return*/];
+        });
+    }); };
+    return (_jsx(Content, __assign({ justifyCenter: true, alignCenter: true }, { children: _jsxs(Wrapper, { children: [_jsx(LeftSection, __assign({ mt: 66 }, { children: _jsx(Div, __assign({ maxw: 448, w100: true }, { children: spreedSheetIcon })) })), _jsx(RightSection, { children: _jsxs(Div, __assign({ maxw: 448, w100: true }, { children: [_jsx(Div, __assign({ h2: true }, { children: "You're about to preview your importer. " })), _jsx(Div, __assign({ mt: 16, body1: true }, { children: "Download our example CSV to try out your importer. We have randomly generated it so you can see how Fuse transforms the data.." })), _jsxs(Button, __assign({ mt: 40, w: 189, onClick: downloadCsvExample }, { children: [downloadIcon, " ", _jsx(Span, __assign({ ml: 6 }, { children: " Download CSV " }))] })), _jsxs(Div, __assign({ mt: 40, dInline: true }, { children: [_jsx(Span, __assign({ buttonTextSmall: true }, { children: "Note:" })), _jsx(Span, __assign({ helperText: true, ml: 6 }, { children: "This screen will not exist once you install the importer on your website." }))] }))] })) })] }) })));
+};
+var downloadIcon = (_jsxs("svg", __assign({ width: "16", height: "17", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M1.66665 9.00008C1.33331 8.00008 1.33331 7.00008 1.33331 6.30432C1.33331 3.98554 3.40963 1.66675 5.97089 1.66675C7.68745 1.66675 9.18618 2.59936 9.98804 3.98554H10.6085C12.5294 3.98554 14.3333 5.33341 14.3333 7.00008C14.3333 7.66675 14.3333 8.33341 14 9.00008", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M4.94446 13.2209L7.66668 15.8331L10.3889 13.2209", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M7.66669 15.1462L7.66669 7.75005", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })] })));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/Importer/PreviewModeBanner.js

@@ -10,9 +10,6 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { theme } from "../styled/theme";
-import { Div, Span } from "../styled/utils";
-export var PreviewModeBanner = function () {
-    return (_jsxs(Div, __assign({ bg: theme.colors.blue100, h: 80, alignCenter: true }, { children: [_jsx(Div, __assign({ ml: 33, mr: 8 }, { children: infoIcon })), _jsx(Span, __assign({ mr: 16 }, { children: "You’re currently in Preview mode." }))] })));
-};
-var infoIcon = (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("circle", { cx: "14", cy: "2.5", r: "2.5", fill: "#0EBEBE" }), _jsx("path", { d: "M15.5075 8H6L5 10.5L10 11L6.57474 18.9354C6.57474 18.9354 6.40657 20.1663 6.57474 20.9247C6.76276 21.7725 6.97074 22.2838 7.56727 22.9139C8.6672 24.0757 9.95115 24.1037 11.5374 23.9085C14.2577 23.5737 17 19.5 17 19.5L15.5075 17.9408C15.5075 17.9408 13.5223 19.93 12.5298 19.93C11.5373 19.93 11.5374 18.9354 11.5374 18.9354L15.5075 8Z", fill: "#0EBEBE" })] })));
+import { Div, Span, theme } from "../styled";
+import { infoIcon } from "./common/icons";
+export var PreviewModeBanner = function () { return (_jsxs(Div, __assign({ bg: theme.colors.blue100, h: 80, alignCenter: true }, { children: [_jsx(Div, __assign({ ml: 33, mr: 8 }, { children: infoIcon })), _jsx(Span, __assign({ mr: 16 }, { children: "You’re currently in Preview mode." }))] }))); };

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

@@ -13,12 +13,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Modal, Button } from "../..";
 import { Div } from "../../styled/utils";
-import { useImporterContext } from "../ImporterContextProvider";
-import { useSpreadsheetReviewContext } from "../SpreadsheetReviewContextProvider";
+import { useImporterContext } from "../contexts/ImporterContextProvider";
+import { useReviewContext } from "./ReviewContextProvider";
 export var AppResponseModal = function () {
     var _a = useState(false), isAppResponseModalOpen = _a[0], setIsAppResponseModalOpen = _a[1];
     var onCloseImporter = useImporterContext().onClose;
-    var _b = useSpreadsheetReviewContext(), appResponse = _b.appResponse, importWasSuccessful = _b.importWasSuccessful;
+    var _b = useReviewContext(), appResponse = _b.appResponse, importWasSuccessful = _b.importWasSuccessful;
     useEffect(function () {
         if (appResponse)
             setIsAppResponseModalOpen(true);

package/lib/esm/Importer/Review/ReviewContextProvider.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { AppResponse, Field, OnValidateRecord, RecordDataSet } from "../../types";
+import { OnDataSetChanged, OnValidationStateChanged } from "../common/Spreadsheet";
+declare type State = {
+    previewInitialDataSet: RecordDataSet;
+    previewFields: Field[];
+    reviewInitialDataSet: RecordDataSet;
+    reviewFields: Field[];
+    appResponse: AppResponse;
+    isSubmitting: boolean;
+    isSubmitDisabled: boolean;
+    importWasSuccessful: boolean;
+    options: {
+        batchValidationDelayMs: number;
+        batchValidationSize: number;
+    };
+    onValidateRecord: OnValidateRecord;
+    onDataSetChanged: OnDataSetChanged;
+    onValidationStateChanged: OnValidationStateChanged;
+    onSubmit: () => void;
+};
+declare type Props = {
+    children: JSX.Element;
+};
+export declare const ReviewContextProvider: ({ children }: Props) => JSX.Element;
+export declare const useReviewContext: () => State;
+export {};