awing-library 2.1.21 → 2.1.22-stage

package/lib/ACM-AXN/Wizard/Container.js

@@ -0,0 +1,46 @@
+"use strict";
+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 Context_1 = require("../../Context");
+var Router_1 = require("../../AWING/Router");
+var Constant_1 = require("../Common/Constant");
+var AWING_1 = require("../../AWING");
+function Container() {
+    var _a;
+    var navigate = (0, Router_1.useNavigate)();
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var service = (0, Hooks_1.default)().service;
+    var confirm = (0, Context_1.useAwing)().appHelper.confirm;
+    var _b = (0, react_1.useState)(false), loading = _b[0], setLoading = _b[1];
+    var _c = (0, react_1.useState)(), wizards = _c[0], setWizards = _c[1];
+    var queryData = (0, react_1.useCallback)(function (queryInput) {
+        var _a;
+        setLoading(true);
+        service
+            .wizardsPaging(undefined, (_a = queryInput === null || queryInput === void 0 ? void 0 : queryInput.searchString) === null || _a === void 0 ? void 0 : _a.trim(), queryInput.pageIndex, queryInput.pageSize)
+            .then(setWizards)
+            .finally(function () {
+            setLoading(false);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(AWING_1.PageManagement, { title: t('Wizard.Title'), onChangeQueryInput: queryData, inputSearchPlaceholder: t('Wizard.SearchPlaceholder'), columns: [
+            {
+                field: 'id',
+                headerName: '#',
+                valueGetter: function (row, idx, stt) { return stt; },
+                width: 60,
+            },
+            {
+                field: 'name',
+                headerName: t('Common.Name'),
+            },
+        ], loading: loading, confirmDelete: confirm, getRowId: function (row) { return row.id; }, rows: (wizards === null || wizards === void 0 ? void 0 : wizards.items) || [], onDelete: (_a = service.wizardsDelete) === null || _a === void 0 ? void 0 : _a.bind(service), totalOfRows: (wizards === null || wizards === void 0 ? void 0 : wizards.totalItemCount) || 0, onRowClick: function (id) { return navigate("".concat(Constant_1.Constants.EDIT_PATH, "/").concat(id)); }, onCreateButtonClick: function () { return navigate("".concat(Constant_1.Constants.CREATE_PATH)); } }));
+}
+exports.default = Container;

package/lib/ACM-AXN/Wizard/Container.test.d.ts

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

package/lib/ACM-AXN/Wizard/Container.test.js

@@ -0,0 +1,162 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var Router_1 = require("../../AWING/Router");
+var Container_1 = __importDefault(require("./Container"));
+var Constant_1 = require("../Common/Constant");
+var items = [
+    {
+        campaignPriority: 0,
+        campaignTimeInDays: 1,
+        campaignType: 4,
+        directoryId: '5168908508924386000',
+        directoryPath: '.0.90.4913100144472996590.5168908508924386000.5099244903339020944.',
+        id: '5099244903339020944',
+        name: 'Data Collect 2',
+    },
+    {
+        campaignPriority: 0,
+        campaignTimeInDays: 1111,
+        campaignType: 6,
+        directoryId: '5168908508924386000',
+        directoryPath: '.0.90.4913100144472996590.5168908508924386000.5526032303356207617.',
+        id: '5526032303356207617',
+        name: 'Video',
+    },
+];
+var clientMethod = {
+    wizardsDelete: function () { return function (_id) { }; },
+    wizardsPaging: function () {
+        return Promise.resolve({ items: items, totalItemCount: items.length });
+    },
+};
+// Mock service
+jest.mock('./Hooks', function () { return ({
+    __esModule: true,
+    default: function () { return ({
+        service: {
+            wizardsDelete: jest.fn(function (_id) {
+                return Promise.resolve(clientMethod.wizardsDelete());
+            }),
+            wizardsPaging: jest.fn(function (_param) {
+                return Promise.resolve(clientMethod.wizardsPaging());
+            }),
+        },
+    }); },
+}); });
+//  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; }) }); } })); });
+// Mock PageManagement
+jest.mock('AWING', function () { return ({
+    PageManagement: function (props) {
+        props.onChangeQueryInput({
+            searchString: '',
+            pageIndex: 0,
+            pageSize: 10,
+        });
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { "data-testid": "title", children: "t('AuthenticationProfile.Title')" }), props.columns
+                    .filter(function (item) { return item.valueGetter; })
+                    .map(function (getter, idx) { return ((0, jsx_runtime_1.jsx)("span", { children: getter.valueGetter(items[0], idx) }, idx)); }), (0, jsx_runtime_1.jsx)("span", { "data-testid": "rowid", children: props.getRowId(items[0]) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "Rowclick", onClick: function () {
+                        props.onRowClick(items[0].id);
+                    }, children: "Rowclick" }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "CreateBtn", onClick: props.onCreateButtonClick, children: "CreateBtn" }), (0, jsx_runtime_1.jsx)("button", { onClick: function () {
+                        props.onChangeQueryInput({
+                            pageIndex: 1,
+                            pageSize: 10,
+                        });
+                    }, children: "ChangeInput" }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "onDelete", onClick: function () {
+                        props.onDelete('onDelete');
+                    }, children: "Remove Btn" }), (0, jsx_runtime_1.jsx)("p", { children: JSON.stringify(props.rows) }), (0, jsx_runtime_1.jsxs)("span", { children: ["totalItemCount:", props.totalOfRows] })] }));
+    },
+}); });
+var renderUi = function () {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(Router_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Container_1.default, {}) }));
+};
+describe('AccessPoint container component', function () {
+    it('Check renders component(Container).', function () {
+        renderUi();
+        expect(react_1.screen.getByTestId('title')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('CreateBtn')).toBeInTheDocument();
+    });
+    it('Chuyển đến trang thêm mới.', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    expect(react_1.screen.getByTestId('CreateBtn')).toBeInTheDocument();
+                    react_1.fireEvent.click(react_1.screen.getByTestId('CreateBtn'));
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            return expect(window.location.href).toContain(['http://localhost', Constant_1.Constants.CREATE_PATH].join('/'));
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Chuyến đến trang Edit.', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    react_1.fireEvent.click(react_1.screen.getByTestId('Rowclick'));
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            return expect(window.location.href).toContain(['http://localhost', Constant_1.Constants.EDIT_PATH, items[0].id].join('/'));
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/lib/ACM-AXN/Wizard/Context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WizardFeatureProps } from './Types';
+export declare const wizardPropsContext: import("react").Context<WizardFeatureProps>;

package/lib/ACM-AXN/Wizard/Context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wizardPropsContext = void 0;
+var react_1 = require("react");
+exports.wizardPropsContext = (0, react_1.createContext)({});

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IWizard, WizardGroup } from '../Types';
+interface PropsFormBasic {
+    wizardData: IWizard;
+    wizardGroup: WizardGroup[];
+    onConfirmExit: () => void;
+    onChange: (wizardNew: object) => void;
+}
+declare function FormInformationBasic(props: PropsFormBasic): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof FormInformationBasic>;
+export default _default;

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

@@ -0,0 +1,90 @@
+"use strict";
+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 AWING_1 = require("../../../AWING");
+var Utils_1 = require("../Utils");
+function FormInformationBasic(props) {
+    var _a;
+    var onChange = props.onChange, onConfirmExit = props.onConfirmExit, wizardData = props.wizardData, wizardGroup = props.wizardGroup;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var campaignPriority = (0, react_1.useCallback)(function () {
+        var _a;
+        var priorityList = (_a = {},
+            _a[Utils_1.CAMPAIGN_PRIORITY.CLASS_A] = t('Wizard.PriorityA'),
+            _a[Utils_1.CAMPAIGN_PRIORITY.CLASS_B] = t('Wizard.PriorityB'),
+            _a[Utils_1.CAMPAIGN_PRIORITY.CLASS_C] = t('Wizard.PriorityC'),
+            _a);
+        return Object.values(Utils_1.CAMPAIGN_PRIORITY).map(function (item) { return ({
+            value: item,
+            text: priorityList[item],
+        }); });
+    }, [t]);
+    var campaignType = (0, react_1.useCallback)(function () {
+        var _a;
+        var typeList = (_a = {},
+            _a[Utils_1.CAMPAIGN_TYPE.BANNER_STATIC] = t('Wizard.BANNER_STATIC'),
+            _a[Utils_1.CAMPAIGN_TYPE.BANNER_EFFECT] = t('Wizard.BANNER_EFFECT'),
+            _a[Utils_1.CAMPAIGN_TYPE.BANNER_SLIDE] = t('Wizard.BANNER_SLIDE'),
+            _a[Utils_1.CAMPAIGN_TYPE.CPA] = t('Wizard.CPA'),
+            _a[Utils_1.CAMPAIGN_TYPE.SURVEY] = t('Wizard.SURVEY'),
+            _a[Utils_1.CAMPAIGN_TYPE.VIDEO] = t('Wizard.VIDEO'),
+            _a[Utils_1.CAMPAIGN_TYPE.GAME] = t('Wizard.GAME'),
+            _a[Utils_1.CAMPAIGN_TYPE.TEXT_MATCHING] = t('Wizard.TEXT_MATCHING'),
+            _a[Utils_1.CAMPAIGN_TYPE.OTHER] = t('Wizard.OTHER'),
+            _a);
+        return Object.values(Utils_1.CAMPAIGN_TYPE).map(function (item) { return ({
+            value: item,
+            text: typeList[item],
+        }); });
+    }, [t]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !(wizardGroup === null || wizardGroup === void 0 ? void 0 : wizardGroup.length) ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(AWING_1.BasicDataForm, { fields: [
+                {
+                    fieldName: 'name',
+                    type: 'text',
+                    label: t('Common.Name'),
+                    required: true,
+                    value: (wizardData === null || wizardData === void 0 ? void 0 : wizardData.name) || '',
+                },
+                {
+                    fieldName: 'wizardGroup',
+                    type: 'autocomplete',
+                    label: t('Wizard.WizardGroup'),
+                    required: true,
+                    options: wizardGroup.map(function (item) { return ({
+                        text: (item === null || item === void 0 ? void 0 : item.name) || '',
+                        value: (item === null || item === void 0 ? void 0 : item.id) || '',
+                    }); }),
+                    value: ((_a = wizardData === null || wizardData === void 0 ? void 0 : wizardData.wizardGroup) === null || _a === void 0 ? void 0 : _a.id) ||
+                        (wizardData === null || wizardData === void 0 ? void 0 : wizardData.wizardGroup),
+                },
+                {
+                    fieldName: 'campaignPriority',
+                    type: 'autocomplete',
+                    label: t('Wizard.Priority'),
+                    required: true,
+                    value: wizardData === null || wizardData === void 0 ? void 0 : wizardData.campaignPriority,
+                    options: campaignPriority(),
+                },
+                {
+                    fieldName: 'campaignType',
+                    type: 'autocomplete',
+                    label: t('Wizard.Type'),
+                    required: true,
+                    value: wizardData === null || wizardData === void 0 ? void 0 : wizardData.campaignType,
+                    options: campaignType(),
+                },
+                {
+                    fieldName: 'campaignTimeInDays',
+                    type: 'number',
+                    label: t('Wizard.CampaignTimeInDays'),
+                    required: true,
+                    value: wizardData === null || wizardData === void 0 ? void 0 : wizardData.campaignTimeInDays,
+                },
+            ], onUpdate: function (validState, valueForm) {
+                onConfirmExit();
+                onChange(valueForm);
+            } })) }));
+}
+exports.default = (0, react_1.memo)(FormInformationBasic);

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

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

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

