ordering-ui-external 3.0.1 → 4.0.0

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

@@ -21,7 +21,7 @@ var IconControl = _styledComponents.default.div(_templateObject2 || (_templateOb
   return props.theme.colors.lightGray;
 });
 exports.IconControl = IconControl;
-var Text = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  display: flex;\n  font-weight: 300;\n  color: #555;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 0 5px;\n\n  div {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 14px;\n    color: ", ";\n  }\n\n  span {\n    margin-left: 10px;\n    font-weight: 500;\n    color: ", ";\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    ", "\n  }\n\n  ", "\n"])), function (props) {
+var Text = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  display: flex;\n  font-weight: 300;\n  color: #555;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 0 8px;\n\n  div {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 14px;\n    color: ", ";\n  }\n\n  span {\n    margin-left: 10px;\n    font-weight: 500;\n    color: ", ";\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    ", "\n  }\n\n  ", "\n"])), function (props) {
   return props.theme.colors.darkGray;
 }, function (props) {
   return props.theme.colors.primary;
@@ -33,7 +33,7 @@ var Text = _styledComponents.default.div(_templateObject4 || (_templateObject4 =
   return noMargin && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    span {\n      margin: 0;\n    }\n  "])));
 });
 exports.Text = Text;
-var SubOptionThumbnail = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: inline-block;\n  border-radius: 8px;\n  background-image: url(", ");\n  background-repeat: no-repeat, repeat;\n  width: 40px;\n  height: 40px;\n  background-size: cover;\n  object-fit: cover;\n  background-position: center;\n  justify-content: center;\n  align-items: center;\n"])), function (_ref2) {
+var SubOptionThumbnail = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: inline-block;\n  border-radius: 8px;\n  background-image: url(", ");\n  background-repeat: no-repeat, repeat;\n  width: 40px;\n  height: 40px;\n  min-width: 40px;\n  min-height: 40px;\n  background-size: cover;\n  object-fit: cover;\n  background-position: center;\n  justify-content: center;\n  align-items: center;\n"])), function (_ref2) {
   var src = _ref2.src;
   return src;
 });

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

