awing-library 2.1.21-beta → 2.1.21

package/lib/ACM-AXN/Template/CreateOrEdit/Template/index.js

@@ -0,0 +1,46 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var MonacoEditor_1 = __importDefault(require("../../../../ACM-AXN/ViewTemplate/TemplateField/Fields/BasicField/MonacoEditor"));
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var recoil_1 = require("recoil");
+var Recoils_1 = require("../Recoils");
+var Parameter_1 = __importDefault(require("./Parameter"));
+var Events_1 = __importDefault(require("./Events"));
+// import MonacoEditor from 'Components/MonacoEditor'
+var Template = function () {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _a = (0, recoil_1.useRecoilState)(Recoils_1.templateInfoState), info = _a[0], setInfo = _a[1];
+    var handleChangeEditor = (0, react_1.useCallback)(function (templateHtml) {
+        setInfo(function (prev) { return (__assign(__assign({}, prev), { templateHtml: templateHtml })); });
+    }, [setInfo]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, sx: { flexGrow: 1, padding: function (theme) { return theme.spacing(3); } }, children: (0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, component: material_1.Paper, sx: { padding: function (theme) { return theme.spacing(2); }, width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, xs: 12, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", sx: {
+                                fontWeight: 'bold',
+                                color: '#BDC7CC',
+                            }, children: t('Common.Events') }), (0, jsx_runtime_1.jsx)(material_1.Box, { marginBottom: 2, children: (0, jsx_runtime_1.jsx)(Events_1.default, { templateId: info.id || '' }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, xs: 12, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", sx: {
+                                fontWeight: 'bold',
+                                color: '#BDC7CC',
+                            }, children: t('TemplateManagement.TemplateHtml') }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                pointerEvents: 'unset',
+                                border: '1px solid #e4e4e4',
+                                padding: '10px 0',
+                                borderRadius: '4px',
+                            }, children: (0, jsx_runtime_1.jsx)(MonacoEditor_1.default, { value: info.templateHtml, height: "30vh", language: "html", onChange: handleChangeEditor, isShowMinimap: true }) })] }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(Parameter_1.default, { templateId: info.id }) })] }) }));
+};
+exports.default = Template;

package/lib/ACM-AXN/Template/CreateOrEdit/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: import("react").FC<unknown>;
+export default _default;

package/lib/ACM-AXN/Template/CreateOrEdit/index.js

