@gobizweb/core 0.0.7

package/lib/components/GlobalFilter/GlobalFilter.component.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalFilter = void 0;
+var react_1 = __importDefault(require("react"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var button_1 = __importDefault(require("@asphalt-react/button"));
+var providers_1 = require("../../providers");
+var Dropdown_1 = require("../Dropdown");
+var GlobalFilter_styled_1 = require("./GlobalFilter.styled");
+var GlobalFilter_provider_1 = require("./GlobalFilter.provider");
+var GlobalFilter_component_state_1 = require("./GlobalFilter.component.state");
+var GlobalFilter_date_component_1 = require("./GlobalFilter.date.component");
+exports.GlobalFilter = mobx_react_lite_1.observer(function () {
+    var textFiles = require("./translations.json");
+    var translate = providers_1.useTranslation(textFiles);
+    var _a = GlobalFilter_provider_1.useGlobalFilter(), applyFilter = _a.applyFilter, config = _a.config;
+    var _b = GlobalFilter_component_state_1.useGlobalFilterComponent(), showFilter = _b.showFilter, showOutletFilter = _b.showOutletFilter, outletsSelection = _b.outletsSelection, dateRanges = _b.dateRanges, onOutletChange = _b.onOutletChange, onDateRangeChange = _b.onDateRangeChange;
+    if (!showFilter)
+        return null;
+    return (react_1.default.createElement(GlobalFilter_styled_1.WrapperEl, null,
+        showOutletFilter && (react_1.default.createElement(GlobalFilter_styled_1.InputWrapperEl, null,
+            react_1.default.createElement(Dropdown_1.Dropdown, { typeahead: true, items: outletsSelection, onChange: onOutletChange, size: "s", placeholder: translate("label.placeholder") }))),
+        config.showDateFilter && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(GlobalFilter_styled_1.InputWrapperEl, null,
+                react_1.default.createElement(Dropdown_1.Dropdown, { items: dateRanges, onChange: onDateRangeChange, size: "s" })),
+            react_1.default.createElement(GlobalFilter_date_component_1.GlobalFilterDatePicker, null))),
+        react_1.default.createElement(GlobalFilter_styled_1.InputWrapperEl, null,
+            react_1.default.createElement(button_1.default, { stretch: true, size: "s", onClick: applyFilter }, translate("label.apply")))));
+});

package/lib/components/GlobalFilter/GlobalFilter.component.state.js

