awing-library 2.1.131-beta → 2.1.131

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

@@ -33,39 +33,37 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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 = __importStar(require("react"));
-var recoil_1 = require("recoil");
 var react_i18next_1 = require("react-i18next");
-// import { CampaignGroup, CampaignTicket } from '../../types'
+var recoil_1 = require("recoil");
+var Enum_1 = require("../../../../ACM-AXN/Campaign/Enum");
+var Enum_2 = require("../../../../ACM-AXN/Common/Enum");
 var lodash_1 = require("lodash");
 var Utils_1 = require("../../Utils");
 var Recoils_1 = require("../Recoils");
-var AWING_1 = require("../../../../AWING");
-var Enum_1 = require("../../../../ACM-AXN/Campaign/Enum");
-var Enum_2 = require("../../../../ACM-AXN/Common/Enum");
+var material_1 = require("@mui/material");
+var Hooks_1 = __importDefault(require("../../../../ACM-AXN/Campaign/Hooks"));
 function SubCampaignDetail(props) {
     var t = (0, react_i18next_1.useTranslation)().t;
     var subCampaign = props.subCampaign, onSubCampaignChange = props.onSubCampaignChange, onChangeSubCampaignStatus = props.onChangeSubCampaignStatus;
+    var service = (0, Hooks_1.default)().service;
     var getFormValid = function () { return ({
         name: (0, Utils_1.nameValid)(subCampaign.name),
         bookingAmount: !(0, Utils_1.checkPriority)(subCampaign.priority, Enum_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 _a = react_1.default.useState(getFormValid), subValid = _a[0], setSubValid = _a[1];
     var isCreate = (0, recoil_1.useRecoilValue)(Recoils_1.isCreateState);
     (0, react_1.useEffect)(function () {
         onSubCampaignChange(function (prev) { return (0, lodash_1.cloneDeep)(prev); });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [subCampaign.id, onSubCampaignChange]);
+    }, [onSubCampaignChange]);
     (0, react_1.useEffect)(function () {
         onChangeSubCampaignStatus(Object.values(getFormValid()).every(Boolean));
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -77,7 +75,8 @@ function SubCampaignDetail(props) {
      */
     var translationText = {
         name: t('Campaign.Name'),
-        ticket: t('Campaign.Ticket'),
+        status: t('Campaign.Ticket'),
+        subCampaignLable: t('Campaign.BillingUnit.subCampaignLable'),
         BillingUnit: t('Campaign.BillingUnit.Title'),
         priority: t('Campaign.Detail.Priority'),
         booking: t('Campaign.BookingText'),
@@ -87,114 +86,67 @@ function SubCampaignDetail(props) {
         helperText: t('Common.Required'),
         notNegative: t('Common.NotNegative'),
     };
-    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: Enum_1.CampaignTicket.ACTIVE,
-                    },
-                    {
-                        text: t('Campaign.InActive'),
-                        value: Enum_1.CampaignTicket.INACTIVE,
-                    },
-                ],
-            },
-            {
-                fieldName: 'priority',
-                type: 'select',
-                gridSize: 4,
-                label: translationText.priority,
-                required: true,
-                options: Object.values(Enum_1.CampaignPriority).map(function (priority) { return ({
-                    text: t("Campaign.".concat(priority)),
-                    value: priority,
-                }); }),
-            },
-        ];
-        if ((0, Utils_1.checkPriority)(subCampaign.priority, Enum_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(Enum_2.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)(Enum_2.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], Enum_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(Enum_1.CampaignPriority)[subCampaign.priority] }), onUpdate: handleUpdate }) }));
+    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) {
+                                onSubCampaignChange(function (pre) { return (__assign(__assign({}, pre), { name: e.target.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.jsx)(material_1.TextField, { id: "status", name: "status", variant: "standard", select: true, required: true, fullWidth: true, label: translationText.status, value: subCampaign.status, onChange: function (e) {
+                                onSubCampaignChange(function (pre) { return (__assign(__assign({}, pre), { status: Number(e.target.value) })); });
+                            }, disabled: isCreate, children: (0, Utils_1.getCampaignStatus)(!Boolean(service.attributesGetByObjectTypeCode)).map(function (item) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: item.value, children: t("Campaign.Status.".concat(item.key)) }, item.key)); }) }) }), (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(Enum_1.CampaignPriority)[subCampaign.priority], onChange: function (e) {
+                                var newPriority = Object.values(Enum_1.CampaignPriority).indexOf(e.target.value);
+                                onSubCampaignChange(function (pre) {
+                                    var newSubCamp = __assign(__assign(__assign(__assign({}, pre), { priority: newPriority }), ((0, Utils_1.checkPriority)(newPriority, Enum_1.CampaignPriority.ClassB)
+                                        ? {
+                                            bookingAmount: 10,
+                                            billingUnit: Enum_2.AnalyticType.Authentication,
+                                            billingUnitLabel: Enum_2.AnalyticType[Enum_2.AnalyticType.Authentication],
+                                        }
+                                        : {
+                                            bookingAmount: 0,
+                                            billingUnit: Enum_2.AnalyticType.Authentication,
+                                            billingUnitLabel: Enum_2.AnalyticType[Enum_2.AnalyticType.Authentication],
+                                        })), { bonusAmount: 0 });
+                                    setSubValid(function (pre) { return (__assign(__assign({}, pre), { bookingAmount: true, bonusAmount: true })); });
+                                    return newSubCamp;
+                                });
+                            }, children: Object.values(Enum_1.CampaignPriority).map(function (priority) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: priority, children: t("Campaign.".concat(priority)) }, priority)); }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, style: { padding: 8, paddingTop: 0 }, children: (0, Utils_1.checkPriority)(subCampaign.priority, Enum_1.CampaignPriority.ClassB) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, 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) {
+                                    onSubCampaignChange(function (pre) { return (__assign(__assign({}, pre), { bookingAmount: Number(e.target.value), bonusAmount: Math.round(Number(e.target.value) * 0.05) })); });
+                                }, onFocus: function (event) { return event.target.select(); }, error: subValid.bookingAmount !== undefined &&
+                                    !subValid.bookingAmount, helperText: subValid.bookingAmount !== undefined &&
+                                    !subValid.bookingAmount
+                                    ? subCampaign.bookingAmount < 0
+                                        ? translationText.notNegative
+                                        : translationText.helperText
+                                    : '' }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, 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);
+                                    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
+                                    ? subCampaign.bonusAmount < 0
+                                        ? translationText.notNegative
+                                        : translationText.helperText
+                                    : '' }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, style: { padding: 8 }, children: Boolean(service.attributesGetByObjectTypeCode) ?
+                                ((0, jsx_runtime_1.jsx)(material_1.TextField, { id: "billingUnit", required: true, select: true, variant: "standard", fullWidth: true, label: translationText.subCampaignLable, value: [Enum_2.AnalyticType[subCampaign.billingUnit], subCampaign.billingUnitLabel || Enum_2.AnalyticType[Enum_2.AnalyticType.Authentication]].join(">"), onChange: function (e) {
+                                        var _a = e.target.value.split(">"), billingUnit = _a[0], billingUnitLabel = _a[1];
+                                        onSubCampaignChange(function (pre) { return (__assign(__assign({}, pre), { billingUnit: Enum_2.AnalyticType[billingUnit], billingUnitLabel: billingUnitLabel })); });
+                                    }, error: !!subValid.billingUnit && !subValid.billingUnit, helperText: !!subValid.billingUnit && !subValid.billingUnit
+                                        ? translationText.helperText
+                                        : '', children: Enum_2.MarkAnalyticTypes
+                                        .map(function (type) {
+                                        var value = [Enum_2.AnalyticType[type.billingUnit], type.billingUnitLabel].join(">");
+                                        return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: value, children: t("Campaign.BillingUnit.".concat(value)) }, value));
+                                    }) })) :
+                                ((0, jsx_runtime_1.jsx)(material_1.TextField, { id: "billingUnit", required: true, select: true, variant: "standard", fullWidth: true, label: translationText.BillingUnit, value: String(subCampaign.billingUnit), onChange: function (e) {
+                                        onSubCampaignChange(function (pre) { return (__assign(__assign({}, pre), { billingUnit: Number(e.target.value) })); });
+                                    }, error: !!subValid.billingUnit && !subValid.billingUnit, helperText: !!subValid.billingUnit && !subValid.billingUnit
+                                        ? translationText.helperText
+                                        : '', children: Object.values(Enum_2.AnalyticType)
+                                        .filter(function (item) { return !isNaN(Number(item)); })
+                                        .filter(function (item) { return item !== Enum_2.AnalyticType.AuthenticationSuccess; })
+                                        .filter(Boolean)
+                                        .map(function (type) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: type, children: t("Campaign.BillingUnit.".concat((0, lodash_1.capitalize)((0, lodash_1.camelCase)(Enum_2.AnalyticType[type])))) }, type)); }) })) })] })) })] }));
 }
 exports.default = SubCampaignDetail;

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

