ordering-ui-admin-external 1.10.0 → 1.11.1

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/Settings/Cms/styles.js

@@ -206,7 +206,7 @@ export const PagesBottomContainer = styled.div`
   align-items: center;
   flex-wrap: wrap;
   row-gap: 10px;
-  margin: 15px 0;
+  margin: 15px 0 38px 0;
 `
 
 export const AddNewPageButton = styled.div`

package/src/components/Settings/CountriesList/styles.js

@@ -157,7 +157,7 @@ export const PagesBottomContainer = styled.div`
   align-items: center;
   flex-wrap: wrap;
   row-gap: 10px;
-  margin: 15px 0;
+  margin: 15px 0 38px 0;
 `
 
 export const AddNewPageButton = styled.div`

package/src/components/Settings/LanguageTransTable/styles.js

@@ -75,7 +75,7 @@ export const TransBottomContainer = styled.div`
   align-items: center;
   flex-wrap: wrap;
   row-gap: 10px;
-  margin: 15px 0;
+  margin: 15px 0 38px 0;
 `
 
 export const AddNewTransButton = styled.div`

package/src/components/Shared/ColumnAllowSettingPopover/styles.js

@@ -6,6 +6,7 @@ export const HeaderItem = styled.div`
 `
 
 export const PopoverBody = styled.div`
+  position: fixed !important;
   z-index: 1001;
   background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
   border: 1px solid ${props => props.theme.colors?.borderColor};

package/src/components/Shared/ImageCrop/index.js

@@ -18,7 +18,8 @@ export const ImageCrop = (props) => {
   const {
     photo,
     handleChangePhoto,
-    onClose
+    onClose,
+    aspectRatio
   } = props
 
   const [, t] = useLanguage()
@@ -48,15 +49,23 @@ export const ImageCrop = (props) => {
 
   useEffect(() => {
     if (!cropperRef.current || !photo) return
-
-    const _cropper = new Cropper(cropperRef.current, {
-      // aspectRatio: 16 / 9,
-      dragMode: 'move',
-      zoomable: false,
-      toggleDragModeOnDblclick: false
-    })
+    let _cropper
+    if (aspectRatio) {
+      _cropper = new Cropper(cropperRef.current, {
+        aspectRatio: aspectRatio,
+        dragMode: 'move',
+        zoomable: false,
+        toggleDragModeOnDblclick: false
+      })
+    } else {
+      _cropper = new Cropper(cropperRef.current, {
+        dragMode: 'move',
+        zoomable: false,
+        toggleDragModeOnDblclick: false
+      })
+    }
     setCropper(_cropper)
-  }, [photo])
+  }, [photo, aspectRatio])
 
   return (
     <Container>

package/src/components/Shared/Schedule/styles.js

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 
 export const ScheduleContainer = styled.div`
-  min-width: 400px;
+  min-width: 320px;
 `
 
 export const TimeScheduleItemContainer = styled.div`
@@ -18,7 +18,7 @@ export const TimeScheduleItemContainer = styled.div`
       font-size: 13px;
       font-weight: 600;
       margin: 0px;
-      padding: 0 16px;
+      padding: 0 10px;
     }
 
     &:first-child {
@@ -42,7 +42,7 @@ export const TimeScheduleItemContainer = styled.div`
         }
   
         svg {
-          font-size: 20px;
+          font-size: 18px;
           cursor: pointer;
         }
       }
@@ -56,7 +56,7 @@ export const TimeScheduleItemContainer = styled.div`
       > span {
         svg {
           cursor: pointer;
-          font-size: 20px;
+          font-size: 18px;
           color: ${props => props.theme.colors.primary};
           ${props => props.theme?.rtl ? css`
             margin-left: 10px;
@@ -68,15 +68,26 @@ export const TimeScheduleItemContainer = styled.div`
     }
   }
 
-  @media (min-width: 380px) {
+  @media (min-width: 450px) {
     > div {
       h4 {
         font-size: 14px;
+        padding: 0 16px;
       }
       &:nth-child(2) {
         p {
           font-size: 14px;
         }
+        svg {
+          font-size: 20px;
+        }
+      }
+      &:nth-child(3) {
+        > span {
+          svg {
+            font-size: 20px;
+          }
+        }
       }
     }
   }
@@ -96,6 +107,7 @@ export const SelectWrapper = styled.div`
     > div {
       padding-left: 13px;
       padding-right: 13px;
+      font-size: 13px;
       > div:last-child {
         margin: 0px;
       }
@@ -111,8 +123,13 @@ export const SelectWrapper = styled.div`
     }
   }
 
-  @media (min-width: 380px) {
+  @media (min-width: 450px) {
     width: 100px;
+    .select {
+      > div {
+        font-size: 16px;
+      }
+    }
   }
 `
 
@@ -137,19 +154,22 @@ export const IconWrapper = styled.span`
 export const TrashIconWrapper = styled.div`
   display: flex;
   justify-content: center;
-  width: 56px;
+  width: 50px;
   ${({ isHide }) => isHide ? css`
     opacity: 0;
     pointer-events: none;
   ` : css`
     opacity: 1;
   `}
+  @media (min-width: 450px) {
+    width: 56px;
+  }
 `
 
 export const AddScheduleIconWrapper = styled.div`
   display: flex;
   justify-content: center;
-  width: 56px;
+  width: 50px;
   > svg {
     color: ${props => props.theme.colors.primary};
     ${props => props.theme?.rtl ? css`
@@ -161,4 +181,8 @@ export const AddScheduleIconWrapper = styled.div`
       color: ${props => props.theme.colors.lightGray};
     }
   }
+
+  @media (min-width: 450px) {
+    width: 56px;
+  }
 `

package/src/components/Shared/SelectSites/index.js

@@ -20,7 +20,7 @@ export const SelectSites = (props) => {
     handleSelectAllSites,
     handleSelectNoneSites,
     handleUpdateClick,
-    handleAddPromotion
+    handleAddClick
   } = props
 
   const [, t] = useLanguage()
@@ -78,7 +78,7 @@ export const SelectSites = (props) => {
         color='primary'
         disabled={isDisabled}
         onClick={() => {
-          isAddMode ? handleAddPromotion() : handleUpdateClick()
+          isAddMode ? handleAddClick() : handleUpdateClick()
         }}
       >
         {isAddMode ? t('ADD', 'Add') : t('SAVE', 'Save')}