npm - fuse-importer - Versions diffs - 0.21.0 → 0.23.2 - Mend

fuse-importer 0.21.0 → 0.23.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,259 @@
+<div>
+   <center>
+      <a href="https://fuse.flatironsdevelopment.com/users/sign-up?utm_source=npmjs&utm_medium=Fuse+importer+logo&utm_campaign=NPM">
+      <img src="https://wp.flatironsdevelopment.com/wp-content/uploads/2022/07/fuse-logo.png">
+      </a>
+   </center>
+   <br>
+   <br>
+   <p>
+      Flatirons Fuse is a customizable and powerful CSV Importer that works with all front-end languages.
+   </p>
+</div>
+## Table of Contents
+- [Installation](#installation)
+- [Introduction](#introduction)
+- [Registration](#registration)
+- [Create Your First Template](#create-your-first-template)
+- [Getting started](#getting-started)
+- [More Examples](#more-examples)
+- [Usage](#usage)
+  - [FuseImporter Hooks](#fuseimporter-hooks)
+    - [`show`](#show)
+    - [`close`](#close)
+    - [`onClose`](#onclose)
+    - [`onValidateRecord`](#onvalidaterecord)
+    - [`formatRecord`](#formatrecord)
+    - [`onSubmit`](#onsubmit)
+## Installation
+You can use Yarn, NPM, or a CDN to install the importer.
+Install with npm:
+```bash
+npm install fuse-importer --save
+```
+Install with yarn:
+```bash
+yarn add fuse-importer
+```
+Install with CDN:
+```html
+<script
+  type="text/javascript"
+  src="https://unpkg.com/fuse-importer@latest.js"
+></script>
+```
+## Introduction
+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 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).
+For more information see our [full documentation.](https://fuse-docs.flatironsdevelopment.com?utm_source=npmjs&utm_medium=Fuse+importer+Full+Documentation&utm_campaign=NPM)
+Check it out in action:
+<center>
+    <a href="https://fuse.flatironsdevelopment.com/users/sign-up?utm_source=npmjs&utm_medium=Fuse+importer+Gif&utm_campaign=NPM">
+    <img src="https://wp.flatironsdevelopment.com/wp-content/uploads/2022/07/Flatirons-Fuse-users-Columns-7-July-2022.gif">
+    </a>
+</center>
+## 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).
+## Create Your First Template
+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.
+## Getting started
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      type="text/javascript"
+      src="https://unpkg.com/fuse-importer@latest"
+    ></script>
+    <script type="text/javascript">
+      const organizationApiKey = "YOUR ORGANIZATIONS API KEY";
+      const templateId = "YOUR TEMPLATE ID";
+      const importer = new FuseImporter(organizationApiKey, templateId);
+      importer.onValidateRecord = async (record) => {
+        // return no frontend validation errors
+        return {};
+      };
+      importer.onSubmit = async (records) => {
+        // an empty hash will tell us the import was successful!
+        return {
+          message: "Your data was imported successfully",
+          errors: {},
+        };
+      };
+      window.showFuseImporter = () => {
+        if (
+          organizationApiKey.indexOf("YOUR") !== -1 ||
+          templateId.indexOf("YOUR") !== -1
+        ) {
+          window.confirm(
+            "You need to configure your organization api key and template id."
+          );
+          return;
+        }
+        importer.show();
+      };
+    </script>
+  </head>
+  <body>
+    <button onclick="javascript:showFuseImporter()">Show Importer</button>
+  </body>
+</html>
+```
+## 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)
+## Usage
+```typescript
+import FuseImporter from "fuse-importer";
+const organizationApiKey = "YOUR ORGANIZATIONS API KEY";
+const templateId = "YOUR TEMPLATE ID";
+const importer = new FuseImporter(organizationApiKey, templateId);
+```
+### FuseImporter Hooks
+Hooks allow you to show the importer, run validations, and submit records to your backend.
+#### `show`
+The show function does exactly what it sounds like; it launches the importer. Ensure you have initialized the importer properly beforehand. Use this function like so:
+```typescript
+importer.show();
+```
+#### `close`
+The close function allows you to remove the importer from the view.
+```typescript
+importer.close();
+```
+#### `onClose`
+The onClose function allows you to be notified when the importer is removed from the view.
+```typescript
+importer.onClose = () => {
+  console.log("The importer was closed!");
+};
+```
+#### `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
+Return values:
+- If the record has no errors, we expect you to return an empty object: `return {}`;
+- If the record has validation errors, you can specify them like so:
+```typescript
+importer.onValidateRecord = async (record) => {
+  const errors = {};
+  // force emails to include gmail
+  if (!record.email?.includes("gmail")) {
+    errors["email"] = "Email must be from Gmail";
+  }
+  return errors;
+};
+```
+#### `formatRecord`
+The `formatRecord` hook can be used to format data automatically on behalf of a user. For example, if you have a field called `first_name` and you know that your system always requires `first_name` to be capitalized, you can use this callback to uppercase all `first_name` records like so:
+```typescript
+importer.formatRecord = (record) => {
+  const newRecord = { ...record };
+  // capitalize first letter in first_name
+  if (typeof newRecord.first_name === "string") {
+    newRecord.first_name =
+      newRecord.first_name.charAt(0).toUpperCase() +
+      newRecord.first_name.slice(1);
+  }
+  return newRecord;
+};
+```
+#### `onSubmit`
+`onSubmit` will pass all records to you after the user has made any necessary corrections to frontend validations. This callback expects you to submit the records to your backend in whatever way you typically would, we do not submit the records for you.
+This callback also allows you to pass back any backend errors for specific rows. Each record passed to this callback will have a unique identifier under the key `record._meta.id`. In this case of a backend validation or error occurring, you can tell the importer to show a specific error to the user for a row. Note that after submission, only records with errors will remain visible to the user.
+Return values:
+- If there were no backend errors, pass back an empty errors object and a message to show to the user like so:
+```typescript
+importer.onSubmit = async (records) => {
+  // submit to backend here
+  let message = "Data imported successfully";
+  return {
+    message,
+    errors: {},
+  };
+};
+```
+- If you find an error with a record in your backend, you can tell the importer to show the error to the user like so:
+```typescript
+importer.onSubmit = async (records) => {
+  // submit to your backend here
+  return {
+    errors: {
+      [records[0]._meta.id]: {
+        email: "Email is already taken. Emails must be unique.",
+        first_name: "First Name must be capitalized.",
+      },
+    },
+  };
+};
+```

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

@@ -1,6 +1,7 @@
 import Fuse from "fuse.js";
 import React from "react";
 import { ImporterOptions, OnValidateBatch, OnValidateRecord, FormatRecord } from "../types";
+import { ImporterStylePreferences } from "./theme";
 import { FuseApi } from "./FuseApi";
 export declare const fusejsOptions: Fuse.IFuseOptions<string>;
 export declare type HeaderMatchings = {
@@ -20,8 +21,28 @@ export declare type TemplateHeader = {
     column_type: string;
     internal_key: string;
     values: string[];
+    pattern: string;
 };
-declare type State = {
+export declare type Organization = {
+    id: number;
+    name: string;
+    trial_mode: boolean;
+    plan: {
+        title: string;
+        allow_style_customization: boolean;
+        has_records_limit: boolean;
+        allowed_records: number;
+    };
+};
+export declare type Column = {
+    column_type: string;
+    internal_key: string;
+    label: string;
+    pattern: string;
+    required: boolean;
+    values: string[];
+};
+export declare type State = {
     resetImport: () => void;
     currentStepIndex: number;
     setCurrentStepIndex: React.Dispatch<number>;
@@ -46,9 +67,10 @@ declare type State = {
     fuseApi: FuseApi;
     formatRecord: FormatRecord;
     importerOptions: ImporterOptions;
-    canOrganizationCustomize: boolean;
+    theme: any;
+    logoURL: string;
 };
-declare type Props = {
+export declare type Props = {
     templateSlug: string;
     apiToken: string;
     options: ImporterOptions;
@@ -58,6 +80,11 @@ declare type Props = {
     onValidateRecord?: OnValidateRecord;
     onValidateBatch?: OnValidateBatch;
 };
+export declare type TemplateInfo = {
+    columns: Column[];
+    importer_style_preferences: ImporterStylePreferences;
+    organization: Organization;
+    name: string;
+};
 export declare const ImporterContextProvider: ({ templateSlug, apiToken, children, options, onClose, formatRecord, onValidateBatch, onValidateRecord, }: Props) => JSX.Element;
 export declare const useImporterContext: () => State;
-export {};

package/lib/esm/Importer/ImporterContextProvider.js CHANGED Viewed

@@ -47,9 +47,10 @@ 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 { createContext, useContext, useEffect, useMemo, useState, } from "react";
 import { FieldTypes, } from "../types";
 import { getColumnType } from "./common/utils";
+import { theme, getCustomTheme, } from "./theme";
 import { FuseApi } from "./FuseApi";
 export var fusejsOptions = {
     includeScore: true,
@@ -63,21 +64,24 @@ export var ImporterContextProvider = function (_a) {
     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(false), canOrganizationCustomize = _g[0], _setCanOrganizationCustomize = _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(options.env, apiToken);
-    var uploadedDataHeaders = uploadedData &&
-        uploadedData[0].map(function (ud) { return (typeof ud === "number" ? ud.toString() : ud); });
-    var setCanOrganizationCustomize = function (organization) {
-        var _a;
-        var customizablePlans = ["pro", "unlimited"];
-        var planTitle = (_a = organization.plan) === null || _a === void 0 ? void 0 : _a.title;
-        var isPlanCustomizable = customizablePlans.includes(planTitle);
-        _setCanOrganizationCustomize(isPlanCustomizable);
-    };
+    var _g = useState(null), organization = _g[0], setOrganization = _g[1];
+    var _h = useState({
+        theme: theme,
+        logoURL: null,
+    }), style = _h[0], setStyle = _h[1];
+    var _j = useState(null), templateHeaderMatchings = _j[0], setTemplateHeaderMatchings = _j[1];
+    var _k = useState(null), enumFieldValueMatchings = _k[0], setEnumFieldValueMatchings = _k[1];
+    var _l = useState(null), uploadedDataEnumFieldValues = _l[0], setUploadedDataEnumFieldValues = _l[1];
+    var fuseApi = useMemo(function () { return new FuseApi(options.env, apiToken); }, [
+        options.env,
+        apiToken,
+    ]);
+    var uploadedDataHeaders = useMemo(function () {
+        return uploadedData &&
+            uploadedData[0].map(function (ud) {
+                return typeof ud === "number" ? ud.toString() : ud;
+            });
+    }, [uploadedData]);
     useEffect(function () {
         if (!templateHeaderMatchings)
             return;
@@ -102,25 +106,30 @@ export var ImporterContextProvider = function (_a) {
         });
         setUploadedDataEnumFieldValues(_uploadedDataEnumFieldValues);
     }, [templateHeaderMatchings]);
+    useEffect(function () {
+        if (uploadedData)
+            setHeadersFromDataset();
+    }, [uploadedData]);
     useEffect(function () {
         (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var data, organization, error_1, errorMsg;
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var _a, organization_1, columns, importer_style_preferences, error_1, errorMsg;
+            var _b, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
-                        _c.trys.push([0, 2, , 3]);
+                        _d.trys.push([0, 2, , 3]);
                         return [4 /*yield*/, fuseApi.get("/api/v1/importer/templates/".concat(templateSlug))];
                     case 1:
-                        data = (_c.sent()).data;
-                        organization = data.organization;
-                        setCanOrganizationCustomize(organization);
-                        setTemplateHeaders(data.columns);
-                        setInTrialMode(organization.trial_mode);
+                        _a = (_d.sent()).data, organization_1 = _a.organization, columns = _a.columns, importer_style_preferences = _a.importer_style_preferences;
+                        setOrganization(organization_1);
+                        setTemplateHeaders(columns);
+                        if (organization_1.plan && organization_1.plan.allow_style_customization) {
+                            setStyle(getCustomTheme(importer_style_preferences));
+                        }
                         return [3 /*break*/, 3];
                     case 2:
-                        error_1 = _c.sent();
-                        errorMsg = ((_b = (_a = error_1.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) ||
+                        error_1 = _d.sent();
+                        errorMsg = ((_c = (_b = error_1.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.message) ||
                             "There was an error preventing the data importer from loading. Check your API Token and try again.";
                         setTemplateError(errorMsg);
                         return [3 /*break*/, 3];
@@ -129,10 +138,6 @@ export var ImporterContextProvider = function (_a) {
             });
         }); })();
     }, []);
-    useEffect(function () {
-        if (uploadedData)
-            setHeadersFromDataset();
-    }, [uploadedData]);
     var resetImport = function () {
         setUploadedData(null);
         setTemplateHeaderMatchings(null);
@@ -147,6 +152,7 @@ export var ImporterContextProvider = function (_a) {
         });
         setTemplateHeaderMatchings(_templateHeaderMatchings);
     };
+    var inTrialMode = organization === null || organization === void 0 ? void 0 : organization.trial_mode;
     var value = {
         setUploadedData: setUploadedData,
         currentStepIndex: currentStepIndex,
@@ -172,7 +178,8 @@ export var ImporterContextProvider = function (_a) {
         inTrialMode: inTrialMode,
         onClose: onClose,
         fuseApi: fuseApi,
-        canOrganizationCustomize: canOrganizationCustomize,
+        theme: style.theme,
+        logoURL: style.logoURL,
     };
     return (_jsx(ImporterContext.Provider, __assign({ value: value }, { children: children })));
 };

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

@@ -14,6 +14,7 @@ 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 styled, { css } from "styled-components";
 import { FieldTypes } from "../..";
 import { Div } from "../../styled/utils";
@@ -26,11 +27,11 @@ var Dot = styled(Div)(function (_a) {
 });
 var Matcher = function () {
     var _a = useImporterContext(), matcherSubstep = _a.matcherSubstep, templateHeaders = _a.templateHeaders;
-    var enumFieldsCount = templateHeaders.filter(function (th) { return th.column_type === FieldTypes.enum; }).length;
-    var dots = [];
-    for (var step = 0; step < 2; step++)
-        dots.push(_jsx(Dot, { isSelected: matcherSubstep === step }, step));
-    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 && dots })) })), matcherSubstep === 0 && _jsx(HeaderMatcher, {}), matcherSubstep === 1 && _jsx(EnumFieldsMatchers, {})] }));
+    var enumFieldsCount = useMemo(function () {
+        return templateHeaders.filter(function (th) { return th.column_type === FieldTypes.enum; }).length;
+    }, [templateHeaders]);
+    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 };
 var templateObject_1, templateObject_2;

package/lib/esm/Importer/PreviewModeBanner.d.ts ADDED Viewed

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

package/lib/esm/Importer/PreviewModeBanner.js ADDED Viewed

@@ -0,0 +1,20 @@
+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 { theme } from "../styled/theme";
+import { Div, Span } from "../styled/utils";
+import { useImporterContext } from "./ImporterContextProvider";
+export var PreviewModeBanner = function () {
+    var previewMode = useImporterContext().importerOptions.previewMode;
+    return previewMode ? (_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." }))] }))) : null;
+};
+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" })] })));

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

@@ -14,18 +14,11 @@ import { useMemo } from "react";
 import { Div } from "../../styled/utils";
 import { FieldTypes } from "../../types";
 import { Spreadsheet } from "../common/Spreadsheet";
+import { isFloat, isInteger, isTrue } from "../common/Spreadsheet/common/index";
 import { getColumnType, getSpreadsheetRowWidth } from "../common/utils";
 import { useImporterContext } from "../ImporterContextProvider";
 import { useSpreadsheetReviewContext } from "../SpreadsheetReviewContextProvider";
 import { AppResponseModal } from "./AppResponseModal";
-var valueIsTrue = function (value) {
-    var _value = (value || "").toString().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, formatRecord = _a.formatRecord;
     return useMemo(function () {
@@ -50,11 +43,11 @@ var useInitialData = function () {
                 if (columnType === FieldTypes.enum)
                     record[key] = enumFieldValueMatchings[templateLabel][value];
                 if (columnType === FieldTypes.boolean)
-                    record[key] = valueIsTrue(value);
+                    record[key] = isTrue(value);
                 if (columnType === FieldTypes.float)
-                    record[key] = valueIsNumber(value) ? parseFloat(value) : undefined;
+                    record[key] = isFloat(value) ? parseFloat(value) : value;
                 if (columnType === FieldTypes.integer)
-                    record[key] = valueIsInteger(value) ? parseInt(value) : undefined;
+                    record[key] = isInteger(value) ? parseInt(value) : value;
             });
             return formatRecord ? formatRecord(record) : record;
         };
@@ -71,13 +64,16 @@ var Review = function () {
     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,
-        type: FieldTypes[templateHeader.column_type] || FieldTypes.string,
-        isRequired: templateHeader.required,
-        options: templateHeader.values,
-    }); });
+    var fields = useMemo(function () {
+        return templateHeaders.map(function (templateHeader) { return ({
+            label: templateHeader.label,
+            name: templateHeader.internal_key,
+            type: FieldTypes[templateHeader.column_type] || FieldTypes.string,
+            isRequired: templateHeader.required,
+            options: templateHeader.values,
+            pattern: templateHeader.pattern,
+        }); });
+    }, [templateHeaders]);
     var spreadsheetUI = useMemo(function () { return (_jsx(Div, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(fields, 6), options: {
                 batchValidationDelayMs: batchValidationDelayMs,
                 batchValidationSize: batchValidationSize || initialData.length,

package/lib/esm/Importer/SpreadsheetReviewContextProvider.js CHANGED Viewed

@@ -47,8 +47,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState } from "react";
-import { getUnsubmittedData } from ".";
 import { AppLoading } from "./common/AppLoading";
+import { getUnsubmittedData } from "./common/utils";
 import { useImporterContext } from "./ImporterContextProvider";
 var SpreadsheetReviewContext = createContext({});
 export var SpreadsheetReviewContextProvider = function (_a) {

package/lib/esm/Importer/Stepper.js CHANGED Viewed

@@ -31,7 +31,7 @@ var StepIndexWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __mak
     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; });
 });
 var StepperWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  user-select: none;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  user-select: none;\n  border-bottom: 1px solid ", ";\n"])), function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.gray300; });
-var Logo = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-height: 70px;\n  position: absolute;\n  left: 41px;\n"], ["\n  max-height: 70px;\n  position: absolute;\n  left: 41px;\n"])));
+var Logo = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-height: 70px;\n  max-width: 300px;\n  position: absolute;\n  left: 41px;\n"], ["\n  max-height: 70px;\n  max-width: 300px;\n  position: absolute;\n  left: 41px;\n"])));
 var StepIndex = function (_a) {
     var index = _a.index, isSelected = _a.isSelected, isCompleted = _a.isCompleted;
     return (_jsx(_Fragment, { children: isCompleted ? (_jsx(Div, __assign({ centered: true, body2: true, bold: true, mr: 8 }, { children: whiteCheckIcon }))) : (_jsx(StepIndexWrapper, __assign({ centered: true, body2: true, bold: true, mr: 8, isSelected: isSelected }, { children: index }))) }));
@@ -112,8 +112,15 @@ var Stepper = function (_a) {
         }
     };
     var goBack = function () {
-        setMatcherSubstep(0);
-        setCurrentStepIndex(currentStepIndex - 1);
+        var isMatchingColumnValues = matcherSubstep === 1;
+        var isInMachStep = currentStepIndex === 1;
+        var shouldBackOnlyMatcherSubStep = isMatchingColumnValues && isInMachStep;
+        if (shouldBackOnlyMatcherSubStep) {
+            setMatcherSubstep(matcherSubstep - 1);
+        }
+        else {
+            setCurrentStepIndex(currentStepIndex - 1);
+        }
     };
     var skipStep = function () {
         setStep();

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

@@ -61,7 +61,10 @@ var ImporterDropzone = function () {
             reader.onload = function (event) {
                 var results = event.target.result;
                 var getDataFromFile = function (fileResults) {
-                    var workBook = XLSX.read(fileResults, { type: "array" });
+                    var workBook = XLSX.read(fileResults, {
+                        type: "array",
+                        raw: true,
+                    });
                     var workBookName = workBook.SheetNames[0];
                     var sheet = workBook.Sheets[workBookName];
                     return XLSX.utils.sheet_to_json(sheet, { header: 1 });