ordering-ui-admin-external 1.39.9 → 1.40.0

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

@@ -115,7 +115,7 @@ const OrdersManagerUI = (props) => {
     }
     setDetailsOrder(order)
     setOrderDetailId(order.id)
-    setIsOpenOrderDetail(true)
+    // setIsOpenOrderDetail(true)
     if (!isSelectedOrders) {
       onOrderRedirect(order.id)
     } else {
@@ -131,6 +131,10 @@ const OrdersManagerUI = (props) => {
     }
   }
 
+  const handleSetOpenOrderDetail = (state) => {
+    setIsOpenOrderDetail(state)
+  }
+
   const handleOpenTour = () => {
     const tourElement = document.querySelector('[data-tour="tour_start"]')
     if (!tourElement) {
@@ -219,9 +223,12 @@ const OrdersManagerUI = (props) => {
                 setMapsData={setMapsData}
                 handleUpdateAssignedOrders={handleUpdateAssignedOrders}
                 disableSocketRoomDriver
+                drivers={driversList.drivers}
+                showCompressedInfo
+                handleEmtpyOrderSelected={handleBackRedirect}
               />
             </DriversContainer>
-            <OrdersContainer>
+            <OrdersContainer showCompressedInfo>
               <OrderStatusFilterBar
                 isUseQuery={isUseQuery}
                 selectedOrderStatus={ordersStatusGroup}
@@ -276,6 +283,7 @@ const OrdersManagerUI = (props) => {
                       setAllowColumns={setAllowColumns}
                       setOrdersAmountByStatus={setOrdersAmountByStatus}
                       isUseQuery={isUseQuery}
+                      handleSetOpenOrderDetail={handleSetOpenOrderDetail}
                     />
                   </WrapItemView>
                 </OrdersInnerContent>

package/src/components/Orders/DeliveriesLocation/index.js

@@ -16,7 +16,13 @@ import {
   DriverInfo
 } from './styles'
 
-export const DeliveriesLocation = (props) => {
+const DeliveriesLocationPropsAreEqual = (prevProps, nextProps) => {
+  return prevProps.interActionMapOrder?.id === nextProps.interActionMapOrder?.id &&
+    JSON.stringify(prevProps.interActionMapOrder?.driver) === JSON.stringify(nextProps.interActionMapOrder?.driver) &&
+    (JSON.stringify(prevProps.driversList) === JSON.stringify(nextProps.driversList) || !prevProps.interActionMapOrder?.id)
+}
+
+export const DeliveriesLocation = React.memo((props) => {
   const {
     driversList,
     interActionMapOrder
@@ -296,4 +302,4 @@ export const DeliveriesLocation = (props) => {
       )}
     </WrapperMap>
   )
-}
+}, DeliveriesLocationPropsAreEqual)

package/src/components/Orders/DriversBusyStatusFilter/index.js

@@ -12,11 +12,12 @@ export const DriversBusyStatusFilter = (props) => {
     driversSubfilter,
     handleChangeDriversSubFilter,
     numberOfbusyDrivers,
-    numberOfnotBusyDrivers
+    numberOfnotBusyDrivers,
+    showCompressedInfo
   } = props
   const [, t] = useLanguage()
   return (
-    <Container>
+    <Container showCompressedInfo={showCompressedInfo}>
       <Button
         color={driversSubfilter.busy ? 'primary' : 'secundary'}
         onClick={() => handleChangeDriversSubFilter({ ...driversSubfilter, busy: !driversSubfilter.busy })}

package/src/components/Orders/DriversBusyStatusFilter/styles.js

@@ -22,5 +22,10 @@ export const Container = styled.div`
         margin-left: 10px;
       `}
     }
+    @media (min-width: 992px) {
+      ${({ showCompressedInfo }) => showCompressedInfo && css`
+        font-size: 12px;
+      `}
+    }
   }
 `

package/src/components/Orders/DriversList/Driver.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import { DriverCard, DriverInfo, Image, WrapperImage, WrapperStar } from './styles'
+import BsDot from '@meronex/icons/bs/BsDot'
+import { LinkButton } from '../../../styles'
+import { useLanguage, useUtils } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+
+const DriverPropsAreEqual = (prevProps, nextProps) => {
+  return JSON.stringify(prevProps.driver) === JSON.stringify(nextProps.driver) &&
+  prevProps?.selectedDriver?.id === nextProps?.selectedDriver?.id
+}
+
+export const Driver = React.memo((props) => {
+  const {
+    driver,
+    handleClickDriver,
+    selectedDriver,
+    hidePhoto,
+    onOpenDriverOrdersDetail,
+    getStarWidth,
+    showCompressedInfo
+  } = props
+
+  const theme = useTheme()
+  const [{ optimizeImage }] = useUtils()
+  const [, t] = useLanguage()
+
+  return (
+    <DriverCard
+      key={driver.id}
+      onClick={(e) => handleClickDriver(e, driver)}
+      active={selectedDriver?.id === driver.id}
+      showCompressedInfo={showCompressedInfo}
+    >
+      {!hidePhoto && (
+        <WrapperImage>
+          <Image bgimage={optimizeImage(driver?.photo || theme.images?.icons?.noDriver, 'h_50,c_limit')} />
+        </WrapperImage>
+      )}
+      <DriverInfo hidePhoto={hidePhoto} showCompressedInfo={showCompressedInfo}>
+        <div className='driver-info-container'>
+          <p className='name'>{driver.name} {driver.lastname}</p>
+          <BsDot />
+          <div>
+            <LinkButton
+              className='driver-orders'
+              disabled={!driver?.assigned_orders_count || driver?.assigned_orders_count === 0}
+              onClick={() => onOpenDriverOrdersDetail(driver)}
+            >
+              {driver?.assigned_orders_count} {t('ORDERS', 'Orders')}
+            </LinkButton>
+            <span className='text-red'>{(driver?.busy && `(${t('BUSY', 'Busy')})`)}</span>
+          </div>
+        </div>
+        {driver?.qualification && (
+          <WrapperStar width={getStarWidth(driver?.qualification)} />
+        )}
+      </DriverInfo>
+    </DriverCard>
+  )
+}, DriverPropsAreEqual)

package/src/components/Orders/DriversList/index.js

@@ -1,19 +1,14 @@
 import React from 'react'
-import { useUtils, useLanguage } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
-import BsDot from '@meronex/icons/bs/BsDot'
-import { useTheme } from 'styled-components'
 import { getStarWidth } from '../../../utils'
 import { useWindowSize } from '../../../hooks/useWindowSize'
-import { LinkButton } from '../../../styles'
 import {
   DriversListContainer,
   DriverCard,
   WrapperImage,
-  Image,
   DriverInfo,
-  WrapperStar
 } from './styles'
+import { Driver } from './Driver'
 
 export const DriversList = (props) => {
   const {
@@ -24,12 +19,10 @@ export const DriversList = (props) => {
     selectedDriver,
     handleChangeDriver,
     handleOpenDriverOrders,
-    hidePhoto
+    hidePhoto,
+    showCompressedInfo
   } = props
 
-  const theme = useTheme()
-  const [, t] = useLanguage()
-  const [{ optimizeImage }] = useUtils()
   const { width } = useWindowSize()
 
   const handleClickDriver = (e, driver) => {
@@ -48,7 +41,7 @@ export const DriversList = (props) => {
   }
 
   return (
-    <DriversListContainer>
+    <DriversListContainer showCompressedInfo={showCompressedInfo}>
       {loading ? (
         <>
           {[...Array(10).keys()].map(i => (
@@ -72,36 +65,16 @@ export const DriversList = (props) => {
       ) : (
         <>
           {(driversIsOnline ? onlineDrivers : offlineDrivers).map(driver => (
-            <DriverCard
-              key={driver.id}
-              onClick={(e) => handleClickDriver(e, driver)}
-              active={selectedDriver?.id === driver.id}
-            >
-              {!hidePhoto && (
-                <WrapperImage>
-                  <Image bgimage={optimizeImage(driver?.photo || theme.images?.icons?.noDriver, 'h_50,c_limit')} />
-                </WrapperImage>
-              )}
-              <DriverInfo hidePhoto={hidePhoto}>
-                <div className='driver-info-container'>
-                  <p className='name'>{driver.name} {driver.lastname}</p>
-                  <BsDot />
-                  <div>
-                    <LinkButton
-                      className='driver-orders'
-                      disabled={!driver?.assigned_orders_count || driver?.assigned_orders_count === 0}
-                      onClick={() => onOpenDriverOrdersDetail(driver)}
-                    >
-                      {driver?.assigned_orders_count} {t('ORDERS', 'Orders')}
-                    </LinkButton>
-                    <span className='text-red'>{(driver?.busy && `(${t('BUSY', 'Busy')})`)}</span>
-                  </div>
-                </div>
-                {driver?.qualification && (
-                  <WrapperStar width={getStarWidth(driver?.qualification)} />
-                )}
-              </DriverInfo>
-            </DriverCard>
+            <Driver
+              key={driver?.id}
+              driver={driver}
+              handleClickDriver={handleClickDriver}
+              selectedDriver={selectedDriver}
+              hidePhoto={hidePhoto}
+              onOpenDriverOrdersDetail={onOpenDriverOrdersDetail}
+              getStarWidth={getStarWidth}
+              showCompressedInfo={showCompressedInfo}
+            />
           ))}
         </>
       )}

package/src/components/Orders/DriversList/styles.js

@@ -3,6 +3,11 @@ import styled, { css } from 'styled-components'
 
 export const DriversListContainer = styled.div`
   padding: 15px 0px;
+  @media (min-width: 992px) {
+    ${({ showCompressedInfo }) => showCompressedInfo && css`
+      padding: 0px 0px;
+    `}
+  }
 `
 
 export const DriverCard = styled.div`
@@ -25,6 +30,12 @@ export const DriverCard = styled.div`
     background-color: ${props => props.theme.colors.lightPrimary};
     border: 1px solid ${props => props.theme.colors.primary};
   `}
