fuse-importer 0.0.8-testing → 0.1.1-testing

package/lib/esm/api/index.js

@@ -0,0 +1,93 @@
+import axios from "axios";
+import { handleError, handleSuccess } from "./responseHandlers";
+import Qs from "qs";
+import { isString } from "../utils";
+var api = axios.create({
+    timeout: 20000,
+    headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        "X-Requested-With": "XmlHttpRequest",
+    },
+});
+var ls = typeof window !== "undefined" ? localStorage : null;
+var ttlIsExpired = function (ttl) { return new Date().getTime() > parseInt(ttl); };
+var getCacheKeys = function (config) {
+    var key = "".concat(config.method, ":").concat(config.url);
+    var ttlKey = "".concat(key, ":TTL");
+    return { key: key, ttlKey: ttlKey };
+};
+var getTTL = function (ttl) {
+    var currentTime = new Date().getTime();
+    if (ttl)
+        return currentTime + ttl;
+    var anHour = 1000 * 60 * 60;
+    return currentTime + anHour * 24;
+};
+var requestInterceptor = {
+    onFulFilled: function (_config) {
+        var _a, _b;
+        _config.paramsSerializer = function (params) {
+            return Qs.stringify(params, {
+                arrayFormat: config.arrayFormat ? config.arrayFormat : "brackets",
+            });
+        };
+        var authToken = (_a = _config.authToken) !== null && _a !== void 0 ? _a : (_b = JSON.parse(ls === null || ls === void 0 ? void 0 : ls.getItem("user"))) === null || _b === void 0 ? void 0 : _b.token;
+        var config = Object.assign(_config);
+        if (authToken)
+            config.headers.Authorization = "Bearer ".concat(authToken);
+        if (!config.toPublicApi)
+            config.url = "".concat(process.env.REACT_APP_API_BASE_URL || "").concat(config.url);
+        if (config.cache) {
+            var _c = getCacheKeys(config), key = _c.key, ttlKey = _c.ttlKey;
+            var ttl = ls === null || ls === void 0 ? void 0 : ls.getItem(ttlKey);
+            if (config.refresh || (ttl && ttlIsExpired(ttl))) {
+                ls === null || ls === void 0 ? void 0 : ls.removeItem(key);
+                ls === null || ls === void 0 ? void 0 : ls.removeItem(ttlKey);
+            }
+            var data = ls === null || ls === void 0 ? void 0 : ls.getItem(key);
+            if (data) {
+                return {
+                    headers: {},
+                    method: config.method,
+                    url: "ls-cache:".concat(config.url),
+                    cachedData: JSON.parse(data),
+                };
+            }
+        }
+        return config;
+    },
+    onRejected: function (err) {
+        return Promise.reject(err);
+    },
+};
+var responseInterceptor = {
+    onFulFilled: function (res) {
+        var _config = res.config;
+        var config = Object.assign(_config);
+        if (config.cache) {
+            var _a = getCacheKeys(config), key = _a.key, ttlKey = _a.ttlKey;
+            ls === null || ls === void 0 ? void 0 : ls.setItem(ttlKey, JSON.stringify(getTTL(config.ttl)));
+            ls === null || ls === void 0 ? void 0 : ls.setItem(key, JSON.stringify(res.data));
+        }
+        if (_config.successMsg && [200, 201].includes(res.status)) {
+            handleSuccess(isString(_config.successMsg)
+                ? _config.successMsg.toString()
+                : _config.successMsg(res.data));
+        }
+        if (config.withReq)
+            return res;
+        return res;
+    },
+    onRejected: function (err) {
+        var _a, _b, _c;
+        if ((_a = err === null || err === void 0 ? void 0 : err.config) === null || _a === void 0 ? void 0 : _a.cachedData) {
+            return Promise.resolve((_b = err === null || err === void 0 ? void 0 : err.config) === null || _b === void 0 ? void 0 : _b.cachedData);
+        }
+        handleError(err, (_c = err === null || err === void 0 ? void 0 : err.config) === null || _c === void 0 ? void 0 : _c.errorMsg);
+        return Promise.reject(err);
+    },
+};
+api.interceptors.request.use(requestInterceptor.onFulFilled, requestInterceptor.onRejected);
+api.interceptors.response.use(responseInterceptor.onFulFilled, responseInterceptor.onRejected);
+export { api };

