ordering-ui-admin-external 1.33.1 → 1.35.0

package/src/components/Marketing/PageBanner/index.js

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, AdBannersList as AdBannersListController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { SideBar, Alert, SearchBar } from '../../Shared'
 import { Button, Switch, IconButton } from '../../../styles'
 import { ArrowsAngleContract, ArrowsAngleExpand, ChevronRight, InfoCircle } from 'react-bootstrap-icons'
 import { BannerDetails } from '../BannerDetails'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
+
 import {
   Container,
   HeaderContainer,
@@ -39,7 +41,6 @@ const PageBannersUI = (props) => {
     isSearhShow
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -58,8 +59,7 @@ const PageBannersUI = (props) => {
     setOpenItemsDetail(true)
     setMoveDistance(500)
     if (banner && !isInitialRender) {
-      const position = query.get('position')
-      history.replace(`${location.pathname}?position=${position}&banner=${banner?.id}`)
+      addQueryToUrl({ banner: banner?.id })
     }
   }
 
@@ -67,8 +67,7 @@ const PageBannersUI = (props) => {
     setMoveDistance(0)
     setOpenItemsDetail(false)
     setSelectedBanner(null)
-    const position = query.get('position')
-    history.replace(`${location.pathname}?position=${position}`)
+    removeQueryToUrl(['banner'])
   }
 
   const expandSidebar = () => {

package/src/components/Messages/MessagesListing/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, OrdersManage as OrdersManageController } from 'ordering-components-admin-external'
 import { OrdersContentHeader, OrdersDashboardList, OrderNotification, OrderDetails, Messages } from '../../Orders'
 import { Button } from '../../../styles/Buttons'
@@ -8,6 +8,7 @@ import { ChatContactList } from '../ChatContactList'
 import { ChatBusinessesList } from '../ChatBusinessesList'
 import { AutoScroll } from '../../Shared'
 import { useWindowSize } from '../../../hooks/useWindowSize'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   MessagesListingContainer,
@@ -32,10 +33,10 @@ const MessagesListingUI = (props) => {
     filterValues,
     selectedSubOrderStatus,
     handleChangeSearch,
-    handleChangeFilterValues
+    handleChangeFilterValues,
+    isUseQuery
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
 
   const [, t] = useLanguage()
@@ -56,7 +57,14 @@ const MessagesListingUI = (props) => {
     setOrderDetailId(order.id)
     setIsOpenOrderDetail(true)
 
-    history.replace(`${location.pathname}?id=${order.id}`)
+    if (isUseQuery) {
+      addQueryToUrl({ id: order.id })
+    }
+  }
+
+  const handleCloseOrderDetail = () => {
+    setIsOpenOrderDetail(false)
+    removeQueryToUrl(['id'])
   }
 
   const handleOrderCardClick = (order) => {
@@ -176,6 +184,7 @@ const MessagesListingUI = (props) => {
                 handleOpenOrderDetail={handleOpenOrderDetail}
                 handleOrderCardClick={handleOrderCardClick}
                 timeStatus={timeStatus}
+                isUseQuery={isUseQuery}
               />
             )}
             {selectedOption === 'contacts' && (
@@ -211,7 +220,7 @@ const MessagesListingUI = (props) => {
           order={detailsOrder}
           orderId={orderDetailId}
           drivers={driversList.drivers}
-          onClose={() => setIsOpenOrderDetail(false)}
+          onClose={() => handleCloseOrderDetail()}
         />
       )}
       <OrderNotification />

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

@@ -64,7 +64,10 @@ export const AdvancedSettings = (props) => {
   const businessPageList = [
     { name: t('DEFAULT_BACKGROUND_COLOR', 'Default Background color'), type: 'color', path: 'business_view.components.style.backgroundColor' },
     { name: t('PRODUCTS_FROM_PREVIOUS_ORDERS_BLOCK', 'Products from previous orders block'), type: 'hidden', path: 'business_view.components.products_ordered.hidden' },
-    { name: t('NEAR_BUSINESS_BLOCK', 'Near business block'), type: 'hidden', path: 'business_view.components.near_business.hidden' }
+    { name: t('NEAR_BUSINESS_BLOCK', 'Near business block'), type: 'hidden', path: 'business_view.components.near_business.hidden' },
+    { name: t('BUSINESS_LOGO', 'Business logo'), type: 'hidden', path: 'business_view.components.header.components.logo.hidden' },
+    { name: t('BUSINESS_INFO_ICON', 'Business info icon'), type: 'hidden', path: 'business_view.components.header.components.business_info.hidden' },
+    { name: t('BUSINESS_HEADER', 'Business header'), type: 'hidden', path: 'business_view.components.header.hidden' }
   ]
 
   const businessInfoList = [

package/src/components/OrderingProducts/OrderingProductDetails/index.js

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, SiteDetails as SiteDetailsController } from 'ordering-components-admin-external'
 import { DefaultSelect, IconButton } from '../../../styles'
 import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
 import { Confirm } from '../../Shared'
 import { OrderingProductGeneralDetails } from '../OrderingProductGeneralDetails'
 import { SiteTheme } from '../SiteTheme'
+import { addQueryToUrl } from '../../../utils'
+
 import {
   Container,
   Tabs,
@@ -24,7 +26,6 @@ const OrderingProductDetailsUI = (props) => {
     handleDeleteSite
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [selectedTab, setSelectedTab] = useState('general')
@@ -65,7 +66,7 @@ const OrderingProductDetailsUI = (props) => {
     if (!isInitialRender) {
       const id = query.get('id')
       if (id) {
-        history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
+        addQueryToUrl({ tab: tab })
       }
     }
   }

package/src/components/OrderingProducts/OrderingProductsListing/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import {
   useLanguage,
   SitesList as SitesListController
@@ -10,6 +10,7 @@ import { List as MenuIcon, InfoCircle } from 'react-bootstrap-icons'
 import { Button, IconButton, LinkButton } from '../../../styles'
 import Skeleton from 'react-loading-skeleton'
 import { OrderingProductDetails } from '../OrderingProductDetails'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   OrderingProductsContainer,
@@ -32,10 +33,10 @@ const OrderingProductsUI = (props) => {
     getSites,
     paginationProps,
     setPaginationProps,
-    handleSuccessUpdateSites
+    handleSuccessUpdateSites,
+    isUseQuery
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
 
@@ -59,14 +60,14 @@ const OrderingProductsUI = (props) => {
     setSelectedSite(product)
     setOpenDetails(true)
     if (product && !isInitialRender) {
-      history.replace(`${location.pathname}?id=${product?.id}`)
+      addQueryToUrl({ id: product?.id })
     }
   }
 
   const handleCloseDetail = () => {
     setOpenDetails(false)
     setSelectedSite(null)
-    history.replace(`${location.pathname}`)
+    removeQueryToUrl(['id'])
   }
 
   useEffect(() => {
@@ -86,6 +87,14 @@ const OrderingProductsUI = (props) => {
     }
   }, [sitesListState])
 
+  useEffect(() => {
+    if (!isUseQuery || !paginationProps?.currentPage || !paginationProps?.pageSize || !paginationProps?.totalPages) return
+    addQueryToUrl({
+      page: paginationProps.currentPage,
+      pageSize: paginationProps.pageSize
+    })
+  }, [paginationProps?.currentPage, paginationProps?.pageSize, paginationProps?.totalPages])
+
   return (
     <>
       <OrderingProductsContainer>
@@ -222,9 +231,17 @@ const OrderingProductsUI = (props) => {
 }
 
 export const OrderingProductsListing = (props) => {
+  const query = new URLSearchParams(useLocation().search)
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
   const sitesProps = {
     ...props,
-    UIComponent: OrderingProductsUI
+    UIComponent: OrderingProductsUI,
+    paginationSettings: {
+      initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+      pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+      controlType: 'pages'
+    }
   }
   return <SitesListController {...sitesProps} />
 }

package/src/components/Orders/AllInOne/DriversManager/styles.js

@@ -52,6 +52,6 @@ export const WrapperDriversList = styled.div`
     }
   }
   @media (min-width: 992px) {
-    max-height: min(calc(var(--vh, 1vh) * 100 - 410px), 770px);
+    max-height: calc(var(--vh, 1vh) * 50 - 115px);
   }
 `

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

@@ -55,7 +55,8 @@ const OrdersManagerUI = (props) => {
     handleCustomOrderDetail,
     setSelectedOrderIds,
     allowColumns,
-    setAllowColumns
+    setAllowColumns,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
@@ -215,6 +216,7 @@ const OrdersManagerUI = (props) => {
             </DriversContainer>
             <OrdersContainer>
               <OrderStatusFilterBar
+                isUseQuery={isUseQuery}
                 selectedOrderStatus={ordersStatusGroup}
                 changeOrderStatus={handleOrdersStatusGroupFilter}
                 ordersAmountByStatus={ordersAmountByStatus}
@@ -266,6 +268,7 @@ const OrdersManagerUI = (props) => {
                       allowColumns={allowColumns}
                       setAllowColumns={setAllowColumns}
                       setOrdersAmountByStatus={setOrdersAmountByStatus}
+                      isUseQuery={isUseQuery}
                     />
                   </WrapItemView>
                 </OrdersInnerContent>
@@ -278,6 +281,7 @@ const OrdersManagerUI = (props) => {
               selectedDriver={mapsData.selectedDriver}
               onlineDrivers={mapsData.onlineDrivers}
               offlineDrivers={mapsData.offlineDrivers}
+              selectedOrder={!detailsOrder?.driver_id ? detailsOrder : null}
             />
           </WrapperDriversLocation>
         </MainContentContainer>

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

@@ -109,14 +109,18 @@ export const TopContent = styled.div`
   @media (min-width: 992px) {
     flex-direction: row;
     #orderTable {
-      max-height: calc(var(--vh, 1vh) * 100 - 475px);
+      max-height: calc(var(--vh, 1vh) * 50 - 180px);
     }
   }
 `
 export const WrapperDriversLocation = styled.div`
   border-radius: 8px;
   overflow: hidden;
-  height: 700px;
+  height: calc(var(--vh, 1vh) * 100 - 40px);
+
+  @media (min-width: 992px) {
+    height: calc(var(--vh, 1vh) * 50 - 115px);
+  }
 `
 export const DriversContainer = styled.div`
   box-sizing: border-box;

package/src/components/Orders/CreateCustomOrder/CustomOrderDetails/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useLanguage, useOrder, useValidationFields, CustomOrderDetails as CustomOrderDetailsController } from 'ordering-components-admin-external'
 import { SelectCustomer } from '../SelectCustomer'
 import { OrderTypeSelector } from '../OrderTypeSelector'
@@ -26,7 +26,6 @@ const CustomOrderDetailsUI = (props) => {
     setCustomersPhones,
     handleParentSidebarMove,
     businessList,
-    getBusinessList,
     selectedUser,
     selectedBusiness,
     setSelectedUser,
@@ -40,12 +39,13 @@ const CustomOrderDetailsUI = (props) => {
     handlePlaceOrderByTotal,
     extraFields,
     setExtraFields,
-    actionState
+    actionState,
+    customerAddress
   } = props
 
   const [, t] = useLanguage()
   const [validationFields] = useValidationFields()
-  const [orderState, { changeAddress }] = useOrder()
+  const [, { changeAddress }] = useOrder()
 
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [isOrderByProducts, setIsOrderByProducts] = useState(true)
@@ -87,24 +87,11 @@ const CustomOrderDetailsUI = (props) => {
     handlePlaceOrderByTotal()
   }
 
-  const customerAddress = useMemo(() => {
-    let address = null
-    if (selectedUser?.addresses) {
-      address = selectedUser.addresses.find(address => address?.default)
-    }
-    return address
-  }, [selectedUser])
-
   useEffect(() => {
     if (!customerAddress?.id) return
     changeAddress(customerAddress.id)
   }, [customerAddress?.id])
 
-  useEffect(() => {
-    if (!customerAddress?.location || orderState?.loading) return
-    getBusinessList(customerAddress.location)
-  }, [customerAddress?.location, orderState])
-
   useEffect(() => {
     if (customersPhones?.error) {
       setAlertState({ open: true, content: [customersPhones?.error] })

package/src/components/Orders/CreateCustomOrder/SelectCustomer/index.js

@@ -5,6 +5,7 @@ import { AddressList } from '../../../Delivery'
 import { Dot, HouseDoor } from 'react-bootstrap-icons'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import CgSpinnerTwoAlt from '@meronex/icons/cg/CgSpinnerTwoAlt'
+import MdClose from '@meronex/icons/md/MdClose'
 import { SideBar } from '../../../Shared'
 import { Button, Input, LinkButton } from '../../../../styles'
 import { findExitingCountryPhoneCode } from '../../../../utils'
@@ -34,7 +35,7 @@ export const SelectCustomer = (props) => {
 
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
-  const [, { setUserCustomer }] = useCustomer()
+  const [, { setUserCustomer, deleteUserCustomer }] = useCustomer()
   const [{ configs }] = useConfig()
 
   const [searchInputFocus, setSearchInputFocus] = useState(false)
@@ -56,9 +57,16 @@ export const SelectCustomer = (props) => {
   const onSelectUser = (user) => {
     setUserCustomer(user, true)
     setSelectedUser(user)
+    onChangeNumber('')
     setShowSearchbar(false)
   }
 
+  const onRemoveCustomer = () => {
+    deleteUserCustomer(true)
+    setSelectedUser(null)
+    setShowSearchbar(true)
+  }
+
   const handleOpenAddForm = () => {
     setOpenSidebar('user_add_form')
     handleParentSidebarMove(500)
@@ -150,7 +158,9 @@ export const SelectCustomer = (props) => {
                       {
                         customersPhones.loading
                           ? t('LOADING', 'Loading')
-                          : phone?.length > 6 ? t('NO_OPTIONS', 'No options') : t('TYPE_AT_LEAST_NUMBER_SUGGEST', 'Type at least 7 numbers for suggesstions')
+                          : phone?.length > 6
+                            ? <span className='new' onClick={() => handleOpenAddForm()}>{t('USERS_REGISTER', 'New user')}</span>
+                            : t('TYPE_AT_LEAST_NUMBER_SUGGEST', 'Type at least 7 numbers for suggesstions')
                       }
                     </p>
                   )}
@@ -173,6 +183,17 @@ export const SelectCustomer = (props) => {
                     )}
                   </WrapperImage>
                   <span className='name'>{selectedUser?.name} {selectedUser?.lastname}</span>
+
+                  <Button
+                    circle
+                    outline
+                    color='primary'
+                    type='reset'
+                    className='remove_option'
+                    onClick={() => onRemoveCustomer()}
+                  >
+                    <MdClose />
+                  </Button>
                 </SelectOption>
               </SelectedUserWrapper>
             </>

package/src/components/Orders/CreateCustomOrder/SelectCustomer/styles.js

@@ -76,9 +76,18 @@ export const OptionsToSelectContainer = styled.div`
   > p {
     font-size: 12px;
     margin: 0 16px;
+
+    > span.new {
+      cursor: pointer;
+      color: ${props => props.theme.colors.primary};
+      &:hover {
+        text-decoration: underline;
+      }
+    }
   }
 `
 export const SelectOption = styled.div`
+  position: relative;
   cursor: pointer;
   width: 100%;
   padding: 9px 16px;
@@ -96,6 +105,19 @@ export const SelectOption = styled.div`
       white-space: nowrap;
     }
   }
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+    width: 20px;
+    height: 20px;
+    transform: translate(100%, -50%);
+    top: 11px;
+    right: 20px;
+  }
 `
 
 export const WrapperImage = styled.div`

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

@@ -31,7 +31,8 @@ const DeliveriesManagerUI = (props) => {
     onOrderRedirect,
     numberOfOrdersBySubstatus,
     timeStatus,
-    setTimeStatus
+    setTimeStatus,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
@@ -112,6 +113,7 @@ const DeliveriesManagerUI = (props) => {
               ordersAmountByStatus={ordersAmountByStatus}
               setOrdersAmountByStatus={setOrdersAmountByStatus}
               numberOfOrdersBySubstatus={numberOfOrdersBySubstatus}
+              isUseQuery={isUseQuery}
             />
           </WrapItemView>
         </OrdersContent>

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

@@ -18,7 +18,8 @@ export const DeliveryDashboard = (props) => {
     handleOrdersStatusGroupFilter,
     handleSelectedSubOrderStatus,
     ordersAmountByStatus,
-    setOrdersAmountByStatus
+    setOrdersAmountByStatus,
+    isUseQuery
   } = props
 
   const [interActionMapOrder, setInterActionMapOrder] = useState(null)
@@ -40,6 +41,7 @@ export const DeliveryDashboard = (props) => {
       <OrdersContainer>
         <FilterContainer>
           <OrderStatusFilterBar
+            isUseQuery={isUseQuery}
             selectedOrderStatus={ordersStatusGroup}
             changeOrderStatus={handleOrdersStatusGroupFilter}
             ordersAmountByStatus={ordersAmountByStatus}
@@ -53,6 +55,7 @@ export const DeliveryDashboard = (props) => {
         <WrapperOrderlist id='cardOrders'>
           <OrdersDashboardList
             {...props}
+            isUseQuery={isUseQuery}
             orderListView='card'
             selectedOrderCard={interActionMapOrder}
             handleOrderCardClick={handleLocation}

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

@@ -29,7 +29,8 @@ const DriverSelectorUI = (props) => {
     handleAssignDriver,
     isTourOpen,
     setCurrentTourStep,
-    handleOpenMessages
+    handleOpenMessages,
+    setCommentInfostate
   } = props
 
   const [, t] = useLanguage()
@@ -137,7 +138,12 @@ const DriverSelectorUI = (props) => {
     if (driverId === 'remove') {
       driverId = null
     }
-    handleAssignDriver({ orderId: order.id, driverId: driverId })
+    if (driverId && setCommentInfostate) {
+      setCommentInfostate({ open: true, driverId: driverId })
+    } else {
+      setCommentInfostate && setCommentInfostate({ open: false, driverId: null })
+      handleAssignDriver({ orderId: order.id, driverId: driverId })
+    }
     if (isTourOpen && setCurrentTourStep) {
       handleOpenMessages('chat')
       setTimeout(() => {

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

@@ -22,7 +22,8 @@ export const DriversDashboard = (props) => {
     handleChangeDriver,
     handleChangeDriverIsOnline,
     handleChangeDriversSubFilter,
-    handleOpenDriverOrders
+    handleOpenDriverOrders,
+    assignedOrders
   } = props
 
   const numberOfonlineDrivers = onlineDrivers.length
@@ -66,6 +67,7 @@ export const DriversDashboard = (props) => {
           onlineDrivers={onlineDrivers}
           offlineDrivers={offlineDrivers}
           driversList={driversList}
+          assignedOrders={assignedOrders}
         />
       </WrapperDriversLocation>
     </DriversDashboardContainer>