ordering-ui-admin-external 1.25.1 → 1.26.1

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

@@ -3,6 +3,7 @@ import { useLanguage, useSession, useUtils } from 'ordering-components-admin-ext
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import BisBusiness from '@meronex/icons/bi/BisBusiness'
 import { DriverSelector } from '../DriverSelector'
+import { CompanySelector } from '../CompanySelector'
 import { IconButton } from '../../../styles'
 import { Telephone, ChevronDown } from 'react-bootstrap-icons'
 import { Accordion, AccordionContext, useAccordionToggle } from 'react-bootstrap'
@@ -215,12 +216,29 @@ export const OrderContactInformation = (props) => {
       </Accordion>
       {order?.delivery_type === 1 && !isServiceOrder && (
         <>
+        {!order?.driver_id && (
+          <DriverSelectorContainer>
+            <p>{t('DRIVER_COMPANY', 'Driver company')}</p>
+            <CompanySelector
+              small
+              isPhoneView
+              defaultValue={order?.driver_company_id ?? 'default'}
+              order={order}
+              isTourOpen={isTourOpen}
+              setCurrentTourStep={setCurrentTourStep}
+              handleOpenMessages={handleOpenMessages}
+              isOrderDrivers
+              orderId={order?.id}
+            />
+          </DriverSelectorContainer>
+        )}
+        {!order?.driver_company_id && (
           <DriverSelectorContainer>
             <p>{t('DRIVER_ASSIGN', 'Driver assign')}</p>
             <DriverSelector
               small
               isPhoneView
-              defaultValue={order?.driver_id ? order.driver_id : 'default'}
+              defaultValue={order?.driver_id ?? 'default'}
               order={order}
               isTourOpen={isTourOpen}
               setCurrentTourStep={setCurrentTourStep}
@@ -229,6 +247,7 @@ export const OrderContactInformation = (props) => {
               orderId={order?.id}
             />
           </DriverSelectorContainer>
+        )}
           <DriverInfoContainer>
             <DriverInfo>
               <PhotoWrapper>

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

@@ -15,7 +15,7 @@ import { NotFoundSource, Modal } from '../../Shared'
 import { IconButton } from '../../../styles'
 import { OrderToPrint } from '../OrderToPrint'
 import { OrderToPrintTicket } from '../OrderToPrintTicket'
-import { getOrderStatuPickUp, getOrderStatus } from '../../../utils'
+import { getOrderStatuPickUp, getOrderStatus, getCurrenySymbol } from '../../../utils'
 
 import {
   Container,
@@ -337,7 +337,7 @@ const OrderDetailsUI = (props) => {
               <p>
                 {t('SPOT', 'Spot')}: {order?.place?.name}
               </p>
-            </PlaceSpotContainer> 
+            </PlaceSpotContainer>
           )}
           <StatusBarContainer>
             <StatusBar percentage={progressBarObjt(order?.status)?.percentage} />
@@ -382,7 +382,7 @@ const OrderDetailsUI = (props) => {
                 <ProductItemAccordion
                   key={product.id}
                   product={product}
-                  currency={order?.currency}
+                  currency={getCurrenySymbol(order?.currency)}
                 />
               ))}
             </OrderProducts>
@@ -518,11 +518,11 @@ const OrderDetailsUI = (props) => {
         />
       )}
       {order && Object.keys(order).length > 0 && !loading && (
-          <OrderToPrintTicket
-            ref={printTicketRef}
-            order={order}
-            getOrderStatus={progressBarObjt}
-          />
+        <OrderToPrintTicket
+          ref={printTicketRef}
+          order={order}
+          getOrderStatus={progressBarObjt}
+        />
       )}
     </Container>
   )

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

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 
 export const SubFilterContainer = styled.div`
-  padding: 20px 0;
+  padding: 15px 0;
 
   button {
     ${props => props.theme?.rtl ? css`

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

