ordering-ui-external 1.8.9 → 1.9.0

package/_modules/themes/five/src/components/SearchBar/styles.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SearchIcon = exports.DeleteContent = exports.BusinessSearch = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 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 BusinessSearch = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n  position: relative;\n\n  input {\n    border: none;\n    border-bottom: 1px solid #E9ECEF;\n    border-radius: 0px;\n    width: 100%;\n    background-repeat: no-repeat;\n    background-size: 30px 18px;\n    box-sizing: border-box;\n    padding-left: 30px;\n    padding-right: 50px;\n    background-color: ", ";\n\n    ", "\n\n    ", "\n\n    @media (min-width: 681px) {\n      width: 100%;\n      ", "\n    }\n\n  }\n"])), function (props) {
+var BusinessSearch = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n  position: relative;\n\n  input {\n    border: none;\n    border-bottom: 1px solid #E9ECEF;\n    border-radius: 0px;\n    width: 100%;\n    background-repeat: no-repeat;\n    background-size: 30px 18px;\n    box-sizing: border-box;\n    padding-left: 30px;\n    padding-right: 50px;\n    background-color: ", ";\n\n    ", "\n\n    ", "\n\n    ", "\n\n    @media (min-width: 681px) {\n      width: 100%;\n      ", "\n    }\n\n  }\n"])), function (props) {
   var _props$theme, _props$theme$colors;
   return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : (_props$theme$colors = _props$theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.backgroundPage;
 }, function (props) {
@@ -20,19 +20,23 @@ var BusinessSearch = _styledComponents.default.div(_templateObject || (_template
   var isCustomLayout = _ref.isCustomLayout;
   return !isCustomLayout && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      justify-content: center;\n      -webkit-transition: width 0.4s ease-in-out;\n      transition: width 0.4s ease-in-out; \n    "])));
 }, function (_ref2) {
-  var isCustomLayout = _ref2.isCustomLayout;
-  return !isCustomLayout && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        width: 50%;\n      "])));
+  var starbucksStyle = _ref2.starbucksStyle;
+  return starbucksStyle && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        background-color: #F8F9FA;\n        border: 1px solid #DEE2E6;\n        font-size: 14px;\n        color: #000;\n        border-radius: 7.6px;\n    "])));
+}, function (_ref3) {
+  var isCustomLayout = _ref3.isCustomLayout,
+    starbucksStyle = _ref3.starbucksStyle;
+  return !isCustomLayout && !starbucksStyle && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        width: 50%;\n      "])));
 });
 exports.BusinessSearch = BusinessSearch;
-var DeleteContent = _styledComponents.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  font-weight: 300;\n  padding: 10px 0;\n  color: #333;\n  font-size: 14px;\n  transform: translate(-30%, 0%);\n  border-radius: 25%;\n  max-height: 100%;\n  ", "\n  span{\n    cursor: pointer;\n  }\n  img{\n    width: 20px;\n    transform: translate(-25%, 0%);\n    ", "\n  }\n"])), function (props) {
+var DeleteContent = _styledComponents.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: absolute;\n  font-weight: 300;\n  padding: 10px 0;\n  color: #333;\n  font-size: 14px;\n  transform: translate(-30%, 0%);\n  border-radius: 25%;\n  max-height: 100%;\n  ", "\n  span{\n    cursor: pointer;\n  }\n  img{\n    width: 20px;\n    transform: translate(-25%, 0%);\n    ", "\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)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    transform: translate(30%, 0%);\n  "])));
+  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    transform: translate(30%, 0%);\n  "])));
 }, function (props) {
   var _props$theme4;
-  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      transform: translate(25%, 0%);\n    "])));
+  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      transform: translate(25%, 0%);\n    "])));
 });
 exports.DeleteContent = DeleteContent;
-var SearchIcon = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  background-image: url(", ");\n  background-position: right 10px center;\n  background-repeat: no-repeat;\n  background-size: 15px;\n  background-color: ", ";\n\n"])), function (props) {
+var SearchIcon = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-image: url(", ");\n  background-position: right 10px center;\n  background-repeat: no-repeat;\n  background-size: 15px;\n  background-color: ", ";\n\n"])), function (props) {
   var _props$theme5, _props$theme5$images, _props$theme5$images$;
   return (_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : (_props$theme5$images = _props$theme5.images) === null || _props$theme5$images === void 0 ? void 0 : (_props$theme5$images$ = _props$theme5$images.general) === null || _props$theme5$images$ === void 0 ? void 0 : _props$theme5$images$.searchIcon;
 }, function (props) {

package/_modules/themes/five/src/components/ServiceForm/index.js

@@ -34,6 +34,10 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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); }
@@ -174,10 +178,15 @@ var ServiceFormUI = function ServiceFormUI(props) {
     setDateSelected(_moment);
   };
   var isBusyTime = function isBusyTime(professional) {
-    var _professional$busy_ti;
+    var _professional$busy_ti, _product$duration;
     if ((professional === null || professional === void 0 ? void 0 : (_professional$busy_ti = professional.busy_times) === null || _professional$busy_ti === void 0 ? void 0 : _professional$busy_ti.length) === 0 || !dateSelected) return false;
-    var valid = professional === null || professional === void 0 ? void 0 : professional.busy_times.some(function (item) {
-      return (0, _moment2.default)(item === null || item === void 0 ? void 0 : item.start).valueOf() <= (0, _moment2.default)(dateSelected).valueOf() && (0, _moment2.default)(dateSelected).valueOf() <= (0, _moment2.default)(item === null || item === void 0 ? void 0 : item.end).valueOf();
+    var duration = (_product$duration = product === null || product === void 0 ? void 0 : product.duration) !== null && _product$duration !== void 0 ? _product$duration : 0;
+    var busyTimes = isCartProduct ? professional === null || professional === void 0 ? void 0 : professional.busy_times.filter(function (item) {
+      var _productCart$calendar, _productCart$calendar2;
+      return !(item.start === (productCart === null || productCart === void 0 ? void 0 : (_productCart$calendar = productCart.calendar_event) === null || _productCart$calendar === void 0 ? void 0 : _productCart$calendar.start) && item.end === (productCart === null || productCart === void 0 ? void 0 : (_productCart$calendar2 = productCart.calendar_event) === null || _productCart$calendar2 === void 0 ? void 0 : _productCart$calendar2.end));
+    }) : _toConsumableArray(professional === null || professional === void 0 ? void 0 : professional.busy_times);
+    var valid = busyTimes.some(function (item) {
+      return _moment2.default.utc(item === null || item === void 0 ? void 0 : item.start).local().valueOf() <= (0, _moment2.default)(dateSelected).valueOf() && (0, _moment2.default)(dateSelected).valueOf() <= _moment2.default.utc(item === null || item === void 0 ? void 0 : item.end).local().valueOf() || _moment2.default.utc(item === null || item === void 0 ? void 0 : item.start).local().valueOf() <= (0, _moment2.default)(dateSelected).add(duration, 'minutes').valueOf() && (0, _moment2.default)(dateSelected).add(duration, 'minutes').valueOf() <= _moment2.default.utc(item === null || item === void 0 ? void 0 : item.end).local().valueOf();
     });
     return valid;
   };
@@ -264,10 +273,10 @@ var ServiceFormUI = function ServiceFormUI(props) {
     setDatesList(_datesList);
   }, []);
   (0, _react.useEffect)(function () {
-    var _productCart$calendar, _productCart$calendar2, _productCart$calendar3;
-    if (!(productCart !== null && productCart !== void 0 && (_productCart$calendar = productCart.calendar_event) !== null && _productCart$calendar !== void 0 && _productCart$calendar.start)) return;
-    setSelectedDate(_moment2.default.utc(productCart === null || productCart === void 0 ? void 0 : (_productCart$calendar2 = productCart.calendar_event) === null || _productCart$calendar2 === void 0 ? void 0 : _productCart$calendar2.start).local());
-    setTimeSelected(_moment2.default.utc(productCart === null || productCart === void 0 ? void 0 : (_productCart$calendar3 = productCart.calendar_event) === null || _productCart$calendar3 === void 0 ? void 0 : _productCart$calendar3.start).local().format('HH:mm'));
+    var _productCart$calendar3, _productCart$calendar4, _productCart$calendar5;
+    if (!(productCart !== null && productCart !== void 0 && (_productCart$calendar3 = productCart.calendar_event) !== null && _productCart$calendar3 !== void 0 && _productCart$calendar3.start)) return;
+    setSelectedDate(_moment2.default.utc(productCart === null || productCart === void 0 ? void 0 : (_productCart$calendar4 = productCart.calendar_event) === null || _productCart$calendar4 === void 0 ? void 0 : _productCart$calendar4.start).local());
+    setTimeSelected(_moment2.default.utc(productCart === null || productCart === void 0 ? void 0 : (_productCart$calendar5 = productCart.calendar_event) === null || _productCart$calendar5 === void 0 ? void 0 : _productCart$calendar5.start).local().format('HH:mm'));
   }, [productCart]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Container, null, loading && !error && /*#__PURE__*/_react.default.createElement(_styles.SkeletonBlock, {
     width: 90
@@ -314,7 +323,7 @@ var ServiceFormUI = function ServiceFormUI(props) {
   }, currentProfessional ? /*#__PURE__*/_react.default.createElement(_styles.InfoWrapper, null, currentProfessional !== null && currentProfessional !== void 0 && currentProfessional.photo ? /*#__PURE__*/_react.default.createElement(_styles.ProfessionalPhoto, {
     bgimage: currentProfessional === null || currentProfessional === void 0 ? void 0 : currentProfessional.photo
   }) : /*#__PURE__*/_react.default.createElement(_FaUserAlt.default, null), /*#__PURE__*/_react.default.createElement(_styles.NameWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, currentProfessional === null || currentProfessional === void 0 ? void 0 : currentProfessional.name, " ", currentProfessional === null || currentProfessional === void 0 ? void 0 : currentProfessional.lastname), /*#__PURE__*/_react.default.createElement(_styles.StatusInfo, {
-    available: !isBusyTime()
+    available: !isBusyTime(currentProfessional)
   }, isBusyTime(currentProfessional) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "status"
   }, t('BUSY_ON_SELECTED_TIME', 'Busy on selected time'))) : /*#__PURE__*/_react.default.createElement("span", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "1.8.9",
+  "version": "1.9.0",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -85,7 +85,7 @@
     "libphonenumber-js": "^1.9.4",
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
-    "ordering-components-external": "1.7.4",
+    "ordering-components-external": "1.9.0",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",
     "react-calendar": "^3.3.1",

package/src/components/PaymentOptions/index.js

@@ -8,7 +8,7 @@ import FaCcStripe from '@meronex/icons/fa/FaCcStripe'
 import FaStripeS from '@meronex/icons/fa/FaStripeS'
 import GrStripe from '@meronex/icons/gr/GrStripe'
 import EnPaypal from '@meronex/icons/en/EnPaypal'
-import { 
+import {
   PaymentOptions as PaymentOptionsController,
   useLanguage,
   useOrder,
@@ -91,7 +91,7 @@ const PaymentOptionsUI = (props) => {
   const [{ token }] = useSession()
   const [{ loading: loadingOptions }] = useOrder()
 
-  const list = paymethods ? paymethods?.map(pay => pay.paymethod) : paymethodsList?.paymethods
+  const list = paymethodsList ? paymethodsList?.paymethods : paymethods?.map(pay => pay.paymethod)
 
   const paymethodSelected = props.paySelected || props.paymethodSelected
 
@@ -140,26 +140,26 @@ const PaymentOptionsUI = (props) => {
       <PaymentMethodsContainer>
         <PaymentMethodsList className='payments-list'>
           {!(paymethodsList.loading || isLoading || loadingOptions) &&
-          list?.length > 0 && (
-            list?.sort((a, b) => a.id - b.id).map(paymethod => (
-              <React.Fragment key={paymethod.id}>
-                {
-                  (!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
-                    <PayCard
-                      isDisabled={isDisabled}
-                      className={`card ${paymethodSelected?.id === paymethod.id ? 'active' : ''}`}
-                      onClick={() => handlePaymentMethodClick(paymethod)}
-                    >
-                      {getPayIcon(paymethod.id)}
-                      <p>
-                        {t(paymethod.gateway.toUpperCase(), paymethod.name)}
-                      </p>
-                    </PayCard>
-                  )
-                }
-              </React.Fragment>
-            ))
-          )}
+            list?.length > 0 && (
+              list?.sort((a, b) => a.id - b.id).map(paymethod => (
+                <React.Fragment key={paymethod.id}>
+                  {
+                    (!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
+                      <PayCard
+                        isDisabled={isDisabled}
+                        className={`card ${paymethodSelected?.id === paymethod.id ? 'active' : ''}`}
+                        onClick={() => handlePaymentMethodClick(paymethod)}
+                      >
+                        {getPayIcon(paymethod.id)}
+                        <p>
+                          {t(paymethod.gateway.toUpperCase(), paymethod.name)}
+                        </p>
+                      </PayCard>
+                    )
+                  }
+                </React.Fragment>
+              ))
+            )}
           {(paymethodsList.loading || isLoading || loadingOptions) && (
             [...Array(5).keys()].map(i => (
               <PayCard key={i} isSkeleton>

package/src/themes/five/index.js

@@ -12,6 +12,7 @@ import { BusinessItemAccordion } from './src/components/BusinessItemAccordion'
 import { BusinessPreorder } from './src/components/BusinessPreorder'
 import { BusinessMenuList } from './src/components/BusinessMenuList'
 import { BusinessProductsCategories } from './src/components/BusinessProductsCategories'
+import { ScheduleAccordion } from './src/components/ScheduleAccordion'
 import { BusinessProductsCategories as CategoriesLayoutGroceries } from './src/components/BusinessProductsCategories/layouts/groceries'
 import { BusinessProductsList } from './src/components/BusinessProductsList'
 import { BusinessProductsList as ProductListLayoutGroceries } from './src/components/BusinessProductsList/layouts/groceries'
@@ -201,6 +202,7 @@ export {
   ReviewProfessional,
   RenderProductsLayout,
   ResetPassword,
+  ScheduleAccordion,
   SearchBar,
   SessionsList,
   SidebarMenu,

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

@@ -13,7 +13,6 @@ import {
   BusinessContent,
   SectionTitle,
   Map,
-  ScheduleBlock,
   ScheduleSection,
   ScheduleContainer,
   DeliveryInfo,
@@ -26,6 +25,7 @@ import {
   Divider
 } from './styles'
 import MdClose from '@meronex/icons/md/MdClose'
+import { ScheduleAccordion } from '../ScheduleAccordion'
 
 export const BusinessInformationUI = (props) => {
   const {
@@ -39,16 +39,6 @@ export const BusinessInformationUI = (props) => {
 
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
-
-  const daysOfWeek = [
-    t('SUNDAY_ABBREVIATION', 'Sun'),
-    t('MONDAY_ABBREVIATION', 'Mon'),
-    t('TUESDAY_ABBREVIATION', 'Tues'),
-    t('WEDNESDAY_ABBREVIATION', 'Wed'),
-    t('THURSDAY_ABBREVIATION', 'Thur'),
-    t('FRIDAY_ABBREVIATION', 'Fri'),
-    t('SATURDAY_ABBREVIATION', 'Sat')
-  ]
   const [modalImage, setModalImage] = useState(false)
   const [image, setImage] = useState('')
   const [orderingTheme] = useOrderingTheme()
@@ -124,18 +114,12 @@ export const BusinessInformationUI = (props) => {
                   <ScheduleSection>
                     <ScheduleContainer>
                       {businessSchedule.map((schedule, i) => (
-                        <ScheduleBlock key={i}>
-                          <h4>{daysOfWeek[i]}</h4>
-                          {schedule.enabled ? (
-                            <div>
-                              <p>{scheduleFormatted(schedule.lapses[0].open)}</p>
-                              <div>-</div>
-                              <p>{scheduleFormatted(schedule.lapses[0].close)}</p>
-                            </div>
-                          ) : (
-                            <p className='close'>{t('CLOSED', 'Closed')}</p>
-                          )}
-                        </ScheduleBlock>
+                        <ScheduleAccordion
+                          key={i}
+                          weekIndex={i}
+                          scheduleFormatted={scheduleFormatted}
+                          schedule={schedule}
+                        />
                       ))}
                     </ScheduleContainer>
                   </ScheduleSection>

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

@@ -78,7 +78,8 @@ const BusinessProductsListingUI = (props) => {
     onChangeMetaTag,
     onBusinessClick,
     handleChangePriceFilterValues,
-    priceFilterValues
+    priceFilterValues,
+    handleUpdateProfessionals
   } = props
 
   const { business, loading, error } = businessState
@@ -458,6 +459,7 @@ const BusinessProductsListingUI = (props) => {
                 professionalList={business?.professionals}
                 professionalSelected={professionalSelected}
                 handleChangeProfessional={handleChangeProfessionalSelected}
+                handleUpdateProfessionals={handleUpdateProfessionals}
                 productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === (productModal.product || curProduct)?.id ? Cproduct?.quantity : 0) }, 0) || 0}
               />
             ) : (

package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js

@@ -98,7 +98,7 @@ const BusinessesListingUI = (props) => {
   const [favoriteIds, setFavoriteIds] = useState([])
   const hideCities = (theme?.business_listing_view?.components?.cities?.hidden || orderState?.options?.type !== 2) ?? true
   const hideSearch = theme?.business_listing_view?.components?.search?.hidden
-  const hideFilter = theme?.business_listing_view?.components?.filter?.hidden
+  const hideFilter = theme?.business_listing_view?.components?.filter?.hidden || hideSearch
   const hideSearchSection = hideCities && hideSearch && hideFilter
   const isAllCategoriesHidden = theme?.business_listing_view?.components?.categories?.hidden
   const businessesIds = isCustomLayout &&
@@ -337,7 +337,7 @@ const BusinessesListingUI = (props) => {
         {!isCustomerMode && !hideSearchSection && (
           <>
             <WrapperSearch isCustomLayout={isCustomLayout} isCustomerMode={isCustomerMode}>
-              {!hideSearch && (
+              {!hideSearch && windowSize.width <= 1200 && (
                 <SearchBar
                   lazyLoad
                   search={searchValue}

package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/styles.js

@@ -232,7 +232,6 @@ export const BusinessLogosWrapper = styled.div`
   width: 100%;
 `
 
-
 const BusinessLogoStyled = styled.div`
   min-width: 100px;
   min-height: 100px;
@@ -267,3 +266,8 @@ export const BusinessLogosContainer = styled.div`
   display: flex;
   padding-bottom: 10px;
 `
+
+export const HeaderSearchMode = styled.div`
+  position: absolute;
+  width: 200px;
+`

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

@@ -26,7 +26,8 @@ import {
   FarAwayMessage,
   Divider,
   AddressFormWrapper,
-  LanguageSelectorWrapper
+  LanguageSelectorWrapper,
+  HeaderSearchMode
 } from './styles'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { useOnlineStatus } from '../../../../../hooks/useOnlineStatus'
@@ -48,6 +49,7 @@ import { SignUpForm } from '../SignUpForm'
 import { ForgotPasswordForm } from '../ForgotPasswordForm'
 import { getDistance } from '../../../../../utils'
 import { BusinessPreorder } from '../BusinessPreorder'
+import { SearchBar } from '../SearchBar'
 
 export const Header = (props) => {
   const {
@@ -55,7 +57,9 @@ export const Header = (props) => {
     location,
     isShowOrderOptions,
     isHideSignup,
-    isCustomerMode
+    isCustomerMode,
+    searchValue,
+    setSearchValue
   } = props
 
   const { pathname } = useLocation()
@@ -79,7 +83,6 @@ export const Header = (props) => {
   const [preorderBusiness, setPreorderBusiness] = useState(null)
   const [isAddressFormOpen, setIsAddressFormOpen] = useState(false)
   const [isOpenUserData, setIsOpenUserData] = useState(false)
-
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [isFarAway, setIsFarAway] = useState(false)
 
@@ -310,6 +313,18 @@ export const Header = (props) => {
               )}
             </Menu>
           )}
+          {windowSize.width > 1200 && window.location.pathname === '/search' && (
+            <HeaderSearchMode>
+              <SearchBar
+                lazyLoad
+                search={searchValue}
+                placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
+                starbucksStyle
+                onSearch={(value) => setSearchValue(value)}
+                handleCustomEnter={() => events.emit('go_to_page', { page: 'business_search' })}
+              />
+            </HeaderSearchMode>
+          )}
           {onlineStatus && (
             <RightHeader id='right-side'>
               <Menu isCustomerMode={isCustomerMode}>

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

@@ -22,7 +22,7 @@ export const InnerHeader = styled.div`
     justify-content: flex-start;
   }
   #right-side {
-    width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? '30%' : '20%'};
+    width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? '30%' : '25%'};
     justify-content: flex-end;
   }
   #center-side {
@@ -155,17 +155,17 @@ export const Menu = styled.div`
 
     @media (min-width: 1024px) {
       padding: 0 20px;
-      margin: 0 70px;
+      margin-left: 45px;
     }
 
     @media (min-width: 1200px) {
       padding: 0 30px;
-      margin: 0 100px;
+      margin-left: 50px;
     }
 
     @media (min-width: 1500px) {
       padding: 0 30px;
-      margin: 0 130px;
+      margin: 0 75px;
     }
   }
 
@@ -472,3 +472,19 @@ export const LanguageSelectorWrapper = styled(InputGroup)`
     margin: 0px 10px 0 5px;
   }
 `
+
+export const HeaderSearchMode = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 300px;
+  input {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  @media (min-width: 1400px){
+    width: 300px;
+  }
+  @media (min-width: 1200px){
+    width: 250px;
+  }
+`

package/src/themes/five/src/components/OrderDetails/OrderBillSection.js

@@ -75,7 +75,7 @@ export const OrderBillSection = (props) => {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 1)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
@@ -127,7 +127,7 @@ export const OrderBillSection = (props) => {
             order?.taxes?.length > 0 && order?.taxes?.filter(tax => tax?.type === 2 && tax?.rate !== 0).map(tax => (
               <tr key={tax?.id}>
                 <td>
-                  {tax?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(tax?.name?.toUpperCase()?.replace(/ /g, '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   <span>{`(${verifyDecimals(tax?.rate, parseNumber)}%)`}</span>
                   {setOpenTaxModal && (
                     <Exclamation onClick={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })}>
@@ -143,7 +143,7 @@ export const OrderBillSection = (props) => {
             order?.fees?.length > 0 && order?.fees?.filter(fee => !(fee?.fixed === 0 && fee?.percentage === 0))?.map(fee => (
               <tr key={fee.id}>
                 <td>
-                  {fee?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(fee?.name?.toUpperCase()?.replace(/ /g, '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`})
                   {setOpenTaxModal && (
                     <Exclamation onClick={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })}>
@@ -159,7 +159,7 @@ export const OrderBillSection = (props) => {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 3)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
@@ -185,7 +185,7 @@ export const OrderBillSection = (props) => {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 2)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
@@ -254,7 +254,7 @@ export const OrderBillSection = (props) => {
                   <span>
                     {event?.wallet_event
                       ? walletName[event?.wallet_event?.wallet?.type]?.name
-                      : t(event?.paymethod?.name.toUpperCase(), event?.paymethod?.name)}
+                      : t(event?.paymethod?.name.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)}
                   </span>
                   {event?.data?.charge_id && (
                     <span>

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

@@ -400,6 +400,9 @@ const OrderDetailsUI = (props) => {
     businessLogoUrlValidation()
   }, [order])
 
+  const disableLeftButton = [1, 15, 20, 21]
+  const disableRightButton = [1, 15, 21]
+
   return (
     <Container>
       {!loading && order && Object.keys(order).length > 0 && !(openMessages.driver || openMessages.business) && (
@@ -571,7 +574,7 @@ const OrderDetailsUI = (props) => {
                           style={{ fontSize: 14 }}
                           color={order?.status === 20 ? 'secundary' : 'primary'}
                           onClick={() => handleChangeOrderStatus(20)}
-                          disabled={order?.status === 20 || order?.status === 21}
+                          disabled={disableLeftButton.includes(order?.status)}
                         >
                           {getOrderStatus(20)?.value}
                         </Button>
@@ -580,7 +583,7 @@ const OrderDetailsUI = (props) => {
                         <Button
                           style={{ fontSize: 14 }}
                           color={order?.status === 20 ? 'primary' : 'secundary'}
-                          disabled={order?.status === 21}
+                          disabled={disableRightButton.includes(order?.status)}
                           onClick={() => handleChangeOrderStatus(21)}
                         >
                           {getOrderStatus(21)?.value}

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

@@ -78,7 +78,7 @@ const OrdersOptionUI = (props) => {
 
   const _orders = customArray || values || []
   const uniqueOrders = []
-  const orders = _orders.map(order => order?.cart_group_id
+  const ordersReduced = _orders.map(order => order?.cart_group_id
     ? _orders
       .filter(_order => _order?.cart_group_id === order?.cart_group_id)
       ?.reduce((orderCompleted, currentOrder) => ({
@@ -92,14 +92,15 @@ const OrdersOptionUI = (props) => {
         products: [orderCompleted.products, currentOrder.products].flat()
       }))
     : order)
-    .filter(order => {
-      const isDuplicate = uniqueOrders.includes(order?.cart_group_id)
-      if (!isDuplicate) {
-        uniqueOrders.push(order?.cart_group_id)
-        return true
-      }
-      return false
-    })
+  const orders = ordersReduced?.filter(order => {
+    if (!order?.cart_group_id) return true
+    const isDuplicate = uniqueOrders.includes(order?.cart_group_id)
+    if (!isDuplicate) {
+      uniqueOrders.push(order?.cart_group_id)
+      return true
+    }
+    return false
+  })
 
   const isShowTitles = businessesIds
     ? orders && orders.length > 0 && !orders.map(order => businessesIds && businessesIds.includes(order.business_id)).every(i => !i)

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

@@ -22,7 +22,7 @@ const ProductOptionUI = (props) => {
   if (option.min === 1 && option.max === 1) {
     maxMin = t('REQUIRED', 'Required')
   } else if (option.min === 0 && option.max > 0) {
-    maxMin = `${!option?.limit_suboptions_by_max ? t('MAX_PER_SUBOPTION', 'MAX PER SUBOPTION') : t('MAX', 'Max')}. ${option.max}`
+    maxMin = `${t('MAX', 'Max')}. ${option.max}`
   } else if (option.min > 0 && option.max === 0) {
     maxMin = `${t('MIN', 'Min')}. ${option.min})`
   }

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

@@ -39,7 +39,7 @@ const ProductOptionSubOptionUI = (props) => {
     setIsScrollAvailable
   } = props
 
-  const disableIncrement = option?.limit_suboptions_by_max ? (balance === option?.max || state.quantity === suboption.max) : state.quantity === option?.max
+  const disableIncrement = option?.limit_suboptions_by_max ? (balance === option?.max || state.quantity === suboption.max) : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
   const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()

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

@@ -24,6 +24,7 @@ import { TextArea } from '../../styles/Inputs'
 import { Button } from '../../styles/Buttons'
 import { Alert } from '../Confirm'
 import { reviewCommentList } from '../../../../../utils'
+import { useTheme } from 'styled-components'
 
 const SingleProductReview = (props) => {
   const {
@@ -33,6 +34,7 @@ const SingleProductReview = (props) => {
   } = props
 
   const [, t] = useLanguage()
+  const theme = useTheme()
   const [isLike, setIsLike] = useState(true)
   const [isExtraComment, setIsExtraComment] = useState(false)
   const [comments, setComments] = useState([])