awing-library 2.1.218-dev → 2.1.219-dev

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabApprove/RowTable.d.ts

@@ -1,7 +1,8 @@
 import { IDetail } from '.';
 interface RowTableProps {
     row: IDetail;
-    updateRow?: any;
+    updateRow: (updatedRow: any, id: string) => void;
+    id: string;
 }
 export declare function RowTable(props: RowTableProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabApprove/RowTable.js

@@ -1,61 +1,68 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowTable = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var react_1 = require("react");
-function RowTable(props) {
-    var _a;
-    var row = props.row;
-    var optionsState = [
-        {
-            id: '1',
-            name: 'Chờ duyệt',
-        },
-        {
-            id: '2',
-            name: 'Duyệt',
-        },
-        {
-            id: '3',
-            name: 'Hủy',
+var optionsStatus = [
+    { value: 0, label: 'Chờ duyệt' },
+    { value: 1, label: 'Duyệt' },
+    { value: 2, label: 'Hủy' },
+];
+var ITEM_HEIGHT = 48;
+var ITEM_PADDING_TOP = 8;
+var MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+            width: 250,
         },
-    ];
-    var _b = (0, react_1.useState)([
-        optionsState[0].name,
-    ]), personName = _b[0], setPersonName = _b[1];
-    var _c = (0, react_1.useState)((_a = row === null || row === void 0 ? void 0 : row.ghichu) !== null && _a !== void 0 ? _a : ''), valueInput = _c[0], setValueInput = _c[1];
-    var handleChange = function (event) {
-        var value = event.target.value;
-        setPersonName(typeof value === 'string' ? value.split(',') : value);
-    };
-    var ITEM_HEIGHT = 48;
-    var ITEM_PADDING_TOP = 8;
-    var MenuProps = {
-        PaperProps: {
-            style: {
-                maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-                width: 250,
-            },
-        },
-    };
-    return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { style: { maxWidth: 400 }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                        display: '-webkit-box',
-                        WebkitLineClamp: 2,
-                        WebkitBoxOrient: 'vertical',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                    }, children: (0, jsx_runtime_1.jsx)(material_1.Link, { href: row === null || row === void 0 ? void 0 : row.link, sx: {
-                            wordWrap: 'break-word',
-                            wordBreak: 'break-all',
-                            color: 'blue',
-                            textDecorationColor: 'unset',
-                        }, target: "_blank", children: row === null || row === void 0 ? void 0 : row.link }) }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+    },
+};
+function RowTable(props) {
+    var _a, _b;
+    var row = props.row, updateRow = props.updateRow, id = props.id;
+    var _c = (0, react_1.useState)((_a = row === null || row === void 0 ? void 0 : row.status) !== null && _a !== void 0 ? _a : 0), selectStatus = _c[0], setSelectStatus = _c[1];
+    var _d = (0, react_1.useState)((_b = row === null || row === void 0 ? void 0 : row.ghichu) !== null && _b !== void 0 ? _b : ''), valueInput = _d[0], setValueInput = _d[1];
+    var handleStatusChange = (0, react_1.useCallback)(function (value) {
+        var newStatus = value;
+        setSelectStatus(newStatus);
+        updateRow(__assign(__assign({}, row), { status: newStatus }), id);
+    }, [row, id, updateRow]);
+    var handleInputChange = (0, react_1.useCallback)(function (event) {
+        var newValue = event.target.value;
+        setValueInput(newValue);
+        updateRow(__assign(__assign({}, row), { ghichu: newValue }), id);
+    }, [row, id, updateRow]);
+    var linkComponent = (0, react_1.useMemo)(function () { return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        }, children: (0, jsx_runtime_1.jsx)(material_1.Link, { href: row.link, sx: {
+                wordWrap: 'break-word',
+                wordBreak: 'break-all',
+                color: 'blue',
+                textDecorationColor: 'unset',
+            }, underline: "hover", target: "_blank", children: row.link }) })); }, [row.link]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { style: { maxWidth: 400 }, children: linkComponent }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                         display: 'flex',
                         flexWrap: 'wrap',
                         gap: '8px',
