ordering-ui-external 14.1.44 → 14.1.46

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

@@ -140,6 +140,8 @@ export const Header = (props) => {
     events.emit('go_to_page', { page: 'business', params: { store: business.slug } })
   }
 
+  const cutCharactersName = ({ str, maxSize = 8 }) => str.length <= maxSize ? str : str.slice(0, maxSize) + '...'
+
   useEffect(() => {
     if (isCustomerMode) {
       setCustomerModalOpen(false)
@@ -177,7 +179,10 @@ export const Header = (props) => {
                   onClick={(e) => handleClickUserCustomer(e)}
                 >
                   <span>
-                    <p>{userCustomer?.name} {userCustomer?.lastname}</p>
+                    <p>
+                      {windowSize.width > 940 ? userCustomer?.name : cutCharactersName({ str: userCustomer?.name })}
+                      {' '}{windowSize.width > 940 ? userCustomer?.lastname : null}
+                    </p>
                   </span>
                   <span
                     ref={clearCustomer}

package/src/themes/callcenterOriginal/src/components/UserDetails/styles.js

@@ -2,6 +2,12 @@ import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
   height: ${({ isEdit }) => isEdit ? 'auto' : '145px'};
+
+  @media (max-width: 930px) {
+    h1 {
+      font-size: 18px !important;
+    }
+  }
 `
 
 export const Header = styled.div`
@@ -13,7 +19,7 @@ export const Header = styled.div`
   h1 {
     font-weight: 500;
     font-size: 20px;
-    color: ${props => props.theme.colors.darkTextColor}; 
+    color: ${props => props.theme.colors.darkTextColor};
     margin: 0px 10px 0px 0px;
     ${props => props.theme?.rtl && css`
       margin: 0px 0px 0px 10px;
@@ -114,7 +120,7 @@ export const PhoneContainer = styled.div`
   display: flex;
   align-items: center;
   height: 30px;
-  
+
   p {
     margin: 0;
   }

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

@@ -59,6 +59,9 @@ export const BusinessInfoComponent = (props) => {
             {!loading ? (
               <TitleWrapper isCustomLayout={isCustomLayout} disableLeftSpace={singleBusinessRedirect}>
                 <h2 className='bold' id='business_name'>{business?.name}</h2>
+                {isCustomerMode && business?.address && (
+                  <h3>{business?.address}</h3>
+                )}
                 <span id='business_name_feedback' />
                 {business?.ribbon?.enabled && (
                   <RibbonBox

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

@@ -411,11 +411,23 @@ export const TitleWrapper = styled.div`
         `}
       `}
     }
+
     @media (min-width: 768px) {
       font-size: 32px;
-      
     }
   }
+
+  h3 {
+      font-size: 16px;
+      line-height: 36px;
+      margin: 0px;
+      font-weight: 500;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      background: ${({ theme }) => theme?.colors?.backgroundPage};
+    }
 `
 
 export const RibbonBox = styled.div`

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

@@ -33,7 +33,8 @@ import {
   FavoriteWrapper,
   BusinessHeaderClosedContainer,
   ScheduleContainer,
-  ClosedContainer
+  ClosedContainer,
+  BusinessAddress
   // CardOverlay
 } from './styles'
 import GoPrimitiveDot from '@meronex/icons/go/GoPrimitiveDot'
@@ -258,6 +259,19 @@ const BusinessControllerUI = (props) => {
                     <Skeleton width={100} />
                   )}
                 </div>
+                {isCustomerMode && (
+                  <>
+                    {business?.address ? (
+                      <div>
+                        <BusinessAddress>{business?.address}</BusinessAddress>
+                      </div>
+                    ) : (
+                      <div>
+                        <Skeleton width={100} />
+                      </div>
+                    )}
+                  </>
+                )}
                 <Medadata isCustomerMode={isCustomerMode} isSkeleton={isSkeleton}>
                   {!hideBusinessFee && orderType === 1 && (
                     <>

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

@@ -310,7 +310,7 @@ export const BusinessInfoItem = styled.div`
   }
 `
 
-export const BusinessName = styled.h6`
+export const BusinessName = styled.h5`
   font-size: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -533,3 +533,14 @@ export const ClosedContainer = styled.div`
   width: 100%;
   line-break: anywhere;
 `
+
+export const BusinessAddress = styled.h6`
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  font-weight: 400;
+  color: ${props => props.theme.colors.darkTextColor};
+`

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

@@ -108,7 +108,6 @@ const CheckoutUI = (props) => {
   } = props
 
   const theme = useTheme()
-  const [ordering] = useApi()
   const [{ options, loading }] = useOrder()
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
@@ -134,7 +133,7 @@ const CheckoutUI = (props) => {
   const [paymethodClicked, setPaymethodClicked] = useState(null)
   const [productLoading, setProductLoading] = useState(false)
 
-  const shouldActivateOrderDetailModal = ordering?.project?.includes('alsea')
+  const shouldActivateOrderDetailModal = isCustomerMode
   const cardsMethods = ['stripe', 'credomatic']
   const stripePaymethods = ['stripe', 'stripe_connect', 'stripe_redirect']
   const businessConfigs = businessDetails?.business?.configs ?? []