package/lib/esm/api/responseHandlers.js

@@ -0,0 +1,49 @@
+import { addToast } from "../common/Toast";
+import { isString } from "../utils";
+var getErrorMessage = function (response) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    if ((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.errors)
+        return (_b = response === null || response === void 0 ? void 0 : response.data) === null || _b === void 0 ? void 0 : _b.errors;
+    else if ((_c = response === null || response === void 0 ? void 0 : response.data) === null || _c === void 0 ? void 0 : _c.error_message)
+        return (_d = response === null || response === void 0 ? void 0 : response.data) === null || _d === void 0 ? void 0 : _d.error_message;
+    else if ((_e = response === null || response === void 0 ? void 0 : response.data) === null || _e === void 0 ? void 0 : _e.message)
+        return (_f = response === null || response === void 0 ? void 0 : response.data) === null || _f === void 0 ? void 0 : _f.message;
+    else if (isString((_h = (_g = response === null || response === void 0 ? void 0 : response.data) === null || _g === void 0 ? void 0 : _g.error) === null || _h === void 0 ? void 0 : _h.message)) {
+        return (_k = (_j = response === null || response === void 0 ? void 0 : response.data) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k.message;
+    }
+    else if (isString((_l = response === null || response === void 0 ? void 0 : response.data) === null || _l === void 0 ? void 0 : _l.error))
+        return (_m = response === null || response === void 0 ? void 0 : response.data) === null || _m === void 0 ? void 0 : _m.error;
+    return "An error ocurred, please try again later";
+};
+export var handleSuccess = function (msg) {
+    addToast(msg, "success");
+};
+export var handleError = function (err, errMsg) {
+    if (errMsg === void 0) { errMsg = null; }
+    var msg = "Connection Error";
+    var errorType = "";
+    if (errMsg)
+        msg = errMsg;
+    else if (err.response) {
+        switch (err.response.status) {
+            case 500:
+                msg = "An error has occurred on our server. Please try again later";
+                errorType = "error";
+                break;
+            case 422:
+                errorType = "error";
+                msg = getErrorMessage(err.response);
+                break;
+            default:
+                msg = getErrorMessage(err.response);
+                break;
+        }
+    }
+    // handle error message
+    if (errorType) {
+        addToast(msg, "error");
+    }
+    else {
+        addToast(msg);
+    }
+};

package/lib/esm/common/AppLoadingContextProvider/AppLoadingUI.js

@@ -0,0 +1,26 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Div } from "../../styled/utils";
+import { Spinner } from "../Spinner";
+var LoadingBackdrop = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999999;\n  background: ", ";\n  opacity: 0.2;\n"], ["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999999;\n  background: ", ";\n  opacity: 0.2;\n"])), function (props) { return props.theme.colors.gray200; });
+var ModalContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000000000;\n  width: 100vw;\n  height: 100vh;\n  pointer-events: none;\n  div {\n    pointer-events: auto;\n  }\n"], ["\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000000000;\n  width: 100vw;\n  height: 100vh;\n  pointer-events: none;\n  div {\n    pointer-events: auto;\n  }\n"])));
+var LoaderContainer = styled(ModalContainer)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  pointer-events: none;\n"], ["\n  pointer-events: none;\n"])));
+export var AppLoadingUI = function () {
+    return (_jsxs(_Fragment, { children: [_jsx(LoadingBackdrop, {}), _jsx(LoaderContainer, { children: _jsx(Div, __assign({ w: 300 }, { children: _jsx(Div, __assign({ pRelative: true }, { children: _jsx(Spinner, {}) })) })) })] }));
+};
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/common/AppLoadingContextProvider/index.js

@@ -0,0 +1,25 @@
+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 { createContext, useContext, useState } from "react";
+import { AppLoadingUI } from "./AppLoadingUI";
+export var AppLoadingContext = createContext({});
+export var AppLoadingContextProvider = function (_a) {
+    var children = _a.children;
+    var _b = useState(false), isLoadingApp = _b[0], setIsLoadingApp = _b[1];
+    var value = {
+        isLoadingApp: isLoadingApp,
+        setIsLoadingApp: setIsLoadingApp,
+    };
+    return (_jsxs(AppLoadingContext.Provider, __assign({ value: value }, { children: [isLoadingApp && _jsx(AppLoadingUI, {}), children] })));
+};
+export var useAppLoadingContext = function () { return useContext(AppLoadingContext); };

