ordering-ui-external 2.6.7 → 2.7.0

package/_modules/components/LanguageSelector/index.js

@@ -34,6 +34,7 @@ var LanguageSelectorUI = function LanguageSelectorUI(props) {
     return a.content > b.content ? 1 : b.content > a.content ? -1 : 0;
   });
   return _languages && _languages.length > 1 ? /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    zIndex: 10002,
     options: languagesState !== null && languagesState !== void 0 && languagesState.loading ? defaultLanguages : _languages,
     defaultValue: languagesState !== null && languagesState !== void 0 && languagesState.loading ? defaultCurrentLanguage : currentLanguage,
     onChange: function onChange(languageId) {

package/_modules/components/OrderTypeSelectorHeader/index.js

@@ -31,9 +31,11 @@ var OrderTypeSelectorHeaderUI = function OrderTypeSelectorHeaderUI(props) {
     typeSelected = props.typeSelected,
     defaultValue = props.defaultValue,
     configTypes = props.configTypes,
-    orderTypes = props.orderTypes;
+    orderTypes = props.orderTypes,
+    autoCloseWhenScroll = props.autoCloseWhenScroll;
   var defaultType = configTypes !== null && configTypes !== void 0 && configTypes.includes(typeSelected) ? null : configTypes === null || configTypes === void 0 ? void 0 : configTypes[0];
   return /*#__PURE__*/_react.default.createElement(_styles.OrderTypeWrapper, null, /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    autoCloseWhenScroll: autoCloseWhenScroll,
     options: configTypes ? orderTypes.filter(function (type) {
       return configTypes === null || configTypes === void 0 ? void 0 : configTypes.includes(type.value);
     }) : orderTypes,

package/_modules/components/SmartAppBanner/index.js

@@ -8,6 +8,7 @@ exports.default = exports.SmartAppBanner = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _orderingComponentsExternal = require("ordering-components-external");
 var _reactSmartbanner = _interopRequireDefault(require("react-smartbanner"));
+var _styledComponents = require("styled-components");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -21,12 +22,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 SmartAppBanneUI = function SmartAppBanneUI(props) {
+  var _theme$defaultLanguag, _theme$defaultLanguag2;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
+  var theme = (0, _styledComponents.useTheme)();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactSmartbanner.default, {
-    title: t('MOBILE_APPNAME', 'Ordering app'),
-    author: t('MOBILE_APPNAME_AUTHOR', 'Ordering, Inc.'),
+    title: t('MOBILE_APPNAME', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag = theme.defaultLanguages) === null || _theme$defaultLanguag === void 0 ? void 0 : _theme$defaultLanguag.MOBILE_APPNAME) || 'Ordering app'),
+    author: t('MOBILE_APPNAME_AUTHOR', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag2 = theme.defaultLanguages) === null || _theme$defaultLanguag2 === void 0 ? void 0 : _theme$defaultLanguag2.MOBILE_APPNAME_AUTHOR) || 'Ordering, Inc.'),
     daysHidden: 7,
     daysReminder: 15,
     button: t('VIEW', 'View'),

package/_modules/contexts/ThemeContext/index.js

@@ -52,7 +52,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
         return theme.colors.colorPage;
     }
   };
