awing-library 2.1.96 → 2.1.97

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

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

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

@@ -21,6 +21,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+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 };
 };
@@ -51,6 +60,7 @@ var usePath_1 = __importDefault(require("../../../Commons/Hooks/usePath"));
 var Wrapper_1 = __importDefault(require("../../../AWING/HOC/Wrapper"));
 var TabStatistic_1 = __importDefault(require("./TabStatistic"));
 var Enum_2 = require("../../../ACM-AXN/Common/Enum");
+var Context_1 = require("../../../Context");
 var route = [
     Constant_1.Constants.CAMPAIGN_INFORMATION,
     Constant_1.Constants.CAMPAIGN_SUBCAMPAIGN,
@@ -58,7 +68,7 @@ var route = [
     Constant_1.Constants.CAMPAIGN_CONNECT,
     Constant_1.Constants.CAMPAIGN_PERMISSION,
 ];
-var CreateOrEdit = function () {
+var CreateOrEdit = function (props) {
     var _a;
     var _b = (0, Router_1.useParams)(), campaignId = _b.campaignId, tabName = _b.tabName;
     var location = (0, Router_1.useLocation)();
@@ -66,6 +76,7 @@ var CreateOrEdit = function () {
     var matchPath = (0, usePath_1.default)();
     var t = (0, react_i18next_1.useTranslation)().t;
     var _c = (0, Hooks_1.default)(), service = _c.service, otherProps = __rest(_c, ["service"]);
+    var confirm = (0, Context_1.useAwing)().appHelper.confirm;
     var _d = (0, recoil_1.useRecoilState)(Recoils_1.campaignModelState), campaignData = _d[0], setCampaignData = _d[1];
     var setCampaignPages = (0, recoil_1.useSetRecoilState)(atoms_1.campaignPageIdState);
     var setDirectories = (0, recoil_1.useSetRecoilState)(Recoils_1.directoriesState);
@@ -74,13 +85,16 @@ var CreateOrEdit = function () {
     var readyForSubmit = (0, recoil_1.useRecoilValue)(Recoils_1.readyForSubmitState);
     var setCreate = (0, recoil_1.useSetRecoilState)(Recoils_1.isCreateState);
     var _f = (0, react_1.useState)(), fullPlaces = _f[0], setFullPlaces = _f[1];
+    var _g = (0, react_1.useState)(false), validWizad = _g[0], setValidWizad = _g[1];
+    var _h = (0, react_1.useState)(false), editModeWizard = _h[0], setEditModeWizard = _h[1];
+    var childRefWizard = (0, react_1.useRef)(null);
     var tabValid = {
         tabInfomationValid: (0, recoil_1.useRecoilValue)(Recoils_1.tabInfomationValidState),
         tabSubCampaignValid: (0, recoil_1.useRecoilValue)(Recoils_1.tabSubCampaignValidState),
         tabPartnerValid: (0, recoil_1.useRecoilValue)(Recoils_1.tabPartnerValidState),
     };
-    var _g = (0, react_1.useState)('0'), value = _g[0], setValue = _g[1];
-    var _h = (0, react_1.useState)(true), loading = _h[0], setLoading = _h[1];
+    var _j = (0, react_1.useState)('0'), value = _j[0], setValue = _j[1];
+    var _k = (0, react_1.useState)(true), loading = _k[0], setLoading = _k[1];
     var componentStatus = (0, react_1.useMemo)(function () {
         return location.pathname.includes(Constant_1.Constants.CAMPAIGN_DETAIL) &&
             !!campaignId
@@ -125,20 +139,35 @@ var CreateOrEdit = function () {
             setValue(String(route.indexOf(tabName)));
         }
     }, [tabName]);
+    var getTabs = function () {
+        return !(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, {}),
+                },
+                {
+                    label: t('Campaign.SubCampaign'),
+                    isShow: true,
+                    valid: 'tabSubCampaignValid',
+                    component: (0, jsx_runtime_1.jsx)(TabSubCampaign_1.default, {}),
+                },
+            ]
+            : [
+                {
+                    label: t('Campaign.Wizard'),
+                    isShow: true,
+                    component: props === null || props === void 0 ? void 0 : props.quickWizard({
+                        ref: childRefWizard,
+                        onSubmitWizard: handleSubmit,
+                    }),
+                },
+            ];
+    };
     var tabsList = (0, react_1.useMemo)(function () {
-        return [
-            {
-                label: t('Campaign.Info'),
-                isShow: true,
-                valid: 'tabInfomationValid',
-                component: (0, jsx_runtime_1.jsx)(TabInfomation_1.default, {}),
-            },
-            {
-                label: t('Campaign.SubCampaign'),
-                isShow: true,
-                valid: 'tabSubCampaignValid',
-                component: (0, jsx_runtime_1.jsx)(TabSubCampaign_1.default, {}),
-            },
+        return __spreadArray(__spreadArray([], getTabs(), true), [
             {
                 label: t('Campaign.Statistic'),
                 isShow: componentStatus === Constant_1.Constants.CAMPAIGN_DETAIL,
@@ -155,10 +184,10 @@ var CreateOrEdit = function () {
                 isShow: componentStatus === Constant_1.Constants.CAMPAIGN_DETAIL,
                 component: (0, jsx_runtime_1.jsx)(TabPermission_1.default, {}),
             },
-        ].filter(function (tab) { return tab.isShow; });
+        ], false).filter(function (tab) { return tab.isShow; });
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [t, componentStatus, Constant_1.Constants, campaignData]);
+    [t, componentStatus, Constant_1.Constants, campaignData, editModeWizard]);
     var handleChangeTab = function (_event, newValue) {
         navigate((0, Router_1.generatePath)(matchPath, {
             campaignId: campaignId,
@@ -221,25 +250,52 @@ var CreateOrEdit = function () {
     };
     var handleSubmit = function () {
         var _a;
-        if (!(0, Utils_1.adsClassCValid)(campaignData.campaignGroups
-            .filter(function (x) {
-            return (0, Utils_1.checkPriority)(x.campaignGroup.priority, Enum_1.CampaignPriority.ClassC);
-        })
-            .flatMap(function (x) { return x.ads; }))) {
-            return Promise.reject(t('Campaign.CClassDuplicatePlace'));
+        if (campaignData.campaignWizard && !editModeWizard && (props === null || props === void 0 ? void 0 : props.quickWizard)) {
+            if (childRefWizard.current) {
+                return childRefWizard.current.onSubmit({
+                    campaignPartner: campaignData.campaignPartner,
+                });
+            }
         }
-        var dataSubmit = __assign(__assign({}, campaignData), { campaignAttributes: campaignData.campaignAttributes.filter(Boolean) });
-        if (!((_a = dataSubmit.campaignPartner) === null || _a === void 0 ? void 0 : _a.isSendApi)) {
-            delete dataSubmit.campaignPartner;
+        else {
+            if (!(0, Utils_1.adsClassCValid)(campaignData.campaignGroups
+                .filter(function (x) {
+                return (0, Utils_1.checkPriority)(x.campaignGroup.priority, Enum_1.CampaignPriority.ClassC);
+            })
+                .flatMap(function (x) { return x.ads; }))) {
+                return Promise.reject(t('Campaign.CClassDuplicatePlace'));
+            }
+            var dataSubmit = __assign(__assign({}, campaignData), { campaignAttributes: campaignData.campaignAttributes.filter(Boolean), campaignWizard: undefined });
+            if (!((_a = dataSubmit.campaignPartner) === null || _a === void 0 ? void 0 : _a.isSendApi)) {
+                delete dataSubmit.campaignPartner;
+            }
+            if (componentStatus === Constant_1.Constants.CAMPAIGN_DETAIL) {
+                return service.campaignsPut(campaignId, dataSubmit);
+            }
+            else {
+                return service.campaignsPost(dataSubmit);
+            }
         }
-        if (componentStatus === Constant_1.Constants.CAMPAIGN_DETAIL) {
-            return service.campaignsPut(campaignId, dataSubmit);
+    };
+    var handleDisableButtonSubmit = function () {
+        if (campaignData.campaignWizard && !editModeWizard && (props === null || props === void 0 ? void 0 : props.quickWizard)) {
+            return validWizad;
         }
-        else {
-            return service.campaignsPost(dataSubmit);
+        return !readyForSubmit || !confirmExit;
+    };
+    var handleClose = function () {
+        if (campaignData.campaignWizard && !editModeWizard && (props === null || props === void 0 ? void 0 : props.quickWizard)) {
+            if (childRefWizard.current) {
+                childRefWizard.current.resetData();
+            }
         }
     };
-    return ((0, jsx_runtime_1.jsx)(ClassicDrawer_1.default, { title: "".concat(t(['Campaign', campaignId ? 'TitleDetail' : 'Create'].join('.'))).concat(campaignId ? ": ".concat((_a = campaignData === null || campaignData === void 0 ? void 0 : campaignData.campaign) === null || _a === void 0 ? void 0 : _a.name) : '', "\n               "), onSubmit: handleSubmit, disableButtonSubmit: !readyForSubmit || !confirmExit, confirmExit: confirmExit, childrenWrapperStyle: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, sx: {
+    var handleSaveProfessionalEditing = function () {
+        return new Promise(function (resolve, reject) {
+            confirm(function () { var _a; return (_a = handleSubmit()) === null || _a === void 0 ? void 0 : _a.then(resolve); }, function () { return reject(); }, t("Campaign.SwitchToProfessionalEditMode"));
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)(ClassicDrawer_1.default, { title: "".concat(t(['Campaign', campaignId ? 'TitleDetail' : 'Create'].join('.'))).concat(campaignId ? ": ".concat((_a = campaignData === null || campaignData === void 0 ? void 0 : campaignData.campaign) === null || _a === void 0 ? void 0 : _a.name) : '', "\n               "), onSubmit: function () { return editModeWizard ? handleSaveProfessionalEditing() : handleSubmit(); }, disableButtonSubmit: handleDisableButtonSubmit(), confirmExit: confirmExit, childrenWrapperStyle: { padding: 0 }, onClose: handleClose, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, sx: {
                 display: 'flex',
                 flexDirection: 'column',
                 flexGrow: 1,
@@ -251,7 +307,21 @@ var CreateOrEdit = function () {
                                             ? !tabValid[tab === null || tab === void 0 ? void 0 : tab.valid]
                                             : undefined, errContent: (0, jsx_runtime_1.jsx)("span", { style: {
                                                 marginLeft: '-5px',
-                                            }, children: "*" }) }) }, idx)); }) }) }), tabsList.map(function (tab, idx) { return ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, { sx: { padding: '0' }, value: String(idx), children: tab.component }, idx)); })] }) })) }) }));
+                                            }, children: "*" }) }) }, idx)); }) }) }), campaignData.campaignWizard && !editModeWizard &&
+                            (props === null || props === void 0 ? void 0 : props.quickWizard) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props === null || props === void 0 ? void 0 : props.quickWizard({
+                                    ref: childRefWizard,
+                                    onSubmitWizard: handleSubmit,
+                                    handleValidWizad: setValidWizad,
+                                    handleEditMode: setEditModeWizard,
+                                    sxEdit: {
+                                        display: value === '0'
+                                            ? 'block'
+                                            : 'none',
+                                    },
+                                    type: props.type,
+                                }), tabsList.map(function (tab, idx) {
+                                    return idx !== 0 && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, { sx: { padding: '0' }, value: String(idx), children: tab.component }, idx));
+                                })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: tabsList.map(function (tab, idx) { return ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, { sx: { padding: '0' }, value: String(idx), children: tab.component }, idx)); }) }))] }) })) }) }));
 };
 // eslint-disable-next-line import/no-anonymous-default-export
 exports.default = (0, Wrapper_1.default)(CreateOrEdit, { component: recoil_1.RecoilRoot });

