awing-library 2.1.107-beta → 2.1.109-beta

package/lib/ACM-AXN/Campaign/CreateOrEdit/Recoils.js

@@ -56,6 +56,7 @@ exports.campaignModelState = (0, recoil_1.atom)({
                     bookingAmount: 10,
                     bonusAmount: 0,
                     isReserved: false,
+                    billingUnit: 1,
                 },
                 ads: [],
             },

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AdDetail.js

@@ -174,7 +174,7 @@ function AdDetail(props) {
                                 });
                             }, handleValid: function (valid) {
                                 return setAdValid(function (pre) { return (__assign(__assign({}, pre), { dateRange: valid })); });
-                            }, textFieldProps: { fullWidth: true, required: true }, isDayBlocked: function (day) { return (0, moment_1.default)().startOf('day').valueOf() > day.valueOf(); } }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: true, style: { padding: 8 }, children: (0, jsx_runtime_1.jsx)(PlaceMultiSelect, { isCreateCampaign: true, defaultValue: ad.placeFilter, onDetailSubmit: function (places, placeFilter) {
+                            }, textFieldProps: { fullWidth: true, required: true } }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: true, style: { padding: 8 }, children: (0, jsx_runtime_1.jsx)(PlaceMultiSelect, { isCreateCampaign: true, defaultValue: ad.placeFilter, onDetailSubmit: function (places, placeFilter) {
                                 handleChangeStatus('placeFilter', (0, Utils_1.placeFilterValid)(placeFilter, places));
                                 onChange(function (pre) { return (__assign(__assign({}, pre), { placeFilter: placeFilter, places: places })); });
                             }, TextFieldProps: {

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/EditAds.js

@@ -15,7 +15,6 @@ var Utils_1 = require("../../Utils");
 var Helpers_1 = require("../../../../Utils/Helpers");
 var ClassicBaseDrawer_1 = __importDefault(require("../../../../Commons/Components/ClassicBaseDrawer"));
 var Context_1 = require("../../../../Context");
-var moment_1 = __importDefault(require("moment"));
 function EditAds(props) {
     var t = (0, react_i18next_1.useTranslation)().t;
     var PlaceFilterField = (0, Hooks_1.default)().placeMultiSelectComponent;
@@ -77,7 +76,6 @@ function EditAds(props) {
             type: 'date-range',
             label: t('Campaign.Ad.Time'),
             required: true,
-            isDayBlocked: function (day) { return (0, moment_1.default)().startOf('day').valueOf() > day.valueOf(); }
         },
         {
             fieldName: 'isReserved',

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/SubCampaignDetail.js

@@ -10,99 +10,190 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var recoil_1 = require("recoil");
 var react_i18next_1 = require("react-i18next");
-var material_1 = require("@mui/material");
 // import { CampaignGroup, CampaignTicket } from '../../types'
 var lodash_1 = require("lodash");
 var Types_1 = require("../../Types");
 var Utils_1 = require("../../Utils");
 var Recoils_1 = require("../Recoils");
+var AWING_1 = require("../../../../AWING");
 function SubCampaignDetail(props) {
     var t = (0, react_i18next_1.useTranslation)().t;
     var subCampaign = props.subCampaign, onSubCampaignChange = props.onSubCampaignChange, onChangeSubCampaignStatus = props.onChangeSubCampaignStatus;
-    var getFormValid = function () { return (__assign(__assign(__assign({}, ((0, Utils_1.nameValid)(subCampaign.name) && {
-        name: true,
-    })), ((!(0, Utils_1.checkPriority)(subCampaign.priority, Types_1.CampaignPriority.ClassB) ||
-        (0, Utils_1.bookingValid)(subCampaign.bookingAmount)) && {
-        bookingAmount: true,
-    })), ((0, Utils_1.bonusValid)(subCampaign.bonusAmount) && {
-        bonusAmount: true,
-    }))); };
-    var _a = (0, react_1.useState)(getFormValid), subValid = _a[0], setSubValid = _a[1];
+    var getFormValid = function () { return ({
+        name: (0, Utils_1.nameValid)(subCampaign.name),
+        bookingAmount: !(0, Utils_1.checkPriority)(subCampaign.priority, Types_1.CampaignPriority.ClassB) || (0, Utils_1.bookingValid)(subCampaign.bookingAmount),
+        bonusAmount: (0, Utils_1.bonusValid)(subCampaign.bonusAmount),
+        billingUnit: subCampaign.billingUnit !== null,
+    }); };
+    var cacheSubId = react_1.default.useRef();
+    (0, react_1.useEffect)(function () {
+        cacheSubId.current = subCampaign.id;
+        return function () {
+            cacheSubId.current = undefined;
+        };
+    }, [subCampaign.id]);
     var isCreate = (0, recoil_1.useRecoilValue)(Recoils_1.isCreateState);
     (0, react_1.useEffect)(function () {
-        setSubValid(getFormValid());
         onSubCampaignChange(function (prev) { return (0, lodash_1.cloneDeep)(prev); });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [subCampaign.id]);
+    }, [subCampaign.id, onSubCampaignChange]);
     (0, react_1.useEffect)(function () {
-        onChangeSubCampaignStatus(Boolean(subValid.name && subValid.bookingAmount && subValid.bonusAmount));
+        onChangeSubCampaignStatus(Object.values(getFormValid()).every(Boolean));
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [subValid.name, subValid.bookingAmount, subValid.bonusAmount]);
+    }, [subCampaign]);
     /**
      * Hàm cập nhật trạng thái các trường của chiến dịch con
      * @param fieldName Tên trường cần cập nhật
      * @param status Trạng thái mới
      */
-    var handleChangeStatus = function (fieldName, status) {
-        if (subValid[fieldName] !== status)
-            setSubValid(function (pre) {
-                var _a;
-                return (__assign(__assign({}, pre), (_a = {}, _a[fieldName] = status, _a)));
-            });
-    };
     var translationText = {
         name: t('Campaign.Name'),
         ticket: t('Campaign.Ticket'),
+        BillingUnit: t('Campaign.BillingUnit.Title'),
         priority: t('Campaign.Detail.Priority'),
         booking: t('Campaign.BookingText'),
         bonus: t('Campaign.BonusText'),
         reserved: t('Campaign.Reserved'),
         none: t('Common.None'),
         helperText: t('Common.Required'),
+        notNegative: t('Common.NotNegative'),
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, style: { padding: 8, paddingBottom: 0 }, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: true, style: { padding: 8 }, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "name", name: "name", variant: "standard", required: true, fullWidth: true, label: translationText.name, value: subCampaign.name, onChange: function (e) {
-                                var value = e.target.value;
-                                handleChangeStatus('name', (0, Utils_1.nameValid)(value));
-                                onSubCampaignChange(function (pre) { return (__assign(__assign({}, pre), { name: value })); });
-                            }, error: subValid.name !== undefined && !subValid.name, helperText: subValid.name !== undefined && !subValid.name
-                                ? translationText.helperText
-                                : '' }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: true, style: { padding: 8 }, children: (0, jsx_runtime_1.jsxs)(material_1.TextField, { id: "ticket", name: "ticket", variant: "standard", select: true, required: true, fullWidth: true, label: translationText.ticket, value: subCampaign.ticket, onChange: function (e) {
-                                onSubCampaignChange(function (pre) { return (__assign(__assign({}, pre), { ticket: Number(e.target.value) })); });
-                            }, disabled: isCreate, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: Types_1.CampaignTicket.ACTIVE, children: t('Campaign.Active') }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: Types_1.CampaignTicket.INACTIVE, children: t('Campaign.InActive') })] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: true, style: { padding: 8 }, children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: subCampaign.isReserved, onChange: function (e) {
-                                    e.persist();
-                                    onSubCampaignChange(function (pre) { return (__assign(__assign({}, pre), { isReserved: e.target.checked })); });
-                                }, name: "isReserved", color: "primary" }), label: translationText.reserved, style: { marginTop: 6 } }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, style: { padding: 8, paddingTop: 0 }, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: true, style: { padding: 8 }, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "priority", select: true, required: true, variant: "standard", fullWidth: true, label: translationText.priority, value: isNaN(Number(subCampaign.priority))
-                                ? subCampaign.priority
-                                : Object.values(Types_1.CampaignPriority)[subCampaign.priority], onChange: function (e) {
-                                var newPriority = Object.values(Types_1.CampaignPriority).indexOf(e.target.value);
-                                onSubCampaignChange(function (pre) {
-                                    var newSubCamp = __assign(__assign({}, pre), { priority: newPriority, bookingAmount: (0, Utils_1.checkPriority)(newPriority, Types_1.CampaignPriority.ClassB)
-                                            ? 10
-                                            : 0, bonusAmount: 0 });
-                                    setSubValid(function (pre) { return (__assign(__assign({}, pre), { bookingAmount: true, bonusAmount: true })); });
-                                    return newSubCamp;
-                                });
-                            }, children: Object.values(Types_1.CampaignPriority).map(function (priority) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: priority, children: t("Campaign.".concat(priority)) }, priority)); }) }) }), (0, Utils_1.checkPriority)(subCampaign.priority, Types_1.CampaignPriority.ClassB) && ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: true, style: { padding: 8 }, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "bookingAmount", required: true, fullWidth: true, variant: "standard", type: "number", label: translationText.booking, value: subCampaign.bookingAmount, onChange: function (e) {
-                                var value = Number(e.target.value);
-                                handleChangeStatus('bookingAmount', (0, Utils_1.bookingValid)(value));
-                                onSubCampaignChange(function (pre) { return (__assign(__assign({}, pre), { bookingAmount: value })); });
-                            }, onFocus: function (event) { return event.target.select(); }, error: subValid.bookingAmount !== undefined &&
-                                !subValid.bookingAmount, helperText: subValid.bookingAmount !== undefined &&
-                                !subValid.bookingAmount
-                                ? translationText.helperText
-                                : '' }) })), (0, Utils_1.checkPriority)(subCampaign.priority, Types_1.CampaignPriority.ClassB) && ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: true, style: { padding: 8 }, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "bonusAmount", variant: "standard", fullWidth: true, type: "number", label: translationText.bonus, value: subCampaign.bonusAmount, onChange: function (e) {
-                                var value = Number(e.target.value);
-                                handleChangeStatus('bonusAmount', (0, Utils_1.bonusValid)(value));
-                                onSubCampaignChange(function (pre) { return (__assign(__assign({}, pre), { bonusAmount: value })); });
-                            }, onFocus: function (event) { return event.target.select(); }, error: subValid.bonusAmount !== undefined &&
-                                !subValid.bonusAmount, helperText: subValid.bonusAmount !== undefined &&
-                                !subValid.bonusAmount
-                                ? translationText.helperText
-                                : '' }) }))] })] }));
+    var fields = react_1.default.useMemo(function () {
+        var tempField = [
+            {
+                fieldName: 'name',
+                type: 'text',
+                label: translationText.name,
+                required: true,
+                gridSize: 4,
+                pattern: false,
+                length: 500,
+            },
+            {
+                fieldName: 'ticket',
+                type: 'select',
+                label: translationText.ticket,
+                required: true,
+                gridSize: 4,
+                disabled: isCreate,
+                options: [
+                    {
+                        text: t('Campaign.Active'),
+                        value: Types_1.CampaignTicket.ACTIVE,
+                    },
+                    {
+                        text: t('Campaign.InActive'),
+                        value: Types_1.CampaignTicket.INACTIVE,
+                    },
+                ],
+            },
+            {
+                fieldName: 'priority',
+                type: 'select',
+                gridSize: 4,
+                label: translationText.priority,
+                required: true,
+                options: Object.values(Types_1.CampaignPriority).map(function (priority) { return ({
+                    text: t("Campaign.".concat(priority)),
+                    value: priority,
+                }); }),
+            },
+        ];
+        if ((0, Utils_1.checkPriority)(subCampaign.priority, Types_1.CampaignPriority.ClassB)) {
+            tempField.push({
+                fieldName: 'bookingAmount',
+                type: 'number',
+                gridSize: 4,
+                required: true,
+                label: translationText.booking,
+                InputProps: {
+                    type: 'number',
+                },
+                onValidate: function (value) { return (0, Utils_1.bookingValid)(Number(value)); },
+            }, {
+                fieldName: 'bonusAmount',
+                type: 'number',
+                gridSize: 4,
+                required: true,
+                label: translationText.booking,
+                InputProps: {
+                    type: 'number',
+                },
+                onValidate: function (value) { return (0, Utils_1.bonusValid)(Number(value)); },
+            }, {
+                fieldName: 'billingUnit',
+                type: 'select',
+                gridSize: 4,
+                label: translationText.BillingUnit,
+                required: true,
+                value: String(subCampaign.billingUnit),
+                onValidate: function (value) { return value !== null; },
+                options: Object.values(Types_1.AnalyticType)
+                    .filter(function (item) { return !isNaN(Number(item)); })
+                    .map(function (item) { return ({
+                    text: t("Campaign.BillingUnit.".concat((0, lodash_1.capitalize)((0, lodash_1.camelCase)(Types_1.AnalyticType[item])))),
+                    value: item,
+                }); }),
+            });
+        }
+        tempField.push({
+            fieldName: 'isReserved',
+            type: 'checkbox',
+            gridSize: 4,
+            label: translationText.reserved,
+        });
+        return tempField;
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [subCampaign]);
+    var handleUpdate = react_1.default.useCallback(function (data, valid, fieldName) {
+        if (!fieldName || cacheSubId.current !== subCampaign.id)
+            return;
+        onSubCampaignChange(function (pre) {
+            var _a;
+            return fieldName === 'priority'
+                ? __assign(__assign(__assign(__assign({}, pre), { priority: data[fieldName] }), ((0, Utils_1.checkPriority)(data[fieldName], Types_1.CampaignPriority.ClassB)
+                    ? {
+                        bookingAmount: 10,
+                        billingUnit: null,
+                    }
+                    : {
+                        bookingAmount: 0,
+                        billingUnit: 0,
+                    })), { bonusAmount: 0 }) : __assign(__assign({}, pre), (_a = {}, _a[fieldName] = data[fieldName], _a));
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [subCampaign.id, onSubCampaignChange]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(AWING_1.DataForm, { padding: "none", fields: fields, oldValue: __assign(__assign({}, subCampaign), { priority: isNaN(Number(subCampaign.priority))
+                    ? subCampaign.priority
+                    : Object.values(Types_1.CampaignPriority)[subCampaign.priority] }), onUpdate: handleUpdate }) }));
 }
 exports.default = SubCampaignDetail;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/SubCampaignDetail.test.js

@@ -26,6 +26,7 @@ var subCampaignMock = {
     ticket: Types_1.CampaignTicket.INACTIVE,
     priority: Types_1.CampaignPriority.ClassB,
     isReserved: false,
+    billingUnit: 1,
 };
 describe('<SubCampaignDetail />', function () {
     it('should render with correct information classB', function () {

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/index.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var lodash_1 = __importDefault(require("lodash"));
+var react_1 = __importDefault(require("react"));
 var recoil_1 = require("recoil");
 var Recoils_1 = require("../Recoils");
 var Types_1 = require("../../Types");
@@ -103,7 +104,7 @@ function TabSubCampaign() {
      * Cập nhật chiến dịch con
      * @param subCampaignSetStateAction Thông tin thay đổi của chiến dịch con
      */
-    var handleUpdateSubCampaign = function (subCampaignSetStateAction) {
+    var handleUpdateSubCampaign = react_1.default.useCallback(function (subCampaignSetStateAction) {
         setSubCampaigns(function (preSubCampains) {
             var newSubCampaigns = lodash_1.default.cloneDeep(preSubCampains);
             var selectedSubCampaignIndex = newSubCampaigns.findIndex(function (x) { return x.campaignGroup.id === selectedSubCampaignId[0]; });
@@ -120,7 +121,8 @@ function TabSubCampaign() {
             }
             return newSubCampaigns;
         });
-    };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedSubCampaignId]);
     /**
      * Tạo quảng cáo mới
      * @param newAd Thông tin của quảng cáo mới

package/lib/ACM-AXN/Campaign/Types.d.ts

@@ -79,6 +79,7 @@ export type CampaignGroup = {
      * Đánh dấu nhóm chiến dịch không được xoá
      */
     cantBeDelete?: boolean;
+    billingUnit: AnalyticType;
 };
 export type CampaignAd = {
     id: number;
@@ -215,6 +216,11 @@ export declare enum CampaignPriority {
     ClassB = "ClassB",
     ClassC = "ClassC"
 }
+export declare enum AnalyticType {
+    VIEW = 0,// Impression 
+    AUTHENTICATION = 1,// Engagement / Spot
+    CLICK = 2
+}
 export declare enum CampaignTicket {
     ACTIVE = 0,
     INACTIVE = 1
@@ -277,10 +283,6 @@ export declare enum Operator {
      */
     In = 7
 }
-export declare enum AnalyticType {
-    AnalyticView = 1,
-    AnalyticEvent = 2
-}
 export interface IPagedListOfCampaignModel {
     items: CampaignModel[];
     pageCount: number;

package/lib/ACM-AXN/Campaign/Types.js

@@ -1,12 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnalyticType = exports.Operator = exports.CampaignRuleType = exports.AdType = exports.CampaignTicket = exports.CampaignPriority = void 0;
+exports.Operator = exports.CampaignRuleType = exports.AdType = exports.CampaignTicket = exports.AnalyticType = exports.CampaignPriority = void 0;
 var CampaignPriority;
 (function (CampaignPriority) {
     CampaignPriority["ClassA"] = "ClassA";
     CampaignPriority["ClassB"] = "ClassB";
     CampaignPriority["ClassC"] = "ClassC";
 })(CampaignPriority || (exports.CampaignPriority = CampaignPriority = {}));
+var AnalyticType;
+(function (AnalyticType) {
+    AnalyticType[AnalyticType["VIEW"] = 0] = "VIEW";
+    AnalyticType[AnalyticType["AUTHENTICATION"] = 1] = "AUTHENTICATION";
+    AnalyticType[AnalyticType["CLICK"] = 2] = "CLICK";
+})(AnalyticType || (exports.AnalyticType = AnalyticType = {}));
 var CampaignTicket;
 (function (CampaignTicket) {
     CampaignTicket[CampaignTicket["ACTIVE"] = 0] = "ACTIVE";
@@ -74,8 +80,3 @@ var Operator;
      */
     Operator[Operator["In"] = 7] = "In";
 })(Operator || (exports.Operator = Operator = {}));
-var AnalyticType;
-(function (AnalyticType) {
-    AnalyticType[AnalyticType["AnalyticView"] = 1] = "AnalyticView";
-    AnalyticType[AnalyticType["AnalyticEvent"] = 2] = "AnalyticEvent";
-})(AnalyticType || (exports.AnalyticType = AnalyticType = {}));

package/lib/ACM-AXN/Page/CreateOrEdit/Tabview/ViewContent.js

@@ -1,4 +1,15 @@
 "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) {
@@ -170,6 +181,11 @@ var ViewContent = function (_a) {
                             onChange(['validProcessStatus'], processValue);
                         }, onNotifyError: function (errorMessage) {
                             appHelper.snackbar('error', errorMessage);
-                        }, onUploadFile: onUploadFile }) }) })) })) }));
+                        }, onUploadFile: onUploadFile, onChangeEvent: function (values) {
+                            setEvent(function (prev) {
+                                return prev.filter(function (item) { return item.viewNumber !== viewNumber + 1; }).concat(values.map(function (value) { return (__assign(__assign({}, value), { viewNumber: viewNumber + 1, pageId: pageId })); }));
+                            });
+                            isUniq.current = false;
+                        } }) }) })) })) }));
 };
 exports.default = ViewContent;

