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

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

@@ -0,0 +1,18 @@
+import { Dispatch, SetStateAction } from 'react';
+import { CampaignAd } from '../../Types';
+export type AdDetailProps = {
+    /**
+     * Thông tin của quảng cáo hiện tại
+     */
+    ad: CampaignAd;
+    /**
+     * Hàm cập nhật quảng cáo
+     */
+    onChange: Dispatch<SetStateAction<CampaignAd>>;
+    /**
+     * Hàm cập nhật trạng thái của quảng cáo
+     * @param status trạng thái mới của quảng cáo
+     */
+    onChangeStatus(status: boolean): void;
+};
+export default function AdDetail(props: AdDetailProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,205 @@
+"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 __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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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 });
+exports.default = AdDetail;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var moment_1 = __importDefault(require("moment"));
+var react_1 = __importStar(require("react"));
+var react_i18next_1 = require("react-i18next");
+var Utils_1 = require("../../Utils");
+var useSearchPage_1 = __importDefault(require("./useSearchPage"));
+var AsyncAutocomplete_1 = __importDefault(require("../../../../AWING/AsyncAutocomplete"));
+var AWING_1 = require("../../../../AWING");
+var Helpers_1 = require("../../../../Utils/Helpers");
+var Hooks_1 = __importDefault(require("../../Hooks"));
+function AdDetail(props) {
+    var _a;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var PlaceMultiSelect = (0, Hooks_1.default)().placeMultiSelectComponent;
+    var ad = props.ad, onChange = props.onChange, onChangeStatus = props.onChangeStatus;
+    var _b = (0, react_1.useState)(__assign(__assign(__assign(__assign(__assign({}, ((0, Utils_1.nameValid)(ad.name) && {
+        name: true,
+    })), ((0, Utils_1.pageValid)(ad.loginId) && {
+        loginId: true,
+    })), ((0, Utils_1.pageValid)(ad.welcomeId) && {
+        welcomeId: true,
+    })), ((0, Utils_1.dateRangeValid)(ad.startDate, ad.endDate) && {
+        dateRange: true,
+    })), ((0, Utils_1.placeFilterValid)(ad.placeFilter, ad.places) && {
+        placeFilter: true,
+    }))), adValid = _b[0], setAdValid = _b[1];
+    react_1.default.useEffect(function () {
+        onChangeStatus(Boolean(adValid.name &&
+            adValid.loginId &&
+            adValid.welcomeId &&
+            adValid.dateRange &&
+            adValid.placeFilter));
+    }, [adValid]);
+    /**
+     * Hàm lấy ra các page theo điều kiện
+     * @param searchString Từ khoá tìm kiếm
+     */
+    var handleSearchLoginPage = (0, useSearchPage_1.default)('lgn');
+    var handleSearchWelcomePage = (0, useSearchPage_1.default)('wlc');
+    /**
+     * Hàm cập nhật trạng thái các trường của quảng cáo
+     * @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 (adValid[fieldName] !== status)
+            setAdValid(function (pre) {
+                var _a;
+                return (__assign(__assign({}, pre), (_a = {}, _a[fieldName] = status, _a)));
+            });
+    };
+    var translationText = {
+        preview: t('Common.preview'),
+        copy: t('Common.Copy'),
+        showTheSource: t('Campaign.ShowTheSource'),
+        delete: t('Common.Delete'),
+        weight: t('Campaign.Detail.Weight'),
+        advanced: t('Campaign.Advanced'),
+        adType: t('Campaign.Ad.AdType'),
+        pageLogin: t('Campaign.PageLogin'),
+        pageWelcome: t('Campaign.PageWelcome'),
+        dateRange: t('Campaign.DateRange'),
+        helperText: t('Common.Required'),
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, 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", required: true, fullWidth: true, variant: "standard", label: t('Common.Name'), value: ad.name, onChange: function (e) {
+                                var value = e.target.value;
+                                handleChangeStatus('name', (0, Utils_1.nameValid)(value));
+                                onChange(function (pre) { return (__assign(__assign({}, pre), { name: value })); });
+                            }, error: adValid.name !== undefined && !adValid.name, helperText: adValid.name !== undefined && !adValid.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: "status", select: true, variant: "standard", required: true, fullWidth: true, label: t('Campaign.Ad.Status'), value: ad.status ? 1 : 0, onChange: function (e) {
+                                return onChange(function (pre) { return (__assign(__assign({}, pre), { status: Boolean(Number(e.target.value)) })); });
+                            }, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 1, children: t('Campaign.Active') }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 0, children: t('Campaign.InActive') })] }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, style: { padding: 8 }, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "type", select: true, required: true, variant: "standard", fullWidth: true, label: translationText.adType, value: ad.type, onChange: function (e) {
+                                return onChange(function (pre) { return (__assign(__assign({}, pre), { type: Number(e.target.value) })); });
+                            }, children: Object.keys(Utils_1.CampaignType)
+                                // .filter((x) => isNaN(parseInt(x)))
+                                .map(function (type) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: Object.values(Utils_1.CampaignType).indexOf(type), children: t("Campaign.Type.".concat(type)) }, type)); }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, style: { padding: 8 }, children: (0, jsx_runtime_1.jsx)(AsyncAutocomplete_1.default, { getOptionLabel: function (option) { return option === null || option === void 0 ? void 0 : option.text; }, getOptionValue: function (option) { return option === null || option === void 0 ? void 0 : option.value; }, value: ad.loginPage
+                                ? {
+                                    text: ad.loginPage.title,
+                                    value: ad.loginPage.pageId,
+                                }
+                                : undefined, onChange: function (option) {
+                                handleChangeStatus('loginId', (0, Utils_1.pageValid)(option === null || option === void 0 ? void 0 : option.value));
+                                onChange(function (pre) {
+                                    return (__assign(__assign({}, pre), { loginId: option === null || option === void 0 ? void 0 : option.value, loginPage: option
+                                            ? {
+                                                pageId: option === null || option === void 0 ? void 0 : option.value,
+                                                title: option === null || option === void 0 ? void 0 : option.text,
+                                            }
+                                            : undefined }));
+                                });
+                            }, fetchData: handleSearchLoginPage, TextFieldProps: {
+                                variant: 'standard',
+                                label: translationText.pageLogin,
+                                required: true,
+                                error: adValid.loginId !== undefined &&
+                                    !adValid.loginId,
+                                helperText: adValid.loginId !== undefined &&
+                                    !adValid.loginId
+                                    ? translationText.helperText
+                                    : '',
+                            } }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, style: { padding: 8 }, children: (0, jsx_runtime_1.jsx)(AsyncAutocomplete_1.default, { getOptionLabel: function (option) { return option === null || option === void 0 ? void 0 : option.text; }, getOptionValue: function (option) { return option === null || option === void 0 ? void 0 : option.value; }, value: ad.welcomePage
+                                ? {
+                                    text: ad.welcomePage.title,
+                                    value: ad.welcomePage.pageId,
+                                }
+                                : undefined, onChange: function (option) {
+                                handleChangeStatus('welcomeId', (0, Utils_1.pageValid)(option === null || option === void 0 ? void 0 : option.value));
+                                onChange(function (pre) {
+                                    return (__assign(__assign({}, pre), { welcomeId: option === null || option === void 0 ? void 0 : option.value, welcomePage: option
+                                            ? {
+                                                pageId: option === null || option === void 0 ? void 0 : option.value,
+                                                title: option === null || option === void 0 ? void 0 : option.text,
+                                            }
+                                            : undefined }));
+                                });
+                            }, fetchData: handleSearchWelcomePage, TextFieldProps: {
+                                variant: 'standard',
+                                label: translationText.pageWelcome,
+                                required: true,
+                                error: adValid.welcomeId !== undefined &&
+                                    !adValid.welcomeId,
+                                helperText: adValid.welcomeId !== undefined &&
+                                    !adValid.welcomeId
+                                    ? translationText.helperText
+                                    : '',
+                            } }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: true, style: { padding: 8 }, children: (0, jsx_runtime_1.jsx)(AWING_1.DateRangePicker, { label: translationText.dateRange, initialStartDate: (0, moment_1.default)((0, Helpers_1.convertTimestampToDateTime)(ad.startDate)), initialEndDate: (0, moment_1.default)((0, Helpers_1.convertTimestampToDateTime)(ad.endDate)), variant: "standard", callback: function (dateRange) {
+                                var _a, _b;
+                                var startDate = (0, Helpers_1.convertDateTimeToTimestamp)((_a = dateRange.startDate) === null || _a === void 0 ? void 0 : _a.toDate());
+                                var endDate = (0, Helpers_1.convertDateTimeToTimestamp)((_b = dateRange.endDate) === null || _b === void 0 ? void 0 : _b.toDate());
+                                handleChangeStatus('dateRange', (0, Utils_1.dateRangeValid)(startDate, endDate));
+                                onChange(function (pre) {
+                                    return (__assign(__assign({}, pre), { startDate: startDate, endDate: endDate }));
+                                });
+                            }, handleValid: function (valid) {
+                                return setAdValid(function (pre) { return (__assign(__assign({}, pre), { dateRange: valid })); });
+                            }, 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: {
+                                variant: 'standard',
+                                size: 'medium',
+                                required: true,
+                                placeholder: ad.places && ((_a = ad.places) === null || _a === void 0 ? void 0 : _a.length) > 0
+                                    ? "".concat(t('PlaceMultiSelect.TotalSelected'), ": ").concat(ad.places.length)
+                                    : '',
+                                error: adValid.placeFilter !== undefined &&
+                                    !adValid.placeFilter,
+                                helperText: adValid.placeFilter !== undefined &&
+                                    !adValid.placeFilter
+                                    ? translationText.helperText
+                                    : '',
+                            }, isDisplayTextField: true }) })] })] }));
+}

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

@@ -0,0 +1,101 @@
+"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");
+require("@testing-library/jest-dom");
+var recoil_1 = require("recoil");
+var AdDetail_1 = __importDefault(require("./AdDetail"));
+var react_1 = require("@testing-library/react");
+var Helpers_1 = require("../../../../Utils/Helpers");
+var Enum_1 = require("../../../../ACM-AXN/Campaign/Enum");
+function MockComponent(props) {
+    return ((0, jsx_runtime_1.jsx)("div", {}));
+}
+// const MockComponentFactory = (name: string) => () => (props: any) => <div><div/>
+jest.mock('Features/PlaceFilter', function () { return MockComponent; });
+jest.mock("Components/Typescript/AsynchronousAutocomplete", function () { return MockComponent; });
+jest.mock("AWING/DateRangePicker", function () { return MockComponent; });
+jest.mock('Services/DirectoryPermission', function () { return ({
+    getByObjectTypeCode: function () { return new Promise(function (resolve) {
+        resolve({
+            data: {
+                status: 0,
+                data: [
+                    { directoryId: "11" }
+                ]
+            }
+        });
+    }); }
+}); });
+jest.mock('Services/Page', function () { return ({
+    getPagingPage: function () { return new Promise(function (resolve) {
+        resolve({
+            data: {
+                status: 0,
+                data: {
+                    items: [
+                        { pageId: "2348723423", title: "ahdfsoi" }
+                    ]
+                }
+            }
+        });
+    }); }
+}); });
+jest.mock('react-i18next', function () { return ({
+    useTranslation: function () { return ({
+        t: function (message) { return message; }
+    }); }
+}); });
+// beforeAll(() => server.listen())
+// afterEach(() => server.resetHandlers())
+afterAll(function () { return jest.resetAllMocks(); });
+describe('AdDetail', function () {
+    test('should render with correct information', function () {
+        var ad = {
+            id: 2,
+            campaignGroupId: 1,
+            name: "Quảng cáo 2",
+            status: true,
+            type: Enum_1.AdType.BANNER_STATIC,
+            loginId: "",
+            welcomeId: "2348723423",
+            startDate: (0, Helpers_1.convertDateTimeToTimestamp)((0, Helpers_1.getToday)()),
+            endDate: (0, Helpers_1.convertDateTimeToTimestamp)((0, Helpers_1.getToday)()),
+            placeFilter: {
+                operandGroups: []
+            },
+            welcomePage: {
+                pageId: "2348723423",
+                title: "ahdfsoi"
+            }
+        };
+        var status = true;
+        var onChangeStatusMock = jest.fn(function (s) { return status = s; });
+        var onChangeMock = jest.fn(function (fun) {
+            if (typeof fun === "function")
+                ad = fun(ad);
+            else
+                ad = fun;
+        });
+        var _a = (0, react_1.render)((0, jsx_runtime_1.jsx)(recoil_1.RecoilRoot, { children: (0, jsx_runtime_1.jsx)(AdDetail_1.default, { ad: ad, onChangeStatus: onChangeStatusMock, onChange: onChangeMock }) })), getByLabelText = _a.getByLabelText, getAllByRole = _a.getAllByRole;
+        var nameInput = react_1.screen.getByLabelText(/^Common.Name.*$/);
+        expect(nameInput.value).toBe(ad.name);
+        expect(react_1.screen.getByLabelText(/^Campaign.Ad.Status.*$/).textContent).toBe('Campaign.Active');
+        expect(react_1.screen.getByLabelText(/^Campaign.Ad.AdType.*$/).textContent).toBe('Campaign.Type.BANNER_STATIC');
+        react_1.fireEvent.change(nameInput, { target: { value: 'New Test Campaign' } });
+        expect(onChangeMock).toHaveBeenCalledTimes(1);
+        expect(ad.name).toBe('New Test Campaign');
+        expect(status).toBe(false);
+        var selectParam = react_1.screen.getAllByRole('button');
+        react_1.fireEvent.mouseDown(selectParam[0]);
+        react_1.screen.getAllByRole('option')[1].click();
+        expect(onChangeMock).toHaveBeenCalledTimes(2);
+        expect(ad.status).toBe(false);
+        react_1.fireEvent.mouseDown(selectParam[1]);
+        react_1.screen.getAllByRole('option')[2].click();
+        expect(onChangeMock).toHaveBeenCalledTimes(3);
+        expect(ad.type).toBe(Enum_1.AdType.BANNER_SLIDE);
+    });
+});

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

@@ -0,0 +1,28 @@
+import { SetStateAction } from 'react';
+import { AdDefine } from './atoms';
+import { CampaignAd } from '../../Types';
+type AdListProps = {
+    /**
+     * Hàm tạo quảng cáo (nếu có)
+     */
+    onCreate?(newAd: CampaignAd): void;
+    /**
+     * Hàm sửa quảng cáo
+     * @param changeList Định nghĩa các quảng cáo được thay đổi
+     * @param setStateAction Thông tin cập nhật quảng cáo
+     */
+    onChange(changeList: AdDefine[], setStateAction: SetStateAction<CampaignAd>): void;
+    /**
+     * Hàm xoá quảng cáo
+     * @param deleteList Định nghĩa các quảng cáo bị xoá
+     */
+    onDelete(deleteList: AdDefine[]): void;
+    /**
+     * Hàm cập nhật trạng thái của nhớm chiến dịch
+     * @param subCampaignId ID của nhóm chiến dịch cần sửa trạng thái
+     * @param status Trạng thái mới của nhóm chiến dịch
+     */
+    onAdsValidChange(subCampaignId: number, status: boolean): void;
+};
+export default function AdList(props: AdListProps): import("react/jsx-runtime").JSX.Element;
+export {};