ordering-ui-external 1.8.8 → 1.8.10

package/src/themes/callcenterOriginal/src/components/Orders/OrderToPrint/index.js

@@ -0,0 +1,367 @@
+import React, { forwardRef } from 'react'
+import { useLanguage, useSession, useUtils } from 'ordering-components-external'
+import EnDotSingle from '@meronex/icons/en/EnDotSingle'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
+import BisBusiness from '@meronex/icons/bi/BisBusiness'
+import { OrderBill } from '../OrderBill'
+
+import {
+  OrderStatus,
+  OrderStatusSelectorWrapper,
+  PlaceSpotContainer,
+  StatusBarContainer,
+  StatusBar,
+  AdvancedLogistic,
+  OrderProducts
+} from '../OrderDetails/styles'
+
+import {
+  BusinessInfo,
+  PhotoWrapper,
+  Photo,
+  InfoContent,
+  CutsomerDetail,
+  CustomerInfoTable,
+  CustomerInfo,
+  DriverInfoContainer,
+  DriverInfo
+} from '../OrderContactInformation/styles'
+
+import {
+  ProductInfo,
+  WrapperProductImage,
+  ProductQuantity,
+  ProductImage,
+  ContentInfo,
+  AccordionSection,
+  AccordionContent,
+  ProductOptionsList,
+  ProductComment
+} from '../ProductItemAccordion/styles'
+
+import {
+  PrintContainer
+} from './styles'
+
+export const OrderToPrint = forwardRef((props, ref) => {
+  const {
+    order,
+    placeSpotEnabled,
+    getOrderStatus,
+    getLogisticTag,
+    getPriorityTag
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ user }] = useSession()
+  const [{ parseDate, getOrderState, optimizeImage, parsePrice }] = useUtils()
+
+  const walletName = {
+    cash: {
+      name: t('CASH_WALLET', 'Cash Wallet')
+    },
+    credit_point: {
+      name: t('POINTS_WALLET', 'Points Wallet')
+    }
+  }
+  const getOrderType = (value) => {
+    const statuses = [
+      { value: 1, content: t('DELIVERY', 'Delivery') },
+      { value: 2, content: t('PICKUP', 'Pickup') },
+      { value: 3, content: t('EAT_IN', 'Eat in') },
+      { value: 4, content: t('CURBSIDE', 'Curbside') },
+      { value: 5, content: t('DRIVE_THRU', 'Drive thru') }
+    ]
+
+    const objectStatus = statuses.find(status => status.value === value)
+    if (objectStatus) return objectStatus?.content
+    else return value
+  }
+
+  const getFormattedSubOptionName = ({ quantity, name, position, price }) => {
+    if (name !== 'No') {
+      const pos = position ? `(${position})` : ''
+      return price > 0 ? `${name} ${pos} ${parsePrice(quantity * price, { currencyPosition: 'left' })}` : `${name} ${pos}`
+    } else {
+      return 'No'
+    }
+  }
+
+  return (
+    <PrintContainer ref={ref}>
+      <h1>{t('INVOICE_ORDER_NO', 'Order No')} {order?.id}</h1>
+      <p>
+        {order?.payment_events?.length > 0 ? (
+          order?.payment_events?.map((event, i) => (
+            <React.Fragment key={i}>
+              <span>
+                {event?.wallet_event
+                  ? walletName[event?.wallet_event?.wallet?.type]?.name
+                  : event?.paymethod?.name}
+              </span>
+              <EnDotSingle />
+            </React.Fragment>
+          ))
+        ) : (
+          <>
+            <span>{order?.paymethod?.name}</span>
+            <EnDotSingle />
+          </>
+        )}
+        <span>{getOrderType(order?.delivery_type)}</span>
+      </p>
+
+      <OrderStatus>
+        <div>
+          <h2>{t('ORDER_STATUS_TEXT', 'Order status')}</h2>
+          <p>
+            {order?.delivery_datetime_utc
+              ? parseDate(order?.delivery_datetime_utc)
+              : parseDate(order?.delivery_datetime, { utc: false })}
+          </p>
+        </div>
+        <OrderStatusSelectorWrapper>
+          <span>{getOrderState(order?.status)}</span>
+        </OrderStatusSelectorWrapper>
+      </OrderStatus>
+      {order?.place && placeSpotEnabled.includes(order?.delivery_type) && (
+        <PlaceSpotContainer>
+          <p>
+            {t('SPOT', 'Spot')}: {order?.place?.name}
+          </p>
+        </PlaceSpotContainer>
+      )}
+      <StatusBarContainer>
+        <StatusBar percentage={getOrderStatus(order?.status)?.percentage} />
+      </StatusBarContainer>
+      <AdvancedLogistic>
+        <div>
+          <p>{t('LOGISTIC', 'Logistic')}</p>
+          <p>{getLogisticTag(order?.logistic_status)}</p>
+        </div>
+        <div>
+          <p>{t('ATTEMPTS', 'Attempts')}</p>
+          <p>{order?.logistic_attemps}</p>
+        </div>
+        <div>
+          <p>{t('PRIORITY', 'Priority')}</p>
+          <p>{getPriorityTag(order?.priority)}</p>
+        </div>
+      </AdvancedLogistic>
+      {user?.level !== 2 && (
+        <>
+          <BusinessInfo>
+            <PhotoWrapper>
+              {order?.business?.logo ? (
+                <Photo bgimage={optimizeImage(order?.business?.logo, 'h_50,c_limit')} />
+              ) : (
+                <BisBusiness />
+              )}
+            </PhotoWrapper>
+            <InfoContent>
+              <div>
+                <p className='name'>{order?.business?.name}</p>
+              </div>
+              <p>{order?.business?.phone}</p>
+            </InfoContent>
+          </BusinessInfo>
+          <CutsomerDetail>
+            <CustomerInfoTable>
+              <tbody>
+                {order?.business?.email && (
+                  <tr>
+                    <td>{t('EMAIL', 'Email')}</td>
+                    <td>
+                      <a href={`mailto: ${order?.business?.email}`}>{order?.business?.email}</a>
+                    </td>
+                  </tr>
+                )}
+                {order?.business?.address && (
+                  <tr>
+                    <td>{t('CHECKOUT_FULL_ADDRESS', 'Full address')}</td>
+                    <td>
+                      <a href={`http://maps.google.com/?q=${order?.business?.address}`} rel='noopener noreferrer' target='_blank'>{order?.business?.address}</a>
+                    </td>
+                  </tr>
+                )}
+                {order?.business?.address_notes && (
+                  <tr>
+                    <td>{t('NOTES', 'Notes')}</td>
+                    <td>{order?.business?.address_notes}</td>
+                  </tr>
+                )}
+                {order?.business?.zipcode && (
+                  <tr>
+                    <td>{t('ZIPCODE', 'Zipcode')}</td>
+                    <td>{order?.business?.zipcode}</td>
+                  </tr>
+                )}
+              </tbody>
+            </CustomerInfoTable>
+          </CutsomerDetail>
+          <CustomerInfo>
+            <PhotoWrapper>
+              {order?.customer?.photo ? (
+                <Photo bgimage={optimizeImage(order?.customer?.photo, 'h_50,c_limit')} />
+              ) : (
+                <FaUserAlt />
+              )}
+            </PhotoWrapper>
+            <InfoContent>
+              <div>
+                <p className='name'>{order?.customer?.name} {order?.customer?.middle_name} {order?.customer?.lastname} {order?.customer?.second_lastname}</p>
+              </div>
+            </InfoContent>
+          </CustomerInfo>
+          <CutsomerDetail>
+            <CustomerInfoTable>
+              <tbody>
+                {order?.customer?.cellphone && (
+                  <tr>
+                    <td>{t('CELLPHONE', 'Phone / Mobile')}</td>
+                    <td>
+                      <a href={`tel:${order?.customer?.cellphone}`}>
+                        {order?.customer?.cellphone}
+                      </a>
+                    </td>
+                  </tr>
+                )}
+                {order?.customer?.email && (
+                  <tr>
+                    <td>{t('EMAIL', 'Email')}</td>
+                    <td>
+                      <a href={`mailto: ${order?.customer?.email}`}>{order?.customer?.email}</a>
+                    </td>
+                  </tr>
+                )}
+                {!!order?.customer?.address && (
+                  <tr>
+                    <td>{t('CHECKOUT_FULL_ADDRESS', 'Full address')}</td>
+                    <td>
+                      <a href={`http://maps.google.com/?q=${order?.customer?.address}`} rel='noopener noreferrer' target='_blank'>{order?.customer?.address}</a>
+                    </td>
+                  </tr>
+                )}
+                {!!order?.customer?.internal_number && (
+                  <tr>
+                    <td>{t('INTERNAL_NUMBER', 'Internal number')}</td>
+                    <td>{order?.customer?.internal_number}</td>
+                  </tr>
+                )}
+                {!!order?.customer?.address_notes && (
+                  <tr>
+                    <td>{t('NOTES', 'Notes')}</td>
+                    <td>{order?.customer?.address_notes}</td>
+                  </tr>
+                )}
+                {!!order?.customer?.zipcode && (
+                  <tr>
+                    <td>{t('ZIPCODE', 'Zipcode')}</td>
+                    <td>{order?.customer?.zipcode}</td>
+                  </tr>
+                )}
+              </tbody>
+            </CustomerInfoTable>
+          </CutsomerDetail>
+          {order?.delivery_type === 1 && (
+            <>
+              <DriverInfoContainer>
+                <DriverInfo>
+                  <PhotoWrapper>
+                    {order?.driver?.photo ? (
+                      <Photo bgimage={optimizeImage(order?.driver?.photo, 'h_50,c_limit')} />
+                    ) : (
+                      <FaUserAlt />
+                    )}
+                  </PhotoWrapper>
+                  {order.driver_id ? (
+                    <InfoContent>
+                      <div>
+                        <p>{order?.driver?.name} {order?.driver?.middle_name} {order?.driver?.lastname} {order?.driver?.second_lastname}</p>
+                      </div>
+                      <p>{t('DRIVER', 'Driver')}</p>
+                    </InfoContent>
+                  ) : (
+                    <InfoContent>
+                      <div>
+                        <p>{t('NO_DRIVER', 'No driver')}</p>
+                      </div>
+                    </InfoContent>
+                  )}
+                </DriverInfo>
+              </DriverInfoContainer>
+            </>
+          )}
+        </>
+      )}
+      <OrderProducts>
+        <h2>{t('EXPORT_SUMMARY', 'Summary')}</h2>
+        {order?.products?.length && order?.products.map((product) => (
+          <AccordionSection
+            key={product.id}
+          >
+            <ProductInfo>
+              {product?.images && (
+                <WrapperProductImage>
+                  <ProductImage bgimage={optimizeImage(product?.images, 'h_100,c_limit')} />
+                </WrapperProductImage>
+              )}
+              <ProductQuantity>
+                {product?.quantity}
+              </ProductQuantity>
+              <ContentInfo>
+                <h3>{product.name}</h3>
+              </ContentInfo>
+            </ProductInfo>
+            <AccordionContent>
+              {product.ingredients?.length > 0 && product.ingredients.some(ingredient => !ingredient.selected) && (
+                <ProductOptionsList>
+                  <p>{t('INGREDIENTS', 'Ingredients')}</p>
+                  {product.ingredients.map((ingredient) => !ingredient.selected && (
+                    <li className='ingredient' key={ingredient.id}>
+                      <span>{t('NO', 'No')} {ingredient.name}</span>
+                    </li>
+                  ))}
+                </ProductOptionsList>
+              )}
+              {product.options?.length > 0 && (
+                <ProductOptionsList>
+                  {Array.isArray(product.options) && product.options.map((option, i) => (
+                    <li key={i}>
+                      <p>{option.name}</p>
+                      <ProductOptionsList className='suboption'>
+                        {option.suboptions.map(suboption => (
+                          <React.Fragment key={suboption.id}>
+                            <li>
+                              <span>
+                                {getFormattedSubOptionName({
+                                  quantity: suboption.quantity,
+                                  name: suboption.name,
+                                  position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
+                                  price: suboption.price
+                                })}
+                              </span>
+                            </li>
+                          </React.Fragment>
+                        ))}
+                      </ProductOptionsList>
+                    </li>
+                  ))}
+                </ProductOptionsList>
+              )}
+              {product.comment && (
+                <ProductComment>
+                  <p>{t('COMMENT', 'Comment')}</p>
+                  <h3>{product.comment}</h3>
+                </ProductComment>
+              )}
+            </AccordionContent>
+          </AccordionSection>
+        ))}
+      </OrderProducts>
+      <OrderBill
+        order={order}
+      />
+    </PrintContainer>
+  )
+})