package/lib/ACM-AXN/Campaign/Types.d.ts

@@ -43,6 +43,12 @@ export type CampaignModel = {
     campaignGroups: CampaignGroupModel[];
     campaignAttributes: CampaignAttribute[];
     campaignPartner?: CampaignPartner;
+    campaignWizard?: {
+        id?: number;
+        campaignId?: string;
+        wizardGroupId?: number;
+        wizardId?: string;
+    };
 };
 export type Campaign = {
     id: string;
@@ -272,5 +278,6 @@ export interface CampaignFeatureProps {
     domainId: string;
     configs: any;
     isAxn?: boolean;
+    quickWizard?: (p?: any) => JSX.Element;
 }
 export {};

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

@@ -52,11 +52,11 @@ var Campaign = function (props) {
         },
         {
             param: Constant_1.Constants.CAMPAIGN_DETAIL + '/:campaignId/:tabName/*',
-            element: (0, jsx_runtime_1.jsx)(CreateOrEdit_1.default, {}),
+            element: (0, jsx_runtime_1.jsx)(CreateOrEdit_1.default, { quickWizard: props.quickWizard }),
         },
         {
             param: Constant_1.Constants.CAMPAIGN_CLONE + '/:campaignId/:tabName/*',
-            element: (0, jsx_runtime_1.jsx)(CreateOrEdit_1.default, {}),
+            element: ((0, jsx_runtime_1.jsx)(CreateOrEdit_1.default, { quickWizard: props.quickWizard, type: Constant_1.Constants.CAMPAIGN_CLONE })),
         },
     ];
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Container_1.default, {}), (0, jsx_runtime_1.jsx)(Router_1.Routes, { children: paths.map(function (p) { return ((0, jsx_runtime_1.jsx)(Router_1.Route, { path: p.param, element: p.element }, p.param)); }) })] }));

