awing-library 2.1.21 → 2.1.22-stage

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Customer/CustomerContainer.test.js

@@ -0,0 +1,124 @@
+"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 react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+var container_1 = __importDefault(require("./container"));
+var component_1 = __importDefault(require("./component"));
+var StatisticCampaign_1 = __importDefault(require("Services/StatisticCampaign"));
+var Snackbar_1 = require("Utilities/Snackbar");
+var Enum_1 = require("Commons/Enum");
+jest.mock('Services/StatisticCampaign');
+jest.mock('Utilities/Snackbar');
+describe('CustomerContainer', function () {
+    var mockCustomerData = {
+        audienceOverviews: [
+            {
+                timeline: 20230601,
+                totalUser: 100,
+            },
+            {
+                timeline: 20230602,
+                totalUser: 150,
+            },
+            {
+                timeline: 20230603,
+                totalUser: 200,
+            },
+        ],
+        totalUser: 450,
+    };
+    var mockProps = {
+        campaignId: '1',
+        startDate: new Date('2023-06-01'),
+        endDate: new Date('2023-06-03'),
+    };
+    beforeEach(function () {
+        // Define a mock implementation of the StatisticCampaignService
+        StatisticCampaign_1.default.getAnalyticCustomer.mockResolvedValue({
+            data: {
+                status: Enum_1.STATUS_CODE_ENUMS.OK,
+                data: mockCustomerData,
+            },
+        });
+    });
+    it('should render without error', function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(container_1.default, __assign({}, mockProps)));
+    });
+    // it("should start with isLoading state set to true", () => {
+    //     render(<CustomerContainer {...mockProps} />);
+    //     expect(screen.getByRole("progressbar").length).toEqual(1);
+    // });
+    // it("should call getAnalyticCustomer API when getCustomerData function is called", async () => {
+    //     render(<CustomerContainer {...mockProps} />);
+    //     const startDateField = screen.getByLabelText(/start date/i);
+    //     const endDateField = screen.getByLabelText(/end date/i);
+    //     const searchButton = screen.getByRole("button", { name: /search/i });
+    //     fireEvent.change(startDateField, { target: { value: "2023-06-01" } });
+    //     fireEvent.change(endDateField, { target: { value: "2023-06-03" } });
+    //     fireEvent.click(searchButton);
+    //     await waitFor(() => {
+    //         expect(
+    //             StatisticCampaignService.getAnalyticCustomer
+    //         ).toHaveBeenCalledWith("Tue Jun 01 2023", "Thu Jun 03 2023", "1");
+    //     });
+    // });
+    // it("should set isLoading state to false after getAnalyticCustomer API is resolved", async () => {
+    //     render(<CustomerContainer {...mockProps} />);
+    //     const searchButton = screen.getByRole("button", { name: /search/i });
+    //     fireEvent.click(searchButton);
+    //     await waitFor(() => {
+    //         expect(
+    //             screen.queryByTestId("customer-loading")
+    //         ).not.toBeInTheDocument();
+    //     });
+    // });
+    // it("should set customerData state when getAnalyticCustomer API is resolved", async () => {
+    //     render(<CustomerContainer {...mockProps} />);
+    //     const searchButton = screen.getByRole("button", { name: /search/i });
+    //     fireEvent.click(searchButton);
+    //     await waitFor(() => {
+    //         expect(screen.queryByTestId("total-users")).toHaveTextContent(
+    //             "450"
+    //         );
+    //     });
+    // });
+    // it("should call Snackbar function with error message when getAnalyticCustomer API is rejected", async () => {
+    //     // Change the mock implementation of the StatisticCampaignService to reject the promise
+    //     StatisticCampaignService.getAnalyticCustomer.mockRejectedValue(
+    //         new Error("API failed")
+    //     );
+    //     render(<CustomerContainer {...mockProps} />);
+    //     const searchButton = screen.getByRole("button", { name: /search/i });
+    //     fireEvent.click(searchButton);
+    //     await waitFor(() => {
+    //         expect(Snackbar).toHaveBeenCalledWith(SNACKBAR_TYPES.ERROR);
+    //     });
+    // });
+    // it("should call dowloadWithDataSet function on exportData function call", async () => {
+    //     const mockExportData = [{ columns: [], data: [] }];
+    //     render(<CustomerContainer {...mockProps} />);
+    //     const downloadButton = screen.getByRole("button", { name: /export/i });
+    //     fireEvent.click(downloadButton);
+    //     await waitFor(() => {
+    //         expect(dowloadWithDataSet).toHaveBeenCalledWith(
+    //             "export_analytic_customer_campaign_1",
+    //             mockExportData
+    //         );
+    //     });
+    // });
+});

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Customer/component.d.ts

