awing-library 2.1.125-beta → 2.1.127-beta

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

@@ -26,7 +26,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var icons_material_1 = require("@mui/icons-material");
 var material_1 = require("@mui/material");
-var Types_1 = require("./Types");
 var AWING_1 = require("../../AWING");
 var lodash_1 = require("lodash");
 var react_1 = require("react");
@@ -149,7 +148,7 @@ var CampaignContainer = function () {
                     label: t('Campaign.AdvanceSearchPriority'),
                     type: 'autocomplete',
                     icon: (0, jsx_runtime_1.jsx)(icons_material_1.StarOutlined, { fontSize: "small" }),
-                    options: Object.entries(Types_1.CampaignPriority).map(function (_a) {
+                    options: Object.entries(Enum_1.CampaignPriority).map(function (_a) {
                         var key = _a[0], value = _a[1];
                         return ({
                             value: value,
@@ -264,7 +263,7 @@ var CampaignContainer = function () {
                             text = (0, Utils_1.getTotalBooking)(row === null || row === void 0 ? void 0 : row.campaignGroups);
                         }
                         else {
-                            text = (0, Utils_1.checkPriority)(row.campaignGroup.priority, Types_1.CampaignPriority.ClassB)
+                            text = (0, Utils_1.checkPriority)(row.campaignGroup.priority, Enum_1.CampaignPriority.ClassB)
                                 ? (0, Helpers_1.formatNumber)(row.campaignGroup.bookingAmount)
                                 : 'N/A';
                         }

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

@@ -13,9 +13,9 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.weightState = exports.readyForSubmitState = exports.tabPartnerValidState = exports.tabSubCampaignValidState = exports.tabInfomationValidState = exports.campaignPartnerState = exports.campaignGroupsState = exports.campaignAttributesState = exports.campaignState = exports.campaignModelState = exports.confirmExitState = exports.isCreateState = exports.attributesState = exports.directoriesState = void 0;
 var recoil_1 = require("recoil");
-var Types_1 = require("../Types");
 var Utils_1 = require("../Utils");
 var atoms_1 = require("./TabSubCampaign/atoms");
+var Enum_1 = require("../Enum");
 exports.directoriesState = (0, recoil_1.atom)({
     key: 'DirectoriesCampaignState',
     default: [],
@@ -51,8 +51,8 @@ exports.campaignModelState = (0, recoil_1.atom)({
                 campaignGroup: {
                     id: 1,
                     name: 'Sub-Campaign 1',
-                    priority: (0, Utils_1.getIndexPriority)(Types_1.CampaignPriority.ClassB),
-                    ticket: Types_1.CampaignTicket.INACTIVE,
+                    priority: (0, Utils_1.getIndexPriority)(Enum_1.CampaignPriority.ClassB),
+                    ticket: Enum_1.CampaignTicket.INACTIVE,
                     bookingAmount: 10,
                     bonusAmount: 0,
                     isReserved: false,

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/AnalyticComponent.test.d.ts

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

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/AnalyticComponent.test.js

@@ -0,0 +1,80 @@
+"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 enzyme_1 = require("enzyme");
+var core_1 = require("@material-ui/core");
+var ChartFilter_1 = __importDefault(require("../ChartFilter"));
+var ChartWithType_1 = __importDefault(require("./ChartWithType"));
+var component_1 = __importDefault(require("./component"));
+var mockProps = {
+    isLoading: false,
+    startDate: new Date("2022-06-07T08:39:14.482Z"),
+    endDate: new Date("2023-06-07T08:39:14.482Z"),
+    subCampaigns: [],
+    statisticalData: [],
+    getStatisticalData: jest.fn(),
+    exportData: jest.fn(),
+    domains: [],
+};
+describe("Analytic", function () {
+    it("renders without error", function () {
+        (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(component_1.default, __assign({}, mockProps)));
+    });
+    it("displays loading spinner while loading is in progress", function () {
+        var wrapper = (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(component_1.default, __assign({}, mockProps, { isLoading: true })));
+        var spinner = wrapper.find(core_1.CircularProgress);
+        expect(spinner).not.toBeNull();
+    });
+    it("renders ChartFilter component with the correct props", function () {
+        var wrapper = (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(component_1.default, __assign({}, mockProps)));
+        var chartFilter = wrapper.find(ChartFilter_1.default);
+        expect(chartFilter).toHaveLength(1);
+        expect(chartFilter.props()).toMatchObject({
+            subCampaigns: mockProps.subCampaigns,
+            queryInput: {
+                time: {
+                    startDate: mockProps.startDate,
+                    endDate: mockProps.endDate,
+                },
+                places: [],
+                ids: {},
+                timelineType: 1,
+                statisticType: 0,
+            },
+            onChangeQueryInput: expect.any(Function),
+            onQueryData: expect.any(Function),
+            isExportType: true,
+            onExportData: expect.any(Function),
+            domains: mockProps.domains,
+        });
+    });
+    it("renders ChartWithType component with the correct props", function () {
+        var wrapper = (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(component_1.default, __assign({}, mockProps)));
+        var chartWithType = wrapper.find(ChartWithType_1.default);
+        expect(chartWithType).toHaveLength(1);
+        expect(chartWithType.props()).toMatchObject({
+            statisticalData: mockProps.statisticalData,
+            subCampaigns: mockProps.subCampaigns,
+            ids: {},
+            onCampaignAdGroupIdChange: expect.any(Function),
+            statisticType: 0,
+            setStatisticType: expect.any(Function),
+            timelineType: 1,
+            setTimelineType: expect.any(Function),
+        });
+    });
+});

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/AnalyticContainer.test.d.ts

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

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/AnalyticContainer.test.js

@@ -0,0 +1,49 @@
+"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 enzyme_1 = require("enzyme");
+var react_1 = __importDefault(require("react"));
+var container_1 = __importDefault(require("./container"));
+var component_1 = __importDefault(require("./component"));
+describe("AnalyticContainer", function () {
+    var props = {
+        subCampaigns: [
+            {
+                groupCampaign: {
+                    id: 1,
+                    name: "Group 1",
+                },
+                ads: [
+                    {
+                        id: 1,
+                        name: "ad1",
+                        places: [{ name: "place1" }],
+                    },
+                ],
+            },
+        ],
+        campaignId: "campaignId",
+        startDate: new Date(),
+        endDate: new Date(),
+        domains: [],
+    };
+    it("should render AnalyticComponent", function () {
+        var wrapper = (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(container_1.default, __assign({}, props)));
+        var comp = wrapper.find(component_1.default);
+        expect(comp.length).toEqual(1);
+    });
+});

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/ChartWithType.d.ts

@@ -0,0 +1,13 @@
+import { CampaignGroupModel } from '../../../../../ACM-AXN/Campaign/Types';
+interface Props {
+    statisticalData: any;
+    timelineType: number;
+    setTimelineType: any;
+    statisticType: number;
+    setStatisticType: any;
+    subCampaigns: CampaignGroupModel[];
+    ids: any;
+    onCampaignAdGroupIdChange: (newValue: string[]) => void;
+}
+declare const ChartWithType: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default ChartWithType;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/ChartWithType.js

@@ -0,0 +1,131 @@
+"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_i18next_1 = require("react-i18next");
+var material_1 = require("@mui/material");
+var i18n_1 = __importDefault(require("../../../../../i18n"));
+var MultipleHierarchicalChoice_1 = require("../../../../../AWING/MultipleHierarchicalChoice");
+var Detail_1 = __importDefault(require("./Detail"));
+var Utils_1 = require("./Utils");
+var AWING_1 = require("../../../../../AWING");
+var Context_1 = __importDefault(require("../Context"));
+var styles = {
+    root: {
+        border: '1px solid #ccc',
+        paddingTop: function (theme) { return theme.spacing(2); },
+    },
+    chart: {
+        marginTop: function (theme) { return theme.spacing(2); },
+    },
+    chartWrapper: {
+        padding: function (theme) { return theme.spacing(1); },
+        paddingLeft: function (theme) { return theme.spacing(16); },
+        paddingRight: function (theme) { return theme.spacing(16); },
+        height: '435px',
+    },
+};
+var ChartWithType = function (props) {
+    var t = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18n_1.default }).t;
+    var chart = (0, Context_1.default)().chart;
+    var SType = [t('Campaign.TypeChart'), t('Campaign.TypeDetail')];
+    var statisticalData = props.statisticalData, timelineType = props.timelineType, setTimelineType = props.setTimelineType, statisticType = props.statisticType, setStatisticType = props.setStatisticType, subCampaigns = props.subCampaigns, ids = props.ids, onCampaignAdGroupIdChange = props.onCampaignAdGroupIdChange;
+    var translationText = {
+        timeline: t('Common.ViewBy'),
+        timelineType: {
+            HOUR: t('Common.Hour'),
+            DAY: t('Common.Day'),
+            WEEK: t('Common.Week'),
+            MONTH: t('Common.Month'),
+        },
+        allPlaceGroup: t('Place.AllPlaceGroup'),
+    };
+    var ChartByType = [
+        translationText.timelineType.HOUR,
+        translationText.timelineType.DAY,
+    ];
+    var getGroupOptions = function () {
+        var ads = [];
+        subCampaigns.forEach(function (s) {
+            var _a, _b;
+            ads.push({
+                code: (_a = s.campaignGroup.id) === null || _a === void 0 ? void 0 : _a.toString(),
+                name: s.campaignGroup.name,
+                parentUnitCode: '',
+            });
+            (_b = s === null || s === void 0 ? void 0 : s.ads) === null || _b === void 0 ? void 0 : _b.forEach(function (a) {
+                var _a;
+                ads.push({
+                    code: "".concat(s.campaignGroup.id, "&").concat(a.id),
+                    name: a.name,
+                    parentUnitCode: (_a = s.campaignGroup.id) === null || _a === void 0 ? void 0 : _a.toString(),
+                });
+            });
+        });
+        return ads;
+    };
+    var groupOptions = getGroupOptions();
+    var handleGroupChange = function (value) {
+        var result = [];
+        if (value.length > 0) {
+            value.forEach(function (v) {
+                result.push(v[v.length - 1].code.toString());
+            });
+        }
+        // console.log("valuddde", value, result)
+        onCampaignAdGroupIdChange(result);
+    };
+    // const getValue = useMemo(() => {
+    //     let result: any[] = []
+    //     if (ids.campaignGroupId) {
+    //         let tmpSelected: any[] = []
+    //         const group = groupOptions.find(
+    //             (g) => g.code === ids.campaignGroupId?.toString()
+    //         )
+    //         tmpSelected = [group]
+    //         if (ids.campaignAdId) {
+    //             const ad = groupOptions.find(
+    //                 (g) =>
+    //                     g.code === `${ids.campaignGroupId}&${ids.campaignAdId}`
+    //             )
+    //             tmpSelected = [group, ad];
+    //         }
+    //         result.push(tmpSelected)
+    //     }
+    //     console.log("result", result)
+    //     return result
+    // }, [groupOptions, ids.campaignAdId, ids.campaignGroupId])
+    var getValue = function () {
+        var final = [];
+        ids.forEach(function (id) {
+            var result = [];
+            if (id.campaignGroupId) {
+                var group = groupOptions.find(function (g) { var _a; return g.code == ((_a = id.campaignGroupId) === null || _a === void 0 ? void 0 : _a.toString()); });
+                result.push(group);
+                if (id.campaignAdId) {
+                    var ad = groupOptions.find(function (g) {
+                        return g.code == "".concat(id.campaignGroupId, "&").concat(id.campaignAdId);
+                    });
+                    result.push(ad);
+                }
+            }
+            final.push(result);
+        });
+        return final;
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 1, sx: styles.root, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 3 }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, variant: "outlined", children: (0, jsx_runtime_1.jsx)(MultipleHierarchicalChoice_1.MultipleHierarchicalChoice, { onChange: handleGroupChange, options: groupOptions, placeholder: t('Campaign.SelectGroup'), label: translationText.timeline, value: getValue() }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 2, children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, variant: "outlined", children: (0, jsx_runtime_1.jsx)(material_1.TextField, { select: true, fullWidth: true, label: translationText.timeline, id: "timelineType", name: "timelineType", value: timelineType, onChange: function (e) { return setTimelineType(e.target.value); }, size: "small", variant: "outlined", children: ChartByType.map(function (type, idx) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: idx, children: type }, idx)); }) }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 2, children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, variant: "outlined", children: (0, jsx_runtime_1.jsx)(material_1.TextField, { select: true, fullWidth: true, label: t('Campaign.StatisticType'), id: "statisticType", name: "statisticType", value: statisticType, onChange: function (e) { return setStatisticType(e.target.value); }, size: "small", variant: "outlined", children: SType.map(function (type, idx) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: idx, children: type }, idx)); }) }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1 }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, sx: styles.chart, children: statisticType === 0 ? ((0, jsx_runtime_1.jsx)(material_1.Box, { component: 'div', sx: styles.chartWrapper, children: (0, jsx_runtime_1.jsx)(AWING_1.BarLineComponent, { chart: chart, dataChart: (0, Utils_1.convertToChartData)(statisticalData, subCampaigns), type: 'line', data: [], timeline: timelineType, optionCustom: {
+                            scales: {
+                                y: {
+                                    title: {
+                                        text: t('Statistics.View'),
+                                    },
+                                },
+                                yAxis: {
+                                    display: false,
+                                },
+                            },
+                        } }) })) : ((0, jsx_runtime_1.jsx)(Detail_1.default, { statisticalData: statisticalData })) })] }));
+};
+exports.default = ChartWithType;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/ChartWithType.test.d.ts

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

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/ChartWithType.test.js

