fuse-importer 0.24.0 → 0.24.4

package/README.md

@@ -94,8 +94,8 @@ If you don’t have a Importer yet, you can go over [Create Your First Importer]
     ></script>
     <script type="text/javascript">
       const organizationApiKey = "YOUR ORGANIZATIONS API KEY";
-      const templateId = "YOUR IMPORTER ID";
-      const importer = new FuseImporter(organizationApiKey, templateId);
+      const importerId = "YOUR IMPORTER ID";
+      const importer = new FuseImporter(organizationApiKey, importerId);
 
       importer.onValidateRecord = async (record) => {
         // return no frontend validation errors
@@ -113,7 +113,7 @@ If you don’t have a Importer yet, you can go over [Create Your First Importer]
       window.showFuseImporter = () => {
         if (
           organizationApiKey.indexOf("YOUR") !== -1 ||
-          templateId.indexOf("YOUR") !== -1
+          importerId.indexOf("YOUR") !== -1
         ) {
           window.confirm(
             "You need to configure your organization api key and Importer id."
@@ -144,8 +144,8 @@ If you don’t have a Importer yet, you can go over [Create Your First Importer]
 import FuseImporter from "fuse-importer";
 
 const organizationApiKey = "YOUR ORGANIZATIONS API KEY";
-const templateId = "YOUR IMPORTER ID";
-const importer = new FuseImporter(organizationApiKey, templateId);
+const importerId = "YOUR IMPORTER ID";
+const importer = new FuseImporter(organizationApiKey, importerId);
 ```
 
 ### FuseImporter Hooks

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

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

package/lib/esm/Importer/ImporterWithContext.js

@@ -30,17 +30,18 @@ import { ReviewContextProvider } from "./Review/ReviewContextProvider";
 import { Stepper } from "./Stepper/index";
 import { TrialModeBanner } from "./TrialModeBanner";
 import Uploader from "./Uploader";
+import { useTranslation } from "react-i18next";
 var steps = [
     {
-        label: "Upload",
+        label: "general:steps.upload",
         component: _jsx(Uploader, {}),
     },
     {
-        label: "Match",
+        label: "general:steps.match",
         component: _jsx(Matcher, {}),
     },
     {
-        label: "Review",
+        label: "general:steps.review",
         component: _jsx(Review, {}),
     },
 ];
@@ -52,18 +53,14 @@ var Content = styled(Div)(function (_a) {
 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);
+    var t = useTranslation().t;
     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, {});
+        return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [previewMode && _jsx(PreviewModeBanner, {}), !previewMode && _jsx(TrialModeBanner, {}), _jsx(Stepper, { stepLabels: steps.map(function (step) { return t(step.label); }), logoURL: logoURL })] }), _jsx(Content, { children: steps[currentStepIndex].component }), inTrialMode && (_jsx(Content, { children: _jsx(Footer, {}) }))] }));
     }
     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() })) })] })));
+    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 ? _jsx(PreviewFirstTime, {}) : renderContent() })) })] })));
 };
 var templateObject_1, templateObject_2;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const EnumFieldMatcher: ({ templateHeaderLabel }: {
     templateHeaderLabel: any;
 }) => JSX.Element;

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

@@ -21,9 +21,11 @@ import { MAX_VISIBLE_ROWS } from "../../common";
 import { MatcherStatus } from "../../common/types";
 import { EnumFieldMatcherContextProvider } from "../EnumFieldMatcherContext";
 import { tableColumns } from "./tableColumns";
+import { useTranslation } from "react-i18next";
 export var EnumFieldMatcher = function (_a) {
     var _b;
     var templateHeaderLabel = _a.templateHeaderLabel;
+    var t = useTranslation("match").t;
     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];
@@ -50,5 +52,7 @@ export var EnumFieldMatcher = function (_a) {
         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") })), _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 }) })) }))] }));
+    return (_jsxs(Div, { children: [_jsx(Div, __assign({ h5: true, mb: 16 }, { children: t("columns.values_for_the_column", {
+                    column: "".concat(templateHeaderLabel).concat(isRequired ? "*" : ""),
+                }) })), _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 }) })) }))] }));
 };

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcher/tableColumns.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const tableColumns: ({
     header: string;
     width: number;

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

@@ -13,12 +13,13 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 import { Autocomplete } from "../../../../common/inputs/Autocomplete";
 import { Div } from "../../../../styled/utils";
 import { useImporterContext } from "../../../contexts/ImporterContextProvider";
-import { matchedIndicatorUI, unmatchedIndicatorUI } from "../../common";
+import { MatchedIndicatorUI, UnmatchedIndicatorUI } from "../../common";
 import { MatcherStatus } from "../../common/types";
 import { useEnumFieldMatcherContext } from "../EnumFieldMatcherContext";
+import { useTranslation } from "react-i18next";
 export var tableColumns = [
     {
-        header: "Your Column Values",
+        header: "match:columns.your_columns",
         width: 1,
         Content: function (_a) {
             var uploadedDataValue = _a.uploadedDataValue;
@@ -26,11 +27,12 @@ export var tableColumns = [
         },
     },
     {
-        header: "Our Column Values",
+        header: "match:columns.our_columns",
         width: 1,
         Content: function (_a) {
             var _b;
             var uploadedDataValue = _a.uploadedDataValue, uploadedDataValueMatching = _a.uploadedDataValueMatching;
+            var t = useTranslation("match").t;
             var _c = useImporterContext(), templateHeaders = _c.templateHeaders, enumFieldValueMatchings = _c.enumFieldValueMatchings, setEnumFieldValueMatchings = _c.setEnumFieldValueMatchings;
             var templateHeaderLabel = useEnumFieldMatcherContext().templateHeaderLabel;
             var valueOptions = (_b = templateHeaders.find(function (th) { return th.label === templateHeaderLabel; })) === null || _b === void 0 ? void 0 : _b.values;
@@ -39,20 +41,18 @@ export var tableColumns = [
                 newEnumFieldValueMatchings[templateHeaderLabel][uploadedDataValue] = selected;
                 setEnumFieldValueMatchings(newEnumFieldValueMatchings);
             };
-            return (_jsx(Div, __assign({ w100: true }, { children: _jsx(Autocomplete, { w: "90%", 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: t("columns.placeholder"), onChange: onChange, value: uploadedDataValueMatching, options: valueOptions.map(function (vo) { return ({
                         value: vo,
                         label: vo,
                     }); }) }) })));
         },
     },
     {
-        header: "Status",
+        header: "match:columns.status",
         width: 1,
         Content: function (_a) {
             var status = _a.status;
-            return (_jsx(_Fragment, { children: status === MatcherStatus.matched
-                    ? matchedIndicatorUI
-                    : unmatchedIndicatorUI }));
+            return (_jsx(_Fragment, { children: status === MatcherStatus.matched ? (_jsx(MatchedIndicatorUI, {})) : (_jsx(UnmatchedIndicatorUI, {})) }));
         },
     },
 ];

package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcherContext.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-declare type State = {
+type State = {
     templateHeaderLabel: string;
 };
-declare type Props = {
+type Props = {
     templateHeaderLabel: string;
     children: JSX.Element;
 };

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

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

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

@@ -14,9 +14,11 @@ import { Div } from "../../../styled/utils";
 import { contentWidth } from "../../common/index";
 import { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { EnumFieldMatcher } from "./EnumFieldMatcher";
+import { useTranslation } from "react-i18next";
 export var EnumFieldsMatchers = function () {
+    var t = useTranslation("match").t;
     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) {
+    return (_jsxs(_Fragment, { children: [_jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: t("title") })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true, maxw: 928 }, { children: t("enum_description") }))] })), _jsx(Div, __assign({ flexColumn: true, alignCenter: true, mb: 20, centered: true }, { children: Object.keys(enumFieldValueMatchings).map(function (templateHeaderLabel, index) {
                     return (_jsx(Div, __assign({ w: contentWidth }, { children: _jsx(EnumFieldMatcher, { templateHeaderLabel: templateHeaderLabel }) }), index));
                 }) }))] }));
 };

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

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

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

@@ -24,8 +24,10 @@ import { useImporterContext } from "../../contexts/ImporterContextProvider";
 import { MAX_VISIBLE_ROWS } from "../common";
 import { MatcherStatus } from "../common/types";
 import { tableColumns } from "./tableColumns";
+import { useTranslation } from "react-i18next";
 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"])));
 var HeaderMatcher = function () {
+    var t = useTranslation("match").t;
     var _a = useImporterContext(), templateHeaders = _a.templateHeaders, templateHeaderMatchings = _a.templateHeaderMatchings;
     var templateHeaderLabels = Object.keys(templateHeaderMatchings);
     var numberOfMatchedHeaders = templateHeaderLabels.filter(function (templateHeaderLabel) { return templateHeaderMatchings[templateHeaderLabel]; }).length;
@@ -52,7 +54,10 @@ var HeaderMatcher = function () {
         dataCount: data.length,
         maxVisibleRows: MAX_VISIBLE_ROWS,
     });
-    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 }) })) }))] })) }) }));
+    return (_jsx(_Fragment, { children: _jsx(Div, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: t("title") })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: t("description", {
+                            numberOfMatchedHeaders: numberOfMatchedHeaders,
+                            totalNumberOfHeaders: templateHeaders.length,
+                        }) })), _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.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const tableColumns: ({
     header: string;
     width: number;

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

@@ -13,11 +13,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Autocomplete } from "../../../common/inputs/Autocomplete";
 import { Div } from "../../../styled/utils";
 import { useImporterContext } from "../../contexts/ImporterContextProvider";
-import { matchedIndicatorUI, unmatchedIndicatorUI } from "../common/index";
+import { MatchedIndicatorUI, UnmatchedIndicatorUI } from "../common/index";
 import { MatcherStatus } from "../common/types";
 export var tableColumns = [
     {
-        header: "Your Columns",
+        header: "match:columns.your_columns",
         width: 1,
         Content: function (_a) {
             var yourColumns = _a.yourColumns, ourColumns = _a.ourColumns;
@@ -34,7 +34,7 @@ export var tableColumns = [
         },
     },
     {
-        header: "Our Columns",
+        header: "match:columns.our_columns",
         width: 1,
         Content: function (_a) {
             var _b;
@@ -45,13 +45,11 @@ export var tableColumns = [
         },
     },
     {
-        header: "Status",
+        header: "match:columns.status",
         width: 1,
         Content: function (_a) {
             var status = _a.status;
-            return (_jsx(_Fragment, { children: status === MatcherStatus.matched
-                    ? matchedIndicatorUI
-                    : unmatchedIndicatorUI }));
+            return (_jsx(_Fragment, { children: status === MatcherStatus.matched ? (_jsx(MatchedIndicatorUI, {})) : (_jsx(UnmatchedIndicatorUI, {})) }));
         },
     },
 ];

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const greenCheckIcon: JSX.Element;
 export declare const warningIcon: JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const MAX_VISIBLE_ROWS = 5;
-export declare const matchedIndicatorUI: JSX.Element;
-export declare const unmatchedIndicatorUI: JSX.Element;
+export declare const MatchedIndicatorUI: () => JSX.Element;
+export declare const UnmatchedIndicatorUI: () => JSX.Element;

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

@@ -16,6 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
 import { colors, Div } from "../../../styled";
+import { useTranslation } from "react-i18next";
 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 }) })));
 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 }) })));
@@ -27,6 +28,12 @@ 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 })), _jsx(Div, __assign({ ml: 8 }, { children: "MATCHED" }))] }));
-export var unmatchedIndicatorUI = (_jsxs(UnmatchedIndicator, { children: [_jsx(Div, __assign({ centered: true }, { children: warningIcon })), _jsx(Div, __assign({ ml: 8 }, { children: "UNMATCHED" }))] }));
+export var MatchedIndicatorUI = function () {
+    var t = useTranslation("match").t;
+    return (_jsxs(Wrapper, { children: [_jsx(Div, __assign({ centered: true }, { children: successIcon })), _jsx(Div, __assign({ ml: 8 }, { children: t("columns.matched") }))] }));
+};
+export var UnmatchedIndicatorUI = function () {
+    var t = useTranslation("match").t;
+    return (_jsxs(UnmatchedIndicator, { children: [_jsx(Div, __assign({ centered: true }, { children: warningIcon })), _jsx(Div, __assign({ ml: 8 }, { children: t("columns.unmatched") }))] }));
+};
 var templateObject_1, templateObject_2;

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

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

package/lib/esm/Importer/PreviewFirstTime.js

@@ -28,7 +28,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -56,14 +56,14 @@ import { spreedSheetIcon } from "../common/Table/icons";
 import styled, { css } from "styled-components";
 import { Button } from "../common";
 import { useImporterContext } from "./contexts/ImporterContextProvider";
+import { useTranslation } from "react-i18next";
 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    height: 91vh;\n    display: grid;\n    padding: 40px;\n  "], ["\n    background-color: ", ";\n    height: 91vh;\n    display: grid;\n    padding: 40px;\n  "])), colors.backgroundInterface);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    display: flex;\n    flex-direction: column;\n    padding: 0 40px;\n    align-items: stretch;\n    height: 100vh;\n    justify-content: space-around;\n  "], ["\n    background-color: ", ";\n    display: flex;\n    flex-direction: column;\n    padding: 0 40px;\n    align-items: stretch;\n    height: 100vh;\n    justify-content: space-around;\n  "])), colors.backgroundInterface);
 });
-var Wrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 10px;\n  grid-auto-rows: minmax(auto, auto);\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: 10px;\n  grid-auto-rows: minmax(auto, auto);\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  justify-content: center;\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  justify-content: center;\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"])));
-var BottomSection = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n"], ["\n  display: flex;\n  justify-content: center;\n"])));
+var Wrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  flex: 1;\n\n  @media all and ", " {\n    flex-direction: column !important;\n  }\n"], ["\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  flex: 1;\n\n  @media all and ", " {\n    flex-direction: column !important;\n  }\n"])), theme.media.mobile);
+var Block = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 0px 40px;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 0px 40px;\n"])));
+var BottomSection = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: 40px;\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: 40px;\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 () {
@@ -73,8 +73,9 @@ export var PreviewFirstTime = function () {
             return [2 /*return*/];
         });
     }); };
-    return (_jsx(_Fragment, { children: _jsxs(Content, __assign({ justifyCenter: true, alignCenter: true }, { children: [_jsxs(Wrapper, { children: [_jsx(LeftSection, __assign({ mt: 66 }, { children: _jsx(Div, __assign({ maxw: 448, w100: true, alignCenter: 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." }))] }))] })) })] }), _jsx(BottomSection, { children: poweredByFlatirons })] })) }));
+    var t = useTranslation("preview").t;
+    return (_jsx(_Fragment, { children: _jsxs(Content, __assign({ justifyCenter: true, alignCenter: true }, { children: [_jsxs(Wrapper, { children: [_jsx(Block, __assign({ mt: 66 }, { children: _jsx(Div, __assign({ maxw: 448, w100: true, alignCenter: true }, { children: spreedSheetIcon })) })), _jsx(Block, { children: _jsxs(Div, __assign({ maxw: 448, w100: true }, { children: [_jsx(Div, __assign({ h2: true }, { children: t("title") })), _jsx(Div, __assign({ mt: 16, body1: true }, { children: t("description") })), _jsxs(Button, __assign({ mt: 40, w: 189, onClick: downloadCsvExample }, { children: [downloadIcon, " ", _jsx(Span, __assign({ ml: 6 }, { children: t("download") }))] })), _jsxs(Div, __assign({ mt: 40, dInline: true }, { children: [_jsx(Span, __assign({ buttonTextSmall: true }, { children: t("note.title") })), _jsx(Span, __assign({ helperText: true, ml: 6 }, { children: t("note.description") }))] }))] })) })] }), _jsx(BottomSection, { children: poweredByFlatirons })] })) }));
 };
 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 poweredByFlatirons = (_jsxs("svg", __assign({ width: "222", height: "22", viewBox: "0 0 222 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M3.47895 15V6.6H6.41895C7.07495 6.6 7.61895 6.712 8.05095 6.936C8.48295 7.152 8.80295 7.452 9.01095 7.836C9.22695 8.212 9.33495 8.64 9.33495 9.12C9.33495 9.576 9.23095 9.996 9.02295 10.38C8.82295 10.756 8.50695 11.056 8.07495 11.28C7.64295 11.504 7.09095 11.616 6.41895 11.616H4.75095V15H3.47895ZM4.75095 10.572H6.35895C6.95895 10.572 7.38695 10.444 7.64295 10.188C7.90695 9.924 8.03895 9.568 8.03895 9.12C8.03895 8.656 7.90695 8.296 7.64295 8.04C7.38695 7.776 6.95895 7.644 6.35895 7.644H4.75095V10.572ZM13.0001 15.144C12.4321 15.144 11.9201 15.016 11.4641 14.76C11.0161 14.496 10.6601 14.132 10.3961 13.668C10.1321 13.196 10.0001 12.648 10.0001 12.024C10.0001 11.4 10.1321 10.856 10.3961 10.392C10.6681 9.92 11.0321 9.556 11.4881 9.3C11.9441 9.036 12.4521 8.904 13.0121 8.904C13.5801 8.904 14.0881 9.036 14.5361 9.3C14.9921 9.556 15.3521 9.92 15.6161 10.392C15.8881 10.856 16.0241 11.4 16.0241 12.024C16.0241 12.648 15.8881 13.196 15.6161 13.668C15.3521 14.132 14.9921 14.496 14.5361 14.76C14.0801 15.016 13.5681 15.144 13.0001 15.144ZM13.0001 14.052C13.3041 14.052 13.5841 13.976 13.8401 13.824C14.1041 13.672 14.3161 13.448 14.4761 13.152C14.6361 12.848 14.7161 12.472 14.7161 12.024C14.7161 11.576 14.6361 11.204 14.4761 10.908C14.3241 10.604 14.1161 10.376 13.8521 10.224C13.5961 10.072 13.3161 9.996 13.0121 9.996C12.7081 9.996 12.4241 10.072 12.1601 10.224C11.9041 10.376 11.6961 10.604 11.5361 10.908C11.3761 11.204 11.2961 11.576 11.2961 12.024C11.2961 12.472 11.3761 12.848 11.5361 13.152C11.6961 13.448 11.9041 13.672 12.1601 13.824C12.4161 13.976 12.6961 14.052 13.0001 14.052ZM18.365 15L16.613 9.048H17.885L19.037 13.536L20.333 9.048H21.749L23.045 13.536L24.197 9.048H25.469L23.717 15H22.409L21.041 10.32L19.673 15H18.365ZM29.0782 15.144C28.4942 15.144 27.9742 15.016 27.5182 14.76C27.0702 14.496 26.7182 14.132 26.4622 13.668C26.2062 13.204 26.0782 12.664 26.0782 12.048C26.0782 11.424 26.2022 10.876 26.4502 10.404C26.7062 9.932 27.0582 9.564 27.5062 9.3C27.9622 9.036 28.4902 8.904 29.0902 8.904C29.6742 8.904 30.1822 9.036 30.6142 9.3C31.0462 9.556 31.3822 9.9 31.6222 10.332C31.8622 10.764 31.9822 11.24 31.9822 11.76C31.9822 11.84 31.9782 11.928 31.9702 12.024C31.9702 12.112 31.9662 12.212 31.9582 12.324H27.3262C27.3662 12.9 27.5542 13.34 27.8902 13.644C28.2342 13.94 28.6302 14.088 29.0782 14.088C29.4382 14.088 29.7382 14.008 29.9782 13.848C30.2262 13.68 30.4102 13.456 30.5302 13.176H31.8022C31.6422 13.736 31.3222 14.204 30.8422 14.58C30.3702 14.956 29.7822 15.144 29.0782 15.144ZM29.0782 9.948C28.6542 9.948 28.2782 10.076 27.9502 10.332C27.6222 10.58 27.4222 10.956 27.3502 11.46H30.7102C30.6862 10.996 30.5222 10.628 30.2182 10.356C29.9142 10.084 29.5342 9.948 29.0782 9.948ZM33.302 15V9.048H34.442L34.55 10.176C34.758 9.784 35.046 9.476 35.414 9.252C35.79 9.02 36.242 8.904 36.77 8.904V10.236H36.422C36.07 10.236 35.754 10.296 35.474 10.416C35.202 10.528 34.982 10.724 34.814 11.004C34.654 11.276 34.574 11.656 34.574 12.144V15H33.302ZM40.4806 15.144C39.8966 15.144 39.3766 15.016 38.9206 14.76C38.4726 14.496 38.1206 14.132 37.8646 13.668C37.6086 13.204 37.4806 12.664 37.4806 12.048C37.4806 11.424 37.6046 10.876 37.8526 10.404C38.1086 9.932 38.4606 9.564 38.9086 9.3C39.3646 9.036 39.8926 8.904 40.4926 8.904C41.0766 8.904 41.5846 9.036 42.0166 9.3C42.4486 9.556 42.7846 9.9 43.0246 10.332C43.2646 10.764 43.3846 11.24 43.3846 11.76C43.3846 11.84 43.3806 11.928 43.3726 12.024C43.3726 12.112 43.3686 12.212 43.3606 12.324H38.7286C38.7686 12.9 38.9566 13.34 39.2926 13.644C39.6366 13.94 40.0326 14.088 40.4806 14.088C40.8406 14.088 41.1406 14.008 41.3806 13.848C41.6286 13.68 41.8126 13.456 41.9326 13.176H43.2046C43.0446 13.736 42.7246 14.204 42.2446 14.58C41.7726 14.956 41.1846 15.144 40.4806 15.144ZM40.4806 9.948C40.0566 9.948 39.6806 10.076 39.3526 10.332C39.0246 10.58 38.8246 10.956 38.7526 11.46H42.1126C42.0886 10.996 41.9246 10.628 41.6206 10.356C41.3166 10.084 40.9366 9.948 40.4806 9.948ZM47.4164 15.144C46.8404 15.144 46.3324 15.008 45.8924 14.736C45.4524 14.464 45.1084 14.092 44.8604 13.62C44.6124 13.148 44.4884 12.612 44.4884 12.012C44.4884 11.412 44.6124 10.88 44.8604 10.416C45.1084 9.944 45.4524 9.576 45.8924 9.312C46.3404 9.04 46.8524 8.904 47.4284 8.904C47.9004 8.904 48.3124 8.996 48.6644 9.18C49.0244 9.364 49.3044 9.624 49.5044 9.96V6.36H50.7764V15H49.6364L49.5044 14.076C49.3124 14.356 49.0484 14.604 48.7124 14.82C48.3764 15.036 47.9444 15.144 47.4164 15.144ZM47.6444 14.04C48.1884 14.04 48.6324 13.852 48.9764 13.476C49.3284 13.1 49.5044 12.616 49.5044 12.024C49.5044 11.424 49.3284 10.94 48.9764 10.572C48.6324 10.196 48.1884 10.008 47.6444 10.008C47.1004 10.008 46.6524 10.196 46.3004 10.572C45.9484 10.94 45.7724 11.424 45.7724 12.024C45.7724 12.416 45.8524 12.764 46.0124 13.068C46.1724 13.372 46.3924 13.612 46.6724 13.788C46.9604 13.956 47.2844 14.04 47.6444 14.04ZM58.7516 15.144C58.2876 15.144 57.8756 15.052 57.5156 14.868C57.1636 14.684 56.8836 14.424 56.6756 14.088L56.5436 15H55.4036V6.36H56.6756V9.972C56.8676 9.692 57.1316 9.444 57.4676 9.228C57.8036 9.012 58.2356 8.904 58.7636 8.904C59.3396 8.904 59.8476 9.04 60.2876 9.312C60.7276 9.584 61.0716 9.956 61.3196 10.428C61.5756 10.9 61.7036 11.436 61.7036 12.036C61.7036 12.636 61.5756 13.172 61.3196 13.644C61.0716 14.108 60.7276 14.476 60.2876 14.748C59.8476 15.012 59.3356 15.144 58.7516 15.144ZM58.5356 14.04C59.0796 14.04 59.5276 13.856 59.8796 13.488C60.2316 13.112 60.4076 12.624 60.4076 12.024C60.4076 11.632 60.3276 11.284 60.1676 10.98C60.0076 10.676 59.7876 10.44 59.5076 10.272C59.2276 10.096 58.9036 10.008 58.5356 10.008C57.9916 10.008 57.5436 10.196 57.1916 10.572C56.8476 10.948 56.6756 11.432 56.6756 12.024C56.6756 12.624 56.8476 13.112 57.1916 13.488C57.5436 13.856 57.9916 14.04 58.5356 14.04ZM63.2715 17.64L64.6995 14.508H64.3515L61.9995 9.048H63.3795L65.2035 13.452L67.1115 9.048H68.4555L64.6155 17.64H63.2715Z", fill: "#7F7F7F" }), _jsx("path", { d: "M78.5716 19L87.8742 19C88.1922 19 88.4912 18.8488 88.6796 18.5927L93.8355 11.5863C94.0926 11.2368 94.0951 10.7614 93.8416 10.4093L88.507 3L78.1581 18.2188C77.9324 18.5508 78.1702 19 78.5716 19Z", fill: "#FD395E" }), _jsx("path", { d: "M78.1581 3.78122L83.067 11L88.507 3.00006L78.5716 3.00006C78.1702 3.00006 77.9324 3.44926 78.1581 3.78122Z", fill: "url(#paint0_linear_4260_84209)" }), _jsx("path", { d: "M85.3068 3.00006L83.0668 11L88.5068 3.00006L85.3068 3.00006Z", fill: "#8A0E25" }), _jsx("path", { d: "M101.421 14.6799H103.759V11.1474H107.141V9.48804H103.759V7.56465H107.292V5.90525H101.421V14.6799Z", fill: "#1C1C1C" }), _jsx("path", { d: "M109.978 14.6799H115.937V12.9451H112.316V5.90525H109.978V14.6799Z", fill: "#1C1C1C" }), _jsx("path", { d: "M117.755 14.6799H120.131L120.823 12.8068H124.116L124.77 14.6799H127.335L123.953 5.90525H121.087L117.755 14.6799ZM123.563 11.1474H121.363L122.495 7.7155H122.52L123.563 11.1474Z", fill: "#1C1C1C" }), _jsx("path", { d: "M130.414 14.6799H132.752V7.64007H134.914V5.90525H128.252V7.64007H130.414V14.6799Z", fill: "#1C1C1C" }), _jsx("path", { d: "M137.512 14.6799H139.851V5.90525H137.512V14.6799Z", fill: "#1C1C1C" }), _jsx("path", { d: "M143.044 14.6799H145.382V11.2103H145.872C146.74 11.2103 147.041 11.5874 147.519 13.096L148.022 14.6799H150.461L149.606 12.2914C149.166 11.2229 149.115 10.5566 148.361 10.3555V10.3303C149.493 10.0663 150.046 9.2869 150.046 8.11778C150.046 6.60924 148.776 5.90525 147.217 5.90525H143.044V14.6799ZM145.382 7.56465H145.998C146.89 7.56465 147.708 7.7155 147.708 8.53263C147.708 9.52575 146.752 9.5509 145.998 9.5509H145.382V7.56465Z", fill: "#1C1C1C" }), _jsx("path", { d: "M152.673 10.2926C152.673 13.0834 154.207 14.8308 157.073 14.8308C159.939 14.8308 161.473 13.0834 161.473 10.2926C161.473 7.47665 159.964 5.75439 157.073 5.75439C154.182 5.75439 152.673 7.47665 152.673 10.2926ZM155.087 10.2926C155.087 8.77148 155.652 7.48922 157.073 7.48922C158.493 7.48922 159.059 8.77148 159.059 10.2926C159.059 11.7383 158.493 13.096 157.073 13.096C155.652 13.096 155.087 11.7383 155.087 10.2926Z", fill: "#1C1C1C" }), _jsx("path", { d: "M164.331 14.6799H166.48L166.405 8.68348H166.43L169.497 14.6799H172.401V5.90525H170.264L170.302 11.864H170.277L167.31 5.90525H164.331V14.6799Z", fill: "#1C1C1C" }), _jsx("path", { d: "M175.41 14.4537C176.189 14.7051 177.207 14.8308 178.025 14.8308C179.973 14.8308 181.884 14.2148 181.884 11.9394C181.884 8.77148 177.735 9.72689 177.735 8.30635C177.735 7.53951 178.716 7.48922 179.307 7.48922C179.973 7.48922 180.652 7.61493 181.255 7.8915L181.406 6.08125C180.815 5.88011 179.986 5.75439 179.143 5.75439C177.383 5.75439 175.322 6.33267 175.322 8.44463C175.322 11.6377 179.47 10.6069 179.47 12.2411C179.47 12.9451 178.766 13.096 178.025 13.096C177.057 13.096 176.214 12.8446 175.611 12.5177L175.41 14.4537Z", fill: "#1C1C1C" }), _jsx("path", { d: "M184.781 14.6799H187.119V11.1474H190.501V9.48804H187.119V7.56465H190.652V5.90525H184.781V14.6799Z", fill: "#FD395E" }), _jsx("path", { d: "M200.906 5.90525H198.568V10.9589C198.568 12.1154 198.253 13.096 197.059 13.096C195.865 13.096 195.551 12.1154 195.551 10.9589V5.90525H193.212V11.3486C193.212 13.7497 194.771 14.8308 197.059 14.8308C199.347 14.8308 200.906 13.7497 200.906 11.3486V5.90525Z", fill: "#FD395E" }), _jsx("path", { d: "M203.743 14.4537C204.522 14.7051 205.541 14.8308 206.358 14.8308C208.306 14.8308 210.217 14.2148 210.217 11.9394C210.217 8.77148 206.069 9.72689 206.069 8.30635C206.069 7.53951 207.049 7.48922 207.64 7.48922C208.306 7.48922 208.985 7.61493 209.589 7.8915L209.739 6.08125C209.149 5.88011 208.319 5.75439 207.477 5.75439C205.717 5.75439 203.655 6.33267 203.655 8.44463C203.655 11.6377 207.803 10.6069 207.803 12.2411C207.803 12.9451 207.099 13.096 206.358 13.096C205.39 13.096 204.547 12.8446 203.944 12.5177L203.743 14.4537Z", fill: "#FD395E" }), _jsx("path", { d: "M213.05 14.6799H219.373V13.0205H215.388V11.0343H219.021V9.3749H215.388V7.56465H219.235V5.90525H213.05V14.6799Z", fill: "#FD395E" }), _jsx("defs", { children: _jsxs("linearGradient", __assign({ id: "paint0_linear_4260_84209", x1: "76.5", y1: "3.00006", x2: "88.7401", y2: "7.14128", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { offset: "0.03125", stopColor: "#CA405A", stopOpacity: "0.958429" }), _jsx("stop", { offset: "1", stopColor: "#A2243B" })] })) })] })));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

package/lib/esm/Importer/PreviewModeBanner.js

@@ -12,4 +12,8 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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." }))] }))); };
+import { useTranslation } from "react-i18next";
+export var PreviewModeBanner = function () {
+    var t = useTranslation("general").t;
+    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: t("preview_mode_banner.title") }))] })));
+};

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

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

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({ h6: true, w: 300, textAlignCenter: true, mt: 20 }, { children: (appResponse === null || appResponse === void 0 ? void 0 : appResponse.message) || defaultMessage })), _jsx(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: _jsx(Button, __assign({ w: 100, ml: 10, onClick: onCloseModal }, { children: "OK" })) }))] })) })));
+    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 })), _jsx(Div, __assign({ dflex: true, mt: 40, w100: true, centered: true }, { children: _jsx(Button, __assign({ ml: 10, onClick: onCloseModal }, { children: "OK" })) }))] })) })));
 };

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { AppResponse, Field, OnValidateRecord, RecordDataSet } from "../../types";
 import { OnDataSetChanged, OnValidationStateChanged } from "../common/Spreadsheet";
-declare type State = {
+type State = {
     previewInitialDataSet: RecordDataSet;
     previewFields: Field[];
     reviewInitialDataSet: RecordDataSet;
@@ -18,8 +17,9 @@ declare type State = {
     onDataSetChanged: OnDataSetChanged;
     onValidationStateChanged: OnValidationStateChanged;
     onSubmit: () => void;
+    onExport: () => void;
 };
-declare type Props = {
+type Props = {
     children: JSX.Element;
 };
 export declare const ReviewContextProvider: ({ children }: Props) => JSX.Element;

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

@@ -24,7 +24,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -94,9 +94,22 @@ var filterAndMapWithBackendErrors = function (dataSet, errors) {
         return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { isInvalid: true, backendErrors: errors[rId] }) });
     }, []);
 };
+function convertToCSV(data) {
+    var headers = Object.keys(data[0]).filter(function (header) { return header !== "_meta"; });
+    var csvRows = [];
+    csvRows.push(headers.join(","));
+    data.forEach(function (item) {
+        var row = [];
+        headers.forEach(function (header) {
+            row.push(item[header]);
+        });
+        csvRows.push(row.join(","));
+    });
+    return csvRows.join("\n");
+}
 export var ReviewContextProvider = function (_a) {
     var children = _a.children;
-    var _b = useImporterContext(), templateHeaderMatchings = _b.templateHeaderMatchings, enumFieldValueMatchings = _b.enumFieldValueMatchings, templateHeaders = _b.templateHeaders, uploadedDataHeaders = _b.uploadedDataHeaders, uploadedData = _b.uploadedData, currentStepIndex = _b.currentStepIndex, integrations = _b.integrations, templateSlug = _b.templateSlug, fuseApi = _b.fuseApi, _c = _b.importerOptions, disableSubmitIfInvalid = _c.disableSubmitIfInvalid, batchValidationDelayMs = _c.batchValidationDelayMs, batchValidationSize = _c.batchValidationSize, previewMode = _c.previewMode, loadingComponent = _c.loadingComponent, onSubmit = _b.onSubmit, onValidateRecord = _b.onValidateRecord, formatRecord = _b.formatRecord;
+    var _b = useImporterContext(), templateHeaderMatchings = _b.templateHeaderMatchings, enumFieldValueMatchings = _b.enumFieldValueMatchings, templateHeaders = _b.templateHeaders, uploadedDataHeaders = _b.uploadedDataHeaders, uploadedData = _b.uploadedData, currentStepIndex = _b.currentStepIndex, integrations = _b.integrations, templateSlug = _b.templateSlug, fuseApi = _b.fuseApi, _c = _b.importerOptions, disableSubmitIfInvalid = _c.disableSubmitIfInvalid, batchValidationDelayMs = _c.batchValidationDelayMs, batchValidationSize = _c.batchValidationSize, previewMode = _c.previewMode, loadingComponent = _c.loadingComponent, onSubmit = _b.onSubmit, onValidateRecord = _b.onValidateRecord, formatRecord = _b.formatRecord, selectedRows = _b.selectedRows;
     var _d = useState(false), isSubmitting = _d[0], setIsSubmitting = _d[1];
     var _e = useState(false), isSubmitDisabled = _e[0], setIsSubmitDisabled = _e[1];
     var _f = useState(false), importWasSuccessful = _f[0], setImportWasSuccessful = _f[1];
@@ -111,8 +124,24 @@ export var ReviewContextProvider = function (_a) {
         batchValidationDelayMs: batchValidationDelayMs,
         batchValidationSize: batchValidationSize,
     }); }, [batchValidationDelayMs, batchValidationSize]);
+    var onExport = useCallback(function () {
+        if (!reviewDataSetRef.current)
+            return;
+        var dataSet = reviewDataSetRef.current;
+        var dataSetValues = Object.values(dataSet);
+        var selectedDataSetValues = dataSetValues.filter(function (_, index) {
+            return selectedRows.includes(index);
+        });
+        var csv = convertToCSV(selectedDataSetValues);
+        var blob = new Blob([csv], { type: "text/csv" });
+        var url = URL.createObjectURL(blob);
+        var link = document.createElement("a");
+        link.setAttribute("href", url);
+        link.setAttribute("download", "export.csv");
+        link.click();
+    }, [reviewFields, selectedRows]);
     var onSubmitData = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var dataSet, dataSetValues, validDataSetValues, validDataSetLength, invalidRecords, applicationResponse, isAppResponseSuccessful, _a, errors, isDataValid, invalidDataSet, error_2;
+        var dataSet, dataSetValues, selectedDataSetValues, validDataSetValues, validDataSetLength, invalidRecords, applicationResponse, isAppResponseSuccessful, _a, errors, isDataValid, invalidDataSet, error_2;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -122,7 +151,10 @@ export var ReviewContextProvider = function (_a) {
                     setIsSubmitting(true);
                     dataSet = reviewDataSetRef.current;
                     dataSetValues = Object.values(dataSet);
-                    validDataSetValues = dataSetValues.filter(function (record) {
+                    selectedDataSetValues = dataSetValues.filter(function (_, index) {
+                        return selectedRows.includes(index);
+                    });
+                    validDataSetValues = selectedDataSetValues.filter(function (record) {
                         return !record._meta.isInvalid && !isRecordEmpty(record, reviewFields);
                     });
                     validDataSetLength = validDataSetValues.length;
@@ -222,6 +254,7 @@ export var ReviewContextProvider = function (_a) {
         isSubmitting: isSubmitting,
         options: options,
         onSubmit: onSubmitData,
+        onExport: onExport,
         onValidateRecord: onValidateRecord,
         onDataSetChanged: onDataSetChanged,
         onValidationStateChanged: onValidationStateChanged,

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

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

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

@@ -1,3 +1,7 @@
+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++) {
@@ -10,14 +14,25 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImporterContext } from "../contexts/ImporterContextProvider";
 import { Div } from "../../styled/utils";
+import { Span } from "../../styled";
 import Spreadsheet from "../common/Spreadsheet";
 import { getSpreadsheetRowWidth } from "../common/utils";
 import { AppResponseModal } from "./AppResponseModal";
 import { useReviewContext } from "./ReviewContextProvider";
+import { Button } from "../../common/buttons";
+import styled from "styled-components";
+import { useTranslation } from "react-i18next";
+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.66659 8.99996C1.33325 7.99996 1.33325 6.99996 1.33325 6.3042C1.33325 3.98541 3.40957 1.66663 5.97083 1.66663C7.68739 1.66663 9.18612 2.59924 9.98798 3.98541H10.6084C12.5293 3.98541 14.3333 5.33329 14.3333 6.99996C14.3333 7.66663 14.3333 8.33329 13.9999 8.99996", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M4.94434 13.2211L7.66656 15.8333L10.3888 13.2211", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M7.66675 15.1462L7.66675 7.75005", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round" })] })));
+var TitleContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 99%;\n"], ["\n  width: 99%;\n"])));
+var ExportButtonContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  right: 32px;\n"], ["\n  position: absolute;\n  right: 32px;\n"])));
 var ReviewWithContext = function () {
-    var _a = useReviewContext(), fields = _a.reviewFields, initialDataSet = _a.reviewInitialDataSet, options = _a.options, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged;
-    var spreadsheetUI = initialDataSet && (_jsx(Spreadsheet, { options: options, initialDataSet: initialDataSet, fields: fields, rowWidth: getSpreadsheetRowWidth(fields, 6), onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged }));
-    return (_jsxs(Div, __assign({ centered: true, flexColumn: true }, { children: [_jsx(AppResponseModal, {}), _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" })), _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." }))] })), spreadsheetUI] }))] })));
+    var _a = useReviewContext(), fields = _a.reviewFields, initialDataSet = _a.reviewInitialDataSet, options = _a.options, onValidateRecord = _a.onValidateRecord, onDataSetChanged = _a.onDataSetChanged, onValidationStateChanged = _a.onValidationStateChanged, onExport = _a.onExport;
+    var _b = useImporterContext(), selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows;
+    var t = useTranslation("review").t;
+    var spreadsheetUI = initialDataSet && (_jsx(Spreadsheet, { options: __assign(__assign({}, options), { showCheckboxColumn: true }), selectedRows: selectedRows, setSelectedRows: setSelectedRows, initialDataSet: initialDataSet, fields: fields, rowWidth: getSpreadsheetRowWidth(fields, 6), onDataSetChanged: onDataSetChanged, onValidateRecord: onValidateRecord, onValidationStateChanged: onValidationStateChanged }));
+    return (_jsxs(Div, __assign({ centered: true, flexColumn: true }, { children: [_jsx(AppResponseModal, {}), _jsxs(Div, __assign({ w: 1400 }, { children: [_jsxs(TitleContainer, __assign({ centered: true, textAlignCenter: true, flexColumn: true }, { children: [_jsx(Div, __assign({ h2: true, mt: 40 }, { children: t("title") })), _jsx(ExportButtonContainer, __assign({ mb: 16, mt: 64 }, { children: _jsxs(Button, __assign({ w: 120, br: 8, variant: "secondary", svgNormalFillColorOverride: "transparent", svgActiveFillColorOverride: "transparent", svgActiveStrokeColorOverride: "white", onClick: onExport }, { children: [downloadIcon, " ", _jsxs(Span, __assign({ ml: 6 }, { children: [" ", t("export")] }))] })) }))] })), _jsx(Div, __assign({ centered: true, textAlignCenter: true, flexColumn: true }, { children: _jsx(Div, __assign({ body1: true, mt: 20, w: 540, mb: 15 }, { children: t("description") })) })), spreadsheetUI] }))] })));
 };
 export default ReviewWithContext;
+var templateObject_1, templateObject_2;

package/lib/esm/Importer/Stepper/ConfirmCloseModal.d.ts

@@ -0,0 +1,7 @@
+type ConfirmCloseModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    onCloseImporter: () => void;
+};
+export declare const ConfirmCloseModal: ({ isOpen, onClose, onCloseImporter, }: ConfirmCloseModalProps) => JSX.Element;
+export {};