@@ -0,0 +1,215 @@
+"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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var lab_1 = require("@mui/lab");
+var material_1 = require("@mui/material");
+var Enum_1 = require("../../../ACM-AXN/Campaign/Enum");
+var TabFile_1 = __importDefault(require("../../../ACM-AXN/Page/CreateOrEdit/TabFile"));
+var enums_1 = require("../../../ACM-AXN/Page/enums");
+var AWING_1 = require("../../../AWING");
+var Wrapper_1 = __importDefault(require("../../../AWING/HOC/Wrapper"));
+var immer_1 = __importDefault(require("immer"));
+var Router_1 = require("../../../AWING/Router");
+var validation_1 = require("../../../AWING/ultis/validation");
+var ClassicDrawer_1 = __importDefault(require("../../../Commons/Components/ClassicDrawer"));
+var Context_1 = require("../../../Context");
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var recoil_1 = require("recoil");
+var Hooks_1 = __importDefault(require("../Hooks"));
+var Infomation_1 = __importDefault(require("./Infomation"));
+var Recoils_1 = require("./Recoils");
+var Script_1 = __importDefault(require("./Script"));
+var Template_1 = __importDefault(require("./Template"));
+var Utils_1 = require("./Template/Utils");
+var CreateOrEdit = function () {
+    var _a, _b;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var service = (0, Hooks_1.default)().service;
+    var appHelper = (0, Context_1.useAwing)().appHelper;
+    var templateId = (0, Router_1.useParams)().templateId;
+    var _c = (0, react_1.useState)([
+        {
+            directoryId: '',
+            name: '',
+            level: 0,
+        },
+    ]), directories = _c[0], setDirectories = _c[1];
+    var _d = (0, react_1.useState)(true), loading = _d[0], setLoading = _d[1];
+    var _e = (0, react_1.useState)([]), templateTypes = _e[0], setTemplateTypes = _e[1];
+    var _f = (0, recoil_1.useRecoilState)(Recoils_1.templateState), templateData = _f[0], setTemplateData = _f[1];
+    var confirmExit = (0, recoil_1.useRecoilValue)(Recoils_1.isEditState);
+    var _g = (0, react_1.useState)('0'), value = _g[0], setValue = _g[1];
+    (0, react_1.useEffect)(function () {
+        setLoading(true);
+        Promise.allSettled([
+            fetchTemplateData(),
+            service.templateTypesGet().then(setTemplateTypes),
+            fetchDirectories(),
+            getId(),
+        ]).finally(function () {
+            setLoading(false);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    (0, react_1.useEffect)(function () {
+        setTemplateData((0, immer_1.default)(function (prev) {
+            var _a;
+            prev.template.directoryId =
+                prev.template.directoryId ||
+                    ((_a = (0, lodash_1.minBy)(directories, 'level')) === null || _a === void 0 ? void 0 : _a.directoryId);
+        }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [directories]);
+    var descriptionValid = (0, react_1.useMemo)(function () {
+        var _a;
+        return (0, validation_1.textValidation)(((_a = templateData.template) === null || _a === void 0 ? void 0 : _a.description) || '', 200, true, false);
+    }, [templateData.template]);
+    var tabsList = (0, react_1.useMemo)(function () {
+        var _a;
+        return [
+            {
+                label: t('TemplateManagement.Information'),
+                compoent: ((0, jsx_runtime_1.jsx)(Infomation_1.default, { directories: directories, templateTypes: templateTypes })),
+            },
+            {
+                label: t('TemplateManagement.Template'),
+                compoent: (0, jsx_runtime_1.jsx)(Template_1.default, {}),
+            },
+            {
+                label: t('TemplateManagement.Script'),
+                compoent: (0, jsx_runtime_1.jsx)(Script_1.default, {}),
+            },
+            {
+                label: t('Common.File'),
+                compoent: ((0, jsx_runtime_1.jsx)(TabFile_1.default, { rootDirectory: ((_a = (0, lodash_1.minBy)(directories, 'level')) === null || _a === void 0 ? void 0 : _a.directoryId) || '', isCreate: Boolean(templateId), pathName: 'ACM-AXN/Template', service: service, pageId: templateData.template.id, pageCode: enums_1.FileTypeCode.Template })),
+            },
+        ];
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        t,
+        directories,
+        templateTypes,
+        templateData,
+        // treeFolder,
+        descriptionValid,
+    ]);
+    var handleChangeTab = function (event, newValue) {
+        setValue(newValue);
+    };
+    var fetchTemplateData = function () {
+        if (templateId) {
+            return service.templatesGet(templateId).then(function (res) {
+                setTemplateData(__assign(__assign({}, res), { templateParameters: (0, Utils_1.removeFiledName)(res.templateParameters) }));
+            });
+        }
+    };
+    var fetchDirectories = function () {
+        return service
+            .directoriesGetByObjectTypeCode(Enum_1.DirectoryRoot.Template)
+            .then(setDirectories);
+    };
+    var getId = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var id;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    id = templateId;
+                    if (!!templateId) return [3 /*break*/, 2];
+                    return [4 /*yield*/, service.directoriesGenerateId()];
+                case 1:
+                    id = _a.sent();
+                    _a.label = 2;
+                case 2:
+                    setTemplateData((function (prev) { return (__assign(__assign({}, prev), { template: __assign(__assign({}, prev.template), { id: id }) })); }));
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleSubmit = function () {
+        var _a;
+        var parameters = (0, Utils_1.flattenParameter4Parent)(templateData.templateParameters);
+        var errField = (0, lodash_1.uniqBy)(parameters, 'fieldName');
+        if (!((_a = templateData.template) === null || _a === void 0 ? void 0 : _a.templateTypeId) ||
+            !templateData.template.description) {
+            appHelper.snackbar('error', t('Common.RequireAll'));
+            // return Promise.reject()
+            return;
+        }
+        if (errField.length < parameters.length) {
+            appHelper.snackbar('warning', t('TemplateManagement.DuplicateFieldName'));
+            return;
+        }
+        var data4Update = {
+            template: __assign(__assign({}, templateData.template), { id: templateId }),
+            // eslint-disable-next-line no-sequences
+            templateParameters: parameters.map(function (parameter) { return (
+            // eslint-disable-next-line no-sequences
+            delete parameter.childrens, __assign(__assign({}, parameter), { templateId: templateId })); }),
+            templateEvents: templateData.templateEvents
+        };
+        if (templateId) {
+            return service.templatesPut(templateId, data4Update);
+        }
+        return service.templatesPost(data4Update);
+    };
+    return ((0, jsx_runtime_1.jsx)(ClassicDrawer_1.default, { title: "".concat(t(['TemplateManagement', templateId ? 'Edit' : 'Create'].join('.'))).concat(templateId ? ": ".concat((_a = templateData === null || templateData === void 0 ? void 0 : templateData.template) === null || _a === void 0 ? void 0 : _a.description) : '', "\n               "), onSubmit: handleSubmit, disableButtonSubmit: !((_b = templateData.template) === null || _b === void 0 ? void 0 : _b.templateTypeId) || !descriptionValid.valid || !confirmExit, confirmExit: confirmExit, childrenWrapperStyle: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                flexGrow: 1,
+                padding: function (theme) { return theme.spacing(3); },
+            }, children: loading ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, component: material_1.Paper, sx: { width: '100%' }, children: (0, jsx_runtime_1.jsxs)(lab_1.TabContext, { value: value, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { borderBottom: 1, borderColor: 'divider' }, children: (0, jsx_runtime_1.jsx)(lab_1.TabList, { variant: "scrollable", onChange: handleChangeTab, "aria-label": "lab API tabs example", children: tabsList.map(function (tab, idx) { return ((0, jsx_runtime_1.jsx)(material_1.Tab, { sx: { minWidth: '160px' }, value: String(idx), label: (0, jsx_runtime_1.jsx)("b", { children: tab.label }) }, idx)); }) }) }), tabsList.map(function (tab, idx) { return ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, { sx: { padding: '0' }, value: String(idx), children: tab.compoent }, idx)); })] }) })) }) }));
+};
+exports.default = (0, Wrapper_1.default)(CreateOrEdit, { component: recoil_1.RecoilRoot });

