awing-library 2.1.1 → 2.1.2-stage

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

@@ -0,0 +1,255 @@
+"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 = {
+    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: {
+            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(),
+        directories: directories,
+        templateTypes: templateTypes,
+    };
+    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;

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

@@ -0,0 +1,150 @@
+"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 Hooks_1 = __importDefault(require("../Hooks"));
+var PageTemplate_1 = __importDefault(require("./PageTemplate"));
+var Utils_1 = require("../Utils");
+var AWING_1 = require("../../../AWING");
+var Router_1 = require("../../../AWING/Router");
+var enums_1 = require("../../../ACM-AXN/Page/enums");
+var FormInformationBasic_1 = __importDefault(require("./FormInformationBasic"));
+var ClassicDrawer_1 = __importDefault(require("../../../Commons/Components/ClassicDrawer"));
+var TEMPLATES = [enums_1.PageCode.Lgn, enums_1.PageCode.Wlc];
+function CreateOrEdit() {
+    var id = (0, Router_1.useParams)().id;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var service = (0, Hooks_1.default)().service;
+    // SHOW LOADING CALL API => api/Wizards/id
+    var _a = (0, react_1.useState)(false), loading = _a[0], setLoading = _a[1];
+    // SHOW Thông báo khi người dùng muốn tắt Drawer
+    var _b = (0, react_1.useState)(false), confirmExit = _b[0], setConfirmExit = _b[1];
+    // DATA Wizard
+    var _c = (0, react_1.useState)({
+        wizardLoginTemplates: [
+            {
+                sortOrder: 0,
+            },
+        ],
+        wizardWelcomeTemplates: [
+            {
+                sortOrder: 0,
+            },
+        ],
+    }), wizardData = _c[0], setWizardData = _c[1];
+    // Nhóm Wizard
+    var _d = (0, react_1.useState)([]), wizardGroup = _d[0], setWizardGroup = _d[1];
+    // DATA => Kiểu template
+    var _e = (0, react_1.useState)([]), templateTypes = _e[0], setTemplateTypes = _e[1];
+    // DATA => Tên Thư Mục
+    var _f = (0, react_1.useState)([]), directories = _f[0], setDirectories = _f[1];
+    (0, react_1.useEffect)(function () {
+        if (!templateTypes.length) {
+            service.templateTypesGet().then(setTemplateTypes);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [templateTypes.length]);
+    (0, react_1.useEffect)(function () {
+        if (!directories.length) {
+            service.templatesGetDirectories().then(setDirectories);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [directories.length]);
+    (0, react_1.useEffect)(function () {
+        if (id) {
+            setLoading(true);
+            service
+                .wizardsGet(id)
+                .then(setWizardData)
+                .finally(function () {
+                setLoading(false);
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+    (0, react_1.useEffect)(function () {
+        if (!wizardGroup.length) {
+            service.wizardsGetAllWizardGroup().then(setWizardGroup);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [wizardGroup.length]);
+    var handleConfirmExit = function () {
+        setConfirmExit(true);
+    };
+    var handleChange = (0, react_1.useCallback)(function (wizardNew) {
+        setWizardData(function (oldWizardData) { return (__assign(__assign({}, oldWizardData), wizardNew)); });
+    }, []);
+    var handleUpdateWizardLoginTemplate = (0, react_1.useCallback)(function (type, sortOrder) {
+        handleConfirmExit();
+        var wizardLoginTemplates = wizardData.wizardLoginTemplates;
+        if (type === Utils_1.TYPE_LOGIN_TEMPLATE.ADD) {
+            // ADD NEW => wizardLoginTemplates
+            wizardLoginTemplates === null || wizardLoginTemplates === void 0 ? void 0 : wizardLoginTemplates.push({
+                sortOrder: (wizardLoginTemplates === null || wizardLoginTemplates === void 0 ? void 0 : wizardLoginTemplates.length) === 1
+                    ? 1
+                    : wizardLoginTemplates.length,
+            });
+            setWizardData(function (oldWizardData) { return (__assign(__assign({}, oldWizardData), { wizardLoginTemplates: wizardLoginTemplates })); });
+        }
+        else {
+            // REMOVE RowTemplate => wizardLoginTemplates
+            var updatedWizardLoginTemplates = (wizardLoginTemplates === null || wizardLoginTemplates === void 0 ? void 0 : wizardLoginTemplates.filter(function (item) { return item.sortOrder !== sortOrder; })) || [];
+            var newWizardLoginTemplates_1 = updatedWizardLoginTemplates === null || updatedWizardLoginTemplates === void 0 ? void 0 : updatedWizardLoginTemplates.map(function (temp, idx) { return (__assign(__assign({}, temp), { sortOrder: idx })); });
+            setWizardData(function (oldWizardData) { return (__assign(__assign({}, oldWizardData), { wizardLoginTemplates: newWizardLoginTemplates_1 })); });
+        }
+    }, [wizardData]);
+    var handleSubmit = function () {
+        var wizardDataNew = wizardData;
+        if (typeof wizardDataNew.wizardGroup !== 'object') {
+            var wizardGroupItem = wizardGroup.find(function (item) { return item.id === wizardDataNew.wizardGroup; });
+            wizardDataNew = __assign(__assign({}, wizardDataNew), { wizardGroup: wizardGroupItem });
+        }
+        return id
+            ? service.wizardsPut(wizardDataNew)
+            : service.wizardsPost(wizardDataNew);
+    };
+    var isDisable = function () {
+        var isBasicFormData = false;
+        if ((wizardData.campaignPriority ||
+            wizardData.campaignPriority !== undefined) &&
+            wizardData.campaignTimeInDays &&
+            (wizardData.campaignType ||
+                wizardData.campaignType !== undefined) &&
+            wizardData.name &&
+            wizardData.wizardGroup) {
+            isBasicFormData = true;
+        }
+        var hasValidData = function (templates) {
+            return !!templates &&
+                templates.every(function (_a) {
+                    var name = _a.name, templateId = _a.templateId, sortOrder = _a.sortOrder;
+                    return !!name && !!templateId && sortOrder !== undefined;
+                });
+        };
+        return (isBasicFormData &&
+            hasValidData((wizardData === null || wizardData === void 0 ? void 0 : wizardData.wizardLoginTemplates) || []) &&
+            hasValidData((wizardData === null || wizardData === void 0 ? void 0 : wizardData.wizardWelcomeTemplates) || []));
+    };
+    return ((0, jsx_runtime_1.jsx)(ClassicDrawer_1.default, { title: id ? t('Common.Edit') : t('Common.Create'), onSubmit: handleSubmit, confirmExit: confirmExit, childrenWrapperStyle: { padding: 0 }, disableButtonSubmit: !(isDisable() && confirmExit), children: loading ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormInformationBasic_1.default, { wizardData: wizardData, wizardGroup: wizardGroup, onChange: handleChange, onConfirmExit: handleConfirmExit }), TEMPLATES.map(function (value) {
+                    return ((0, jsx_runtime_1.jsx)(PageTemplate_1.default, { pageCodeValue: value, onChange: handleChange, directories: directories, templateTypes: templateTypes, onConfirmExit: handleConfirmExit, wizardTemplates: value === enums_1.PageCode.Lgn
+                            ? (wizardData === null || wizardData === void 0 ? void 0 : wizardData.wizardLoginTemplates) || []
+                            : (wizardData === null || wizardData === void 0 ? void 0 : wizardData.wizardWelcomeTemplates) ||
+                                [], onUpdateWizardLogin: handleUpdateWizardLoginTemplate }, value));
+                })] })) }));
+}
+exports.default = CreateOrEdit;

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

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