-                    }, children: row.subCampaigns.map(function (subCampaign, index) { return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: subCampaign.name }, index)); }) }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { sx: { m: 1, width: 300 }, children: (0, jsx_runtime_1.jsx)(material_1.Select, { value: personName, onChange: handleChange, MenuProps: MenuProps, children: optionsState.map(function (item) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: item.name, children: item.name }, item.id)); }) }) }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { value: valueInput, onChange: function (e) {
-                        setValueInput(e.target.value);
-                    } }) })] }));
+                    }, children: row.subCampaigns.map(function (subCampaign, index) { return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: subCampaign.name }, index)); }) }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { sx: { m: 1, width: 300 }, children: (0, jsx_runtime_1.jsx)(material_1.Select, { value: selectStatus, onChange: function (e) {
+                            return handleStatusChange(e.target.value);
+                        }, MenuProps: MenuProps, children: optionsStatus.map(function (item) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: item.value, children: item.label }, item.value)); }) }) }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { value: valueInput, onChange: handleInputChange }) })] }));
 }
 exports.RowTable = RowTable;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabApprove/RowTable.test.js

@@ -43,45 +43,46 @@ jest.mock('@mui/material', function () { return (__assign(__assign({}, jest.requ
         var value = _a.value, onChange = _a.onChange;
         return ((0, jsx_runtime_1.jsx)("input", { type: "text", value: value, onChange: onChange }));
     } })); });
+var mockRow = {
+    link: 'https://example.com',
+    subCampaigns: [
+        { id: '1', name: 'Campaign 1' },
+        { id: '2', name: 'Campaign 2' },
+    ],
+    ghichu: 'Initial note',
+    status: 0,
+};
+var renderUi = function () { return (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: mockRow, id: '', updateRow: function () { } })); };
 describe('RowTable', function () {
-    var mockRow = {
-        link: 'https://example.com',
-        subCampaigns: [
-            { id: '1', name: 'Campaign 1' },
-            { id: '2', name: 'Campaign 2' },
-        ],
-        ghichu: 'Initial note',
-        status: 'Chờ duyệt',
-    };
     it('renders the link correctly', function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: mockRow }));
+        renderUi();
         var link = react_1.screen.getByRole('link', { name: 'https://example.com' });
         expect(link).toBeInTheDocument();
         expect(link).toHaveAttribute('href', 'https://example.com');
     });
     it('renders sub-campaigns as chips', function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: mockRow }));
+        renderUi();
         expect(react_1.screen.getByText('Campaign 1')).toBeInTheDocument();
         expect(react_1.screen.getByText('Campaign 2')).toBeInTheDocument();
     });
     it('renders the select with correct initial value', function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: mockRow }));
+        renderUi();
         var select = react_1.screen.getByRole('combobox');
         expect(select).toHaveValue('Chờ duyệt');
     });
     it('changes the select value when a new option is chosen', function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: mockRow }));
+        renderUi();
         var select = react_1.screen.getByRole('combobox');
         react_1.fireEvent.change(select, { target: { value: 'Duyệt' } });
         expect(select).toHaveValue('Duyệt');
     });
     it('renders the text field with the initial note', function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: mockRow }));
+        renderUi();
         var textField = react_1.screen.getByRole('textbox');
         expect(textField).toHaveValue('Initial note');
     });
     it('updates the text field value when typed into', function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: mockRow }));
+        renderUi();
         var textField = react_1.screen.getByRole('textbox');
         react_1.fireEvent.change(textField, { target: { value: 'New note' } });
         expect(textField).toHaveValue('New note');

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