@@ -0,0 +1,113 @@
+"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 FormInformationBasic_1 = __importDefault(require("./FormInformationBasic"));
+var wizardGroup = [
+    { id: 1, code: 'Banner', name: 'Banner' },
+    { id: 2, code: 'Slide_banner', name: 'Slide banner' },
+    { id: 3, code: 'Collect_data', name: 'Collect data' },
+];
+//  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; }) }); } })); });
+// mock BasicDataForm
+jest.mock('AWING', function () { return ({
+    BasicDataForm: function (props) {
+        return ((0, jsx_runtime_1.jsx)("div", { "data-testid": "BasicDataForm", children: (0, jsx_runtime_1.jsx)("button", { "data-testid": "onUpdate", onClick: function () {
+                    props.onUpdate(true, {
+                        name: 'QuanDX',
+                        wizardGroup: 2,
+                        campaignPriority: 0,
+                        campaignType: 2,
+                        campaignTimeInDays: 10,
+                    });
+                } }) }));
+    },
+}); });
+var onChangeMock = jest.fn();
+var onConfirmExitMock = jest.fn();
+var renderUi = function () {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(FormInformationBasic_1.default, { onConfirmExit: onConfirmExitMock, onChange: onChangeMock, wizardData: {}, wizardGroup: wizardGroup }));
+};
+describe('FromBasic component', function () {
+    it('Render component', function () {
+        renderUi();
+        expect(react_1.screen.getByTestId('onUpdate')).toBeInTheDocument();
+    });
+    it('Update data', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            react_1.fireEvent.click(react_1.screen.getByTestId('onUpdate'));
+                            expect(onConfirmExitMock).toHaveBeenCalledTimes(1);
+                            // eslint-disable-next-line testing-library/no-wait-for-multiple-assertions
+                            expect(onChangeMock).toHaveBeenCalledTimes(1);
+                            // eslint-disable-next-line testing-library/no-wait-for-multiple-assertions
+                            expect(onChangeMock).toHaveBeenCalledWith({
+                                name: 'QuanDX',
+                                wizardGroup: 2,
+                                campaignPriority: 0,
+                                campaignType: 2,
+                                campaignTimeInDays: 10,
+                            });
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Directory, TemplateType, IWizardTemplate } from '../Types';
+interface PropsPageTemplate {
+    pageCodeValue: number;
+    directories: Directory[];
+    templateTypes: TemplateType[];
+    wizardTemplates: IWizardTemplate[];
+    onConfirmExit: () => void;
+    onChange: (wizardNew: object) => void;
+    onUpdateWizardLogin?: (type: string, sortOrder?: number) => void;
+}
+declare function PageTemplate(props: PropsPageTemplate): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof PageTemplate>;
+export default _default;

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

@@ -0,0 +1,88 @@
+"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 Add_1 = __importDefault(require("@mui/icons-material/Add"));
+var material_1 = require("@mui/material");
+var RowTemplate_1 = __importDefault(require("./RowTemplate"));
+var AWING_1 = require("../../../AWING");
+var enums_1 = require("../../../ACM-AXN/Page/enums");
+var Utils_1 = require("../Utils");
+function PageTemplate(props) {
+    var pageCodeValue = props.pageCodeValue, wizardTemplates = props.wizardTemplates, templateTypes = props.templateTypes, directories = props.directories, onChange = props.onChange, onConfirmExit = props.onConfirmExit, _a = props.onUpdateWizardLogin, onUpdateWizardLogin = _a === void 0 ? function () { return null; } : _a;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var isPageCodeLogin = pageCodeValue === enums_1.PageCode.Lgn;
+    var pageCode = pageCodeValue === enums_1.PageCode.Lgn ? Utils_1.CPageCode.LGN : Utils_1.CPageCode.WLC;
+    var _b = (0, react_1.useState)(true), loadingDirectory = _b[0], setLoadingDirectories = _b[1];
+    var _c = (0, react_1.useState)(true), loadingtemplateTypes = _c[0], setLoadingTemplateTypes = _c[1];
+    // DATA => Tên Thư Mục
+    var _d = (0, react_1.useState)([]), pageDirectories = _d[0], setPageDirectories = _d[1];
+    // DATA => Kiểu template
+    var _e = (0, react_1.useState)([]), pageTemplateTypes = _e[0], setPageTemplateTypes = _e[1];
+    (0, react_1.useLayoutEffect)(function () {
+        if (directories.length > 0) {
+            // 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';
+            }
+            setPageDirectories(directories);
+            loadingDirectory && setLoadingDirectories(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [directories.length]);
+    (0, react_1.useLayoutEffect)(function () {
+        if (templateTypes.length > 0) {
+            setPageTemplateTypes(templateTypes.filter(function (itemTemplate) {
+                return itemTemplate.templateTypeCode === pageCode;
+            }));
+            loadingtemplateTypes && setLoadingTemplateTypes(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [templateTypes.length]);
+    var handleChangeRowTemplate = function (fieldValue, sortOrder) {
+        var _a;
+        onConfirmExit();
+        var pageName = isPageCodeLogin
+            ? 'wizardLoginTemplates'
+            : 'wizardWelcomeTemplates';
+        // Update data  'wizardLoginTemplates' || 'wizardWelcomeTemplates'
+        onChange((_a = {},
+            _a[pageName] = wizardTemplates.map(function (item) {
+                return item.sortOrder === sortOrder ? __assign(__assign({}, item), fieldValue) : item;
+            }),
+            _a));
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Grid, { component: material_1.Paper, sx: {
+            p: 3,
+            ml: 3,
+            mr: 3,
+            mb: 3,
+            overflowX: 'auto',
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", sx: { display: 'flex', justifyContent: 'space-between' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: {
+                            fontWeight: '600',
+                        }, "data-testid": "title", children: isPageCodeLogin
+                            ? t('Wizard.LoginTemplate')
+                            : t('Wizard.WelcomeTemplate') }), isPageCodeLogin && ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", "aria-label": "button-add", title: t('Common.Add'), "data-testid": "button-add", onClick: function () {
+                            return onUpdateWizardLogin(Utils_1.TYPE_LOGIN_TEMPLATE.ADD);
+                        }, children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) }))] }), loadingDirectory || loadingtemplateTypes ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: wizardTemplates.map(function (template, idx) { return ((0, jsx_runtime_1.jsx)(RowTemplate_1.default, { template: template, pageCode: pageCode, directories: pageDirectories, templateTypes: pageTemplateTypes, onChangeRow: handleChangeRowTemplate, onUpdateWizardLogin: onUpdateWizardLogin, disabledIconDelete: wizardTemplates.length === 1 }, idx)); }) }))] }));
+}
+exports.default = (0, react_1.memo)(PageTemplate);

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

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

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