package/lib/esm/common/ConfirmationModal.js

@@ -0,0 +1,19 @@
+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 { colors, Div, Modal, Button } from "../";
+export var ConfirmationModal = function (_a) {
+    var isOpen = _a.isOpen, handleClose = _a.handleClose, onSubmit = _a.onSubmit, title = _a.title, description = _a.description, buttonText = _a.buttonText, _b = _a.icon, icon = _b === void 0 ? null : _b, _c = _a.hasCancelButton, hasCancelButton = _c === void 0 ? true : _c;
+    var headerUI = (_jsxs(Div, { children: [icon && (_jsx(Div, __assign({ centered: true, mb: 20 }, { children: icon }))), _jsx(Div, __assign({ mb: 12 }, { children: _jsx(Div, __assign({ h5: true, dflex: true, centered: true }, { children: title })) }))] }));
+    var bodyUI = (_jsxs(_Fragment, { children: [_jsx(Div, __assign({ c: colors.gray800, body1: true, flexColumn: true, centered: true }, { children: description })), _jsxs(Div, __assign({ mt: 40, dflex: true, centered: true }, { children: [hasCancelButton && (_jsx(Button, __assign({ variant: "secondary", mr: 16, w: 104, onClick: handleClose }, { children: "Cancel" }))), _jsx(Button, __assign({ w: 135, onClick: onSubmit }, { children: buttonText }))] }))] }));
+    return (_jsx(_Fragment, { children: _jsx(Modal, __assign({ isOpen: isOpen, onClose: handleClose }, { children: _jsxs(Div, __assign({ p: "48px 56px" }, { children: [headerUI, bodyUI] })) })) }));
+};

package/lib/esm/common/Modal.js