@@ -3,7 +3,7 @@ interface ISubCampaign {
     name: string;
 }
 export interface IDetail {
-    status: string;
+    status: number;
     link: string;
     subCampaigns: ISubCampaign[];
     ghichu: string;

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

@@ -1,27 +1,4 @@
 "use strict";
-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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 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)) {
@@ -40,7 +17,7 @@ var material_1 = require("@mui/material");
 var Hooks_1 = __importDefault(require("../../../../ACM-AXN/Campaign/Hooks"));
 var Constant_1 = require("../../../../ACM-AXN/Common/Constant");
 var lodash_1 = __importDefault(require("lodash"));
-var react_1 = __importStar(require("react"));
+var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
 var recoil_1 = require("recoil");
 var Recoils_1 = require("../Recoils");
@@ -109,7 +86,7 @@ function TabApprove() {
                         ],
                         link: renderLinkPreview(ad, domainId),
                         ghichu: 'ghichu',
-                        status: 'status',
+                        status: 0,
                     };
                 }
             })
@@ -141,6 +118,23 @@ function TabApprove() {
             return pre.includes(id) ? pre.filter(function (x) { return x !== id; }) : __spreadArray(__spreadArray([], pre, true), [id], false);
         });
     }, []);
+    var updateRow = (0, react_1.useCallback)(function (row, id) {
+        // setData((prevData) =>
+        //     prevData.map((item) => {
+        //         if (id === item.id) {
+        //             return {
+        //                 ...item,
+        //                 detail: item.detail.map((detailItem) => ({
+        //                     ...detailItem,
+        //                     ghichu: row.ghichu,
+        //                     status: row.status,
+        //                 })),
+        //             }
+        //         }
+        //         return item
+        //     })
+        // )
+    }, []);
     (0, react_1.useEffect)(function () {
         if (domainIds.length > 0) {
             service.domainsGetByIds &&
@@ -149,10 +143,15 @@ function TabApprove() {
     }, [domainIds]);
     return ((0, jsx_runtime_1.jsxs)(material_1.TableContainer, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", sx: {
                     margin: '1rem',
-                }, children: t('Campaign.Approval.GetApprovalInformation') }), (0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { style: { height: 57 }, children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { style: { width: 60, padding: '0 0 0 4px' }, children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { indeterminate: rowSelected.length > 0 &&
+                }, children: t('Campaign.Approval.GetApprovalInformation') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", color: "primary", disabled: !rowSelected.length, children: t('Campaign.Approval.SendEmail') }), (0, jsx_runtime_1.jsxs)(material_1.Table, { sx: {
+                    boxShadow: 'none',
+                    '.MuiOutlinedInput-notchedOutline': {
+                        border: 'none !important',
+                    },
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { style: { height: 57 }, children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { style: { width: 60, padding: '0 0 0 4px' }, children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { indeterminate: rowSelected.length > 0 &&
                                             rowSelected.length < dataTable.length, checked: rowSelected.length > 0 &&
-                                            rowSelected.length === dataTable.length, onChange: handleSelectAll, inputProps: { 'aria-label': 'select all ad' }, color: "primary" }) }), rowSelected.length ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { colSpan: 5, style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", color: "primary", children: t('Campaign.Approval.SendEmail') }) })) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: t('Campaign.Approval.Domain') }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { style: { maxWidth: 400 }, children: t('Campaign.Approval.LinkPreview') }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: t('Campaign.Approval.SubCampaign') }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: t('Campaign.Approval.Status') }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: t('Campaign.Approval.Note') })] }))] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: dataTable.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { rowSpan: item.detail.length + 1, style: { width: 60, padding: '0 0 0 4px' }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { display: 'flex', children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: rowSelected.some(function (x) { return x === item.id; }), color: "primary", onChange: function () {
+                                            rowSelected.length === dataTable.length, onChange: handleSelectAll, inputProps: { 'aria-label': 'select all ad' }, color: "primary" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: t('Campaign.Approval.Domain') }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { style: { maxWidth: 400 }, children: t('Campaign.Approval.LinkPreview') }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: t('Campaign.Approval.SubCampaign') }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: t('Campaign.Approval.Status') }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: t('Campaign.Approval.Note') })] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: dataTable.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { rowSpan: item.detail.length + 1, style: { width: 60, padding: '0 0 0 4px' }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { display: 'flex', children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: rowSelected.some(function (x) { return x === item.id; }), color: "primary", onChange: function () {
                                                         return handleRowSelect(item.id);
-                                                    } }) }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { rowSpan: item.detail.length + 1, children: item.domainName })] }), item.detail.map(function (detail, index2) { return ((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: detail }, index2)); })] }, index)); }) })] })] }));
+                                                    } }) }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { rowSpan: item.detail.length + 1, children: item.domainName })] }), item.detail.map(function (detail, index2) { return ((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: detail, id: item.id, updateRow: updateRow }, index2)); })] }, index)); }) })] })] }));
 }
 exports.default = TabApprove;

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

