awing-library 2.1.115-beta → 2.1.117-beta

package/lib/ACM-AXN/Wizard/CreateOrEdit/RowTemplate.js

@@ -0,0 +1,174 @@
+"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 react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+var material_1 = require("@mui/material");
+var Hooks_1 = __importDefault(require("../Hooks"));
+var Utils_1 = require("../Utils");
+var validation_1 = require("../../../AWING/ultis/validation");
+function RowTemplate(props) {
+    var _a;
+    var pageCode = props.pageCode, template = props.template, onChangeRow = props.onChangeRow, onUpdateWizardLogin = props.onUpdateWizardLogin, _b = props.disabledIconDelete, disabledIconDelete = _b === void 0 ? false : _b;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var service = (0, Hooks_1.default)().service;
+    // DATA => Tên Thư Mục
+    var _c = (0, react_1.useState)([]), directories = _c[0], setDirectories = _c[1];
+    // DATA => Kiểu template
+    var _d = (0, react_1.useState)([]), templateTypes = _d[0], setTemplateTypes = _d[1];
+    // DATA => Chọn Template
+    var _e = (0, react_1.useState)([]), templates = _e[0], setTemplates = _e[1];
+    // DATA => Các trường dữ liệu
+    var _f = (0, react_1.useState)(), templateModel = _f[0], setTemplateModel = _f[1];
+    // DATA ROW TEMPLATE
+    var _g = (0, react_1.useState)(function () { return (__assign(__assign({}, template), { templateTypeId: 0 })); }), wizardTemplate = _g[0], setWizardTemplate = _g[1];
+    // disabled => Các trường dữ liệu => call API
+    var _h = (0, react_1.useState)(true), isLoadingParameter = _h[0], setIsLoadingParameter = _h[1];
+    var _j = (0, react_1.useState)({
+        status: true,
+        message: '',
+    }), validFieldName = _j[0], setValidFieldName = _j[1];
+    (0, react_1.useEffect)(function () {
+        service.templatesGetDirectories().then(function (directories_) {
+            // CALL API => DATA => Tên Thư Mục
+            var systemDirectoryIndex = directories_ === null || directories_ === void 0 ? void 0 : directories_.findIndex(function (directory) {
+                return directory.parentDirectoryId ===
+                    Utils_1.ROOT_DIRECTORY.SYSTEM_DIRECTORY.toString();
+            });
+            if (systemDirectoryIndex !== -1) {
+                directories_[systemDirectoryIndex].name = 'SYSTEM TEMPLATE';
+            }
+            setDirectories(directories_);
+            setWizardTemplate(function (oldWizardTemplate) {
+                var _a;
+                return (__assign(__assign({}, oldWizardTemplate), { directoryId: ((_a = directories_[0]) === null || _a === void 0 ? void 0 : _a.directoryId) || '' }));
+            });
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    (0, react_1.useEffect)(function () {
+        service.templateTypesGet().then(function (templateTypes_) {
+            setTemplateTypes(templateTypes_.filter(function (itemTemplate) {
+                return itemTemplate.templateTypeCode === pageCode;
+            }));
+        });
+    }, [pageCode]);
+    (0, react_1.useEffect)(function () {
+        if (wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.directoryId) {
+            setIsLoadingParameter(true);
+            service
+                .templatesGetByDirectoryId(wizardTemplate.directoryId)
+                .then(function (template_) {
+                var newTemplates = template_ === null || template_ === void 0 ? void 0 : template_.filter(function (item) {
+                    return item.pageCode === pageCode &&
+                        (wizardTemplate.templateTypeId === 0 ||
+                            item.templateTypeId ===
+                                wizardTemplate.templateTypeId);
+                });
+                // Sắp xếp chuỗi theo thứ tự tăng dần (a => z).
+                newTemplates.sort(function (a, b) {
+                    return ((a === null || a === void 0 ? void 0 : a.description) || '').localeCompare((b === null || b === void 0 ? void 0 : b.description) || '');
+                });
+                setTemplates(newTemplates);
+            })
+                .finally(function () {
+                setIsLoadingParameter(false);
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pageCode, wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.directoryId]);
+    (0, react_1.useEffect)(function () {
+        if (wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.templateId) {
+            service
+                .templatesGet(wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.templateId)
+                .then(setTemplateModel);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.templateId]);
+    var handleChange = function (fieldName, value) {
+        var _a, _b, _c;
+        setWizardTemplate(__assign(__assign({}, wizardTemplate), (_a = {}, _a[fieldName] = value, _a)));
+        if (fieldName !== 'directoryId' && fieldName !== 'templateTypeId') {
+            if (fieldName === 'name') {
+                var _d = (0, validation_1.textValidation)(value, 50, true), valid = _d.valid, message = _d.message;
+                setValidFieldName({ status: valid, message: message });
+                onChangeRow((_b = {},
+                    _b[fieldName] = typeof value === 'string'
+                        ? valid
+                            ? value.trim()
+                            : ''
+                        : value,
+                    _b), (template === null || template === void 0 ? void 0 : template.sortOrder) || 0);
+            }
+            else {
+                onChangeRow((_c = {},
+                    _c[fieldName] = typeof value === 'string' ? value.trim() : value,
+                    _c), (template === null || template === void 0 ? void 0 : template.sortOrder) || 0);
+            }
+        }
+    };
+    var handleDeleteRowTemplate = function () {
+        onUpdateWizardLogin &&
+            onUpdateWizardLogin(Utils_1.TYPE_LOGIN_TEMPLATE.REMOVE, template.sortOrder);
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", sx: {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { id: "name", required: true, fullWidth: true, variant: "standard", label: t('Common.Name'), "data-testid": "Common.Name", value: wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.name, error: !validFieldName.status, sx: { mr: 2, minWidth: '100px', maxWidth: '140px' }, helperText: !validFieldName.status && validFieldName.message, onChange: function (event) { return handleChange('name', event.target.value); } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { select: true, fullWidth: true, id: "directoryId", variant: "standard", label: t('Wizard.Directory'), "data-testid": "Wizard.Directory", disabled: !(directories === null || directories === void 0 ? void 0 : directories.length), value: (wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.directoryId) || '', sx: { mr: 2, minWidth: '140px', maxWidth: '180px' }, onChange: function (event) {
+                    return handleChange('directoryId', event.target.value);
+                }, children: directories.map(function (directory) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { style: {
+                        paddingLeft: directory.level &&
+                            directory.level >= 2 &&
+                            directory.isSystem !== true
+                            ? (directory.level - 2) * 24 + 'px'
+                            : '8px',
+                    }, value: directory.directoryId, children: directory.name }, directory.directoryId)); }) }), (0, jsx_runtime_1.jsxs)(material_1.TextField, { select: true, fullWidth: true, variant: "standard", id: "templateTypeId", label: t('Common.TypeTemplate'), "data-testid": "Common.TypeTemplate", value: wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.templateTypeId, sx: { mr: 2, minWidth: '120px', maxWidth: '140px' }, onChange: function (event) {
+                    return handleChange('templateTypeId', event.target.value);
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 0, children: t('Common.SelectAll') }), templateTypes.map(function (templateType) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: templateType.id, children: templateType.name }, templateType.id)); })] }), (0, jsx_runtime_1.jsx)(material_1.TextField, { select: true, fullWidth: true, required: true, id: "template", variant: "standard", disabled: !(templates === null || templates === void 0 ? void 0 : templates.length), sx: { mr: 2, minWidth: '140px' }, label: t('Wizard.SelectTemplate'), "data-testid": "Wizard.SelectTemplate", value: (wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.templateId) || '', onChange: function (event) {
+                    return handleChange('templateId', event.target.value);
+                }, children: templates
+                    .filter(function (template) {
+                    return (wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.templateTypeId) === 0 ||
+                        template.templateTypeId ===
+                            (wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.templateTypeId);
+                })
+                    .map(function (temp) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: temp.id, children: temp.description }, temp.id)); }) }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, variant: "standard", sx: { mr: 2, minWidth: '180px' }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { htmlFor: "component-simple", "data-testid": "Wizard.FieldNames", children: t('Wizard.FieldNames') }), (0, jsx_runtime_1.jsx)(material_1.Select, { multiple: true, id: "component-simple", value: (wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.templateParameterDisplayFieldNames) || [], disabled: isLoadingParameter ||
+                            !(templates === null || templates === void 0 ? void 0 : templates.length) ||
+                            !(templateModel === null || templateModel === void 0 ? void 0 : templateModel.templateParameters), onChange: function (event) {
+                            return handleChange('templateParameterDisplayFieldNames', event.target.value);
+                        }, renderValue: function (selected) {
+                            var _a;
+                            var fieldNames = selected;
+                            return (_a = templateModel === null || templateModel === void 0 ? void 0 : templateModel.templateParameters) === null || _a === void 0 ? void 0 : _a.filter(function (parameter) {
+                                return fieldNames.includes(parameter.fieldName || '');
+                            }).map(function (parameter) {
+                                return parameter.labelName;
+                            }).join(', ');
+                        }, MenuProps: {
+                            PaperProps: {
+                                style: {
+                                    maxHeight: 224,
+                                },
+                            },
+                        }, children: (_a = templateModel === null || templateModel === void 0 ? void 0 : templateModel.templateParameters) === null || _a === void 0 ? void 0 : _a.map(function (parameter, idx) { return ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { value: parameter.fieldName, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", checked: ((wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.templateParameterDisplayFieldNames) ||
+                                        []).indexOf((parameter === null || parameter === void 0 ? void 0 : parameter.fieldName) || '') >
+                                        -1 }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: parameter.labelName })] }, idx)); }) })] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { edge: "end", "aria-label": "delete", "data-testid": "deleteIcon", disabled: disabledIconDelete, onClick: handleDeleteRowTemplate, children: (0, jsx_runtime_1.jsx)(Delete_1.default, {}) })] }));
+}
+exports.default = (0, react_1.memo)(RowTemplate);