@@ -0,0 +1,14 @@
+import { IAudienceObjectReply } from '../Types';
+interface Props {
+    isLoading: boolean;
+    startDate: Date;
+    endDate: Date;
+    customerData: IAudienceObjectReply;
+    getCustomerData: (time: {
+        startDate: Date;
+        endDate: Date;
+    }) => void;
+    exportData: () => void;
+}
+declare const Customer: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Customer;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Customer/component.js

@@ -0,0 +1,130 @@
+"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 react_1 = __importDefault(require("react"));
+var GetApp_1 = __importDefault(require("@mui/icons-material/GetApp"));
+var material_1 = require("@mui/material");
+var react_i18next_1 = require("react-i18next");
+var i18n_1 = __importDefault(require("../../../../../i18n"));
+var Helpers_1 = require("../../../../../Utils/Helpers");
+var AWING_1 = require("../../../../../AWING");
+var moment_1 = __importDefault(require("moment"));
+var Context_1 = __importDefault(require("../Context"));
+var Customer = function (props) {
+    var t = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18n_1.default }).t;
+    var chart = (0, Context_1.default)().chart;
+    var isLoading = props.isLoading, startDate = props.startDate, endDate = props.endDate, customerData = props.customerData, getCustomerData = props.getCustomerData, exportData = props.exportData;
+    var _a = react_1.default.useState({
+        time: {
+            startDate: startDate,
+            endDate: endDate,
+        },
+        placeIds: [],
+    }), queryInput = _a[0], setQueryInput = _a[1];
+    var changeQueryInput = function (fieldName, fieldValue) {
+        var _a;
+        var newInput = __assign(__assign({}, queryInput), (_a = {}, _a[fieldName] = fieldValue, _a));
+        setQueryInput(newInput);
+        getCustomerData(newInput.time);
+    };
+    var queryData = function () {
+        getCustomerData(queryInput.time);
+    };
+    react_1.default.useEffect(function () {
+        queryData();
+    }, []);
+    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: 12, children: (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, 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)(AWING_1.DateRangePicker
+                            // noBorder
+                            , { 
+                                // noBorder
+                                label: t('Common.View'), callback: function (value) {
+                                    var _a, _b;
+                                    Object.values(value).filter(Boolean).length > 1 &&
+                                        changeQueryInput('time', {
+                                            startDate: (0, Helpers_1.getStartOfDay)((_a = value === null || value === void 0 ? void 0 : value.startDate) === null || _a === void 0 ? void 0 : _a.toDate()),
+                                            endDate: (0, Helpers_1.getStartOfDay)((_b = value === null || value === void 0 ? void 0 : value.endDate) === null || _b === void 0 ? void 0 : _b.toDate()),
+                                        });
+                                }, initialStartDate: (0, moment_1.default)(queryInput.time.startDate), initialEndDate: (0, moment_1.default)(queryInput.time.endDate), isShowCalendarInfo: true, variant: "outlined", textFieldProps: {
+                                    fullWidth: true,
+                                    sx: {
+                                        '& .MuiOutlinedInput-input': {
+                                            padding: '10.5px !important',
+                                        },
+                                        '& .MuiFormControl-marginNormal': {
+                                            margin: function (theme) {
+                                                return theme.spacing(0);
+                                            },
+                                        },
+                                        '& .MuiOutlinedInput-adornedEnd': {
+                                            paddingRight: function (theme) {
+                                                return theme.spacing(0.5);
+                                            },
+                                        },
+                                        '& .MuiIconButton-root': {
+                                            padding: function (theme) {
+                                                return theme.spacing(1);
+                                            },
+                                        },
+                                        '& .MuiAutocomplete-inputRoot': {
+                                            padding: function (theme) {
+                                                return theme.spacing(0.25);
+                                            },
+                                        },
+                                        '& .MuiAutocomplete-endAdornment': {
+                                            top: 'calc(50% - 19px)',
+                                        },
+                                    },
+                                } }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1, children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { color: "primary", variant: "contained", onClick: function () { return queryData(); }, fullWidth: true, children: t('Common.View') }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1, children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: function () { return exportData(); }, children: (0, jsx_runtime_1.jsx)(GetApp_1.default, {}) }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 3 })] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, children: isLoading ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: 2, sx: {
+                        border: '1px solid #ccc',
+                        paddingTop: 4,
+                        marginTop: 2,
+                        marginLeft: -1,
+                    }, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                padding: function (theme) { return theme.spacing(1); },
+                                paddingLeft: function (theme) { return theme.spacing(16); },
+                                paddingRight: function (theme) { return theme.spacing(16); },
+                                height: '435px',
+                            }, children: (0, jsx_runtime_1.jsx)(AWING_1.BarLineComponent, { chart: chart, dataChart: [
+                                    {
+                                        label: t('Campaign.TotalCustomer') +
+                                            ' ' +
+                                            (0, Helpers_1.roundDecimalNumber)(customerData.totalUser),
+                                        type: 'line',
+                                        data: (0, Helpers_1.fillMissingDates)(customerData === null || customerData === void 0 ? void 0 : customerData.audienceObjects.map(function (item) { return ({
+                                            x: String(item.timeline),
+                                            y: item.totalUser,
+                                        }); }), queryInput.time.startDate, queryInput.time.endDate),
+                                        fill: false,
+                                        pointStyle: 'rect',
+                                        yAxisID: 'y',
+                                        variant: "primary",
+                                    }
+                                ], type: 'line', optionCustom: {
+                                    scales: {
+                                        y: {
+                                            title: {
+                                                text: t('Statistics.View'),
+                                            },
+                                            beginAtZero: true,
+                                        },
+                                        yAxis: {
+                                            display: false,
+                                        },
+                                    },
+                                }, data: [] }) }) }) })) })] }));
+};
+exports.default = Customer;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Customer/container.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    campaignId: string;
+    startDate: Date;
+    endDate: Date;
+}
+declare const CustomerContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default CustomerContainer;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Customer/container.js

