ordering-ui-external 10.1.0 → 10.2.0

package/_modules/themes/six/src/components/BusinessBasicInformation/index.js

@@ -13,6 +13,7 @@ var _FaStar = _interopRequireDefault(require("@meronex/icons/fa/FaStar"));
 var _orderingComponentsExternal = require("ordering-components-external");
 var _utils = require("../../../../../utils");
 var _styles = require("./styles");
+var _styledComponents = require("styled-components");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -23,7 +24,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var types = ['food', 'laundry', 'alcohol', 'groceries'];
 var BusinessBasicInformation = function BusinessBasicInformation(props) {
-  var _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5, _orderingTheme$theme$6, _orderingTheme$theme$7, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _orderingTheme$theme7, _orderingTheme$theme8, _orderingTheme$theme9, _orderingTheme$theme10, _orderingTheme$theme11, _orderingTheme$theme12, _orderingTheme$theme13, _orderingTheme$theme14, _orderingTheme$theme15, _orderingTheme$theme16, _orderingTheme$theme17, _orderingTheme$theme18, _orderingTheme$theme19, _orderingTheme$theme20, _orderingTheme$theme21, _orderingTheme$theme22, _orderingTheme$theme23, _orderingTheme$theme24, _orderingTheme$theme25, _orderingTheme$theme26, _orderingTheme$theme27, _orderingTheme$theme28, _orderingTheme$theme29, _orderingTheme$theme30, _orderingTheme$theme31, _orderingTheme$theme32, _orderingTheme$theme33, _props$beforeElements, _props$beforeComponen, _orderState$options, _business$reviews, _props$afterComponent, _props$afterElements;
+  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, _props$beforeElements, _props$beforeComponen, _orderState$options, _business$reviews, _props$afterComponent, _props$afterElements;
   var isSkeleton = props.isSkeleton,
     businessState = props.businessState;
   var business = businessState.business,
@@ -39,9 +40,7 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
     _useUtils2$ = _useUtils2[0],
     parsePrice = _useUtils2$.parsePrice,
     parseDistance = _useUtils2$.parseDistance;
-  var _useOrderingTheme = (0, _orderingComponentsExternal.useOrderingTheme)(),
-    _useOrderingTheme2 = _slicedToArray(_useOrderingTheme, 1),
-    orderingTheme = _useOrderingTheme2[0];
+  var theme = (0, _styledComponents.useTheme)();
   var getBusinessType = function getBusinessType() {
     if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
     var _types = [];
@@ -51,11 +50,11 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
     });
     return _types.join(', ');
   };
