ordering-ui-admin-external 1.14.3 → 1.15.1

package/_modules/components/Settings/Deliverect/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Deliverect = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
 var _styles = require("../../../styles");
 var _Shared = require("../../Shared");
@@ -24,6 +25,8 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var Deliverect = function Deliverect(props) {
   var onClose = props.onClose;
+  var history = (0, _reactRouterDom.useHistory)();
+  var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -66,11 +69,29 @@ var Deliverect = function Deliverect(props) {
   (0, _react.useEffect)(function () {
     toggleMainContent();
   }, [width]);
+  var handleOpenMore = function handleOpenMore(isInitialRender) {
+    setSettingsOpen(true);
+    if (!isInitialRender) {
+      var id = query.get('id');
+      history.replace("".concat(location.pathname, "?id=").concat(id, "&more=settings"));
+    }
+  };
+  var handleCloseDescription = function handleCloseDescription() {
+    setSettingsOpen(false);
+    var id = query.get('id');
+    history.replace("".concat(location.pathname, "?id=").concat(id));
+  };
+  (0, _react.useEffect)(function () {
+    var more = query.get('more');
+    if (more === 'settings') {
+      handleOpenMore(true);
+    }
+  }, []);
   var LalaMoveConnectDescription = function LalaMoveConnectDescription() {
     return /*#__PURE__*/_react.default.createElement(_styles2.CategoryExtraContent, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
       color: "black",
       onClick: function onClick() {
-        return setSettingsOpen(false);
+        return handleCloseDescription();
       }
     }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement("h1", null, t('MORE_INFO', 'More Info'))), /*#__PURE__*/_react.default.createElement(_styles2.SettingListConatiner, null, /*#__PURE__*/_react.default.createElement(_Shared.DragScroll, null, /*#__PURE__*/_react.default.createElement(_styles2.Tab, {
       active: true
@@ -104,7 +125,7 @@ var Deliverect = function Deliverect(props) {
     borderRadius: "8px",
     className: "all-setting",
     onClick: function onClick() {
-      return setSettingsOpen(true);
+      return handleOpenMore();
     }
   }, /*#__PURE__*/_react.default.createElement("span", null, t('SETTINGS', 'All settings')), /*#__PURE__*/_react.default.createElement(_BsArrowRight.default, null))), settingsOpen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, width >= 1000 ? /*#__PURE__*/_react.default.createElement(LalaMoveConnectDescription, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
     width: "70%",

package/_modules/components/Settings/DoordashConnect/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DoordashConnect = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
 var _styles = require("../../../styles");
 var _Shared = require("../../Shared");
@@ -30,6 +31,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var DoordashConnectUI = function DoordashConnectUI(props) {
   var actionState = props.actionState,
     onClose = props.onClose;
+  var history = (0, _reactRouterDom.useHistory)();
+  var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -97,11 +100,29 @@ var DoordashConnectUI = function DoordashConnectUI(props) {
   (0, _react.useEffect)(function () {
     toggleMainContent();
   }, [width]);
+  var handleOpenMore = function handleOpenMore(isInitialRender) {
+    setSettingsOpen(true);
+    if (!isInitialRender) {
+      var id = query.get('id');
+      history.replace("".concat(location.pathname, "?id=").concat(id, "&more=settings"));
+    }
+  };
+  var handleCloseDescription = function handleCloseDescription() {
+    setSettingsOpen(false);
+    var id = query.get('id');
+    history.replace("".concat(location.pathname, "?id=").concat(id));
+  };
+  (0, _react.useEffect)(function () {
+    var more = query.get('more');
+    if (more === 'settings') {
+      handleOpenMore(true);
+    }
+  }, []);
   var DoordashConnectDescription = function DoordashConnectDescription() {
     return /*#__PURE__*/_react.default.createElement(_styles2.CategoryExtraContent, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
       color: "black",
       onClick: function onClick() {
-        return setSettingsOpen(false);
+        return handleCloseDescription();
       }
     }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement("h1", null, t('MORE_INFO', 'More Info'))), /*#__PURE__*/_react.default.createElement(_styles2.SettingListConatiner, null, /*#__PURE__*/_react.default.createElement(_Shared.DragScroll, null, /*#__PURE__*/_react.default.createElement(_styles2.Tab, {
       active: true
@@ -136,7 +157,7 @@ var DoordashConnectUI = function DoordashConnectUI(props) {
     borderRadius: "8px",
     className: "all-setting",
     onClick: function onClick() {
-      return setSettingsOpen(true);
+      return handleOpenMore();
     }
   }, /*#__PURE__*/_react.default.createElement("span", null, t('SETTINGS', 'All settings')), /*#__PURE__*/_react.default.createElement(_BsArrowRight.default, null))), settingsOpen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, width >= 1000 ? /*#__PURE__*/_react.default.createElement(DoordashConnectDescription, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
     width: "70%",

package/_modules/components/Settings/DropdownOptionList/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DropdownOptionList = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 var _reactBootstrap = require("react-bootstrap");
@@ -54,6 +55,8 @@ var DropdownOptionList = function DropdownOptionList(props) {
     selectedZoneList = props.selectedZoneList,
     handleCheckboxZoneClick = props.handleCheckboxZoneClick,
     handleAllCheckboxZoneClick = props.handleAllCheckboxZoneClick;
+  var history = (0, _reactRouterDom.useHistory)();
+  var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -126,10 +129,19 @@ var DropdownOptionList = function DropdownOptionList(props) {
     }, []);
     setCities(_cities);
   }, [countriesState]);
-  var handleClickZoneDropdown = function handleClickZoneDropdown(e, zone) {
-    var isInvalid = e.target.closest('.zone-checkbox') || e.target.closest('.zone-enabled') || e.target.closest('.zone-actions');
+  var handleClickZoneDropdown = function handleClickZoneDropdown(e, zone, isInitialRender) {
+    var _e$target, _e$target2, _e$target3;
+    var isInvalid = (e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest('.zone-checkbox')) || (e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.closest('.zone-enabled')) || (e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.closest('.zone-actions'));
     if (isInvalid) return;
     handleOpenZoneDropdownDetails(zone);
+    if (!isInitialRender) {
+      history.replace("".concat(location.pathname, "?zone=").concat(zone.id));
+    }
+  };
+  var handleCloseZoneDetail = function handleCloseZoneDetail() {
+    setSelectedZoneDropdown(null);
+    setOpenZonedropdown(false);
+    history.replace("".concat(location.pathname));
   };
   var onDeleteZone = function onDeleteZone(zoneId) {
     setConfirm({
@@ -143,6 +155,18 @@ var DropdownOptionList = function DropdownOptionList(props) {
       }
     });
   };
+  (0, _react.useEffect)(function () {
+    if (dropdownOptionsState.loading) return;
+    var zoneId = query.get('zone');
+    if (zoneId) {
+      var initZone = dropdownOptionsState.options.find(function (item) {
+        return item.id === Number(zoneId);
+      });
+      if (initZone) {
+        handleClickZoneDropdown(null, initZone, true);
+      }
+    }
+  }, [dropdownOptionsState.loading]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.DropdownOptionsContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.DropdownOptionWrapper, {
     isHeader: true
   }, /*#__PURE__*/_react.default.createElement(_styles2.DropdownOptionName, null, /*#__PURE__*/_react.default.createElement(_styles2.CheckboxWrapper, {
@@ -232,8 +256,7 @@ var DropdownOptionList = function DropdownOptionList(props) {
     defaultSideBarWidth: 550,
     open: openZoneDropdown,
     onClose: function onClose() {
-      setSelectedZoneDropdown(null);
-      setOpenZonedropdown(false);
+      return handleCloseZoneDetail();
     },
     showExpandIcon: true
   }, /*#__PURE__*/_react.default.createElement(_ZoneDropdownDetails.ZoneDropdownDetails, {

package/_modules/components/Settings/IntegrationListing/index.js

@@ -54,7 +54,7 @@ var IntegrationListing = function IntegrationListing(props) {
     settingParams = data[0];
   }
   var settingId = settingParams && settingParams.split('=')[1];
-  var onBasicSettingsRedirect = function onBasicSettingsRedirect(_ref) {
+  var onBasicSettingsRedirect = function onBasicSettingsRedirect(_ref, isInitialRender) {
     var id = _ref.id;
     if (!id) {
       return events.emit('go_to_page', {
@@ -62,7 +62,7 @@ var IntegrationListing = function IntegrationListing(props) {
         replace: true
       });
     }
-    if (id) {
+    if (id && !isInitialRender) {
       events.emit('go_to_page', {
         page: 'integrations',
         search: "?id=".concat(id),
@@ -86,7 +86,7 @@ var IntegrationListing = function IntegrationListing(props) {
     if (settingId) {
       onBasicSettingsRedirect({
         id: settingId
-      });
+      }, true);
       setShowOption(settingId);
     }
   }, []);

package/_modules/components/Settings/ItsaCheckmate/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ItsaCheckmate = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
 var _styles = require("../../../styles");
 var _Shared = require("../../Shared");
@@ -24,6 +25,8 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var ItsaCheckmate = function ItsaCheckmate(props) {
   var onClose = props.onClose;
+  var history = (0, _reactRouterDom.useHistory)();
+  var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -66,11 +69,29 @@ var ItsaCheckmate = function ItsaCheckmate(props) {
   (0, _react.useEffect)(function () {
     toggleMainContent();
   }, [width]);
+  var handleOpenMore = function handleOpenMore(isInitialRender) {
+    setSettingsOpen(true);
+    if (!isInitialRender) {
+      var id = query.get('id');
+      history.replace("".concat(location.pathname, "?id=").concat(id, "&more=settings"));
+    }
+  };
+  var handleCloseDescription = function handleCloseDescription() {
+    setSettingsOpen(false);
+    var id = query.get('id');
+    history.replace("".concat(location.pathname, "?id=").concat(id));
+  };
+  (0, _react.useEffect)(function () {
+    var more = query.get('more');
+    if (more === 'settings') {
+      handleOpenMore(true);
+    }
+  }, []);
   var LalaMoveConnectDescription = function LalaMoveConnectDescription() {
     return /*#__PURE__*/_react.default.createElement(_styles2.CategoryExtraContent, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
       color: "black",
       onClick: function onClick() {
-        return setSettingsOpen(false);
+        return handleCloseDescription();
       }
     }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement("h1", null, t('MORE_INFO', 'More Info'))), /*#__PURE__*/_react.default.createElement(_styles2.SettingListConatiner, null, /*#__PURE__*/_react.default.createElement(_Shared.DragScroll, null, /*#__PURE__*/_react.default.createElement(_styles2.Tab, {
       active: true
@@ -113,7 +134,7 @@ var ItsaCheckmate = function ItsaCheckmate(props) {
     borderRadius: "8px",
     className: "all-setting",
     onClick: function onClick() {
-      return setSettingsOpen(true);
+      return handleOpenMore();
     }
   }, /*#__PURE__*/_react.default.createElement("span", null, t('SETTINGS', 'All settings')), /*#__PURE__*/_react.default.createElement(_BsArrowRight.default, null))), settingsOpen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, width >= 1000 ? /*#__PURE__*/_react.default.createElement(LalaMoveConnectDescription, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
     width: "70%",

package/_modules/components/Settings/LalamoveConnect/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LalaMoveConnect = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
 var _styles = require("../../../styles");
 var _Shared = require("../../Shared");
@@ -30,6 +31,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var LalaMoveConnectUI = function LalaMoveConnectUI(props) {
   var actionState = props.actionState,
     onClose = props.onClose;
+  var history = (0, _reactRouterDom.useHistory)();
+  var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -97,11 +100,29 @@ var LalaMoveConnectUI = function LalaMoveConnectUI(props) {
   (0, _react.useEffect)(function () {
     toggleMainContent();
   }, [width]);
+  var handleOpenMore = function handleOpenMore(isInitialRender) {
+    setSettingsOpen(true);
+    if (!isInitialRender) {
+      var id = query.get('id');
+      history.replace("".concat(location.pathname, "?id=").concat(id, "&more=settings"));
+    }
+  };
+  var handleCloseDescription = function handleCloseDescription() {
+    setSettingsOpen(false);
+    var id = query.get('id');
+    history.replace("".concat(location.pathname, "?id=").concat(id));
+  };
+  (0, _react.useEffect)(function () {
+    var more = query.get('more');
+    if (more === 'settings') {
+      handleOpenMore(true);
+    }
+  }, []);
   var LalaMoveConnectDescription = function LalaMoveConnectDescription() {
     return /*#__PURE__*/_react.default.createElement(_styles2.CategoryExtraContent, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
       color: "black",
       onClick: function onClick() {
-        return setSettingsOpen(false);
+        return handleCloseDescription();
       }
     }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement("h1", null, t('MORE_INFO', 'More Info'))), /*#__PURE__*/_react.default.createElement(_styles2.SettingListConatiner, null, /*#__PURE__*/_react.default.createElement(_Shared.DragScroll, null, /*#__PURE__*/_react.default.createElement(_styles2.Tab, {
       active: true
@@ -138,7 +159,7 @@ var LalaMoveConnectUI = function LalaMoveConnectUI(props) {
     borderRadius: "8px",
     className: "all-setting",
     onClick: function onClick() {
-      return setSettingsOpen(true);
+      return handleOpenMore();
     }
   }, /*#__PURE__*/_react.default.createElement("span", null, t('SETTINGS', 'All settings')), /*#__PURE__*/_react.default.createElement(_BsArrowRight.default, null))), settingsOpen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, width >= 1000 ? /*#__PURE__*/_react.default.createElement(LalaMoveConnectDescription, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
     width: "70%",

package/_modules/components/Settings/PickerExpress/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PickerExpress = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
 var _styles = require("../../../styles");
 var _Shared = require("../../Shared");
@@ -30,6 +31,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var PickerExpressUI = function PickerExpressUI(props) {
   var actionState = props.actionState,
     onClose = props.onClose;
+  var history = (0, _reactRouterDom.useHistory)();
+  var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -97,11 +100,29 @@ var PickerExpressUI = function PickerExpressUI(props) {
   (0, _react.useEffect)(function () {
     toggleMainContent();
   }, [width]);
+  var handleOpenMore = function handleOpenMore(isInitialRender) {
+    setSettingsOpen(true);
+    if (!isInitialRender) {
+      var id = query.get('id');
+      history.replace("".concat(location.pathname, "?id=").concat(id, "&more=settings"));
+    }
+  };
+  var handleCloseDescription = function handleCloseDescription() {
+    setSettingsOpen(false);
+    var id = query.get('id');
+    history.replace("".concat(location.pathname, "?id=").concat(id));
+  };
+  (0, _react.useEffect)(function () {
+    var more = query.get('more');
+    if (more === 'settings') {
+      handleOpenMore(true);
+    }
+  }, []);
   var LalaMoveConnectDescription = function LalaMoveConnectDescription() {
     return /*#__PURE__*/_react.default.createElement(_styles2.CategoryExtraContent, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
       color: "black",
       onClick: function onClick() {
-        return setSettingsOpen(false);
+        return handleCloseDescription();
       }
     }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement("h1", null, t('MORE_INFO', 'More Info'))), /*#__PURE__*/_react.default.createElement(_styles2.SettingListConatiner, null, /*#__PURE__*/_react.default.createElement(_Shared.DragScroll, null, /*#__PURE__*/_react.default.createElement(_styles2.Tab, {
       active: true
@@ -138,7 +159,7 @@ var PickerExpressUI = function PickerExpressUI(props) {
     borderRadius: "8px",
     className: "all-setting",
     onClick: function onClick() {
-      return setSettingsOpen(true);
+      return handleOpenMore();
     }
   }, /*#__PURE__*/_react.default.createElement("span", null, t('SETTINGS', 'All settings')), /*#__PURE__*/_react.default.createElement(_BsArrowRight.default, null))), settingsOpen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, width >= 1000 ? /*#__PURE__*/_react.default.createElement(LalaMoveConnectDescription, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
     width: "70%",

package/_modules/components/Settings/PlaceListing/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PlaceListing = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
 var _InfoShareContext = require("../../../contexts/InfoShareContext");
 var _styles = require("../../../styles");
@@ -79,6 +80,8 @@ var PlaceListingUI = function PlaceListingUI(props) {
     handleCheckboxZoneClick = props.handleCheckboxZoneClick,
     handleAllCheckboxZoneClick = props.handleAllCheckboxZoneClick,
     handleSeveralDeleteZones = props.handleSeveralDeleteZones;
+  var history = (0, _reactRouterDom.useHistory)();
+  var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -175,10 +178,19 @@ var PlaceListingUI = function PlaceListingUI(props) {
     setSelectedCity(city);
     setOpenCity(true);
   };
-  var handleClickCity = function handleClickCity(e, city) {
-    var isInvalid = e.target.closest('.city-checkbox') || e.target.closest('.city-enabled') || e.target.closest('.city-actions');
+  var handleClickCity = function handleClickCity(e, city, isInitialRender) {
+    var _e$target, _e$target2, _e$target3;
+    var isInvalid = (e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest('.city-checkbox')) || (e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.closest('.city-enabled')) || (e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.closest('.city-actions'));
     if (isInvalid) return;
     handleOpenCityDetails(city);
+    if (!isInitialRender) {
+      history.replace("".concat(location.pathname, "?country=").concat(city.country_id, "&city=").concat(city.id));
+    }
+  };
+  var handleCloseCityDetail = function handleCloseCityDetail() {
+    setSelectedCity(null);
+    setOpenCity(false);
+    history.replace("".concat(location.pathname));
   };
   var handleOpenZoneDropdownDetails = function handleOpenZoneDropdownDetails(zone) {
     setSelectedZoneDropdown(zone);
@@ -195,6 +207,31 @@ var PlaceListingUI = function PlaceListingUI(props) {
     setSearchValue(null);
     cleanChagesState();
   }, [showOption]);
+  (0, _react.useEffect)(function () {
+    if (countriesState.loading) return;
+    var countryId = query.get('country');
+    var cityId = query.get('city');
+    if (countryId && cityId) {
+      setShowOption('cities');
+      var initCountry = countriesState.countries.find(function (country) {
+        return country.id === Number(countryId);
+      });
+      if (initCountry) {
+        var initCity = initCountry.cities.find(function (city) {
+          return city.id === Number(cityId);
+        });
+        if (initCity) {
+          handleClickCity(null, initCity, true);
+        }
+      }
+    }
+  }, [countriesState.loading]);
+  (0, _react.useEffect)(function () {
+    var zone = query.get('zone');
+    if (zone) {
+      setShowOption('zones');
+    }
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.PlaceListContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.Header, null, /*#__PURE__*/_react.default.createElement(_styles2.HeaderLeft, null, isCollapse && /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
     color: "black",
     onClick: function onClick() {
@@ -398,8 +435,7 @@ var PlaceListingUI = function PlaceListingUI(props) {
     defaultSideBarWidth: 550,
     open: openCity,
     onClose: function onClose() {
-      setSelectedCity(null);
-      setOpenCity(false);
+      return handleCloseCityDetail();
     },
     showExpandIcon: true
   }, /*#__PURE__*/_react.default.createElement(_CityDetails.CityDetails, {