package/src/themes/callcenterOriginal/src/components/Orders/OrderToPrint/styles.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+export const PrintContainer = styled.div`
+  display: none;
+  padding: 80px 50px;
+
+  > h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  @media print {
+    display: block;
+
+    @page { size: portrait; }
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/OrdersCards/index.js

@@ -0,0 +1,283 @@
+import React, { useState, useEffect } from 'react'
+import moment from 'moment'
+import { useLanguage, useUtils, useConfig } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
+import Skeleton from 'react-loading-skeleton'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
+import { Pagination } from '../../Shared'
+
+import {
+  OrdersListContainer,
+  OrderCard,
+  OrderHeader,
+  ViewDetails,
+  InfoItemContainer,
+  WrapperImage,
+  CardContent,
+  WrapperPagination,
+  UnreadMessageCounter,
+  Timestatus,
+  CardHeading,
+  Timer
+} from './styles'
+
+export const OrdersCards = (props) => {
+  const {
+    isMessagesView,
+
+    orderList,
+    pagination,
+    getPageOrders,
+    handleOpenOrderDetail,
+    selectedOrderCard,
+    handleOrderCardClick,
+    handleUpdateDriverLocation,
+    slaSettingTime
+  } = props
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [{ parseDate, optimizeImage }] = useUtils()
+  const [, setCurrentTime] = useState()
+  const [configState] = useConfig()
+  const [allowColumns, setAllowColumns] = useState({
+    timer: true,
+    slaBar: true
+  })
+
+  const handleChangePage = (page) => {
+    getPageOrders(pagination.pageSize, page)
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(pagination.from / pageSize)
+    getPageOrders(pageSize, expectedPage)
+  }
+
+  const handleOrderClick = (e, order) => {
+    const isInvalid = e.target.closest('.view-details') || e.target.closest('.driver-selector')
+    if (isInvalid) return
+    handleOrderCardClick(order)
+  }
+
+  const getOrderStatus = (s) => {
+    const status = parseInt(s)
+    const orderStatus = [
+      { key: 0, value: t('PENDING', theme?.defaultLanguages?.PENDING || 'Pending') },
+      { key: 1, value: t('COMPLETED', theme?.defaultLanguages?.COMPLETED || 'Completed') },
+      { key: 2, value: t('REJECTED', theme?.defaultLanguages?.REJECTED || 'Rejected') },
+      { key: 3, value: t('DRIVER_IN_BUSINESS', theme?.defaultLanguages?.DRIVER_IN_BUSINESS || 'Driver in business') },
+      { key: 4, value: t('PREPARATION_COMPLETED', theme?.defaultLanguages?.PREPARATION_COMPLETED || 'Preparation Completed') },
+      { key: 5, value: t('REJECTED_BY_BUSINESS', theme?.defaultLanguages?.REJECTED_BY_BUSINESS || 'Rejected by business') },
+      { key: 6, value: t('REJECTED_BY_DRIVER', theme?.defaultLanguages?.REJECTED_BY_DRIVER || 'Rejected by Driver') },
+      { key: 7, value: t('ACCEPTED_BY_BUSINESS', theme?.defaultLanguages?.ACCEPTED_BY_BUSINESS || 'Accepted by business') },
+      { key: 8, value: t('ACCEPTED_BY_DRIVER', theme?.defaultLanguages?.ACCEPTED_BY_DRIVER || 'Accepted by driver') },
+      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_COMPLETED_BY_DRIVER || 'Pick up completed by driver') },
+      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_FAILED_BY_DRIVER || 'Pick up Failed by driver') },
+      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_COMPLETED_BY_DRIVER || 'Delivery completed by driver') },
+      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_FAILED_BY_DRIVER || 'Delivery Failed by driver') },
+      { key: 13, value: t('PREORDER', theme?.defaultLanguages?.PREORDER || 'PreOrder') },
+      { key: 14, value: t('ORDER_NOT_READY', theme?.defaultLanguages?.ORDER_NOT_READY || 'Order not ready') },
+      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER || 'Order picked up completed by customer') },
+      { key: 16, value: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_STATUS_CANCELLED_BY_CUSTOMER || 'Order cancelled by customer') },
+      { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_NOT_PICKEDUP_BY_CUSTOMER || 'Order not picked up by customer') },
+      { key: 18, value: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS || 'Driver almost arrived to business') },
+      { key: 19, value: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER || 'Driver almost arrived to customer') },
+      { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business') },
+      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business') },
+      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
+    ]
+
+    const objectStatus = orderStatus.find((o) => o.key === status)
+
+    return objectStatus && objectStatus
+  }
+
+  const getDelayMinutes = (order) => {
+    // targetMin = delivery_datetime  + eta_time - now()
+    const offset = 300
+    const cdtToutc = moment(order?.delivery_datetime).add(offset, 'minutes').format('YYYY-MM-DD HH:mm:ss')
+    const _delivery = order?.delivery_datetime_utc
+      ? parseDate(order?.delivery_datetime_utc)
+      : parseDate(cdtToutc)
+    const _eta = order?.eta_time
+    const diffTimeAsSeconds = moment(_delivery).add(_eta, 'minutes').diff(moment().utc(), 'seconds')
+    return Math.ceil(diffTimeAsSeconds / 60)
+  }
+
+  const displayDelayedTime = (order) => {
+    let tagetedMin = getDelayMinutes(order)
+    // get day, hour and minutes
+    const sign = tagetedMin >= 0 ? '' : '- '
+    tagetedMin = Math.abs(tagetedMin)
+    let day = Math.floor(tagetedMin / 1440)
+    const restMinOfTargetedMin = tagetedMin - 1440 * day
+    let restHours = Math.floor(restMinOfTargetedMin / 60)
+    let restMins = restMinOfTargetedMin - 60 * restHours
+    // make standard time format
+    day = day === 0 ? '' : day + 'day  '
+    restHours = restHours < 10 ? '0' + restHours : restHours
+    restMins = restMins < 10 ? '0' + restMins : restMins
+
+    const finalTaget = sign + day + restHours + ':' + restMins
+    return finalTaget
+  }
+
+  const getStatusClassName = (minutes) => {
+    if (isNaN(Number(minutes))) return 'in_time'
+    const delayTime = configState?.configs?.order_deadlines_delayed_time?.value
+    return minutes > 0 ? 'in_time' : Math.abs(minutes) <= delayTime ? 'at_risk' : 'delayed'
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(Date.now())
+    }, slaSettingTime)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  useEffect(() => {
+    if (orderList.loading || !selectedOrderCard) return
+    const updatedOrder = orderList?.orders.find(order => order.id === selectedOrderCard?.id)
+    if (updatedOrder) {
+      handleUpdateDriverLocation && handleUpdateDriverLocation(updatedOrder)
+    }
+  }, [orderList?.orders])
+
+  useEffect(() => {
+    const slaSettings = configState?.configs?.order_deadlines_enabled?.value === '1'
+    setAllowColumns({
+      ...allowColumns,
+      timer: slaSettings,
+      slaBar: slaSettings
+    })
+  }, [configState.loading])
+
+  return (
+    <>
+      <OrdersListContainer>
+        {orderList.loading ? (
+          [...Array(10).keys()].map(i => (
+            <OrderCard key={i}>
+              <OrderHeader>
+                <Skeleton width={100} height={30} />
+                <div>
+                  <Skeleton width={150} />
+                  <ViewDetails>
+                    <Skeleton width={100} />
+                  </ViewDetails>
+                </div>
+              </OrderHeader>
+              <CardContent>
+                <InfoItemContainer>
+                  <WrapperImage isSkeleton>
+                    <Skeleton width={45} height={45} />
+                  </WrapperImage>
+                  <div className='info'>
+                    <p><Skeleton width={100} /></p>
+                    <p><Skeleton width={100} /></p>
+                  </div>
+                </InfoItemContainer>
+                <InfoItemContainer>
+                  <WrapperImage isSkeleton>
+                    <Skeleton width={45} height={45} />
+                  </WrapperImage>
+                  <div className='info'>
+                    <p><Skeleton width={100} /></p>
+                    <p><Skeleton width={100} /></p>
+                  </div>
+                </InfoItemContainer>
+              </CardContent>
+            </OrderCard>
+          ))
+        ) : (
+          <>
+            {orderList.orders?.map(order => (
+              <OrderCard
+                key={order.id}
+                active={selectedOrderCard?.id === order.id}
+                onClick={(e) => handleOrderClick(e, order)}
+              >
+                <CardHeading>
+                  <OrderHeader>
+                    <h2>
+                      <span>{t('INVOICE_ORDER_NO', 'Order No.')} {order?.id}</span>
+                    </h2>
+                    <p>{getOrderStatus(order.status)?.value}</p>
+                    <div>
+                      <p>
+                        {parseDate(order?.delivery_datetime, { utc: false })}
+                      </p>
+                      <ViewDetails
+                        className='view-details'
+                        onClick={() => handleOpenOrderDetail(order)}
+                      >
+                        {t('VIEW_DETAILS', 'View details')}
+                      </ViewDetails>
+                    </div>
+                  </OrderHeader>
+                  {allowColumns?.timer && (
+                    <Timer>
+                      <p className='bold'>Timer</p>
+                      <p className={getStatusClassName(getDelayMinutes(order))}>{displayDelayedTime(order)}</p>
+                    </Timer>
+                  )}
+                </CardHeading>
+                {isMessagesView && order?.unread_count > 0 && (
+                  <UnreadMessageCounter>
+                    {order?.unread_count}
+                  </UnreadMessageCounter>
+                )}
+                <CardContent>
+                  <InfoItemContainer>
+                    <WrapperImage>
+                      <img src={optimizeImage(order.business?.logo || theme.images?.dummies?.businessLogo, 'h_50,c_limit')} loading='lazy' alt='' />
+                    </WrapperImage>
+                    <div className='info'>
+                      <p className='bold'>{order?.business?.name}</p>
+                      <p>{order?.business?.city?.name}</p>
+                    </div>
+                  </InfoItemContainer>
+                  <InfoItemContainer>
+                    <WrapperImage>
+                      {order?.driver?.photo ? (
+                        <img src={optimizeImage(order?.driver?.photo, 'h_50,c_limit')} loading='lazy' alt='' />
+                      ) : (
+                        <FaUserAlt />
+                      )}
+                    </WrapperImage>
+                    <div className='info'>
+                      {order?.driver ? (
+                        <>
+                          <p className='bold'>{order?.driver?.name}</p>
+                          <p>{order?.driver?.cellphone}</p>
+                        </>
+                      ) : (
+                        <p className='bold'>{t('NO_DRIVER', 'No Driver')}</p>
+                      )}
+                    </div>
+                  </InfoItemContainer>
+                </CardContent>
+                {allowColumns?.slaBar && (
+                  <Timestatus timeState={getStatusClassName(getDelayMinutes(order))} />
+                )}
+              </OrderCard>
+            ))}
+          </>
+        )}
+      </OrdersListContainer>
+      {pagination && (
+        <WrapperPagination>
+          <Pagination
+            currentPage={pagination.currentPage}
+            totalPages={pagination.totalPages}
+            handleChangePage={handleChangePage}
+            defaultPageSize={pagination.pageSize}
+            handleChangePageSize={handleChangePageSize}
+          />
+        </WrapperPagination>
+      )}
+    </>
+  )
+}