ordering-ui-external 14.1.38 → 14.1.40

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

@@ -329,22 +329,23 @@ var AddressFormUI = function AddressFormUI(props) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             if (!(address !== null && address !== void 0 && address.location)) {
-              _context2.next = 5;
+              _context2.next = 6;
               break;
             }
             _context2.next = 3;
             return getBusinessDeliveryZones(address === null || address === void 0 ? void 0 : address.location);
           case 3:
             result = _context2.sent;
+            setLocationChange(address === null || address === void 0 ? void 0 : address.location);
             if ((result === null || result === void 0 ? void 0 : result.length) === 0) {
               showToast(_orderingComponentsExternal.ToastType.Error, t('NO_NEAR_DELIVERY_ZONES', 'No near delivery zones'), 3000);
             }
-          case 5:
+          case 6:
             setSelectedFromAutocomplete(true);
             updateChanges(_objectSpread(_objectSpread({}, address), {}, {
               address: googleInputRef === null || googleInputRef === void 0 || (_googleInputRef$curre = googleInputRef.current) === null || _googleInputRef$curre === void 0 ? void 0 : _googleInputRef$curre.value
             }));
-          case 7:
+          case 8:
           case "end":
             return _context2.stop();
         }

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

@@ -37,7 +37,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var BusinessControllerUI = function BusinessControllerUI(props) {
-  var _theme$business_listi, _theme$business_listi2, _theme$business_listi3, _theme$business_listi4, _theme$business_listi5, _theme$business_listi6, _theme$business_listi7, _theme$business_listi8, _theme$business_listi9, _theme$business_listi10, _business$ribbon, _business$ribbon2, _business$ribbon3, _business$ribbon4, _business$ribbon5, _business$ribbon6, _business$ribbon7, _theme$images, _configState$configs, _orderState$options, _theme$images2, _theme$images3, _business$reviews, _business$reviews2, _businessState$busine2, _orderState$options2, _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4;
+  var _theme$business_listi, _theme$business_listi2, _theme$business_listi3, _theme$business_listi4, _theme$business_listi5, _theme$business_listi6, _theme$business_listi7, _theme$business_listi8, _theme$business_listi9, _theme$business_listi10, _business$ribbon, _business$ribbon2, _business$ribbon3, _business$ribbon4, _business$ribbon5, _business$ribbon6, _business$ribbon7, _theme$images, _configState$configs, _orderState$options, _business$today, _theme$images2, _theme$images3, _business$reviews, _business$reviews2, _businessState$busine2, _orderState$options2, _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4;
   var isSkeleton = props.isSkeleton,
     business = props.business,
     getBusinessOffer = props.getBusinessOffer,
@@ -149,6 +149,14 @@ var BusinessControllerUI = function BusinessControllerUI(props) {
       token: user === null || user === void 0 || (_user$session = user.session) === null || _user$session === void 0 ? void 0 : _user$session.access_token
     });
   };