@@ -0,0 +1,99 @@
+"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");
+/* eslint-disable testing-library/no-wait-for-side-effects */
+var react_1 = require("@testing-library/react");
+var PageTemplate_1 = __importDefault(require("./PageTemplate"));
+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' },
+];
+jest.mock('../Utils', function () { return ({
+    TYPE_LOGIN_TEMPLATE: { ADD: 'add', REMOVE: 'remove' },
+}); });
+//  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; }) }); } })); });
+var clientMethod = {
+    templatesGetDirectories: function () { return Promise.resolve(directories); },
+    templateTypesGet: function () { return Promise.resolve(templateTypes); },
+};
+jest.mock('AWING', function () { return (__assign(__assign({}, jest.requireActual('AWING')), { CircularProgress: function () { return ((0, jsx_runtime_1.jsx)("div", { "data-testid": "CircularProgress", children: "CircularProgress" })); } })); });
+// 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),
+        },
+    }); },
+}); });
+jest.mock('./RowTemplate', function () { return function (props) { return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { "data-testid": "row-template-change", onClick: props.onChangeRow }) })); }; });
+describe('PageTemplate component', function () {
+    var mockData = {
+        pageCodeValue: 1,
+        wizardTemplates: [],
+        directories: [],
+        templateTypes: [],
+        onConfirmExit: jest.fn(),
+        onChange: jest.fn(),
+        onUpdateWizardLogin: jest.fn(),
+    };
+    it('Render component', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(PageTemplate_1.default, __assign({}, mockData)));
+        expect(react_1.screen.getByTestId('title')).toBeInTheDocument();
+        expect(react_1.screen.getByLabelText('button-add')).toBeInTheDocument();
+        var addButton = react_1.screen.getByTestId('button-add');
+        expect(addButton).toBeInTheDocument();
+        react_1.fireEvent.click(addButton);
+        expect(mockData.onUpdateWizardLogin).toHaveBeenCalledWith(Utils_1.TYPE_LOGIN_TEMPLATE.ADD);
+    });
+    it('should handle row template change', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(PageTemplate_1.default, __assign({}, mockData, { wizardTemplates: [{ sortOrder: 0, name: 'Template1' }] })));
+        var rowTemplateButton = react_1.screen.getByTestId('row-template-change');
+        react_1.fireEvent.click(rowTemplateButton);
+    });
+});