-  var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    @media (min-width: 578px) {\n      /** Mozilla scrollbar*/\n      * {\n        scrollbar-color: #CCC !important;\n        scrollbar-width: thin !important;\n      }\n      /** Scrollbar for browser based on webkit */\n      ::-webkit-scrollbar {\n        width: 6px;\n        height: 0px;\n      }\n      ::-webkit-scrollbar-thumb {\n        background: #CCCCCC;\n      }\n      ::-webkit-scrollbar-thumb:hover {\n        background: #AFAFAF;\n      }\n      ::-webkit-scrollbar-thumb:active {\n        background: #6b6b6b;\n      }\n      ::-webkit-scrollbar-track {\n        background: rgba(204, 204, 204, 0.3);\n      }\n      #___reactour {\n        div{\n          color: rgba(0,0,0,0.5);\n          button svg {\n            display: none;\n          }\n        }\n      }\n    }\n    body {\n      font-family: '", "', sans-serif;\n      margin: 0;\n      background-color: ", ";\n      color: ", ";\n      direction: ltr;\n      ", "\n      -webkit-overflow-scrolling: auto;\n    }\n    input, textarea, button {\n      font-family: inherit;\n    }\n    h1,p,span {\n      ", "\n    }\n    .popup-backdrop {\n      background-color: rgba(0, 0, 0, 0.4);\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      z-index: 2000;\n    }\n    .popup-component {\n      background-color: rgba(0, 0, 0, 0.3);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n  "])), ((_theme$fonts$primary = theme.fonts.primary) === null || _theme$fonts$primary === void 0 ? void 0 : _theme$fonts$primary.name) || 'Helvetica', theme.colors.backgroundPage, getThemeColor(), theme.rtl && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        direction: rtl;\n      "]))), props.isDarkTextColor && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        color: ", "\n      "])), theme.colors.darkTextColor));
+  var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    @media (min-width: 578px) {\n      /** Mozilla scrollbar*/\n      * {\n        scrollbar-color: #CCC !important;\n        scrollbar-width: thin !important;\n      }\n      /** Scrollbar for browser based on webkit */\n      ::-webkit-scrollbar {\n        width: 6px;\n        height: 0px;\n      }\n      ::-webkit-scrollbar-thumb {\n        background: #CCCCCC;\n      }\n      ::-webkit-scrollbar-thumb:hover {\n        background: #AFAFAF;\n      }\n      ::-webkit-scrollbar-thumb:active {\n        background: #6b6b6b;\n      }\n      ::-webkit-scrollbar-track {\n        background: rgba(204, 204, 204, 0.3);\n      }\n      #___reactour {\n        div{\n          color: rgba(0,0,0,0.5);\n          button svg {\n            display: none;\n          }\n        }\n      }\n    }\n    body {\n      font-family: '", "', sans-serif;\n      margin: 0;\n      background-color: ", ";\n      color: ", ";\n      direction: ltr;\n      ", "\n      -webkit-overflow-scrolling: auto;\n    }\n    input, textarea, button {\n      font-family: inherit;\n    }\n    h1,p,span {\n      ", "\n    }\n    .popup-backdrop {\n      background-color: rgba(0, 0, 0, 0.4);\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      z-index: 20002;\n    }\n    .popup-component {\n      background-color: rgba(0, 0, 0, 0.3);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n  "])), ((_theme$fonts$primary = theme.fonts.primary) === null || _theme$fonts$primary === void 0 ? void 0 : _theme$fonts$primary.name) || 'Helvetica', theme.colors.backgroundPage, getThemeColor(), theme.rtl && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        direction: rtl;\n      "]))), props.isDarkTextColor && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        color: ", "\n      "])), theme.colors.darkTextColor));
   (0, _react.useEffect)(function () {
     var fonts = Object.entries(theme.fonts || {});
     fonts.forEach(function (_ref2) {

package/_modules/styles/Select/index.js

@@ -24,7 +24,9 @@ var Select = function Select(props) {
     defaultValue = props.defaultValue,
     onChange = props.onChange,
     notAsync = props.notAsync,
-    notReload = props.notReload;
+    notReload = props.notReload,
+    autoCloseWhenScroll = props.autoCloseWhenScroll,
+    zIndex = props.zIndex;
   var isHome = window.location.pathname === '/' || window.location.pathname === '/home';
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -64,9 +66,18 @@ var Select = function Select(props) {
     }
   };
   (0, _react.useEffect)(function () {
+    var handleCloseSelect = function handleCloseSelect() {
+      return setOpen(false);
+    };
     document.addEventListener('mouseup', closeSelect);
     document.addEventListener('keydown', handleKeyDown);
+    if (autoCloseWhenScroll) {
+      window.addEventListener('scroll', handleCloseSelect);
+    }
     return function () {
+      if (autoCloseWhenScroll) {
+        window.removeEventListener('scroll', handleCloseSelect);
+      }
       document.removeEventListener('mouseup', closeSelect);
       document.removeEventListener('keydown', handleKeyDown);
     };
@@ -96,7 +107,8 @@ var Select = function Select(props) {
   }, !selectedOption && /*#__PURE__*/_react.default.createElement(_Selects.Selected, null, /*#__PURE__*/_react.default.createElement(_Selects.Header, null, placeholder || ''), /*#__PURE__*/_react.default.createElement(_Selects.Chevron, null, /*#__PURE__*/_react.default.createElement(_BsChevronDown.default, null))), selectedOption && /*#__PURE__*/_react.default.createElement(_Selects.Selected, null, /*#__PURE__*/_react.default.createElement(_Selects.Header, null, selectedOption.showOnSelected || selectedOption.content), /*#__PURE__*/_react.default.createElement(_Selects.Chevron, null, /*#__PURE__*/_react.default.createElement(_BsChevronDown.default, null))), open && options && /*#__PURE__*/_react.default.createElement(_Selects.Options, {
     id: "list",
     position: "right",
-    ref: dropdownReference
+    ref: dropdownReference,
+    zIndex: zIndex
   }, options.map(function (option) {
     return /*#__PURE__*/_react.default.createElement(_Selects.Option, {
       id: "item",

package/_modules/styles/Selects/index.js

@@ -21,14 +21,17 @@ var Option = _styledComponents.default.div(_templateObject || (_templateObject =
   });
 });
 exports.Option = Option;
-var Options = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  background-color: #CCC;\n  margin-top: 7px;\n  z-index: 10000;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #CCC;\n  border-radius: 15px;\n  overflow: hidden;\n  ", "\n  ", "\n"])), function (_ref2) {
-  var position = _ref2.position;
+var Options = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  background-color: #CCC;\n  margin-top: 7px;\n  z-index: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: #CCC;\n  border-radius: 15px;\n  overflow: hidden;\n  ", "\n  ", "\n"])), function (_ref2) {
+  var zIndex = _ref2.zIndex;
+  return zIndex || 10000;
+}, function (_ref3) {
+  var position = _ref3.position;
   return (position === null || position === void 0 ? void 0 : position.toLowerCase()) === 'left' && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    left: 0;\n    margin-left: -1px;\n    ", "\n  "])), function (props) {
     var _props$theme2;
     return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        margin-right: -1px;\n        margin-left: 0px;\n        right: 0;\n        left: initial\n    "])));
   });
-}, function (_ref3) {
-  var position = _ref3.position;
+}, function (_ref4) {
+  var position = _ref4.position;
   return (position === null || position === void 0 ? void 0 : position.toLowerCase()) === 'right' && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    right: 0;\n    margin-right: -1px;\n    ", "\n  "])), function (props) {
     var _props$theme3;
     return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        margin-left: -1px;\n        margin-right: 0px;\n        left: 0;\n        right: initial;\n    "])));
@@ -37,11 +40,11 @@ var Options = _styledComponents.default.div(_templateObject5 || (_templateObject
 exports.Options = Options;
 var Selected = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding-left: 9px;\n  padding-right: 9px;\n  font-size: 13px;\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex: 1;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -khtml-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  z-index: 11;\n  @media (min-width: 381px) {\n    padding-left: 15px;\n    padding-right: 15px;\n  }\n"])));
 exports.Selected = Selected;
-var Select = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: inline-block;\n  height: 34px;\n  border-radius: 34px;\n  line-height: 34px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #CCC;\n  background-color: ", " !important;\n  color: ", " !important;\n  position: relative;\n  ", "\n  ", "\n"])), function (_ref4) {
-  var isHome = _ref4.isHome;
-  return isHome ? 'rgba(247,247,247,0.3)' : '#CCC';
-}, function (_ref5) {
+var Select = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: inline-block;\n  height: 34px;\n  border-radius: 34px;\n  line-height: 34px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #CCC;\n  background-color: ", " !important;\n  color: ", " !important;\n  position: relative;\n  ", "\n  ", "\n"])), function (_ref5) {
   var isHome = _ref5.isHome;
+  return isHome ? 'rgba(247,247,247,0.3)' : '#CCC';
+}, function (_ref6) {
+  var isHome = _ref6.isHome;
   return isHome ? '#FFF' : '#333';
 }, function (props) {
   return props.disabled && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    pointer-events: none;\n  "])));

package/_modules/themes/five/index.js

@@ -171,6 +171,12 @@ Object.defineProperty(exports, "Checkout", {
     return _Checkout.Checkout;
   }
 });
+Object.defineProperty(exports, "Confirm", {
+  enumerable: true,
+  get: function get() {
+    return _Confirm.Confirm;
+  }
+});
 Object.defineProperty(exports, "DriverTips", {
   enumerable: true,
   get: function get() {
@@ -621,6 +627,12 @@ Object.defineProperty(exports, "Select", {
     return _Select.Select;
   }
 });
+Object.defineProperty(exports, "SendGiftCard", {
+  enumerable: true,
+  get: function get() {
+    return _SendGiftCard.SendGiftCard;
+  }
+});
 Object.defineProperty(exports, "ServiceForm", {
   enumerable: true,
   get: function get() {
@@ -693,6 +705,12 @@ Object.defineProperty(exports, "Switch", {
     return _Switch.Switch;
   }
 });
+Object.defineProperty(exports, "TaxInformation", {
+  enumerable: true,
+  get: function get() {
+    return _TaxInformation.TaxInformation;
+  }
+});
 Object.defineProperty(exports, "TextArea", {
   enumerable: true,
   get: function get() {
@@ -864,6 +882,9 @@ var _ActionsSection = require("./src/components/OrderDetails/ActionsSection");
 var _ProductShare = require("./src/components/ProductShare");
 var _MultiCart = require("./src/components/MultiCart");
 var _QueryLoginSpoonity = require("./src/components/QueryLoginSpoonity");
+var _Confirm = require("./src/components/Confirm");
+var _TaxInformation = require("./src/components/TaxInformation");
+var _SendGiftCard = require("./src/components/GiftCard/SendGiftCard");
 var _Buttons = require("./src/styles/Buttons");
 var _Inputs = require("./src/styles/Inputs");
 var _Select = require("./src/styles/Select");

package/_modules/themes/five/src/components/BusinessBasicInformation/BusinessInfoComponent.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BusinessInfoComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("./styles");
+var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
+var _utils = require("../../../../../utils");
+var _useWindowSize = require("../../../../../hooks/useWindowSize");
+var _styledComponents = require("styled-components");
+var _SocialNetWork = require("./SocialNetWork");
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _orderingComponentsExternal = require("ordering-components-external");
+var _SearchComponent = require("./SearchComponent");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 BusinessInfoComponent = function BusinessInfoComponent(props) {
+  var _theme$business_view, _theme$business_view$, _theme$business_view$2, _theme$business_view$3, _theme$business_view$4, _theme$business_view$5, _theme$business_view$6, _theme$business_view2, _theme$business_view3, _theme$business_view4, _theme$business_view5, _theme$business_view6, _theme$business_view7, _theme$business_view8, _theme$business_view9, _theme$business_view10, _theme$business_view11, _theme$business_view12, _theme$business_view13, _theme$business_view14, _theme$business_view15, _theme$business_view16, _theme$business_view17, _theme$business_view18, _theme$business_view19, _theme$business_view20, _theme$business_view21, _theme$business_view22, _theme$business_view23, _theme$business_view24, _theme$business_view25, _theme$business_view26, _theme$business_view27, _theme$business_view28, _theme$business_view29, _theme$business_view30, _theme$business_view31, _theme$business_view32, _theme$business_view33, _theme$business_view34, _theme$business_view35, _theme$business_view36, _theme$business_view37, _theme$business_view38, _theme$business_view39, _configs$preorder_sta, _business$ribbon, _business$ribbon2, _business$ribbon3, _business$ribbon4, _business$ribbon5, _business$ribbon6, _business$ribbon7, _business$city, _business$city2, _orderState$options, _business$reviews, _business$reviews2, _categoryState$produc, _business$professiona;
+  var isChew = props.isChew,
+    loading = props.loading,
+    business = props.business,
+    isInfoShrunken = props.isInfoShrunken,
+    isCustomerMode = props.isCustomerMode,
+    setIsPreOrder = props.setIsPreOrder,
+    setIsBusinessReviews = props.setIsBusinessReviews,
+    categoryState = props.categoryState,
+    searchValue = props.searchValue,
+    errorQuantityProducts = props.errorQuantityProducts,
+    setOpenSearchProducts = props.setOpenSearchProducts,
+    handleChangeSortBy = props.handleChangeSortBy,
+    sortByValue = props.sortByValue,
+    sortByOptions = props.sortByOptions,
+    isCustomLayout = props.isCustomLayout;
+  var theme = (0, _styledComponents.useTheme)();
+  var _useOrder = (0, _orderingComponentsExternal.useOrder)(),
+    _useOrder2 = _slicedToArray(_useOrder, 1),
+    orderState = _useOrder2[0];
+  var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
+    _useUtils2 = _slicedToArray(_useUtils, 1),
+    _useUtils2$ = _useUtils2[0],
+    parsePrice = _useUtils2$.parsePrice,
+    parseDistance = _useUtils2$.parseDistance;
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
+    _useConfig2 = _slicedToArray(_useConfig, 1),
+    configs = _useConfig2[0].configs;
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var windowSize = (0, _useWindowSize.useWindowSize)();
+  var hideDeliveryFee = theme === null || theme === void 0 ? void 0 : (_theme$business_view = theme.business_view) === null || _theme$business_view === void 0 ? void 0 : (_theme$business_view$ = _theme$business_view.components) === null || _theme$business_view$ === void 0 ? void 0 : (_theme$business_view$2 = _theme$business_view$.header) === null || _theme$business_view$2 === void 0 ? void 0 : (_theme$business_view$3 = _theme$business_view$2.components) === null || _theme$business_view$3 === void 0 ? void 0 : (_theme$business_view$4 = _theme$business_view$3.business) === null || _theme$business_view$4 === void 0 ? void 0 : (_theme$business_view$5 = _theme$business_view$4.components) === null || _theme$business_view$5 === void 0 ? void 0 : (_theme$business_view$6 = _theme$business_view$5.fee) === null || _theme$business_view$6 === void 0 ? void 0 : _theme$business_view$6.hidden;
+  var hideTime = theme === null || theme === void 0 ? void 0 : (_theme$business_view2 = theme.business_view) === null || _theme$business_view2 === void 0 ? void 0 : (_theme$business_view3 = _theme$business_view2.components) === null || _theme$business_view3 === void 0 ? void 0 : (_theme$business_view4 = _theme$business_view3.header) === null || _theme$business_view4 === void 0 ? void 0 : (_theme$business_view5 = _theme$business_view4.components) === null || _theme$business_view5 === void 0 ? void 0 : (_theme$business_view6 = _theme$business_view5.business) === null || _theme$business_view6 === void 0 ? void 0 : (_theme$business_view7 = _theme$business_view6.components) === null || _theme$business_view7 === void 0 ? void 0 : (_theme$business_view8 = _theme$business_view7.time) === null || _theme$business_view8 === void 0 ? void 0 : _theme$business_view8.hidden;
+  var hideReviews = theme === null || theme === void 0 ? void 0 : (_theme$business_view9 = theme.business_view) === null || _theme$business_view9 === void 0 ? void 0 : (_theme$business_view10 = _theme$business_view9.components) === null || _theme$business_view10 === void 0 ? void 0 : (_theme$business_view11 = _theme$business_view10.header) === null || _theme$business_view11 === void 0 ? void 0 : (_theme$business_view12 = _theme$business_view11.components) === null || _theme$business_view12 === void 0 ? void 0 : (_theme$business_view13 = _theme$business_view12.business) === null || _theme$business_view13 === void 0 ? void 0 : (_theme$business_view14 = _theme$business_view13.components) === null || _theme$business_view14 === void 0 ? void 0 : (_theme$business_view15 = _theme$business_view14.reviews) === null || _theme$business_view15 === void 0 ? void 0 : _theme$business_view15.hidden;
+  var hideReviewsPopup = theme === null || theme === void 0 ? void 0 : (_theme$business_view16 = theme.business_view) === null || _theme$business_view16 === void 0 ? void 0 : (_theme$business_view17 = _theme$business_view16.components) === null || _theme$business_view17 === void 0 ? void 0 : (_theme$business_view18 = _theme$business_view17.header) === null || _theme$business_view18 === void 0 ? void 0 : (_theme$business_view19 = _theme$business_view18.components) === null || _theme$business_view19 === void 0 ? void 0 : (_theme$business_view20 = _theme$business_view19.reviews) === null || _theme$business_view20 === void 0 ? void 0 : _theme$business_view20.hidden;
+  var hideDistance = theme === null || theme === void 0 ? void 0 : (_theme$business_view21 = theme.business_view) === null || _theme$business_view21 === void 0 ? void 0 : (_theme$business_view22 = _theme$business_view21.components) === null || _theme$business_view22 === void 0 ? void 0 : (_theme$business_view23 = _theme$business_view22.header) === null || _theme$business_view23 === void 0 ? void 0 : (_theme$business_view24 = _theme$business_view23.components) === null || _theme$business_view24 === void 0 ? void 0 : (_theme$business_view25 = _theme$business_view24.business) === null || _theme$business_view25 === void 0 ? void 0 : (_theme$business_view26 = _theme$business_view25.components) === null || _theme$business_view26 === void 0 ? void 0 : (_theme$business_view27 = _theme$business_view26.distance) === null || _theme$business_view27 === void 0 ? void 0 : _theme$business_view27.hidden;
+  var hideCity = theme === null || theme === void 0 ? void 0 : (_theme$business_view28 = theme.business_view) === null || _theme$business_view28 === void 0 ? void 0 : (_theme$business_view29 = _theme$business_view28.components) === null || _theme$business_view29 === void 0 ? void 0 : (_theme$business_view30 = _theme$business_view29.header) === null || _theme$business_view30 === void 0 ? void 0 : (_theme$business_view31 = _theme$business_view30.components) === null || _theme$business_view31 === void 0 ? void 0 : (_theme$business_view32 = _theme$business_view31.business) === null || _theme$business_view32 === void 0 ? void 0 : (_theme$business_view33 = _theme$business_view32.components) === null || _theme$business_view33 === void 0 ? void 0 : (_theme$business_view34 = _theme$business_view33.city) === null || _theme$business_view34 === void 0 ? void 0 : _theme$business_view34.hidden;
+  var layoutsWithOldSearch = ['starbucks', 'old', 'floating'];
+  var hideSearch = layoutsWithOldSearch.includes(theme === null || theme === void 0 ? void 0 : (_theme$business_view35 = theme.business_view) === null || _theme$business_view35 === void 0 ? void 0 : (_theme$business_view36 = _theme$business_view35.components) === null || _theme$business_view36 === void 0 ? void 0 : (_theme$business_view37 = _theme$business_view36.product_search) === null || _theme$business_view37 === void 0 ? void 0 : (_theme$business_view38 = _theme$business_view37.components) === null || _theme$business_view38 === void 0 ? void 0 : (_theme$business_view39 = _theme$business_view38.layout) === null || _theme$business_view39 === void 0 ? void 0 : _theme$business_view39.type);
+  var isPreOrderSetting = (configs === null || configs === void 0 ? void 0 : (_configs$preorder_sta = configs.preorder_status_enabled) === null || _configs$preorder_sta === void 0 ? void 0 : _configs$preorder_sta.value) === '1';
+  var searchComponentProps = {
+    setOpenSearchProducts: setOpenSearchProducts,
+    handleChangeSortBy: handleChangeSortBy,
+    sortByValue: sortByValue,
+    sortByOptions: sortByOptions
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.BusinessInfoContainer, {
+    isChew: isChew,
+    isFlexEnd: windowSize.width >= 768
+  }, /*#__PURE__*/_react.default.createElement(_styles.BusinessInfoContent, null, /*#__PURE__*/_react.default.createElement(_styles.BusinessInfo, {
+    className: "info"
+  }, /*#__PURE__*/_react.default.createElement(_styles.BusinessInfoItem, {
+    isInfoShrunken: isInfoShrunken
+  }, !loading ? /*#__PURE__*/_react.default.createElement(_styles.TitleWrapper, {
+    isCustomLayout: isCustomLayout
+  }, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "bold",
+    id: "business_name"
+  }, business === null || business === void 0 ? void 0 : business.name), (business === null || business === void 0 ? void 0 : (_business$ribbon = business.ribbon) === null || _business$ribbon === void 0 ? void 0 : _business$ribbon.enabled) && /*#__PURE__*/_react.default.createElement(_styles.RibbonBox, {
+    bgColor: business === null || business === void 0 ? void 0 : (_business$ribbon2 = business.ribbon) === null || _business$ribbon2 === void 0 ? void 0 : _business$ribbon2.color,
+    colorText: (0, _utils.lightenDarkenColor)(business === null || business === void 0 ? void 0 : (_business$ribbon3 = business.ribbon) === null || _business$ribbon3 === void 0 ? void 0 : _business$ribbon3.color),
+    borderRibbon: (0, _utils.lightenDarkenColor)(business === null || business === void 0 ? void 0 : (_business$ribbon4 = business.ribbon) === null || _business$ribbon4 === void 0 ? void 0 : _business$ribbon4.color),
+    isRoundRect: (business === null || business === void 0 ? void 0 : (_business$ribbon5 = business.ribbon) === null || _business$ribbon5 === void 0 ? void 0 : _business$ribbon5.shape) === (_utils.shape === null || _utils.shape === void 0 ? void 0 : _utils.shape.rectangleRound),
+    isCapsule: (business === null || business === void 0 ? void 0 : (_business$ribbon6 = business.ribbon) === null || _business$ribbon6 === void 0 ? void 0 : _business$ribbon6.shape) === (_utils.shape === null || _utils.shape === void 0 ? void 0 : _utils.shape.capsuleShape)
+  }, business === null || business === void 0 ? void 0 : (_business$ribbon7 = business.ribbon) === null || _business$ribbon7 === void 0 ? void 0 : _business$ribbon7.text)) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    width: isCustomerMode ? 100 : 150,
+    height: isCustomerMode ? 35 : 'auto'
+  }), typeof hideCity !== 'undefined' && !hideCity && (business === null || business === void 0 ? void 0 : (_business$city = business.city) === null || _business$city === void 0 ? void 0 : _business$city.name) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !loading ? /*#__PURE__*/_react.default.createElement("p", {
+    className: "type"
+  }, business === null || business === void 0 ? void 0 : (_business$city2 = business.city) === null || _business$city2 === void 0 ? void 0 : _business$city2.name) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    width: isCustomerMode ? 100 : 150
+  })), !loading ? /*#__PURE__*/_react.default.createElement(_styles.SocialList, null, (business === null || business === void 0 ? void 0 : business.facebook_profile) && /*#__PURE__*/_react.default.createElement(_SocialNetWork.SocialNetWork, {
+    url: business === null || business === void 0 ? void 0 : business.facebook_profile,
+    icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Facebook, null)
+  }), (business === null || business === void 0 ? void 0 : business.instagram_profile) && /*#__PURE__*/_react.default.createElement(_SocialNetWork.SocialNetWork, {
+    url: business === null || business === void 0 ? void 0 : business.instagram_profile,
+    icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Instagram, null)
+  }), (business === null || business === void 0 ? void 0 : business.tiktok_profile) && /*#__PURE__*/_react.default.createElement(_SocialNetWork.SocialNetWork, {
+    url: business === null || business === void 0 ? void 0 : business.tiktok_profile,
+    icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Tiktok, null)
+  }), (business === null || business === void 0 ? void 0 : business.pinterest_profile) && /*#__PURE__*/_react.default.createElement(_SocialNetWork.SocialNetWork, {
+    url: business === null || business === void 0 ? void 0 : business.pinterest_profile,
+    icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Pinterest, null)
+  }), (business === null || business === void 0 ? void 0 : business.whatsapp_number) && /*#__PURE__*/_react.default.createElement(_SocialNetWork.SocialNetWork, {
+    url: business === null || business === void 0 ? void 0 : business.whatsapp_number,
+    icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Whatsapp, null)
+  }), (business === null || business === void 0 ? void 0 : business.snapchat_profile) && /*#__PURE__*/_react.default.createElement(_SocialNetWork.SocialNetWork, {
+    url: business === null || business === void 0 ? void 0 : business.snapchat_profile,
+    icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Snapchat, null)
+  })) : /*#__PURE__*/_react.default.createElement(_styles.SocialList, null, _toConsumableArray(Array(5).keys()).map(function (i) {
+    return /*#__PURE__*/_react.default.createElement(_styles.IconWrapper, {
+      isSkeleton: true,
+      key: i
+    }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      width: 27,
+      height: 27
+    }));
+  })), /*#__PURE__*/_react.default.createElement(_styles.BusinessDetail, {
+    isSkeleton: loading
+  }, (orderState === null || orderState === void 0 ? void 0 : orderState.options.type) === 1 && !hideDeliveryFee && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !loading ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement("span", null, t('DELIVERY_FEE', 'Delivery fee')), business && parsePrice((business === null || business === void 0 ? void 0 : business.delivery_price) || 0)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "dot"
+  }, "\u2022")) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    width: isCustomerMode ? 70 : 50
+  })), !hideTime && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !loading ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (orderState === null || orderState === void 0 ? void 0 : (_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : _orderState$options.type) === 1 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h5", null, (0, _utils.convertHoursToMinutes)(business === null || business === void 0 ? void 0 : business.delivery_time)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "dot"
+  }, "\u2022")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h5", null, (0, _utils.convertHoursToMinutes)(business === null || business === void 0 ? void 0 : business.pickup_time)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "dot"
+  }, "\u2022"))) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    width: isCustomerMode ? 70 : 50
+  })), !hideDistance && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !loading ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h5", null, parseDistance((business === null || business === void 0 ? void 0 : business.distance) || 0)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "dot"
+  }, "\u2022")) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    width: isCustomerMode ? 70 : 50
+  })), !hideReviews && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !loading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "review"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.StarFill, {
+    className: "start"
+  }), /*#__PURE__*/_react.default.createElement("p", null, business === null || business === void 0 ? void 0 : (_business$reviews = business.reviews) === null || _business$reviews === void 0 ? void 0 : _business$reviews.total)) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    width: isCustomerMode ? 100 : 50
+  }))), !loading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "preorder-Reviews"
+  }, isPreOrderSetting && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    onClick: function onClick() {
+      return setIsPreOrder(true);
+    }
+  }, t('PREORDER', 'Preorder')), /*#__PURE__*/_react.default.createElement("span", {
+    className: "dot"
+  }, "\u2022")), ((_business$reviews2 = business.reviews) === null || _business$reviews2 === void 0 ? void 0 : _business$reviews2.reviews) && !hideReviewsPopup && /*#__PURE__*/_react.default.createElement("span", {
+    onClick: function onClick() {
+      return setIsBusinessReviews(true);
+    }
+  }, t('REVIEWS', 'Reviews'))) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    width: isCustomerMode ? 100 : 150
+  })))), !hideSearch && ((categoryState === null || categoryState === void 0 ? void 0 : (_categoryState$produc = categoryState.products) === null || _categoryState$produc === void 0 ? void 0 : _categoryState$produc.length) !== 0 || searchValue) && !errorQuantityProducts && !isInfoShrunken && !(business !== null && business !== void 0 && (_business$professiona = business.professionals) !== null && _business$professiona !== void 0 && _business$professiona.length) &&
+  /*#__PURE__*/
+  // (categoryClicked || windowSize.width >= 993) &&
+  _react.default.createElement(_SearchComponent.SearchComponent, searchComponentProps));
+};
+exports.BusinessInfoComponent = BusinessInfoComponent;