package/lib/ACM-AXN/Wizard/CreateOrEdit/RowTemplate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/ACM-AXN/Wizard/CreateOrEdit/RowTemplate.test.js

@@ -0,0 +1,259 @@
+"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 */
+var react_1 = require("@testing-library/react");
+var RowTemplate_1 = __importDefault(require("./RowTemplate"));
+var Utils_1 = require("../Utils");
+var directories = [
+    {
+        description: null,
+        directoryId: '4711650767517730267',
+        directoryPath: '.0.99.4711650767517730267.',
+        isFile: false,
+        isSystem: true,
+        level: 2,
+        name: 'SYSTEM TEMPLATE',
+        objectTypeCode: 'template',
+        order: 0,
+        parentDirectoryId: '99',
+    },
+    {
+        description: null,
+        directoryId: '5084661221099431199',
+        directoryPath: '.0.99.4711650767517730267.5084661221099431199.',
+        isFile: false,
+        isSystem: false,
+        level: 3,
+        name: 'Beta template',
+        objectTypeCode: 'template',
+        order: 0,
+        parentDirectoryId: '4711650767517730267',
+    },
+];
+var templateTypes = [
+    { id: 1, name: 'Banner', templateTypeCode: 'lgn' },
+    { id: 5, name: 'Customize', templateTypeCode: 'lgn' },
+];
+var templates = [
+    {
+        autoField: '',
+        description: '07.[DEFAULT] Data Collection 1 Page_v1.0',
+        directoryId: '5183679953246990989',
+        directoryPath: '.0.99.4711650767517730267.5183679953246990989.4619609303918768290.',
+        id: '4619609303918768290',
+        layoutId: '0',
+        name: '',
+        pageCode: 'lgn',
+        templateHtml: '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>\r\n<link href="/static/Files/template/5246961620307474338/template_cpa_v1_0.css?432" rel="stylesheet" />\r\n<div id="cpa-container" style="width:100%">\r\n  <img id="background_img_1" src="{cpa_1_banner_1}">\r\n  <div class="box-wrapper-2">\r\n    <table class="form_table formtable-fix form_table_text" id="cpa_field_list">\r\n    </table>\r\n    <table class="form_table btn-form-label form_table_text form-paddingtop">\r\n      <tr>\r\n        <td>\r\n          <button class="btn_action  btn_left btn_form_2" onclick="nextView();">\r\n          <strong id="btn_left_text2">KẾT NỐI<br/>INTERNET NGAY</strong>\r\n          <br/>\r\n          <small class="smallen">(ACCESS INTERNET)</small>\r\n        </button>\r\n        </td>\r\n        <td>\r\n          <button class="btn_action btn_right btn_form_2"  onclick="doSubmit()">\r\n            <strong id="btn_right_text2">ĐĂNG KÝ<br/>& KẾT NỐI INTERNET</strong>\r\n            <br/>\r\n            <small class="smallen">(REGISTER & ACCESS INTERNET)</small>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n</div>\r\n<textarea id="textLeftButtonBanner2" style="display: none;">{cpa_1_banner_2}</textarea>\r\n<textarea id="textRightButtonBanner2" style="display: none;">{cpa_1_banner_3}</textarea>\r\n<div id="continue_scroll" style="display: none;">\r\n  <a id="continue_text"><span></span>Còn tiếp</a>\r\n</div>\r\n<script>\r\nvar textLeftButtonBanner2 = $("#textLeftButtonBanner2").text().replace(/(?:\\r\\n|\\r|\\n)/g, \'<br/>\');\r\nvar textRightButtonBanner2 = $("#textRightButtonBanner2").text().replace(/(?:\\r\\n|\\r|\\n)/g, \'<br/>\');\r\nvar colorCodeLeftButton = "#"+"{cpa_1_banner_4}";\r\nvar colorCodeRightButton = "#"+"{cpa_1_banner_5}";\r\nvar colorTextLeftButton = "#"+"{cpa_1_banner_6}";\r\nvar colorTextRightButton = "#"+"{cpa_1_banner_7}";\r\nvar fieldList = [];\r\nvar nameFieldCheckbox = "{cpa_1_banner_8}" == "true" ? fieldList.push("name") : "";\r\nvar phoneFieldCheckbox = "{cpa_1_banner_9}" == "true" ? fieldList.push("phone") : "";\r\nvar emailFieldCheckbox = "{cpa_1_banner_10}" == "true" ? fieldList.push("email") : "";\r\nvar textFieldBackGroundColor = "{cpa_1_banner_11}";\r\nvar textFieldBorderColor = "#"+"{cpa_1_banner_12}";\r\n\r\nfieldList.forEach(function(item){\r\n  if(item == "name"){\r\n    $("#cpa_field_list").append("<tr><td colspan=\'2\' class=\'tooltip\'><input type=\'text\' id=\'name\' name=\'name\' placeholder=\'Họ và tên\' class=\'input-text input-box-2 input-text-name\'></input><span class=\'tooltiptext\' id=\'tooltipname\'>Họ và tên không đúng, xin vui lòng nhập lại!</span></td></tr>");\r\n  }\r\n  if(item == "phone"){\r\n    $("#cpa_field_list").append("<tr><td colspan=\'2\' class=\'tooltip\'><input type=\'number\' id = \'phone\' placeholder=\'Số điện thoại\' class=\'input-text input-box-2 input-text-phone\'></input><span class=\'tooltiptext\' id=\'tooltipphone\'>Số điện thoại không đúng, xin vui lòng nhập lại!</span></td></tr>");\r\n  }\r\n  if(item == "email"){\r\n    $("#cpa_field_list").append("<tr><td colspan=\'2\' class=\'tooltip\'><input type=\'text\' id=\'email\' placeholder=\'Email\' class=\'input-text input-box-2 input-text-email\' /><span class=\'tooltiptext\' id=\'tooltipemail\'>Email không đúng, xin vui lòng nhập lại!</span></td></tr>");\r\n  }\r\n});\r\nif(fieldList.length == 3) {\r\n  $(".box-wrapper-2").addClass("three-field-form");\r\n}\r\nvar mInfo = detectDeviceInfo();\r\nvar windowheight = window.innerHeight;\r\nvar browserLang = navigator.language || navigator.userLanguage;\r\nif(browserLang !="vi-VN"){\r\n  $("#continue_text").html("<span></span>More</a>");\r\n  // $(".wa-button-maxview").addClass("wa-button-en");\r\n  $("#continue_scroll").addClass("continue-en");\r\n}\r\nif(textLeftButtonBanner2.length > 0) { $("#btn_left_text2").html(textLeftButtonBanner2); }\r\nif(textRightButtonBanner2.length > 0) { $("#btn_right_text2").html(textRightButtonBanner2); }\r\n$(".btn_left").css({\r\n  "background-color": colorCodeLeftButton,\r\n  "color": colorTextLeftButton\r\n});\r\n$(".btn_right").css({\r\n  "background-color": colorCodeRightButton,\r\n  "color": colorTextRightButton\r\n});\r\nif(textFieldBackGroundColor.toLowerCase() == "màu xám") {\r\n  $("td > .input-box-2").css("background-color", "#d9d9d9");\r\n}\r\n$("td > .input-box-2").css("border",\'1px solid \' + textFieldBorderColor);\r\n\r\nif(mInfo.os == "iOS" || mInfo.os == "Android"){\r\n  $(\'#continue_text\').css(\'color\', colorCodeLeftButton);\r\n  $(\'#continue_text span\').css({\r\n    "border-left":"5px solid " + colorCodeLeftButton,\r\n    "border-bottom": "5px solid " + colorCodeLeftButton\r\n  });\r\n}\r\n\r\n$("#continue_scroll").hide();\r\nfunction startAnimation(){\r\n  $(\'#layoutHeader\').hide();\r\n  if(mInfo.os == "iOS" || mInfo.os == "Android"){\r\n    $(window).off(\'scroll\');\r\n    // var footerHeight = ($(\'#wa_hotline\').outerHeight() > 0 ) ? $(\'#wa_hotline\').outerHeight() : 32.4;\r\n    // $(\'#cpa-container\').css(\'min-height\', windowheight - footerHeight);\r\n    // $(\'#cpa-container\').css(\'background\', colorCodeBody);\r\n    setTimeout(function(){continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll\'));}, 750);\r\n    $(document).on(\'touchend\', function() {\r\n      setTimeout(function()\r\n      {\r\n        continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll\'));\r\n      }, 750);\r\n    });\r\n  }\r\n  else {\r\n    window.onresize = function(event) {\r\n      var rightContinue = ($(window).width() - $("#background_img_1").width())/2 - $("#continue_scroll").width() + 3;\r\n      $("#continue_scroll").css(\'right\', rightContinue);\r\n      $("#continue_scroll.continue-en").css(\'right\', rightContinue+5);\r\n    };\r\n    setTimeout(function(){\r\n      var rightContinue = ($(window).width() - $("#background_img_1").width())/2 - $("#continue_scroll").width() + 5;\r\n      $("#continue_scroll").css(\'right\', rightContinue);\r\n      $("#continue_scroll.continue-en").css(\'right\', rightContinue+10);\r\n      continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll\'));\r\n    }, 750);\r\n  }\r\n}\r\n$(".input-text").focus(function(){\r\n  $("#tooltipphone").hide();\r\n  $("#tooltipname").hide();\r\n  $("#tooltipemail").hide();\r\n  remove_error($(\'.input-text\'));\r\n});\r\nfunction goToForm(){\r\n  $(\'.box-wrapper\').hide();\r\n  $(\'.box-wrapper-2\').show();\r\n  $(\'#background_img\').hide();\r\n  $(\'#background_img_1\').show();\r\n}\r\nfunction doSubmit(){\r\n  var phone = $(\'#phone\').val();\r\n  var name = $(\'#name\').val();\r\n  var email = $(\'#email\').val();\r\n  var valObject = {name: name, phone: phone, email: email};\r\n  if (validateDataCustomer(name,phone,email)){\r\n    var eventObject = {};\r\n    fieldList.forEach(function(item) {\r\n      eventObject[item] = valObject[item];\r\n    });\r\n    postAnalyticEvent("eventcpa",JSON.stringify(eventObject));\r\n    nextView();\r\n  }\r\n}\r\nfunction validateDataCustomer(name,phone,email){\r\n  var validate = true;\r\n  if(fieldList.indexOf("name") !== -1){\r\n    if ((!name)||(ContainNum(name))){\r\n      set_error($(\'#name\'));\r\n      set_errortooltip($(\'#tooltipname\'));\r\n      validate = false;\r\n    }\r\n  }\r\n  if(fieldList.indexOf("phone") !== -1){\r\n    phone = phone.replace(\'(+84)\', \'0\');\r\n    phone = phone.replace(\'+84\', \'0\');\r\n    phone = phone.replace(\'0084\', \'0\');\r\n    phone = phone.replace(/ /g, \'\');\r\n    if (phone != \'\') {\r\n      var firstNumber = phone.substring(0, 2);\r\n      if ((firstNumber == \'03\' || firstNumber == \'05\' || firstNumber == \'07\' || firstNumber == \'08\' || firstNumber == \'09\') && phone.length == 10) {\r\n        if (phone.match(/^\\d{10}/)) {}\r\n      } else if (firstNumber == \'01\' && phone.length == 11) {\r\n        if (phone.match(/^\\d{11}/)) {}\r\n      }\r\n      else{\r\n        set_error($(\'#phone\'));\r\n        set_errortooltip($(\'#tooltipphone\'));\r\n        validate = false;\r\n      }\r\n    }\r\n    else{\r\n      set_error($(\'#phone\'));\r\n      set_errortooltip($(\'#tooltipphone\'));\r\n      validate = false;\r\n    }\r\n  }\r\n  if(fieldList.indexOf("email") !== -1){\r\n    if (email != \'\') {\r\n      if (!isEmail(email)){\r\n        set_error($(\'#email\'));\r\n        set_errortooltip($(\'#tooltipemail\'));\r\n        validate = false;\r\n      }\r\n    }\r\n    else {\r\n      set_error($(\'#email\'));\r\n      set_errortooltip($(\'#tooltipemail\'));\r\n      validate = false;\r\n    }\r\n  }\r\n  return validate;\r\n}\r\nfunction isEmail(email) {\r\n  var regex = /^([a-zA-Z0-9_.+-])+\\@(([a-zA-Z0-9-])+\\.)+([a-zA-Z0-9]{2,4})+$/;\r\n  return regex.test(email);\r\n}\r\nfunction ContainNum(t)\r\n{\r\n  var regex = /\\d/g;\r\n  return regex.test(t);\r\n}\r\nfunction set_error(element){\r\n  element.addClass(\'_error\');\r\n}\r\nfunction set_errortooltip(element){\r\n  element.show();\r\n}\r\nfunction remove_error(element){\r\n  element.removeClass(\'_error\');\r\n}\r\nfunction continueScrollHandle(elm, scroll){\r\n  if(checkVisible(elm)) {$(\'#continue_scroll\').hide();}\r\n  else {$(\'#continue_scroll\').show();}\r\n}\r\nfunction checkVisible(elm){\r\n  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);\r\n  if(elm != "" && elm != undefined){\r\n    var rect = elm.getBoundingClientRect();\r\n    return !(rect.bottom == 0 || rect.top - viewHeight >= -(rect.height - 12));\r\n  }else{\r\n    return true;\r\n  }\r\n}\r\n</script>',
+        templateTypeId: 17,
+        validation: '',
+    },
+    {
+        autoField: '',
+        description: '08.[DEFAULT] Horizontal Video_v1.1',
+        directoryId: '5183679953246990989',
+        directoryPath: '.0.99.4711650767517730267.5183679953246990989.4631090508536728844.',
+        id: '4631090508536728844',
+        layoutId: '0',
+        name: '',
+        pageCode: 'lgn',
+        templateHtml: '<link href="/static/Files/template/4631090508536728844/video_horizontal_v1.1.css?01" rel="stylesheet" />\r\n<div id="horizontal-video-container" class="frame1">\r\n\t<div class="video">\r\n\t\t<div class="wpvideo">\r\n\t\t\t<video style="width: 100%" src="{video_1}" playsinline id="mVideo" poster="" preload="auto"></video>   \r\n\t\t\t<img src="{video_3}" id="mImg" style="display:none;margin: 0px auto;">\r\n\t\t\t<div class="connection-container">\r\n\t\t\t\t<button id="connectToInternet" class="wa-button wa-button-view blur btn-bif wa-button-video" style="margin-top:0.5em;">BỎ QUA VIDEO TRONG <small class="smallen">(SKIP AD)</small><i id="countdowntimer" style="padding-left: 3px"  class="countdown">6S</i></button>\r\n\t\t\t\t<a id="user-not-interest" class="class-user-interest" title="Cảm ơn, tôi muốn kết nối Internet ngay/ No thanks, just take me online" onclick="nextView()" style="display: none;">Cảm ơn, tôi muốn kết nối Internet ngay/ No thanks, just take me online </a>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n<div id="continue_scroll_video" style="display: none;">\r\n\t<a id="continue_text_video"><span></span>Còn tiếp</a>\r\n</div>\r\n<script>\r\nvar browserLang = navigator.language || navigator.userLanguage;\r\nif(browserLang !="vi-VN"){\r\n\t$("#continue_text_video").html("<span></span>More</a>");\r\n\t$("#continue_scroll_video").addClass("continue-en");\r\n}\r\nvar mInfo = detectDeviceInfo();\r\nvar isShowBanner="{video_2}" == "true";banner="{video_3}";timeSkipAd = "{video_4}" == "" ? 6 : "{video_4}";colorButton = "#"+"{video_5}";colorTextButton = "#"+"{video_6}";textButton = "{video_7}";colorCodeBackgroundBanner = "#"+"{video_8}";isShowUserInterest = "{video_9}" == "true";\r\nif(Number(timeSkipAd) <= 0){\r\n\t$(\'#connectToInternet\').removeClass(\'blur\').html(\'BỎ QUA VIDEO <small class="smallen">(SKIP AD)</small>\').click(function () {\r\n\t\t\tdocument.body.style.backgroundColor = "#f5f5f5";\r\n\t\t\t\tif(isShowBanner){ showBanner();} else{connectToWifi();}\r\n\t});\r\n}\r\nif(Number(timeSkipAd) > 0){$(\'#countdowntimer\').html(timeSkipAd+"S");}\r\nif(mInfo.os == "iOS" || mInfo.os == "Android"){ \r\n\t$(\'.wa-button-video\').css({"background-color": colorButton,"color": colorTextButton});\r\n\t$(\'#continue_text_video\').css(\'color\', colorButton);\r\n\t$(\'#continue_text_video span\').css({\r\n\t\t"border-left":"5px solid " + colorButton,\r\n\t\t"border-bottom": "5px solid " + colorButton\r\n\t});\r\n}\r\nif(textButton =="") textButton ="KẾT NỐI INTERNET";\r\nif(banner == "") {\r\n\t$("#mImg").attr("src", "/static/Files/template/4631090508536728844/default_banner.png");\r\n}\r\nfunction startAnimation() {\r\n\t$(\'#layoutFooter\').hide();\r\n\t$(\'#layoutHeader\').hide();var videoId = document.getElementById(\'mVideo\');\r\n\tplayVideo();\r\n\t$(\'#mVideo\').on(\'pause\', function () {showBanner();});\r\n\t$(\'#mVideo\').on(\'play\', function () {\r\n\t\tdocument.body.style.backgroundColor = "rgb(33, 31, 31)";\r\n\t\tpostAnalyticEvent("View(Video)",JSON.stringify({}));\r\n\t\tif (mInfo.os == "iOS" && mInfo.os_value < 113) {\r\n\t\t\t\tdocument.body.style.backgroundColor = "#F5F5F5";\r\n\t\t} else {\r\n\t\t\t\t$("#connectToInternet").show();\r\n\t\t}\r\n\t\tsetTimeout(function () {if(Number(timeSkipAd) > 0) countDown(); }, 100);\r\n\t});\r\n\t$(\'#mVideo\').on(\'ended\', function () {\r\n\t\tpostAnalyticEvent("Completed_View(Video)",JSON.stringify({}));\r\n\t\tnextView();\r\n\t});\r\n\tfunction playVideo() { mVideo.play(); }\r\n\tif(mInfo.os !== "iOS" || mInfo.os !== "Android"){\r\n\t\t$(window).off(\'scroll\');\r\n\t\tsetTimeout(function(){\r\n\t\t\tvar rightContinue = ($(window).width() - $("#mVideo").width())/2 - $("#continue_scroll_video").width() + 5;\r\n\t\t\t$("#continue_scroll_video").css(\'right\', rightContinue);\r\n\t\t\t$("#continue_scroll_video.continue-en").css(\'right\', rightContinue+10);\r\n\t\t\tcontinueScrollHandle($("#connectToInternet")[0], $(\'#continue_scroll_video\'));\r\n\t\t}, 750);\r\n\t\t$(document).on(\'scroll\', function() {\r\n\t\t\tif($("#wa_hotline").height() > 0) {\r\n\t\t\t\tsetTimeout(function(){continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll_video\'));}, 750);\r\n\t\t\t}\r\n\t\t\telse \r\n\t\t\t\tsetTimeout(function(){continueScrollHandle($("#connectToInternet")[0], $(\'#continue_scroll_video\'));}, 750);\r\n\t\t});\r\n\t}\r\n}\r\nfunction countDown() {\r\n\t\tvar timeleft = 6;\r\n\t\tif(Number(timeSkipAd) > 0) timeleft = Number(timeSkipAd);\r\n\t\tvar downloadTimer = setInterval(function () {\r\n\t\t\t\ttimeleft--;\r\n\t\t\t\tvar x = document.getElementById("countdowntimer");\r\n\t\t\t\tx.textContent = timeleft + "S";\r\n\t\t\t\tif (timeleft <= 0) {\r\n\t\t\t\t\t\tclearInterval(downloadTimer);\r\n\t\t\t\t\t\t$(\'#connectToInternet\').removeClass(\'blur\').html(\'BỎ QUA VIDEO <small class="smallen">(SKIP AD)</small>\').click(function () {\r\n\t\t\t\t\t\t\t\tdocument.body.style.backgroundColor = "#F5F5F5";\r\n\t\t\t\t\t\t\t\t\tif(isShowBanner){   showBanner();} else{connectToWifi();}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t}, 1000);\r\n} \r\nfunction showBanner() {\r\n\t$(\'#layoutFooter\').show();\r\n\tmVideo.pause();\r\n\tdocument.body.style.backgroundColor = "#F5F5F5";\r\n\tcloseFullscreen();\r\n\tdocument.getElementById("mImg").style.display = "block";\r\n\t$("#mVideo").hide();\r\n\t$(\'#mImg\').click(function () { connectToWifi() });\r\n\t$(\'#connectToInternet\').removeClass(\'blur\');\r\n    $(\'#connectToInternet\').unbind(\'click\');\r\n\t$(\'#connectToInternet\').addClass(\'connectInternet\').html(textButton+\'<BR/><small class="smallen">(ACCESS INTERNET)</small>\').click(function () {\r\n    connectToWifi();\r\n\t});\r\n\tif(isShowUserInterest) $(\'#user-not-interest\').show();\r\n\tif(mInfo.os == "iOS" || mInfo.os == "Android"){\r\n\t\t$(window).off(\'scroll\');\r\n\t\tvar windowheight = window.innerHeight;\r\n\t\tif(windowheight < 700) {\r\n\t\t\t$("#connectToInternet").addClass("wa-button-video-continue");\r\n\t\t}\r\n    \thandleFullscreenVideoBanner();\r\n\t\tif(isShowUserInterest){$("#connectToInternet").addClass("wa-button-video-continue-userInterest");}\r\n\t\tvar rightContinue = ($(window).width() - $(".wa-button-video").width())/2 - $("#continue_scroll_video").width();\r\n\t\t$("#continue_scroll_video").css(\'right\', rightContinue-1);\r\n\t\t$("#continue_scroll_video.continue-en").css(\'right\', rightContinue-1);\r\n\t\tsetTimeout(function(){continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll_video\'));}, 750);\r\n\t\t$(document).on(\'touchend\', function() {\r\n\t\t\tsetTimeout(function(){continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll_video\'));}, 750);\r\n\t\t});\r\n\t}\r\n\telse {\r\n\t\twindow.onresize = function(event) {\r\n\t\t\tvar rightContinue = ($(window).width() - $("#mImg").width())/2 - $("#continue_scroll_video").width() + 3;\r\n\t\t\t$("#continue_scroll_video").css(\'right\', rightContinue);\r\n\t\t\t$("#continue_scroll_video.continue-en").css(\'right\', rightContinue+5);\r\n\t\t};\r\n\t\tsetTimeout(function(){\r\n\t\t\tvar rightContinue = ($(window).width() - $("#mImg").width())/2 - $("#continue_scroll_video").width() + 5;\r\n\t\t\t$("#continue_scroll_video").css(\'right\', rightContinue);\r\n\t\t\t$("#continue_scroll_video.continue-en").css(\'right\', rightContinue+10);\r\n\t\t\tcontinueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll_video\'));\r\n\t\t}, 750);\r\n\t}\r\n}\r\nfunction handleFullscreenVideoBanner() {\r\n  var footerHeight = ($(\'#wa_hotline\').outerHeight() > 0 ) ? $(\'#wa_hotline\').outerHeight() : 32.4;\r\n  $(\'#horizontal-video-container\').css(\'min-height\', window.innerHeight - footerHeight);\r\n  $(\'#horizontal-video-container\').css(\'background\', colorCodeBackgroundBanner);\r\n}\r\nfunction connectToWifi(){\r\n\tif(isShowUserInterest) {postAnalyticEvent("user_interest",JSON.stringify({}));}\r\n\tnextView();\r\n}\r\nfunction continueScrollHandle(elm, scroll){\r\n\tif(checkVisible(elm)) { scroll.hide(); }\r\n\telse { scroll.show(); }\r\n}\r\nfunction checkVisible(elm) {\r\n\tvar viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);\r\n\tif(elm != "" && elm != undefined){\r\n\t\tvar rect = elm.getBoundingClientRect();\r\n\t\treturn !(rect.bottom == 0 || rect.top - viewHeight >= -(rect.height - 12));\r\n\t}else{\r\n\t\treturn true;\r\n\t}\r\n}\r\nfunction closeFullscreen() {\r\n\tif (document.getElementById(\'mVideo\').exitFullscreen) {\r\n\t\tdocument.getElementById(\'mVideo\').exitFullscreen();\r\n\t} else if (document.getElementById(\'mVideo\').mozCancelFullScreen) { /* Firefox */\r\n\t\tdocument.getElementById(\'mVideo\').mozCancelFullScreen();\r\n\t} else if (document.getElementById(\'mVideo\').webkitExitFullscreen) { /* Chrome, Safari and Opera */\r\n\t\tdocument.getElementById(\'mVideo\').webkitExitFullscreen();\r\n\t} else if (document.getElementById(\'mVideo\').msExitFullscreen) { /* IE/Edge */\r\n\t\tdocument.getElementById(\'mVideo\').msExitFullscreen();\r\n\t}\r\n}\r\n</script>',
+        templateTypeId: 18,
+        validation: '',
+    },
+];
+var templateModel = {
+    template: {
+        autoField: '',
+        description: '07.[DEFAULT] Data Collection 1 Page_v1.0',
+        directoryId: '5183679953246990989',
+        directoryPath: '.0.99.4711650767517730267.5183679953246990989.4619609303918768290.',
+        id: '4619609303918768290',
+        layoutId: '0',
+        name: '',
+        pageCode: 'lgn',
+        templateHtml: '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>\r\n<link href="/static/Files/template/5246961620307474338/template_cpa_v1_0.css?432" rel="stylesheet" />\r\n<div id="cpa-container" style="width:100%">\r\n  <img id="background_img_1" src="{cpa_1_banner_1}">\r\n  <div class="box-wrapper-2">\r\n    <table class="form_table formtable-fix form_table_text" id="cpa_field_list">\r\n    </table>\r\n    <table class="form_table btn-form-label form_table_text form-paddingtop">\r\n      <tr>\r\n        <td>\r\n          <button class="btn_action  btn_left btn_form_2" onclick="nextView();">\r\n          <strong id="btn_left_text2">KẾT NỐI<br/>INTERNET NGAY</strong>\r\n          <br/>\r\n          <small class="smallen">(ACCESS INTERNET)</small>\r\n        </button>\r\n        </td>\r\n        <td>\r\n          <button class="btn_action btn_right btn_form_2"  onclick="doSubmit()">\r\n            <strong id="btn_right_text2">ĐĂNG KÝ<br/>& KẾT NỐI INTERNET</strong>\r\n            <br/>\r\n            <small class="smallen">(REGISTER & ACCESS INTERNET)</small>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n</div>\r\n<textarea id="textLeftButtonBanner2" style="display: none;">{cpa_1_banner_2}</textarea>\r\n<textarea id="textRightButtonBanner2" style="display: none;">{cpa_1_banner_3}</textarea>\r\n<div id="continue_scroll" style="display: none;">\r\n  <a id="continue_text"><span></span>Còn tiếp</a>\r\n</div>\r\n<script>\r\nvar textLeftButtonBanner2 = $("#textLeftButtonBanner2").text().replace(/(?:\\r\\n|\\r|\\n)/g, \'<br/>\');\r\nvar textRightButtonBanner2 = $("#textRightButtonBanner2").text().replace(/(?:\\r\\n|\\r|\\n)/g, \'<br/>\');\r\nvar colorCodeLeftButton = "#"+"{cpa_1_banner_4}";\r\nvar colorCodeRightButton = "#"+"{cpa_1_banner_5}";\r\nvar colorTextLeftButton = "#"+"{cpa_1_banner_6}";\r\nvar colorTextRightButton = "#"+"{cpa_1_banner_7}";\r\nvar fieldList = [];\r\nvar nameFieldCheckbox = "{cpa_1_banner_8}" == "true" ? fieldList.push("name") : "";\r\nvar phoneFieldCheckbox = "{cpa_1_banner_9}" == "true" ? fieldList.push("phone") : "";\r\nvar emailFieldCheckbox = "{cpa_1_banner_10}" == "true" ? fieldList.push("email") : "";\r\nvar textFieldBackGroundColor = "{cpa_1_banner_11}";\r\nvar textFieldBorderColor = "#"+"{cpa_1_banner_12}";\r\n\r\nfieldList.forEach(function(item){\r\n  if(item == "name"){\r\n    $("#cpa_field_list").append("<tr><td colspan=\'2\' class=\'tooltip\'><input type=\'text\' id=\'name\' name=\'name\' placeholder=\'Họ và tên\' class=\'input-text input-box-2 input-text-name\'></input><span class=\'tooltiptext\' id=\'tooltipname\'>Họ và tên không đúng, xin vui lòng nhập lại!</span></td></tr>");\r\n  }\r\n  if(item == "phone"){\r\n    $("#cpa_field_list").append("<tr><td colspan=\'2\' class=\'tooltip\'><input type=\'number\' id = \'phone\' placeholder=\'Số điện thoại\' class=\'input-text input-box-2 input-text-phone\'></input><span class=\'tooltiptext\' id=\'tooltipphone\'>Số điện thoại không đúng, xin vui lòng nhập lại!</span></td></tr>");\r\n  }\r\n  if(item == "email"){\r\n    $("#cpa_field_list").append("<tr><td colspan=\'2\' class=\'tooltip\'><input type=\'text\' id=\'email\' placeholder=\'Email\' class=\'input-text input-box-2 input-text-email\' /><span class=\'tooltiptext\' id=\'tooltipemail\'>Email không đúng, xin vui lòng nhập lại!</span></td></tr>");\r\n  }\r\n});\r\nif(fieldList.length == 3) {\r\n  $(".box-wrapper-2").addClass("three-field-form");\r\n}\r\nvar mInfo = detectDeviceInfo();\r\nvar windowheight = window.innerHeight;\r\nvar browserLang = navigator.language || navigator.userLanguage;\r\nif(browserLang !="vi-VN"){\r\n  $("#continue_text").html("<span></span>More</a>");\r\n  // $(".wa-button-maxview").addClass("wa-button-en");\r\n  $("#continue_scroll").addClass("continue-en");\r\n}\r\nif(textLeftButtonBanner2.length > 0) { $("#btn_left_text2").html(textLeftButtonBanner2); }\r\nif(textRightButtonBanner2.length > 0) { $("#btn_right_text2").html(textRightButtonBanner2); }\r\n$(".btn_left").css({\r\n  "background-color": colorCodeLeftButton,\r\n  "color": colorTextLeftButton\r\n});\r\n$(".btn_right").css({\r\n  "background-color": colorCodeRightButton,\r\n  "color": colorTextRightButton\r\n});\r\nif(textFieldBackGroundColor.toLowerCase() == "màu xám") {\r\n  $("td > .input-box-2").css("background-color", "#d9d9d9");\r\n}\r\n$("td > .input-box-2").css("border",\'1px solid \' + textFieldBorderColor);\r\n\r\nif(mInfo.os == "iOS" || mInfo.os == "Android"){\r\n  $(\'#continue_text\').css(\'color\', colorCodeLeftButton);\r\n  $(\'#continue_text span\').css({\r\n    "border-left":"5px solid " + colorCodeLeftButton,\r\n    "border-bottom": "5px solid " + colorCodeLeftButton\r\n  });\r\n}\r\n\r\n$("#continue_scroll").hide();\r\nfunction startAnimation(){\r\n  $(\'#layoutHeader\').hide();\r\n  if(mInfo.os == "iOS" || mInfo.os == "Android"){\r\n    $(window).off(\'scroll\');\r\n    // var footerHeight = ($(\'#wa_hotline\').outerHeight() > 0 ) ? $(\'#wa_hotline\').outerHeight() : 32.4;\r\n    // $(\'#cpa-container\').css(\'min-height\', windowheight - footerHeight);\r\n    // $(\'#cpa-container\').css(\'background\', colorCodeBody);\r\n    setTimeout(function(){continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll\'));}, 750);\r\n    $(document).on(\'touchend\', function() {\r\n      setTimeout(function()\r\n      {\r\n        continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll\'));\r\n      }, 750);\r\n    });\r\n  }\r\n  else {\r\n    window.onresize = function(event) {\r\n      var rightContinue = ($(window).width() - $("#background_img_1").width())/2 - $("#continue_scroll").width() + 3;\r\n      $("#continue_scroll").css(\'right\', rightContinue);\r\n      $("#continue_scroll.continue-en").css(\'right\', rightContinue+5);\r\n    };\r\n    setTimeout(function(){\r\n      var rightContinue = ($(window).width() - $("#background_img_1").width())/2 - $("#continue_scroll").width() + 5;\r\n      $("#continue_scroll").css(\'right\', rightContinue);\r\n      $("#continue_scroll.continue-en").css(\'right\', rightContinue+10);\r\n      continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll\'));\r\n    }, 750);\r\n  }\r\n}\r\n$(".input-text").focus(function(){\r\n  $("#tooltipphone").hide();\r\n  $("#tooltipname").hide();\r\n  $("#tooltipemail").hide();\r\n  remove_error($(\'.input-text\'));\r\n});\r\nfunction goToForm(){\r\n  $(\'.box-wrapper\').hide();\r\n  $(\'.box-wrapper-2\').show();\r\n  $(\'#background_img\').hide();\r\n  $(\'#background_img_1\').show();\r\n}\r\nfunction doSubmit(){\r\n  var phone = $(\'#phone\').val();\r\n  var name = $(\'#name\').val();\r\n  var email = $(\'#email\').val();\r\n  var valObject = {name: name, phone: phone, email: email};\r\n  if (validateDataCustomer(name,phone,email)){\r\n    var eventObject = {};\r\n    fieldList.forEach(function(item) {\r\n      eventObject[item] = valObject[item];\r\n    });\r\n    postAnalyticEvent("eventcpa",JSON.stringify(eventObject));\r\n    nextView();\r\n  }\r\n}\r\nfunction validateDataCustomer(name,phone,email){\r\n  var validate = true;\r\n  if(fieldList.indexOf("name") !== -1){\r\n    if ((!name)||(ContainNum(name))){\r\n      set_error($(\'#name\'));\r\n      set_errortooltip($(\'#tooltipname\'));\r\n      validate = false;\r\n    }\r\n  }\r\n  if(fieldList.indexOf("phone") !== -1){\r\n    phone = phone.replace(\'(+84)\', \'0\');\r\n    phone = phone.replace(\'+84\', \'0\');\r\n    phone = phone.replace(\'0084\', \'0\');\r\n    phone = phone.replace(/ /g, \'\');\r\n    if (phone != \'\') {\r\n      var firstNumber = phone.substring(0, 2);\r\n      if ((firstNumber == \'03\' || firstNumber == \'05\' || firstNumber == \'07\' || firstNumber == \'08\' || firstNumber == \'09\') && phone.length == 10) {\r\n        if (phone.match(/^\\d{10}/)) {}\r\n      } else if (firstNumber == \'01\' && phone.length == 11) {\r\n        if (phone.match(/^\\d{11}/)) {}\r\n      }\r\n      else{\r\n        set_error($(\'#phone\'));\r\n        set_errortooltip($(\'#tooltipphone\'));\r\n        validate = false;\r\n      }\r\n    }\r\n    else{\r\n      set_error($(\'#phone\'));\r\n      set_errortooltip($(\'#tooltipphone\'));\r\n      validate = false;\r\n    }\r\n  }\r\n  if(fieldList.indexOf("email") !== -1){\r\n    if (email != \'\') {\r\n      if (!isEmail(email)){\r\n        set_error($(\'#email\'));\r\n        set_errortooltip($(\'#tooltipemail\'));\r\n        validate = false;\r\n      }\r\n    }\r\n    else {\r\n      set_error($(\'#email\'));\r\n      set_errortooltip($(\'#tooltipemail\'));\r\n      validate = false;\r\n    }\r\n  }\r\n  return validate;\r\n}\r\nfunction isEmail(email) {\r\n  var regex = /^([a-zA-Z0-9_.+-])+\\@(([a-zA-Z0-9-])+\\.)+([a-zA-Z0-9]{2,4})+$/;\r\n  return regex.test(email);\r\n}\r\nfunction ContainNum(t)\r\n{\r\n  var regex = /\\d/g;\r\n  return regex.test(t);\r\n}\r\nfunction set_error(element){\r\n  element.addClass(\'_error\');\r\n}\r\nfunction set_errortooltip(element){\r\n  element.show();\r\n}\r\nfunction remove_error(element){\r\n  element.removeClass(\'_error\');\r\n}\r\nfunction continueScrollHandle(elm, scroll){\r\n  if(checkVisible(elm)) {$(\'#continue_scroll\').hide();}\r\n  else {$(\'#continue_scroll\').show();}\r\n}\r\nfunction checkVisible(elm){\r\n  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);\r\n  if(elm != "" && elm != undefined){\r\n    var rect = elm.getBoundingClientRect();\r\n    return !(rect.bottom == 0 || rect.top - viewHeight >= -(rect.height - 12));\r\n  }else{\r\n    return true;\r\n  }\r\n}\r\n</script>',
+        templateTypeId: 17,
+        validation: '',
+    },
+    templateParameters: [
+        {
+            childrens: [],
+            defaultValue: '',
+            fieldName: 'cpa_1_banner_1',
+            fieldType: 'image',
+            id: '22302',
+            isRequired: true,
+            labelName: 'File Banner',
+            templateId: '4619609303918768290',
+        },
+        {
+            childrens: [],
+            defaultValue: 'Màu trắng\\nMàu xám',
+            fieldName: 'cpa_1_banner_11',
+            fieldType: 'dropdownlist',
+            id: '22303',
+            isRequired: false,
+            labelName: 'Mã màu nền trường điền',
+            templateId: '4619609303918768290',
+        },
+    ],
+};
+var clientMethod = {
+    templatesGetDirectories: function () { return Promise.resolve(directories); },
+    templateTypesGet: function () { return Promise.resolve(templateTypes); },
+    templatesGetByDirectoryId: function (_id) {
+        return Promise.resolve(templates);
+    },
+    templatesGet: function () { return function (_id) {
+        Promise.resolve(templateModel);
+    }; },
+};
+// Mock Hooks
+jest.mock('../Hooks', function () { return ({
+    __esModule: true,
+    default: function () { return ({
+        service: {
+            templatesGetDirectories: jest.fn(function () {
+                return Promise.resolve(clientMethod.templatesGetDirectories());
+            }),
+            templateTypesGet: jest.fn(clientMethod.templateTypesGet),
+            templatesGetByDirectoryId: jest.fn(function (_id) {
+                return Promise.resolve(clientMethod.templatesGetByDirectoryId(_id));
+            }),
+            templatesGet: jest.fn(function (_id) {
+                return Promise.resolve(clientMethod.templatesGet());
+            }),
+        },
+    }); },
+}); });
+//  Mock đa ngữ
+jest.mock('react-i18next', function () { return (__assign(__assign({}, jest.requireActual('react-i18next')), { useTranslation: function () { return ({ t: jest.fn(function (key) { return key; }) }); } })); });
+describe('RowTemplate component', function () {
+    var mockProps = {
+        pageCode: 'lgn',
+        template: { sortOrder: 1 },
+        disabledIconDelete: false,
+        onChangeRow: jest.fn(),
+        onUpdateWizardLogin: jest.fn(),
+    };
+    var renderUi = function () { return (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTemplate_1.default, __assign({}, mockProps))); };
+    it('renders component', function () {
+        renderUi();
+        expect(react_1.screen.getByTestId('Common.Name')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('Wizard.Directory')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('Common.TypeTemplate')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('Wizard.SelectTemplate')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('Wizard.FieldNames')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('deleteIcon')).toBeInTheDocument();
+    });
+    it('check handleDeleteRowTemplate', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var deleteIcon;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    deleteIcon = react_1.screen.getByTestId('deleteIcon');
+                    react_1.fireEvent.click(deleteIcon);
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(mockProps.onUpdateWizardLogin).toHaveBeenCalledWith(Utils_1.TYPE_LOGIN_TEMPLATE.REMOVE, 1);
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('check  handleChange', function () {
+        renderUi();
+        react_1.fireEvent.change(react_1.screen.getByRole('textbox', { name: /Common.Name/i }), {
+            target: { value: 'test1' },
+        });
+    });
+    it('check  handleChange combobox directories', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var templatesGetByDirectoryIdSpy;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    templatesGetByDirectoryIdSpy = jest.spyOn(clientMethod, 'templatesGetByDirectoryId');
+                    renderUi();
+                    // Tên Thư Mục
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            var selectContainer, comboBox;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        selectContainer = react_1.screen.getByTestId('Wizard.Directory');
+                                        return [4 /*yield*/, (0, react_1.within)(selectContainer).findByRole('combobox')];
+                                    case 1:
+                                        comboBox = _a.sent();
+                                        if (comboBox) {
+                                            react_1.fireEvent.mouseDown(comboBox);
+                                            react_1.screen.getAllByText('SYSTEM TEMPLATE').forEach(function (el) {
+                                                react_1.fireEvent.click(el);
+                                            });
+                                        }
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 1:
+                    // Tên Thư Mục
+                    _a.sent();
+                    expect(templatesGetByDirectoryIdSpy).toHaveBeenCalledWith(directories[0].directoryId);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

@@ -0,0 +1,2 @@
+declare function CreateOrEdit(): import("react/jsx-runtime").JSX.Element;
+export default CreateOrEdit;