awing-library 2.1.2-dev.99 → 2.1.2-stable.2

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AddOrEditRule/EditExpression.d.ts

@@ -0,0 +1,9 @@
+import { CampaignAdAdvanced } from '../../../Types';
+interface Props {
+    campaignAdAdvanced: CampaignAdAdvanced;
+    onChange: (ruleLogicalExpression: string) => void;
+    onClose: () => void;
+    open: boolean;
+}
+declare const EditExpression: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default EditExpression;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AddOrEditRule/EditExpression.js

@@ -0,0 +1,127 @@
+"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 = __importDefault(require("react"));
+var material_1 = require("@mui/material");
+var icons_material_1 = require("@mui/icons-material");
+var react_i18next_1 = require("react-i18next");
+var Context_1 = require("../../../../../Context");
+var i18n_1 = __importDefault(require("../../../../../i18n"));
+var classes = {
+    root: {
+        width: '50vw',
+        padding: function (theme) { return theme.spacing(3); },
+        backgroundColor: '#fafafa',
+        height: '100%',
+    },
+    title: {
+        flexGrow: 1,
+    },
+    paper: {
+        padding: function (theme) { return theme.spacing(2); },
+        border: '1px solid #e0e0e0',
+    },
+    expressionInput: {
+        width: '80%',
+    },
+    defaultButton: {
+        margin: function (theme) { return theme.spacing(1); },
+        marginTop: function (theme) { return theme.spacing(1.5); },
+    },
+};
+var EditExpression = function (props) {
+    var campaignAdAdvanced = props.campaignAdAdvanced, onChange = props.onChange, onClose = props.onClose, open = props.open;
+    var ruleLogicalExpression = campaignAdAdvanced.ruleLogicalExpression, rules = campaignAdAdvanced.rules;
+    var t = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18n_1.default }).t;
+    // const dialogHelper = useDialogHelper()
+    var confirm = (0, Context_1.useAwing)().appHelper.confirm;
+    var _a = react_1.default.useState(false), isVerified = _a[0], setIsVerified = _a[1];
+    var _b = react_1.default.useState(ruleLogicalExpression), currentExpr = _b[0], setCurrentExpr = _b[1];
+    var ruleNames = rules.map(function (x) { return x.name; });
+    var closeDrawer = function (isConfirm) {
+        if (isConfirm) {
+            confirm(function () {
+                onClose();
+            }, undefined, t('Common.UnsavedChangesMessage'));
+        }
+        else {
+            onClose();
+        }
+    };
+    var setDefault = function () {
+        setCurrentExpr(ruleNames.join('&'));
+    };
+    var translationText = {
+        ruleLogicalExpression: t('Campaign.RuleLogicalExpression'),
+        default: t('Campaign.Default'),
+        save: t('Common.Save'),
+        invalidData: t('Common.InvalidData'),
+        helperText: t('Campaign.LogicExpressionNotValid'),
+    };
+    var verifyExpr = function (expr) {
+        if (expr.length > 50)
+            return false;
+        var exprNoWhiteSpace = expr.replace(/\s/g, '');
+        var operatorList = ['&', '|'];
+        var isOperand = true; //den luot toan hang
+        var parenthesis = 0; //so luong dau ngoac, tang len khi gap dau mo ngoac, giam di khi gap dau dong ngoac
+        var _loop_1 = function (i) {
+            var token = exprNoWhiteSpace[i];
+            if (isOperand) {
+                //khi den luot toan hang, chi cho phep toan hang va cac ky tu khac nhu ! va (
+                if (token === '!')
+                    return "continue";
+                if (token === '(') {
+                    parenthesis++;
+                    return "continue";
+                }
+                if (ruleNames.some(function (x) { return x === token; }))
+                    isOperand = false;
+                else
+                    return { value: false };
+            } //Khi den luot toan tu, chi cho phep toan tu hoac dau )
+            else {
+                if (token === ')') {
+                    parenthesis--;
+                    if (parenthesis < 0)
+                        return { value: false };
+                    return "continue";
+                }
+                if (operatorList.some(function (x) { return x === token; }))
+                    isOperand = true;
+                else
+                    return { value: false };
+            }
+        };
+        for (var i = 0; i < exprNoWhiteSpace.length; i++) {
+            var state_1 = _loop_1(i);
+            if (typeof state_1 === "object")
+                return state_1.value;
+        }
+        if (parenthesis > 0 || isOperand)
+            return false; //Neu so dau dong va mo ngoac khong bang nhau, bieu thuc sai
+        //kiem tra co rule nao khong duoc su dung khong
+        for (var i = 0; i < ruleNames.length; i++) {
+            if (exprNoWhiteSpace.indexOf(ruleNames[i]) === -1)
+                return false;
+        }
+        return true;
+    };
+    var hanldeSaveChange = function () {
+        if (verifyExpr(currentExpr)) {
+            onChange(currentExpr);
+            closeDrawer();
+        }
+        else {
+            setIsVerified(true);
+            alert(translationText.invalidData);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Drawer, { onClose: function () { return closeDrawer(); }, anchor: 'right', open: open, children: [(0, jsx_runtime_1.jsx)(material_1.AppBar, { position: "sticky", color: "inherit", children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { edge: "start", "aria-label": "close", onClick: function () { return closeDrawer(); }, children: (0, jsx_runtime_1.jsx)(icons_material_1.Close, {}) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: classes.title, children: translationText.ruleLogicalExpression }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", onClick: hanldeSaveChange, children: translationText.save })] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, sx: classes.root, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { sx: classes.paper, children: (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, justifyContent: "space-around", children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { id: "expression", name: "expression", variant: "standard", label: translationText.ruleLogicalExpression, onChange: function (e) { return setCurrentExpr(e.target.value); }, value: currentExpr, sx: classes.expressionInput, error: isVerified && !verifyExpr(currentExpr), helperText: isVerified && !verifyExpr(currentExpr)
+                                        ? translationText.helperText
+                                        : '' }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", color: "primary", onClick: function () { return setDefault(); }, sx: classes.defaultButton, children: translationText.default })] }) }) }) })] }));
+};
+exports.default = EditExpression;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AddOrEditRule/EditExpression.test.d.ts

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

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

@@ -0,0 +1,106 @@
+"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 Enum_1 = require("../../../../../ACM-AXN/Campaign/Enum");
+var EditExpression_1 = __importDefault(require("./EditExpression"));
+var campaignAdAdvanced = {
+    ruleLogicalExpression: 'a&b',
+    rules: [
+        { name: 'a', type: 0, operator: Enum_1.Operator.Equality, parameter: "", value: "" },
+        { name: 'b', type: 0, operator: Enum_1.Operator.Equality, parameter: "", value: "" }
+    ],
+};
+describe('AddRuleContainer', function () {
+    var mockChange = jest.fn();
+    var shallow;
+    var mount;
+    beforeEach(function () {
+        // shallow = createShallow();
+    });
+    beforeAll(function () {
+        // mount = createMount();
+    });
+    afterEach(function () {
+        jest.resetAllMocks();
+    });
+    it('should render without error', function () {
+        var wrapper = shallow((0, jsx_runtime_1.jsx)(EditExpression_1.default, { campaignAdAdvanced: campaignAdAdvanced, onChange: mockChange, onClose: function () {
+                throw new Error('Function not implemented.');
+            }, open: false }));
+        expect(wrapper.exists()).toBeTruthy();
+    });
+    it('should set the correct initial input value', function () {
+        var wrapper = shallow((0, jsx_runtime_1.jsx)(EditExpression_1.default, { campaignAdAdvanced: campaignAdAdvanced, onChange: mockChange, onClose: function () {
+                throw new Error('Function not implemented.');
+            }, open: false }));
+        var input = wrapper.find('#expression');
+        expect(input.props().value).toEqual('a&b');
+    });
+    it('should call onChange when handleSaveChange is called with a valid expression', function () {
+        var wrapper = mount((0, jsx_runtime_1.jsx)(EditExpression_1.default, { campaignAdAdvanced: campaignAdAdvanced, onChange: mockChange, onClose: function () {
+                throw new Error('Function not implemented.');
+            }, open: false }));
+        var buttonSave = wrapper.find('button').at(1);
+        buttonSave.simulate('click');
+        expect(mockChange).toHaveBeenCalledWith('a&b');
+    });
+    it('click  close, not call onChange', function () {
+        var wrapper = mount((0, jsx_runtime_1.jsx)(EditExpression_1.default, { campaignAdAdvanced: campaignAdAdvanced, onChange: mockChange, onClose: function () {
+                throw new Error('Function not implemented.');
+            }, open: false }));
+        var buttonClose = wrapper.find('button').at(0);
+        buttonClose.simulate('click');
+        expect(mockChange).not.toHaveBeenCalled();
+    });
+    it('click save default', function () {
+        var campaignAdAdvanced1 = __assign(__assign({}, campaignAdAdvanced), { ruleLogicalExpression: 'a|b' });
+        var wrapper = mount((0, jsx_runtime_1.jsx)(EditExpression_1.default, { campaignAdAdvanced: campaignAdAdvanced1, onChange: mockChange, onClose: function () {
+                throw new Error('Function not implemented.');
+            }, open: false }));
+        var buttonSaveDefault = wrapper.find('button').at(2);
+        buttonSaveDefault.simulate('click');
+        expect(wrapper.find('input').props().value).toEqual('a&b');
+    });
+    it('Rule expression contain (', function () {
+        var campaignAdAdvanced1 = {
+            ruleLogicalExpression: 'a&(b|c)',
+            rules: [{ name: 'a', type: 0, operator: Enum_1.Operator.Equality, parameter: "", value: "" },
+                { name: 'b', type: 0, operator: Enum_1.Operator.Equality, parameter: "", value: "" },
+                { name: 'c', type: 0, operator: Enum_1.Operator.Equality, parameter: "", value: "" }],
+        };
+        var wrapper = mount((0, jsx_runtime_1.jsx)(EditExpression_1.default, { campaignAdAdvanced: campaignAdAdvanced1, onChange: mockChange, onClose: function () {
+                throw new Error('Function not implemented.');
+            }, open: false }));
+        var buttonSaveDefault = wrapper.find('button').at(1);
+        buttonSaveDefault.simulate('click');
+        expect(mockChange).toHaveBeenCalledWith('a&(b|c)');
+    });
+    it('ruleLogicalExpression length > 50', function () {
+        var campaignAdAdvanced2 = {
+            ruleLogicalExpression: 'a&(b|c)&a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)a&(b|c)',
+            rules: [{ name: 'a', type: 0, operator: Enum_1.Operator.Equality, parameter: "", value: "" },
+                { name: 'b', type: 0, operator: Enum_1.Operator.Equality, parameter: "", value: "" },
+                { name: 'c', type: 0, operator: Enum_1.Operator.Equality, parameter: "", value: "" }],
+        };
+        var wrapper = mount((0, jsx_runtime_1.jsx)(EditExpression_1.default, { campaignAdAdvanced: campaignAdAdvanced2, onChange: mockChange, onClose: function () {
+                throw new Error('Function not implemented.');
+            }, open: false }));
+        var buttonClose = wrapper.find('button').at(1);
+        buttonClose.simulate('click');
+        expect(mockChange).not.toHaveBeenCalled();
+    });
+});

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AddOrEditRule/RuleForm/Authentication.d.ts

@@ -0,0 +1,8 @@
+import { AdvancedRule } from '../AddOrEditRule';
+interface Props {
+    rule: AdvancedRule;
+    valids: any;
+    onChange: (rule: AdvancedRule) => void;
+}
+declare const LimitAuthencation: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default LimitAuthencation;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AddOrEditRule/RuleForm/Authentication.js

@@ -0,0 +1,47 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_i18next_1 = require("react-i18next");
+var Enum_1 = require("../../../../Enum");
+var LimitAuthencation = function (props) {
+    var rule = props.rule, valids = props.valids, onChange = props.onChange;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var handleChange = function (fieldName, fieldValue) {
+        var _a;
+        onChange(__assign(__assign({}, rule), (_a = {}, _a[fieldName] = fieldValue, _a)));
+    };
+    var handleChangeParameter = function (fieldName, fieldValue) {
+        var _a;
+        handleChange('parameter', __assign(__assign({}, rule.parameter), (_a = {}, _a[fieldName] = fieldValue, _a)));
+    };
+    var translationText = {
+        operator: t('Campaign.Operator'),
+        period: t('Campaign.Period'),
+        value: t('Campaign.Detail.Value'),
+        periodHelperText: t('Campaign.PeriodHelperText'),
+        helperText: t('Common.Required'),
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: 'operator', variant: "standard", name: 'operator', select: true, fullWidth: true, label: translationText.operator, value: rule.operator, onChange: function (e) { return handleChange('operator', e.target.value); }, children: Object.entries(Enum_1.EnumOperator).map(function (_a) {
+                        var key = _a[0], val = _a[1];
+                        return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: val.id, children: val.text }, val.id));
+                    }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "value", name: "value", variant: "standard", type: "number", fullWidth: true, label: translationText.value, value: rule.value, onChange: function (e) { return handleChange('value', e.target.value); }, error: valids && !valids.value, helperText: valids && !valids.value
+                        ? translationText.helperText
+                        : '' }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "period", variant: "standard", name: "period", type: "number", fullWidth: true, label: translationText.period, value: rule.parameter.period, onChange: function (e) {
+                        return handleChangeParameter('period', e.target.value);
+                    }, error: valids && !valids.period, helperText: valids && !valids.period
+                        ? translationText.helperText
+                        : translationText.periodHelperText }) })] }));
+};
+exports.default = LimitAuthencation;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AddOrEditRule/RuleForm/LimitClick.d.ts

