ordering-ui-admin-external 1.39.9 → 1.40.0

package/src/components/Delivery/DriversGroupAddForm/BusinessesForm/index.js

@@ -11,8 +11,11 @@ import {
   BusinessesContainer,
   BusinessWrapper,
   WrapperImage,
-  Image
+  Image,
+  SkeletonContainer,
+  SkeletonWrapper
 } from './styles'
+import Skeleton from 'react-loading-skeleton'
 
 export const BusinessesForm = (props) => {
   const {
@@ -20,7 +23,8 @@ export const BusinessesForm = (props) => {
     handleSelectBusiness,
     actionState,
     handleSelectAllBusiness,
-    selectedBusinessIds
+    selectedBusinessIds,
+    businessesLoading
   } = props
 
   const [, t] = useLanguage()
@@ -35,7 +39,7 @@ export const BusinessesForm = (props) => {
       _filteredBusinesses = [...businesses]
     }
     setFilteredBusinesses(_filteredBusinesses)
-  }, [searchValue])
+  }, [searchValue, businesses])
 
   return (
     <Container>
@@ -66,21 +70,45 @@ export const BusinessesForm = (props) => {
         </Button>
       </ButtonGroup>
       <BusinessesContainer>
-        {filteredBusinesses.map(business => (
-          <BusinessWrapper
-            key={business.id}
-            isDisabed={actionState.loading}
-          >
-            <Checkbox
-              checked={selectedBusinessIds.includes(business.id)}
-              onChange={e => handleSelectBusiness(business.id, e.target.checked)}
-            />
-            <WrapperImage>
-              <Image bgimage={business?.logo} alt='logo' />
-            </WrapperImage>
-            <p>{business?.name}</p>
-          </BusinessWrapper>
-        ))}
+        {businessesLoading ? (
+          <>
+            {
+              [...Array(9).keys()].map(i => (
+                <SkeletonWrapper key={i}>
+                  <tr>
+                    <td>
+                      <SkeletonContainer>
+                        <Skeleton width={18} height={18} />
+                        <Skeleton width={35} height={35} style={{ margin: '0px 5px', borderRadius: '100%' }} />
+                      </SkeletonContainer>
+                    </td>
+                    <td>
+                      <Skeleton width={250} />
+                    </td>
+                  </tr>
+                </SkeletonWrapper>
+              ))
+            }
+          </>
+        ) : (
+          <>
+            {filteredBusinesses.map(business => (
+              <BusinessWrapper
+                key={business.id}
+                isDisabed={actionState.loading}
+              >
+                <Checkbox
+                  checked={selectedBusinessIds.includes(business.id)}
+                  onChange={e => handleSelectBusiness(business.id, e.target.checked)}
+                />
+                <WrapperImage>
+                  <Image bgimage={business?.logo} alt='logo' />
+                </WrapperImage>
+                <p>{business?.name}</p>
+              </BusinessWrapper>
+            ))}
+          </>
+        )}
       </BusinessesContainer>
     </Container>
   )

package/src/components/Delivery/DriversGroupAddForm/BusinessesForm/styles.js

@@ -85,3 +85,15 @@ export const Image = (props) => {
     </ImageStyled>
   )
 }