package/lib/ACM-AXN/Template/Hooks.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TemplateProps } from "./Types";
+export declare const templatePropsContext: import("react").Context<TemplateProps>;
+declare const useTemplateProps: () => TemplateProps;
+export default useTemplateProps;

package/lib/ACM-AXN/Template/Hooks.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.templatePropsContext = void 0;
+var react_1 = require("react");
+var react_2 = require("react");
+exports.templatePropsContext = (0, react_1.createContext)({});
+var useTemplateProps = function () {
+    var props = (0, react_2.useContext)(exports.templatePropsContext);
+    return (0, react_2.useMemo)(function () {
+        return props;
+    }, [props]);
+};
+exports.default = useTemplateProps;

package/lib/ACM-AXN/Template/Import.d.ts

@@ -0,0 +1,2 @@
+declare const ImportTemplate: () => import("react/jsx-runtime").JSX.Element;
+export default ImportTemplate;

package/lib/ACM-AXN/Template/Import.js

@@ -0,0 +1,123 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ClassicDrawer_1 = __importDefault(require("../../Commons/Components/ClassicDrawer"));
+var AWING_1 = require("../../AWING");
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var Enum_1 = require("../../ACM-AXN/Campaign/Enum");
+var UploadButton_1 = __importDefault(require("./UploadButton"));
+var Hooks_1 = __importDefault(require("./Hooks"));
+var ImportTemplate = function () {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var service = (0, Hooks_1.default)().service;
+    var _a = (0, react_1.useState)(), tempFile = _a[0], setTempFile = _a[1];
+    var _b = (0, react_1.useState)([]), directories = _b[0], setDirectories = _b[1];
+    var _c = (0, react_1.useState)({ directoryId: '', id: '', name: '' }), bussinessData = _c[0], setBussinessData = _c[1];
+    var rootDirectoryId = (0, react_1.useMemo)(function () { var _a; return (_a = (0, lodash_1.minBy)(directories, 'level')) === null || _a === void 0 ? void 0 : _a.directoryId; }, [directories]);
+    var hiddenTemplateImport = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        fetchDirectories();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var handleChooseFileClicked = function () {
+        hiddenTemplateImport.current && hiddenTemplateImport.current.click();
+    };
+    var handleImportTemplate = function (e) {
+        if (e.target.files.length > 0) {
+            setTempFile(e.target.files[0]);
+            e.target.value = null;
+        }
+    };
+    var fetchDirectories = function () {
+        service
+            .directoriesGetByObjectTypeCode(Enum_1.DirectoryRoot.Template)
+            .then(setDirectories);
+    };
+    var handleSubmit = function () {
+        var directoryId = bussinessData.directoryId, id = bussinessData.id, name = bussinessData.name;
+        return service.templatesImport(directoryId, id, name, {
+            data: tempFile,
+            fileName: tempFile === null || tempFile === void 0 ? void 0 : tempFile.name,
+        });
+    };
+    var handleChangeFormData = (0, react_1.useCallback)(function (obj) {
+        setBussinessData(function (prev) { return (__assign(__assign(__assign(__assign({}, prev), { id: prev.id || '0' }), obj), { directoryId: (obj === null || obj === void 0 ? void 0 : obj.directoryId) || rootDirectoryId })); });
+    }, [rootDirectoryId]);
+    return ((0, jsx_runtime_1.jsxs)(ClassicDrawer_1.default, { title: t('TemplateManagement.ImportTemplate'), onSubmit: handleSubmit, disableButtonSubmit: !(tempFile === null || tempFile === void 0 ? void 0 : tempFile.name), confirmExit: true, childrenWrapperStyle: { padding: 0 }, children: [(0, jsx_runtime_1.jsx)(AWING_1.DataForm, { fields: [
+                    {
+                        fieldName: 'directoryId',
+                        type: 'select',
+                        label: t('Common.Directory'),
+                        required: true,
+                        options: directories.map(function (directory) { return ({
+                            value: directory.directoryId,
+                            text: directory.name,
+                            level: directory.level,
+                        }); }),
+                    },
+                    {
+                        fieldName: 'name',
+                        type: 'text',
+                        label: t('Common.Name'),
+                        onValidate: function () { return true; },
+                    },
+                    {
+                        fieldName: 'id',
+                        type: 'text',
+                        label: t('TemplateManagement.TemplateId'),
+                        onValidate: function () { return true; },
+                    },
+                    {
+                        fieldName: 'fileName',
+                        type: 'text',
+                        disabled: !(tempFile === null || tempFile === void 0 ? void 0 : tempFile.name),
+                        label: t('Common.File'),
+                        inputProps: {
+                            value: tempFile === null || tempFile === void 0 ? void 0 : tempFile.name,
+                        },
+                        required: true,
+                        onValidate: function () { return true; },
+                    },
+                    {
+                        fieldName: '',
+                        type: 'text',
+                        InputProps: {
+                            onClick: handleChooseFileClicked,
+                            sx: {
+                                ':before': {
+                                    border: 'none',
+                                },
+                                ':hover': {
+                                    ':before': {
+                                        border: 'none!important',
+                                    },
+                                },
+                                width: 'fit-content',
+                            },
+                            inputComponent: (0, react_1.forwardRef)(UploadButton_1.default),
+                        },
+                    },
+                ], oldValue: {
+                    directoryId: rootDirectoryId,
+                    id: '',
+                    name: '',
+                    fileName: '',
+                }, onUpdate: handleChangeFormData }), (0, jsx_runtime_1.jsx)("input", { style: { display: 'none' }, name: "fileupload", ref: hiddenTemplateImport, accept: ".zip", type: "file", onChange: handleImportTemplate })] }));
+};
+exports.default = ImportTemplate;

