ordering-ui-admin-external 1.9.0 → 1.11.0

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

@@ -23,7 +23,7 @@ export const OrderBill = (props) => {
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const SPOT_DICTIONARY = {
     3: t('SPOT_NUMBER_EAT_IN', 'Table number'),
-    4: t('SPOT_NUMBER_CURBSIDE', 'Spor number'),
+    4: t('SPOT_NUMBER_CURBSIDE', 'Spot number'),
     5: t('SPOT_NUMBER_DRIVE_THRU', 'Drive thru lane')
   }
 
@@ -106,7 +106,7 @@ export const OrderBill = (props) => {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 1)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replaceAll(' ', '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
@@ -153,7 +153,7 @@ export const OrderBill = (props) => {
             order?.taxes?.length > 0 && order?.taxes?.filter(tax => tax?.type === 2 && tax?.rate !== 0).map(tax => (
               <tr key={tax?.id}>
                 <td>
-                  {tax?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(tax?.name?.toUpperCase()?.replaceAll(' ', '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   <span>{`(${verifyDecimals(tax?.rate, parseNumber)}%)`}</span>
                 </td>
                 <td>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency })}</td>
@@ -164,7 +164,7 @@ export const OrderBill = (props) => {
             order?.fees?.length > 0 && order?.fees?.filter(fee => !(fee?.fixed === 0 && fee?.percentage === 0))?.map(fee => (
               <tr key={fee.id}>
                 <td>
-                  {fee?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(fee?.name?.toUpperCase()?.replaceAll(' ', '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%)
                 </td>
                 <td>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency })}</td>
@@ -175,7 +175,7 @@ export const OrderBill = (props) => {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 3)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replaceAll(' ', '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
@@ -196,7 +196,7 @@ export const OrderBill = (props) => {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 2)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replaceAll(' ', '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
@@ -244,7 +244,7 @@ export const OrderBill = (props) => {
                 <td>
                   {event?.wallet_event
                     ? walletName[event?.wallet_event?.wallet?.type]?.name
-                    : event?.paymethod?.name}
+                    : t(event?.paymethod?.name?.toUpperCase()?.replaceAll(' ', '_'), event?.paymethod?.name)}
                 </td>
                 <td>-{parsePrice(event?.amount, { currency: order?.currency })}</td>
               </tr>
@@ -252,20 +252,18 @@ export const OrderBill = (props) => {
           </tbody>
         </table>
       )}
-      {order?.delivery_option && (
-        <table className='delivery_option'>
-          <thead>
-            <tr>
-              <th colSpan='2'>{t('DELIVERY_PREFERENCE', 'Delivery Preference')}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>{order?.delivery_option?.name}</td>
-            </tr>
-          </tbody>
-        </table>
-      )}
+      <table className='delivery_option'>
+        <thead>
+          <tr>
+            <th colSpan='2'>{t('DELIVERY_PREFERENCE', 'Delivery Preference')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{order?.delivery_option ? order?.delivery_option?.name : t('EITHER_WAY', 'Either way')}</td>
+          </tr>
+        </tbody>
+      </table>
       {order?.comment && (
         <table className='comments'>
           <tbody>
@@ -296,7 +294,7 @@ export const OrderBill = (props) => {
           <tbody>
             <tr>
               <td>{t('ORDER_VEHICLE_TYPE', 'Type')}</td>
-              <td>{order?.vehicle?.type}</td>
+              <td>{t(order?.vehicle?.type?.toUpperCase(), order?.vehicle?.type)}</td>
             </tr>
             <tr>
               <td>{t('ORDER_VEHICLE_MODEL', 'Model')}</td>

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

@@ -75,6 +75,7 @@ export const OrderDashboardSLASettingUI = (props) => {
   const onSubmit = (data) => {
     if (data && Object.keys(data).length > 0) {
       handleClickUpdate()
+      setSettingOpen(false)
     }
   }
 

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

@@ -30,7 +30,8 @@ import {
   PlaceSpotContainer,
   RejectReasonsContainer,
   RejectReasonWrapper,
-  RejectReasonsList
+  RejectReasonsList,
+  DetailBottom
 } from './styles'
 
 const OrderDetailsUI = (props) => {
@@ -326,6 +327,7 @@ const OrderDetailsUI = (props) => {
               <p>
                 {parseDate(order?.delivery_datetime, { utc: false })}
               </p>
+              <p>{order?.eta_time} min</p>
             </div>
             <OrderStatusSelectorWrapper>
               <OrderStatusTypeSelector
@@ -398,6 +400,7 @@ const OrderDetailsUI = (props) => {
               handleRefundOrder={handleRefundOrder}
             />
           </div>
+          <DetailBottom />
         </OrderDetailsContent>
       )}
 

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

@@ -248,3 +248,7 @@ export const RejectReasonWrapper = styled.div`
   background-color: ${props => lighten(0.4, props.theme.colors.danger)};
   color: ${props => props.theme.colors.danger};
 `
+
+export const DetailBottom = styled.div`
+  height: 20px;
+`

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

@@ -5,6 +5,7 @@ import { useTheme } from 'styled-components'
 import Skeleton from 'react-loading-skeleton'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import { Pagination } from '../../Shared'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
   OrdersListContainer,
@@ -32,10 +33,12 @@ export const OrdersCards = (props) => {
     selectedOrderCard,
     handleOrderCardClick,
     handleUpdateDriverLocation,
-    slaSettingTime
+    slaSettingTime,
+    isDelivery
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
+  const { width } = useWindowSize()
   const [{ parseDate, optimizeImage }] = useUtils()
   const [, setCurrentTime] = useState()
   const [configState] = useConfig()
@@ -57,6 +60,8 @@ export const OrdersCards = (props) => {
     const isInvalid = e.target.closest('.view-details') || e.target.closest('.driver-selector')
     if (isInvalid) return
     handleOrderCardClick(order)
+    const element = document.getElementById('deliveryDashboard')
+    if ((isDelivery || isMessagesView) && width < 993 && element) element.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
 
   const getOrderStatus = (s) => {

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

@@ -46,7 +46,8 @@ export const OrdersListing = (props) => {
 
     allowColumns,
     setAllowColumns,
-    handleDrop
+    handleDrop,
+    isDelivery
   } = props
 
   const theme = useTheme()
@@ -146,6 +147,7 @@ export const OrdersListing = (props) => {
                   handleOrderCardClick={handleOrderCardClick}
                   handleUpdateDriverLocation={handleUpdateDriverLocation}
                   slaSettingTime={slaSettingTime}
+                  isDelivery={isDelivery}
                 />
               )}
             </WrapperOrderListContent>

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

@@ -103,6 +103,10 @@ export const OrdersTable = (props) => {
       value: 'timer',
       content: t('SLA_TIMER', 'SLA’s timer')
     },
+    {
+      value: 'eta',
+      content: t('ETA', 'ETA')
+    },
     {
       value: 'total',
       content: t('EXPORT_TOTAL', 'Total')
@@ -309,65 +313,110 @@ export const OrdersTable = (props) => {
           {!isSelectedOrders && (
             <thead>
               <tr>
-                {allowColumns && Object.keys(allowColumns).filter(col => allowColumns[col]?.visable && allowColumns[col]?.order !== 0)
-                  .sort((col1, col2) => allowColumns[col1]?.order - allowColumns[col2]?.order)
-                  .map((column, i) => {
-                    if (column === 'slaBar') {
-                      return
-                    }
-                    if (column === 'orderNumber') {
-                      return (
-                        <th
-                          className={!(allowColumns?.orderNumber?.visable || allowColumns?.dateTime?.visable) ? 'orderNo small' : 'orderNo'}
-                          key={`noDragTh-${i}`}
-                          colSpan={allowColumns?.slaBar?.visable ? 2 : 1}
-                        >
-                          <CheckBox
-                            isChecked={!orderList.loading && isAllChecked}
-                            onClick={() => handleSelecteAllOrder()}
-                            className='orderCheckBox'
+                {allowColumns && (Object.keys(allowColumns).filter(col => allowColumns[col]?.visable && allowColumns[col]?.order !== 0).length === 0 ?
+                  (
+                    <th className='orderPrice' key={`noDragTh-${i}`}>
+                      <ColumnAllowSettingPopover
+                        allowColumns={allowColumns}
+                        optionsDefault={optionsDefault}
+                        handleChangeAllowColumns={handleChangeAllowColumns}
+                        isOrder
+                      />
+                    </th>
+                  ) : (
+                    Object.keys(allowColumns).filter(col => allowColumns[col]?.visable && allowColumns[col]?.order !== 0)
+                      .sort((col1, col2) => allowColumns[col1]?.order - allowColumns[col2]?.order)
+                      .map((column, i, array) => {
+                        if (column === 'slaBar') {
+                          return
+                        }
+                        if (column === 'orderNumber') {
+                          return (
+                            <React.Fragment key={i}>
+                              <th
+                                className={!(allowColumns?.orderNumber?.visable || allowColumns?.dateTime?.visable) ? 'orderNo small' : 'orderNo'}
+                                key={`noDragTh-${i}`}
+                                colSpan={allowColumns?.slaBar?.visable ? 2 : 1}
+                              >
+                                <CheckBox
+                                  isChecked={!orderList.loading && isAllChecked}
+                                  onClick={() => handleSelecteAllOrder()}
+                                  className='orderCheckBox'
+                                >
+                                  {(!orderList.loading && isAllChecked) ? (
+                                    <RiCheckboxFill />
+                                  ) : (
+                                    <RiCheckboxBlankLine />
+                                  )}
+                                </CheckBox>
+                                {t('ORDER', 'Order')}
+                              </th>
+                              {column === [...array].pop() && (
+                                <th className='orderPrice' key={`noDragTh-${i}`}>
+                                  <ColumnAllowSettingPopover
+                                    allowColumns={allowColumns}
+                                    optionsDefault={optionsDefault}
+                                    handleChangeAllowColumns={handleChangeAllowColumns}
+                                    isOrder
+                                  />
+                                </th>
+                              )}
+                            </React.Fragment>
+                          )
+                        }
+                        if (column === 'total' || (column !== 'total' && column === [...array].pop())) {
+                          return (
+                            <React.Fragment key={i}>
+                              {(column !== 'total' && column === [...array].pop()) && (
+                                <DragTh
+                                  key={`dragTh-${i}`}
+                                  onDragOver={e => handleDragOver?.(e, column)}
+                                  onDrop={e => handleDrop(e, column)}
+                                  onDragEnd={e => handleDragEnd(e)}
+                                  colSpan={allowColumns[column]?.colSpan ?? 1}
+                                  className={allowColumns[column]?.className}
+                                  selectedDragOver={column === dragOverd}
+                                >
+                                  <div draggable onDragStart={e => handleDragStart?.(e, column)}>
+                                    <img
+                                      src={theme.images.icons?.sixDots}
+                                      alt='six dots'
+                                    />
+                                    <span>{allowColumns[column]?.title}</span>
+                                  </div>
+                                </DragTh>
+                              )}
+                              <th className='orderPrice' key={`noDragTh-${i}`}>
+                                <ColumnAllowSettingPopover
+                                  allowColumns={allowColumns}
+                                  optionsDefault={optionsDefault}
+                                  handleChangeAllowColumns={handleChangeAllowColumns}
+                                  isOrder
+                                />
+                              </th>
+                            </React.Fragment>
+                          )
+                        }
+                        return (column !== 'timer' || (column === 'timer' && (groupStatus === 'pending' || groupStatus === 'inProgress'))) && (
+                          <DragTh
+                            key={`dragTh-${i}`}
+                            onDragOver={e => handleDragOver?.(e, column)}
+                            onDrop={e => handleDrop(e, column)}
+                            onDragEnd={e => handleDragEnd(e)}
+                            colSpan={allowColumns[column]?.colSpan ?? 1}
+                            className={allowColumns[column]?.className}
+                            selectedDragOver={column === dragOverd}
                           >
-                            {(!orderList.loading && isAllChecked) ? (
-                              <RiCheckboxFill />
-                            ) : (
-                              <RiCheckboxBlankLine />
-                            )}
-                          </CheckBox>
-                          {t('ORDER', 'Order')}
-                        </th>
-                      )
-                    }
-                    if (column === 'total') {
-                      return (
-                        <th className='orderPrice' key={`noDragTh-${i}`}>
-                          <ColumnAllowSettingPopover
-                            allowColumns={allowColumns}
-                            optionsDefault={optionsDefault}
-                            handleChangeAllowColumns={handleChangeAllowColumns}
-                            isOrder
-                          />
-                        </th>
-                      )
-                    }
-                    return (column !== 'timer' || (column === 'timer' && (groupStatus === 'pending' || groupStatus === 'inProgress'))) && (
-                      <DragTh
-                        key={`dragTh-${i}`}
-                        onDragOver={e => handleDragOver?.(e, column)}
-                        onDrop={e => handleDrop(e, column)}
-                        onDragEnd={e => handleDragEnd(e)}
-                        colSpan={allowColumns[column]?.colSpan ?? 1}
-                        className={allowColumns[column]?.className}
-                        selectedDragOver={column === dragOverd}
-                      >
-                        <div draggable onDragStart={e => handleDragStart?.(e, column)}>
-                          <img
-                            src={theme.images.icons?.sixDots}
-                            alt='six dots'
-                          />
-                          <span>{allowColumns[column]?.title}</span>
-                        </div>
-                      </DragTh>)
-                  })}
+                            <div draggable onDragStart={e => handleDragStart?.(e, column)}>
+                              <img
+                                src={theme.images.icons?.sixDots}
+                                alt='six dots'
+                              />
+                              <span>{allowColumns[column]?.title}</span>
+                            </div>
+                          </DragTh>)
+                      })
+                  ))}
               </tr>
             </thead>
           )}
@@ -659,6 +708,15 @@ export const OrdersTable = (props) => {
                           </td>
                         )
                       }
+                      if (column === 'eta') {
+                        return (
+                          <td className='eta' key={`eta${i}-${index}`}>
+                            <div className='info'>
+                              <p className='bold'>{order?.eta_time} min</p>
+                            </div>
+                          </td>
+                        )
+                      }
                       if (column === 'total') {
                         return (
                           <td className='orderPrice' key={`total${i}-${index}`}>

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

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react'
 import TiPencil from '@meronex/icons/ti/TiPencil'
 import IosArrowUp from '@meronex/icons/ios/IosArrowUp'
 import VscTrash from '@meronex/icons/vsc/VscTrash'
-import { useUtils, useLanguage, useOrder } from 'ordering-components-admin-external'
+import { useUtils, useLanguage, useOrder, useConfig } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
@@ -23,7 +23,9 @@ import {
   ProductNotAvailable,
   ProductSelect,
   ProductOptionsList,
-  ProductQuantity
+  ProductQuantity,
+  ScheduleInfoWrapper,
+  ScheduleInfo
 } from './styles'
 
 export const ProductItemAccordion = (props) => {
@@ -39,7 +41,8 @@ export const ProductItemAccordion = (props) => {
   } = props
   const [, t] = useLanguage()
   const [orderState] = useOrder()
-  const [{ parsePrice, optimizeImage }] = useUtils()
+  const [{ parsePrice, optimizeImage, parseDate }] = useUtils()
+  const [{ configs }] = useConfig()
   const windowSize = useWindowSize()
 
   const [setActive, setActiveState] = useState('active')
@@ -127,49 +130,64 @@ export const ProductItemAccordion = (props) => {
               <ProductImage bgimage={optimizeImage(product?.images, 'h_100,c_limit')} />
             </WrapperProductImage>
           )}
-          {isCartProduct ? (
-            <ProductSelect
-              ref={productSelect}
-              value={product.quantity}
-              onChange={(e) => handleChangeQuantity(Number(e.target.value))}
-            >
-              {[...Array(getProductMax(product) + 1)].map((v, i) => (
-                <option
-                  key={i}
-                  value={i}
-                  disabled={offsetDisabled(product) < i && i !== 0}
-                >
-                  {i === 0 ? t('REMOVE', 'Remove') : i}
-                </option>
-              ))}
-            </ProductSelect>
+          {product?.calendar_event ? (
+            <ScheduleInfoWrapper>
+              <h3>{product.name}</h3>
+              <ScheduleInfo>
+                <span>
+                  {parseDate(product?.calendar_event?.start, { outputFormat: (configs?.format_time?.value === '12') ? 'hh:mm a' : 'HH:mm' })}
+                  {' '}-{' '}
+                  {parseDate(product?.calendar_event?.end, { outputFormat: (configs?.format_time?.value === '12') ? 'hh:mm a' : 'HH:mm' })}
+                </span>
+              </ScheduleInfo>
+            </ScheduleInfoWrapper>
           ) : (
-            <ProductQuantity>
-              {product?.quantity}
-            </ProductQuantity>
-          )}
-          <ContentInfo>
-            <h3>{product.name}</h3>
-            {windowSize.width <= 410 && (
-              <span>
-                <p>{parsePrice(getProductPrice(product), { currencyPosition: 'left', ...(currency && { currency }) })}</p>
-                {isCartProduct && (
-                  <div>
-                    {onEditProduct && (
-                      <span ref={productActionsEdit}>
-                        <TiPencil color='#F2BB40' onClick={() => onEditProduct(product)} />
-                      </span>
-                    )}
-                    {onDeleteProduct && (
-                      <span ref={productActionsDelete}>
-                        <VscTrash color='#D81212' onClick={() => onDeleteProduct(product)} />
-                      </span>
+            <>
+              {isCartProduct ? (
+                <ProductSelect
+                  ref={productSelect}
+                  value={product.quantity}
+                  onChange={(e) => handleChangeQuantity(Number(e.target.value))}
+                >
+                  {[...Array(getProductMax(product) + 1)].map((v, i) => (
+                    <option
+                      key={i}
+                      value={i}
+                      disabled={offsetDisabled(product) < i && i !== 0}
+                    >
+                      {i === 0 ? t('REMOVE', 'Remove') : i}
+                    </option>
+                  ))}
+                </ProductSelect>
+              ) : (
+                <ProductQuantity>
+                  {product?.quantity}
+                </ProductQuantity>
+              )}
+              <ContentInfo>
+                <h3>{product.name}</h3>
+                {windowSize.width <= 410 && (
+                  <span>
+                    <p>{parsePrice(getProductPrice(product), { currencyPosition: 'left', ...(currency && { currency }) })}</p>
+                    {isCartProduct && (
+                      <div>
+                        {onEditProduct && (
+                          <span ref={productActionsEdit}>
+                            <TiPencil color='#F2BB40' onClick={() => onEditProduct(product)} />
+                          </span>
+                        )}
+                        {onDeleteProduct && (
+                          <span ref={productActionsDelete}>
+                            <VscTrash color='#D81212' onClick={() => onDeleteProduct(product)} />
+                          </span>
+                        )}
+                      </div>
                     )}
-                  </div>
+                  </span>
                 )}
-              </span>
-            )}
-          </ContentInfo>
+              </ContentInfo>
+            </>
+          )}
         </ProductInfo>
 
         {(product?.valid || !isCartProduct) && windowSize.width > 410 && (

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

@@ -371,3 +371,28 @@ export const ProductQuantity = styled.span`
     margin: 0 20px 0 10px;
   `}
 `
+export const ScheduleInfoWrapper = styled.div`
+  width: calc(100% - 65px);
+  box-sizing: border-box;
+  h3 {
+    margin: 0px;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: ${props => props.theme.colors.headingColor};
+  }
+  padding-left: 10px;
+  ${props => props.theme.rtl && css`
+    padding-left: 0px;
+    padding-right: 10px;
+  `}
+`
+
+export const ScheduleInfo = styled.div`
+  span {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 15px;
+  }
+`

package/src/components/Profile/ProfilePage/index.js

@@ -5,7 +5,7 @@ import {
   useSession
 } from 'ordering-components-admin-external'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
-import { List as MenuIcon } from 'react-bootstrap-icons'
+import { List as MenuIcon, InfoCircle } from 'react-bootstrap-icons'
 import { IconButton, Button } from '../../../styles'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { Sessions } from '../Sessions'
@@ -16,7 +16,9 @@ import {
   UserInfoContainer,
   UserImage,
   UserInfoWrapper,
-  ButtonsGroup
+  ButtonsGroup,
+  InfoWrapper,
+  InfoContent
 } from './styles'
 
 const ProfilePageUI = (props) => {
@@ -40,6 +42,18 @@ const ProfilePageUI = (props) => {
           </IconButton>
         )}
         <h1>{t('PROFILE', '')}</h1>
+        {user?.level === 8 && (
+          <InfoWrapper>
+            <IconButton
+              color='primary'
+            >
+              <InfoCircle />
+            </IconButton>
+            <InfoContent>
+              {t('CONNTECT_PROFESSIONAL_ACCOUNT_INFO', 'Connect your Professional account with your Google account to synchronize the appointments with the Google calendar Application. Use the Google account button to start with the login process, do not forget to notify the admin to Complete the synchronization.')}
+            </InfoContent>
+          </InfoWrapper>
+        )}
       </HeaderContainer>
       <UserInfoContainer>
         <UserImage>