@@ -0,0 +1,67 @@
+"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 enzyme_1 = require("enzyme");
+var ChartWithType_1 = __importDefault(require("./ChartWithType"));
+describe("Testing ChartWithType component", function () {
+    var wrapper;
+    var initialProps = {
+        statisticalData: [
+            {
+                click: 0,
+                crt: 0,
+                timeline: 20230418,
+                view: 0,
+            },
+        ],
+        timelineType: 0,
+        setTimelineType: jest.fn(),
+        statisticType: 0,
+        setStatisticType: jest.fn(),
+        subCampaigns: [
+            {
+                campaignGroup: {
+                    id: 1,
+                    name: "Group 1",
+                },
+                ads: [
+                    {
+                        id: 1,
+                        name: "Ad 1",
+                    },
+                ],
+            },
+        ],
+        ids: {
+            campaignGroupId: 1,
+            campaignAdId: 1,
+        },
+        onCampaignAdGroupIdChange: jest.fn(),
+    };
+    beforeEach(function () {
+        wrapper = (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(ChartWithType_1.default, __assign({}, initialProps)));
+    });
+    afterEach(function () {
+        wrapper.unmount();
+    });
+    it("should render without errors", function () {
+        expect(wrapper).toHaveLength(1);
+    });
+    it("should render a MultipleHierarchicalChoice component", function () {
+        expect(wrapper.find("MultipleHierarchicalChoice")).toHaveLength(1);
+    });
+});

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/Detail/ControlPanel.d.ts

