ordering-ui-external 10.0.0 → 10.1.0

package/_modules/themes/callcenterOriginal/src/components/Orders/WebsocketStatus/index.js

@@ -0,0 +1,119 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WebsocketStatus = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _orderingComponentsExternal = require("ordering-components-external");
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _Shared = require("../../Shared");
+var _styles = require("../../../styles");
+var _styles2 = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var SocketStatusUI = function SocketStatusUI(props) {
+  var socketStatus = props.socketStatus,
+    reconnectAttemptCount = props.reconnectAttemptCount,
+    connectedDate = props.connectedDate;
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
+    _useUtils2 = _slicedToArray(_useUtils, 1),
+    parseDate = _useUtils2[0].parseDate;
+  var _useState = (0, _react.useState)({
+      open: false,
+      content: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    alertState = _useState2[0],
+    setAlertState = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openModal = _useState4[0],
+    setOpenModal = _useState4[1];
+  var closeAlert = function closeAlert() {
+    setAlertState({
+      open: false,
+      content: []
+    });
+    window.location.reload();
+  };
+  (0, _react.useEffect)(function () {
+    if (reconnectAttemptCount > 3) {
+      setAlertState({
+        open: true,
+        content: t('WEBSOCKET_CONNECT_ERROR', 'There appears to be an error in establishing the WebSocket connection. Please try reloading the page to resolve the issue.')
+      });
+    }
+  }, [reconnectAttemptCount]);
+  return /*#__PURE__*/_react.default.createElement(_styles2.Contatiner, null, /*#__PURE__*/_react.default.createElement(_styles2.InfoWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+    color: "primary"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.InfoCircle, null)), /*#__PURE__*/_react.default.createElement(_styles2.InfoContent, null, t('WEBSOCKET_STATUS_INFO', 'Verify the server connection by date and time using the Connection status button. Press update to refresh you dashboard and update the status as well. Need help? Contact our Customer support team here:'), /*#__PURE__*/_react.default.createElement("a", {
+    href: "https://www.ordering.co/contact-ordering",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, t('CUSTOMER_SUPPORT', 'Customer support')))), /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    borderRadius: "8px",
+    color: "secundary",
+    onClick: function onClick() {
+      return setOpenModal(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles2.StatusContainer, null, /*#__PURE__*/_react.default.createElement("span", null, t('CONNECTION_STATUS', 'Connection status')), /*#__PURE__*/_react.default.createElement(_styles2.WebsocketStatusDot, {
+    status: socketStatus
+  }))), /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
+    open: openModal,
+    onClose: function onClose() {
+      return setOpenModal(false);
+    },
+    width: "500px"
+  }, /*#__PURE__*/_react.default.createElement(_styles2.DetailContainer, null, /*#__PURE__*/_react.default.createElement("h2", null, t('CONNECTION_STATUS', 'Connection status')), /*#__PURE__*/_react.default.createElement("p", null, t('LAST_UPDATE', 'Last update'), ": ", parseDate(connectedDate)), /*#__PURE__*/_react.default.createElement(_styles2.StatusItemWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles2.WebsocketStatusDot, {
+    status: 1
+  }), /*#__PURE__*/_react.default.createElement("span", null, t('OK', 'Ok'))), /*#__PURE__*/_react.default.createElement("p", null, t('WEBSOCKET_OK', 'The websocket works normally.'))), /*#__PURE__*/_react.default.createElement(_styles2.StatusItemWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles2.WebsocketStatusDot, {
+    status: 0
+  }), /*#__PURE__*/_react.default.createElement("span", null, t('CONNECTING', 'Connecting'))), /*#__PURE__*/_react.default.createElement("p", null, t('WEBSOCKET_CONNECTING', 'The websocket is connecting.'))), /*#__PURE__*/_react.default.createElement(_styles2.StatusItemWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles2.WebsocketStatusDot, {
+    status: 2
+  }), /*#__PURE__*/_react.default.createElement("span", null, t('DISCONNECTED', 'Disconnected'))), /*#__PURE__*/_react.default.createElement("p", null, t('WEBSOCKET_DISCONNECTED', 'The server is slow, please reload.'))), /*#__PURE__*/_react.default.createElement(_styles2.ButtonsContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    color: "secundary",
+    onClick: function onClick() {
+      return setOpenModal(false);
+    }
+  }, t('CLOSE', 'Close')), /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    color: "primary",
+    onClick: function onClick() {
+      return window.location.reload();
+    }
+  }, t('UPDATE', 'Update'))))), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
+    title: t('ERROR', 'Error'),
+    content: alertState.content,
+    acceptText: t('ACCEPT', 'Accept'),
+    open: alertState.open,
+    onClose: function onClose() {
+      return closeAlert();
+    },
+    onAccept: function onAccept() {
+      return closeAlert();
+    },
+    closeOnBackdrop: false
+  }));
+};
+var WebsocketStatus = function WebsocketStatus(props) {
+  var socketProps = _objectSpread(_objectSpread({}, props), {}, {
+    UIComponent: SocketStatusUI
+  });
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.WebsocketStatus, socketProps);
+};
+exports.WebsocketStatus = WebsocketStatus;