package/_modules/themes/five/src/components/BusinessBasicInformation/SearchComponent.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("./styles");
+var _Select = require("../../styles/Select");
+var _styledComponents = require("styled-components");
+var _CgSearch = _interopRequireDefault(require("@meronex/icons/cg/CgSearch"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var SearchComponent = function SearchComponent(props) {
+  var _theme$business_view, _theme$business_view$, _theme$business_view$2, _theme$business_view$3, _theme$business_view$4, _theme$business_view$5, _theme$business_view$6;
+  var setOpenSearchProducts = props.setOpenSearchProducts,
+    handleChangeSortBy = props.handleChangeSortBy,
+    sortByValue = props.sortByValue,
+    sortByOptions = props.sortByOptions,
+    isResponsive = props.isResponsive;
+  var theme = (0, _styledComponents.useTheme)();
+  var hideSort = theme === null || theme === void 0 ? void 0 : (_theme$business_view = theme.business_view) === null || _theme$business_view === void 0 ? void 0 : (_theme$business_view$ = _theme$business_view.components) === null || _theme$business_view$ === void 0 ? void 0 : (_theme$business_view$2 = _theme$business_view$.header) === null || _theme$business_view$2 === void 0 ? void 0 : (_theme$business_view$3 = _theme$business_view$2.components) === null || _theme$business_view$3 === void 0 ? void 0 : (_theme$business_view$4 = _theme$business_view$3.business) === null || _theme$business_view$4 === void 0 ? void 0 : (_theme$business_view$5 = _theme$business_view$4.components) === null || _theme$business_view$5 === void 0 ? void 0 : (_theme$business_view$6 = _theme$business_view$5.sort) === null || _theme$business_view$6 === void 0 ? void 0 : _theme$business_view$6.hidden;
+  return /*#__PURE__*/_react.default.createElement(_styles.WrapperSearch, {
+    id: "search-component",
+    isResponsive: isResponsive
+  }, /*#__PURE__*/_react.default.createElement(_styles.SearchWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.SearchIconWrapper, {
+    onClick: function onClick() {
+      return setOpenSearchProducts(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CgSearch.default, null)), !hideSort && /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    notAsync: true,
+    notReload: true,
+    options: sortByOptions,
+    defaultValue: sortByValue,
+    onChange: function onChange(val) {
+      return handleChangeSortBy && handleChangeSortBy(val);
+    }
+  })));
+};
+exports.SearchComponent = SearchComponent;

package/_modules/themes/five/src/components/BusinessBasicInformation/SocialNetWork.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SocialNetWork = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var SocialNetWork = function SocialNetWork(_ref) {
+  var url = _ref.url,
+    icon = _ref.icon;
+  return /*#__PURE__*/_react.default.createElement(_styles.IconWrapper, {
+    href: url,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, icon);
+};
+exports.SocialNetWork = SocialNetWork;