@@ -0,0 +1,116 @@
+"use strict";
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGlobalFilterComponent = void 0;
+var react_1 = require("react");
+var datetime_1 = require("../../constants/datetime");
+var providers_1 = require("../../providers");
+var GlobalFilter_provider_1 = require("./GlobalFilter.provider");
+exports.useGlobalFilterComponent = function () {
+    var textFiles = require("./translations.json");
+    var translate = providers_1.useTranslation(textFiles);
+    var outlets = providers_1.useOutlets().outlets;
+    var language = providers_1.useLanguage().language;
+    var _a = GlobalFilter_provider_1.useGlobalFilter(), setMerchantId = _a.setMerchantId, setDateRange = _a.setDateRange, config = _a.config, _b = _a.internalFilter, merchant_id = _b.merchant_id, date_range = _b.date_range, filter_merchant_id = _a.filter.merchant_id;
+    var activeDates = datetime_1.DATE_RANGES[language].date;
+    var _c = react_1.useState(activeDates), dateRanges = _c[0], setDateRanges = _c[1];
+    var _outlets = __spreadArrays([
+        { id: "all", key: "" + translate("label.all_outlets"), selected: true }
+    ], outlets.map(function (merchant) { return ({
+        id: merchant.json.id,
+        key: merchant.json.outlet_name,
+        selected: false,
+    }); }));
+    var _d = react_1.useState(_outlets), outletsSelection = _d[0], setOutletsSelection = _d[1];
+    var showOutletFilter = config.showOutletFilter && outlets.length > 1;
+    var onOutletChange = function (item) {
+        setMerchantId(item === null || item === void 0 ? void 0 : item.id);
+    };
+    var onDateRangeChange = function (item) {
+        setDateRange((item === null || item === void 0 ? void 0 : item.id) || "today");
+    };
+    //Remove "All Outlet" option based on config
+    react_1.useEffect(function () {
+        if (config.hideAllOutlet) {
+            var outletsWithoutAll = _outlets.slice(1);
+            setOutletsSelection(outletsWithoutAll);
+        }
+        else {
+            setOutletsSelection(_outlets);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [config.hideAllOutlet]);
+    react_1.useEffect(function () {
+        setOutletsSelection(function (prev) {
+            var _outletsSelection = prev.map(function (item) {
+                var isNoMerchantSelected = !filter_merchant_id && !merchant_id;
+                var isOptionSelected = isNoMerchantSelected
+                    ? item.id === "all"
+                    : merchant_id === item.id;
+                return { id: item.id, key: item.key, selected: isOptionSelected };
+            });
+            return _outletsSelection;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [merchant_id]);
+    react_1.useEffect(function () {
+        var _activeDate = activeDates.filter(function (date) {
+            if (!date_range)
+                return date;
+            if (date.id === date_range) {
+                date.selected = true;
+            }
+            else {
+                date.selected = false;
+            }
+            return date;
+        });
+        setDateRanges(_activeDate);
+    }, [language, date_range, activeDates]);
+    react_1.useEffect(function () {
+        var outlets = _outlets.filter(function (outlet) {
+            if (outlet.id === merchant_id || outlet.id === filter_merchant_id) {
+                outlet.selected = true;
+            }
+            else if (!merchant_id && !filter_merchant_id && outlet.id === "all") {
+                outlet.selected = true;
+            }
+            else {
+                outlet.selected = false;
+            }
+            return outlet;
+        });
+        setOutletsSelection(outlets);
+        // eslint-disable-next-line
+    }, [language]);
+    react_1.useEffect(function () {
+        var outlets = _outlets.filter(function (outlet) {
+            if (outlet.id === merchant_id || outlet.id === filter_merchant_id) {
+                outlet.selected = true;
+            }
+            else if (!merchant_id && !filter_merchant_id && outlet.id === "all") {
+                outlet.selected = true;
+            }
+            else {
+                outlet.selected = false;
+            }
+            return outlet;
+        });
+        setOutletsSelection(outlets);
+        // eslint-disable-next-line
+    }, [language]);
+    return {
+        showFilter: config.showDateFilter || showOutletFilter,
+        showOutletFilter: showOutletFilter,
+        dateRanges: dateRanges,
+        outletsSelection: outletsSelection,
+        onOutletChange: onOutletChange,
+        onDateRangeChange: onDateRangeChange,
+    };
+};

package/lib/components/GlobalFilter/GlobalFilter.constant.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_GLOBAL_FILTER_PARAMS = exports.DEFAULT_GLOBAL_FILTER_CONFIG = void 0;
+var moment_1 = __importDefault(require("moment"));
+exports.DEFAULT_GLOBAL_FILTER_CONFIG = {
+    showDateFilter: false,
+    showOutletFilter: false,
+    hideAllOutlet: false,
+};
+exports.DEFAULT_GLOBAL_FILTER_PARAMS = {
+    date_range: "today",
+    start_time: moment_1.default().startOf("day").toISOString(),
+    end_time: moment_1.default().endOf("day").toISOString(),
+};

package/lib/components/GlobalFilter/GlobalFilter.date.component.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalFilterDatePicker = void 0;
+var mobx_react_lite_1 = require("mobx-react-lite");
+var moment_1 = __importDefault(require("moment"));
+var react_1 = __importDefault(require("react"));
+var GlobalFilter_styled_1 = require("./GlobalFilter.styled");
+var GlobalFilter_component_state_1 = require("./GlobalFilter.component.state");
+var GlobalFilter_provider_1 = require("./GlobalFilter.provider");
+var DatePicker_1 = require("../DatePicker");
+exports.GlobalFilterDatePicker = mobx_react_lite_1.observer(function () {
+    var _a = GlobalFilter_provider_1.useGlobalFilter(), setDate = _a.setDate, config = _a.config, internalFilter = _a.internalFilter;
+    var showOutletFilter = GlobalFilter_component_state_1.useGlobalFilterComponent().showOutletFilter;
+    var onStartDateChange = function (date) {
+        setDate("start_time", date.toISOString());
+    };
+    var onEndDateChange = function (date) {
+        setDate("end_time", date.toISOString());
+    };
+    if (!config.showDateFilter && !showOutletFilter) {
+        return null;
+    }
+    if (!(config.showDateFilter && internalFilter.date_range === "custom")) {
+        return null;
+    }
+    return (react_1.default.createElement(GlobalFilter_styled_1.DateRangeWrapperEl, null,
+        react_1.default.createElement(GlobalFilter_styled_1.InputWrapperEl, null,
+            react_1.default.createElement(DatePicker_1.DatePicker, { showTimeSelect: true, maxDate: moment_1.default(), onChange: onStartDateChange, selected: moment_1.default(internalFilter.start_time), minDate: moment_1.default().subtract(6, "months") })),
+        react_1.default.createElement(GlobalFilter_styled_1.InputWrapperEl, null,
+            react_1.default.createElement(DatePicker_1.DatePicker, { showTimeSelect: true, maxDate: moment_1.default(), onChange: onEndDateChange, selected: moment_1.default(internalFilter.end_time), minDate: moment_1.default(internalFilter.start_time) }))));
+});

package/lib/components/GlobalFilter/GlobalFilter.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/components/GlobalFilter/GlobalFilter.provider.js

@@ -0,0 +1,169 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGlobalFilter = exports.GlobalFilterContext = exports.GlobalFilterProvider = void 0;
+var react_1 = __importStar(require("react"));
+var moment_1 = __importDefault(require("moment"));
+var query_string_1 = __importDefault(require("query-string"));
+var GlobalFilter_constant_1 = require("./GlobalFilter.constant");
+var datePresets_1 = require("../../helpers/datePresets");
+var PubsubEvents_1 = require("../../constants/PubsubEvents");
+exports.GlobalFilterProvider = function (_a) {
+    var children = _a.children, context = _a.context, _b = _a.asMicroApp, asMicroApp = _b === void 0 ? false : _b;
+    var CONFIG_TOPIC = asMicroApp
+        ? PubsubEvents_1.GLOBALFILTER_PF_CONFIG
+        : PubsubEvents_1.GLOBALFILTER_MF_CONFIG;
+    var FILTER_TOPIC = asMicroApp
+        ? PubsubEvents_1.GLOBALFILTER_PF_FILTER
+        : PubsubEvents_1.GLOBALFILTER_MF_FILTER;
+    var _c = react_1.useState(GlobalFilter_constant_1.DEFAULT_GLOBAL_FILTER_PARAMS), filter = _c[0], setFilter = _c[1];
+    var _d = react_1.useState(GlobalFilter_constant_1.DEFAULT_GLOBAL_FILTER_CONFIG), config = _d[0], setConfig = _d[1];
+    var _e = react_1.useState(GlobalFilter_constant_1.DEFAULT_GLOBAL_FILTER_PARAMS), internalFilter = _e[0], setInternalFilter = _e[1];
+    var isConsolidatedView = !(filter === null || filter === void 0 ? void 0 : filter.merchant_id) || filter.merchant_id === "all";
+    var enableFilter = function (config) {
+        var _a;
+        if (config === void 0) { config = GlobalFilter_constant_1.DEFAULT_GLOBAL_FILTER_CONFIG; }
+        var _config = __assign(__assign({}, GlobalFilter_constant_1.DEFAULT_GLOBAL_FILTER_CONFIG), config);
+        var newConfig = {
+            showDateFilter: _config.showDateFilter,
+            showOutletFilter: _config.showOutletFilter,
+            hideAllOutlet: _config.hideAllOutlet,
+        };
+        setConfig(newConfig);
+        (_a = window.$pubsubPublish) === null || _a === void 0 ? void 0 : _a.call(window, CONFIG_TOPIC, {
+            config: newConfig,
+        });
+    };
+    var setDate = function (key, value) {
+        var _a;
+        setInternalFilter(__assign(__assign({}, internalFilter), (_a = {}, _a[key] = value !== null && value !== void 0 ? value : internalFilter[key], _a)));
+    };
+    var setMerchantId = function (merchantId) {
+        setInternalFilter(__assign(__assign({}, internalFilter), { merchant_id: merchantId }));
+    };
+    var setDateRange = function (range) {
+        var _a = datePresets_1.datesFromTimeRange({
+            timeRange: range,
+            previousEndTime: moment_1.default(internalFilter.end_time),
+            previousStartTime: moment_1.default(internalFilter.start_time),
+        }), startTime = _a.startTime, endTime = _a.endTime;
+        setInternalFilter(__assign(__assign({}, internalFilter), { date_range: range, start_time: startTime.toISOString(), end_time: endTime.toISOString() }));
+    };
+    var applyFilter = function () {
+        var _a;
+        setFilter(internalFilter);
+        (_a = window.$pubsubPublish) === null || _a === void 0 ? void 0 : _a.call(window, FILTER_TOPIC, {
+            filter: internalFilter,
+        });
+    };
+    var resetFilter = function () {
+        setInternalFilter(filter);
+    };
+    var initFilter = function (_filter) {
+        var _a;
+        setInternalFilter(_filter);
+        setFilter(_filter);
+        (_a = window.$pubsubPublish) === null || _a === void 0 ? void 0 : _a.call(window, FILTER_TOPIC, {
+            filter: _filter,
+        });
+    };
+    var disableFilter = function () {
+        var _a;
+        setConfig(GlobalFilter_constant_1.DEFAULT_GLOBAL_FILTER_CONFIG);
+        (_a = window.$pubsubPublish) === null || _a === void 0 ? void 0 : _a.call(window, CONFIG_TOPIC, {
+            config: GlobalFilter_constant_1.DEFAULT_GLOBAL_FILTER_CONFIG,
+        });
+    };
+    var toQuery = function () {
+        var toSet = {
+            merchant_id: filter === null || filter === void 0 ? void 0 : filter.merchant_id,
+            date_range: filter === null || filter === void 0 ? void 0 : filter.date_range,
+        };
+        if (toSet.merchant_id === "all") {
+            toSet.merchant_id = undefined;
+        }
+        if (toSet.date_range === "custom") {
+            toSet.start_time = filter === null || filter === void 0 ? void 0 : filter.start_time;
+            toSet.end_time = filter === null || filter === void 0 ? void 0 : filter.end_time;
+        }
+        // Do not show date_range if it's set to today or custom
+        if (toSet.date_range === "today" || toSet.date_range === "custom") {
+            toSet.date_range = undefined;
+        }
+        return "?" + query_string_1.default.stringify(toSet);
+    };
+    var onPubSubFilter = function (data) {
+        setInternalFilter(data.filter);
+        setFilter(data.filter);
+    };
+    var onPubSubConfig = function (data) {
+        setConfig(data.config);
+    };
+    react_1.useEffect(function () {
+        var _a, _b;
+        var SUBSCRIBER_CONFIG_TOPIC = asMicroApp
+            ? PubsubEvents_1.GLOBALFILTER_MF_CONFIG
+            : PubsubEvents_1.GLOBALFILTER_PF_CONFIG;
+        (_a = window.$pubsubSubscribe) === null || _a === void 0 ? void 0 : _a.call(window, SUBSCRIBER_CONFIG_TOPIC, onPubSubConfig);
+        var SUBSCRIBER_FILTER_TOPIC = asMicroApp
+            ? PubsubEvents_1.GLOBALFILTER_MF_FILTER
+            : PubsubEvents_1.GLOBALFILTER_PF_FILTER;
+        (_b = window.$pubsubSubscribe) === null || _b === void 0 ? void 0 : _b.call(window, SUBSCRIBER_FILTER_TOPIC, onPubSubFilter);
+        return function () {
+            var _a, _b;
+            (_a = window.$pubsubUnsubscribe) === null || _a === void 0 ? void 0 : _a.call(window, SUBSCRIBER_CONFIG_TOPIC, onPubSubConfig);
+            (_b = window.$pubsubUnsubscribe) === null || _b === void 0 ? void 0 : _b.call(window, SUBSCRIBER_FILTER_TOPIC, onPubSubFilter);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var _context = {
+        filter: filter,
+        config: config,
+        internalFilter: internalFilter,
+        enableFilter: enableFilter,
+        setDate: setDate,
+        setMerchantId: setMerchantId,
+        setDateRange: setDateRange,
+        applyFilter: applyFilter,
+        resetFilter: resetFilter,
+        disableFilter: disableFilter,
+        toQuery: toQuery,
+        isConsolidatedView: isConsolidatedView,
+        initFilter: initFilter,
+    };
+    return (react_1.default.createElement(exports.GlobalFilterContext.Provider, { value: (context || _context), children: children }));
+};
+exports.GlobalFilterContext = react_1.createContext({});
+exports.useGlobalFilter = function () { return react_1.useContext(exports.GlobalFilterContext); };

package/lib/components/GlobalFilter/GlobalFilter.styled.js

@@ -0,0 +1,16 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangeWrapperEl = exports.InputWrapperEl = exports.WrapperEl = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var constants_1 = require("../../constants");
+exports.WrapperEl = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: 16px;\n\n  ", " {\n    flex-direction: row;\n    padding: 16px 24px;\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: 16px;\n\n  ", " {\n    flex-direction: row;\n    padding: 16px 24px;\n  }\n"])), constants_1.MediaQueries.screen.medium.minWidth);
+exports.InputWrapperEl = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: 8px;\n  min-width: 128px;\n\n  ", " {\n    margin-bottom: 0;\n    margin-left: 8px;\n  }\n"], ["\n  margin-bottom: 8px;\n  min-width: 128px;\n\n  ", " {\n    margin-bottom: 0;\n    margin-left: 8px;\n  }\n"])), constants_1.MediaQueries.screen.medium.minWidth);
+exports.DateRangeWrapperEl = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    flex-direction: row;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    flex-direction: row;\n  }\n"])), constants_1.MediaQueries.screen.medium.minWidth);
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/components/GlobalFilter/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./GlobalFilter.component.state"), exports);
+__exportStar(require("./GlobalFilter.component"), exports);
+__exportStar(require("./GlobalFilter.provider"), exports);
+__exportStar(require("./GlobalFilter.interface"), exports);

package/lib/components/Guard/Guard.component.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Guard = void 0;
+var react_1 = __importDefault(require("react"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var Auth_provider_1 = require("../../providers/Auth.provider");
+exports.Guard = mobx_react_lite_1.observer(function (props) {
+    var isPermitted = props.isPermitted || Auth_provider_1.useAuth().isPermitted;
+    var access = props.access, actions = props.actions, _a = props.validation, validation = _a === void 0 ? true : _a;
+    if (!validation)
+        return react_1.default.createElement(react_1.default.Fragment, null, props.fallback);
+    if (!!(access && actions) && !isPermitted(access, actions))
+        return react_1.default.createElement(react_1.default.Fragment, null, props.fallback);
+    return react_1.default.createElement(react_1.default.Fragment, null, props.children);
+});

package/lib/components/Guard/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Guard.component"), exports);

package/lib/components/IframeLoader/IframeLoader.js

@@ -0,0 +1,47 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IframeLoader = void 0;
+var React = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var react_1 = require("react");
+var Box_1 = require("../Box");
+var Loading_1 = require("../Loading");
+var IframeContent = styled_components_1.default.iframe(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border: none;\n"], ["\n  width: 100%;\n  height: 100%;\n  border: none;\n"])));
+exports.IframeLoader = function (_a) {
+    var src = _a.src, _b = _a.onLoad, onLoad = _b === void 0 ? function () { } : _b;
+    var _c = react_1.useState(true), isLoading = _c[0], setLoading = _c[1];
+    var onLoaded = function (event) {
+        setLoading(false);
+        onLoad(event);
+    };
+    return (React.createElement(Box_1.Box, { style: { width: "100%", height: "100vh" }, "data-testid": "iframe-loader" },
+        isLoading && React.createElement(Loading_1.Loading, null),
+        React.createElement(IframeContent, { src: src, onLoad: onLoaded, style: { display: isLoading ? "none" : "block" } })));
+};
+var templateObject_1;

package/lib/components/IframeLoader/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./IframeLoader"), exports);