-  var showDeliveryFee = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme = orderingTheme.theme) !== null && _orderingTheme$theme !== void 0 && (_orderingTheme$theme$ = _orderingTheme$theme.business_view) !== null && _orderingTheme$theme$ !== void 0 && (_orderingTheme$theme$2 = _orderingTheme$theme$.components) !== null && _orderingTheme$theme$2 !== void 0 && (_orderingTheme$theme$3 = _orderingTheme$theme$2.header) !== null && _orderingTheme$theme$3 !== void 0 && (_orderingTheme$theme$4 = _orderingTheme$theme$3.components) !== null && _orderingTheme$theme$4 !== void 0 && (_orderingTheme$theme$5 = _orderingTheme$theme$4.business) !== null && _orderingTheme$theme$5 !== void 0 && (_orderingTheme$theme$6 = _orderingTheme$theme$5.components) !== null && _orderingTheme$theme$6 !== void 0 && (_orderingTheme$theme$7 = _orderingTheme$theme$6.fee) !== null && _orderingTheme$theme$7 !== void 0 && _orderingTheme$theme$7.hidden);
-  var showTime = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme2 = orderingTheme.theme) !== null && _orderingTheme$theme2 !== void 0 && (_orderingTheme$theme3 = _orderingTheme$theme2.business_view) !== null && _orderingTheme$theme3 !== void 0 && (_orderingTheme$theme4 = _orderingTheme$theme3.components) !== null && _orderingTheme$theme4 !== void 0 && (_orderingTheme$theme5 = _orderingTheme$theme4.header) !== null && _orderingTheme$theme5 !== void 0 && (_orderingTheme$theme6 = _orderingTheme$theme5.components) !== null && _orderingTheme$theme6 !== void 0 && (_orderingTheme$theme7 = _orderingTheme$theme6.business) !== null && _orderingTheme$theme7 !== void 0 && (_orderingTheme$theme8 = _orderingTheme$theme7.components) !== null && _orderingTheme$theme8 !== void 0 && (_orderingTheme$theme9 = _orderingTheme$theme8.time) !== null && _orderingTheme$theme9 !== void 0 && _orderingTheme$theme9.hidden);
-  var showBusinessInfo = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme10 = orderingTheme.theme) !== null && _orderingTheme$theme10 !== void 0 && (_orderingTheme$theme11 = _orderingTheme$theme10.business_view) !== null && _orderingTheme$theme11 !== void 0 && (_orderingTheme$theme12 = _orderingTheme$theme11.components) !== null && _orderingTheme$theme12 !== void 0 && (_orderingTheme$theme13 = _orderingTheme$theme12.header) !== null && _orderingTheme$theme13 !== void 0 && (_orderingTheme$theme14 = _orderingTheme$theme13.components) !== null && _orderingTheme$theme14 !== void 0 && (_orderingTheme$theme15 = _orderingTheme$theme14.business) !== null && _orderingTheme$theme15 !== void 0 && (_orderingTheme$theme16 = _orderingTheme$theme15.components) !== null && _orderingTheme$theme16 !== void 0 && (_orderingTheme$theme17 = _orderingTheme$theme16.business_info) !== null && _orderingTheme$theme17 !== void 0 && _orderingTheme$theme17.hidden);
-  var showReviews = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme18 = orderingTheme.theme) !== null && _orderingTheme$theme18 !== void 0 && (_orderingTheme$theme19 = _orderingTheme$theme18.business_view) !== null && _orderingTheme$theme19 !== void 0 && (_orderingTheme$theme20 = _orderingTheme$theme19.components) !== null && _orderingTheme$theme20 !== void 0 && (_orderingTheme$theme21 = _orderingTheme$theme20.header) !== null && _orderingTheme$theme21 !== void 0 && (_orderingTheme$theme22 = _orderingTheme$theme21.components) !== null && _orderingTheme$theme22 !== void 0 && (_orderingTheme$theme23 = _orderingTheme$theme22.business) !== null && _orderingTheme$theme23 !== void 0 && (_orderingTheme$theme24 = _orderingTheme$theme23.components) !== null && _orderingTheme$theme24 !== void 0 && (_orderingTheme$theme25 = _orderingTheme$theme24.reviews) !== null && _orderingTheme$theme25 !== void 0 && _orderingTheme$theme25.hidden);
-  var showDistance = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme26 = orderingTheme.theme) !== null && _orderingTheme$theme26 !== void 0 && (_orderingTheme$theme27 = _orderingTheme$theme26.business_view) !== null && _orderingTheme$theme27 !== void 0 && (_orderingTheme$theme28 = _orderingTheme$theme27.components) !== null && _orderingTheme$theme28 !== void 0 && (_orderingTheme$theme29 = _orderingTheme$theme28.header) !== null && _orderingTheme$theme29 !== void 0 && (_orderingTheme$theme30 = _orderingTheme$theme29.components) !== null && _orderingTheme$theme30 !== void 0 && (_orderingTheme$theme31 = _orderingTheme$theme30.business) !== null && _orderingTheme$theme31 !== void 0 && (_orderingTheme$theme32 = _orderingTheme$theme31.components) !== null && _orderingTheme$theme32 !== void 0 && (_orderingTheme$theme33 = _orderingTheme$theme32.distance) !== null && _orderingTheme$theme33 !== void 0 && _orderingTheme$theme33.hidden);
+  var showDeliveryFee = !(theme !== null && theme !== void 0 && (_theme$business_view = theme.business_view) !== null && _theme$business_view !== void 0 && (_theme$business_view$ = _theme$business_view.components) !== null && _theme$business_view$ !== void 0 && (_theme$business_view$2 = _theme$business_view$.header) !== null && _theme$business_view$2 !== void 0 && (_theme$business_view$3 = _theme$business_view$2.components) !== null && _theme$business_view$3 !== void 0 && (_theme$business_view$4 = _theme$business_view$3.business) !== null && _theme$business_view$4 !== void 0 && (_theme$business_view$5 = _theme$business_view$4.components) !== null && _theme$business_view$5 !== void 0 && (_theme$business_view$6 = _theme$business_view$5.fee) !== null && _theme$business_view$6 !== void 0 && _theme$business_view$6.hidden);
+  var showTime = !(theme !== null && theme !== void 0 && (_theme$business_view2 = theme.business_view) !== null && _theme$business_view2 !== void 0 && (_theme$business_view3 = _theme$business_view2.components) !== null && _theme$business_view3 !== void 0 && (_theme$business_view4 = _theme$business_view3.header) !== null && _theme$business_view4 !== void 0 && (_theme$business_view5 = _theme$business_view4.components) !== null && _theme$business_view5 !== void 0 && (_theme$business_view6 = _theme$business_view5.business) !== null && _theme$business_view6 !== void 0 && (_theme$business_view7 = _theme$business_view6.components) !== null && _theme$business_view7 !== void 0 && (_theme$business_view8 = _theme$business_view7.time) !== null && _theme$business_view8 !== void 0 && _theme$business_view8.hidden);
+  var showBusinessInfo = !(theme !== null && theme !== void 0 && (_theme$business_view9 = theme.business_view) !== null && _theme$business_view9 !== void 0 && (_theme$business_view10 = _theme$business_view9.components) !== null && _theme$business_view10 !== void 0 && (_theme$business_view11 = _theme$business_view10.header) !== null && _theme$business_view11 !== void 0 && (_theme$business_view12 = _theme$business_view11.components) !== null && _theme$business_view12 !== void 0 && (_theme$business_view13 = _theme$business_view12.business) !== null && _theme$business_view13 !== void 0 && (_theme$business_view14 = _theme$business_view13.components) !== null && _theme$business_view14 !== void 0 && (_theme$business_view15 = _theme$business_view14.business_info) !== null && _theme$business_view15 !== void 0 && _theme$business_view15.hidden);
+  var showReviews = !(theme !== null && theme !== void 0 && (_theme$business_view16 = theme.business_view) !== null && _theme$business_view16 !== void 0 && (_theme$business_view17 = _theme$business_view16.components) !== null && _theme$business_view17 !== void 0 && (_theme$business_view18 = _theme$business_view17.header) !== null && _theme$business_view18 !== void 0 && (_theme$business_view19 = _theme$business_view18.components) !== null && _theme$business_view19 !== void 0 && (_theme$business_view20 = _theme$business_view19.business) !== null && _theme$business_view20 !== void 0 && (_theme$business_view21 = _theme$business_view20.components) !== null && _theme$business_view21 !== void 0 && (_theme$business_view22 = _theme$business_view21.reviews) !== null && _theme$business_view22 !== void 0 && _theme$business_view22.hidden);
+  var showDistance = !(theme !== null && theme !== void 0 && (_theme$business_view23 = theme.business_view) !== null && _theme$business_view23 !== void 0 && (_theme$business_view24 = _theme$business_view23.components) !== null && _theme$business_view24 !== void 0 && (_theme$business_view25 = _theme$business_view24.header) !== null && _theme$business_view25 !== void 0 && (_theme$business_view26 = _theme$business_view25.components) !== null && _theme$business_view26 !== void 0 && (_theme$business_view27 = _theme$business_view26.business) !== null && _theme$business_view27 !== void 0 && (_theme$business_view28 = _theme$business_view27.components) !== null && _theme$business_view28 !== void 0 && (_theme$business_view29 = _theme$business_view28.distance) !== null && _theme$business_view29 !== void 0 && _theme$business_view29.hidden);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i