@@ -0,0 +1,76 @@
+"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 component_1 = __importDefault(require("./component"));
+var moment_1 = __importDefault(require("moment"));
+var Enum_1 = require("../../../../../ACM-AXN/Campaign/Enum");
+var Helpers_1 = require("../../../../../Utils/Helpers");
+var lodash_1 = __importDefault(require("lodash"));
+var Context_1 = __importDefault(require("../Context"));
+var exportFile_1 = require("../../../../../ACM-AXN/CampaignSchedule/exportFile");
+var CustomerContainer = function (props) {
+    var campaignId = props.campaignId, startDate = props.startDate, endDate = props.endDate;
+    var client = (0, Context_1.default)().services;
+    var _a = react_1.default.useState(true), isLoading = _a[0], setIsLoading = _a[1];
+    var _b = react_1.default.useState({
+        audienceObjects: [],
+        totalUser: 0,
+    }), customerData = _b[0], setCustomerData = _b[1];
+    // Filter and fill missing dates with 0 total
+    var filteredData = function (data, start, end) {
+        var filteredDates = [];
+        var _loop_1 = function (date) {
+            var formattedDate = (0, moment_1.default)(date).startOf('D').format('YYYYMMDD');
+            var existingData = data.find(function (item) { return String(item.timeline) === formattedDate; });
+            if (existingData) {
+                filteredDates.push(existingData);
+            }
+            else {
+                filteredDates.push({ timeline: formattedDate, totalUser: 0 });
+            }
+        };
+        for (var date = start; date <= end; date.setDate(date.getDate() + 1)) {
+            _loop_1(date);
+        }
+        return filteredDates;
+    };
+    var getCustomerData = function (time) {
+        setIsLoading(true);
+        client
+            .campaignStatisticGetCustomer((0, moment_1.default)(startDate).format(Enum_1.DATE_FORMAT), (0, moment_1.default)(endDate).format(Enum_1.DATE_FORMAT), campaignId)
+            .then(function (res) {
+            var tmp_audienceOverviews = filteredData(res.audienceObjects, lodash_1.default.cloneDeep(time.startDate), lodash_1.default.cloneDeep(time.endDate));
+            setCustomerData({
+                audienceObjects: res.audienceObjects,
+                audienceOverviews: tmp_audienceOverviews,
+                totalUser: res.totalUser,
+            });
+        })
+            .finally(function () { return setIsLoading(false); });
+    };
+    var exportData = function () {
+        (0, exportFile_1.downloadWithDataSet)("export_analytic_customer_campaign_".concat(campaignId), convertToExportData(customerData));
+    };
+    function convertToExportData(customerData) {
+        var columns = ['Date', 'Total'];
+        var exportData = [];
+        customerData.audienceOverviews.forEach(function (el) {
+            exportData.push([
+                (0, Helpers_1.dateTimeToString)((0, Helpers_1.convertTimelineToDateTime)(el.timeline, Helpers_1.TIMELINE_TYPE.DAY), 'DD/MM/YYYY'),
+                el.totalUser,
+            ]);
+        });
+        return [
+            {
+                columns: columns,
+                data: exportData,
+            },
+        ];
+    }
+    return ((0, jsx_runtime_1.jsx)(component_1.default, { startDate: startDate, endDate: endDate, isLoading: isLoading, customerData: customerData, getCustomerData: getCustomerData, exportData: exportData }));
+};
+exports.default = CustomerContainer;

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