package/lib/ACM-AXN/Page/CreateOrEdit/Tabview/index.js

@@ -57,10 +57,9 @@ var TabView = function (_a) {
     var isCreate = _a.isCreate;
     var _b = (0, recoil_1.useRecoilState)((0, Recoil_1.pageState)('views')), _c = _b[0], views = _c.views, page = _c.page, setView = _b[1];
     var _d = react_1.default.useState(0), activeViewIndex = _d[0], setActiveViewIndex = _d[1];
-    var _e = react_1.default.useState(true), tempLoading = _e[0], setTempLoading = _e[1];
-    var _f = react_1.default.useState([]), directories = _f[0], setDirectories = _f[1];
-    var _g = react_1.default.useState([]), templateTypes = _g[0], setTemplateTypes = _g[1];
-    var _h = (0, Context_1.default)(), service = _h.service, pageCode = _h.pageCode;
+    var _e = react_1.default.useState([]), directories = _e[0], setDirectories = _e[1];
+    var _f = react_1.default.useState([]), templateTypes = _f[0], setTemplateTypes = _f[1];
+    var _g = (0, Context_1.default)(), service = _g.service, pageCode = _g.pageCode;
     var appHelper = (0, Context_2.useAwing)().appHelper;
     var t = (0, react_i18next_1.useTranslation)().t;
     react_1.default.useEffect(function () {

package/lib/ACM-AXN/Page/CreateOrEdit/Utils.js

@@ -218,7 +218,7 @@ function updateStateByPageModel(pageModel) {
             fieldsRequireStatus: false,
             isChanged: false,
             verifiedStatus: enums_1.VERIFIED_STATUS.NOT_VERIFIED,
-        }); });
+        }); }).sort(function (view1, view2) { return view1.viewDatas.at(-1).viewNumber - view2.viewDatas.at(-1).viewNumber; });
         draft.page = page;
         draft.commonHtml = commonHtml;
         draft.viewEvents = viewEvents;