package/_modules/themes/six/src/components/BusinessProductsListing/SearchProducts/index.js

@@ -17,7 +17,7 @@ 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 SearchProducts = function SearchProducts(props) {
-  var _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5, _orderingTheme$theme$6, _orderingTheme$theme$7, _theme$business_view, _theme$business_view$, _theme$business_view$2, _theme$business_view$3, _theme$business_view$4, _theme$defaultLanguag, _businessState$busine;
+  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$defaultLanguag, _businessState$busine;
   var handleChangeSearch = props.handleChangeSearch,
     searchValue = props.searchValue,
     businessState = props.businessState,
@@ -28,11 +28,8 @@ var SearchProducts = function SearchProducts(props) {
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
-  var _useOrderingTheme = (0, _orderingComponentsExternal.useOrderingTheme)(),
-    _useOrderingTheme2 = _slicedToArray(_useOrderingTheme, 1),
-    orderingTheme = _useOrderingTheme2[0];
-  var showSort = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme = orderingTheme.theme) !== null && _orderingTheme$theme !== void 0 && (_orderingTheme$theme$ = _orderingTheme$theme.business_view) !== null && _orderingTheme$theme$ !== void 0 && (_orderingTheme$theme$2 = _orderingTheme$theme$.components) !== null && _orderingTheme$theme$2 !== void 0 && (_orderingTheme$theme$3 = _orderingTheme$theme$2.header) !== null && _orderingTheme$theme$3 !== void 0 && (_orderingTheme$theme$4 = _orderingTheme$theme$3.components) !== null && _orderingTheme$theme$4 !== void 0 && (_orderingTheme$theme$5 = _orderingTheme$theme$4.business) !== null && _orderingTheme$theme$5 !== void 0 && (_orderingTheme$theme$6 = _orderingTheme$theme$5.components) !== null && _orderingTheme$theme$6 !== void 0 && (_orderingTheme$theme$7 = _orderingTheme$theme$6.sort) !== null && _orderingTheme$theme$7 !== void 0 && _orderingTheme$theme$7.hidden);
-  var searchLayout = 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$.product_search) === 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.layout) === null || _theme$business_view$4 === void 0 ? void 0 : _theme$business_view$4.type;
+  var showSort = !(theme !== null && theme !== void 0 && (_theme$business_view = theme.business_view) !== null && _theme$business_view !== void 0 && (_theme$business_view$ = _theme$business_view.components) !== null && _theme$business_view$ !== void 0 && (_theme$business_view$2 = _theme$business_view$.header) !== null && _theme$business_view$2 !== void 0 && (_theme$business_view$3 = _theme$business_view$2.components) !== null && _theme$business_view$3 !== void 0 && (_theme$business_view$4 = _theme$business_view$3.business) !== null && _theme$business_view$4 !== void 0 && (_theme$business_view$5 = _theme$business_view$4.components) !== null && _theme$business_view$5 !== void 0 && (_theme$business_view$6 = _theme$business_view$5.sort) !== null && _theme$business_view$6 !== void 0 && _theme$business_view$6.hidden);
+  var searchLayout = 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.product_search) === 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.layout) === null || _theme$business_view6 === void 0 ? void 0 : _theme$business_view6.type;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
     onSearch: handleChangeSearch,
     search: searchValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -88,7 +88,7 @@
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
     "nanoid": "^4.0.0",