package/_modules/themes/callcenterOriginal/src/components/Orders/WebsocketStatus/styles.js

@@ -0,0 +1,65 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WebsocketStatusDot = exports.StatusItemWrapper = exports.StatusContainer = exports.InfoWrapper = exports.InfoContent = exports.DetailContainer = exports.DateWrapper = exports.Contatiner = exports.ButtonsContainer = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Contatiner = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > button {\n    height: 41px;\n  }\n  \n  @media (min-width: 576px) {\n    ", "\n  }\n"])), function (props) {
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      margin-left: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-right: 10px;\n    "])));
+});
+exports.Contatiner = Contatiner;
+var StatusContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  > span:first-child {\n    ", "\n  }\n"])), function (props) {
+  var _props$theme2;
+  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin-left: 6px;\n    "]))) : (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin-right: 6px;\n    "])));
+});
+exports.StatusContainer = StatusContainer;
+var WebsocketStatusDot = _styledComponents.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  display: inline-block;\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref) {
+  var status = _ref.status;
+  return status === 0 && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    background-color: #FF9922;\n  "])));
+}, function (_ref2) {
+  var status = _ref2.status;
+  return status === 1 && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    background-color: #00D27A;\n  "])));
+}, function (_ref3) {
+  var status = _ref3.status;
+  return status === 2 && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    background-color: #E63757;\n  "])));
+});
+exports.WebsocketStatusDot = WebsocketStatusDot;
+var DateWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  text-align: center;\n"])));
+exports.DateWrapper = DateWrapper;
+var InfoWrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: relative;\n  ", "\n\n  > button {\n    height: 25px;\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &:hover > div {\n    visibility: visible;\n    opacity: 1;\n  }\n"])), function (props) {
+  var _props$theme3;
+  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    margin-left: 4px;\n  "]))) : (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    margin-right: 4px;\n  "])));
+});
+exports.InfoWrapper = InfoWrapper;
+var InfoContent = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  z-index: 999;\n  background: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n  border-radius: 7.6px;\n  padding: 8px 12px;\n  font-size: 12px;\n  line-height: 18px;\n  min-width: 150px;\n  transition: all 0.3s linear;\n  visibility: hidden;\n  opacity: 0;\n  /* display: none; */\n  right: 0px;\n  ", "\n\n  a {\n    color: ", ";\n    transition: all 0.3s linear;\n    cursor: pointer;\n    margin-left: 5px;\n    ", "\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  @media (min-width: 576px) {\n    min-width: 350px;\n    padding: 12px 15px;\n    left: 0px;\n    ", "\n  }\n\n  @media (min-width: 993px) {\n    min-width: 535px;\n  }\n"])), function (props) {
+  return props.theme.colors.backgroundInfo;
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    left: 0px;\n    right: initial;\n  "])));
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      margin-left: 0px;\n      margin-right: 5px;\n    "])));
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      right: 0px;\n      left: initial;\n    "])));
+});
+exports.InfoContent = InfoContent;
+var DetailContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  h2 {\n    font-weight: 700;\n    font-size: 20px;\n    line-height: 30px;\n  }\n\n  > p {\n    font-size: 14px;\n  }\n"])));
+exports.DetailContainer = DetailContainer;
+var StatusItemWrapper = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  > div {\n    display: flex;\n    align-items: center;\n\n    > span:first-child {\n      margin: 0 16px;\n    }\n  }\n  p {\n    font-weight: 400;\n    font-size: 12px;\n    line-height: 18px;\n    color: ", ";\n\n    ", "\n  }\n"])), function (props) {
+  return props.theme.colors.lightGray;
+}, function (props) {
+  var _props$theme4;
+  return (_props$theme4 = props.theme) !== null && _props$theme4 !== void 0 && _props$theme4.rtl ? (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n      margin-right: 40px;\n    "]))) : (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n      margin-left: 40px;\n    "])));
+});
+exports.StatusItemWrapper = StatusItemWrapper;
+var ButtonsContainer = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-top: 40px;\n\n  > button {\n    border-radius: 8px;\n    height: 40px;\n    &:last-child {\n      margin: 0 10px;\n    }\n  }\n"])));
+exports.ButtonsContainer = ButtonsContainer;