package/lib/ACM-AXN/Template/Import.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/lib/ACM-AXN/Template/Import.test.js

@@ -0,0 +1,188 @@
+"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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable testing-library/no-wait-for-side-effects */
+require("@testing-library/jest-dom/extend-expect");
+var react_1 = require("@testing-library/react");
+var Import_1 = __importDefault(require("./Import"));
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+// Mock Axios client
+var directories = [
+    {
+        directoryId: '5202880755274023966',
+        name: 'template',
+        parentDirectoryId: '4913100144472996590',
+        objectTypeCode: 'template',
+        level: 3,
+        isFile: false,
+        isSystem: true,
+        order: 0,
+        description: null,
+        directoryPath: '.0.90.4913100144472996590.5202880755274023966.',
+    },
+    {
+        directoryId: '4736019141892318583',
+        name: 'Beta template',
+        parentDirectoryId: '5202880755274023966',
+        objectTypeCode: 'template',
+        level: 4,
+        isFile: false,
+        isSystem: false,
+        order: 0,
+        description: '',
+        directoryPath: '.0.90.4913100144472996590.5202880755274023966.4736019141892318583.',
+    },
+];
+var clientMethod = {
+    directoriesGetByObjectTypeCode: function (id) {
+        return Promise.resolve(directories);
+    },
+    templatesImport: function () { return Promise.resolve(); },
+};
+jest.mock('./Hooks', function () { return ({
+    __esModule: true,
+    default: function () { return ({
+        service: {
+            directoriesGetByObjectTypeCode: jest.fn(function (id) {
+                return Promise.resolve(clientMethod.directoriesGetByObjectTypeCode(id));
+            }),
+            templatesImport: jest.fn(function (_id) {
+                return Promise.resolve(clientMethod.templatesImport());
+            }),
+        },
+    }); },
+}); });
+jest.mock('Commons/Client', function () { return ({
+    __esModule: true,
+    DirectoryRoot: {
+        template: 'template',
+    },
+    // IDirectory: ,
+}); });
+// Mock i18next
+jest.mock('react-i18next', function () { return (__assign(__assign({}, jest.requireActual('react-i18next')), { useTranslation: function () { return ({ t: jest.fn(function (key) { return key; }) }); } })); });
+// Mock React
+jest.mock('react', function () { return (__assign(__assign({}, jest.requireActual('react')), { forwardRef: jest.fn(function (arg) { return arg; }), useRef: function () { return ({ current: { click: function () { } } }); } })); });
+// Mock Drawer
+jest.mock('awing-library/lib/Commons/Components/ClassicDrawer', function () { return function (props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "onSubmit", onClick: props.onSubmit, children: "submit" }), props.children] }));
+}; });
+// Mock DataForm
+jest.mock('awing-library/lib/AWING', function () { return ({
+    DataForm: function (props) {
+        var _a, _b, _c;
+        props.fields.forEach(function (element) {
+            if (element === null || element === void 0 ? void 0 : element.onValidate) {
+                element === null || element === void 0 ? void 0 : element.onValidate();
+            }
+        });
+        return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "DataForm", children: [(0, jsx_runtime_1.jsx)("p", { children: JSON.stringify(props.oldValue) }), (0, jsx_runtime_1.jsx)("p", { "data-testid": "file-name", children: (_a = props.fields.find(function (item) { return item.inputProps; })) === null || _a === void 0 ? void 0 : _a.inputProps.value }), (0, jsx_runtime_1.jsx)("p", { "data-testid": "select-options", children: JSON.stringify((_b = props.fields.find(function (item) { return item.options; })) === null || _b === void 0 ? void 0 : _b.options) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "upload-btn", onClick: (_c = props.fields.find(function (item) { return item.InputProps; })) === null || _c === void 0 ? void 0 : _c.InputProps.onClick }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "onUpdate", onClick: function () {
+                        props.onUpdate({
+                            id: 'id',
+                            name: 'name',
+                        });
+                    } })] }));
+    },
+}); });
+describe('Import Template component', function () {
+    var renderUi = function () { return (0, react_1.render)((0, jsx_runtime_1.jsx)(Import_1.default, {})); };
+    it('render without crash', function () {
+        renderUi();
+    });
+    it('render template directory select option', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(react_1.screen.getByText(JSON.stringify(directories.map(function (directory) { return ({
+                                value: directory.directoryId,
+                                text: directory.name,
+                                level: directory.level,
+                            }); })))).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('trigger upload button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var file, container, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    file = new File(['abc'], 'test.zip', {
+                        type: 'application/x-zip-compressed',
+                    });
+                    container = renderUi().container;
+                    input = container.querySelector("input[name=\"fileupload\"]");
+                    react_1.fireEvent.click(react_1.screen.getByTestId('upload-btn'));
+                    react_1.fireEvent.change(input, { target: { files: undefined } });
+                    user_event_1.default.upload(input, file);
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(react_1.screen.getByText('test.zip')).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('handle submit', function () {
+        renderUi();
+        react_1.fireEvent.click(react_1.screen.getByTestId('onUpdate'));
+        react_1.fireEvent.click(react_1.screen.getByTestId('onSubmit'));
+        // TODO: test client.templatesImport with arguments
+    });
+});