-    "ordering-components-external": "9.1.0",
+    "ordering-components-external": "9.2.0",
     "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",

package/src/components/BusinessBasicInformation/index.js

@@ -9,7 +9,7 @@ import { useTheme } from 'styled-components'
 import { Modal } from '../Modal'
 import { BusinessInformation } from '../BusinessInformation'
 
-import { useUtils, useOrder, useLanguage, useOrderingTheme } from 'ordering-components-external'
+import { useUtils, useOrder, useLanguage } from 'ordering-components-external'
 
 import { convertHoursToMinutes } from '../../utils'
 
@@ -37,7 +37,6 @@ export const BusinessBasicInformation = (props) => {
   const [orderState] = useOrder()
   const [, t] = useLanguage()
   const [{ parsePrice, parseDistance, optimizeImage }] = useUtils()
-  const [orderingTheme] = useOrderingTheme()
 
   const getBusinessType = () => {
     if (Object.keys(business).length <= 0) return t('GENERAL', 'General')
@@ -48,12 +47,12 @@ export const BusinessBasicInformation = (props) => {
     return _types.join(', ')
   }
 
-  const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
-  const showDeliveryFee = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
-  const showTime = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
-  const showBusinessInfo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.business_info?.hidden
-  const showReviews = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
-  const showDistance = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
+  const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+  const showDeliveryFee = !theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
+  const showTime = !theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
+  const showBusinessInfo = !theme?.business_view?.components?.header?.components?.business?.components?.business_info?.hidden
+  const showReviews = !theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
+  const showDistance = !theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
 
   return (
     <>

package/src/components/OrderDetails/index.js

@@ -5,8 +5,7 @@ import {
   useEvent,
   useUtils,
   useConfig,
-  GoogleMapsMap,
-  useOrderingTheme
+  GoogleMapsMap
 } from 'ordering-components-external'
 import FiPhone from '@meronex/icons/fi/FiPhone'
 import FaUserCircle from '@meronex/icons/fa/FaUserCircle'
@@ -90,7 +89,6 @@ const OrderDetailsUI = (props) => {
   const theme = useTheme()
   const [events] = useEvent()
   const [{ parsePrice, parseNumber, parseDate }] = useUtils()
-  const [orderingTheme] = useOrderingTheme()
   const [openMessages, setOpenMessages] = useState({ business: false, driver: false })
   const [isReviewOpen, setIsReviewOpen] = useState(false)
   const [isOrderReviewed, setIsOrderReviewed] = useState(false)
@@ -106,19 +104,19 @@ const OrderDetailsUI = (props) => {
 
   const isFromCheckPage = JSON.parse(window.localStorage.getItem('business-address'))
 
-  const showDeliveryDate = !orderingTheme?.theme?.confirmation?.components?.order?.components?.date?.hidden
-  const showDeliveryProgress = !orderingTheme?.theme?.confirmation?.components?.order?.components?.progress?.hidden
-  const showBusinessMessages = !orderingTheme?.theme?.confirmation?.components?.business?.components?.messages?.hidden
-  const showBusinessAddress = !orderingTheme?.theme?.confirmation?.components?.business?.components?.address?.hidden
-  const showBusinessMap = !orderingTheme?.theme?.confirmation?.components?.business?.components?.map?.hidden
-  const showBusinessLogo = !orderingTheme?.theme?.confirmation?.components?.business?.components?.logo?.hidden
-  const showDriverName = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.name?.hidden
-  const showDriverPhone = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.phone?.hidden
-  const showDriverMessages = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.messages?.hidden
-  const showDriverEmail = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.email?.hidden
-  const showDriverPhoto = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.photo?.hidden
-  const showCustomerAddress = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.address?.hidden
-  const showCustomerPhoto = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.photo?.hidden
+  const showDeliveryDate = !theme?.confirmation?.components?.order?.components?.date?.hidden
+  const showDeliveryProgress = !theme?.confirmation?.components?.order?.components?.progress?.hidden
+  const showBusinessMessages = !theme?.confirmation?.components?.business?.components?.messages?.hidden
+  const showBusinessAddress = !theme?.confirmation?.components?.business?.components?.address?.hidden
+  const showBusinessMap = !theme?.confirmation?.components?.business?.components?.map?.hidden
+  const showBusinessLogo = !theme?.confirmation?.components?.business?.components?.logo?.hidden
+  const showDriverName = !theme?.confirmation?.components?.driver?.components?.name?.hidden
+  const showDriverPhone = !theme?.confirmation?.components?.driver?.components?.phone?.hidden
+  const showDriverMessages = !theme?.confirmation?.components?.driver?.components?.messages?.hidden
+  const showDriverEmail = !theme?.confirmation?.components?.driver?.components?.email?.hidden
+  const showDriverPhoto = !theme?.confirmation?.components?.driver?.components?.photo?.hidden
+  const showCustomerAddress = !theme?.confirmation?.components?.customer?.components?.address?.hidden
+  const showCustomerPhoto = !theme?.confirmation?.components?.customer?.components?.photo?.hidden
 
   const getOrderStatus = (s) => {
     const status = parseInt(s)

package/src/components/ProductItemAccordion/index.js

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react'
 import TiPencil from '@meronex/icons/ti/TiPencil'
 import IosArrowDown from '@meronex/icons/ios/IosArrowDown'
 import VscTrash from '@meronex/icons/vsc/VscTrash'
-import { useUtils, useLanguage, useOrder, useOrderingTheme } from 'ordering-components-external'
+import { useUtils, useLanguage, useOrder } from 'ordering-components-external'
 import { useWindowSize } from '../../hooks/useWindowSize'
 
 import {
@@ -25,6 +25,7 @@ import {
   ProductOptionsList,
   ProductQuantity
 } from './styles'
+import { useTheme } from 'styled-components'
 
 export const ProductItemAccordion = (props) => {
   const {
@@ -40,8 +41,8 @@ export const ProductItemAccordion = (props) => {
   const [, t] = useLanguage()
   const [orderState] = useOrder()
   const [{ parsePrice }] = useUtils()
+  const theme = useTheme()
   const windowSize = useWindowSize()
-  const [orderingTheme] = useOrderingTheme()
   const [setActive, setActiveState] = useState('')
   const [setHeight, setHeightState] = useState('0px')
   const [setRotate, setRotateState] = useState('accordion__icon')
@@ -51,7 +52,7 @@ export const ProductItemAccordion = (props) => {
   const productActionsEdit = useRef(null)
   const productActionsDelete = useRef(null)
 
-  const showProductImage = !orderingTheme?.theme?.confirmation?.components?.cart?.components?.products?.components?.image?.hidden
+  const showProductImage = !theme?.confirmation?.components?.cart?.components?.products?.components?.image?.hidden
 
   const productInfo = () => {
     if (isCartProduct) {

package/src/components/RenderProductsLayout/SearchProducts/index.js

@@ -3,7 +3,7 @@ import React from 'react'
 import { Select } from '../../../styles/Select'
 import { SearchBar } from '../../SearchBar'
 import { useTheme } from 'styled-components'
-import { useLanguage, useOrderingTheme } from 'ordering-components-external'
+import { useLanguage } from 'ordering-components-external'
 
 export const SearchProducts = (props) => {
   const {
@@ -17,8 +17,7 @@ export const SearchProducts = (props) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
-  const [orderingTheme] = useOrderingTheme()
-  const showSort = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
+  const showSort = !theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
 
   return (
     <>

package/src/components/UserFormDetails/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { useSession, useLanguage, useCustomer, useOrderingTheme } from 'ordering-components-external'
+import { useSession, useLanguage, useCustomer } from 'ordering-components-external'
 import { useForm } from 'react-hook-form'
 import parsePhoneNumber from 'libphonenumber-js'
 
@@ -11,6 +11,7 @@ import { Button } from '../../styles/Buttons'
 import { InputPhoneNumber } from '../InputPhoneNumber'
 import { Alert } from '../Confirm'
 import { sortInputFields } from '../../utils'
+import { useTheme } from 'styled-components'
 
 export const UserFormDetailsUI = (props) => {
   const {
@@ -33,11 +34,11 @@ export const UserFormDetailsUI = (props) => {
   const formMethods = useForm()
   const [, t] = useLanguage()
   const [{ user: userSession }] = useSession()
+  const theme = useTheme()
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [, { setUserCustomer }] = useCustomer()
-  const [orderingTheme] = useOrderingTheme()
   const emailInput = useRef(null)
 
   const user = userData || userSession
@@ -51,8 +52,8 @@ export const UserFormDetailsUI = (props) => {
   }
 
   const showInputPhoneNumber = validationFields?.fields?.checkout?.cellphone?.enabled ?? false
-  const showCustomerCellphone = !orderingTheme?.theme?.profile?.components?.cellphone?.hidden
-  const showCustomerPassword = !orderingTheme?.theme?.profile?.components?.password?.hidden
+  const showCustomerCellphone = !theme?.profile?.components?.cellphone?.hidden
+  const showCustomerPassword = !theme?.profile?.components?.password?.hidden
 
   const setUserCellPhone = (isEdit = false) => {
     if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
@@ -159,7 +160,7 @@ export const UserFormDetailsUI = (props) => {
   }
 
   const showFieldWithTheme = (name) => {
-    return !orderingTheme?.theme?.profile?.components?.[name]?.hidden
+    return !theme?.profile?.components?.[name]?.hidden
   }
 
   useEffect(() => {

package/src/components/UserProfileForm/ProfileOptions/index.js

@@ -4,15 +4,15 @@ import { Tabs, Tab } from '../../../styles/Tabs'
 import BsPerson from '@meronex/icons/bs/BsPerson'
 import AiOutlineUnorderedList from '@meronex/icons/ai/AiOutlineUnorderedList'
 import FaAddressBook from '@meronex/icons/fa/FaAddressBook';
-import { useEvent, useLanguage, useOrderingTheme } from 'ordering-components-external'
+import { useEvent, useLanguage } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
 
 export const ProfileOptions = ({ value }) => {
   const [tabValue] = useState(value)
   const [, t] = useLanguage()
   const [events] = useEvent()
-  const [orderingTheme] = useOrderingTheme()
-
-  const showAddressListTab = orderingTheme?.theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
+  const theme = useTheme()
+  const showAddressListTab = theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
 
   const handleGoToPage = (data) => {
     events.emit('go_to_page', data)

package/src/components/UserProfileForm/index.js

@@ -5,8 +5,7 @@ import {
   useLanguage,
   useSession,
   DragAndDrop,
-  ExamineClick,
-  useOrderingTheme
+  ExamineClick
 } from 'ordering-components-external'
 
 import { useWindowSize } from '../../hooks/useWindowSize'
@@ -37,6 +36,7 @@ import {
   WrapperForm
 } from './styles'
 import { LogoutButton } from '../LogoutButton'
+import { useTheme } from 'styled-components'
 
 const UserProfileFormUI = (props) => {
   const {
@@ -52,18 +52,18 @@ const UserProfileFormUI = (props) => {
   const [, t] = useLanguage()
   const [{ user }] = useSession()
   const [edit, setEdit] = useState(false)
+  const theme = useTheme()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const inputRef = useRef(null)
-  const [orderingTheme] = useOrderingTheme()
   const windowSize = useWindowSize()
 
-  const showCustomerPicture = !orderingTheme?.theme?.profile?.components?.picture?.hidden
-  const showCustomerName = !orderingTheme?.theme?.profile?.components?.name?.hidden
-  const showCustomerLastName = !orderingTheme?.theme?.profile?.components?.last_name?.hidden
-  const showCustomerEmail = !orderingTheme?.theme?.profile?.components?.email?.hidden
-  const showCustomerCellphone = !orderingTheme?.theme?.profile?.components?.cellphone?.hidden
-  const showAddressList = !orderingTheme?.theme?.profile?.components?.address_list?.hidden
-  const userFormLayoutColumn = orderingTheme?.theme?.profile?.components?.layout?.position === 'column'
+  const showCustomerPicture = !theme?.profile?.components?.picture?.hidden
+  const showCustomerName = !theme?.profile?.components?.name?.hidden
+  const showCustomerLastName = !theme?.profile?.components?.last_name?.hidden
+  const showCustomerEmail = !theme?.profile?.components?.email?.hidden
+  const showCustomerCellphone = !theme?.profile?.components?.cellphone?.hidden
+  const showAddressList = !theme?.profile?.components?.address_list?.hidden
+  const userFormLayoutColumn = theme?.profile?.components?.layout?.position === 'column'
   const showEditButton = showCustomerName || showCustomerLastName || showCustomerEmail || showCustomerCellphone
 
   const handleFiles = (files) => {

package/src/contexts/ThemeContext/index.js

@@ -70,7 +70,7 @@ export const ThemeProvider = ({ children, ...props }) => {
     input, textarea, button {
       font-family: inherit;
     }
-    h1,p,span {
+    h1,h2,p,span {
       ${props.isDarkTextColor && css`
         color: ${theme.colors.darkTextColor}
       `}

package/src/themes/five/src/components/AddressForm/index.js

@@ -16,8 +16,7 @@ import {
   GoogleMapsMap,
   useSession,
   useOrder,
-  useConfig,
-  useOrderingTheme
+  useConfig
 } from 'ordering-components-external'
 import { Alert } from '../Confirm'
 import { GoogleGpsButton } from '../../../../../components/GoogleGpsButton'

package/src/themes/five/src/components/AddressList/index.js

@@ -19,8 +19,7 @@ import {
   useLanguage,
   useOrder,
   useCustomer,
-  useEvent,
-  useOrderingTheme
+  useEvent
 } from 'ordering-components-external'
 
 import {
@@ -76,7 +75,6 @@ const AddressListUI = (props) => {
   const [addressOpen, setAddressOpen] = useState(false)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const theme = useTheme()
-  const [orderingTheme] = useOrderingTheme()
   const [{ user }] = useCustomer()
   const { width } = useWindowSize()
   const isCompletedLayout = width < 769 || isProfile

package/src/themes/five/src/components/BusinessController/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react'
-import { useLanguage, useUtils, useOrder, useConfig, useSession, useOrderingTheme, BusinessController as BusinessSingleCard } from 'ordering-components-external'
+import { useLanguage, useUtils, useOrder, useConfig, useSession, BusinessController as BusinessSingleCard } from 'ordering-components-external'
 import Skeleton from 'react-loading-skeleton'
 import { Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
@@ -73,14 +73,12 @@ const BusinessControllerUI = (props) => {
   const [{ auth }, { login }] = useSession()
   const [{ parsePrice, parseDistance, optimizeImage }] = useUtils()
   const [orderState] = useOrder()
-  const [orderingTheme] = useOrderingTheme()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [modalPageToShow, setModalPageToShow] = useState(null)
 
   const favoriteRef = useRef(null)
-
-  const businessRows = orderingTheme?.theme?.business_listing_view?.components?.layout?.rows
+  const businessRows = theme?.business_listing_view?.components?.layout?.rows
   const hideBusinessLogo = theme?.business_listing_view?.components?.business?.components?.logo?.hidden
   const hideBusinessFee = theme?.business_listing_view?.components?.business?.components?.fee?.hidden
   const hideBusinessTime = theme?.business_listing_view?.components?.business?.components?.time?.hidden

package/src/themes/five/src/components/BusinessInformation/index.js

@@ -4,8 +4,7 @@ import {
   BusinessInformation as BusinessInformationController,
   GoogleMapsMap,
   useLanguage,
-  useConfig,
-  useOrderingTheme
+  useConfig
 } from 'ordering-components-external'
 import { Modal } from '../Modal'
 import {

package/src/themes/five/src/components/BusinessInformation/styles.js

@@ -11,7 +11,7 @@ export const BussinessTitle = styled.div`
   z-index: 1000;
   display: inline-flex;
   width: 50%;
-  background: #ffffff;
+  background: ${(props) => props.theme?.colors?.backgroundPage};
   align-items: center;
   margin-left: 10px;
   margin-bottom: 10px;
@@ -76,7 +76,7 @@ export const Information = styled.div`
 
 export const BusinessContent = styled.div`
   padding: 0 10px;
-  background: #FFF;
+  background: ${props => props.theme.colors.backgroundPage};
   @media(min-width: 768px){
     padding: 0 20px;
     padding-top: 30px;

package/src/themes/five/src/components/BusinessPreorder/index.js

@@ -34,7 +34,9 @@ import {
   Day,
   DayName,
   DayNumber,
-  ClosedBusinessMsg
+  ClosedBusinessMsg,
+  CheckIcon,
+  CheckedIcon
 } from './styles'
 import { BusinessMenuList } from '../BusinessMenuList'
 import { Swiper, SwiperSlide } from 'swiper/react'
@@ -44,6 +46,7 @@ import SwiperCore, {
 import 'swiper/swiper-bundle.min.css'
 import 'swiper/swiper.min.css'
 import { getTimes } from '../../../../../utils'
+import CgRadioCheck from '@meronex/icons/cg/CgRadioCheck'
 
 SwiperCore.use([Navigation])
 
@@ -61,11 +64,15 @@ const BusinessPreorderUI = (props) => {
     handleAsap,
     isProfessional,
     isDisabled,
-    maxDays
+    maxDays,
+    hoursList,
+    cateringPreorder,
+    preorderLeadTime,
+    getActualSchedule
   } = props
 
   const { pathname } = useLocation()
-  const [{ optimizeImage }] = useUtils()
+  const [{ optimizeImage, parseTime }] = useUtils()
   const theme = useTheme()
   const [{ configs }] = useConfig()
   const [orderState] = useOrder()
@@ -124,17 +131,51 @@ const BusinessPreorderUI = (props) => {
   }
 
   useEffect(() => {
-    const selectedMenu = menu ? (menu?.use_business_schedule ? business : menu) : business
-    const _times = getTimeList(dateSelected, selectedMenu)
-    setTimeList(_times)
-  }, [dateSelected, menu, business])
+    if (cateringPreorder) {
+      const schedule = business && getActualSchedule()
+      if (!schedule && cateringPreorder && Object.keys(business)?.length > 0) {
+        setIsEnabled(false)
+        return
+      }
+      const _timeLists = hoursList
+        .filter(hour => (Object.keys(business || {})?.length === 0 || schedule?.lapses?.some(lapse =>
+          moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${lapse.open.hour}:${lapse.open.minute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${lapse.close.hour}:${lapse.close.minute}`))) &&
+          moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`) &&
+          (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder))
+        .map(hour => {
+          return {
+            value: hour.startTime,
+            text: is12Hours ? (
+              hour.startTime.includes('12')
+                ? `${hour.startTime}PM`
+                : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+            ) : (
+              parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+            ),
+            endText: is12Hours ? (
+              hour.endTime.includes('12')
+                ? `${hour.endTime}PM`
+                : parseTime(moment(hour.endTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+            ) : (
+              parseTime(moment(hour.endTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+            )
+          }
+        })
+      setIsEnabled(true)
+      setTimeList(_timeLists)
+    } else {
+      const selectedMenu = menu ? (menu?.use_business_schedule ? business : menu) : business
+      const _times = getTimeList(dateSelected, selectedMenu)
+      setTimeList(_times)
+    }
+  }, [dateSelected, menu, business, cateringPreorder, hoursList])
 
   useEffect(() => {
     if (type === 'business_hours') setMenu(null)
   }, [type])
 
   useEffect(() => {
-    if (pathname.includes('store') || isProfessional) return
+    if (pathname.includes('store') || isProfessional || cateringPreorder) return
     handleAsap && handleAsap()
   }, [])
 
@@ -147,7 +188,7 @@ const BusinessPreorderUI = (props) => {
           <p>{business.name}</p>
         </LogoWrapper>
       )}
-      {!isProfessional && isPreOrderSetting && (
+      {!isProfessional && isPreOrderSetting && !cateringPreorder && (
         <PreorderTypeWrapper>
           <p>{t('PREORDER_TYPE', 'Preorder type')}</p>
           <SelectWrapper>
@@ -232,8 +273,18 @@ const BusinessPreorderUI = (props) => {
                     isDisabled={isDisabled}
                     isProfessional={isProfessional}
                     busyTime={isProfessional && isBusyTime(business, getMomentTime(time.value))}
+                    cateringPreorder={cateringPreorder}
                   >
-                    <span>{time.text}</span>
+                    <span>
+                      {cateringPreorder && (
+                        <CheckIcon>
+                          {timeSelected === time.value ? <CheckedIcon cateringPreorder={cateringPreorder} /> : <CgRadioCheck />}
+                        </CheckIcon>
+                      )}
+                      <p>
+                        {time.text} {cateringPreorder && `- ${time.endText}`}
+                      </p>
+                    </span>
                   </TimeItem>
                 ))}
               </>