@@ -0,0 +1,2 @@
+declare const ControlPanel: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default ControlPanel;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/Detail/ControlPanel.js

@@ -0,0 +1,113 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 react_i18next_1 = require("react-i18next");
+var material_1 = require("@mui/material");
+var useStyles = {
+    groupBy: {},
+    chip: {},
+    label: {},
+    outlinedInput: {
+    // '& .MuiOutlinedInput-input': {
+    //     padding: '10.5px !important',
+    // },
+    // '& .MuiFormControl-marginNormal': {
+    //     margin: (theme) => theme.spacing(0),
+    // },
+    // '& .MuiOutlinedInput-adornedEnd': {
+    //     paddingRight: (theme) => theme.spacing(0.5),
+    // },
+    // '& .MuiIconButton-root': {
+    //     padding: (theme) => theme.spacing(1),
+    // },
+    // '& .MuiAutocomplete-inputRoot': {
+    //     padding: (theme) => theme.spacing(0.25),
+    // },
+    // '& .MuiAutocomplete-endAdornment': {
+    //     top: 'calc(50% - 19px)',
+    // },
+    },
+    buttonStyle: {
+        height: '40px',
+    },
+    loadingButton: {
+        marginLeft: 0,
+        right: 'auto',
+        position: 'absolute',
+    },
+};
+var ControlPanel = function (props) {
+    var groupHeaders = props.groupHeaders, onQueryData = props.onQueryData;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _a = react_1.default.useState([]), groupByValues = _a[0], setGroupByValues = _a[1];
+    var handleDelete = function (groupId) { return function () {
+        setGroupByValues(function (old) { return old.filter(function (x) { return x !== groupId; }); });
+    }; };
+    var handleDragStart = function (e) {
+        var groupId = e.target.id;
+        e.dataTransfer.setData('text', groupId);
+    };
+    var handleDrop = function (e) {
+        e.preventDefault();
+        var dragNodeId = e.dataTransfer.getData('text');
+        var dropNodeId = e.target.parentNode.id;
+        if (dragNodeId === dropNodeId)
+            return;
+        if (groupByValues.some(function (x) { return x === dragNodeId; })) {
+            var dropIndex = groupByValues.findIndex(function (grp) { return grp === dropNodeId; });
+            var dragIndex = groupByValues.findIndex(function (grp) { return grp === dragNodeId; });
+            var newGroupBy_1 = __spreadArray([], groupByValues, true);
+            newGroupBy_1.splice(dragIndex, 1, dropNodeId || '');
+            newGroupBy_1.splice(dropIndex, 1, dragNodeId || '');
+            setGroupByValues(function (old) { return newGroupBy_1; });
+        }
+        else {
+            if (groupHeaders.some(function (x) { return x.id === dragNodeId; }))
+                setGroupByValues(function (old) { return __spreadArray(__spreadArray([], old, true), [dragNodeId], false); });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, paddingInline: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { id: "group-panel", item: true, xs: 11, style: { paddingLeft: '16px', position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(material_1.Paper, { component: "div", sx: {
+                            display: 'flex',
+                            justifyContent: 'flex-start',
+                            flexWrap: 'wrap',
+                            listStyle: 'none',
+                            paddingTop: '8px',
+                            margin: '0',
+                            position: 'relative',
+                            '&.MuiPaper-elevation1': {
+                                boxShadow: 'none',
+                                border: '1px solid #ccc',
+                            },
+                            minHeight: '40px',
+                            '&:hover': {
+                                '&.MuiPaper-elevation1': {
+                                    boxShadow: 'none',
+                                    border: '1px solid #263238',
+                                },
+                            },
+                        }, onDragOver: function (e) { return e.preventDefault(); }, onDrop: function (e) { return handleDrop(e); }, children: groupByValues.map(function (grpId) {
+                            var head = groupHeaders.find(function (x) { return x.id === grpId; });
+                            return ((0, jsx_runtime_1.jsx)(material_1.Chip, { id: grpId, label: head.label, onDelete: handleDelete(head.id), size: "small", sx: { marginLeft: function (theme) { return theme.spacing(1); } }, draggable: true, onDragStart: handleDragStart }, grpId));
+                        }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "textSecondary", sx: {
+                            position: 'absolute',
+                            top: '7px',
+                            left: '24px',
+                            backgroundColor: '#FFFFFF',
+                            paddingRight: '4px',
+                            paddingLeft: '4px',
+                        }, children: (0, jsx_runtime_1.jsx)("span", { children: t('Schedule.DragAndDropLabel') }) })] }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1, children: (0, jsx_runtime_1.jsx)(material_1.Button, { sx: { height: '40px' }, variant: "contained", color: "primary", onClick: function () { return onQueryData(groupByValues); }, children: t('Common.View') }) })] }));
+};
+exports.default = ControlPanel;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/Detail/ControlPanel.test.d.ts

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

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/Detail/ControlPanel.test.js