@@ -62,13 +62,6 @@ var TabStatistic_1 = __importDefault(require("./TabStatistic"));
 var Enum_2 = require("../../../ACM-AXN/Common/Enum");
 var Context_1 = require("../../../Context");
 var TabApprove_1 = __importDefault(require("./TabApprove"));
-var route = [
-    Constant_1.Constants.CAMPAIGN_INFORMATION,
-    Constant_1.Constants.CAMPAIGN_SUBCAMPAIGN,
-    Constant_1.Constants.CAMPAIGN_STATISTICS,
-    Constant_1.Constants.CAMPAIGN_CONNECT,
-    Constant_1.Constants.CAMPAIGN_PERMISSION,
-];
 var CreateOrEdit = function (props) {
     var _a;
     var _b = (0, Router_1.useParams)(), campaignId = _b.campaignId, tabName = _b.tabName;
@@ -135,25 +128,22 @@ var CreateOrEdit = function (props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    (0, react_1.useLayoutEffect)(function () {
-        if (tabName && route.includes(tabName)) {
-            setValue(String(route.indexOf(tabName)));
-        }
-    }, [tabName]);
     var getTabs = function () {
-        return !(campaignData.campaignWizard && !editModeWizard && (props === null || props === void 0 ? void 0 : props.quickWizard))
+        var baseTabs = !(campaignData.campaignWizard && !editModeWizard && (props === null || props === void 0 ? void 0 : props.quickWizard))
             ? [
                 {
                     label: t('Campaign.Info'),
                     isShow: true,
                     valid: 'tabInfomationValid',
                     component: (0, jsx_runtime_1.jsx)(TabInfomation_1.default, {}),
+                    route: Constant_1.Constants.CAMPAIGN_INFORMATION,
                 },
                 {
                     label: t('Campaign.SubCampaign'),
                     isShow: true,
                     valid: 'tabSubCampaignValid',
                     component: (0, jsx_runtime_1.jsx)(TabSubCampaign_1.default, {}),
+                    route: Constant_1.Constants.CAMPAIGN_SUBCAMPAIGN,
                 },
             ]
             : [
@@ -162,43 +152,65 @@ var CreateOrEdit = function (props) {
                     isShow: true,
                     component: props === null || props === void 0 ? void 0 : props.quickWizard({
                         ref: childRefWizard,
-                        onSubmitWizard: handleSubmit,
                     }),
+                    route: Constant_1.Constants.CAMPAIGN_WIZARD,
                 },
             ];
-    };
-    var tabsList = (0, react_1.useMemo)(function () {
-        return __spreadArray(__spreadArray([], getTabs(), true), [
+        return __spreadArray(__spreadArray([], baseTabs, true), [
             {
                 label: t('Campaign.Approval.Title'),
                 isShow: Boolean(service.attributesGetByObjectTypeCode),
                 component: (0, jsx_runtime_1.jsx)(TabApprove_1.default, {}),
+                route: Constant_1.Constants.CAMPAIGN_APPROVE,
             },
             {
                 label: t('Campaign.Statistic'),
                 isShow: componentStatus === Constant_1.Constants.CAMPAIGN_DETAIL,
                 component: ((0, jsx_runtime_1.jsx)(TabStatistic_1.default, __assign({ campaignId: campaignData.campaign.id, campaignName: campaignData.campaign.name, subCampaigns: campaignData.campaignGroups, fullPlaces: fullPlaces }, otherProps, { services: service }))),
+                route: Constant_1.Constants.CAMPAIGN_STATISTICS,
             },
             {
                 label: t('Campaign.Partner'),
                 isShow: true,
                 component: (0, jsx_runtime_1.jsx)(TabPartner_1.default, {}),
                 valid: 'tabPartnerValid',
+                route: Constant_1.Constants.CAMPAIGN_CONNECT,
             },
             {
                 label: t('Campaign.Permission'),
                 isShow: componentStatus === Constant_1.Constants.CAMPAIGN_DETAIL,
                 component: (0, jsx_runtime_1.jsx)(TabPermission_1.default, {}),
+                route: Constant_1.Constants.CAMPAIGN_PERMISSION,
             },
         ], false).filter(function (tab) { return tab.isShow; });
+    };
+    var tabsList = (0, react_1.useMemo)(function () {
+        return getTabs();
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [t, componentStatus, Constant_1.Constants, campaignData, editModeWizard]);
+    [t, componentStatus, Constant_1.Constants, campaignData, editModeWizard, campaignData.campaignWizard]);
+    (0, react_1.useLayoutEffect)(function () {
+        var tabIndex = tabsList.findIndex(function (tab) { return tab.route === tabName; });
+        if (tabIndex !== -1) {
+            setValue(String(tabIndex));
+        }
+        else {
+            var firstTabRoute = tabsList[0].route;
+            navigate((0, Router_1.generatePath)(matchPath, {
+                campaignId: campaignId,
+                tabName: firstTabRoute,
+            }), { replace: true });
+            setValue('0');
+        }
+    }, [tabName, tabsList]);
     var handleChangeTab = function (_event, newValue) {
-        navigate((0, Router_1.generatePath)(matchPath, {
-            campaignId: campaignId,
-            tabName: route[Number(newValue)],
-        }), { replace: true });
+        var newTab = tabsList[Number(newValue)];
+        if (newTab) {
+            navigate((0, Router_1.generatePath)(matchPath, {
+                campaignId: campaignId,
+                tabName: newTab.route,
+            }), { replace: true });
+        }
     };
     var getCampaignData = function () {
         if (campaignId) {

package/lib/ACM-AXN/Common/Constant.d.ts

@@ -82,6 +82,7 @@ export declare const Constants: {
     CAMPAIGN_CONNECT: string;
     CAMPAIGN_PERMISSION: string;
     CAMPAIGN_APPROVE: string;
+    CAMPAIGN_WIZARD: string;
     CAPTIVE_DOMAIN: any;
     CAMPAIGN_PREVIEW: string;
     DOMAIN_PREVIEW: string;

package/lib/ACM-AXN/Common/Constant.js

@@ -72,6 +72,7 @@ exports.Constants = {
     CAMPAIGN_CONNECT: 'Connect',
     CAMPAIGN_PERMISSION: 'Permission',
     CAMPAIGN_APPROVE: 'Approve',
+    CAMPAIGN_WIZARD: 'Wizard',
     CAPTIVE_DOMAIN: window.REACT_APP_CAPTIVE_DOMAIN,
     CAMPAIGN_PREVIEW: 'Preview/Campaign',
     DOMAIN_PREVIEW: 'Preview/Domain',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "awing-library",
-    "version": "2.1.218-dev",
+    "version": "2.1.219-dev",
     "description": "",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",