@@ -23,9 +23,8 @@ var subCampaignMock = {
     name: 'Test Campaign',
     bookingAmount: 100000,
     bonusAmount: 500000,
-    ticket: Enum_1.CampaignTicket.INACTIVE,
+    status: Enum_1.CampaignStatus.Draft,
     priority: Enum_1.CampaignPriority.ClassB,
-    isReserved: false,
     billingUnit: 1,
 };
 describe('<SubCampaignDetail />', function () {
@@ -36,19 +35,15 @@ describe('<SubCampaignDetail />', function () {
         expect(react_1.screen.getByLabelText(/^Campaign.Detail.Priority.*$/).textContent).toBe('Campaign.PriorityB');
         expect(react_1.screen.getByLabelText(/^Campaign.BookingText.*$/).value).toBe(subCampaignMock.bookingAmount.toString());
         expect(react_1.screen.getByLabelText(/^Campaign.BonusText.*$/).value).toBe(subCampaignMock.bonusAmount.toString());
-        expect(
-        // eslint-disable-next-line testing-library/no-container
-        container.querySelector('input[name="isReserved"]').checked).toBe(subCampaignMock.isReserved);
     });
     it('should render with correct information classA', function () {
-        var subCampaign = __assign(__assign({}, subCampaignMock), { priority: Enum_1.CampaignPriority.ClassA, ticket: Enum_1.CampaignTicket.ACTIVE, isReserved: true });
+        var subCampaign = __assign(__assign({}, subCampaignMock), { priority: Enum_1.CampaignPriority.ClassA, status: Enum_1.CampaignStatus.Active });
         var _a = (0, react_1.render)((0, jsx_runtime_1.jsx)(SubCampaignDetail_1.default, { subCampaign: subCampaign, onSubCampaignChange: function () { }, onChangeSubCampaignStatus: function () { } })), container = _a.container, getByLabelText = _a.getByLabelText, queryByLabelText = _a.queryByLabelText;
         expect(react_1.screen.getByLabelText(/^Campaign.Name.*$/).value).toBe(subCampaign.name);
         expect(react_1.screen.getByLabelText(/^Campaign.Ticket.*$/).textContent).toBe('Campaign.Active');
         expect(react_1.screen.getByLabelText(/^Campaign.Detail.Priority.*$/).textContent).toBe('Campaign.PriorityA');
         expect(react_1.screen.queryByLabelText(/^Campaign.BookingText.*$/)).toBeNull();
         expect(react_1.screen.queryByLabelText(/^Campaign.BonusText.*$/)).toBeNull();
-        expect(container.querySelector('input[name="isReserved"]').checked).toBe(subCampaign.isReserved);
     });
     it('should update sub campaign', function () {
         var state = __assign({}, subCampaignMock);
@@ -71,16 +66,11 @@ describe('<SubCampaignDetail />', function () {
         react_1.fireEvent.change(bonusInput, { target: { valueAsNumber: 837483 } });
         expect(onSubCampaignChange).toHaveBeenCalledTimes(3);
         expect(state.bonusAmount).toBe(837483);
-        var isReservedCheckbox = container.querySelector('input[name="isReserved"]');
-        expect(isReservedCheckbox).not.toBeNull();
-        react_1.fireEvent.click(isReservedCheckbox);
-        expect(onSubCampaignChange).toHaveBeenCalledTimes(4);
-        expect(state.isReserved).toBe(true);
         var selectParam = react_1.screen.getAllByRole('button');
         react_1.fireEvent.mouseDown(selectParam[0]);
         react_1.screen.getAllByRole('option')[0].click();
         expect(onSubCampaignChange).toHaveBeenCalledTimes(5);
-        expect(state.ticket).toBe(Enum_1.CampaignTicket.ACTIVE);
+        expect(state.status).toBe(Enum_1.CampaignStatus.Active);
         react_1.fireEvent.mouseDown(selectParam[1]);
         react_1.screen.getAllByRole('option')[2].click();
         expect(onSubCampaignChange).toHaveBeenCalledTimes(6);

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

@@ -15,22 +15,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubCampaignPreview = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Add_1 = __importDefault(require("@mui/icons-material/Add"));
-var CheckCircle_1 = __importDefault(require("@mui/icons-material/CheckCircle"));
 var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
 var FileCopy_1 = __importDefault(require("@mui/icons-material/FileCopy"));
-var RemoveCircle_1 = __importDefault(require("@mui/icons-material/RemoveCircle"));
 var material_1 = require("@mui/material");
+var Enum_1 = require("../../../../ACM-AXN/Campaign/Enum");
+var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
 var recoil_1 = require("recoil");
-var atoms_1 = require("./atoms");
-var react_1 = require("react");
 var AWING_1 = require("../../../../AWING");
-var Recoils_1 = require("../Recoils");
-var Helpers_1 = require("../../../../Utils/Helpers");
-var Utils_1 = require("../../Utils");
 var Context_1 = require("../../../../Context");
 var i18n_1 = __importDefault(require("../../../../i18n"));
-var Enum_1 = require("../../../../ACM-AXN/Campaign/Enum");
+var Helpers_1 = require("../../../../Utils/Helpers");
+var Utils_1 = require("../../Utils");
+var Recoils_1 = require("../Recoils");
+var atoms_1 = require("./atoms");
 function SubCampaignList(props) {
     var onAdd = props.onAdd, onDelete = props.onDelete;
     var t = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18n_1.default }).t;
@@ -70,7 +68,7 @@ function SubCampaignPreview(_a) {
     var subCampaign = _a.subCampaign, isSelected = _a.isSelected, onSelect = _a.onSelect, onMultiSelect = _a.onMultiSelect, onDuplicate = _a.onDuplicate, onDelete = _a.onDelete, error = _a.error;
     var t = (0, react_i18next_1.useTranslation)().t;
     var today = (0, Helpers_1.getToday)();
-    var isActive = ((_b = subCampaign.campaignGroup) === null || _b === void 0 ? void 0 : _b.ticket) === Enum_1.CampaignTicket.ACTIVE &&
+    var isActive = ((_b = subCampaign.campaignGroup) === null || _b === void 0 ? void 0 : _b.status) === Enum_1.CampaignStatus.Active &&
         ((_c = subCampaign.ads) === null || _c === void 0 ? void 0 : _c.some(function (ad) {
             return ad.status &&
                 (0, Helpers_1.convertTimestampToDateTime)(ad.startDate) <= today &&
@@ -84,9 +82,44 @@ function SubCampaignPreview(_a) {
         numberHasRunText: t('Campaign.NumberHasRunText'),
         reserved: t('Campaign.Reserved'),
     };
+    var renderStatus = function () {
+        switch (subCampaign.campaignGroup.status) {
+            case Enum_1.CampaignStatus.Draft:
+                return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: t('Campaign.Status.Draft'), style: {
+                        height: 18,
+                        backgroundColor: Enum_1.ColorCampaignStatus.Draft,
+                        color: 'white',
+                    } }));
+            case Enum_1.CampaignStatus.Reserved:
+                return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: t('Campaign.Status.Reserved'), style: {
+                        height: 18,
+                        backgroundColor: Enum_1.ColorCampaignStatus.Reserved,
+                        color: 'white',
+                    } }));
+            case Enum_1.CampaignStatus.Pending:
+                return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: t('Campaign.Status.Pending'), style: {
+                        height: 18,
+                        backgroundColor: Enum_1.ColorCampaignStatus.UnderApproval,
+                        color: 'white',
+                    } }));
+            case Enum_1.CampaignStatus.Active:
+                return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: t('Campaign.Status.Active'), style: {
+                        height: 18,
+                        backgroundColor: isActive ? Enum_1.ColorCampaignStatus.Active : Enum_1.ColorCampaignStatus.UnActive,
+                        color: 'white',
+                    } }));
+            case Enum_1.CampaignStatus.Done:
+                return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: t('Campaign.Status.Done'), style: {
+                        height: 18,
+                        backgroundColor: Enum_1.ColorCampaignStatus.Done,
+                        color: 'white',
+                    } }));
+        }
+    };
     return ((0, jsx_runtime_1.jsxs)(material_1.Card, { sx: {
             width: 214,
-            height: 124,
+            minHeight: 124,
+            height: 'auto',
             marginLeft: function (theme) { return theme.spacing(2); },
             cursor: 'pointer',
             border: "2px solid ".concat(isSelected ? '#2196F3' : '#fafafa'),
@@ -104,11 +137,7 @@ function SubCampaignPreview(_a) {
                             fontWeight: '500',
                         }, children: [subCampaign.campaignGroup.name.length > 30
                                 ? "".concat(subCampaign.campaignGroup.name.substring(0, 30), "...")
-                                : subCampaign.campaignGroup.name, subCampaign.campaignGroup.ticket ===
-                                Enum_1.CampaignTicket.ACTIVE ? ((0, jsx_runtime_1.jsx)(CheckCircle_1.default, { fontSize: "small", style: {
-                                    fontSize: '14px',
-                                    color: isActive ? '#008000' : '#8D8D8D',
-                                } })) : ((0, jsx_runtime_1.jsx)(RemoveCircle_1.default, { fontSize: "small", style: { fontSize: '14px' }, color: "primary" })), (0, jsx_runtime_1.jsx)(material_1.Typography, { component: 'span', sx: {
+                                : subCampaign.campaignGroup.name, (0, jsx_runtime_1.jsx)(material_1.Typography, { component: 'span', sx: {
                                     fontFamily: '"Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2" !important',
                                     fontSize: 18,
                                 }, children: (0, Utils_1.getCampaignPriority)(subCampaign.campaignGroup.priority) })] }) }), action: (0, jsx_runtime_1.jsx)(AWING_1.Actions, { menus: __spreadArray([
@@ -131,10 +160,6 @@ function SubCampaignPreview(_a) {
                                         ? " (+".concat((0, Helpers_1.formatNumber)(subCampaign.campaignGroup.bonusAmount), ")")
                                         : '' })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: translationText.bonus, placement: "right", arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: subCampaign.campaignGroup.numberHasRun
                                 ? "".concat(translationText.numberHasRunText, ": ").concat((0, Helpers_1.formatNumber)(subCampaign.campaignGroup.numberHasRun))
-                                : '' }) })] }), (0, jsx_runtime_1.jsx)(material_1.CardActions, { style: { padding: '0 8px' }, children: subCampaign.campaignGroup.isReserved && ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: translationText.reserved, style: {
-                        height: 18,
-                        backgroundColor: '#c49f47',
-                        color: 'white',
-                    } })) })] }));
+                                : '' }) })] }), (0, jsx_runtime_1.jsx)(material_1.CardActions, { style: { padding: '0 8px 8px 8px' }, children: renderStatus() })] }));
 }
 exports.SubCampaignPreview = SubCampaignPreview;

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