package/lib/ACM-AXN/ViewTemplate/container.js

@@ -37,6 +37,7 @@ var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
 var i18n_1 = __importDefault(require("../../i18n"));
 var Form_1 = require("../../AWING/Form");
+var Event_1 = __importDefault(require("./TemplateField/Event"));
 function ViewTemplate(_a) {
     var _b = _a.templateDatas, templateDatas = _b === void 0 ? [] : _b, pagePath = _a.pagePath, _c = _a.enablePreview, enablePreview = _c === void 0 ? true : _c, _d = _a.advanceFields, advanceFields = _d === void 0 ? [] : _d, _e = _a.templateLabelName, templateLabelName = _e === void 0 ? "" : _e, _f = _a.domainId, domainId = _f === void 0 ? "" : _f, _g = _a.validStatus, validStatus = _g === void 0 ? true : _g, _h = _a.scriptAutoField, scriptAutoField = _h === void 0 ? "" : _h, _j = _a.scriptValidate, scriptValidate = _j === void 0 ? "" : _j, configs = _a.configs, onChange = _a.onChange, _k = _a.onChangeViewValid, onChangeViewValid = _k === void 0 ? function (status) {
         console.log(status);
@@ -88,7 +89,7 @@ function ViewTemplate(_a) {
     return ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 4, children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, xs: enablePreview ? 8 : 12, children: [templateLabelName && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", style: {
                             fontWeight: "bold",
                             textTransform: "uppercase",
-                        }, children: templateLabelName })), fields && renderFields(fields, false), fields && advanceFields.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { id: "advance-option", style: {
+                        }, children: templateLabelName })), fields && renderFields(fields, false), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { id: "advance-option", style: {
                                     display: "flex",
                                     flexDirection: "row",
                                     justifyContent: "space-between",
@@ -96,7 +97,7 @@ function ViewTemplate(_a) {
                                     cursor: "pointer",
                                 }, onClick: function () {
                                     setAdvanceOptionExpand(!advanceOptionExpand);
-                                }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { style: { fontWeight: "bold" }, children: t("ViewTemplate.AdvanceOption") }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: advanceOptionExpand ? ((0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {})) : ((0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {})) })] }), advanceOptionExpand && ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, children: renderFields(fields, true) }))] }))] }), enablePreview && ((0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, xs: 4, children: [(0, jsx_runtime_1.jsx)(Preview_1.default, { domainId: domainId || "", validStatus: validStatus, configs: CONFIGS, pagePath: pagePath, templateDatas: templateDatas }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: t("ViewTemplate.PreviewLoadingNote") })] }))] }));
+                                }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { style: { fontWeight: "bold" }, children: t("ViewTemplate.AdvanceOption") }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: advanceOptionExpand ? ((0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {})) : ((0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {})) })] }), advanceOptionExpand && ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, children: [fields && advanceFields.length > 0 && renderFields(fields, true), (0, jsx_runtime_1.jsx)(Event_1.default, __assign({}, props))] }))] })] }), enablePreview && ((0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, xs: 4, children: [(0, jsx_runtime_1.jsx)(Preview_1.default, { domainId: domainId || "", validStatus: validStatus, configs: CONFIGS, pagePath: pagePath, templateDatas: templateDatas }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: t("ViewTemplate.PreviewLoadingNote") })] }))] }));
 }
 exports.default = ViewTemplate;
 var getChilds = function (fields, fieldInfo) {

package/lib/ACM-AXN/ViewTemplate/interface.d.ts

@@ -49,7 +49,7 @@ export interface FieldProps {
     onNotifyError: (errorMessage: string) => void;
     onUploadFile: (files: any[]) => Promise<string>;
 }
-export interface ViewTemplateProps extends Partial<EventsProps> {
+export interface ViewTemplateProps extends EventsProps {
     templateDatas: FieldInfo[];
     /**
      * Đường dẫn tuyệt đối các file của page

package/lib/AWING/DataForm/DataInput.js

@@ -46,7 +46,7 @@ function DataInput(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var t = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18n_1.default }).t;
     var fieldDefinition = props.fieldDefinition, onChange = props.onChange, value = props.value, error = props.error, disableHelperText = props.disableHelperText;
-    var fieldName = fieldDefinition.fieldName, type = fieldDefinition.type, onValidate = fieldDefinition.onValidate, min = fieldDefinition.min, max = fieldDefinition.max, other = __rest(fieldDefinition, ["fieldName", "type", "onValidate", "min", "max"]);
+    var fieldName = fieldDefinition.fieldName, type = fieldDefinition.type, onValidate = fieldDefinition.onValidate, min = fieldDefinition.min, max = fieldDefinition.max, pattern = fieldDefinition.pattern, other = __rest(fieldDefinition, ["fieldName", "type", "onValidate", "min", "max", "pattern"]);
     var _k = react_2.default.useState(t('Common.InvalidData')), errorText = _k[0], setErrorText = _k[1];
     var checkValidationValue = function (fieldDefinition, val) {
         if (!fieldDefinition.required &&

package/lib/AWING/DataGrid/index.js

@@ -74,9 +74,11 @@ var SpanSortIndex = (0, styles_1.styled)('span')({
 });
 var DataGrid = function (props) {
     var columns = props.columns, rows = props.rows, _a = props.hideHeader, hideHeader = _a === void 0 ? false : _a, spanningRows = props.spanningRows, _b = props.spanningRowsPosition, spanningRowsPosition = _b === void 0 ? 'bottom' : _b, getRowId = props.getRowId, onRowClick = props.onRowClick, rowActions = props.rowActions, sortModel = props.sortModel, onSortModelChange = props.onSortModelChange, selected = props.selected, onSelectedChange = props.onSelectedChange, selectionActions = props.selectionActions, _c = props.pageIndex, pageIndex = _c === void 0 ? constants_1.PAGE_INDEX_DEFAULT : _c, _d = props.pageSize, pageSize = _d === void 0 ? constants_1.PAGE_SIZE_DEFAULT : _d, _e = props.totalOfRows, totalOfRows = _e === void 0 ? rows.length : _e, _f = props.rowsPerPageOptions, rowsPerPageOptions = _f === void 0 ? [10, 20, 30] : _f, onPageIndexChange = props.onPageIndexChange, onPageSizeChange = props.onPageSizeChange;
+    var _g = react_1.default.useState(), forceUpdate = _g[1];
     react_1.default.useEffect(function () {
         var language = localStorage.getItem('i18nextLng');
         i18n_1.default.changeLanguage(language || 'vi');
+        forceUpdate({});
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [localStorage.getItem('i18nextLng')]);
     var createSortHandler = function (fieldName) { return function (event) {

package/lib/translate/en/translation.json

@@ -1,5 +1,6 @@
 {
     "Common": {
+        "NotNegative": "Not negative value!",
         "Existed": "{0} is already existed!",
         "lg": "en",
         "InvalidData": "Invalid data",
@@ -482,7 +483,13 @@
             "CampaignName": "Campaign Name"
         },
         "CantBeDelete": "Can not delete this campaign",
-        "Attributes": "Attributes"
+        "Attributes": "Attributes",
+        "BillingUnit": {
+            "Title": "Billing unit",
+            "View": "Impression",
+            "Authentication": "Engagement / Spot",
+            "Click": "Click"
+        }
     },
     "DirectoryManagement": {
         "DirectoryName": "Directory Name",

package/lib/translate/vi/translation.json

@@ -1,5 +1,6 @@
 {
     "Common": {
+        "NotNegative": "Không được nhập số âm!",
         "Existed": "{0} đã tồn tại!",
         "lg": "vn",
         "InvalidData": "Dữ liệu không hợp lệ",
@@ -464,7 +465,13 @@
             "CampaignName": "Tên chiến dịch"
         },
         "CantBeDelete": "Không thể xoá chiến dịch này",
-        "Attributes": "Thuộc tính"
+        "Attributes": "Thuộc tính",
+        "BillingUnit": {
+            "Title": "Đơn vị",
+            "View": "Impression",
+            "Authentication": "Engagement / Spot",
+            "Click": "Click"
+        }
     },
     "TemplateManagement": {
         "Create": "Tạo mới template",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "awing-library",
-  "version": "2.1.107-beta",
+  "version": "2.1.109-beta",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",