@@ -0,0 +1,27 @@
+"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 ControlPanel_1 = __importDefault(require("./ControlPanel"));
+var enzyme_1 = require("enzyme");
+describe("ControlPanel", function () {
+    var groupHeaders = [
+        { id: "1", label: "Group 1" },
+        { id: "2", label: "Group 2" },
+        { id: "3", label: "Group 3" },
+    ];
+    var onQueryData = jest.fn();
+    it("renders correctly with empty groupByValues", function () {
+        var wrapper = (0, enzyme_1.mount)((0, jsx_runtime_1.jsx)(ControlPanel_1.default, { groupHeaders: groupHeaders, onQueryData: onQueryData }));
+        var chip = wrapper.find(".MuiChip-root");
+        expect(chip.length).toEqual(0);
+    });
+    it("triggers onQueryData when view button is clicked", function () {
+        var wrapper = (0, enzyme_1.mount)((0, jsx_runtime_1.jsx)(ControlPanel_1.default, { groupHeaders: groupHeaders, onQueryData: onQueryData }));
+        var buttonWatch = wrapper.find(".MuiButtonBase-root");
+        buttonWatch.simulate("click");
+        expect(onQueryData.mock.calls[0][0]).toEqual([]);
+    });
+});

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/Detail/DetailGroupBy.test.d.ts

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

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/Detail/DetailGroupBy.test.js