@@ -0,0 +1,31 @@
+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 styled from "styled-components";
+import { Div } from "../styled/utils";
+import { closeIcon } from "./icons";
+export var ModalContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 10000000000;\n  width: 100vw;\n  height: 100vh;\n  pointer-events: none;\n  div {\n    pointer-events: auto;\n  }\n"], ["\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 10000000000;\n  width: 100vw;\n  height: 100vh;\n  pointer-events: none;\n  div {\n    pointer-events: auto;\n  }\n"])));
+export var ModalBackdrop = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999999;\n  background: black;\n  opacity: 0.38;\n"], ["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  margin: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 99999999;\n  background: black;\n  opacity: 0.38;\n"])));
+export var ModalWrapper = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  padding: 32px 36px;\n  border-radius: 8px;\n  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.32);\n"], ["\n  background: ", ";\n  padding: 32px 36px;\n  border-radius: 8px;\n  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.32);\n"])), function (props) { return props.theme.colors.white; });
+export var ModalCloseIcon = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 0;\n  display: flex;\n  flex-direction: row-reverse;\n  z-index: 10;\n"], ["\n  height: 0;\n  display: flex;\n  flex-direction: row-reverse;\n  z-index: 10;\n"])));
+export var Modal = function (_a) {
+    var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? null : _c, children = _a.children, _d = _a.withCloseIcon, withCloseIcon = _d === void 0 ? true : _d, _e = _a.withBackdropClose, withBackdropClose = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? "" : _f, testId = _a.testId;
+    function renderModal() {
+        return (_jsxs(Div, __assign({ className: className, "data-testid": testId }, { children: [_jsx(ModalBackdrop, { onClick: withBackdropClose ? onClose : null }), _jsx(ModalContainer, { children: _jsxs(ModalWrapper, { children: [withCloseIcon && (_jsx(ModalCloseIcon, { children: _jsx(Div, __assign({ clickable: true, mt: -5, mr: -5, w: "25px", h: "25px", onClick: onClose }, { children: closeIcon })) })), children] }) })] })));
+    }
+    return _jsx(_Fragment, { children: isOpen && renderModal() });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/common/Spinner.js

@@ -0,0 +1,41 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { theme } from "../styled/theme";
+import { Div } from "../styled/utils";
+var Wrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n"])));
+var Bounce = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 12px;\n  height: 12px;\n  margin: 0 5px 0 5px;\n  background: ", ";\n  @-webkit-keyframes sk-bouncedelay {\n    0%,\n    80%,\n    100% {\n      -webkit-transform: scale(0);\n    }\n    40% {\n      -webkit-transform: scale(1);\n    }\n  }\n  @keyframes sk-bouncedelay {\n    0%,\n    80%,\n    100% {\n      -webkit-transform: scale(0);\n      transform: scale(0);\n    }\n    40% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n    }\n  }\n  border-radius: 100%;\n  display: inline-block;\n  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;\n  animation: sk-bouncedelay 1.4s infinite ease-in-out both;\n"], ["\n  width: 12px;\n  height: 12px;\n  margin: 0 5px 0 5px;\n  background: ", ";\n  @-webkit-keyframes sk-bouncedelay {\n    0%,\n    80%,\n    100% {\n      -webkit-transform: scale(0);\n    }\n    40% {\n      -webkit-transform: scale(1);\n    }\n  }\n  @keyframes sk-bouncedelay {\n    0%,\n    80%,\n    100% {\n      -webkit-transform: scale(0);\n      transform: scale(0);\n    }\n    40% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n    }\n  }\n  border-radius: 100%;\n  display: inline-block;\n  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;\n  animation: sk-bouncedelay 1.4s infinite ease-in-out both;\n"])), function (props) { return props.color; });
+var Bounce1 = styled(Bounce)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  -webkit-animation-delay: -0.32s;\n  animation-delay: -0.32s;\n"], ["\n  -webkit-animation-delay: -0.32s;\n  animation-delay: -0.32s;\n"])));
+var Bounce2 = styled(Bounce)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  -webkit-animation-delay: -0.16s;\n  animation-delay: -0.16s;\n"], ["\n  -webkit-animation-delay: -0.16s;\n  animation-delay: -0.16s;\n"])));
+var SpinnerContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 70px;\n  text-align: center;\n"], ["\n  width: 70px;\n  text-align: center;\n"])));
+var Spinner = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? theme.colors.gray300 : _b, props = __rest(_a, ["color"]);
+    return (_jsx(Wrapper, __assign({}, props, { children: _jsxs(SpinnerContainer, { children: [_jsx(Bounce1, { color: color }), _jsx(Bounce2, { color: color }), _jsx(Bounce, { color: color })] }) })));
+};
+export { Spinner };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/esm/common/Table/Pagination/icons.js