+
+export const SkeletonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+`
+
+export const SkeletonContainer = styled.div`
+  display: flex;
+  align-items: center;
+`

package/src/components/Delivery/DriversGroupBusinesses/index.js

@@ -12,8 +12,11 @@ import {
   BusinessesContainer,
   BusinessWrapper,
   WrapperImage,
-  Image
+  Image,
+  SkeletonWrapper,
+  SkeletonContainer
 } from './styles'
+import Skeleton from 'react-loading-skeleton'
 
 export const DriversGroupBusinesses = (props) => {
   const {
@@ -26,7 +29,8 @@ export const DriversGroupBusinesses = (props) => {
     handleAddDriversGroup,
     handleSelectAllBusiness,
     selectedBusinessIds,
-    actionDisabled
+    actionDisabled,
+    businessesLoading
   } = props
 
   const [, t] = useLanguage()
@@ -43,7 +47,7 @@ export const DriversGroupBusinesses = (props) => {
       _filteredBusinesses = [...businesses]
     }
     setFilteredBusinesses(_filteredBusinesses)
-  }, [searchValue])
+  }, [searchValue, businesses])
 
   const onSubmit = () => {
     if (driversGroupState.driversGroup) {
@@ -85,21 +89,45 @@ export const DriversGroupBusinesses = (props) => {
         </Button>
       </ButtonGroup>
       <BusinessesContainer>
-        {filteredBusinesses.map(business => (
-          <BusinessWrapper
-            key={business.id}
-            isDisabed={actionState.loading}
-          >
-            <Checkbox
-              checked={selectedBusinessIds.includes(business.id)}
-              onChange={e => handleSelectBusiness(business.id, e.target.checked)}
-            />
-            <WrapperImage>
-              <Image bgimage={business?.logo} alt='logo' />
-            </WrapperImage>
-            <p>{business?.name}</p>
-          </BusinessWrapper>
-        ))}
+        {businessesLoading ? (
+          <>
+            {
+              [...Array(9).keys()].map(i => (
+                <SkeletonWrapper key={i}>
+                  <tr>
+                    <td>
+                      <SkeletonContainer>
+                        <Skeleton width={18} height={18} />
+                        <Skeleton width={35} height={35} style={{ margin: '0px 5px', borderRadius: '100%' }} />
+                      </SkeletonContainer>
+                    </td>
+                    <td>
+                      <Skeleton width={250} />
+                    </td>
+                  </tr>
+                </SkeletonWrapper>
+              ))
+            }
+          </>
+        ) : (
+          <>
+            {filteredBusinesses.map(business => (
+              <BusinessWrapper
+                key={business.id}
+                isDisabed={actionState.loading}
+              >
+                <Checkbox
+                  checked={selectedBusinessIds.includes(business.id)}
+                  onChange={e => handleSelectBusiness(business.id, e.target.checked)}
+                />
+                <WrapperImage>
+                  <Image bgimage={business?.logo} alt='logo' />
+                </WrapperImage>
+                <p>{business?.name}</p>
+              </BusinessWrapper>
+            ))}
+          </>
+        )}
       </BusinessesContainer>
       <Button
         borderRadius='8px'

package/src/components/Delivery/DriversGroupBusinesses/styles.js

@@ -97,3 +97,15 @@ export const Image = (props) => {
     </ImageStyled>
   )
 }
+
+export const SkeletonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+`
+
+export const SkeletonContainer = styled.div`
+  display: flex;
+  align-items: center;
+`

package/src/components/Delivery/DriversGroupsListing/index.js

