fuse-importer 0.0.8-testing → 0.0.9-testing

package/lib/esm/Importer/contexts/ImporterContextProvider.js

@@ -0,0 +1,247 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (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]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Fuse from "fuse.js";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { FieldTypes, } from "../../types";
+import { FuseApi } from "../common/FuseApi";
+import { getCustomTheme, theme } from "../common/theme";
+import { getColumnType, verifyDuplicateValue } from "../common/utils";
+export var fusejsOptions = {
+    includeScore: true,
+    threshold: 0.35,
+};
+var ImporterContext = createContext({});
+export var ImporterContextProvider = function (_a) {
+    var templateSlug = _a.templateSlug, initialRecords = _a.initialRecords, apiToken = _a.apiToken, children = _a.children, options = _a.options, onSubmit = _a.onSubmit, onClose = _a.onClose, formatRecord = _a.formatRecord, onValidateRecord = _a.onValidateRecord, dynamicColumns = _a.dynamicColumns;
+    var _b = useState(initialRecords ? 2 : 0), currentStepIndex = _b[0], setCurrentStepIndex = _b[1];
+    var _c = useState(0), matcherSubstep = _c[0], setMatcherSubstep = _c[1];
+    var _d = useState(null), templateError = _d[0], setTemplateError = _d[1];
+    var _e = useState(null), templateHeaders = _e[0], setTemplateHeaders = _e[1];
+    var _f = useState(null), integrations = _f[0], setIntegrations = _f[1];
+    var _g = useState(null), uploadedData = _g[0], setUploadedData = _g[1];
+    var _h = useState(null), organization = _h[0], setOrganization = _h[1];
+    var _j = useState(null), previewFirstTime = _j[0], setPreviewFirstTime = _j[1];
+    var _k = useState({
+        theme: theme,
+        logoURL: null,
+    }), style = _k[0], setStyle = _k[1];
+    var _l = useState(null), templateHeaderMatchings = _l[0], setTemplateHeaderMatchings = _l[1];
+    var _m = useState(null), enumFieldValueMatchings = _m[0], setEnumFieldValueMatchings = _m[1];
+    var _o = useState(null), uploadedDataEnumFieldValues = _o[0], setUploadedDataEnumFieldValues = _o[1];
+    var _p = useState([]), selectedRows = _p[0], setSelectedRows = _p[1];
+    var isUsingManualImport = useRef(false);
+    var _q = useState(0), headerRowIndex = _q[0], setHeaderRowIndex = _q[1];
+    var fuseApi = useMemo(function () { return new FuseApi(options.env, apiToken); }, [
+        options.env,
+        apiToken,
+    ]);
+    var uploadedDataHeaders = useMemo(function () {
+        var _a;
+        if (!uploadedData)
+            return null;
+        if (isUsingManualImport.current) {
+            return templateHeaders.reduce(function (acc, curr) {
+                acc.push(curr.internal_key);
+                return acc;
+            }, []);
+        }
+        return (_a = uploadedData[headerRowIndex]) === null || _a === void 0 ? void 0 : _a.map(function (ud) {
+            return typeof ud === "number" ? ud.toString() : ud;
+        });
+    }, [uploadedData, headerRowIndex]);
+    useEffect(function () {
+        var setHeadersFromDataset = function () {
+            var _templateHeaderMatchings = {};
+            var fuse = new Fuse(uploadedDataHeaders, fusejsOptions);
+            templateHeaders.forEach(function (templateHeader, _index) {
+                var _a;
+                var fuseResults = fuse.search(templateHeader.label);
+                _templateHeaderMatchings[templateHeader.label] = (_a = fuseResults[0]) === null || _a === void 0 ? void 0 : _a.item;
+            });
+            setTemplateHeaderMatchings(_templateHeaderMatchings);
+        };
+        if (uploadedDataHeaders) {
+            setHeadersFromDataset();
+        }
+    }, [uploadedDataHeaders]);
+    useEffect(function () {
+        if (!templateHeaderMatchings || !uploadedDataHeaders)
+            return;
+        var _uploadedDataEnumFieldValues = {};
+        var templateLabels = Object.keys(templateHeaderMatchings);
+        var enumFieldsLabels = templateLabels.filter(function (templateLabel) {
+            return getColumnType({ templateLabel: templateLabel, templateHeaders: templateHeaders }) === FieldTypes.enum;
+        });
+        enumFieldsLabels.forEach(function (templateLabel) {
+            var uploadedDataHeader = templateHeaderMatchings[templateLabel];
+            var enumFieldValues = new Set();
+            var columnIndex = uploadedDataHeaders.indexOf(uploadedDataHeader);
+            if (columnIndex === -1)
+                return;
+            uploadedData === null || uploadedData === void 0 ? void 0 : uploadedData.slice(headerRowIndex + 1).forEach(function (row) {
+                var uploadedValue = row[columnIndex];
+                enumFieldValues.add(uploadedValue);
+            });
+            _uploadedDataEnumFieldValues[templateLabel] = Array.from(enumFieldValues.values()).filter(function (element) {
+                return element !== undefined;
+            });
+        });
+        setUploadedDataEnumFieldValues(_uploadedDataEnumFieldValues);
+    }, [templateHeaderMatchings, uploadedDataHeaders]);
+    useEffect(function () {
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, organization_1, columns_1, importer_style_preferences, integrations_1, preview_first_time, error_1, errorMsg;
+            var _b, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        _d.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, fuseApi.get("/api/v1/importer/templates/".concat(templateSlug))];
+                    case 1:
+                        _a = (_d.sent()).data, organization_1 = _a.organization, columns_1 = _a.columns, importer_style_preferences = _a.importer_style_preferences, integrations_1 = _a.integrations, preview_first_time = _a.preview_first_time;
+                        setOrganization(organization_1);
+                        setTemplateHeaders(function () {
+                            // user has created dynamic columns
+                            if (dynamicColumns && (dynamicColumns === null || dynamicColumns === void 0 ? void 0 : dynamicColumns.length) >= 0) {
+                                var allColumns = __spreadArray(__spreadArray([], columns_1, true), dynamicColumns, true);
+                                var columnsOrderedByPosition_1 = allColumns.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.position) - (b === null || b === void 0 ? void 0 : b.position); });
+                                verifyDuplicateValue(columnsOrderedByPosition_1, "internal_key", true, "There is a duplicated 'internal_key' between your columns.");
+                                verifyDuplicateValue(columnsOrderedByPosition_1, "label", true, "There is a duplicated 'label' between your columns.");
+                                return columnsOrderedByPosition_1;
+                            }
+                            // user has not created dynamic columns
+                            var columnsOrderedByPosition = columns_1.sort(function (a, b) { return a.position - b.position; });
+                            return columnsOrderedByPosition;
+                        });
+                        setIntegrations(integrations_1);
+                        setPreviewFirstTime(preview_first_time);
+                        if (organization_1.plan && organization_1.plan.allow_style_customization) {
+                            setStyle(getCustomTheme(importer_style_preferences));
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_1 = _d.sent();
+                        errorMsg = ((_c = (_b = error_1.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.message) ||
+                            "There was an error preventing the data importer from loading. Check your API Key and try again.";
+                        setTemplateError(errorMsg);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [dynamicColumns]);
+    var resetImport = function () {
+        setUploadedData(null);
+        setTemplateHeaderMatchings(null);
+    };
+    var resetImporterWhenUsingManualImport = function () {
+        setCurrentStepIndex(0);
+        isUsingManualImport.current = false;
+        resetImport();
+    };
+    var manualDataImportSelected = function () {
+        if (templateHeaders) {
+            isUsingManualImport.current = true;
+            setUploadedData([]);
+            setTemplateHeaderMatchings({});
+            setCurrentStepIndex(2);
+        }
+    };
+    var inTrialMode = organization === null || organization === void 0 ? void 0 : organization.trial_mode;
+    var value = {
+        initialRecords: initialRecords,
+        currentStepIndex: currentStepIndex,
+        templateHeaders: templateHeaders,
+        enumFieldValueMatchings: enumFieldValueMatchings,
+        templateHeaderMatchings: templateHeaderMatchings,
+        uploadedDataEnumFieldValues: uploadedDataEnumFieldValues,
+        importerOptions: options,
+        uploadedData: uploadedData,
+        uploadedDataHeaders: uploadedDataHeaders,
+        templateError: templateError,
+        matcherSubstep: matcherSubstep,
+        apiToken: apiToken,
+        templateSlug: templateSlug,
+        inTrialMode: inTrialMode,
+        fuseApi: fuseApi,
+        theme: style.theme,
+        logoURL: style.logoURL,
+        integrations: integrations,
+        previewFirstTime: previewFirstTime,
+        headerRowIndex: headerRowIndex,
+        setHeaderRowIndex: setHeaderRowIndex,
+        setUploadedData: setUploadedData,
+        formatRecord: formatRecord,
+        setCurrentStepIndex: setCurrentStepIndex,
+        setEnumFieldValueMatchings: setEnumFieldValueMatchings,
+        setTemplateHeaderMatchings: setTemplateHeaderMatchings,
+        resetImport: resetImport,
+        onValidateRecord: onValidateRecord,
+        setMatcherSubstep: setMatcherSubstep,
+        onClose: onClose,
+        setPreviewFirstTime: setPreviewFirstTime,
+        onSubmit: onSubmit,
+        selectedRows: selectedRows,
+        setSelectedRows: setSelectedRows,
+        isUsingManualImport: isUsingManualImport,
+        resetImporterWhenUsingManualImport: resetImporterWhenUsingManualImport,
+        manualDataImportSelected: manualDataImportSelected,
+    };
+    return (_jsx(ImporterContext.Provider, __assign({ value: value }, { children: children })));
+};
+export var useImporterContext = function () { return useContext(ImporterContext); };

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

@@ -0,0 +1,152 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { transformRecord } from "../../Importer/common/Spreadsheet/transformation";
+import { FieldTypes, } from "../../types";
+import { parseValue } from "../common/Spreadsheet/common";
+var MINIMUM_ROW_COUNT = 20;
+var getRowId = function (index) {
+    var uniqueTimestamp = new Date().getTime();
+    return "r".concat(index, "-").concat(uniqueTimestamp);
+};
+export var addEmptyRows = function (data, fields) {
+    var emptyRecord = fields.reduce(function (obj, f) {
+        var _a;
+        return (__assign(__assign({}, obj), (_a = {}, _a[f.name] = null, _a)));
+    }, {});
+    var newData = Array.from({ length: MINIMUM_ROW_COUNT - data.length }, function (_, index) { return (__assign(__assign({}, emptyRecord), { _meta: {
+            id: getRowId(data.length + index),
+            rowIndex: data.length + index,
+        } })); });
+    return __spreadArray(__spreadArray([], data, true), newData, true);
+};
+export var addMeta = function (record, index, uploadedRow, transformedRow) {
+    var _a;
+    if (uploadedRow === void 0) { uploadedRow = null; }
+    if (transformedRow === void 0) { transformedRow = null; }
+    var rId = getRowId(index);
+    var meta = (_a = record._meta) !== null && _a !== void 0 ? _a : {};
+    return __assign(__assign({}, record), { _meta: __assign(__assign({}, meta), { id: rId, rowIndex: index, touched: false, uploadedRow: uploadedRow, transformedRow: transformedRow }) });
+};
+export var recordListToDataSet = function (data, fields) {
+    var fieldWithTransformations = fields.filter(function (field) { var _a; return ((_a = field === null || field === void 0 ? void 0 : field.transformations) === null || _a === void 0 ? void 0 : _a.length) > 0; });
+    var initialData = data;
+    if (data.length < MINIMUM_ROW_COUNT) {
+        initialData = addEmptyRows(data, fields);
+    }
+    return initialData.reduce(function (dataSet, record, i) {
+        var transformedRecord = null;
+        if (fieldWithTransformations.length > 0) {
+            transformedRecord = transformRecord({
+                record: record,
+                fields: fieldWithTransformations,
+            });
+        }
+        var recordWithMeta = addMeta(record, i, undefined, transformedRecord);
+        dataSet[recordWithMeta._meta.id] = recordWithMeta;
+        return dataSet;
+    }, {});
+};
+export var transformToRecords = function (_a) {
+    var templateHeaderMatchings = _a.templateHeaderMatchings, enumFieldValueMatchings = _a.enumFieldValueMatchings, templateHeaders = _a.templateHeaders, uploadedDataHeaders = _a.uploadedDataHeaders, uploadedData = _a.uploadedData, formatRecord = _a.formatRecord;
+    var matchedColumnsLabels = Object.keys(templateHeaderMatchings)
+        .filter(function (label) { return !!templateHeaderMatchings[label]; })
+        .map(function (label) { return ({
+        label: label,
+        index: uploadedDataHeaders.indexOf(templateHeaderMatchings[label]),
+    }); });
+    var templateHeadersByLabel = templateHeaders.reduce(function (byLabel, header) {
+        var _a;
+        return (__assign(__assign({}, byLabel), (_a = {}, _a[header.label] = header, _a)));
+    }, {});
+    var getRecord = function (row, index) {
+        var record = addMeta({}, index, row);
+        matchedColumnsLabels.forEach(function (_a) {
+            var label = _a.label, index = _a.index;
+            var enumSet = enumFieldValueMatchings
+                ? enumFieldValueMatchings[label]
+                : null;
+            var header = templateHeadersByLabel[label];
+            if (!header)
+                return;
+            var key = header.internal_key;
+            var value = row[index];
+            if (value === undefined)
+                return;
+            record[key] = parseValue(FieldTypes[header.column_type], value, enumSet);
+        });
+        return formatRecord ? formatRecord(record) : record;
+    };
+    return uploadedData.map(getRecord);
+};
+export var getPreviewDataSet = function (_a) {
+    var uploadedData = _a.uploadedData;
+    var rowLen = 0;
+    for (var i = 0; i < uploadedData.length; i++)
+        rowLen = Math.max(rowLen, uploadedData[i].length);
+    var fields = new Array(rowLen).fill(null).map(function (_, i) {
+        var key = String.fromCharCode(65 + i);
+        return {
+            label: key,
+            name: key,
+            type: FieldTypes.string,
+            isRequired: false,
+        };
+    });
+    var getInitialDataSet = function () {
+        var data = uploadedData.map(function (row, index) {
+            var entry = addMeta({}, index);
+            fields.forEach(function (field, index) {
+                entry[field.name] = row[index];
+            });
+            return entry;
+        });
+        return recordListToDataSet(data, fields);
+    };
+    return { fields: fields, initialDataSet: getInitialDataSet() };
+};
+export var getTemplateFields = function (_a) {
+    var templateHeaders = _a.templateHeaders;
+    return templateHeaders.map(function (templateHeader) { return ({
+        label: templateHeader.label,
+        name: templateHeader.internal_key,
+        type: FieldTypes[templateHeader.column_type] || FieldTypes.string,
+        isRequired: templateHeader.required,
+        options: templateHeader.values,
+        pattern: templateHeader.pattern,
+        validations: templateHeader.validations,
+        transformations: templateHeader.transformations,
+    }); });
+};
+export var getReviewDataSet = function (_a) {
+    var _b;
+    var records = _a.records, fields = _a.fields;
+    var baseInitialDataSet = recordListToDataSet(addEmptyRows(records, fields), fields);
+    var highestRowIndex = 0;
+    Object.keys(baseInitialDataSet).forEach(function (key) {
+        var record = baseInitialDataSet[key];
+        if (record._meta.rowIndex > highestRowIndex) {
+            highestRowIndex = record._meta.rowIndex;
+        }
+    });
+    var emptyRowAtBottom = addMeta({}, highestRowIndex + 1);
+    var initialDataSet = __assign(__assign({}, baseInitialDataSet), (_b = {}, _b[emptyRowAtBottom._meta.id] = emptyRowAtBottom, _b));
+    return { initialDataSet: initialDataSet };
+};

package/lib/esm/Importer/index.js

@@ -0,0 +1,28 @@
+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 { ImporterContextProvider } from "./contexts/ImporterContextProvider";
+import { ImporterWithContext } from "./ImporterWithContext";
+export var ACCOUNT_ROUTES = {
+    TEMPLATES: "/importers",
+};
+export var ACCOUNT_VIEW_PATH = "/account";
+var p = function (path) { return "".concat(ACCOUNT_VIEW_PATH).concat(path); };
+export var TEMPLATES_ROUTE = p(ACCOUNT_ROUTES.TEMPLATES);
+var Importer = function (_a) {
+    var templateSlug = _a.templateSlug, apiToken = _a.apiToken, options = _a.options, formatRecord = _a.formatRecord, onValidateRecord = _a.onValidateRecord, onSubmit = _a.onSubmit, onClose = _a.onClose, dynamicColumns = _a.dynamicColumns;
+    return (_jsx(ImporterContextProvider, __assign({ initialRecords: options.records, options: options, templateSlug: templateSlug, apiToken: apiToken, formatRecord: formatRecord, onValidateRecord: onValidateRecord, onClose: onClose, onSubmit: onSubmit, dynamicColumns: dynamicColumns }, { children: _jsx(ImporterWithContext, {}) })));
+};
+export * from "./common/Spreadsheet";
+export * from "./common/utils";
+export * from "./Review/ReviewContextProvider";
+export { Importer };

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] })) })) }));
+};