+
+  @media (min-width: 992px) {
+    ${({ showCompressedInfo }) => showCompressedInfo && css`
+      margin-bottom: 5px;
+    `}
+  }
 `
 
 export const WrapperImage = styled.div`
@@ -74,7 +85,7 @@ export const WrapperStar = styled.div`
   position: relative;
   width: fit-content;
 
-  &::before { 
+  &::before {
     content: '★★★★★';
     opacity: .3;
   }
@@ -126,6 +137,19 @@ export const DriverInfo = styled.div`
         margin-left: 2px;
       `}
     }
+    @media (min-width: 992px) {
+      ${({ showCompressedInfo }) => showCompressedInfo && css`
+        p.name {
+          font-size: 12px;
+        }
+        .text-red {
+          font-size: 11px;
+        }
+        .driver-orders {
+          font-size: 11px;
+        }
+      `}
+    }
   }
 `
 

package/src/components/Orders/DriversLocation/index.js

@@ -9,7 +9,16 @@ import {
   WrapperMap
 } from './styles'
 
-export const DriversLocation = (props) => {
+const DriversLocationPropsAreEqual = (prevProps, nextProps) => {
+  return JSON.stringify(prevProps.selectedDriver) === JSON.stringify(nextProps.selectedDriver) &&
+    JSON.stringify(prevProps.assignedOrders) === JSON.stringify(nextProps.assignedOrders) &&
+    prevProps.driversIsOnline === nextProps.driversIsOnline &&
+    prevProps.onlineDrivers?.length === nextProps.onlineDrivers?.length &&
+    prevProps.offlineDrivers?.length === nextProps.offlineDrivers?.length &&
+    JSON.stringify(prevProps.selectedOrder) === JSON.stringify(nextProps.selectedOrder)
+}
+
+export const DriversLocation = React.memo((props) => {
   const {
     driversIsOnline,
     onlineDrivers,
@@ -158,9 +167,8 @@ export const DriversLocation = (props) => {
   }
 
   useEffect(() => {
-    if (!selectedDriver?.id) return
     setMapFitted(false)
-  }, [selectedDriver?.id])
+  }, [selectedOrder])
 
   return (
     <>
@@ -184,27 +192,6 @@ export const DriversLocation = (props) => {
             onChange={(data) => handleMapChange(data)}
             yesIWantToUseGoogleMapApiInternals
           >
-            {!selectedOrder && showDrivers.length !== 0 &&
-              showDrivers.map((driver) => (
-                <DriverMapMarkerAndInfo
-                  key={driver.id}
-                  driver={driver}
-                  lat={
-                    (driver.location !== null && typeof driver.location === 'object' && driver.location?.lat)
-                      ? driver.location.lat
-                      : typeof driver.location === 'string'
-                        ? parseFloat(driver?.location?.split(',')[0].replace(/[^-.0-9]/g, ''))
-                        : defaultCenter.lat
-                  }
-                  lng={
-                    (driver.location !== null && typeof driver.location === 'object' && driver.location?.lng)
-                      ? driver.location.lng
-                      : typeof driver.location === 'string'
-                        ? parseFloat(driver?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
-                        : defaultCenter.lng
-                  }
-                />
-              ))}
             {selectedOrder && (
               <InterActOrderMarker
                 customer={selectedOrder?.customer}
@@ -267,4 +254,4 @@ export const DriversLocation = (props) => {
       </WrapperMap>
     </>
   )
-}
+}, DriversLocationPropsAreEqual)

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

@@ -6,7 +6,7 @@ import { OrdersLateralBar } from '../OrdersLateralBar'
 import { SearchBar } from '../../Shared'
 import { OrderNotification } from '../OrderNotification'
 import { List as MenuIcon } from 'react-bootstrap-icons'
-import { IconButton } from '../../../styles/Buttons'
+import { IconButton, LinkButton } from '../../../styles/Buttons'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { GoogleMapsApiKeySettingButton } from '../GoogleMapsApiKeySettingButton'
 import { WebsocketStatus } from '../WebsocketStatus'
@@ -15,8 +15,10 @@ import {
   DriversHeader,
   HeaderTitleContainer,
   DriversContainer,
-  DriversContent
+  DriversContent,
+  WarningMessage
 } from './styles'
+import TiWarningOutline from '@meronex/icons/ti/TiWarningOutline'
 
 const DriversManagerUI = (props) => {
   const {
@@ -58,6 +60,10 @@ const DriversManagerUI = (props) => {
     setIsOpenDriverOrders(true)
   }
 
+  const handleClearFilters = () => {
+    if (searchValue) handleChangeSearch('')
+  }
+
   useEffect(() => {
     if (loading) return
     const id = query.get('id')
@@ -92,6 +98,13 @@ const DriversManagerUI = (props) => {
           {!googleMapsApiKey && (
             <GoogleMapsApiKeySettingButton />
           )}
+          {(!!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
             isCustomLayout
             lazyLoad

package/src/components/Orders/DriversManager/styles.js

@@ -69,3 +69,58 @@ export const HeaderTitleContainer = styled.div`
 
 export const DriversContent = 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/Orders/DriversOnlineOfflineFilter/index.js

@@ -10,11 +10,12 @@ export const DriversOnlineOfflineFilter = (props) => {
     driversIsOnline,
     handleChangeDriverIsOnline,
     numberOfonlineDrivers,
-    numberOfofflineDrivers
+    numberOfofflineDrivers,
+    showCompressedInfo
   } = props
   const [, t] = useLanguage()
   return (
-    <Container>
+    <Container showCompressedInfo={showCompressedInfo}>
       <Tab
         active={driversIsOnline}
         onClick={() => handleChangeDriverIsOnline(true)}

package/src/components/Orders/DriversOnlineOfflineFilter/styles.js

@@ -4,6 +4,17 @@ export const Container = styled.div`
   width: 100%;
   display: flex;
   border-bottom: 1px solid #CCC;
+  ${({ showCompressedInfo }) => showCompressedInfo && css`
+    justify-content: space-around;
+    @media (min-width: 992px) {
+      max-width: 350px;
+    }
+    > div {
+      max-width: 150px;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+    }
+  `}
 `
 
 export const Tab = styled.div`

package/src/components/Orders/OrderContactInformation/index.js

@@ -1,5 +1,5 @@
 import React, { useContext, useState, useRef } from 'react'
-import { useLanguage, useSession, useUtils, useConfig, GoogleAutocompleteInput } from 'ordering-components-admin-external'
+import { useLanguage, useSession, useUtils, useConfig, GoogleAutocompleteInput, GoogleMapsMap } from 'ordering-components-admin-external'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import BisBusiness from '@meronex/icons/bi/BisBusiness'
 import { DriverSelector } from '../DriverSelector'
@@ -26,7 +26,8 @@ import {
   ReviewButton,
   CustomerEditWrapper,
   ActionIconWrapper,
-  ReviewWrapper
+  ReviewWrapper,
+  WrapperMap
 } from './styles'
 
 export const OrderContactInformation = (props) => {
@@ -41,7 +42,8 @@ export const OrderContactInformation = (props) => {
     handleUpdateCustomerInfo,
     setAddressState,
     setCommentInfostate,
-    commentInfoState
+    commentInfoState,
+    addressState
   } = props
 
   const [, t] = useLanguage()
@@ -53,6 +55,20 @@ export const OrderContactInformation = (props) => {
   const googleMapsApiKey = configs?.google_maps_api_key?.value
   const isDisableDriverCompanies = configs?.disable_companies_order_details?.value === '1'
 
+  const googleMapsControls = {
+    defaultZoom: 15,
+    zoomControl: true,
+    streetViewControl: false,
+    fullscreenControl: false,
+    mapTypeId: 'roadmap', // 'roadmap', 'satellite', 'hybrid', 'terrain'
+    mapTypeControl: false,
+    mapTypeControlOptions: {
+      mapTypeIds: ['roadmap', 'satellite']
+    }
+  }
+
+  const defaultPosition = { lat: 40.77473399999999, lng: -73.9653844 }
+
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [currentCustomer, setCurrentCustomer] = useState(null)
   const [isEdit, setIsEdit] = useState(false)
@@ -239,6 +255,13 @@ export const OrderContactInformation = (props) => {
                   autoComplete='new-password'
                   countryCode={configs?.country_autocomplete?.value || '*'}
                 />
+                <WrapperMap>
+                  <GoogleMapsMap
+                    apiKey={configs?.google_maps_api_key?.value}
+                    location={addressState?.location ?? order?.customer?.location ?? defaultPosition}
+                    mapControls={googleMapsControls}
+                  />
+                </WrapperMap>
                 <Input
                   placeholder={t('NOTES', 'Notes')}
                   defaultValue={customerInfoState?.customer?.address_notes ?? order?.customer?.address_notes ?? ''}

package/src/components/Orders/OrderContactInformation/styles.js

@@ -268,3 +268,19 @@ export const CustomerEditWrapper = styled.div`
     margin-left: auto;
   }
 `
+export const WrapperMap = styled.div`
+  width: 100%;
+  height: 150px;
+  margin-bottom: 10px;
+
+  > div {
+    position: relative !important;
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 8px;
+  }
+
+  @media (min-width: 768px) {
+    height: 200px;
+  }
+`

package/src/components/Orders/OrderDetails/index.js

@@ -41,7 +41,21 @@ import {
   ErrorMessage
 } from './styles'
 
-const OrderDetailsUI = (props) => {
+const OrderDetailsPropsAreEqual = (prevProps, nextProps) => {
+  return prevProps.isSelectedOrders === nextProps.isSelectedOrders &&
+    prevProps.open === nextProps.open &&
+    prevProps.isTourOpen === nextProps.isTourOpen &&
+    JSON.stringify(prevProps.messages) === JSON.stringify(nextProps.messages) &&
+    JSON.stringify(prevProps.order) === JSON.stringify(nextProps.order) &&
+    prevProps.loading === nextProps.loading &&
+    prevProps.isTourFlag === nextProps.isTourFlag &&
+    prevProps.isServiceOrder === nextProps.isServiceOrder &&
+    prevProps.currentTourStep === nextProps.currentTourStep &&
+    prevProps.customerInfoState === nextProps.customerInfoState &&
+    JSON.stringify(prevProps.addressState) === JSON.stringify(nextProps.addressState)
+}
+
+const OrderDetailsUI = React.memo((props) => {
   const {
     isSelectedOrders,
     handleChangeCustomerInfoState,
@@ -50,6 +64,7 @@ const OrderDetailsUI = (props) => {
     open,
     handleBackRedirect,
     handleUpdateOrderStatus,
+    addressState,
     setAddressState,
     isTourOpen,
     handleUpdateOrderForUnreadCount,
@@ -409,6 +424,7 @@ const OrderDetailsUI = (props) => {
               handleShowOption={handleShowOption}
               setCommentInfostate={setCommentInfostate}
               commentInfoState={commentInfoState}
+              addressState={addressState}
             />
             <OrderProducts>
               <h2>{t('EXPORT_SUMMARY', 'Summary')}</h2>
@@ -591,7 +607,8 @@ const OrderDetailsUI = (props) => {
       </Modal>
     </Container>
   )
-}
+}, OrderDetailsPropsAreEqual)
+
 export const OrderDetails = (props) => {
   const orderDetailsProps = {
     ...props,

package/src/components/Orders/OrderDetailsHeader/styles.js

@@ -10,12 +10,14 @@ export const OrderDetailsHeaderContainer = styled.div`
       font-size: 20px;
       margin: 0px;
       font-weight: 700;
+      word-break: break-word;
     }
     h2 {
       width: 100%;
       font-size: 18px;
       margin: 0px;
       font-weight: 700;
+      word-break: break-word;
     }
     > div {
       display: flex;
@@ -34,7 +36,7 @@ export const OrderDetailsHeaderContainer = styled.div`
   @media (min-width: 768px) {
     > div {
       flex-direction: row;
-      align-items: center;
+      align-items: flex-start;
     }
     > div {
       > div {