package/_modules/themes/callcenterOriginal/src/components/Orders/index.js

@@ -3,6 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "AllInOne", {
+  enumerable: true,
+  get: function get() {
+    return _AllInOne.AllInOne;
+  }
+});
+Object.defineProperty(exports, "Appointments", {
+  enumerable: true,
+  get: function get() {
+    return _Appointments.Appointments;
+  }
+});
 Object.defineProperty(exports, "BusinessesSelector", {
   enumerable: true,
   get: function get() {
@@ -99,6 +111,12 @@ Object.defineProperty(exports, "DriversOnlineOfflineFilter", {
     return _DriversOnlineOfflineFilter.DriversOnlineOfflineFilter;
   }
 });
+Object.defineProperty(exports, "GiftCardsListing", {
+  enumerable: true,
+  get: function get() {
+    return _GiftCardsListing.GiftCardsListing;
+  }
+});
 Object.defineProperty(exports, "InterActOrderMarker", {
   enumerable: true,
   get: function get() {
@@ -279,8 +297,11 @@ Object.defineProperty(exports, "WizardOrders", {
     return _WizardOrders.WizardOrders;
   }
 });
+var _AllInOne = require("./AllInOne");
+var _Appointments = require("./Appointments");
 var _DeliveriesManager = require("./DeliveriesManager");
 var _DriversManager = require("./DriversManager");
+var _GiftCardsListing = require("./GiftCardsListing");
 var _Messages = require("./Messages");
 var _OrdersContentHeader = require("./OrdersContentHeader");
 var _OrdersDashboardList = require("./OrdersDashboardList");

package/_modules/themes/callcenterOriginal/src/components/Shared/AutoScroll/index.js

@@ -111,6 +111,7 @@ var AutoScroll = function AutoScroll(_ref) {
     var _document3, _document3$getElement;
     if (!scrollId) return;
     var element = (_document3 = document) === null || _document3 === void 0 ? void 0 : (_document3$getElement = _document3.getElementById("".concat(autoScrollId))) === null || _document3$getElement === void 0 ? void 0 : _document3$getElement.parentNode;
+    if (!element) return;
     setParentWidth(element.width);
     setParentElement(element);
   }, [scrollId]);

package/_modules/themes/callcenterOriginal/src/components/Shared/CitySelector/index.js

@@ -34,19 +34,25 @@ var CitySelectorUI = function CitySelectorUI(props) {
     handleChangeCity = props.handleChangeCity,
     position = props.position,
     optionInnerMaxHeight = props.optionInnerMaxHeight;
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
     cityOptions = _useState2[0],
     setCityOptions = _useState2[1];
-  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
-    _useLanguage2 = _slicedToArray(_useLanguage, 2),
-    t = _useLanguage2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
   var placeholder = /*#__PURE__*/_react.default.createElement(_styles2.PlaceholderTitle, {
     isDefault: isDefault
   }, t('SELECT_CITY', 'Select City'));
   (0, _react.useEffect)(function () {
     if (citiesList !== null && citiesList !== void 0 && citiesList.loading) return;
-    var _cityOptions = citiesList === null || citiesList === void 0 ? void 0 : citiesList.cities.map(function (city) {
+    var _cityOptions = citiesList === null || citiesList === void 0 ? void 0 : citiesList.cities.filter(function (option) {
+      return option === null || option === void 0 ? void 0 : option.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
+    }).map(function (city) {
       return {
         value: city.id,
         content: /*#__PURE__*/_react.default.createElement(_styles2.Option, {
@@ -59,7 +65,7 @@ var CitySelectorUI = function CitySelectorUI(props) {
       };
     });
     setCityOptions(_cityOptions);
-  }, [citiesList, isDefault]);
+  }, [citiesList, isDefault, searchValue]);
   (0, _react.useEffect)(function () {
     if (!isAddMode) return;
     if (cityOptions.length === 1) {
@@ -87,6 +93,13 @@ var CitySelectorUI = function CitySelectorUI(props) {
     options: cityOptions,
     onChange: function onChange(city) {
       return handleChangeCity(city);
+    },
+    isShowSearchBar: true,
+    searchBarIsCustomLayout: true,
+    searchBarIsNotLazyLoad: true,
+    searchValue: searchValue,
+    handleChangeSearch: function handleChangeSearch(val) {
+      return setSearchValue(val);
     }
   })));
 };

package/_modules/themes/callcenterOriginal/src/components/Shared/ColumnAllowSettingPopover/styles.js

@@ -12,7 +12,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var HeaderItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n"])));
 exports.HeaderItem = HeaderItem;
-var PopoverBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: 1001;\n  background: ", ";\n  border: 1px solid ", ";\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;\n  border-radius: 7.6px;\n  padding: 15px;\n  max-width: 250px;\n"])), function (props) {
+var PopoverBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: fixed !important;\n  z-index: 1001;\n  background: ", ";\n  border: 1px solid ", ";\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;\n  border-radius: 7.6px;\n  padding: 15px;\n  max-width: 250px;\n"])), function (props) {
   var _props$theme$colors;
   return ((_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.backgroundPage) || '#FFF';
 }, function (props) {

package/_modules/themes/callcenterOriginal/src/components/Shared/Confirm/index.js

@@ -48,9 +48,13 @@ var ConfirmUI = function ConfirmUI(props) {
       return onClose();
     }
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null))), title && /*#__PURE__*/_react.default.createElement(_styles2.PopupTitle, null, title), /*#__PURE__*/_react.default.createElement(_styles2.PopupContent, null, content && typeof content === 'string' && content, content && _typeof(content) === 'object' && Array.isArray(content) && /*#__PURE__*/_react.default.createElement("ul", null, content.map(function (item, i) {
-    return /*#__PURE__*/_react.default.createElement("li", {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
-    }, t(item.toUpperCase(), errors[item]));
+    }, Array.isArray(item) ? item.map(function (err, index) {
+      return typeof err === 'string' && /*#__PURE__*/_react.default.createElement("li", {
+        key: index
+      }, t(err.toUpperCase(), errors[err] || err));
+    }) : typeof item === 'string' && /*#__PURE__*/_react.default.createElement("li", null, t(item.toUpperCase(), errors[item] || item)));
   })), children), (onCancel || onAccept || onClose) && /*#__PURE__*/_react.default.createElement(_styles2.PopupActions, null, onCancel && /*#__PURE__*/_react.default.createElement(_styles.Button, {
     outline: true,
     onClick: function onClick() {