@@ -0,0 +1 @@
+export { default } from "./container";

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Customer/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var container_1 = require("./container");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(container_1).default; } });

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Event/EventComponent.test.d.ts

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

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Event/EventComponent.test.js

@@ -0,0 +1,91 @@
+"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 react_1 = __importDefault(require("react"));
+var enzyme_1 = require("enzyme");
+var component_1 = __importDefault(require("./component"));
+var Progress_1 = require("Components/Progress");
+var ChartFilter_1 = __importDefault(require("../ChartFilter"));
+var AWING_1 = require("../../../../../AWING");
+var ChartAdvance_1 = require("Components/ChartAdvance");
+var Table_1 = __importDefault(require("./Table"));
+describe("EventComponent component", function () {
+    var mockData = {
+        isLoading: false,
+        startDate: new Date(2023, 5, 7),
+        endDate: new Date(2023, 5, 8),
+        subCampaigns: [],
+        eventData: [],
+        getEventData: jest.fn(),
+        exportData: jest.fn(),
+        domains: [],
+    };
+    it("renders without crashing", function () {
+        (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(component_1.default, __assign({}, mockData)));
+    });
+    it("displays a loading component when loading data", function () {
+        var wrapper = (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(component_1.default, __assign({}, mockData, { isLoading: true })));
+        expect(wrapper.find(Progress_1.CircularProgress)).toHaveLength(1);
+    });
+    it("displays a ChartFilter component with correct props", function () {
+        var wrapper = (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(component_1.default, __assign({}, mockData)));
+        var chartFilter = wrapper.find(ChartFilter_1.default);
+        expect(chartFilter).toHaveLength(1);
+        expect(chartFilter.prop("subCampaigns")).toEqual([]);
+        expect(chartFilter.prop("domains")).toEqual([]);
+    });
+    it("displays a MultipleHierarchicalChoice component with correct props", function () {
+        var wrapper = (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(component_1.default, __assign({}, mockData)));
+        var multiChoice = wrapper.find(AWING_1.MultipleHierarchicalChoice);
+        expect(multiChoice).toHaveLength(1);
+        expect(multiChoice.prop("options")).toEqual([]);
+    });
+    it("displays a BarLineChart component with correct props", function () {
+        var wrapper = (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(component_1.default, __assign({}, mockData)));
+        var chart = wrapper.find(ChartAdvance_1.BarLineChart);
+        expect(chart).toHaveLength(1);
+        expect(chart.prop("data")).toEqual([]);
+        expect(chart.prop("height")).toEqual(320);
+        expect(chart.prop("yAxeRightConfigs")).toEqual({
+            display: false,
+            scaleLabelDisplay: false,
+            labelString: "CTR(%)",
+            ticks: { min: 0, max: 100, maxTicksLimit: 6 },
+            gridLines: { display: false },
+        });
+    });
+    it("displays an EventComponentTable component with correct props", function () {
+        var wrapper = (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(component_1.default, __assign({}, mockData)));
+        var table = wrapper.find(Table_1.default);
+        expect(table).toHaveLength(1);
+        expect(table.prop("data")).toEqual([]);
+    });
+    it("invokes getEventData when ChartFilter component is queried", function () {
+        var wrapper = (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(component_1.default, __assign({}, mockData)));
+        var chartFilter = wrapper.find(ChartFilter_1.default);
+        var queryData = chartFilter.prop("onQueryData");
+        queryData();
+        expect(mockData.getEventData).toHaveBeenCalled();
+    });
+    it("invokes exportData when ChartFilter component is exported", function () {
+        var wrapper = (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(component_1.default, __assign({}, mockData)));
+        var chartFilter = wrapper.find(ChartFilter_1.default);
+        var exportData = chartFilter.prop("onExportData");
+        exportData();
+        expect(mockData.exportData).toHaveBeenCalled();
+    });
+});

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Event/EventContainer.test.d.ts

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

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Event/EventContainer.test.js