@@ -0,0 +1,8 @@
+import { AdvancedRule } from '../AddOrEditRule';
+interface Props {
+    rule: AdvancedRule;
+    valids: any;
+    onChange: (rule: AdvancedRule) => void;
+}
+declare const LimitClick: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default LimitClick;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AddOrEditRule/RuleForm/LimitClick.js

@@ -0,0 +1,47 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_i18next_1 = require("react-i18next");
+var Enum_1 = require("../../../../Enum");
+var LimitClick = function (props) {
+    var rule = props.rule, valids = props.valids, onChange = props.onChange;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var handleChange = function (fieldName, fieldValue) {
+        var _a;
+        onChange(__assign(__assign({}, rule), (_a = {}, _a[fieldName] = fieldValue, _a)));
+    };
+    var handleChangeParameter = function (fieldName, fieldValue) {
+        var _a;
+        handleChange('parameter', __assign(__assign({}, rule.parameter), (_a = {}, _a[fieldName] = fieldValue, _a)));
+    };
+    var translationText = {
+        operator: t('Campaign.Operator'),
+        period: t('Campaign.Period'),
+        value: t('Campaign.Detail.Value'),
+        periodHelperText: t('Campaign.PeriodHelperText'),
+        helperText: t('Common.Required'),
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: 'operator', variant: "standard", name: 'operator', select: true, fullWidth: true, label: translationText.operator, value: rule.operator, onChange: function (e) { return handleChange('operator', e.target.value); }, children: Object.entries(Enum_1.EnumOperator).map(function (_a) {
+                        var key = _a[0], val = _a[1];
+                        return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: val.id, children: val.text }, val.id));
+                    }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "value", name: "value", variant: "standard", type: "number", fullWidth: true, label: translationText.value, value: rule.value, onChange: function (e) { return handleChange('value', e.target.value); }, error: valids && !valids.value, helperText: valids && !valids.value
+                        ? translationText.helperText
+                        : '' }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "period", variant: "standard", name: "period", type: "number", fullWidth: true, label: translationText.period, value: rule.parameter.period, onChange: function (e) {
+                        return handleChangeParameter('period', e.target.value);
+                    }, error: valids && !valids.period, helperText: valids && !valids.period
+                        ? translationText.helperText
+                        : translationText.periodHelperText }) })] }));
+};
+exports.default = LimitClick;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AddOrEditRule/RuleForm/LimitClick.test.d.ts

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

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AddOrEditRule/RuleForm/LimitClick.test.js