@@ -4,6 +4,7 @@ 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 { getCurrenySymbol } from '../../../utils'
 
 import {
   OrderStatus,
@@ -81,7 +82,7 @@ export const OrderToPrint = forwardRef((props, ref) => {
   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}`
+      return price > 0 ? `${name} ${pos} ${parsePrice(quantity * price, { currency: getCurrenySymbol(order?.currency) })}` : `${name} ${pos}`
     } else {
       return 'No'
     }

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

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import { verifyDecimals } from '../../../utils'
-import { useUtils, useLanguage, useConfig } from 'ordering-components-admin-external';
+import { useUtils, useLanguage, useConfig } from 'ordering-components-admin-external'
 import { PrintContainer, PrintTextContainer, ProductComments, ProdcutCommentsContainer, Products, InfoContainer, InsideInfo2, InsideInfo, PrintProductsContainer, PrintProducts } from './styles'
 
 export const OrderToPrintTicket = forwardRef((props, ref) => {
@@ -10,7 +10,7 @@ export const OrderToPrintTicket = forwardRef((props, ref) => {
   } = props
 
   const [, t] = useLanguage()
-  const [{ configs }] = useConfig();
+  const [{ configs }] = useConfig()
   const [{ parseDate, parsePrice, parseNumber }] = useUtils()
 
   const deliveryStatus = {
@@ -18,7 +18,7 @@ export const OrderToPrintTicket = forwardRef((props, ref) => {
     2: t('PICK_UP', 'Pick up'),
     3: t('EAT_IN', 'Eat In'),
     4: t('CURBSIDE', 'Curbside'),
-    5: t('DRIVER_THRU', 'Driver thru'),
+    5: t('DRIVER_THRU', 'Driver thru')
   }
 
   const getProductPrice = (product) => {
@@ -39,14 +39,14 @@ export const OrderToPrintTicket = forwardRef((props, ref) => {
 
   const getFormattedSubOptionName = ({ quantity, name, position, price }) => {
     if (name !== 'No') {
-      const pos = position && position !== 'whole' ? `(${t(position.toUpperCase(), position)})` : '';
+      const pos = position && position !== 'whole' ? `(${t(position.toUpperCase(), position)})` : ''
       return pos
         ? `${quantity} x ${name} ${pos} + ${parsePrice(price)}`
-        : `${quantity} x ${name} + ${parsePrice(price)}`;
+        : `${quantity} x ${name} + ${parsePrice(price)}`
     } else {
-      return 'No';
+      return 'No'
     }
-  };
+  }
 
   const getSuboptions = (suboptions) => {
     const array = []
@@ -60,19 +60,18 @@ export const OrderToPrintTicket = forwardRef((props, ref) => {
   }
 
   const getOptions = (options, productComment = '') => {
-    const array = [];
+    const array = []
 
     options?.length &&
-      options?.map((option) => {
-        const string =
-          `${option.name} ${getSuboptions(option.suboptions)}`;
-
-        array.push(string)
-      })
-      
-      if (productComment) {
-        array.push(`${t('COMMENT', 'Comment')}${productComment}`)
-      }
+    options?.map((option) => {
+      const string =
+        `${option.name} ${getSuboptions(option.suboptions)}`
+      array.push(string)
+    })
+
+    if (productComment) {
+      array.push(`${t('COMMENT', 'Comment')}${productComment}`)
+    }
 
     return array
   }
@@ -80,185 +79,173 @@ export const OrderToPrintTicket = forwardRef((props, ref) => {
   const percentTip =
   parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
   !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-  verifyDecimals(order?.summary?.driver_tip, parseNumber);
+  verifyDecimals(order?.summary?.driver_tip, parseNumber)
 
   const customerName = `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''}`?.replace('  ', ' ')?.trim() ?? ''
 
-    return (
-      <PrintContainer ref={ref}>
-        <h1>{t('ORDER_NO', 'Order No.')} {order.id}</h1>
-        <PrintTextContainer>
-          {getOrderStatus(order?.status)?.value}
-          <br />
-          {t('DELIVERY_TYPE', 'Delivery Type')}: {deliveryStatus[order?.delivery_type]}
-          <br />
-          {t('DELIVERY_DATE', 'Delivery Date')}: {order?.delivery_datetime_utc
-            ? parseDate(order?.delivery_datetime_utc)
-            : parseDate(order?.delivery_datetime, { utc: false })
-          }
-          <br />
-          {t('PAYMENT_METHOD')}: {order?.paymethod?.name}
-        </PrintTextContainer>
-
-        <h1>{t('CUSTOMER_DETAILS', 'Customer details')}</h1>
-        <PrintTextContainer>
-          {t('FULL_NAME', 'Full Name')}: {customerName}
-          <br/>
-          {t('EMAIL', 'Email')}: {order?.customer?.email}
-          <br />
-          {t('MOBILE_PHONE', 'Mobile Phone')}: {order?.customer?.cellphone}
-          <br />
-          {!!order?.customer?.phone && (
-            `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone}`)}
-          {t('FULL_ADDRESS', 'Full Addres')}: {order?.customer?.address}
-          {!!order?.customer?.internal_number && (
-            `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number}`)}
-            <br />
-          {!!order?.customer.zipcode && (
-          `${t('ZIPCODE', 'Zipcode')}: ${order?.customer.zipcode}`
-          )}
-        </PrintTextContainer>
-
-        <h1>{t('BUSINESS_DETAILS', 'Business details')}</h1>
-        <PrintTextContainer>
-          {order?.business?.name}
-          <br />
-          {order?.business?.email}
-          <br/>
-          {!!order?.business?.cellphone && (
-            <>
+  return (
+    <PrintContainer ref={ref}>
+      <h1>{t('ORDER_NO', 'Order No.')} {order.id}</h1>
+      <PrintTextContainer>
+        {getOrderStatus(order?.status)?.value}
+        <br />
+        {t('DELIVERY_TYPE', 'Delivery Type')}: {deliveryStatus[order?.delivery_type]}
+        <br />
+        {t('DELIVERY_DATE', 'Delivery Date')}: {order?.delivery_datetime_utc
+          ? parseDate(order?.delivery_datetime_utc)
+          : parseDate(order?.delivery_datetime, { utc: false })}
+        <br />
+        {t('PAYMENT_METHOD')}: {order?.paymethod?.name}
+      </PrintTextContainer>
+
+      <h1>{t('CUSTOMER_DETAILS', 'Customer details')}</h1>
+      <PrintTextContainer>
+        {t('FULL_NAME', 'Full Name')}: {customerName}
+        <br />
+        {t('EMAIL', 'Email')}: {order?.customer?.email}
+        <br />
+        {t('MOBILE_PHONE', 'Mobile Phone')}: {order?.customer?.cellphone}
+        <br />
+        {!!order?.customer?.phone && (
+          `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone}`)}
+        {t('FULL_ADDRESS', 'Full Addres')}: {order?.customer?.address}
+        {!!order?.customer?.internal_number && (
+          `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number}`)}
+        <br />
+        {!!order?.customer.zipcode && (
+        `${t('ZIPCODE', 'Zipcode')}: ${order?.customer.zipcode}`
+        )}
+      </PrintTextContainer>
+
+      <h1>{t('BUSINESS_DETAILS', 'Business details')}</h1>
+      <PrintTextContainer>
+        {order?.business?.name}
+        <br />
+        {order?.business?.email}
+        <br />
+        {!!order?.business?.cellphone && (
+          <>
             {`${t('BUSINESS_PHONE', 'Business cellphone')}: ${order?.business?.cellphone}`}
-              <br/>
-            </>
-          )}
-          {!!order?.business?.phone && (
-            <>
+            <br />
+          </>
+        )}
+        {!!order?.business?.phone && (
+          <>
             {`${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone}`}
-              <br/>
-            </>
-          )}
-          {t('ADDRESS', 'Address')}: {order?.business?.address}
-          <br/>
-          {!!order?.business?.address_notes && (
-            <>
+            <br />
+          </>
+        )}
+        {t('ADDRESS', 'Address')}: {order?.business?.address}
+        <br />
+        {!!order?.business?.address_notes && (
+          <>
             {`${t('SPECIAL_ADDRESS', 'Special Address')}: ${order?.business?.address_notes}`}
-            <br/>
+            <br />
           </>
-          )}
-        </PrintTextContainer>
-        <h1>{t('ORDER_DETAILS', 'Order Details')}</h1>
-        <br/>
-        <PrintProductsContainer>
-          {order?.products?.length &&
-            order?.products?.map((product, i) =>
-              <PrintProducts key={i}>
-                <Products>
-                  <InsideInfo>
+        )}
+      </PrintTextContainer>
+      <h1>{t('ORDER_DETAILS', 'Order Details')}</h1>
+      <br />
+      <PrintProductsContainer>
+        {order?.products?.length &&
+          order?.products?.map((product, i) =>
+            <PrintProducts key={i}>
+              <Products>
+                <InsideInfo>
                   {`${product?.quantity}x ${product?.name}`}
-                  </InsideInfo>
-                  <InsideInfo2>
+                </InsideInfo>
+                <InsideInfo2>
                   {parsePrice(product?.total ?? getProductPrice(product))}
-                  </InsideInfo2>
-                </Products>
-                <ProdcutCommentsContainer>
-                    {getOptions(product?.options, product?.comment)?.map(option => (
-                  <ProductComments>
+                </InsideInfo2>
+              </Products>
+              <ProdcutCommentsContainer>
+                {getOptions(product?.options, product?.comment)?.map((option, i) => (
+                  <ProductComments key={i}>
                     {option}
                   </ProductComments>
                 ))}
-                </ProdcutCommentsContainer>
-              </PrintProducts>
-            )}
-          </PrintProductsContainer>
-          <br/>
-        <InfoContainer>
-            <InsideInfo>
-              {t('SUBTOTAL', 'Subtotal')}
-            </InsideInfo>
-            <InsideInfo2>
-              {parsePrice(
-              order?.tax_type === 1
-                ? order?.summary?.subtotal + order?.summary?.tax ?? 0
-                : order?.summary?.subtotal ?? 0,
-              )}
-            </InsideInfo2>
-        </InfoContainer>
-        <InfoContainer>
-            {order?.summary?.discount > 0
-            ? order?.offer_type === 1
-              ? <InsideInfo>
-                      {t('DISCOUNT', 'Discount')} ({verifyDecimals(order?.offer_rate,parsePrice,)}%)
-                    </InsideInfo>
-              : <InsideInfo> {t(
-                'DISCOUNT',
-                'Discount',
-              )}
-                    </InsideInfo>
-            : ''
-          }
-          {order?.summary?.discount > 0
-              ? <InsideInfo2>- {parsePrice(
-                order?.summary?.discount,
-              )}
-                    </InsideInfo2>
-              : ''
-            }
-        </InfoContainer>
+              </ProdcutCommentsContainer>
+            </PrintProducts>
+          )}
+      </PrintProductsContainer>
+      <br />
+      <InfoContainer>
+        <InsideInfo>
+          {t('SUBTOTAL', 'Subtotal')}
+        </InsideInfo>
+        <InsideInfo2>
+          {parsePrice(
+          order?.tax_type === 1
+            ? order?.summary?.subtotal + order?.summary?.tax ?? 0
+            : order?.summary?.subtotal ?? 0
+          )}
+        </InsideInfo2>
+      </InfoContainer>
+      <InfoContainer>
+        {order?.summary?.discount > 0
+          ? order?.offer_type === 1
+            ? <InsideInfo>{t('DISCOUNT', 'Discount')} ({verifyDecimals(order?.offer_rate, parsePrice)}%)</InsideInfo>
+            : <InsideInfo> {t('DISCOUNT', 'Discount')}</InsideInfo>
+          : ''}
+        {order?.summary?.discount > 0
+          ? <InsideInfo2>- {parsePrice(order?.summary?.discount)}</InsideInfo2>
+          : ''}
+      </InfoContainer>
 
       {order?.tax_type !== 1 && (
         <>
-        <InfoContainer>
-          <InsideInfo>
-          {t('TAX', 'Tax')}
-          {' '}
-          {`(${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%)`}
-          </InsideInfo>
-          <InsideInfo2>
-          {parsePrice(order?.summary?.tax ?? 0)}
-          </InsideInfo2>
-        </InfoContainer>
-        </>
-      )}
-
-        {order?.summary?.delivery_price > 0 && (
-         <InfoContainer>
-          <InsideInfo>
-            {t('DELIVERY_FEE','Delivery Fee',)}
+          <InfoContainer>
+            <InsideInfo>
+              {t('TAX', 'Tax')}
+              {' '}
+              {`(${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%)`}
             </InsideInfo>
-          <InsideInfo2>
-            {parsePrice(order?.summary?.delivery_price)}
+            <InsideInfo2>
+              {parsePrice(order?.summary?.tax ?? 0)}
             </InsideInfo2>
           </InfoContainer>
-        )}
-
-        <InfoContainer>
-          <InsideInfo>
-            {t('DRIVER_TIP', 'Driver tip')}
-            {percentTip ? `(${percentTip}%)` : ''}
-          </InsideInfo>
-          <InsideInfo2>
-            {parsePrice(order?.summary?.driver_tip ?? 0)}
-          </InsideInfo2>
-        </InfoContainer>
+        </>
+      )}
 
+      {order?.summary?.delivery_price > 0 && (
         <InfoContainer>
           <InsideInfo>
-            {t('SERVICE_FEE', 'Service Fee')}
-           ({verifyDecimals(order?.summary?.service_fee, parseNumber)}%)
+            {t('DELIVERY_FEE', 'Delivery Fee')}
           </InsideInfo>
           <InsideInfo2>
-            {parsePrice(order?.summary?.service_fee ?? 0)}
+            {parsePrice(order?.summary?.delivery_price)}
           </InsideInfo2>
         </InfoContainer>
+      )}
 
-        <InfoContainer>
-          <InsideInfo> 
-            {t('TOTAL', 'Total')}
-          </InsideInfo>
-          <InsideInfo2>
-            {parsePrice(order?.summary?.total ?? 0)}
-          </InsideInfo2>
-        </InfoContainer>
+      <InfoContainer>
+        <InsideInfo>
+          {t('DRIVER_TIP', 'Driver tip')}
+          {percentTip ? `(${percentTip}%)` : ''}
+        </InsideInfo>
+        <InsideInfo2>
+          {parsePrice(order?.summary?.driver_tip ?? 0)}
+        </InsideInfo2>
+      </InfoContainer>
+
+      <InfoContainer>
+        <InsideInfo>
+          {t('SERVICE_FEE', 'Service Fee')}
+          ({verifyDecimals(order?.summary?.service_fee, parseNumber)}%)
+        </InsideInfo>
+        <InsideInfo2>
+          {parsePrice(order?.summary?.service_fee ?? 0)}
+        </InsideInfo2>
+      </InfoContainer>
+
+      <InfoContainer>
+        <InsideInfo>
+          {t('TOTAL', 'Total')}
+        </InsideInfo>
+        <InsideInfo2>
+          {parsePrice(order?.summary?.total ?? 0)}
+        </InsideInfo2>
+      </InfoContainer>
     </PrintContainer>
-    )
-  });
+  )
+})

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

@@ -11,6 +11,7 @@ import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { GoogleMapsApiKeySettingButton } from '../GoogleMapsApiKeySettingButton'
+import { WebsocketStatus } from '../WebsocketStatus'
 
 import {
   OrderContentHeaderContainer,
@@ -104,6 +105,7 @@ export const OrdersContentHeader = (props) => {
           </HeaderSection>
         )}
         <TopRightSection>
+          <WebsocketStatus />
           {isShowMapsKeySettingButton && (
             <GoogleMapsApiKeySettingButton />
           )}

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

@@ -13,6 +13,7 @@ import {
 
 export const OrdersListing = (props) => {
   const {
+    hidePhoto,
     isSelectedOrders,
     orderList,
     selectedOrderIds,
@@ -111,6 +112,7 @@ export const OrdersListing = (props) => {
             >
               {orderListView === 'table' ? (
                 <OrdersTable
+                  hidePhoto={hidePhoto}
                   setSelectedOrderIds={setSelectedOrderIds}
                   isSelectedOrders={isSelectedOrders}
                   orderList={orderList}

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

@@ -190,8 +190,8 @@ const OrdersManagerUI = (props) => {
           changeOrderStatus={handleOrdersStatusGroupFilter}
           numberOfOrdersByStatus={numberOfOrdersByStatus}
         />
-        <OrderSubFilterControls>
-          <OrderStatusSubFilterWrapper>
+        <OrderSubFilterControls isColumn={selectedOrderIds?.length}>
+          <OrderStatusSubFilterWrapper isColumn={selectedOrderIds?.length}>
             <OrderStatusSubFilter
               ordersStatusGroup={ordersStatusGroup}
               selectedSubOrderStatus={selectedSubOrderStatus}