ordering-ui-admin-external 1.42.15 → 1.43.0

package/src/components/Banners/styles.js

@@ -0,0 +1,68 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+`
+
+export const Banner = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  background-color: ${props => props.theme.colors.warning100};
+  padding: 20px;
+  border-radius: 8px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    height: auto;
+  }
+`
+
+export const Icon = styled.div`
+  flex: 1;
+  max-width: 5%;
+  text-align: center;
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+    margin-bottom: 10px;
+  }
+`
+
+export const Content = styled.div`
+  flex: 2;
+  max-width: 80%;
+  text-align: left;
+
+  h1, p {
+    font-size: 1rem;
+    margin: 0;
+    padding: 0;
+  }
+
+  h1 {
+    font-weight: bold;
+  }
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+`
+
+export const ButtonWrap = styled.div`
+  flex: 1;
+  max-width: 15%;
+  text-align: center;
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+    margin-bottom: 10px;
+  }
+`

package/src/components/Delivery/DriversGroupGeneralForm/index.js

@@ -1,15 +1,21 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, useSession } from 'ordering-components-admin-external'
 import { useForm } from 'react-hook-form'
-import { Input, Button, SecondSelect as DefaultSelect } from '../../../styles'
+import { Input, Button, SecondSelect as DefaultSelect, Checkbox } from '../../../styles'
 import { Alert } from '../../Shared'
 import { DriversGroupDrivers } from '../DriversGroupDrivers'
 import { DriversGroupCompanies } from '../DriversGroupCompanies'
 
 import {
   Container,
-  InputWrapper
+  DriverManagerContainer,
+  DriverManagerWrapper,
+  Image,
+  InputWrapper,
+  ManagerInfoContainer,
+  WrapperImage
 } from './styles'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 
 export const DriversGroupGeneralForm = (props) => {
   const {
@@ -21,7 +27,9 @@ export const DriversGroupGeneralForm = (props) => {
     handleAddDriversGroup,
     actionDisabled,
     isTourOpen,
-    handleNextClick
+    handleNextClick,
+    selectedDriverManager,
+    handleSelectDriverManager
   } = props
 
   const [, t] = useLanguage()
@@ -34,13 +42,6 @@ export const DriversGroupGeneralForm = (props) => {
     { value: 1, content: t('DRIVER_COMPANIES', 'Driver companies') }
   ]
 
-  const driversManagersOptions = driversManagers.map(manager => {
-    return {
-      value: manager.id,
-      content: <div>{manager?.name} {manager?.lastname}</div>
-    }
-  })
-
   const priorityOptions = [
     { value: -1, content: t('LOW', 'Low') },
     { value: 0, content: t('NORMAL', 'Normal') },
@@ -127,17 +128,34 @@ export const DriversGroupGeneralForm = (props) => {
           autoComplete='off'
         />
       </InputWrapper>
+
       {user?.level !== 5 && (
         <InputWrapper>
           <label>{t('DRIVER_MANAGER', 'Driver manager')}</label>
-          <DefaultSelect
-            isSecondIcon
-            placeholder={t('SELECT_MANAGER', 'Select driver manager')}
-            options={driversManagersOptions}
-            defaultValue={changesState?.administrator_id ?? driversGroupState.driversGroup?.administrator_id}
-            optionInnerMaxHeight='60vh'
-            onChange={val => handleChangesState({ administrator_id: val })}
-          />
+          <DriverManagerContainer>
+            {driversManagers.map(driverManager => (
+              <DriverManagerWrapper
+                key={driverManager.id}
+              >
+                <Checkbox
+                  value={driverManager?.id}
+                  checked={selectedDriverManager.includes(driverManager.id)}
+                  onChange={e => handleSelectDriverManager(driverManager.id, e.target.checked)}
+                />
+                <WrapperImage>
+                  {driverManager?.photo ? (
+                    <Image bgimage={driverManager?.photo} alt='driverManager' />
+                  ) : (
+                    <FaUserAlt />
+                  )}
+                </WrapperImage>
+                <ManagerInfoContainer>
+                  <p>{driverManager?.name}</p>
+                  <p>{driverManager?.email}</p>
+                </ManagerInfoContainer>
+              </DriverManagerWrapper>
+            ))}
+          </DriverManagerContainer>
         </InputWrapper>
       )}
       <InputWrapper>

package/src/components/Delivery/DriversGroupGeneralForm/styles.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import styled, { css } from 'styled-components'
 
 export const Container = styled.form`
@@ -42,3 +43,85 @@ export const InputWrapper = styled.div`
     }
   }
 `
+
+export const DriverManagerContainer = styled.div`
+  height: calc(100% - 130px);
+  overflow: auto;
+  max-height: 250px;
+`
+
+export const DriverManagerWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+
+  p {
+    margin: 0px;
+    font-size: 12px;
+  }
+
+  ${({ isDisabed }) => isDisabed && css`
+    pointer-events: none;
+  `}
+`
+
+export const ManagerInfoContainer = styled.div`
+  p {
+    margin: 0px;
+    &:first-child {
+      font-weight: 500;
+      font-size: 13px;
+    }
+
+    &:last-child {
+      font-size: 12px;
+      color: ${props => props.theme.colors.lightGray};
+    }
+  }
+`
+
+export const WrapperImage = styled.div`
+  max-width: 40px;
+  max-height: 40px;
+  height: 40px;
+  width: 40px;
+  ${({ isSkeleton }) => !isSkeleton && css`
+    border: 1px solid #E3E3E3;
+  `}
+  border-radius: 8px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 7px;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+
+  margin: 0 10px;
+`
+
+const ImageStyled = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 8px;
+`
+
+export const Image = (props) => {
+  return (
+    <ImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </ImageStyled>
+  )
+}

package/src/components/Home/HomePage/index.js

@@ -4,6 +4,7 @@ import { Line } from 'react-chartjs-2'
 import moment from 'moment'
 import { IconButton, Button } from '../../../styles/Buttons'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { useProjectState } from '../../../contexts/ProjectContext'
 import Skeleton from 'react-loading-skeleton'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { useTheme } from 'styled-components'
@@ -51,7 +52,6 @@ import {
 
 const HomeUI = (props) => {
   const {
-    projectStatus,
     ordersList,
     todaySalelsList,
     monthSalesList,
@@ -65,6 +65,7 @@ const HomeUI = (props) => {
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [timeAxes, setTimeAxes] = useState([])
   const [events] = useEvent()
+  const [projectStatus] = useProjectState()
   const { width } = useWindowSize()
   const [{ parsePrice }] = useUtils()
   const [sessionState] = useSession()

package/src/components/Layout/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 export const Layout = (props) => {
   return (
-    <div className='d-flex' style={{ maxWidth: '100vw', width: '100vw' }}>
+    <div className='d-flex' style={{ maxWidth: '100vw', width: '100vw', paddingTop: props.pt ?? 0 }}>
       {props.children}
     </div>
   )

package/src/components/MyProducts/AdvancedSettings/index.js

@@ -92,7 +92,8 @@ export const AdvancedSettings = (props) => {
     { name: t('DESCRIPTION', 'Description'), type: 'hidden', path: 'business_view.components.products.components.product.components.description.hidden' },
     { name: t('IMAGE', 'Image'), type: 'hidden', path: 'business_view.components.products.components.product.components.image.hidden' },
     { name: t('POSITION', 'Position'), type: 'position', path: 'business_view.components.products.components.product.components.image.position' },
-    { name: t('ADD_TO_CART_BUTTON', 'Add to cart button'), type: 'hidden', path: 'business_view.components.products.components.add_to_cart_button.hidden' }
+    { name: t('ADD_TO_CART_BUTTON', 'Add to cart button'), type: 'hidden', path: 'business_view.components.products.components.add_to_cart_button.hidden' },
+    { name: t('FAVORITE', 'Favorite'), type: 'hidden', path: 'business_view.components.products.components.product.components.favorite.hidden' }
   ]
 
   const reviewsPopups = [

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useLanguage, useSession, OrdersManage as OrdersManageController } from 'ordering-components-admin-external'
+import { OrdersHeaderFilterGroup } from '../OrdersHeaderFilterGroup'
 import { OrderStatusFilterBar } from '../OrderStatusFilterBar'
 import { OrdersContentHeader } from '../OrdersContentHeader'
 import { OrderDetails } from '../OrderDetails'
@@ -229,6 +230,11 @@ const OrdersManagerUI = (props) => {
               />
             </DriversContainer>
             <OrdersContainer showCompressedInfo>
+              <OrdersHeaderFilterGroup
+                driverGroupList={driverGroupList}
+                driversList={driversList}
+                handleChangeFilterValues={handleChangeFilterValues}
+              />
               <OrderStatusFilterBar
                 isUseQuery={isUseQuery}
                 selectedOrderStatus={ordersStatusGroup}

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

@@ -116,6 +116,8 @@ const DeliveriesManagerUI = (props) => {
               numberOfOrdersBySubstatus={numberOfOrdersBySubstatus}
               isUseQuery={isUseQuery}
               franchisesList={props.franchisesList}
+              driverGroupList={driverGroupList}
+              handleChangeFilterValues={handleChangeFilterValues}
             />
           </WrapItemView>
         </OrdersContent>

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { useConfig } from 'ordering-components-admin-external'
 import { DeliveriesLocation } from '../DeliveriesLocation'
 import { OrdersDashboardList } from '../OrdersDashboardList'
+import { OrdersHeaderFilterGroup } from '../OrdersHeaderFilterGroup'
 import { OrderStatusFilterBar } from '../OrderStatusFilterBar'
 import { OrderStatusSubFilter } from '../OrderStatusSubFilter'
 
@@ -22,7 +23,9 @@ export const DeliveryDashboard = (props) => {
     handleSelectedSubOrderStatus,
     ordersAmountByStatus,
     setOrdersAmountByStatus,
-    isUseQuery
+    isUseQuery,
+    driverGroupList,
+    handleChangeFilterValues
   } = props
 
   const ordersDashboardListProps = {
@@ -52,6 +55,11 @@ export const DeliveryDashboard = (props) => {
   return (
     <DeliveryDashboardContainer>
       <OrdersContainer>
+         <OrdersHeaderFilterGroup
+            driverGroupList={driverGroupList}
+            driversList={driversList}
+            handleChangeFilterValues={handleChangeFilterValues}
+          />
         <FilterContainer>
           <OrderStatusFilterBar
             isUseQuery={isUseQuery}

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

@@ -24,16 +24,17 @@ const DriverMultiSelectorUI = (props) => {
     filterValues
   } = props
 
-  const [, t] = useLanguage()
+  const [{ dictionary }] = useLanguage()
   const theme = useTheme()
   const [driversMultiOptionList, setDriversMultiOptionList] = useState([])
   const [searchValue, setSearchValue] = useState(null)
-  const driversLoading = [{ value: 'default', content: <Option small={small}>{t('LOADING', 'loading')}...</Option> }]
+  const driversLoading = [{ value: 'default', content: <Option small={small}>{dictionary?.LOADING ?? 'loading'}...</Option> }]
+
   useEffect(() => {
     const _driversOptionList = [
       {
         value: 'default',
-        content: <Option padding='0px'><span>{t('SELECT_DRIVER', 'Select driver')}</span></Option>,
+        content: <Option padding='0px'><span>{dictionary?.SELECT_DRIVER ?? 'Select driver'}</span></Option>,
         color: 'primary',
         showDisable: true
       }
@@ -57,7 +58,7 @@ const DriverMultiSelectorUI = (props) => {
               <OptionContent>
                 <DriverNameContainer className='driver-info'>
                   <DriverName small={small}>{driver.name} {driver.lastname}</DriverName>
-                  <DriverText small={small}>{t('DRIVER', 'Driver')}</DriverText>
+                  <DriverText small={small}>{dictionary?.DRIVER ?? 'Driver'}</DriverText>
                 </DriverNameContainer>
               </OptionContent>
             </Option>
@@ -73,7 +74,7 @@ const DriverMultiSelectorUI = (props) => {
     }
   }, [driversList, defaultValue, searchValue])
 
-  const Placeholder = <PlaceholderTitle>{t('SELECT_DRIVER', 'Select driver')}</PlaceholderTitle>
+  const Placeholder = <PlaceholderTitle>{dictionary?.SELECT_DRIVER ?? 'Select driver'}</PlaceholderTitle>
 
   return (
     <>

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

@@ -12,7 +12,7 @@ export const DriversGroupTypeSelector = (props) => {
     title
   } = props
 
-  const [, t] = useLanguage()
+  const [{ dictionary }] = useLanguage()
 
   const [searchValue, setSearchValue] = useState('')
 
@@ -22,7 +22,7 @@ export const DriversGroupTypeSelector = (props) => {
     </PlaceholderTitle>
   )
   const [groupTypes, setGroupTypes] = useState([])
-  const groupTypesLoading = [{ value: 'default', content: <Option>{t('GROUP_LOADING', 'Group loading')}...</Option> }]
+  const groupTypesLoading = [{ value: 'default', content: <Option>{dictionary?.GROUP_LOADING ?? 'Group loading'}...</Option> }]
 
   useEffect(() => {
     const _groupList = []

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

@@ -4,6 +4,8 @@ export const PlaceholderTitle = styled.div`
   display: flex;
   align-items: center;
   padding: 10px;
+  line-height:15px;
+  font-size:14px;
 `
 
 export const Option = styled.div`

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LogisticInformation as LogisticInformationController, useLanguage, useUtils } from 'ordering-components-admin-external'
+import { LogisticInformation as LogisticInformationController, useLanguage, useUtils, useConfig } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Button } from '../../../styles'
 import {
@@ -13,7 +13,8 @@ const LogisticInformationUI = (props) => {
   const { logisticInformation, getLogistics } = props
   const [, t] = useLanguage()
 
-  const [{ parseDate, parseDistance }] = useUtils()
+  const [{ parseDate, parseNumber }] = useUtils()
+  const [configState] = useConfig()
 
   const getOrderStatus = (status) => {
     const orderStatus = [
@@ -50,6 +51,23 @@ const LogisticInformationUI = (props) => {
     return objectStatus && objectStatus
   }
 
+  const calculateDistanceParse = (distance, options = {}) => {
+    distance = parseFloat(distance) || 0
+    let unit = options?.unit || 'KM'
+    if (configState.configs.distance_unit_km?.value === '1') {
+      unit = 'KM'
+    }
+    if (configState.configs.distance_unit?.value) {
+      unit = configState.configs.distance_unit?.value
+    }
+    if (unit.toUpperCase() === 'MI') {
+      const dist = distance * 0.621371 / 1000
+      return `${parseNumber(dist, options)} ${t('MI', 'mi')}`
+    } else {
+      return `${parseNumber(distance / 1000, options)} ${t('KM', 'km')}`
+    }
+  }
+
   return (
     <>
       {logisticInformation.loading ? (
@@ -77,7 +95,7 @@ const LogisticInformationUI = (props) => {
               </Button>
               <BubbleConsole>
                 <UppercaseText><strong>{t('DISTANCE_CUSTOMER_FROM_BUSINESS', 'DISTANCE FROM CUSTOMER TO BUSINESS')}</strong></UppercaseText>
-                : {parseDistance((logisticInformation?.data?.distance_customer_from_business / 1000))}
+                : {calculateDistanceParse((logisticInformation?.data?.distance_customer_from_business))}
               </BubbleConsole>
               <>
                 <BubbleConsole>

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

@@ -264,7 +264,7 @@ export const OrdersCards = (props) => {
                         }
                       </p>
                     </div>
-                  )}
+                   )}
                 </CardHeading>
                 {isMessagesView && order?.unread_count > 0 && (
                   <UnreadMessageCounter>

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import { PlusCircle, Trash3, Funnel } from 'react-bootstrap-icons'
 import MdcFilterOff from '@meronex/icons/mdc/MdcFilterOff'
 import TiWarningOutline from '@meronex/icons/ti/TiWarningOutline'
-import { useLanguage, OrdersFilter as OrdersFilterController } from 'ordering-components-admin-external'
+import { useLanguage, useConfig, OrdersFilter as OrdersFilterController } from 'ordering-components-admin-external'
 import { BusinessesSelector } from '../BusinessesSelector'
 import { DriversGroupTypeSelector } from '../DriversGroupTypeSelector'
 import { DateTypeSelector } from '../DateTypeSelector'
@@ -16,6 +16,7 @@ import { Button, IconButton, Input, LinkButton } from '../../../styles'
 import { CurrencyFilter } from '../CurrencyFilter'
 import { getUniqueId } from '../../../utils'
 import { Select } from '../../../styles/Select/FirstSelect'
+import { useFilterValues } from '../../../contexts/FilterValuesContext'
 
 import {
   FilterGroupListContainer,
@@ -71,6 +72,8 @@ const OrdersFilterGroupUI = (props) => {
   const [isShow, setIsShow] = useState(false)
   const [filterApplied, setFilterApplied] = useState(false)
   const metafieldRef = useRef()
+  const [{ configs }] = useConfig()
+  const configFilter = configs?.filter_order_options?.value.split('|').map(value =>(value)) || []
 
   const logisticStatusList = [
     { value: 0, content: <Option>{t('PENDING', 'Pending')}<LogisticStatusDot status={0} /></Option> },
@@ -175,13 +178,19 @@ const OrdersFilterGroupUI = (props) => {
               value={filterValues?.orderId || ''}
               onChange={(e) => handleChangeOrderId(e)}
             />
-            <Input
-              type='text'
-              placeholder={t('EXTERNAL_ID', 'External Id')}
-              autoComplete='off'
-              value={filterValues?.externalId || ''}
-              onChange={handleChangeExternalId}
+            <DateTypeSelector
+              filterValues={filterValues}
+              handleChangeDateType={handleChangeDateType}
+              handleChangeFromDate={handleChangeFromDate}
+              handleChangeEndDate={handleChangeEndDate}
             />
+            {/* <Input
+                type='text'
+                placeholder={t('EXTERNAL_ID', 'External Id')}
+                autoComplete='off'
+                value={filterValues?.externalId || ''}
+                onChange={handleChangeExternalId}
+              /> */}
           </WrapperRow>
           <WrapperRow>
             <Input
@@ -222,14 +231,19 @@ const OrdersFilterGroupUI = (props) => {
               filterValues={filterValues.groupTypes}
               title={t('DRIVER_GROUP_ASSIGNED', 'Driver group (assigned)')}
             />
-            <DriversGroupTypeSelector
+            <BusinessesSelector
+              filterValues={filterValues}
+              businessesList={businessesList}
+              handleChangeBusinesses={handleChangeBusinesses}
+            />
+            {/* <DriversGroupTypeSelector
               driverGroupList={driverGroupList}
               handleChangeGroup={handleChangeGroupUnassigned}
               filterValues={filterValues.groupTypesUnassigned}
               title={t('DRIVER_GROUP_NOT_ASSIGNED', 'Driver group (general)')}
-            />
+            /> */}
           </WrapperRow>
-          <WrapperRow>
+          {/* <WrapperRow>
             <BusinessesSelector
               filterValues={filterValues}
               businessesList={businessesList}
@@ -240,7 +254,7 @@ const OrdersFilterGroupUI = (props) => {
               filterValues={filterValues}
               handleChangeDriver={handleChangeDriver}
             />
-          </WrapperRow>
+          </WrapperRow> */}
           <WrapperRow>
             <CountryFilter
               filterValues={filterValues}
@@ -295,12 +309,6 @@ const OrdersFilterGroupUI = (props) => {
                 onChange={(value) => handleChangeChildFilterValue({ assigned: value })}
               />
             </SelectWrapper>
-            <DateTypeSelector
-              filterValues={filterValues}
-              handleChangeDateType={handleChangeDateType}
-              handleChangeFromDate={handleChangeFromDate}
-              handleChangeEndDate={handleChangeEndDate}
-            />
           </WrapperRow>
           {filterValues?.metafield.map(item => (
             <WrapperRow key={item.id}>
@@ -388,10 +396,14 @@ const OrdersFilterGroupUI = (props) => {
 }
 
 export const OrdersFilterGroup = (props) => {
+  const [filterValues, { handleFilterValues }] = useFilterValues()
+
   const FilterControlProps = {
     ...props,
     UIComponent: OrdersFilterGroupUI,
-    driverGroupList: props.driverGroupList
+    driverGroupList: props.driverGroupList,
+    filterValues: filterValues,
+    setFilterValues: handleFilterValues
   }
   return (
     <>