+  var scheduleFormatted = function scheduleFormatted(_ref2) {
+    var hour = _ref2.hour,
+      minute = _ref2.minute;
+    var checkTime = function checkTime(val) {
+      return val < 10 ? "0".concat(val) : val;
+    };
+    return "".concat(checkTime(hour), ":").concat(checkTime(minute));
+  };
   var hasInformationLength = !!(business !== null && business !== void 0 && business.idle_drivers_count) || !!(business !== null && business !== void 0 && business.busy_drivers_count) || !!(business !== null && business !== void 0 && business.activated_orders);
   if (typeButton) {
     return /*#__PURE__*/_react.default.createElement(_styles.ContainerCard, {
@@ -181,11 +189,15 @@ var BusinessControllerUI = function BusinessControllerUI(props) {
     isClosed: !isBusinessOpen
   }, /*#__PURE__*/_react.default.createElement(_styles.BusinessTags, null, (businessFeatured !== null && businessFeatured !== void 0 ? businessFeatured : business === null || business === void 0 ? void 0 : business.featured) && !hideBusinessFavoriteBadge && /*#__PURE__*/_react.default.createElement("span", {
     className: "crown"
-  }, /*#__PURE__*/_react.default.createElement(_FaCrown.default, null)), !hideBusinessOffer && !isCustomLayout && (configState === null || configState === void 0 || (_configState$configs = configState.configs) === null || _configState$configs === void 0 || (_configState$configs = _configState$configs.preorder_status_enabled) === null || _configState$configs === void 0 ? void 0 : _configState$configs.value) === '1' && /*#__PURE__*/_react.default.createElement("div", null, !!getBusinessOffer(businessOffers !== null && businessOffers !== void 0 ? businessOffers : business === null || business === void 0 ? void 0 : business.offers) && /*#__PURE__*/_react.default.createElement("span", null, t('DISCOUNT', 'Discount'), ' ', getBusinessOffer(businessOffers !== null && businessOffers !== void 0 ? businessOffers : business === null || business === void 0 ? void 0 : business.offers)), !isBusinessOpen && /*#__PURE__*/_react.default.createElement("span", null, t('PREORDER', 'PreOrder')))), /*#__PURE__*/_react.default.createElement(_styles.BusinessHeaderClosedContainer, null, /*#__PURE__*/_react.default.createElement("div", null, !!businessWillCloseSoonMinutes && (orderState === null || orderState === void 0 || (_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : _orderState$options.moment) === null && isBusinessOpen && (business === null || business === void 0 ? void 0 : business.enabled) !== false && /*#__PURE__*/_react.default.createElement("h1", null, businessWillCloseSoonMinutes, " ", t('MINUTES_TO_CLOSE', 'minutes to close')), !isBusinessOpen && /*#__PURE__*/_react.default.createElement("h1", {
+  }, /*#__PURE__*/_react.default.createElement(_FaCrown.default, null)), !hideBusinessOffer && !isCustomLayout && (configState === null || configState === void 0 || (_configState$configs = configState.configs) === null || _configState$configs === void 0 || (_configState$configs = _configState$configs.preorder_status_enabled) === null || _configState$configs === void 0 ? void 0 : _configState$configs.value) === '1' && /*#__PURE__*/_react.default.createElement("div", null, !!getBusinessOffer(businessOffers !== null && businessOffers !== void 0 ? businessOffers : business === null || business === void 0 ? void 0 : business.offers) && /*#__PURE__*/_react.default.createElement("span", null, t('DISCOUNT', 'Discount'), ' ', getBusinessOffer(businessOffers !== null && businessOffers !== void 0 ? businessOffers : business === null || business === void 0 ? void 0 : business.offers)), !isBusinessOpen && /*#__PURE__*/_react.default.createElement("span", null, t('PREORDER', 'PreOrder')))), /*#__PURE__*/_react.default.createElement(_styles.BusinessHeaderClosedContainer, null, /*#__PURE__*/_react.default.createElement(_styles.ClosedContainer, null, !!businessWillCloseSoonMinutes && (orderState === null || orderState === void 0 || (_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : _orderState$options.moment) === null && isBusinessOpen && (business === null || business === void 0 ? void 0 : business.enabled) !== false && /*#__PURE__*/_react.default.createElement("h1", null, businessWillCloseSoonMinutes, " ", t('MINUTES_TO_CLOSE', 'minutes to close')), !isBusinessOpen && /*#__PURE__*/_react.default.createElement("h1", {
     className: "closed"
   }, t('CLOSED', 'Closed'), (business === null || business === void 0 ? void 0 : business.enabled) === false && "(".concat(t('DISABLED', 'Disabled'), ")"))), (business === null || business === void 0 ? void 0 : business.disabled_reason) && (business === null || business === void 0 ? void 0 : business.enabled) === false && /*#__PURE__*/_react.default.createElement("h2", {
     className: "disabled"
-  }, business === null || business === void 0 ? void 0 : business.disabled_reason)))), /*#__PURE__*/_react.default.createElement(_styles.BusinessContent, {
+  }, business === null || business === void 0 ? void 0 : business.disabled_reason), isCustomerMode && /*#__PURE__*/_react.default.createElement(_styles.ScheduleContainer, null, /*#__PURE__*/_react.default.createElement("p", null, t('OPERATION_SCHEDULE', 'Operatiion schedule')), business === null || business === void 0 || (_business$today = business.today) === null || _business$today === void 0 || (_business$today = _business$today.lapses) === null || _business$today === void 0 ? void 0 : _business$today.map(function (lapse, i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i
+    }, /*#__PURE__*/_react.default.createElement("p", null, scheduleFormatted(lapse === null || lapse === void 0 ? void 0 : lapse.open), " ", t('TO', 'to'), " ", scheduleFormatted(lapse === null || lapse === void 0 ? void 0 : lapse.close)));
+  }))))), /*#__PURE__*/_react.default.createElement(_styles.BusinessContent, {
     isCustomerMode: isCustomerMode
   }, /*#__PURE__*/_react.default.createElement(_styles.BusinessLogoWrapper, null, !hideBusinessLogo && /*#__PURE__*/_react.default.createElement(_styles.WrapperBusinessLogo, {
     isSkeleton: isSkeleton,

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

@@ -4,16 +4,16 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapperBusinessLogo = exports.WrapperBusinessCard = exports.RibbonBox = exports.Medadata = exports.InfoLength = exports.InfoDescription = exports.FavoriteWrapper = exports.ContainerCard = exports.Categories = exports.CardOverlay = exports.CallCenterInformationBullet = exports.CallCenterInformation = exports.BusinessTags = exports.BusinessStarInfo = exports.BusinessName = exports.BusinessLogoWrapper = exports.BusinessLogo = exports.BusinessInfoItem = exports.BusinessInfo = exports.BusinessHero = exports.BusinessHeaderClosedContainer = exports.BusinessHeader = exports.BusinessContent = void 0;
+exports.WrapperBusinessLogo = exports.WrapperBusinessCard = exports.ScheduleContainer = exports.RibbonBox = exports.Medadata = exports.InfoLength = exports.InfoDescription = exports.FavoriteWrapper = exports.ContainerCard = exports.ClosedContainer = exports.Categories = exports.CardOverlay = exports.CallCenterInformationBullet = exports.CallCenterInformation = exports.BusinessTags = exports.BusinessStarInfo = exports.BusinessName = exports.BusinessLogoWrapper = exports.BusinessLogo = exports.BusinessInfoItem = exports.BusinessInfo = exports.BusinessHero = exports.BusinessHeaderClosedContainer = exports.BusinessHeader = exports.BusinessContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var ContainerCard = exports.ContainerCard = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid #E9ECEF;\n  box-sizing: border-box;\n  border-radius: 7.6px;\n  max-height: 300px;\n  height: ", ";\n  border-radius: 10px;\n  margin: 30px 20px;\n\n  ", "\n\n  ", "\n\n  ", "\n  \n  ", "\n\n  ", "\n  \n  ", "\n  \n"])), function (_ref) {
+var ContainerCard = exports.ContainerCard = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid #E9ECEF;\n  box-sizing: border-box;\n  border-radius: 7.6px;\n  max-height: 300px;\n  height: ", ";\n  border-radius: 10px;\n  margin: 30px 20px;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n"])), function (_ref) {
   var isSkeleton = _ref.isSkeleton;
   return isSkeleton ? 'auto' : '320px';
 }, function (_ref2) {
@@ -63,7 +63,7 @@ var BusinessHeader = exports.BusinessHeader = function BusinessHeader(props) {
     style: style
   }), props.children);
 };
-var BusinessHeaderClosedContainer = exports.BusinessHeaderClosedContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    div {\n      text-align: center;\n      width: 100%;\n      line-break: anywhere;\n    }\n\n"])));
+var BusinessHeaderClosedContainer = exports.BusinessHeaderClosedContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n\n    h1, h2 {\n      margin: 0;\n    }\n"])));
 var BusinessTags = exports.BusinessTags = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  justify-content: space-between;\n  align-items: center;\n  top: 0;\n  margin: 15px;\n  width: calc(100% - 35px);\n\n  span.crown {\n    background-color: rgba(0, 0, 0, 0.5);\n    font-size: 20px;\n    display: flex;\n    align-items: center;\n    color: #FFC917;\n  }\n\n  div {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n  span {\n    font-size: 11px;\n    padding: 3px 8px;\n    color: #748194;\n    background: #DEE2E6;\n    border-radius: 50px;\n    margin-right: 10px;\n    ", "\n    &:last-child {\n      ", "\n    }\n  }\n"])), function (props) {
   var _props$theme;
   return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      margin-left: 10px;\n      margin-right: 0;\n    "])));
@@ -110,7 +110,7 @@ var BusinessName = exports.BusinessName = _styledComponents.default.h6(_template
   return props.theme.colors.darkTextColor;
 });
 var Categories = exports.Categories = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  font-weight: 300;\n  color: #6C6C6C;\n\n  @media (min-width: 481px) {\n    font-size: 16px;\n  }\n"])));
-var Medadata = exports.Medadata = _styledComponents.default.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  margin-top: 5px;\n  display: flex;\n  font-weight: 300;\n  font-size: 12px;\n  color: #909BA9;\n  flex-wrap: wrap;\n  \n\n  ", "\n  ", "\n  p {\n    color: #909BA9;\n    svg {\n      font-size: 7px;\n      min-width: 6px;\n      margin: 0 3px;\n    }\n\n    span {\n      margin-right: 10px;\n      ", "\n    }\n  }\n\n  @media (min-width: 481px) {\n    font-size: 14px;\n  }\n"])), function (_ref18) {
+var Medadata = exports.Medadata = _styledComponents.default.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  margin-top: 5px;\n  display: flex;\n  font-weight: 300;\n  font-size: 12px;\n  color: #909BA9;\n  flex-wrap: wrap;\n\n  ", "\n  ", "\n  p {\n    color: #909BA9;\n    svg {\n      font-size: 7px;\n      min-width: 6px;\n      margin: 0 3px;\n    }\n\n    span {\n      margin-right: 10px;\n      ", "\n    }\n  }\n\n  @media (min-width: 481px) {\n    font-size: 14px;\n  }\n"])), function (_ref18) {
   var isCustomerMode = _ref18.isCustomerMode;
   return isCustomerMode && (0, _styledComponents.css)(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n    > div {\n      flex-direction: column;\n    }\n  "])));
 }, function (_ref19) {
@@ -159,4 +159,6 @@ var FavoriteWrapper = exports.FavoriteWrapper = _styledComponents.default.div(_t
   return props.theme.rtl && (0, _styledComponents.css)(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n    margin-right: 15px;\n    margin-left: 0px;\n  "])));
 }, function (props) {
   return props.theme.colors.danger500;
-});
+});
+var ScheduleContainer = exports.ScheduleContainer = _styledComponents.default.div(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n  width: 50%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background: #4472C4;\n  border: 2px solid #000;\n  div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n  p {\n    margin: 0;\n    color: #fff;\n    font-size: 12px;\n  }\n"])));
+var ClosedContainer = exports.ClosedContainer = _styledComponents.default.div(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n  text-align: center;\n  width: 100%;\n  line-break: anywhere;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "14.1.38",
+  "version": "14.1.40",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {

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

@@ -252,6 +252,7 @@ const AddressFormUI = (props) => {
   const handleChangeAddress = async (address) => {
     if (address?.location) {
       const result = await getBusinessDeliveryZones(address?.location)
+      setLocationChange(address?.location)
       if (result?.length === 0) {
         showToast(ToastType.Error, t('NO_NEAR_DELIVERY_ZONES', 'No near delivery zones'), 3000)
       }

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

@@ -29,11 +29,11 @@ import {
   CallCenterInformationBullet,
   BusinessLogoWrapper,
   BusinessStarInfo,
-  InfoLength,
-  InfoDescription,
   RibbonBox,
   FavoriteWrapper,
-  BusinessHeaderClosedContainer
+  BusinessHeaderClosedContainer,
+  ScheduleContainer,
+  ClosedContainer
   // CardOverlay
 } from './styles'
 import GoPrimitiveDot from '@meronex/icons/go/GoPrimitiveDot'
@@ -132,6 +132,11 @@ const BusinessControllerUI = (props) => {
     })
   }
 
+  const scheduleFormatted = ({ hour, minute }) => {
+    const checkTime = (val) => val < 10 ? `0${val}` : val
+    return `${checkTime(hour)}:${checkTime(minute)}`
+  }
+
   const hasInformationLength = !!business?.idle_drivers_count || !!business?.busy_drivers_count || !!business?.activated_orders
 
   if (typeButton) {
@@ -182,15 +187,25 @@ const BusinessControllerUI = (props) => {
                   )}
                 </BusinessTags>
                 <BusinessHeaderClosedContainer>
-                  <div>
+                  <ClosedContainer>
                     {!!businessWillCloseSoonMinutes && orderState?.options?.moment === null && isBusinessOpen && business?.enabled !== false && (
                       <h1>{businessWillCloseSoonMinutes} {t('MINUTES_TO_CLOSE', 'minutes to close')}</h1>
                     )}
                     {!isBusinessOpen && <h1 className='closed'>{t('CLOSED', 'Closed')}{business?.enabled === false && `(${t('DISABLED', 'Disabled')})`}</h1>}
-                  </div>
+                  </ClosedContainer>
                   {business?.disabled_reason && business?.enabled === false && (
                     <h2 className='disabled'>{business?.disabled_reason}</h2>
                   )}
+                  {isCustomerMode && (
+                    <ScheduleContainer>
+                      <p>{t('OPERATION_SCHEDULE', 'Operatiion schedule')}</p>
+                      {business?.today?.lapses?.map((lapse, i) => (
+                        <div key={i}>
+                          <p>{scheduleFormatted(lapse?.open)} {t('TO', 'to')} {scheduleFormatted(lapse?.close)}</p>
+                        </div>
+                      ))}
+                    </ScheduleContainer>
+                  )}
                 </BusinessHeaderClosedContainer>
               </BusinessHeader>
             )}

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

@@ -28,7 +28,7 @@ export const ContainerCard = styled.div`
       padding: 10px 30px;
     }
   `}
-  
+
   ${({ firstCard }) => firstCard && css`
     margin-left: 0;
   `}
@@ -36,7 +36,7 @@ export const ContainerCard = styled.div`
   ${({ disabled }) => disabled && css`
     cursor: not-allowed;
   `}
-  
+
   ${({ businessRows }) => css`
     width: calc(100% - 40px);
 
@@ -56,7 +56,7 @@ export const ContainerCard = styled.div`
       width: ${() => businessRows === 4 ? 'calc(25% - 40px)' : businessRows === 3 ? 'calc(33% - 40px)' : 'calc(50% - 40px)'};
     }
   `}
-  
+
 `
 
 export const WrapperBusinessCard = styled.div`
@@ -139,12 +139,10 @@ export const BusinessHeaderClosedContainer = styled.div`
     justify-content: center;
     align-items: center;
     width: 100%;
-    div {
-      text-align: center;
-      width: 100%;
-      line-break: anywhere;
-    }
 
+    h1, h2 {
+      margin: 0;
+    }
 `
 
 export const BusinessTags = styled.div`
@@ -340,7 +338,6 @@ export const Medadata = styled.div`
   font-size: 12px;
   color: #909BA9;
   flex-wrap: wrap;
-  
 
   ${({ isCustomerMode }) => isCustomerMode && css`
     > div {
@@ -510,3 +507,29 @@ export const FavoriteWrapper = styled.div`
     color: ${props => props.theme.colors.danger500};
   }
 `
+
+export const ScheduleContainer = styled.div`
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #4472C4;
+  border: 2px solid #000;
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  p {
+    margin: 0;
+    color: #fff;
+    font-size: 12px;
+  }
+`
+
+export const ClosedContainer = styled.div`
+  text-align: center;
+  width: 100%;
+  line-break: anywhere;
+`