@@ -0,0 +1,118 @@
+"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 LimitClick_1 = __importDefault(require("./LimitClick"));
+var Utils_1 = require("../../../../Utils");
+var material_1 = require("@mui/material");
+var Enum_1 = require("../../../../Enum");
+describe('LimitClick', function () {
+    var mockOnChange = jest.fn();
+    var shallow;
+    beforeAll(function () {
+        // shallow = createShallow();
+    });
+    afterEach(function () {
+        jest.resetAllMocks();
+    });
+    var valids = {
+        operator: true,
+        period: true,
+        value: true,
+    };
+    var rule = {
+        name: "name1", parameter: {}, value: [], type: Utils_1.RuleType.LimitClick, operator: Enum_1.Operator.Equality
+    };
+    it('should render without errors', function () {
+        var wrapper = shallow((0, jsx_runtime_1.jsx)(LimitClick_1.default, { rule: rule, valids: [], onChange: mockOnChange }));
+        expect(wrapper.exists()).toBe(true);
+    });
+    it('should render the operator select field with expected options', function () {
+        var wrapper = shallow((0, jsx_runtime_1.jsx)(LimitClick_1.default, { rule: rule, valids: [], onChange: mockOnChange }));
+        var operatorSelect = wrapper.find('#operator');
+        expect(operatorSelect.length).toEqual(1);
+        expect(operatorSelect.find(material_1.MenuItem)).toHaveLength(Object.keys(Enum_1.EnumOperator).length);
+    });
+    it('should render the value text field', function () {
+        var wrapper = shallow((0, jsx_runtime_1.jsx)(LimitClick_1.default, { rule: rule, valids: [], onChange: mockOnChange }));
+        var valueTextField = wrapper.find('#value');
+        expect(valueTextField.length).toEqual(1);
+    });
+    it('should render the period text field', function () {
+        var wrapper = shallow((0, jsx_runtime_1.jsx)(LimitClick_1.default, { rule: rule, valids: [], onChange: mockOnChange }));
+        var periodTextField = wrapper.find('#period');
+        expect(periodTextField.length).toEqual(1);
+    });
+    it('call handleOnChange khi operator thay đổi', function () {
+        var wrapper = shallow((0, jsx_runtime_1.jsx)(LimitClick_1.default, { rule: rule, valids: [], onChange: mockOnChange }));
+        var operatorSelect = wrapper.find('#operator');
+        operatorSelect.simulate('change', { target: { value: 'EQUALS' } });
+        expect(mockOnChange).toHaveBeenCalledWith({
+            name: "name1",
+            type: 1,
+            value: [],
+            operator: 'EQUALS',
+            parameter: {}
+        });
+    });
+    it('should call handleOnChange with correct args when value text field is changed', function () {
+        var wrapper = shallow((0, jsx_runtime_1.jsx)(LimitClick_1.default, { rule: rule, valids: [], onChange: mockOnChange }));
+        var valueTextField = wrapper.find('#value');
+        valueTextField.simulate('change', { target: { value: '10' } });
+        expect(mockOnChange).toHaveBeenCalledWith({
+            name: "name1",
+            type: 1,
+            operator: 0,
+            value: '10', parameter: {}
+        });
+    });
+    it('should call handleOnChange with correct args when period text field is changed', function () {
+        var wrapper = shallow((0, jsx_runtime_1.jsx)(LimitClick_1.default, { rule: rule, valids: [], onChange: mockOnChange }));
+        var periodTextField = wrapper.find('#period');
+        periodTextField.simulate('change', { target: { value: '5' } });
+        expect(mockOnChange).toHaveBeenCalledWith({
+            name: "name1",
+            type: 1,
+            value: [],
+            operator: 0,
+            parameter: { period: '5' }
+        });
+    });
+    it('should show error message when valids prop is false for value field', function () {
+        var wrapper = shallow((0, jsx_runtime_1.jsx)(LimitClick_1.default, { rule: rule, valids: __assign(__assign({}, valids), { value: false }), onChange: mockOnChange }));
+        var valueTextField = wrapper.find('#value');
+        expect(valueTextField.prop('error')).toBe(true);
+        expect(valueTextField.prop('helperText')).not.toBe('');
+    });
+    it('should not show error message when valids prop is true for value field', function () {
+        var wrapper = shallow((0, jsx_runtime_1.jsx)(LimitClick_1.default, { rule: rule, valids: __assign(__assign({}, valids), { value: true }), onChange: mockOnChange }));
+        var valueTextField = wrapper.find('#value');
+        expect(valueTextField.prop('error')).toBe(false);
+        expect(valueTextField.prop('helperText')).toBe('');
+    });
+    it('should show error message when valids prop is false for period field', function () {
+        var wrapper = shallow((0, jsx_runtime_1.jsx)(LimitClick_1.default, { rule: rule, valids: __assign(__assign({}, valids), { period: false }), onChange: mockOnChange }));
+        var periodTextField = wrapper.find('#period');
+        expect(periodTextField.prop('error')).toBe(true);
+        expect(periodTextField.prop('helperText')).not.toBe('');
+    });
+    it('should not show error message when valids prop is true for period field', function () {
+        var wrapper = shallow((0, jsx_runtime_1.jsx)(LimitClick_1.default, { rule: rule, valids: __assign(__assign({}, valids), { period: true }), onChange: mockOnChange }));
+        var periodTextField = wrapper.find('#period');
+        expect(periodTextField.prop('error')).toBe(false);
+        expect(periodTextField.prop('helperText')).toBe('Campaign.PeriodHelperText');
+    });
+});

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AddOrEditRule/RuleForm/LimitEvent.d.ts