@@ -10,7 +10,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 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 IconShare = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  margin: 0px;\n  top: 10px;\n  font-size: 22px;\n  right: 16px;\n  left: 10px;\n  z-index: 9999995;\n  background: rgba(255,255,255,0.5);\n  height: 30px;\n  border-radius: 50%;\n  width: 30px;\n  svg {\n    position: relative;\n    cursor: pointer;\n    color: #333;\n    left: 3px;\n    ", "\n  }\n  ", "\n\n\n  @media(min-width: 769px){\n    position: relative;\n    left: 5px;\n    top: 0;\n\n    svg{\n      position: static;\n    }\n\n    ", "\n  }\n\n  @media (min-width: 1201px) {\n    position: sticky;\n    width: 0;\n\n    &:nth-child(1) > svg {\n      background-color: white;\n      padding: 5px;\n      border-radius: 9px;\n      margin: 5px 0px;\n    }\n\n    ", "\n  }\n"])), function (props) {
+var IconShare = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  margin: 0px;\n  top: 10px;\n  font-size: 22px;\n  right: 16px;\n  left: 10px;\n  z-index: 9999999;\n  background: rgba(255,255,255,0.5);\n  height: 30px;\n  border-radius: 50%;\n  width: 30px;\n  svg {\n    position: relative;\n    cursor: pointer;\n    color: #333;\n    left: 3px;\n    ", "\n  }\n  ", "\n\n\n  @media(min-width: 769px){\n    position: relative;\n    left: 5px;\n    top: 0;\n\n    svg{\n      position: static;\n    }\n\n    ", "\n  }\n\n  @media (min-width: 1201px) {\n    position: sticky;\n    width: 0;\n\n    &:nth-child(1) > svg {\n      background-color: white;\n      padding: 5px;\n      border-radius: 9px;\n      margin: 5px 0px;\n    }\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)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      left: 0;\n      right: 5px;\n    "])));
 }, function (props) {

package/package.json

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

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

@@ -138,7 +138,7 @@ export const BusinessBasicInformation = (props) => {
     const businessNameElement = document.getElementById('business_name')
     if (businessNameElement) {
       const limit = window.pageYOffset >= (businessNameElement?.offsetTop - 55) && window.pageYOffset > 0
-      if (limit && windowSize.width < 993) {
+      if (limit) {
         const classAdded = businessNameElement.classList.contains('fixed-name')
         !classAdded && businessNameElement.classList.add('fixed-name')
       } else {

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

@@ -260,7 +260,7 @@ export const WrapperSearch = styled.div`
     &.fixed-search {
       left: 0;
       width: 100vw;
-      z-index: 1002;
+      z-index: 10000;
     }
   }
 `
@@ -373,13 +373,13 @@ export const TitleWrapper = styled.div`
     text-overflow: ellipsis;
     background: ${({ theme }) => theme?.colors?.white};
     &.fixed-name {
-      z-index: 1002;
+      z-index: 10001;
       position: fixed;
       top: 0;
       padding: 10px 0;
       font-size: 18px;
       ${({ isCustomLayout }) => !isCustomLayout ? css`
-        width: calc(100vw - 190px);
+        width: calc(100vw - 200px);
         ${props => props.theme?.rtl ? css`
         right: 50px;
         ` : css`

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

@@ -77,7 +77,7 @@ const BusinessPreorderUI = (props) => {
   const [timeList, setTimeList] = useState([])
   const [isEnabled, setIsEnabled] = useState(false)
 
-  const is12Hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+  const is12Hours = configs?.general_hour_format?.value?.includes('hh:mm')
   const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
   const preOrderType = [
     { value: 'business_menu', content: <TypeContent>{t('BUSINESS_MENU', 'Business menu')}</TypeContent> },

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

@@ -135,12 +135,12 @@ const BusinessProductsCategoriesUI = (props) => {
 
     let style0 = '.sticky-prod-cat {'
     style0 += 'position: fixed !important;'
-    style0 += `top: ${windowSize.width >= 993 ? '0px' : '56px'} !important;`
+    style0 += `top: ${useKioskApp ? '0px' : '56px'} !important;`
     style0 += 'left: 0px !important;'
     style0 += 'z-index: 9999 !important;'
-    style0 += 'padding: 5px 5px 0px 5px !important;'
-    style0 += `width: calc(100% - ${useKioskApp ? '50px' : windowSize.width >= 993 ? '155px' : '0px'})!important;`
-    !disabledCustomWidth && (style0 += `width: calc(100% - ${useKioskApp ? '50px' : '155px'}) !important;`)
+    style0 += 'padding: 5px 5px 0px 20px !important;'
+    style0 += 'width: 100% !important;'
+    !disabledCustomWidth && (style0 += `width: calc(100% - ${useKioskApp ? '50px' : '0px'}) !important;`)
     style0 += '}'
 
     let style1 = '.sticky-search {'

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

@@ -11,7 +11,7 @@ export const CategoriesContainer = styled.div`
   border-bottom: 1px solid #D9D9D9;
   text-align: center;
   width: ${props => props.w || '100%'};
-
+  box-sizing: border-box;
   div.category {
     text-overflow: ellipsis;
     white-space: nowrap;

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

@@ -193,7 +193,7 @@ const BusinessProductsListingUI = (props) => {
     const backArrowElement = document.getElementById('back-arrow')
     if (backArrowElement) {
       const limit = window.pageYOffset >= backArrowElement?.offsetTop && window.pageYOffset > 0
-      if (limit && windowSize.width < 993) {
+      if (limit) {
         const classAdded = backArrowElement.classList.contains('fixed-arrow')
         !classAdded && backArrowElement.classList.add('fixed-arrow')
       } else {

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

@@ -152,7 +152,7 @@ export const HeaderContent = styled.div`
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 1001;
+    z-index: 10001;
     width: 100vw;
     background-color: ${props => props.theme.colors.backgroundPage};
     height: 56px;
@@ -163,6 +163,9 @@ export const HeaderContent = styled.div`
     ` : css`
       padding-left: 10px;
     `}
+    @media (min-width: 993px){
+      width: 100px;
+    }
   }
 `
 export const OrderContextUIWrapper = styled.div`

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

@@ -235,13 +235,13 @@ const BusinessesListingUI = (props) => {
           )}
         </BusinessBanner>
       )}
-        <OrderProgress
-          isChew={isChew}
-          franchiseId={props.franchiseId}
-          userCustomerId={userCustomer?.id}
-          asDashboard={isCustomerMode}
-          isCustomerMode={isCustomerMode}
-        />
+      <OrderProgress
+        isChew={isChew}
+        franchiseId={props.franchiseId}
+        userCustomerId={userCustomer?.id}
+        asDashboard={isCustomerMode}
+        isCustomerMode={isCustomerMode}
+      />
       {(configs?.business_listing_hide_image?.value !== '1' && isChew) && (
         <BusinessHeroImg
           bgimage={theme.images?.general?.businessHero}
@@ -269,7 +269,7 @@ const BusinessesListingUI = (props) => {
                 isCustomLayout={isCustomLayout}
                 placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
                 onSearch={handleChangeSearch}
-                handleCustomEnter={() => onRedirectPage({ page: 'business_search' })}
+                handleCustomEnter={() => configs?.advanced_business_search_enabled?.value === '1' ? onRedirectPage({ page: 'business_search' }) : null}
               />
             )}
             {!hideCities && citiesState?.cities?.length > 0 && (

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

@@ -332,7 +332,9 @@ export const Header = (props) => {
               placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
               starbucksStyle
               onSearch={(value) => setSearchValue(value)}
-              handleCustomEnter={() => events.emit('go_to_page', { page: 'business_search' })}
+              handleCustomEnter={() => configState?.configs?.advanced_business_search_enabled?.value === '0' || businessSlug
+                ? null
+                : events.emit('go_to_page', { page: 'business_search' })}
             />
           </HeaderSearchMode>
         )}

package/src/themes/five/src/components/Messages/MapMessages.js

@@ -0,0 +1,173 @@
+import React from 'react'
+import { BubbleBusines, BubbleConsole, BubbleCustomer, ChatImage, MessageBusiness, MessageConsole, MessageContentWrapper, MessageCreatedDate, MessageCustomer, MyName, TimeofSent, TimeofSentByAdmin } from './styles'
+import { useLanguage, useSession, useUtils } from 'ordering-components-external'
+
+export const MapMessages = (props) => {
+  const {
+    messages,
+    messagesToShow,
+    order,
+    filterSpecialStatus,
+    handleModalImage,
+    getLevel,
+    business,
+    driver,
+    getLogisticTagStatus,
+    getStatus
+  } = props
+  const [, t] = useLanguage()
+  const [{ parseDate, parseTime }] = useUtils()
+  const [{ user }] = useSession()
+  return (
+    <>
+      {messages?.messages.map((message) => (
+        <React.Fragment key={message.id}>
+          {message.type === 1 && (
+            <MessageContentWrapper key={message.id}>
+              {message.change?.attribute !== 'driver_id' ? (
+                <>
+                  <MessageCreatedDate>
+                    <span>{parseDate(message.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
+                  </MessageCreatedDate>
+                  <MessageConsole>
+                    <BubbleConsole>
+                      {t('ORDER', 'Order')} {' '}
+                      <strong>{t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))}</strong> {' '}
+                      {t('CHANGED_FROM', 'Changed from')} {' '}
+                      {filterSpecialStatus.includes(message.change.attribute) ? (
+                        <>
+                          {message.change.old === null ? <strong>0</strong> : (
+                            <>
+                              <strong>{message.change.old}</strong> {' '}
+                            </>
+                          )}
+                          <> {t('TO', 'to')} {' '} <strong>{message.change.new}</strong> {t('MINUTES', 'Minutes')}</>
+                        </>
+                      ) : (
+                        <>
+                          {message.change.old !== null && (
+                            <>
+                              <strong>{message.change?.attribute === 'logistic_status' ? getLogisticTagStatus(parseInt(message.change.old, 10)) : t(getStatus(parseInt(message.change.old, 10)))}</strong> {' '}
+                            </>
+                          )}
+                          <> {t('TO', 'to')} {' '} <strong>{message.change?.attribute === 'logistic_status' ? getLogisticTagStatus(parseInt(message.change.new, 10)) : t(getStatus(parseInt(message.change.new, 10)))}</strong> </>
+                        </>
+                      )}
+                      <TimeofSent>{parseTime(message.created_at)}</TimeofSent>
+                    </BubbleConsole>
+                  </MessageConsole>
+                </>
+              ) : (
+                <>
+                  <MessageCreatedDate>
+                    <span>{parseDate(message.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
+                  </MessageCreatedDate>
+                  <MessageConsole>
+                    <BubbleConsole>
+                      {message.change.new ? (
+                        <>
+                          <strong>{message.driver?.name} {' '} {message.driver?.lastname && message.driver.lastname} </strong>
+                          {t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')}
+                          {message.comment && (<><br /> {message.comment.length}</>)}
+                        </>
+                      ) : <>{t('DRIVER_UNASSIGNED', 'Driver unassigned')}</>}
+                      <TimeofSent>{parseTime(message.created_at)}</TimeofSent>
+                    </BubbleConsole>
+                  </MessageConsole>
+                </>
+              )}
+            </MessageContentWrapper>
+
+          )}
+          {(messagesToShow?.messages?.length || (message?.can_see?.includes('2') && business) || (message?.can_see?.includes('4') && driver)) && (
+            <>
+              {message.type === 2 && user?.id === message.author_id && (
+                <MessageContentWrapper>
+                  <MessageCreatedDate>
+                    <span>{parseDate(message.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
+                  </MessageCreatedDate>
+                  <MessageCustomer>
+                    <BubbleCustomer>
+                      <strong>
+                        <MyName>
+                          {message.author.name} ({order.customer_id === message.author.id ? getLevel(3) : getLevel(message.author.level)})
+                        </MyName>
+                      </strong>
+                      {message.comment}
+                      <TimeofSent>{parseTime(message.created_at)}</TimeofSent>
+                    </BubbleCustomer>
+                  </MessageCustomer>
+                </MessageContentWrapper>
+              )}
+              {message.type === 3 && user.id === message.author_id && (
+                <MessageContentWrapper>
+                  <MessageCreatedDate>
+                    <span>{parseDate(message.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
+                  </MessageCreatedDate>
+                  <MessageCustomer>
+                    <BubbleCustomer name='image'>
+                      <strong>
+                        <MyName>
+                          {message.author.name} ({order.customer_id === message.author.id ? getLevel(3) : getLevel(message.author.level)})
+                        </MyName>
+                      </strong>
+                      <ChatImage><img src={message.source} onClick={() => handleModalImage(message.source)} alt='chat-image' width='168px' height='300px' /></ChatImage>
+                      {message.comment && (
+                        <>
+                          {message.comment}
+                        </>
+                      )}
+                      <TimeofSent>{parseTime(message.created_at)}</TimeofSent>
+                    </BubbleCustomer>
+                  </MessageCustomer>
+                </MessageContentWrapper>
+
+              )}
+              {message.type === 2 && user?.id !== message.author_id && (
+                <MessageContentWrapper>
+                  <MessageCreatedDate>
+                    <span>{parseDate(message.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
+                  </MessageCreatedDate>
+                  <MessageBusiness>
+                    <BubbleBusines>
+                      <strong>
+                        <MyName>
+                          {message.author.name} ({order.customer_id === message.author.id ? getLevel(3) : getLevel(message.author.level)})
+                        </MyName>
+                      </strong>
+                      {message.comment}
+                      <TimeofSentByAdmin>{parseTime(message.created_at)}</TimeofSentByAdmin>
+                    </BubbleBusines>
+                  </MessageBusiness>
+                </MessageContentWrapper>
+              )}
+              {message.type === 3 && user.id !== message.author_id && (
+                <MessageContentWrapper>
+                  <MessageCreatedDate>
+                    <span>{parseDate(message.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
+                  </MessageCreatedDate>
+                  <MessageBusiness>
+                    <BubbleBusines name='image'>
+                      <strong>
+                        <MyName>
+                          {message.author.name} ({order.customer_id === message.author.id ? getLevel(3) : getLevel(message.author.level)})
+                        </MyName>
+                      </strong>
+                      <ChatImage><img src={message.source} onClick={() => handleModalImage(message.source)} alt='chat-image' width='168px' height='300px' /></ChatImage>
+                      {message.comment && (
+                        <>
+                          {message.comment}
+                        </>
+                      )}
+                      <TimeofSent>{parseTime(message.created_at)}</TimeofSent>
+                    </BubbleBusines>
+                  </MessageBusiness>
+                </MessageContentWrapper>
+              )}
+            </>
+          )}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

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

@@ -4,7 +4,6 @@ import {
   Messages as MessagesController,
   useUtils,
   useLanguage,
-  useSession,
   useEvent
 } from 'ordering-components-external'
 import { useForm } from 'react-hook-form'
@@ -15,14 +14,10 @@ import {
   HeaderProfile,
   Image,
   Chat,
-  BubbleCustomer,
   MessageCustomer,
-  MyName,
   MessageBusiness,
-  BubbleBusines,
   SkeletonBubbleCustomer,
   SkeletonBubbleBusiness,
-  ChatImage,
   TimeofSent,
   SendForm,
   Send,
@@ -43,7 +38,6 @@ import {
   InputWrapper,
   MessageContentWrapper,
   MessageCreatedDate,
-  TimeofSentByAdmin,
   NotSendMessage,
   QuickMessageWrapper,
   ProfileMessageHeader,
@@ -63,6 +57,7 @@ import MdcCloseOctagonOutline from '@meronex/icons/mdc/MdcCloseOctagonOutline'
 import { bytesConverter, getTraduction } from '../../../../../utils'
 import { Alert } from '../Confirm'
 import { Modal } from '../Modal'
+import { MapMessages } from './MapMessages'
 
 const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
 
@@ -90,7 +85,6 @@ const MessagesUI = (props) => {
   const [, t] = useLanguage()
   const { handleSubmit, register, errors, setValue } = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-  const [{ user }] = useSession()
   const [events] = useEvent()
   const [{ parseDate, parseTime }] = useUtils()
   const buttonRef = useRef(null)
@@ -307,173 +301,6 @@ const MessagesUI = (props) => {
     events.emit('go_to_page', { page: 'business', params: { business_slug: slug } })
   }
 
-  const MapMessages = ({ messages }) => {
-    return (
-      <>
-        {props.beforeElements?.map((BeforeElement, i) => (
-          <React.Fragment key={i}>
-            {BeforeElement}
-          </React.Fragment>))}
-        {props.beforeComponents?.map((BeforeComponent, i) => (
-          <BeforeComponent key={i} {...props} />))}
-        {messages?.messages.map((message) => (
-          <React.Fragment key={message.id}>
-            {message.type === 1 && (
-              <MessageContentWrapper key={message.id}>
-                {message.change?.attribute !== 'driver_id' ? (
-                  <>
-                    <MessageCreatedDate>
-                      <span>{parseDate(message.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
-                    </MessageCreatedDate>
-                    <MessageConsole>
-                      <BubbleConsole>
-                        {t('ORDER', 'Order')} {' '}
-                        <strong>{t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))}</strong> {' '}
-                        {t('CHANGED_FROM', 'Changed from')} {' '}
-                        {filterSpecialStatus.includes(message.change.attribute) ? (
-                          <>
-                            {message.change.old === null ? <strong>0</strong> : (
-                              <>
-                                <strong>{message.change.old}</strong> {' '}
-                              </>
-                            )}
-                            <> {t('TO', 'to')} {' '} <strong>{message.change.new}</strong> {t('MINUTES', 'Minutes')}</>
-                          </>
-                        ) : (
-                          <>
-                            {message.change.old !== null && (
-                              <>
-                                <strong>{message.change?.attribute === 'logistic_status' ? getLogisticTagStatus(parseInt(message.change.old, 10)) : t(getStatus(parseInt(message.change.old, 10)))}</strong> {' '}
-                              </>
-                            )}
-                            <> {t('TO', 'to')} {' '} <strong>{message.change?.attribute === 'logistic_status' ? getLogisticTagStatus(parseInt(message.change.new, 10)) : t(getStatus(parseInt(message.change.new, 10)))}</strong> </>
-                          </>
-                        )}
-                        <TimeofSent>{parseTime(message.created_at)}</TimeofSent>
-                      </BubbleConsole>
-                    </MessageConsole>
-                  </>
-                ) : (
-                  <>
-                    <MessageCreatedDate>
-                      <span>{parseDate(message.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
-                    </MessageCreatedDate>
-                    <MessageConsole>
-                      <BubbleConsole>
-                        {message.change.new ? (
-                          <>
-                            <strong>{message.driver?.name} {' '} {message.driver?.lastname && message.driver.lastname} </strong>
-                            {t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')}
-                            {message.comment && (<><br /> {message.comment.length}</>)}
-                          </>
-                        ) : <>{t('DRIVER_UNASSIGNED', 'Driver unassigned')}</>}
-                        <TimeofSent>{parseTime(message.created_at)}</TimeofSent>
-                      </BubbleConsole>
-                    </MessageConsole>
-                  </>
-                )}
-              </MessageContentWrapper>
-
-            )}
-            {(messagesToShow?.messages?.length || (message?.can_see?.includes('2') && business) || (message?.can_see?.includes('4') && driver)) && (
-              <>
-                {message.type === 2 && user?.id === message.author_id && (
-                  <MessageContentWrapper>
-                    <MessageCreatedDate>
-                      <span>{parseDate(message.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
-                    </MessageCreatedDate>
-                    <MessageCustomer>
-                      <BubbleCustomer>
-                        <strong>
-                          <MyName>
-                            {message.author.name} ({order.customer_id === message.author.id ? getLevel(3) : getLevel(message.author.level)})
-                          </MyName>
-                        </strong>
-                        {message.comment}
-                        <TimeofSent>{parseTime(message.created_at)}</TimeofSent>
-                      </BubbleCustomer>
-                    </MessageCustomer>
-                  </MessageContentWrapper>
-                )}
-                {message.type === 3 && user.id === message.author_id && (
-                  <MessageContentWrapper>
-                    <MessageCreatedDate>
-                      <span>{parseDate(message.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
-                    </MessageCreatedDate>
-                    <MessageCustomer>
-                      <BubbleCustomer name='image'>
-                        <strong>
-                          <MyName>
-                            {message.author.name} ({order.customer_id === message.author.id ? getLevel(3) : getLevel(message.author.level)})
-                          </MyName>
-                        </strong>
-                        <ChatImage><img src={message.source} onClick={() => handleModalImage(message.source)} alt='chat-image' width='168px' height='300px' /></ChatImage>
-                        {message.comment && (
-                          <>
-                            {message.comment}
-                          </>
-                        )}
-                        <TimeofSent>{parseTime(message.created_at)}</TimeofSent>
-                      </BubbleCustomer>
-                    </MessageCustomer>
-                  </MessageContentWrapper>
-
-                )}
-                {message.type === 2 && user?.id !== message.author_id && (
-                  <MessageContentWrapper>
-                    <MessageCreatedDate>
-                      <span>{parseDate(message.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
-                    </MessageCreatedDate>
-                    <MessageBusiness>
-                      <BubbleBusines>
-                        <strong>
-                          <MyName>
-                            {message.author.name} ({order.customer_id === message.author.id ? getLevel(3) : getLevel(message.author.level)})
-                          </MyName>
-                        </strong>
-                        {message.comment}
-                        <TimeofSentByAdmin>{parseTime(message.created_at)}</TimeofSentByAdmin>
-                      </BubbleBusines>
-                    </MessageBusiness>
-                  </MessageContentWrapper>
-                )}
-                {message.type === 3 && user.id !== message.author_id && (
-                  <MessageContentWrapper>
-                    <MessageCreatedDate>
-                      <span>{parseDate(message.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
-                    </MessageCreatedDate>
-                    <MessageBusiness>
-                      <BubbleBusines name='image'>
-                        <strong>
-                          <MyName>
-                            {message.author.name} ({order.customer_id === message.author.id ? getLevel(3) : getLevel(message.author.level)})
-                          </MyName>
-                        </strong>
-                        <ChatImage><img src={message.source} onClick={() => handleModalImage(message.source)} alt='chat-image' width='168px' height='300px' /></ChatImage>
-                        {message.comment && (
-                          <>
-                            {message.comment}
-                          </>
-                        )}
-                        <TimeofSent>{parseTime(message.created_at)}</TimeofSent>
-                      </BubbleBusines>
-                    </MessageBusiness>
-                  </MessageContentWrapper>
-                )}
-              </>
-            )}
-          </React.Fragment>
-        ))}
-        {props.afterComponents?.map((AfterComponent, i) => (
-          <AfterComponent key={i} {...props} />))}
-        {props.afterElements?.map((AfterElement, i) => (
-          <React.Fragment key={i}>
-            {AfterElement}
-          </React.Fragment>))}
-      </>
-    )
-  }
-
   return (
     <MessagesContainer profileMessages={profileMessages}>
       <MessagesLayoutWrapper>
@@ -657,7 +484,18 @@ const MessagesUI = (props) => {
                       <TimeofSent>{parseTime(order.created_at)}</TimeofSent>
                     </BubbleConsole>
                   </MessageConsole>
-                  <MapMessages messages={messagesToShow?.messages?.length ? messagesToShow : messages} />
+                  <MapMessages
+                    messages={messagesToShow?.messages?.length ? messagesToShow : messages}
+                    messagesToShow={messagesToShow}
+                    order={order}
+                    filterSpecialStatus={filterSpecialStatus}
+                    handleModalImage={handleModalImage}
+                    getLevel={getLevel}
+                    business={business}
+                    driver={driver}
+                    getLogisticTagStatus={getLogisticTagStatus}
+                    getStatus={getStatus}
+                  />
                 </MessageContentWrapper>
               )
             }

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

@@ -55,7 +55,7 @@ const MomentControlUI = (props) => {
   } = props
 
   const [{ configs }] = useConfig()
-  const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+  const is12hours = configs?.general_hour_format?.value?.includes('hh:mm')
   const [{ parseTime }] = useUtils()
   const { pathname } = useLocation()
   const [, t] = useLanguage()

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

@@ -422,7 +422,7 @@ const OrderDetailsUI = (props) => {
                 {!hideDeliveryDate && (
                   <p className='date'>
                     {activeStatus.includes(order?.status) ? (
-                      <OrderEta order={order} />
+                      <OrderEta order={order} outputFormat={`YYYY-MM-DD ${configs?.general_hour_format?.value}`} />
                     ) : (
                       parseDate(order?.reporting_data?.at[`status:${order.status}`], { outputFormat: `YYYY-MM-DD ${configs?.general_hour_format?.value}` })
                     )}

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

@@ -183,6 +183,7 @@ export const OrderInfo = styled.div`
   }
   .date {
     margin-bottom: 6px;
+    text-transform: uppercase;
   }
   .types {
     margin-bottom: 6px;