@@ -0,0 +1,42 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { Div } from "../../../styled/utils";
+var IconContainer = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  border-radius: 4px;\n  height: 24px;\n  width: 24px;\n  ", "\n"], ["\n  ", ";\n  color: ", ";\n  border-radius: 4px;\n  height: 24px;\n  width: 24px;\n  ", "\n"])), function (p) { return p.theme.css.centered; }, function (p) { return p.theme.colors.gray900; }, function (p) {
+    return p.isDisabled
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), function (p) { return p.theme.colors.disabled3; }) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          :hover {\n            cursor: pointer;\n\n            background-color: ", ";\n          }\n        "], ["\n          :hover {\n            cursor: pointer;\n\n            background-color: ", ";\n          }\n        "])), function (p) { return p.theme.colors.gray100; });
+});
+export var PaginationIcon = function (_a) {
+    var _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, children = _a.children, props = __rest(_a, ["isDisabled", "children"]);
+    return (_jsx(IconContainer, __assign({ ml: 10, isDisabled: isDisabled }, props, { children: children })));
+};
+export var previousPage = (_jsx("svg", __assign({ width: "8", height: "13", viewBox: "0 0 8 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M7.00623 0.90802L1.26688 6.3505L7.00623 11.793", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })));
+export var nextPage = (_jsx("svg", __assign({ width: "8", height: "13", viewBox: "0 0 8 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M1.24243 0.90802L6.98177 6.3505L1.24243 11.793", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })));
+export var jumpToFirst = (_jsxs("svg", __assign({ width: "24", height: "19", viewBox: "0 0 24 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M16.4547 3.90802L10.7154 9.3505L16.4547 14.793", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.59399 14.069L6.59399 4.68966", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+export var jumpToLast = (_jsxs("svg", __assign({ width: "25", height: "19", viewBox: "0 0 25 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M8.23022 14.8506L13.9696 9.40811L8.23023 3.96563", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M18.0909 4.68964L18.0909 14.0689", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/common/Table/Pagination/index.js

@@ -0,0 +1,32 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTableContext } from "../TableDataProvider";
+import { jumpToFirst, jumpToLast, nextPage, PaginationIcon, previousPage, } from "./icons";
+import styled from "styled-components";
+import { colors } from "../../../styled/theme/colorPalette";
+import { Div } from "../../../styled/utils";
+var Container = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  border-top: none;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n"], ["\n  border: solid 1px ", ";\n  border-top: none;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n"])), function (p) { return p.theme.colors.gray300; });
+var Pagination = function () {
+    var _a = useTableContext(), totalPages = _a.totalPages, totalCount = _a.totalCount, pageSize = _a.pageSize, currentPage = _a.currentPage, setCurrentPage = _a.setCurrentPage;
+    var isFirstPage = currentPage === 1;
+    var isLastPage = currentPage === totalPages;
+    var cursor = (currentPage - 1) * pageSize;
+    var buttonsUI = (_jsxs(Div, __assign({ mr: 25, dflex: true }, { children: [_jsx(PaginationIcon, __assign({ isDisabled: isFirstPage, onClick: function () { return setCurrentPage(1); } }, { children: jumpToFirst })), _jsx(PaginationIcon, __assign({ isDisabled: isFirstPage, onClick: function () { return setCurrentPage(Math.max(currentPage - 1, 1)); } }, { children: previousPage })), _jsxs(Div, __assign({ centered: true, ml: 10 }, { children: [cursor + 1, "-", Math.min(cursor + pageSize, totalCount), " of ", totalCount] })), _jsx(PaginationIcon, __assign({ isDisabled: isLastPage, onClick: function () { return setCurrentPage(Math.min(currentPage + 1, totalPages)); } }, { children: nextPage })), _jsx(PaginationIcon, __assign({ isDisabled: isLastPage, onClick: function () { return setCurrentPage(totalPages); } }, { children: jumpToLast }))] })));
+    return (_jsx(Container, __assign({ w100: true }, { children: _jsx(Div, __assign({ h: 38, bg: colors.tableHeader, justifyEnd: true }, { children: _jsx(Div, __assign({ dflex: true, alignCenter: true, body2: true, c: colors.text }, { children: buttonsUI })) })) })));
+};
+export { Pagination };
+var templateObject_1;

package/lib/esm/common/Table/TableActions/DeleteSelectedRows.js

@@ -0,0 +1,50 @@
+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 { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import styled from "styled-components";
+import { TooltipProvider } from "../../../common/TooltipProvider";
+import { ConfirmationModal } from "../../../common/ConfirmationModal";
+import { useSpreadsheetContext } from "../../../Importer";
+import { DeleteIcon, ConfirmationDeleteIcon } from "./icons";
+import { Div } from "../../../styled/utils";
+import { ActionButton } from "./TableActions.styles";
+import { useTranslation } from "react-i18next";
+var StyledTooltipProvider = styled(TooltipProvider)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
+export var DeleteSelectedRows = function (_a) {
+    var _b = _a.testId, testId = _b === void 0 ? "ta-delete-rows" : _b;
+    var _c = useState(false), isConfirmationModalOpen = _c[0], setIsConfirmationModalOpen = _c[1];
+    var _d = useSpreadsheetContext(), deleteRecords = _d.deleteRecords, selectedRows = _d.selectedRows, setSelectedRows = _d.setSelectedRows, setFilteredInputValue = _d.setFilteredInputValue;
+    var t = useTranslation("review").t;
+    var toggleModalVisibility = function () {
+        setIsConfirmationModalOpen(function (oldValue) { return !oldValue; });
+    };
+    var handleDeleteRecord = function () {
+        setSelectedRows([]);
+        toggleModalVisibility();
+        setFilteredInputValue("");
+        deleteRecords(selectedRows);
+    };
+    var DescriptionUI = function () { return (_jsx(_Fragment, { children: _jsxs(Div, { children: [t("table_actions.delete_rows.confirmation_modal", {
+                    length: selectedRows.length,
+                }), selectedRows.length > 1 ? "s" : "", "?"] }) })); };
+    var confirmationModalUI = (_jsx(ConfirmationModal, { isOpen: isConfirmationModalOpen, handleClose: toggleModalVisibility, title: "".concat(t("table_actions.delete_rows.modal_title")).concat(selectedRows.length > 1 ? "s" : ""), description: _jsx(DescriptionUI, {}), onSubmit: handleDeleteRecord, buttonText: t("table_actions.delete_rows.yes_delete"), icon: ConfirmationDeleteIcon }));
+    var isDeleteButtonDisabled = selectedRows.length <= 0;
+    return (_jsxs(_Fragment, { children: [confirmationModalUI, _jsx(StyledTooltipProvider, __assign({ tooltip: isDeleteButtonDisabled
+                    ? t("table_actions.delete_rows.select_rows")
+                    : t("table_actions.delete_rows.delete_row"), placement: "right", flip: false, centered: true, "data-testid": testId }, { children: _jsx(ActionButton, __assign({ onClick: toggleModalVisibility, disabled: isDeleteButtonDisabled }, { children: _jsx(DeleteIcon, {}) })) }))] }));
+};
+var templateObject_1;

package/lib/esm/common/Table/TableActions/ExportData.js

@@ -0,0 +1,23 @@
+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 } from "react/jsx-runtime";
+import { DownloadIcon } from "./icons";
+import { useReviewContext } from "../../../Importer";
+import { TooltipProvider } from "../../../common/TooltipProvider";
+import { ActionButton } from "./TableActions.styles";
+import { useTranslation } from "react-i18next";
+export var ExportData = function (_a) {
+    var _b = _a.testId, testId = _b === void 0 ? "ta-export-data" : _b;
+    var onExport = useReviewContext().onExport;
+    var t = useTranslation("review").t;
+    return (_jsx(TooltipProvider, __assign({ tooltip: t("table_actions.export_your_data.tooltip"), placement: "right", flip: false, centered: true, "data-testid": testId }, { children: _jsx(ActionButton, __assign({ onClick: function () { return onExport("csv"); } }, { children: _jsx(DownloadIcon, {}) })) })));
+};

package/lib/esm/common/Table/TableActions/FilterByErrors/FilterByErrors.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as S from "./FilterByErrors.styles";
+import { useSpreadsheetContext } from "../../../../Importer";
+import { formatErrors, getUniqueErrors } from "./functions";
+import { useTranslation } from "react-i18next";
+import { addToast } from "../../../../common/Toast";
+import { useState } from "react";
+export var FilterByErrors = function () {
+    var _a, _b;
+    var _c = useSpreadsheetContext(), errors = _c.errors, fields = _c.fields, spreadsheetFilter = _c.spreadsheetFilter, resetSpreadsheetFilter = _c.resetSpreadsheetFilter, filterRecordsByFieldErrors = _c.filterRecordsByFieldErrors;
+    var t = useTranslation("review").t;
+    var _d = useState(false), isMenuOpened = _d[0], setIsMenuOpened = _d[1];
+    var prefix = t("table_actions.filter_by_errors.filter_by_errors");
+    var search_or_select = t("table_actions.filter_by_errors.search_or_select");
+    var selectedErrorToFilter = ((_a = spreadsheetFilter === null || spreadsheetFilter === void 0 ? void 0 : spreadsheetFilter.byColumn) === null || _a === void 0 ? void 0 : _a.field) || null;
+    var getSelectedErrorLabel = function (selectedFieldName) {
+        var _a;
+        var selectedField = fields.filter(function (field) { return (field === null || field === void 0 ? void 0 : field.name) === selectedFieldName; });
+        var label = ((_a = selectedField === null || selectedField === void 0 ? void 0 : selectedField[0]) === null || _a === void 0 ? void 0 : _a.label) || selectedFieldName;
+        return label;
+    };
+    var onChange = function (selected) {
+        if (selected) {
+            var label = getSelectedErrorLabel(selected);
+            filterRecordsByFieldErrors(selected);
+            addToast("Showing only the rows with error on the ".concat(label, " column"), "success");
+        }
+        else {
+            resetSpreadsheetFilter();
+        }
+    };
+    var uniqueErrors = getUniqueErrors(fields, errors);
+    var errorArray = formatErrors(fields, uniqueErrors);
+    // the average size of each character in the input (in px)
+    var widthPerCharacter = 5.8;
+    var amountOfCharacters = prefix.length + ((_b = getSelectedErrorLabel(selectedErrorToFilter)) === null || _b === void 0 ? void 0 : _b.length);
+    // 24 -> padding + 64px of the X icon area
+    var totalWidth = widthPerCharacter * amountOfCharacters + 24 + 64;
+    var inputWidth = selectedErrorToFilter ? "".concat(totalWidth, "px") : "fit-content";
+    var inputText = selectedErrorToFilter
+        ? "".concat(prefix, ": ")
+        : isMenuOpened
+            ? search_or_select
+            : prefix;
+    var isDisabled = errorArray.length === 0;
+    return (_jsx(S.StyledAutocomplete, { placement: "bottom", placeholder: inputText, onToggle: function (v) { return !isDisabled && setIsMenuOpened(v); }, onChange: onChange, value: selectedErrorToFilter, options: errorArray, isDisabled: isDisabled, isInputDisabled: isDisabled, inputWidth: inputWidth, "data-testid": "ta-filter-by-errors", prefix: inputText }));
+};

package/lib/esm/common/Table/TableActions/FilterByErrors/FilterByErrors.styles.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from "styled-components";
+import { Autocomplete } from "../../../../common/inputs/Autocomplete";
+import { textStyles } from "../../../../styled/theme/textStyles";
+export var StyledAutocomplete = styled(Autocomplete)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &,\n  * {\n    box-sizing: border-box !important;\n\n    ", "\n  }\n\n  div[data-popper-placement=\"bottom\"] > div {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    outline: 1px solid red;\n    padding: 8px;\n\n    > div div {\n      padding: 6px 12px;\n    }\n\n    ", "\n  }\n\n  input {\n    ", ";\n    background-color: ", ";\n    border: 1px solid transparent;\n    font-family: \"DM Sans\";\n    font-size: 14px;\n    font-weight: 400;\n    height: 32px;\n    padding: 6px 12px;\n    width: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    :focus {\n      border: none;\n      box-shadow: none;\n    }\n  }\n"], ["\n  &,\n  * {\n    box-sizing: border-box !important;\n\n    ", "\n  }\n\n  div[data-popper-placement=\"bottom\"] > div {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    outline: 1px solid red;\n    padding: 8px;\n\n    > div div {\n      padding: 6px 12px;\n    }\n\n    ", "\n  }\n\n  input {\n    ", ";\n    background-color: ", ";\n    border: 1px solid transparent;\n    font-family: \"DM Sans\";\n    font-size: 14px;\n    font-weight: 400;\n    height: 32px;\n    padding: 6px 12px;\n    width: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    :focus {\n      border: none;\n      box-shadow: none;\n    }\n  }\n"])), function (_a) {
+    var isDisabled = _a.isDisabled;
+    return isDisabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        cursor: not-allowed !important;\n      "], ["\n        cursor: not-allowed !important;\n      "])));
+}, function (_a) {
+    var isDisabled = _a.isDisabled;
+    return isDisabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        cursor: not-allowed;\n      "], ["\n        cursor: not-allowed;\n      "])));
+}, textStyles.body3, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.orange50;
+}, function (_a) {
+    var inputWidth = _a.inputWidth;
+    return inputWidth;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.black;
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/common/Table/TableActions/FilterByErrors/functions.js

@@ -0,0 +1,35 @@
+export var getUniqueErrors = function (fields, errors) {
+    var fieldKeys = new Set(fields.map(function (field) { return field.name; }));
+    var uniqueErrors = [];
+    for (var _i = 0, _a = Object.entries(errors); _i < _a.length; _i++) {
+        var _b = _a[_i], _1 = _b[0], errorObj = _b[1];
+        for (var _c = 0, _d = Object.entries(errorObj); _c < _d.length; _c++) {
+            var fieldName = _d[_c][0];
+            if (fieldKeys.has(fieldName)) {
+                uniqueErrors.push({ fieldName: fieldName });
+            }
+        }
+    }
+    return uniqueErrors;
+};
+export var formatErrors = function (fields, uniqueErrors) {
+    var errorMap = new Map();
+    var orderedErrorArray = [];
+    fields.forEach(function (field) {
+        errorMap.set(field.name, field);
+    });
+    fields.forEach(function (field) {
+        var name = field.name, label = field.label;
+        if (uniqueErrors.some(function (_a) {
+            var fieldName = _a.fieldName;
+            return fieldName === name;
+        }) &&
+            !orderedErrorArray.some(function (error) { return error.value === name; })) {
+            orderedErrorArray.push({
+                value: name,
+                label: label,
+            });
+        }
+    });
+    return orderedErrorArray;
+};

package/lib/esm/common/Table/TableActions/FilterByErrors/index.js

@@ -0,0 +1 @@
+export * from "./FilterByErrors";

package/lib/esm/common/Table/TableActions/RowFilters.js

@@ -0,0 +1,42 @@
+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 { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { useSpreadsheetContext } from "../../../Importer";
+import { Div } from "../../../styled";
+import { useTranslation } from "react-i18next";
+var FilterContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 6px 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", ";\n  ", "\n"], ["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 6px 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", ";\n  ", "\n"])), function (p) { return p.theme.css.body3; }, function (p) {
+    return p.isSelected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n      border-radius: 4px;\n    "], ["\n      background: ", ";\n      color: ", ";\n      border-radius: 4px;\n    "])), function (p) { return p.theme.colors.black; }, function (p) { return p.theme.colors.white; });
+});
+var Container = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  border-radius: 4px;\n  background-color: ", ";\n"], ["\n  display: flex;\n  border-radius: 4px;\n  background-color: ", ";\n"])), function (p) { return p.theme.colors.backgroundInterface; });
+var FilteredDataCount = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 8px;\n  margin-left: -3px;\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n"], ["\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 8px;\n  margin-left: -3px;\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n"])), function (p) { return p.theme.colors.highlight01; }, function (p) { return p.theme.colors.black; });
+var Filter = function (_a) {
+    var label = _a.label, count = _a.count, isSelected = _a.isSelected, onClick = _a.onClick;
+    var _b = useSpreadsheetContext(), filteredInputValue = _b.filteredInputValue, filteredDataCount = _b.filteredDataCount;
+    var labelToId = function (label) {
+        return label.toLowerCase().replace(/\s/g, "_") + "_filter";
+    };
+    return (_jsxs(Div, __assign({ dflex: true, clickable: true, onClick: onClick, "data-test-id": labelToId(label) }, { children: [_jsxs(FilterContainer, __assign({ isSelected: isSelected }, { children: [label, count >= 0 && _jsxs(_Fragment, { children: ["\u00A0(", count, ")"] })] })), isSelected && filteredInputValue !== "" && (_jsx(FilteredDataCount, { children: _jsx(Div, __assign({ minw: 14, centered: true }, { children: filteredDataCount })) }))] })));
+};
+export var RowFilters = function () {
+    var _a = useSpreadsheetContext(), spreadsheetFilter = _a.spreadsheetFilter, errors = _a.errors, filterRecordsByRowType = _a.filterRecordsByRowType, recordsWithValuesCount = _a.recordsWithValuesCount;
+    var t = useTranslation("review").t;
+    var all_rows = t("table_actions.filters_by_rows.all_rows");
+    var valid_rows = t("table_actions.filters_by_rows.valid_rows");
+    var invalid_rows = t("table_actions.filters_by_rows.invalid_rows");
+    return (_jsxs(Container, { children: [_jsx(Filter, { isSelected: spreadsheetFilter.byRow === "all", label: all_rows, count: recordsWithValuesCount, onClick: function () { return filterRecordsByRowType("all"); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "valid", label: valid_rows, onClick: function () { return filterRecordsByRowType("valid"); } }), _jsx(Filter, { isSelected: spreadsheetFilter.byRow === "invalid", label: invalid_rows, count: Object.values(errors).length, onClick: function () { return filterRecordsByRowType("invalid"); } })] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;