package/lib/ACM-AXN/GeoFencing/component.js

@@ -55,6 +55,6 @@ function Component(props) {
                                         }
                                     }, error: !!(radius &&
                                         Number(radius) <
-                                            ((limit === null || limit === void 0 ? void 0 : limit.min) || constants_1.MIN_RADIUS)) }) })] })), (isOnlyMap || showMap) && ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, style: { position: "relative", marginTop: "16px" }, children: (0, jsx_runtime_1.jsx)(AWING_1.GoogleMap, { onUpdateLocation: onGoongMapSelect, apiKey: configs.GOOGLE_MAP_KEY, markerPosition: marker || undefined, geofenceRadius: radius ? Number(radius) : 0 }) }))] })] }));
+                                            ((limit === null || limit === void 0 ? void 0 : limit.min) || constants_1.MIN_RADIUS)) }) })] })), (isOnlyMap || showMap) && ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, style: { position: "relative", marginTop: "16px" }, children: (0, jsx_runtime_1.jsx)(AWING_1.GoogleMap, { defaultLocation: { lat: (marker === null || marker === void 0 ? void 0 : marker.latitude) || 0, lng: (marker === null || marker === void 0 ? void 0 : marker.longitude) || 0 }, onUpdateLocation: onGoongMapSelect, apiKey: configs.GOOGLE_MAP_KEY, geofenceRadius: radius ? Number(radius) : 0 }) }))] })] }));
 }
 exports.default = Component;

package/lib/AWING/BasicDataForm/BasicDataForm.js

@@ -161,7 +161,7 @@ var BasicDataForm = function (props) {
                                 width: '100%',
                             }, children: actions }))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: 2, children: fields.map(function (fieldDef, index) {
                         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-                        var fieldName = fieldDef.fieldName, _t = fieldDef.type, type = _t === void 0 ? 'text' : _t, checkValid = fieldDef.checkValid, options = fieldDef.options, loading = fieldDef.loading, customeFieldChange = fieldDef.customeFieldChange, AsynchronousAutocompleteProps = fieldDef.AsynchronousAutocompleteProps, SearchProps = fieldDef.SearchProps, defaultValue = fieldDef.defaultValue, value = fieldDef.value, other = __rest(fieldDef, ["fieldName", "type", "checkValid", "options", "loading", "customeFieldChange", "AsynchronousAutocompleteProps", "SearchProps", "defaultValue", "value"]);
+                        var fieldName = fieldDef.fieldName, _t = fieldDef.type, type = _t === void 0 ? 'text' : _t, checkValid = fieldDef.checkValid, options = fieldDef.options, loading = fieldDef.loading, customeFieldChange = fieldDef.customeFieldChange, AsynchronousAutocompleteProps = fieldDef.AsynchronousAutocompleteProps, AutocompleteBasicProps = fieldDef.AutocompleteBasicProps, SearchProps = fieldDef.SearchProps, defaultValue = fieldDef.defaultValue, value = fieldDef.value, other = __rest(fieldDef, ["fieldName", "type", "checkValid", "options", "loading", "customeFieldChange", "AsynchronousAutocompleteProps", "AutocompleteBasicProps", "SearchProps", "defaultValue", "value"]);
                         var fieldValue = value !== null && value !== void 0 ? value : currentObj[fieldName];
                         var showError = currentValid[fieldName] !== undefined &&
                             !currentValid[fieldName];
@@ -191,7 +191,7 @@ var BasicDataForm = function (props) {
                                                             .endAdornment] })) }), error: showError, helperText: showError
                                                 ? (_a = fieldDef.helperText) !== null && _a !== void 0 ? _a : t('Common.InvalidData')
                                                 : '' })));