@@ -0,0 +1,55 @@
+"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 enzyme_1 = require("enzyme");
+var core_1 = require("@material-ui/core");
+var Detail_1 = __importDefault(require("../Detail"));
+describe("DetailGroupBy", function () {
+    var statisticalData = [
+        {
+            subCampaignName: "SubCampaign 1",
+            adName: "Ad 1",
+            domainName: "Domain 1",
+            placeName: "Place 1",
+            click: 10,
+        },
+        {
+            subCampaignName: "SubCampaign 2",
+            adName: "Ad 2",
+            domainName: "Domain 2",
+            placeName: "Place 2",
+            click: 20,
+        },
+    ];
+    var wrapper;
+    beforeEach(function () {
+        wrapper = (0, enzyme_1.mount)((0, jsx_runtime_1.jsx)(Detail_1.default, { statisticalData: statisticalData }));
+    });
+    it("render 2 row", function () {
+        var wrapper = (0, enzyme_1.mount)((0, jsx_runtime_1.jsx)(Detail_1.default, { statisticalData: statisticalData }));
+        expect(wrapper.find(".MuiTableRow-root")).toHaveLength(2);
+    });
+    it("renders a ControlPanel component", function () {
+        var wrapper = (0, enzyme_1.mount)((0, jsx_runtime_1.jsx)(Detail_1.default, { statisticalData: statisticalData }));
+        expect(wrapper.find("ControlPanel")).toHaveLength(1);
+    });
+    it("renders the expected table headers", function () {
+        var expectedHeaders = [
+            "#",
+            "Campaign.SubCampaign",
+            "Campaign.AdLabel",
+            "Campaign.Domain",
+            "Campaign.Place",
+            "Campaign.NumberHasRunText",
+        ];
+        var tableHeaders = wrapper
+            .find(core_1.TableHead)
+            .find(core_1.TableRow)
+            .find(core_1.TableCell)
+            .map(function (cell) { return cell.text(); });
+        expect(tableHeaders).toEqual(expectedHeaders);
+    });
+});

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/Detail/RowDetail.d.ts