@@ -219,6 +219,7 @@ const DriversGroupsListingUI = (props) => {
             driversGroupId={curDriversGroupId}
             driversManagers={driversManagersList?.managers}
             businesses={businessesList?.businesses}
+            businessesLoading={businessesList?.loading}
             paymethods={paymethodsList?.paymethods}
             drivers={driversList?.drivers}
             companies={driversCompanyList?.companies}
@@ -246,6 +247,7 @@ const DriversGroupsListingUI = (props) => {
             driversGroupId={curDriversGroupId}
             driversManagers={driversManagersList?.managers}
             businesses={businessesList?.businesses}
+            businessesLoading={businessesList?.loading}
             paymethods={paymethodsList?.paymethods}
             drivers={driversList?.drivers}
             companies={driversCompanyList?.companies}

package/src/components/Delivery/UsersListingHeader/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { SearchBar } from '../../Shared'
 import { List as MenuIcon, LifePreserver } from 'react-bootstrap-icons'
-import { Button, IconButton } from '../../../styles'
+import { Button, IconButton, LinkButton } from '../../../styles'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { UsersDeleteButton, UsersExportCSV } from '../../Users'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
@@ -10,8 +10,10 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import {
   HeaderContainer,
   HeaderTitleContainer,
-  ActionContainer
+  ActionContainer,
+  WarningMessage
 } from './styles'
+import TiWarningOutline from '@meronex/icons/ti/TiWarningOutline'
 
 export const UsersListingHeader = (props) => {
   const {
@@ -35,6 +37,9 @@ export const UsersListingHeader = (props) => {
 
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+  const handleClearFilters = () => {
+    if (searchValue) onSearch('')
+  }
 
   return (
     <HeaderContainer>
@@ -96,6 +101,13 @@ export const UsersListingHeader = (props) => {
           handleDeleteSeveralUsers={handleDeleteSeveralUsers}
           disabled={actionDisabled}
         />
+        {(!!searchValue) && (
+          <WarningMessage>
+            <TiWarningOutline />
+            <span>{t('WARNING_FILTER_APPLIED', 'Filters applied. You may miss new orders.')}</span>
+            <LinkButton onClick={() => handleClearFilters()}>{t('CLEAR_FILTERS', 'Clear filters')}</LinkButton>
+          </WarningMessage>
+        )}
         <SearchBar
           lazyLoad
           isCustomLayout

package/src/components/Delivery/UsersListingHeader/styles.js

@@ -93,3 +93,58 @@ export const ActionContainer = styled.div`
     }
   }
 `
+
+export const WarningMessage = styled.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  z-index: 100;
+  top: 50px;
+  background: ${props => props.theme.colors.warning100};
+  border: 1px solid ${props => props.theme.colors.warning};
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 0px 15px;
+  box-sizing: border-box;
+  margin: 10px 0px 0px 0px !important;
+
+  right: 0px;
+  ${props => props.theme?.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  svg {
+    font-size: 20px;
+    color: ${props => props.theme.colors.warning};
+  }
+
+  span {
+    font-size: 12px;
+    line-height: 18px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0 10px;
+    flex: 1;
+  }
+
+  a {
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  @media (min-width: 768px) {
+    padding: 0px 20px;
+    font-size: 14px;
+    line-height: 24px;
+    right: 0px; 
+    z-index: 10;
+    ${props => props.theme?.rtl && css`
+      left: 0px;
+      right: initial;
+    `}
+
+    span {
+      white-space: nowrap;
+    }
+  }
+`

package/src/components/MyProducts/AdvancedSettings/index.js

@@ -30,7 +30,7 @@ export const AdvancedSettings = (props) => {
   const [themeStructure, setThemeStructure] = useState({})
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const themeValuesRef = useRef({})
-
+  
   const [isOpenSound, setIsOpenSound] = useState(false)
 
   const headerList = [
@@ -65,6 +65,11 @@ export const AdvancedSettings = (props) => {
     { name: t('DEFAULT_BACKGROUND_COLOR', 'Default Background color'), type: 'color', path: 'business_view.components.style.backgroundColor' },
     { name: t('PRODUCTS_FROM_PREVIOUS_ORDERS_BLOCK', 'Products from previous orders block'), type: 'hidden', path: 'business_view.components.products_ordered.hidden' },
     { name: t('NEAR_BUSINESS_BLOCK', 'Near business block'), type: 'hidden', path: 'business_view.components.near_business.hidden' },
+    { name: t('REVIEWS', 'Reviews'), type: 'hidden', path: 'business_view.components.reviews.hidden' },
+    { name: t('CUSTOMER_COMMENTS', 'Customer comments'), type: 'hidden', path: 'business_view.components.reviews.components.customer_comments.hidden' },
+    { name: t('RANKING', 'Ranking'), type: 'hidden', path: 'business_view.components.reviews.components.ranking.hidden' },
+    { name: t('REVIEWS_DATE', 'Reviews date'), type: 'hidden', path: 'business_view.components.reviews.components.review_date.hidden' },
+    { name: t('SEARCH', 'Search'), type: 'hidden', path: 'business_view.components.reviews.components.search.hidden' },
     { name: t('BUSINESS_LOGO', 'Business logo'), type: 'hidden', path: 'business_view.components.header.components.logo.hidden' },
     { name: t('BUSINESS_INFO_ICON', 'Business info icon'), type: 'hidden', path: 'business_view.components.header.components.business_info.hidden' },
     { name: t('BUSINESS_HEADER', 'Business header'), type: 'hidden', path: 'business_view.components.header.hidden' }

package/src/components/MyProducts/AppLayout/index.js

@@ -24,9 +24,86 @@ export const AppLayout = (props) => {
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const location = useLocation()
 
-  const showMessage = (message) => {
-    window.Intercom && window.Intercom('showNewMessage', message)
-  }
+  const LeftContent = () => (
+    <AppInfoContainer>
+      <ImageWrapper isDriver={isDriver}>
+        <img src={appInfo.images.live} alt='' />
+      </ImageWrapper>
+      <h2>{appInfo.live_title}</h2>
+      {appInfo?.downloads && (
+        <DownLoadWrapper>
+          {appInfo.downloads.map(item => (
+            <img
+              src={item.icon}
+              alt=''
+              key={item.id}
+              onClick={() => window.open(item.link, '_blank')}
+            />
+          ))}
+        </DownLoadWrapper>
+      )}
+      {appInfo?.web_url && (
+        <DownloadLink href={appInfo.web_url} target='_blank' isSingle className='download-link'>
+          {appInfo.web_link_title}
+        </DownloadLink>
+      )}
+      <p>{appInfo.live_description}</p>
+      {appInfo?.purchase_message && (
+        <ButtonWRapper>
+          {appInfo?.purchase_link && (
+            <Button
+              color='primary'
+              borderRadius='8px'
+              onClick={() => window.open(appInfo?.purchase_link, '_blank')}
+            >
+              {t('PURCHASE_NOW', 'Purchase Now')}
+            </Button>
+          )}
+          {appInfo?.demo_link && (
+            <Button
+              color='primary'
+              outline
+              borderRadius='8px'
+              onClick={() => window.open(appInfo?.demo_link, '_blank')}
+            >
+              {t('BOOK_A_DEMO', 'Book a demo')}
+            </Button>
+          )}
+        </ButtonWRapper>
+      )}
+    </AppInfoContainer>
+  )
+
+  const RightContent = () => (
+    <AppInfoContainer>
+      <ImageWrapper isDriver={isDriver}>
+        <img src={appInfo.images.brand} alt='' />
+      </ImageWrapper>
+      <h2>{appInfo.brand_title}</h2>
+      <p>{appInfo.brand_description}</p>
+      <ButtonWRapper>
+        {appInfo?.purchase_link && (
+          <Button
+            color='primary'
+            borderRadius='8px'
+            onClick={() => window.open(appInfo?.purchase_link, '_blank')}
+          >
+            {t('PURCHASE_NOW', 'Purchase Now')}
+          </Button>
+        )}
+        {!appInfo?.purchase_link && appInfo?.demo_link && (
+          <Button
+            color='primary'
+            outline
+            borderRadius='8px'
+            onClick={() => window.open(appInfo?.demo_link, '_blank')}
+          >
+            {t('BOOK_A_DEMO', 'Book a demo')}
+          </Button>
+        )}
+      </ButtonWRapper>
+    </AppInfoContainer>
+  )
 
   return (
     <Container>
@@ -58,67 +135,8 @@ export const AppLayout = (props) => {
         <h1>{appInfo.title}</h1>
         <p>{appInfo.description}</p>
         <BoxWrapper>
-          <AppInfoContainer>
-            <ImageWrapper isDriver={isDriver}>
-              <img src={appInfo.images.live} alt='' />
-            </ImageWrapper>
-            <h2>{appInfo.live_title}</h2>
-            {appInfo?.downloads && (
-              <DownLoadWrapper>
-                {appInfo.downloads.map(item => (
-                  <img
-                    src={item.icon}
-                    alt=''
-                    key={item.id}
-                    onClick={() => window.open(item.link, '_blank')}
-                  />
-                ))}
-              </DownLoadWrapper>
-            )}
-            {appInfo?.web_url && (
-              <DownloadLink href={appInfo.web_url} target='_blank' isSingle className='download-link'>
-                {appInfo.web_link_title}
-              </DownloadLink>
-            )}
-            <p>{appInfo.live_description}</p>
-            {appInfo?.purchase_message && (
-              <ButtonWRapper>
-                <Button
-                  color='primary'
-                  borderRadius='8px'
-                  onClick={() => showMessage(appInfo?.purchase_message)}
-                >
-                  {t('PURCHASE_NOW', 'Purchase Now')}
-                </Button>
-                {appInfo?.demo_book_message && (
-                  <Button
-                    color='primary'
-                    outline
-                    borderRadius='8px'
-                    onClick={() => showMessage(appInfo?.demo_book_message)}
-                  >
-                    {t('BOOK_A_DEMO', 'Book a demo')}
-                  </Button>
-                )}
-              </ButtonWRapper>
-            )}
-          </AppInfoContainer>
-          <AppInfoContainer>
-            <ImageWrapper isDriver={isDriver}>
-              <img src={appInfo.images.brand} alt='' />
-            </ImageWrapper>
-            <h2>{appInfo.brand_title}</h2>
-            <p>{appInfo.brand_description}</p>
-            <ButtonWRapper>
-              <Button
-                color='primary'
-                borderRadius='8px'
-                onClick={() => showMessage(appInfo?.purchase_message)}
-              >
-                {t('PURCHASE_NOW', 'Purchase Now')}
-              </Button>
-            </ButtonWRapper>
-          </AppInfoContainer>
+          {appInfo?.live_title && <LeftContent />}
+          <RightContent />
         </BoxWrapper>
       </ContentWrapper>
     </Container>

package/src/components/MyProducts/CallCenterApp/index.js

@@ -11,17 +11,13 @@ export const CallCenterApp = () => {
     title: t('ORDERING_CALL_CENTER_APP', 'Ordering Call Center App'),
     description: t('CALL_CENTER_DESCRIPTION', 'Give this tool to your team of agents, capture orders in just a few seconds, and keep offering the best customer experience possible.'),
     images: {
-      live: theme.images.myProducts.myCallcenterAppLive,
       brand: theme.images.myProducts.myCallcenterAppBrand
     },
-    live_title: t('LIVE_DEMO', 'Live Demo'),
-    live_description: t('CALL_CENTER_APP_LIVE_DEMO_DESCRIPTION', 'This is a branded Ordering.co product; play with it and understand how it works'),
-    web_url: 'https://callcenter.tryordering.com/search',
-    web_link_title: t('CALL_CENTER', 'Call center'),
     brand_title: t('YOUR_BRANDED_CALL_CENTER', 'Your Branded Call Center'),
     brand_description: t('CALL_CENTER_BRANDED_DESCRIPTION', 'The Call Center is delivered in less than five working days, fully branded with your guidelines, and ready to be used on any tablet or device you add it to.'),
     demo_book_message: 'I would like to book a Demo about the Call center , can you assist me?',
-    purchase_message: 'I would like to know about the Call center, can you assist me?'
+    purchase_message: 'I would like to know about the Call center, can you assist me?',
+    demo_link: 'https://www.ordering.co/platform-demo-and-pricing'
   }
 
   return (

package/src/components/MyProducts/CustomProject/index.js

@@ -42,7 +42,7 @@ export const CustomProject = () => {
           <Button
             color='primary'
             borderRadius='8px'
-            onClick={() => showMessage('I\'m interested in a custom project, can you please provide more information?')}
+            onClick={() => window.open('https://www.ordering.co/quote-project-request', '_blank')}
           >
             {t('CONTACT_US', 'Contact us')}
           </Button>

package/src/components/MyProducts/CustomerApp/index.js

@@ -23,7 +23,9 @@ export const CustomerApp = () => {
     downloads: [
       { id: 1, icon: theme.images.myProducts.appStoreSmall, link: 'https://apps.apple.com/us/app/customer-app-2-0/id1607414555' },
       { id: 2, icon: theme.images.myProducts.playStoreSmall, link: 'https://play.google.com/store/apps/details?id=com.ordering.onlineorderingappv5&hl=en&gl=US' }
-    ]
+    ],
+    purchase_link: 'https://buy.stripe.com/5kA4in4Fp86Kg9yfZN',
+    demo_link: 'https://www.ordering.co/platform-demo-and-pricing'
   }
 
   return (

package/src/components/MyProducts/DriverApp/index.js

@@ -23,7 +23,9 @@ export const DriverApp = () => {
     downloads: [
       { id: 1, icon: theme.images.myProducts.appStoreSmall, link: 'https://apps.apple.com/us/app/driver-app-2-0/id1606257815' },
       { id: 2, icon: theme.images.myProducts.playStoreSmall, link: 'https://play.google.com/store/apps/details?id=com.ordering.deliveryv5' }
-    ]
+    ],
+    purchase_link: 'https://buy.stripe.com/dR6g151tdcn0g9y3d3',
+    demo_link: 'https://www.ordering.co/platform-demo-and-pricing'
   }
 
   return (

package/src/components/MyProducts/KioskApp/index.js

@@ -11,11 +11,8 @@ export const KioskApp = () => {
     title: t('ORDERING_SELF_KIOSK', 'Ordering Self Ordering Kiosk'),
     description: t('KIOS_DESCRIPTION', 'This tool will help your store complete that final step on each sale with innovative and intuitive software and hardware inside your locations.'),
     images: {
-      live: theme.images.myProducts.myKioskAppLive,
       brand: theme.images.myProducts.myKioskAppBrand
     },
-    live_title: t('LIVE_DEMO', 'Live Demo'),
-    live_description: t('KIOS_APP_LIVE_DEMO_DESCRIPTION', 'This is a branded Ordering.co product. play with it and understand how it works'),
     brand_title: t('YOUR_BRANDED_KIOSK', 'Your Branded Kiosk'),
     brand_description: t('KIOSK_BRANDED_DESCRIPTION', 'This App is delivered in less than five working days, fully branded with your guidelines, and ready to be used on any tablet you add it to.'),
     demo_book_message: 'I would like to book a Demo about the Kiosk app, can you assist me?',
@@ -23,7 +20,8 @@ export const KioskApp = () => {
     downloads: [
       { id: 1, icon: theme.images.myProducts.appStoreSmall, link: 'https://apps.apple.com/us/app/ordering-kiosk-2-0/id1615828153' },
       { id: 2, icon: theme.images.myProducts.playStoreSmall, link: 'https://play.google.com/store/apps/details?id=com.ordering.orderingkioskv5&hl=en&gl=US' }
-    ]
+    ],
+    demo_link: 'https://www.ordering.co/platform-demo-and-pricing'
   }
 
   return (

package/src/components/MyProducts/StoreApp/index.js

@@ -23,7 +23,9 @@ export const StoreApp = () => {
     downloads: [
       { id: 1, icon: theme.images.myProducts.appStoreSmall, link: 'https://apps.apple.com/us/app/store-app-2-0/id1608192050' },
       { id: 2, icon: theme.images.myProducts.playStoreSmall, link: 'https://play.google.com/store/apps/details?id=com.ordering.storeappv5&pli=1' }
-    ]
+    ],
+    purchase_link: 'https://buy.stripe.com/aEU5mr2xhgDg4qQcNC',
+    demo_link: 'https://www.ordering.co/platform-demo-and-pricing'
   }
 
   return (

package/src/components/Orders/AllInOne/DriversManager/index.js

@@ -29,7 +29,9 @@ const DriversManagerUI = (props) => {
     selectedDriver,
     setSelectedDriver,
     assignedOrders,
-    handleUpdateAssignedOrders
+    handleUpdateAssignedOrders,
+    showCompressedInfo,
+    handleEmtpyOrderSelected
   } = props
 
   const [configState] = useConfig()
@@ -48,6 +50,7 @@ const DriversManagerUI = (props) => {
   }
 
   const handleChangeDriver = (driver) => {
+    handleEmtpyOrderSelected && handleEmtpyOrderSelected()
     if (selectedDriver?.id === driver.id) {
       setSelectedDriver(null)
     } else {
@@ -86,19 +89,21 @@ const DriversManagerUI = (props) => {
           )}
         </DriversHeader>
         <DriversContent>
-          <DriverListContainer>
+          <DriverListContainer showCompressedInfo={showCompressedInfo}>
             <FilterContainer>
               <DriversOnlineOfflineFilter
                 driversIsOnline={driversIsOnline}
                 handleChangeDriverIsOnline={handleChangeDriverIsOnline}
                 numberOfonlineDrivers={numberOfonlineDrivers}
                 numberOfofflineDrivers={numberOfofflineDrivers}
+                showCompressedInfo={showCompressedInfo}
               />
               <DriversBusyStatusFilter
                 driversSubfilter={driversSubfilter}
                 handleChangeDriversSubFilter={handleChangeDriversSubFilter}
                 numberOfbusyDrivers={numberOfbusyDrivers}
                 numberOfnotBusyDrivers={numberOfnotBusyDrivers}
+                showCompressedInfo={showCompressedInfo}
               />
             </FilterContainer>
             <WrapperDriversList>
@@ -111,6 +116,7 @@ const DriversManagerUI = (props) => {
                 selectedDriver={selectedDriver}
                 handleChangeDriver={handleChangeDriver}
                 handleOpenDriverOrders={handleOpenDriverOrders}
+                showCompressedInfo={showCompressedInfo}
               />
             </WrapperDriversList>
           </DriverListContainer>