@@ -0,0 +1,48 @@
+"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 react_1 = __importDefault(require("react"));
+var enzyme_1 = require("enzyme");
+var container_1 = __importDefault(require("./container"));
+var component_1 = __importDefault(require("./component"));
+describe("EventContainer", function () {
+    var wrapper;
+    var props = {
+        campaignId: "abc",
+        startDate: new Date(),
+        endDate: new Date(),
+        subCampaigns: [],
+        domains: [],
+    };
+    beforeEach(function () {
+        wrapper = (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(container_1.default, __assign({}, props)));
+    });
+    it("should render without errors, should render an EventComponent", function () {
+        expect(wrapper.exists()).toBe(true);
+        expect(wrapper.find(component_1.default)).toHaveLength(1);
+    });
+    it("should render an EventComponent with correct props", function () {
+        expect(wrapper.find(component_1.default).props()).toMatchObject({
+            startDate: props.startDate,
+            endDate: props.endDate,
+            subCampaigns: props.subCampaigns,
+            isLoading: true,
+            eventData: [],
+            domains: props.domains,
+        });
+    });
+});

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Event/Table.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    data: any;
+}
+declare const EventTable: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default EventTable;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Event/Table.js

@@ -0,0 +1,33 @@
+"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 styles_1 = require("@mui/styles");
+var material_1 = require("@mui/material");
+var react_i18next_1 = require("react-i18next");
+var Helpers_1 = require("../../../../../Utils/Helpers");
+var i18n_1 = __importDefault(require("../../../../../i18n"));
+var useStyles = (0, styles_1.makeStyles)({
+    table: {
+        minWidth: 400,
+        '& > thead > tr > th': {
+            borderBottom: '1px solid #fafafa',
+        },
+        '& > tbody > tr > td': {
+            borderBottom: '1px solid #fafafa',
+        },
+    },
+});
+var EventTable = function (props) {
+    var classes = useStyles();
+    var eventDetails = props.data;
+    var t = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18n_1.default }).t;
+    var translationText = {
+        eventLabel: t('Campaign.Detail.EventLabel'),
+        number: t('Campaign.Detail.TotalEvents'),
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.TableContainer, { component: material_1.Paper, children: (0, jsx_runtime_1.jsxs)(material_1.Table, { className: classes.table, children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: translationText.eventLabel }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: translationText.number })] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: eventDetails.map(function (row) { return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: row.eventLabel }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, Helpers_1.roundDecimalNumber)(row.total) })] }, row.eventLabel)); }) })] }) }));
+};
+exports.default = EventTable;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Event/Table.test.d.ts

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

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Event/Table.test.js

@@ -0,0 +1,30 @@
+"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 enzyme_1 = require("enzyme");
+var Table_1 = __importDefault(require("./Table"));
+var Helper_1 = require("Utilities/Helper");
+describe("Table", function () {
+    var mockData = [
+        { eventLabel: "Contact Form", total: 100 },
+        { eventLabel: "Purchase", total: 50 },
+    ];
+    it("renders without crashing", function () {
+        (0, enzyme_1.shallow)((0, jsx_runtime_1.jsx)(Table_1.default, { data: mockData }));
+    });
+    it("renders the correct number of rows", function () {
+        var wrapper = (0, enzyme_1.mount)((0, jsx_runtime_1.jsx)(Table_1.default, { data: mockData }));
+        expect(wrapper.find(".MuiTableRow-root")).toHaveLength(mockData.length + 1);
+    });
+    it("renders the correct event labels and totals", function () {
+        var wrapper = (0, enzyme_1.mount)((0, jsx_runtime_1.jsx)(Table_1.default, { data: mockData }));
+        mockData.forEach(function (row) {
+            expect(wrapper.contains(row.eventLabel)).toEqual(true);
+            expect(wrapper.contains((0, Helper_1.roundDecimalNumber)(row.total))).toEqual(true);
+        });
+    });
+});

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabStatistic/Event/Util.d.ts

@@ -0,0 +1,7 @@
+import { CampaignAd } from '../../../../../ACM-AXN/Campaign/Types';
+import { AnalyticEvent, AnalyticEventModelResponse, IAnalyticCampaignSummary } from '../Types';
+export declare const convertEventData: (data: IAnalyticCampaignSummary[]) => AnalyticEventModelResponse[];
+export declare function convertToExportData(data: AnalyticEvent[], places: NonNullable<CampaignAd['places']>): {
+    columns: string[];
+    data: string[][];
+}[];