-                                    } }, index));
+                                    }, disableClearable: AutocompleteBasicProps === null || AutocompleteBasicProps === void 0 ? void 0 : AutocompleteBasicProps.disableClearable }, index));
                                 break;
                             case 'checkbox':
                                 currentField = ((0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, required: fieldDef.required, children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { id: fieldName, name: fieldName, checked: fieldValue, onChange: function (event) {
@@ -219,7 +219,7 @@ var BasicDataForm = function (props) {
                                     } }, fieldDef.DateProps), fieldName));
                                 break;
                             case 'date-range':
-                                currentField = ((0, jsx_runtime_1.jsx)(DateRangePicker_1.default, __assign({ variant: "outlined", textFieldProps: {
+                                currentField = ((0, jsx_runtime_1.jsx)(DateRangePicker_1.default, __assign({ required: fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.required, variant: "outlined", textFieldProps: {
                                         fullWidth: true,
                                     }, value: {
                                         startDate: (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue[0]) || null,

package/lib/AWING/BasicDataForm/interface.d.ts

@@ -37,6 +37,9 @@ export interface BasicFieldDefinition extends BaseTextFieldProps {
      */
     customeFieldChange?(fieldValue: any): DataObject;
     AsynchronousAutocompleteProps?: AsynchronousAutocompleteProps;
+    AutocompleteBasicProps?: {
+        disableClearable?: boolean;
+    };
     SearchProps?: {
         searchResult?: any;
         error: boolean;

package/lib/AWING/DateRangePicker/component.js

@@ -144,7 +144,7 @@ var defaultProps = {
 };
 var DateRangePickerWrapper = function (props) {
     var classes = useStyles();
-    var value = props.value, error = props.error, helperText = props.helperText, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, _b = props.autoFocusEndDate, autoFocusEndDate = _b === void 0 ? false : _b, _c = props.initialStartDate, initialStartDate = _c === void 0 ? null : _c, _d = props.initialEndDate, initialEndDate = _d === void 0 ? null : _d, _e = props.callback, callback = _e === void 0 ? function () { } : _e, _f = props.label, label = _f === void 0 ? null : _f, _g = props.isShowCalendarInfo, isShowCalendarInfo = _g === void 0 ? false : _g, variant = props.variant, openDirection = props.openDirection, _h = props.isDayBlocked, isDayBlocked = _h === void 0 ? function (day) { return false; } : _h, _j = props.handleValid, handleValid = _j === void 0 ? function () { } : _j, _k = props.handleDateRangePopover, handleDateRangePopover = _k === void 0 ? function () { } : _k, disableHelperText = props.disableHelperText, _l = props.isFutureDate, isFutureDate = _l === void 0 ? false : _l;
+    var value = props.value, error = props.error, helperText = props.helperText, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, _b = props.autoFocusEndDate, autoFocusEndDate = _b === void 0 ? false : _b, _c = props.initialStartDate, initialStartDate = _c === void 0 ? null : _c, _d = props.initialEndDate, initialEndDate = _d === void 0 ? null : _d, _e = props.callback, callback = _e === void 0 ? function () { } : _e, _f = props.label, label = _f === void 0 ? null : _f, _g = props.isShowCalendarInfo, isShowCalendarInfo = _g === void 0 ? false : _g, variant = props.variant, openDirection = props.openDirection, _h = props.isDayBlocked, isDayBlocked = _h === void 0 ? function (day) { return false; } : _h, _j = props.handleValid, handleValid = _j === void 0 ? function () { } : _j, _k = props.handleDateRangePopover, handleDateRangePopover = _k === void 0 ? function () { } : _k, disableHelperText = props.disableHelperText, _l = props.isFutureDate, isFutureDate = _l === void 0 ? false : _l, _m = props.required, required = _m === void 0 ? false : _m;
     var initialFocusedInput = null;
     if (autoFocus) {
         initialFocusedInput = constants_1.START_DATE;
@@ -152,12 +152,12 @@ var DateRangePickerWrapper = function (props) {
     else if (autoFocusEndDate) {
         initialFocusedInput = constants_1.END_DATE;
     }
-    var _m = (0, react_1.useState)(initialFocusedInput), focusedInput = _m[0], setFocusedInput = _m[1];
-    var _o = (0, react_1.useState)(initialStartDate), startDate = _o[0], setStartDate = _o[1];
-    var _p = (0, react_1.useState)(initialEndDate), endDate = _p[0], setEndDate = _p[1];
-    var _q = (0, react_1.useState)(true), isValid = _q[0], setIsValid = _q[1];
-    var _r = (0, react_1.useState)("".concat(moment(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate).format('DD/MM/YYYY'), " - ").concat(moment(value ? value === null || value === void 0 ? void 0 : value.endDate : endDate).format('DD/MM/YYYY'))), inputValue = _r[0], setInputValue = _r[1];
-    var _s = (0, react_i18next_1.useTranslation)(), i18n = _s.i18n, t = _s.t;
+    var _o = (0, react_1.useState)(initialFocusedInput), focusedInput = _o[0], setFocusedInput = _o[1];
+    var _p = (0, react_1.useState)(initialStartDate), startDate = _p[0], setStartDate = _p[1];
+    var _q = (0, react_1.useState)(initialEndDate), endDate = _q[0], setEndDate = _q[1];
+    var _r = (0, react_1.useState)(true), isValid = _r[0], setIsValid = _r[1];
+    var _s = (0, react_1.useState)("".concat(moment(value ? value === null || value === void 0 ? void 0 : value.startDate : startDate).format('DD/MM/YYYY'), " - ").concat(moment(value ? value === null || value === void 0 ? void 0 : value.endDate : endDate).format('DD/MM/YYYY'))), inputValue = _s[0], setInputValue = _s[1];
+    var _t = (0, react_i18next_1.useTranslation)(), i18n = _t.i18n, t = _t.t;
     var momentLanguage = (0, react_1.useMemo)(function () { var _a, _b; return ((_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.language) === null || _a === void 0 ? void 0 : _a.split('-')) === null || _b === void 0 ? void 0 : _b[0]) || 'en'; }, [i18n.language]);
     (0, react_1.useEffect)(function () {
         if (value !== undefined) {
@@ -330,8 +330,9 @@ var DateRangePickerWrapper = function (props) {
         'isDayBlocked',
         'handleValid',
         'handleDateRangePopover',
+        'required',
     ]);
-    var _t = react_1.default.useState(null), anchorElPopover = _t[0], setAnchorElPopover = _t[1];
+    var _u = react_1.default.useState(null), anchorElPopover = _u[0], setAnchorElPopover = _u[1];
     var openPopper = Boolean(anchorElPopover);
     var id = openPopper ? 'datePicker-popper' : undefined;
     var popperRef = react_1.default.useRef();
@@ -352,7 +353,7 @@ var DateRangePickerWrapper = function (props) {
     };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_input_mask_1.default, { mask: "99/99/9999 - 99/99/9999", maskplaceholder: "dd/mm/yyyy - dd/mm/yyyy", value: inputValue, onChange: handleChangeInput, disabled: props.disabled, children: function () {
                     var _a;
-                    return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ "aria-describedby": id, variant: variant, label: label, error: !isValid || error, helperText: !disableHelperText
+                    return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ required: required, "aria-describedby": id, variant: variant, label: label, error: !isValid || error, helperText: !disableHelperText
                             ? error
                                 ? helperText || t('Common.InvalidData')
                                 : !isValid

package/lib/AWING/DateRangePicker/interface.d.ts

@@ -1,5 +1,6 @@
 import { MomentInput, Moment } from "moment";
 export interface DateRangePickerProps {
+    required?: boolean;
     disabled?: boolean;
     autoFocus?: boolean;
     autoFocusEndDate?: boolean;

package/lib/AWING/GoogleMap/GGMap.d.ts

@@ -1,3 +1,3 @@
 import { IGoogleMapProps } from './interface';
-declare const GGMap: ({ defaultLocation, onUpdateLocation, apiKey, markerPosition, geofenceRadius }: IGoogleMapProps) => import("react/jsx-runtime").JSX.Element;
+declare const GGMap: ({ defaultLocation, onUpdateLocation, apiKey, geofenceRadius, sxMap, isDisplayAutoComplete, isTypeTracking, markerPositions, zoomCustomed }: IGoogleMapProps) => import("react/jsx-runtime").JSX.Element;
 export default GGMap;

package/lib/AWING/GoogleMap/GGMap.js

@@ -1,4 +1,27 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -7,25 +30,53 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var api_1 = require("@react-google-maps/api");
 var lodash_1 = __importDefault(require("lodash"));
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var react_i18next_1 = require("react-i18next");
+var utils_1 = require("./utils");
 var mapContainerStyle = {
     height: '320px',
     width: '100%',
 };
 var libraries = ['places'];
+var stylesDefault = {
+    position: 'relative',
+    '& .pac-container.pac-logo': {
+        top: "55px!important",
+        left: "0!important",
+    }
+};
 var GGMap = function (_a) {
-    var _b, _c;
-    var defaultLocation = _a.defaultLocation, onUpdateLocation = _a.onUpdateLocation, apiKey = _a.apiKey, markerPosition = _a.markerPosition, geofenceRadius = _a.geofenceRadius;
+    var defaultLocation = _a.defaultLocation, onUpdateLocation = _a.onUpdateLocation, apiKey = _a.apiKey, geofenceRadius = _a.geofenceRadius, sxMap = _a.sxMap, _b = _a.isDisplayAutoComplete, isDisplayAutoComplete = _b === void 0 ? false : _b, _c = _a.isTypeTracking, isTypeTracking = _c === void 0 ? false : _c, markerPositions = _a.markerPositions, zoomCustomed = _a.zoomCustomed;
     var t = (0, react_i18next_1.useTranslation)().t;
     var _d = (0, react_1.useState)(), map = _d[0], setMap = _d[1];
     var _e = (0, react_1.useState)(''), error = _e[0], setError = _e[1];
     var autocompleteRef = (0, react_1.useRef)(null);
     var boxRef = (0, react_1.useRef)(null);
-    var _f = (0, react_1.useState)(15), zoom = _f[0], setZoom = _f[1];
+    var makerRefs = (0, react_1.useRef)([]);
+    var _f = (0, react_1.useState)(zoomCustomed || 5), zoom = _f[0], setZoom = _f[1];
     var onLoad = function (autocomplete) {
         autocompleteRef.current = autocomplete;
     };
+    var markerConvert = (0, react_1.useMemo)(function () {
+        var _a;
+        var coordMap = (_a = markerPositions === null || markerPositions === void 0 ? void 0 : markerPositions.reduce(function (acc, _a) {
+            var longitude = _a.longitude, latitude = _a.latitude;
+            var key = "".concat(longitude, ",").concat(latitude);
+            if (acc[key]) {
+                acc[key].count += 1;
+            }
+            else {
+                acc[key] = { longitude: longitude, latitude: latitude, count: 1 };
+            }
+            return acc;
+        }, {})) !== null && _a !== void 0 ? _a : {};
+        return Object.values(coordMap).map(function (item, index, arr) {
+            var _a;
+            item.radius = ((_a = item.count) !== null && _a !== void 0 ? _a : 0) / arr.reduce(function (acc, item) { var _a; return acc + ((_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 0); }, 0) * (Math.pow(2, 10 - Math.max(zoom, 4))) * 8000;
+            return item;
+        });
+        // Convert the object to an array
+    }, [markerPositions, zoom]);
     var onPlaceChanged = function () {
         var _a, _b, _c, _d;
         if (autocompleteRef.current !== null) {
@@ -33,7 +84,7 @@ var GGMap = function (_a) {
             if (place.geometry) {
                 var newLat = (_b = (_a = place === null || place === void 0 ? void 0 : place.geometry) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.lat();
                 var newLng = (_d = (_c = place === null || place === void 0 ? void 0 : place.geometry) === null || _c === void 0 ? void 0 : _c.location) === null || _d === void 0 ? void 0 : _d.lng();
-                onUpdateLocation({
+                onUpdateLocation && onUpdateLocation({
                     latitude: newLat !== null && newLat !== void 0 ? newLat : 0,
                     longitude: newLng !== null && newLng !== void 0 ? newLng : 0,
                 });
@@ -45,44 +96,13 @@ var GGMap = function (_a) {
             console.log('Autocomplete is not loaded yet!');
         }
     };
-    var onLoadMap = function (mapInstance) {
+    var onLoadMap = react_1.default.useCallback(function (mapInstance) {
         setMap(mapInstance);
-    };
-    //Lấy geo fencing
-    // const getDistance = (
-    //     lat1: number,
-    //     lon1: number,
-    //     lat2: number,
-    //     lon2: number
-    // ) => {
-    //     const R = 6371e3; // Radius of the Earth in meters
-    //     const φ1 = (lat1 * Math.PI) / 180;
-    //     const φ2 = (lat2 * Math.PI) / 180;
-    //     const Δφ = ((lat2 - lat1) * Math.PI) / 180;
-    //     const Δλ = ((lon2 - lon1) * Math.PI) / 180;
-    //     const a =
-    //         Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
-    //         Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
-    //     const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-    //     const distance = R * c; // Distance in meters
-    //     return distance;
-    // };
+    }, []);
     //Lấy vị trí hiện tại của người dùng
     var getCurrentLocation = function () {
-        var handleLocationGeoFencing = function (position) {
-            var userLat = position.coords.latitude;
-            var userLng = position.coords.longitude;
-            // const distance = getDistance(
-            //     userLat,
-            //     userLng,
-            //     markerPosition.lat,
-            //     markerPosition.lng
-            // );
-            // console.log("distance", distance);
-        };
         var showPosition = function (position) {
-            handleLocationGeoFencing(position);
-            onUpdateLocation({
+            onUpdateLocation && onUpdateLocation({
                 latitude: position.coords.latitude,
                 longitude: position.coords.longitude,
             });
@@ -110,53 +130,106 @@ var GGMap = function (_a) {
             setError('Geolocation is not supported by this browser.');
         }
     };
-    var onMapClick = function (e) {
+    var onMapClick = react_1.default.useCallback(function (e) {
         var _a, _b, _c, _d;
-        onUpdateLocation({
+        onUpdateLocation && onUpdateLocation({
             latitude: (_b = (_a = e === null || e === void 0 ? void 0 : e.latLng) === null || _a === void 0 ? void 0 : _a.lat()) !== null && _b !== void 0 ? _b : 0,
             longitude: (_d = (_c = e === null || e === void 0 ? void 0 : e.latLng) === null || _c === void 0 ? void 0 : _c.lng()) !== null && _d !== void 0 ? _d : 0,
         });
-    };
+    }, []);
     (0, react_1.useEffect)(function () {
         if (lodash_1.default.isNil(defaultLocation) || defaultLocation.lat === 0 || defaultLocation.lng === 0) {
             getCurrentLocation();
         }
     }, [defaultLocation]);
-    var marker = { lat: (_b = Number(markerPosition === null || markerPosition === void 0 ? void 0 : markerPosition.latitude)) !== null && _b !== void 0 ? _b : 0, lng: (_c = Number(markerPosition === null || markerPosition === void 0 ? void 0 : markerPosition.longitude)) !== null && _c !== void 0 ? _c : 0 };
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-            position: 'relative',
-            '& .pac-container.pac-logo': {
-                top: "55px!important",
-                left: "0!important",
-            }
-        }, ref: boxRef, children: (0, jsx_runtime_1.jsxs)(api_1.LoadScript, { googleMapsApiKey: apiKey || '', libraries: libraries, children: [(0, jsx_runtime_1.jsx)(api_1.Autocomplete, { onPlaceChanged: onPlaceChanged, onLoad: onLoad, children: (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: t('Common.PlaceHolderLocation'), onFocus: function () {
-                            var _a;
-                            var ggSuggest = document.querySelector('.pac-container.pac-logo');
-                            if (ggSuggest) {
-                                (_a = boxRef.current) === null || _a === void 0 ? void 0 : _a.append(ggSuggest);
-                            }
-                        }, style: {
-                            boxSizing: "border-box",
-                            border: "1px solid transparent",
-                            width: "378px",
-                            height: "40px",
-                            padding: "0 12px",
-                            borderRadius: "3px",
-                            boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
-                            fontSize: "14px",
-                            outline: "none",
-                            textOverflow: "ellipses",
-                            position: 'inherit',
-                            right: '3%',
-                            margin: '10px 0',
-                            zIndex: 99,
-                            top: '50px',
-                        } }) }), (0, jsx_runtime_1.jsx)(api_1.GoogleMap, { id: "map", mapContainerStyle: mapContainerStyle, zoom: zoom, center: marker, onLoad: onLoadMap, onClick: onMapClick, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(api_1.Marker, { position: marker }), (0, jsx_runtime_1.jsx)(api_1.Circle, { center: marker, radius: geofenceRadius, options: {
-                                    fillColor: 'red',
-                                    fillOpacity: 0.2,
-                                    strokeColor: 'red',
-                                    strokeOpacity: 1,
-                                    strokeWeight: 2,
-                                } })] }) })] }) }));
+    (0, react_1.useEffect)(function () {
+        if (map) {
+            makerRefs.current.forEach(function (marker) {
+                marker.setMap(null);
+            });
+            makerRefs.current = markerConvert.map(function (item) {
+                var _a, _b;
+                var maker = new google.maps.Circle({
+                    center: { lat: (_a = item.latitude) !== null && _a !== void 0 ? _a : 0, lng: (_b = item.longitude) !== null && _b !== void 0 ? _b : 0 },
+                    radius: item.radius,
+                    strokeColor: '#4285F4',
+                    strokeOpacity: 0.8,
+                    strokeWeight: 2,
+                    fillColor: "#4285F4",
+                    fillOpacity: 0.35,
+                });
+                maker.setMap(map);
+                return maker;
+            });
+        }
+        console.log(markerConvert);
+    }, [markerConvert]);
+    var handleZoom = (0, react_1.useCallback)(function (zoom) {
+        setZoom(zoom);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: sxMap ? sxMap : stylesDefault, ref: boxRef, children: (0, jsx_runtime_1.jsxs)(api_1.LoadScript, { googleMapsApiKey: apiKey || '', libraries: libraries, children: [!isDisplayAutoComplete &&
+                    ((0, jsx_runtime_1.jsx)(api_1.Autocomplete, { onPlaceChanged: onPlaceChanged, onLoad: onLoad, children: (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: t('Common.PlaceHolderLocation'), onFocus: function () {
+                                var _a;
+                                var ggSuggest = document.querySelector('.pac-container.pac-logo');
+                                if (ggSuggest) {
+                                    (_a = boxRef.current) === null || _a === void 0 ? void 0 : _a.append(ggSuggest);
+                                }
+                            }, style: {
+                                boxSizing: "border-box",
+                                border: "1px solid transparent",
+                                width: "378px",
+                                height: "40px",
+                                padding: "0 12px",
+                                borderRadius: "3px",
+                                boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
+                                fontSize: "14px",
+                                outline: "none",
+                                textOverflow: "ellipses",
+                                position: 'inherit',
+                                right: '3%',
+                                margin: '10px 0',
+                                zIndex: 99,
+                                top: '50px',
+                            } }) })), !isTypeTracking ? (0, jsx_runtime_1.jsx)(MaprenderWithoutTracking, { onLoadMap: onLoadMap, onMapClick: onMapClick, onZoomChanged: handleZoom, defaultLocation: defaultLocation !== null && defaultLocation !== void 0 ? defaultLocation : { lat: 21.0063107, lng: 105.8279467 }, geofenceRadius: geofenceRadius !== null && geofenceRadius !== void 0 ? geofenceRadius : 0, zoomCustomed: zoomCustomed !== null && zoomCustomed !== void 0 ? zoomCustomed : 10 }) : (0, jsx_runtime_1.jsx)(Maprender, { onLoadMap: onLoadMap, onMapClick: onMapClick, onZoomChanged: handleZoom })] }) }));
 };
 exports.default = GGMap;
+var Maprender = react_1.default.memo(function (_a) {
+    var onLoadMap = _a.onLoadMap, onMapClick = _a.onMapClick, onZoomChanged = _a.onZoomChanged;
+    var mapInstance = (0, react_1.useRef)(null);
+    return (0, jsx_runtime_1.jsx)(api_1.GoogleMap, { id: "map", mapContainerStyle: { width: "100%", height: "".concat(521, "px") }, zoom: 3, center: {
+            lat: 21.0063107,
+            lng: 105.8279467
+        }, onZoomChanged: function () {
+            var _a, _b;
+            onZoomChanged((_b = (_a = mapInstance.current) === null || _a === void 0 ? void 0 : _a.getZoom()) !== null && _b !== void 0 ? _b : 0);
+        }, onLoad: function (instance) {
+            mapInstance.current = instance;
+            onLoadMap(instance);
+        }, onClick: onMapClick, options: {
+            disableDefaultUI: true,
+            styles: utils_1.mapStyles,
+            zoomControl: true,
+            streetViewControl: false,
+            mapTypeControl: false,
+            fullscreenControl: false,
+            minZoom: 2,
+            maxZoom: 13,
+        } });
+});
+var MaprenderWithoutTracking = react_1.default.memo(function (_a) {
+    var onLoadMap = _a.onLoadMap, onMapClick = _a.onMapClick, onZoomChanged = _a.onZoomChanged, defaultLocation = _a.defaultLocation, geofenceRadius = _a.geofenceRadius, zoomCustomed = _a.zoomCustomed;
+    var mapInstance = (0, react_1.useRef)(null);
+    return (0, jsx_runtime_1.jsx)(api_1.GoogleMap, { id: "map", mapContainerStyle: mapContainerStyle, zoom: zoomCustomed !== null && zoomCustomed !== void 0 ? zoomCustomed : 10, center: defaultLocation, onZoomChanged: function () {
+            var _a, _b;
+            onZoomChanged((_b = (_a = mapInstance.current) === null || _a === void 0 ? void 0 : _a.getZoom()) !== null && _b !== void 0 ? _b : 0);
+        }, onLoad: function (instance) {
+            mapInstance.current = instance;
+            onLoadMap(instance);
+        }, onClick: onMapClick, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(api_1.Marker, { position: defaultLocation !== null && defaultLocation !== void 0 ? defaultLocation : { lat: 21.0063107, lng: 105.8279467 } }), (0, jsx_runtime_1.jsx)(api_1.Circle, { center: defaultLocation, radius: geofenceRadius, options: {
+                        fillColor: 'red',
+                        fillOpacity: 0.2,
+                        strokeColor: 'red',
+                        strokeOpacity: 1,
+                        strokeWeight: 2,
+                    } })] }) });
+});

package/lib/AWING/GoogleMap/interface.d.ts

@@ -1,16 +1,21 @@
+import { DataObject } from "../../AWING/interface";
 export interface IGoogleMapProps {
     defaultLocation?: {
         lat: number;
         lng: number;
     };
-    markerPosition?: {
-        latitude: number;
-        longitude: number;
-    };
-    onUpdateLocation: (newValue: {
+    onUpdateLocation?: (newValue: {
         latitude: number;
         longitude: number;
     }) => void;
     apiKey: string;
     geofenceRadius?: number;
+    sxMap?: DataObject;
+    isDisplayAutoComplete?: boolean;
+    isTypeTracking?: boolean;
+    markerPositions?: {
+        longitude: number | null;
+        latitude: number | null;
+    }[];
+    zoomCustomed?: number;
 }

package/lib/AWING/GoogleMap/utils.d.ts

@@ -0,0 +1,25 @@
+export declare const mapStyles: ({
+    elementType: string;
+    stylers: {
+        color: string;
+    }[];
+    featureType?: undefined;
+} | {
+    elementType: string;
+    stylers: {
+        visibility: string;
+    }[];
+    featureType?: undefined;
+} | {
+    featureType: string;
+    elementType: string;
+    stylers: {
+        color: string;
+    }[];
+} | {
+    featureType: string;
+    stylers: {
+        visibility: string;
+    }[];
+    elementType?: undefined;
+})[];

package/lib/AWING/GoogleMap/utils.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapStyles = void 0;
+exports.mapStyles = [
+    {
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#dadce0"
+            }
+        ]
+    },
+    {
+        "elementType": "labels.icon",
+        "stylers": [
+            {
+                "visibility": "off"
+            }
+        ]
+    },
+    {
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#212225"
+            }
+        ]
+    },
+    {
+        "elementType": "labels.text.stroke",
+        "stylers": [
+            {
+                "color": "#dadce0"
+            }
+        ]
+    },
+    {
+        "featureType": "administrative",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#f7f9fa"
+            }
+        ]
+    },
+    {
+        "featureType": "administrative.country",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#80868b"
+            }
+        ]
+    },
+    {
+        "featureType": "administrative.land_parcel",
+        "stylers": [
+            {
+                "visibility": "off"
+            }
+        ]
+    },
+    {
+        "featureType": "administrative.locality",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#898989"
+            }
+        ]
+    },
+    {
+        "featureType": "poi",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#212225"
+            }
+        ]
+    },
+    {
+        "featureType": "poi.park",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#616161"
+            }
+        ]
+    },
+    {
+        "featureType": "road",
+        "elementType": "geometry.fill",
+        "stylers": [
+            {
+                "color": "#c8c8c8"
+            }
+        ]
+    },
+    {
+        "featureType": "road",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#8a8a8a"
+            }
+        ]
+    },
+    {
+        "featureType": "transit",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#212225"
+            }
+        ]
+    },
+    {
+        "featureType": "water",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#f8f9fa"
+            }
+        ]
+    },
+    {
+        "featureType": "water",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#f8f9fa"
+            }
+        ]
+    }
+];