@@ -0,0 +1,7 @@
+interface RowProps {
+    info: any;
+    headCells: any[];
+    onRowClicked?: (rowInfo: any) => void;
+}
+export default function RowDetail(props: RowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/Detail/RowDetail.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+function RowDetail(props) {
+    var info = props.info, headCells = props.headCells, onRowClicked = props.onRowClicked;
+    var groupKeys = headCells.filter(function (headCell) { return headCell.isGrouping; });
+    return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { onClick: function () {
+            onRowClicked && onRowClicked(info);
+        }, style: { cursor: onRowClicked ? 'pointer' : 'text' }, children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { colSpan: groupKeys.length + 1, align: 'right', style: { borderBottom: '1px solid #a3a3a345' }, children: info.rowIndex + 1 }), headCells.map(function (headCell, index) {
+                return !headCell.isGrouping && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { style: {
+                        borderBottom: '1px solid #a3a3a345',
+                        opacity: info.isDeleted &&
+                            headCell.field == 'placeName'
+                            ? '0.5'
+                            : '1',
+                        color: !info.isDeleted &&
+                            headCell.field == 'placeName'
+                            ? '#235286'
+                            : '',
+                    }, children: headCell.getDisplay
+                        ? headCell.getDisplay(info)
+                        : info[headCell.field] === 0
+                            ? info[headCell.field]
+                            : info[headCell.field] || 'N/A' }, index));
+            })] }));
+}
+exports.default = RowDetail;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Analytic/Detail/RowDetail.test.d.ts

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