@@ -5,6 +5,7 @@ import { CampaignAd } from '../../Types';
 export type AdDefine = {
     subCampaignId: number;
     adId: number;
+    loginId: string;
 };
 /**
  * State lưu trạng thái thông tin cơ bản của từng chiến dịch con
@@ -52,3 +53,4 @@ export declare const campaignPageIdState: import("recoil").RecoilState<{
     lgn: string;
     wlc: string;
 }>;
+export declare const campaignLoginIdState: import("recoil").RecoilState<string[]>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.campaignPageIdState = exports.adOpenState = exports.adSelectedState = exports.adListState = exports.checkGroupsClassCState = exports.selectedSubCampaignIdState = exports.copiedAdState = exports.subCampaignValidState = exports.subCampaignAdsValidState = exports.subCampaignDetailValidState = void 0;
+exports.campaignLoginIdState = exports.campaignPageIdState = exports.adOpenState = exports.adSelectedState = exports.adListState = exports.checkGroupsClassCState = exports.selectedSubCampaignIdState = exports.copiedAdState = exports.subCampaignValidState = exports.subCampaignAdsValidState = exports.subCampaignDetailValidState = void 0;
 var recoil_1 = require("recoil");
 var Utils_1 = require("../../Utils");
 // import directoryPermissionService from 'Services/DirectoryPermission'
@@ -22,7 +22,7 @@ exports.subCampaignDetailValidState = (0, recoil_1.atom)({
                 return (result[sub.campaignGroup.id] =
                     (0, Utils_1.nameValid)(sub.campaignGroup.name) &&
                         (0, Utils_1.groupClassBValid)(sub.campaignGroup) &&
-                        (0, Utils_1.groupClassCValid)(sub));
+                        (0, Utils_1.groupClassCValid)(sub) && !!sub.campaignGroup.billingUnit);
             });
             return result;
         },
@@ -58,9 +58,10 @@ exports.subCampaignValidState = (0, recoil_1.selector)({
         var subCampaignAdsValid = get(exports.subCampaignAdsValidState);
         var result = {};
         subCampaigns.forEach(function (sub) {
+            var _a;
             return (result[sub.campaignGroup.id] =
                 subCampaignDetailValid[sub.campaignGroup.id] &&
-                    subCampaignAdsValid[sub.campaignGroup.id]);
+                    subCampaignAdsValid[sub.campaignGroup.id] && Boolean((_a = sub.campaignGroup) === null || _a === void 0 ? void 0 : _a.billingUnit));
         });
         return result;
     },
@@ -132,3 +133,7 @@ exports.campaignPageIdState = (0, recoil_1.atom)({
         wlc: '',
     },
 });
+exports.campaignLoginIdState = (0, recoil_1.atom)({
+    key: 'campaignLoginIdState',
+    default: [],
+});

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

@@ -38,6 +38,7 @@ var react_router_dom_1 = require("react-router-dom");
 var Constant_1 = require("../../../../ACM-AXN/Common/Constant");
 var EditPage_1 = __importDefault(require("./EditPage"));
 var Enum_1 = require("../../../../ACM-AXN/Campaign/Enum");
+var Enum_2 = require("../../../../ACM-AXN/Common/Enum");
 function TabSubCampaign() {
     var _a = (0, recoil_1.useRecoilState)(Recoils_1.campaignGroupsState), subCampaigns = _a[0], setSubCampaigns = _a[1];
     var _b = (0, recoil_1.useRecoilState)(atoms_1.selectedSubCampaignIdState), selectedSubCampaignId = _b[0], setSelectedSubCampaignId = _b[1];
@@ -60,11 +61,11 @@ function TabSubCampaign() {
             campaignGroup: {
                 id: newId,
                 name: 'Sub-Campaign ' + newId,
-                ticket: Enum_1.CampaignTicket.INACTIVE,
+                status: Enum_1.CampaignStatus.Draft,
                 priority: Enum_1.CampaignPriority.ClassB,
                 bookingAmount: 10,
                 bonusAmount: 0,
-                isReserved: false,
+                billingUnit: Enum_2.AnalyticType.Authentication,
             },
             ads: [],
         });

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabSubCampaign/useSearchPage.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) {
@@ -43,24 +54,38 @@ var react_1 = require("react");
 var recoil_1 = require("recoil");
 var atoms_1 = require("./atoms");
 var Hooks_1 = __importDefault(require("../../Hooks"));
+var Recoils_1 = require("../Recoils");
 function useSearchPage(type) {
     var _this = this;
     var directoryId = (0, recoil_1.useRecoilValue)(atoms_1.campaignPageIdState);
+    var _a = (0, recoil_1.useRecoilState)(Recoils_1.cacheSearchPageState), cache = _a[0], setCache = _a[1];
     var service = (0, Hooks_1.default)().service;
     return (0, react_1.useCallback)(function (searchString) { return __awaiter(_this, void 0, void 0, function () {
-        var temp;
+        var options;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, service.pagesPaging(searchString, 10, 0, directoryId[type])];
+                case 0:
+                    if (Object.keys(cache).includes(searchString || type)) {
+                        return [2 /*return*/, cache[searchString || type]];
+                    }
+                    return [4 /*yield*/, service
+                            .pagesPaging(searchString, 10, 0, directoryId[type])
+                            .then(function (_a) {
+                            var items = _a.items;
+                            return items === null || items === void 0 ? void 0 : items.map(function (page) { return ({
+                                text: page.title,
+                                value: page.pageId,
+                            }); });
+                        })];
                 case 1:
-                    temp = _b.sent();
-                    return [2 /*return*/, (_a = temp.items) === null || _a === void 0 ? void 0 : _a.map(function (page) { return ({
-                            text: page.title,
-                            value: page.pageId,
-                        }); })];
+                    options = _b.sent();
+                    setCache(__assign(__assign({}, cache), (_a = {}, _a[searchString || type] = options, _a)));
+                    return [2 /*return*/, options];
             }
         });
-    }); }, [service, directoryId, type]);
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [directoryId, type]);
 }
 exports.default = useSearchPage;

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

@@ -1,3 +1,7 @@
 import React from 'react';
-declare const _default: React.FC<unknown>;
+interface CreateOrEditProps {
+    quickWizard?: (p?: any) => JSX.Element;
+    type?: string;
+}
+declare const _default: React.FC<CreateOrEditProps>;
 export default _default;