package/lib/Commons/Components/ClassicDrawer.js

@@ -82,8 +82,9 @@ var Drawer = function (props) {
                 }, 700);
                 closeDrawer((typeof state === 'string' && state) ? state : CloseAction.Reload);
             })
-                .catch(function () {
-                snackbar('error');
+                .catch(function (e) {
+                if (e)
+                    snackbar('error');
             })
                 .finally(function () {
                 setLoading(false);

package/lib/translate/en/translation.json

@@ -512,7 +512,9 @@
             "View": "Impression",
             "Authentication": "Engagement / Spot",
             "Click": "Click"
-        }
+        },
+        "Wizard": "Wizard",
+        "SwitchToProfessionalEditMode": "You have switched to Professional Edit Mode. If you agree, the data will be permanently changed, and you will no longer be able to revert to Wizard Edit Mode. Are you sure you want to proceed?"
     },
     "DirectoryManagement": {
         "DirectoryName": "Directory Name",

package/lib/translate/vi/translation.json

@@ -496,7 +496,9 @@
             "View": "Impression",
             "Authentication": "Engagement / Spot",
             "Click": "Click"
-        }
+        },
+        "Wizard": "Wizard",
+        "SwitchToProfessionalEditMode": "Bạn đã chuyển sang chế độ Chỉnh sửa chuyên nghiệp. Nếu bạn đồng ý, dữ liệu sẽ bị thay đổi và bạn sẽ không thể quay lại chế độ chỉnh sửa bằng Wizard. Bạn có chắc chắn muốn tiếp tục?"
     },
     "TemplateManagement": {
         "Create": "Tạo mới template",

package/package.json

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