@@ -0,0 +1,8 @@
+import { AdvancedRule } from '../AddOrEditRule';
+export interface Props {
+    rule: AdvancedRule;
+    valids: any;
+    onChange: (rule: AdvancedRule) => void;
+}
+declare const LimitEvent: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default LimitEvent;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AddOrEditRule/RuleForm/LimitEvent.js

@@ -0,0 +1,97 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var Hooks_1 = __importDefault(require("../../../../../../ACM-AXN/Campaign/Hooks"));
+var AWING_1 = require("../../../../../../AWING");
+var Hooks_2 = require("../../../../../../AWING/Hooks");
+var lodash_1 = __importDefault(require("lodash"));
+var react_1 = __importDefault(require("react"));
+var react_i18next_1 = require("react-i18next");
+var recoil_1 = require("recoil");
+var Enum_1 = require("../../../../Enum");
+var atoms_1 = require("../../atoms");
+var LimitEvent = function (props) {
+    var _a, _b, _c, _d, _e, _f;
+    var rule = props.rule, valids = props.valids, onChange = props.onChange;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var loginPageIds = (0, recoil_1.useRecoilValue)(atoms_1.campaignLoginIdState);
+    var service = (0, Hooks_1.default)().service;
+    var handleChange = function (fieldName, fieldValue) {
+        var _a;
+        onChange(__assign(__assign({}, rule), (_a = {}, _a[fieldName] = fieldValue, _a)));
+    };
+    var _g = (0, Hooks_2.useGetData)([loginPageIds], service.pagesGetPageViewEventByPageIds), data = _g.data, isLoading = _g.isLoading;
+    var eventSelected = react_1.default.useMemo(function () {
+        return (0, lodash_1.default)(data)
+            .groupBy(function (d) { return "".concat(d.viewNumber, "_").concat(d.event); })
+            .filter(function (value) {
+            return !lodash_1.default.difference(loginPageIds, value.map(function (v) { return v.pageId; })).length;
+        }).flatten()
+            .uniqBy(function (d) { return "".concat(d.viewNumber, "_").concat(d.event); })
+            .groupBy('event')
+            .value();
+    }, [data, loginPageIds]);
+    var viewNumberSelected = react_1.default.useMemo(function () {
+        var _a, _b, _c;
+        return ((_a = rule === null || rule === void 0 ? void 0 : rule.parameter) === null || _a === void 0 ? void 0 : _a.eventLabel)
+            ? (_c = eventSelected[(_b = rule === null || rule === void 0 ? void 0 : rule.parameter) === null || _b === void 0 ? void 0 : _b.eventLabel]) === null || _c === void 0 ? void 0 : _c.sort(function (a, b) { return a.viewNumber - b.viewNumber; })
+            : [];
+    }, [eventSelected, (_a = rule === null || rule === void 0 ? void 0 : rule.parameter) === null || _a === void 0 ? void 0 : _a.eventLabel]);
+    var handleChangeParameter = function (fieldName, fieldValue) {
+        var _a, _b;
+        var _c, _d;
+        if (fieldName === 'eventLabel') {
+            var viewNumber = undefined;
+            if (((_c = eventSelected[fieldValue]) === null || _c === void 0 ? void 0 : _c.length) === 1) {
+                viewNumber = (_d = eventSelected[fieldValue]) === null || _d === void 0 ? void 0 : _d.at(-1).viewNumber;
+            }
+            handleChange('parameter', __assign(__assign({}, rule.parameter), (_a = { viewNumber: viewNumber }, _a[fieldName] = fieldValue, _a)));
+            return;
+        }
+        handleChange('parameter', __assign(__assign({}, rule.parameter), (_b = {}, _b[fieldName] = fieldValue, _b)));
+    };
+    var translationText = {
+        eventLabel: t('Campaign.Detail.EventLabel'),
+        viewNumber: t('Campaign.Detail.ViewNumber'),
+        operator: t('Campaign.Operator'),
+        period: t('Campaign.Period'),
+        value: t('Campaign.Detail.Value'),
+        periodHelperText: t('Campaign.PeriodHelperText'),
+        helperText: t('Common.Required'),
+    };
+    return isLoading ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "eventLabel", name: "eventLabel", variant: "standard", fullWidth: true, select: true, label: translationText.eventLabel, value: (_b = rule === null || rule === void 0 ? void 0 : rule.parameter) === null || _b === void 0 ? void 0 : _b.eventLabel, onChange: function (e) {
+                        return handleChangeParameter('eventLabel', e.target.value);
+                    }, error: valids && !valids.eventLabel, helperText: valids && !valids.eventLabel
+                        ? translationText.helperText
+                        : '', children: Object.keys(eventSelected).map(function (event, index) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: event, children: event }, index)); }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "viewNumber", name: "viewNumber", variant: "standard", disabled: !((_c = rule === null || rule === void 0 ? void 0 : rule.parameter) === null || _c === void 0 ? void 0 : _c.eventLabel), required: true, select: true, fullWidth: true, label: translationText.viewNumber, value: (_e = (_d = rule === null || rule === void 0 ? void 0 : rule.parameter) === null || _d === void 0 ? void 0 : _d.viewNumber) !== null && _e !== void 0 ? _e : "", onChange: function (e) {
+                        return handleChangeParameter('viewNumber', e.target.value);
+                    }, error: valids && !valids.viewNumber, helperText: valids && !valids.viewNumber
+                        ? translationText.helperText
+                        : '', children: viewNumberSelected.map(function (_a) {
+                        var viewNumber = _a.viewNumber;
+                        return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: viewNumber, children: viewNumber }, viewNumber));
+                    }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: 'operator', variant: "standard", name: 'operator', select: true, fullWidth: true, label: translationText.operator, value: rule === null || rule === void 0 ? void 0 : rule.operator, onChange: function (e) { return handleChange('operator', e.target.value); }, children: Object.entries(Enum_1.EnumOperator).map(function (_a) {
+                        var key = _a[0], val = _a[1];
+                        return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: val.id, children: val.text }, val.id));
+                    }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "value", name: "value", variant: "standard", type: "number", fullWidth: true, label: translationText.value, value: rule === null || rule === void 0 ? void 0 : rule.value, onChange: function (e) { return handleChange('value', e.target.value); }, error: valids && !valids.value, helperText: valids && !valids.value
+                        ? translationText.helperText
+                        : '' }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "standard", id: "period", name: "period", type: "number", fullWidth: true, label: translationText.period, value: (_f = rule === null || rule === void 0 ? void 0 : rule.parameter) === null || _f === void 0 ? void 0 : _f.period, onChange: function (e) {
+                        return handleChangeParameter('period', e.target.value);
+                    }, error: valids && !valids.period, helperText: translationText.periodHelperText }) })] }));
+};
+exports.default = LimitEvent;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/AddOrEditRule/RuleForm/LimitEvent.test.d.ts

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