ordering-ui-admin-external 1.24.2 → 1.25.0

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

@@ -6,7 +6,7 @@ import MdCheckBox from '@meronex/icons/md/MdCheckBox'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import { Envelope, Phone } from 'react-bootstrap-icons'
 
-import { Switch } from '../../../styles'
+import { Switch, LinkButton } from '../../../styles'
 import { Pagination, ConfirmAdmin } from '../../Shared'
 
 import {
@@ -20,7 +20,6 @@ import {
   InfoBlock,
   UserEnableWrapper,
   WrapperPagination,
-  AddNewUserButton,
   UsersBottomContainer,
   VerifiedItemsContainer,
   VerifiedItem,
@@ -271,7 +270,7 @@ export const UsersList = (props) => {
           </UsersTable>
         </UserTableWrapper>
         <UsersBottomContainer>
-          <AddNewUserButton
+          <LinkButton
             onClick={() => handleOpenUserAddForm()}
             disabled={actionDisabled}
           >
@@ -282,7 +281,7 @@ export const UsersList = (props) => {
                   ? t('ADD_NEW_DRIVER_MANAGER', 'Add new driver manager')
                   : t('ADD_NEW_USER', 'Add new user')
             }
-          </AddNewUserButton>
+          </LinkButton>
           {usersList?.users.length > 0 && (
             <WrapperPagination>
               <Pagination

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

@@ -197,18 +197,6 @@ export const WrapperPagination = styled.div`
   align-items: center;
 `
 
-export const AddNewUserButton = styled.div`
-  cursor: pointer;
-  color: ${props => props.theme.colors.primary};
-  width: fit-content;
-  font-size: 14px;
-
-  ${({ disabled }) => disabled && css`
-    opacity: 0.5;
-    pointer-events: none;
-  `}
-`
-
 export const UsersBottomContainer = styled.div`
   display: flex;
   flex-wrap: wrap;

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage } from 'ordering-components-admin-external'
-import { Switch } from '../../../styles'
+import { Switch, LinkButton } from '../../../styles'
 import { ColumnAllowSettingPopover, Pagination, Modal } from '../../Shared'
 
 import {
@@ -9,7 +9,6 @@ import {
   Table,
   Tbody,
   PagesBottomContainer,
-  AddNewPageButton,
   SwitchWrapper,
   StatusWrapper,
   StatusPoint,
@@ -289,11 +288,11 @@ export const CampaignList = (props) => {
       </Container>
       {!campaignList.loading && (
         <PagesBottomContainer>
-          <AddNewPageButton
+          <LinkButton
             onClick={() => handleOpenDetail({})}
           >
             {t('ADD_NEW_CAMPAIGN', 'Add new campaign')}
-          </AddNewPageButton>
+          </LinkButton>
           {campaignList?.campaigns?.length > 0 && (
             <Pagination
               currentPage={paginationProps?.currentPage}

package/src/components/Marketing/CampaignList/styles.js

@@ -192,12 +192,6 @@ export const PagesBottomContainer = styled.div`
   margin: 15px 0;
 `
 
-export const AddNewPageButton = styled.div`
-  cursor: pointer;
-  font-size: 14px;
-  color: ${props => props.theme.colors.primary};
-`
-
 export const LinkText = styled.span`
   color: ${props => props.theme.colors.primary};
   &:hover {

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

@@ -240,6 +240,7 @@ const EnterprisePromotionDetailsUI = (props) => {
         {selectedOption === 'rules' && (
           <EnterprisePromotionRules
             {...props}
+            isExpand={isExpand}
             handleUpdateClick={handleUpdateClick}
             handleAddPromotion={handleAddPromotion}
           />

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

@@ -4,7 +4,7 @@ import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
 import { Image as ImageIcon } from 'react-bootstrap-icons'
 import { ColumnAllowSettingPopover, Pagination } from '../../Shared'
-import { Switch } from '../../../styles'
+import { Switch, LinkButton } from '../../../styles'
 
 import {
   PromotionListContainer,
@@ -19,7 +19,6 @@ import {
   PromotionTypeWrapper,
   PromotionHow,
   PromotionListBottom,
-  AddNewButton,
   WrapperPagination,
   SinglePromotionTbody,
   DummyImageWrapper
@@ -272,11 +271,11 @@ export const EnterprisePromotionList = (props) => {
         </PromotionListTable>
       </PromotionListContainer>
       <PromotionListBottom eventDisabled={eventDisabled}>
-        <AddNewButton
+        <LinkButton
           onClick={() => handleOpenDetails()}
         >
           {t('ADD_NEW_PROMOTION', 'Add new promotion')}
-        </AddNewButton>
+        </LinkButton>
         {promotionListState?.promotions.length > 0 && (
           <WrapperPagination>
             <Pagination

package/src/components/Marketing/EnterprisePromotionList/styles.js

@@ -212,13 +212,6 @@ export const PromotionListBottom = styled.div`
     pointer-events: none;
   `}
 `
-export const AddNewButton = styled.div`
-  cursor: pointer;
-  color: ${props => props.theme.colors.primary};
-  width: fit-content;
-  font-size: 13px;
-`
-
 export const WrapperPagination = styled.div`
 `
 export const DummyImageWrapper = styled.div`

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

@@ -44,8 +44,10 @@ const EnterprisePromotionListingUI = (props) => {
   const [selectedPromotion, setSelectedPromotion] = useState(null)
   const [curPromotionId, setCurPromotionId] = useState(null)
   const [moveDistance, setMoveDistance] = useState(0)
+  const [sideBarWidth, setSideBarWidth] = useState(600)
 
   const handleOpenDetails = (promotion) => {
+    setSideBarWidth(600)
     setMoveDistance(0)
     setSelectedPromotion(promotion)
     setCurPromotionId(promotion?.id)
@@ -56,6 +58,8 @@ const EnterprisePromotionListingUI = (props) => {
   }
 
   const handleCloseDetails = () => {
+    setMoveDistance(0)
+    setSideBarWidth(600)
     setOpenDetails(false)
     setSelectedPromotion(null)
     history.replace(`${location.pathname}`)
@@ -127,7 +131,7 @@ const EnterprisePromotionListingUI = (props) => {
       {isDisabledFeature && (<DisabledFeatureAlert />)}
       {openDetails && (
         <SideBar
-          defaultSideBarWidth={600 + moveDistance}
+          defaultSideBarWidth={sideBarWidth}
           moveDistance={moveDistance}
           open={openDetails}
           onClose={() => handleCloseDetails()}
@@ -143,6 +147,7 @@ const EnterprisePromotionListingUI = (props) => {
             handleSuccessAddPromotion={handleSuccessAddPromotion}
             handleSuccessDeletePromotion={handleSuccessDeletePromotion}
             setMoveDistance={setMoveDistance}
+            setSideBarWidth={setSideBarWidth}
             onClose={() => handleCloseDetails()}
           />
         </SideBar>

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

@@ -36,7 +36,9 @@ export const EnterprisePromotionRules = (props) => {
     handleChangeItem,
     handleAddPromotion,
     handleUpdateClick,
-    setMoveDistance
+    setMoveDistance,
+    setSideBarWidth,
+    isExpand
   } = props
 
   const [, t] = useLanguage()
@@ -68,7 +70,10 @@ export const EnterprisePromotionRules = (props) => {
   }
 
   const hanndleClickApply = () => {
-    if (width > 1300) setMoveDistance(700)
+    if (width > 1300) {
+      setSideBarWidth(isExpand ? width : 1300)
+      setMoveDistance(700)
+    }
     setIsShowConditions(true)
   }
 

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

@@ -49,6 +49,7 @@ const MessagesListingUI = (props) => {
   const [selectedOrder, setSelectedOrder] = useState(null)
   const [orderIdForUnreadCountUpdate, setOrderIdForUnreadCountUpdate] = useState(null)
   const [filterModalOpen, setFilterModalOpen] = useState(false)
+  const [timeStatus, setTimeStatus] = useState(null)
 
   const handleOpenOrderDetail = (order) => {
     setDetailsOrder(order)
@@ -91,6 +92,7 @@ const MessagesListingUI = (props) => {
           handleChangeFilterValues={handleChangeFilterValues}
           filterModalOpen={filterModalOpen}
           setFilterModalOpen={setFilterModalOpen}
+          setTimeStatus={setTimeStatus}
         />
         <MessagesContent>
           <OrdersContainer>
@@ -173,6 +175,7 @@ const MessagesListingUI = (props) => {
                 orderIdForUnreadCountUpdate={orderIdForUnreadCountUpdate}
                 handleOpenOrderDetail={handleOpenOrderDetail}
                 handleOrderCardClick={handleOrderCardClick}
+                timeStatus={timeStatus}
               />
             )}
             {selectedOption === 'contacts' && (

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

@@ -169,7 +169,6 @@ const ContentFormUI = (props) => {
           <Button
             borderRadius='8px'
             color='primary'
-            disabled={Object.keys(formState.changes).length === 0}
             onClick={() => handleSubmit()}
           >
             {t('ACCEPT', 'Accept')}

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

@@ -7,7 +7,7 @@ import {
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { Alert, Pagination, SearchBar, SideBar } from '../../Shared'
 import { List as MenuIcon, InfoCircle } from 'react-bootstrap-icons'
-import { Button, IconButton } from '../../../styles'
+import { Button, IconButton, LinkButton } from '../../../styles'
 import Skeleton from 'react-loading-skeleton'
 import { OrderingProductDetails } from '../OrderingProductDetails'
 
@@ -19,7 +19,6 @@ import {
   ProductListTable,
   PageTbody,
   PagesBottomContainer,
-  AddNewPageButton,
   ProductListTableWrapper,
   InfoWrapper,
   InfoContent
@@ -173,11 +172,11 @@ const OrderingProductsUI = (props) => {
 
         {!sitesListState.loading && (
           <PagesBottomContainer>
-            <AddNewPageButton
+            <LinkButton
               onClick={() => onClickProduct(null)}
             >
               {t('ADD_PRODUCT', 'Add product')}
-            </AddNewPageButton>
+            </LinkButton>
             {sitesListState?.sites?.length > 0 && (
               <Pagination
                 currentPage={paginationProps?.currentPage}

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

@@ -157,13 +157,6 @@ export const PagesBottomContainer = styled.div`
   row-gap: 10px;
   margin: 15px 0;
 `
-
-export const AddNewPageButton = styled.div`
-  cursor: pointer;
-  font-size: 14px;
-  color: ${props => props.theme.colors.primary};
-`
-
 export const InfoWrapper = styled.div`
   position: relative;
   ${props => props.theme?.rtl ? css`

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

@@ -129,6 +129,7 @@ const DeliveriesManagerUI = (props) => {
 export const DeliveriesManager = (props) => {
   const OrdersListControlProps = {
     ...props,
+    isOnlyDelivery: true,
     UIComponent: DeliveriesManagerUI,
     driversPropsToFetch: ['id', 'name', 'lastname', 'location', 'enabled', 'available', 'busy', 'driver_groups', 'assigned_orders_count', 'last_order_assigned_at', 'last_location_at', 'cellphone', 'photo', 'qualification']
   }

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

@@ -5,14 +5,14 @@ import BsDot from '@meronex/icons/bs/BsDot'
 import { useTheme } from 'styled-components'
 import { getStarWidth } from '../../../utils'
 import { useWindowSize } from '../../../hooks/useWindowSize'
+import { LinkButton } from '../../../styles'
 import {
   DriversListContainer,
   DriverCard,
   WrapperImage,
   Image,
   DriverInfo,
-  WrapperStar,
-  AssignedOrdersCount
+  WrapperStar
 } from './styles'
 
 export const DriversList = (props) => {
@@ -81,13 +81,13 @@ export const DriversList = (props) => {
                 <div>
                   <p>{driver.name} {driver.lastname}</p>
                   <BsDot />
-                  <AssignedOrdersCount
+                  <LinkButton
                     className='driver-orders'
                     disabled={!driver?.assigned_orders_count || driver?.assigned_orders_count === 0}
                     onClick={() => onOpenDriverOrdersDetail(driver)}
                   >
                     {driver?.assigned_orders_count} {t('ORDERS', 'Orders')}
-                  </AssignedOrdersCount>
+                  </LinkButton>
                 </div>
                 {driver?.qualification && (
                   <WrapperStar width={getStarWidth(driver?.qualification)} />

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

@@ -115,16 +115,6 @@ export const DriverInfo = styled.div`
   }
 `
 
-export const AssignedOrdersCount = styled.span`
-  font-size: 14px;
-  cursor: pointer;
-  color: ${props => props.theme.colors.primary};
-
-  ${({ disabled }) => disabled && css`
-    pointer-events: none;
-    opacity: 0.5;
-  `}
-`
 export const Timestatus = styled.div`
   width: 4px;
   height: 42px;

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

@@ -2,6 +2,7 @@ import React from 'react'
 import { useLanguage, useUtils, Logistics as LogisticsController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { Button } from '../../../styles'
 
 import {
   WraaperLogs,
@@ -14,7 +15,8 @@ import {
 const LogisticsUI = (props) => {
   const {
     logisticList,
-    parseLog
+    parseLog,
+    getLogistics
   } = props
 
   const [, t] = useLanguage()
@@ -36,6 +38,13 @@ const LogisticsUI = (props) => {
         </>
       ) : (
         <WraaperLogs>
+          <Button
+            rectangle
+            color='primary'
+            onClick={() => getLogistics()}
+          >
+            {t('RELOAD', 'Reload')}
+          </Button>
           {logisticList.logs.map((log) => (
             <BubbleConsole key={log.id}>
               <div dangerouslySetInnerHTML={{

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

@@ -7,6 +7,12 @@ export const WraaperLogs = styled.div`
   justify-content: center;
   font-size: 0.8em;
   border-radius: 97px;
+
+  > button {
+    margin-bottom: 15px;
+    font-size: 14px;
+    padding: 0 25px;
+  }
 `
 export const BubbleConsole = styled.div`
   border-radius: 5px;

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

@@ -71,6 +71,7 @@ const OrderDetailsUI = (props) => {
   const [unreadAlert, setUnreadAlert] = useState({ business: false, driver: false, customer: false })
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [extraOpen, setExtraOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
   const placeSpotEnabled = [3, 4]
   const {
     order,
@@ -160,10 +161,14 @@ const OrderDetailsUI = (props) => {
       if (width <= 500) {
         document.getElementById('orderDetails').style.width = '100vw'
       } else {
-        if (extraOpen && width >= 1000) {
-          document.getElementById('orderDetails').style.width = '1000px'
+        if (isExpand) {
+          document.getElementById('orderDetails').style.width = '100vw'
         } else {
-          document.getElementById('orderDetails').style.width = '500px'
+          if (extraOpen && width >= 1000) {
+            document.getElementById('orderDetails').style.width = '1000px'
+          } else {
+            document.getElementById('orderDetails').style.width = '500px'
+          }
         }
       }
     }
@@ -171,22 +176,13 @@ const OrderDetailsUI = (props) => {
 
   useEffect(() => {
     toggleMainContent()
-  }, [width])
+  }, [extraOpen, isExpand, width])
 
   useEffect(() => {
     if (!open) return
     actionSidebar(true)
   }, [open])
 
-  useEffect(() => {
-    if (width < 1000) return
-    if (extraOpen) {
-      document.getElementById('orderDetails').style.width = '1000px'
-    } else {
-      toggleMainContent()
-    }
-  }, [extraOpen])
-
   const handleChangeTour = (evt) => {
     if (!isTourOpen) return
 
@@ -310,6 +306,8 @@ const OrderDetailsUI = (props) => {
             setIsTourOpen={setIsTourOpen}
             printRef={printRef}
             printTicketRef={printTicketRef}
+            isExpand={isExpand}
+            setIsExpand={setIsExpand}
           />
           <OrderStatus isDisabled={isTourOpen && currentTourStep === 1}>
             <div>

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

@@ -37,12 +37,13 @@ export const OrderDetailsHeader = (props) => {
     printRef,
     isServiceOrder,
     extraOpen,
-    printTicketRef
+    printTicketRef,
+    isExpand,
+    setIsExpand
   } = props
 
   const [, t] = useLanguage()
   const [{ user }] = useSession()
-  const [isExpand, setIsExpand] = useState(false)
   const { width } = useWindowSize()
   const [showPrinterOptions, setShowPrinterOptions] = useState(false)
   const dropdownReference = useRef()
@@ -81,10 +82,6 @@ export const OrderDetailsHeader = (props) => {
     }
   }
 
-  useEffect(() => {
-    if (extraOpen) setIsExpand(false)
-  }, [extraOpen])
-
   useEffect(() => {
     if (!showPrinterOptions) {
       return
@@ -114,44 +111,44 @@ export const OrderDetailsHeader = (props) => {
               )}
             </ButtonLink>
           )}
-        <PrinterSelectContainer>
-          <ButtonLink
-            color='black'
-            isDisabled={isTourOpen && currentTourStep === 1}
-            onClick={() => setShowPrinterOptions(!showPrinterOptions)}
-          >
-            <Printer />
-          </ButtonLink>
-        {showPrinterOptions && (
-        <PrinterSelect ref={dropdownReference}>
-          <ReactToPrint
-            trigger={() => (
-              <ButtonLink
-                color='black'
-                isDisabled={isTourOpen && currentTourStep === 1}
-                onClick={() => setShowPrinterOptions(false)}
-              >
-                {t('NORMAL', 'Normal')}
-              </ButtonLink>
-            )}
-            content={() => printRef.current}
-            removeAfterPrint
-          />
-          <ReactToPrint
-            trigger={() => (
-              <ButtonLink
-                color='black'
-                isDisabled={isTourOpen && currentTourStep === 1}
-                onClick={() => setShowPrinterOptions(false)}
-              >
-                {t('TICKET', 'Ticket')}
-              </ButtonLink>
+          <PrinterSelectContainer>
+            <ButtonLink
+              color='black'
+              isDisabled={isTourOpen && currentTourStep === 1}
+              onClick={() => setShowPrinterOptions(!showPrinterOptions)}
+            >
+              <Printer />
+            </ButtonLink>
+            {showPrinterOptions && (
+              <PrinterSelect ref={dropdownReference}>
+                <ReactToPrint
+                  trigger={() => (
+                    <ButtonLink
+                      color='black'
+                      isDisabled={isTourOpen && currentTourStep === 1}
+                      onClick={() => setShowPrinterOptions(false)}
+                    >
+                      {t('NORMAL', 'Normal')}
+                    </ButtonLink>
+                  )}
+                  content={() => printRef.current}
+                  removeAfterPrint
+                />
+                <ReactToPrint
+                  trigger={() => (
+                    <ButtonLink
+                      color='black'
+                      isDisabled={isTourOpen && currentTourStep === 1}
+                      onClick={() => setShowPrinterOptions(false)}
+                    >
+                      {t('TICKET', 'Ticket')}
+                    </ButtonLink>
+                  )}
+                  content={() => printTicketRef.current}
+                  removeAfterPrint
+                />
+              </PrinterSelect>
             )}
-            content={() => printTicketRef.current}
-            removeAfterPrint
-          />
-          </PrinterSelect>
-          )}
           </PrinterSelectContainer>
           <ButtonLink
             color='black'

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

@@ -5,7 +5,7 @@ import {
   useEvent,
   OrderNotification as OrderNotificationController
 } from 'ordering-components-admin-external'
-import { Modal } from '../../Shared'
+import { Alert, Modal } from '../../Shared'
 import 'react-toastify/dist/ReactToastify.css'
 import { toast } from 'react-toastify'
 import { useTheme } from 'styled-components'
@@ -30,6 +30,7 @@ const OrderNotificationUI = (props) => {
 
   const [notificationModalOpen, setNotificationModalOpen] = useState(false)
   const [registerOrderIds, setRegisterOrderIds] = useState([])
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const handleNotification = (order) => {
     if (customerId && order?.customer_id !== customerId) return
@@ -107,6 +108,13 @@ const OrderNotificationUI = (props) => {
     }
   }, [configState, registerOrderIds, customerId])
 
+  useEffect(() => {
+    setAlertState({
+      open: true,
+      content: t('SOUND_WILL_BE_PLAYED', 'The sound will be played on this page whenever a new order is received.')
+    })
+  }, [])
+
   return (
     <>
       <Modal
@@ -128,6 +136,16 @@ const OrderNotificationUI = (props) => {
         <source src={theme.sounds.notificationOgg} type='audio/ogg' />
         <source src={theme.sounds.notificationMp3} type='audio/mpeg' />
       </audio>
+      <Alert
+        width='700px'
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
     </>
   )
 }

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

@@ -128,11 +128,11 @@ export const OrdersCards = (props) => {
     return finalTaget
   }
 
-  const getStatusClassName = (minutes) => {
-    if (isNaN(Number(minutes))) return 'in_time'
-    const delayTime = configState?.configs?.order_deadlines_delayed_time?.value
-    return minutes > 0 ? 'in_time' : Math.abs(minutes) <= delayTime ? 'at_risk' : 'delayed'
-  }
+  // const getStatusClassName = (minutes) => {
+  //   if (isNaN(Number(minutes))) return 'in_time'
+  //   const delayTime = configState?.configs?.order_deadlines_delayed_time?.value
+  //   return minutes > 0 ? 'in_time' : Math.abs(minutes) <= delayTime ? 'at_risk' : 'delayed'
+  // }
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -229,7 +229,7 @@ export const OrdersCards = (props) => {
                   {allowColumns?.timer && (
                     <Timer>
                       <p className='bold'>Timer</p>
-                      <p className={getStatusClassName(getDelayMinutes(order))}>{displayDelayedTime(order)}</p>
+                      <p className={order?.time_status}>{displayDelayedTime(order)}</p>
                     </Timer>
                   )}
                 </CardHeading>
@@ -269,7 +269,7 @@ export const OrdersCards = (props) => {
                   </InfoItemContainer>
                 </CardContent>
                 {allowColumns?.slaBar && (
-                  <Timestatus timeState={getStatusClassName(getDelayMinutes(order))} />
+                  <Timestatus timeState={order?.time_status} />
                 )}
               </OrderCard>
             ))}

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

@@ -100,8 +100,10 @@ export const ViewDetails = styled.a`
   cursor: pointer;
   color: ${props => props.theme.colors.primary};
   font-size: 12px;
-  text-decoration: underline;
   margin: 0 10px;
+  &:hover {
+    text-decoration: underline;
+  }
 `
 
 export const InfoItemContainer = styled.div`