ordering-ui-admin-external 1.14.3 → 1.15.0

package/src/components/CartRecovery/RecoveryActionListing/index.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { RecoveryActionListing as RecoveryActionListingController } from 'ordering-components-admin-external'
 import { RecoveryActionHeader } from '../RecoveryActionHeader'
 import { RecoveryActionList } from '../RecoveryActionList'
@@ -10,19 +11,36 @@ import {
 } from './styles'
 
 const RecoveryActionListingUI = (props) => {
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [isOpenDetail, setIsOpenDetail] = useState(false)
   const [selectedAction, setSelectedAction] = useState(null)
+  const [selectedActionId, setSelectedActionId] = useState(null)
 
   const handleCloseDetail = () => {
     setIsOpenDetail(false)
     setSelectedAction(null)
+    history.replace(`${location.pathname}`)
   }
 
-  const handleOpenDetail = (action) => {
+  const handleOpenDetail = (action, isInitialRender) => {
     setSelectedAction(action)
+    setSelectedActionId(action?.id)
     setIsOpenDetail(true)
+    if (action && !isInitialRender) {
+      history.replace(`${location.pathname}?id=${action.id}`)
+    }
   }
 
+  useEffect(() => {
+    const id = query.get('id')
+    if (id) {
+      setSelectedAction({})
+      setSelectedActionId(Number(id))
+      setIsOpenDetail(true)
+    }
+  }, [])
+
   return (
     <>
       <RecoveryActionsContainer>
@@ -38,7 +56,6 @@ const RecoveryActionListingUI = (props) => {
       </RecoveryActionsContainer>
       {isOpenDetail && (
         <SideBar
-          sidebarId='loyaltyWallet'
           open={isOpenDetail}
           onClose={() => handleCloseDetail()}
           defaultSideBarWidth={550}
@@ -46,6 +63,7 @@ const RecoveryActionListingUI = (props) => {
           <RecoveryActionDetail
             {...props}
             action={selectedAction}
+            actionId={selectedActionId}
             onClose={() => handleCloseDetail()}
           />
         </SideBar>

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
 import { UsersList as UsersListController } from 'ordering-components-admin-external'
 import { getStorageItem, removeStorageItem, setStorageItem } from '../../../utils'
 
@@ -50,6 +50,7 @@ const DeliveryUsersListingUI = (props) => {
     handleSuccessDeleteUser
   } = props
 
+  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [queryId, setQueryId] = useState(null)
   const [isOpenUserDetails, setIsOpenUserDetails] = useState(false)
@@ -71,6 +72,7 @@ const DeliveryUsersListingUI = (props) => {
     setOpenUser(user)
     setOpenUserAddForm(false)
     setIsOpenUserDetails(true)
+    history.replace(`${location.pathname}?id=${user.id}`)
   }
 
   const handleOpenUserAddForm = () => {

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import {
   useLanguage,
   DriversCompaniesList as DriversCompaniesListController
@@ -32,16 +33,23 @@ const DriversCompaniesListingUI = (props) => {
     handleDeleteSelectedCompanies
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [searchValue, setSearchValue] = useState(null)
   const [curDriversCompany, setCurDriversCompany] = useState(null)
+  const [curDriversCompanyId, setCurDriversCompanyId] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
 
-  const handleOpenDetails = (driverCompany) => {
+  const handleOpenDetails = (driverCompany, isInitialRender) => {
     setCurDriversCompany(driverCompany)
+    setCurDriversCompanyId(driverCompany?.id)
     setOpenDetails(true)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?id=${driverCompany?.id}`)
+    }
   }
 
   useEffect(() => {
@@ -63,6 +71,21 @@ const DriversCompaniesListingUI = (props) => {
     })
   }
 
+  const handleCloseDetails = () => {
+    setCurDriversCompany(null)
+    setCurDriversCompanyId(null)
+    setOpenDetails(false)
+    history.replace(`${location.pathname}`)
+  }
+
+  useEffect(() => {
+    const id = query.get('id')
+    if (id) {
+      setCurDriversCompanyId(Number(id))
+      setOpenDetails(true)
+    }
+  }, [])
+
   return (
     <DriversCompaniesListContainer>
       <HeaderContainer>
@@ -117,19 +140,14 @@ const DriversCompaniesListingUI = (props) => {
           sidebarId='city-details'
           defaultSideBarWidth={550}
           open={openDetails}
-          onClose={() => {
-            setCurDriversCompany(null)
-            setOpenDetails(false)
-          }}
+          onClose={() => handleCloseDetails()}
         >
           <DriversCompanyDetailsForm
             driversCompaniesState={driversCompaniesState}
             setDriversCompaniesState={setDriversCompaniesState}
             driversCompany={curDriversCompany}
-            onClose={() => {
-              setCurDriversCompany(null)
-              setOpenDetails(false)
-            }}
+            driversCompanyId={curDriversCompanyId}
+            onClose={() => handleCloseDetails()}
           />
         </SideBar>
       )}

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import {
   useLanguage,
   DriversCompanyDetails as DriversCompanyDetailsController
@@ -25,13 +26,15 @@ import { useWindowSize } from '../../../hooks/useWindowSize'
 
 const DriversCompanyDetailsFormUI = (props) => {
   const {
-    driversCompany,
+    companyState,
     changesState,
     actionState,
     cleanActionState,
     handleDeleteDriversCompany
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
   const { width } = useWindowSize()
@@ -82,14 +85,31 @@ const DriversCompanyDetailsFormUI = (props) => {
     }
   }, [actionState])
 
+  const handleTabClick = (tab, isInitialRender) => {
+    setCurrentTabItem(tab)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
+    }
+  }
+
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick(currentTabItem)
+    }
+  }, [])
+
   return (
     <>
       <DetailsContainer>
         <Header>
           <h1>
             {
-              driversCompany
-                ? changesState?.name ?? driversCompany?.name ?? ''
+              companyState.company
+                ? changesState?.name ?? companyState.company?.name ?? ''
                 : t('DRIVER_COMPANY_SETTINGS', 'Driver company settings')
             }
           </h1>
@@ -102,7 +122,7 @@ const DriversCompanyDetailsFormUI = (props) => {
                 {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
               </IconButton>
             )}
-            {driversCompany && (
+            {companyState.company && (
               <ActionSelectorWrapper>
                 <DropdownButton
                   menuAlign={theme?.rtl ? 'left' : 'right'}
@@ -125,7 +145,7 @@ const DriversCompanyDetailsFormUI = (props) => {
               <Tab
                 key={item.key}
                 active={item.key === currentTabItem}
-                onClick={() => setCurrentTabItem(item.key)}
+                onClick={() => handleTabClick(item.key)}
               >
                 {item.content}
               </Tab>
@@ -134,13 +154,22 @@ const DriversCompanyDetailsFormUI = (props) => {
         </TabsContainer>
 
         {currentTabItem === 'general' && (
-          <DriversCompanyGeneralDetails {...props} />
+          <DriversCompanyGeneralDetails
+            {...props}
+            driversCompany={companyState.company}
+          />
         )}
         {currentTabItem === 'schedule' && (
-          <DriversCompanyScheduleDetails {...props} />
+          <DriversCompanyScheduleDetails
+            {...props}
+            driversCompany={companyState.company}
+          />
         )}
         {currentTabItem === 'webhooks' && (
-          <DriversCompanyWebhooksDetails {...props} />
+          <DriversCompanyWebhooksDetails
+            {...props}
+            driversCompany={companyState.company}
+          />
         )}
 
       </DetailsContainer>

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import {
   useLanguage,
   useConfig,
@@ -37,6 +38,8 @@ const DriversGroupDetailsUI = (props) => {
     setIsExtendExtraOpen
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -123,6 +126,24 @@ const DriversGroupDetailsUI = (props) => {
     })
   }, [actionState?.error])
 
+  const handleTabClick = (tab, isInitialRender) => {
+    setShowMenu(tab)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
+    }
+  }
+
+  useEffect(() => {
+    if (driversGroupState.loading) return
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick(showMenu)
+    }
+  }, [driversGroupState.loading])
+
   return (
     <>
       <DetailsContainer>
@@ -182,7 +203,7 @@ const DriversGroupDetailsUI = (props) => {
               <Tab
                 key={menu.key}
                 active={menu.key === showMenu}
-                onClick={() => setShowMenu(menu.key)}
+                onClick={() => handleTabClick(menu.key)}
               >
                 {menu.value}
               </Tab>
@@ -192,19 +213,29 @@ const DriversGroupDetailsUI = (props) => {
         {(showMenu === 'general') && (
           <DriversGroupGeneralForm
             {...props}
+            curDriversGroup={driversGroupState.driversGroup}
             useAdvanced={useAdvanced}
             setUseAdvanced={setUseAdvanced}
             handleNextClick={handleNextClick}
           />
         )}
         {showMenu === 'businesses' && (
-          <DriversGroupBusinesses {...props} />
+          <DriversGroupBusinesses
+            {...props}
+            curDriversGroup={driversGroupState.driversGroup}
+          />
         )}
         {showMenu === 'paymethods' && (
-          <DriversGroupPaymethods {...props} />
+          <DriversGroupPaymethods
+            {...props}
+            curDriversGroup={driversGroupState.driversGroup}
+          />
         )}
         {showMenu === 'advanced_logistics' && (
-          <DriversGroupLogistics {...props} />
+          <DriversGroupLogistics
+            {...props}
+            curDriversGroup={driversGroupState.driversGroup}
+          />
         )}
         {showMenu === 'logs' && (
           <DriversGroupLogs driversGroupId={driversGroupState.driversGroup?.id} />
@@ -212,6 +243,7 @@ const DriversGroupDetailsUI = (props) => {
         {showMenu === 'delivery_zones' && (
           <DriverGroupDeliveryDetails
             {...props}
+            curDriversGroup={driversGroupState.driversGroup}
             handleParentSidebarMove={handleParentSidebarMove}
             drivergroup={driversGroupState.driversGroup}
             setIsExtendExtraOpen={setIsExtendExtraOpen}

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { Circle, RecordCircleFill, ChevronRight } from 'react-bootstrap-icons'
 import { useWindowSize } from '../../../hooks/useWindowSize'
@@ -25,18 +26,26 @@ export const DriversGroupLogistics = (props) => {
     handleUpdateDriversGroup
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
 
   const [showConfig, setShowConfig] = useState(null)
   const [openConfig, setOpenConfig] = useState(false)
 
-  const handleOpenConfig = (option) => {
+  const handleOpenConfig = (option, isInitialRender) => {
     setShowConfig(option)
     setOpenConfig(true)
     if (width >= 1200) {
       handleParentSidebarMove(700)
     }
+
+    if (!isInitialRender) {
+      const id = query.get('id')
+      const tab = query.get('tab')
+      history.replace(`${location.pathname}?id=${id}&tab=${tab}&config=${option}`)
+    }
   }
 
   const handleCloseSidebar = () => {
@@ -57,6 +66,13 @@ export const DriversGroupLogistics = (props) => {
     setOpenConfig(false)
   }, [driversGroupState.driversGroup?.id])
 
+  useEffect(() => {
+    const config = query.get('config')
+    if (config) {
+      handleOpenConfig(config, true)
+    }
+  }, [])
+
   return (
     <LogisticsContainer>
       <OrderStatusWrapper
@@ -109,7 +125,7 @@ export const DriversGroupLogistics = (props) => {
           <LogisticsConfigItem
             active={showConfig === 'GROUP_ORDERS'}
             onClick={() => handleOpenConfig('GROUP_ORDERS')}
-          >
+          >a
             <span>{t('GROUP_ORDERS', 'Group Orders')}</span>
             <ChevronRight />
           </LogisticsConfigItem>

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, DriversGroupsList as DriversGroupsListController } from 'ordering-components-admin-external'
 import { List as MenuIcon, LifePreserver } from 'react-bootstrap-icons'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
@@ -37,6 +37,7 @@ const DriversGroupsListingUI = (props) => {
   } = props
 
   const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [searchValue, setSearchValue] = useState(null)
@@ -45,6 +46,7 @@ const DriversGroupsListingUI = (props) => {
   const [moveDistance, setMoveDistance] = useState(0)
   const [openDetails, setOpenDetails] = useState(false)
   const [curDriversGroup, setCurDriversGroup] = useState(null)
+  const [curDriversGroupId, setCurDriversGroupId] = useState(null)
   const [isExtendExtraOpen, setIsExtendExtraOpen] = useState(false)
 
   const [isTourOpen, setIsTourOpen] = useState(false)
@@ -59,6 +61,8 @@ const DriversGroupsListingUI = (props) => {
       setTimeout(() => {
         setCurrentTourStep(5)
       }, 50)
+    } else {
+      history.replace(`${location.pathname}?id=${driverGroup.id}`)
     }
   }
 
@@ -112,8 +116,21 @@ const DriversGroupsListingUI = (props) => {
       handleOpenTour()
     }
   }
+
+  const handleCloseDetail = () => {
+    setCurDriversGroup(null)
+    setOpenDetails(false)
+    setIsTourOpen(false)
+    history.replace(`${location.pathname}`)
+  }
+
   useEffect(() => {
     getDataFromStorage()
+    const id = query.get('id')
+    if (id) {
+      setCurDriversGroupId(Number(id))
+      setOpenDetails(true)
+    }
   }, [])
 
   return (
@@ -191,16 +208,13 @@ const DriversGroupsListingUI = (props) => {
           open={openDetails}
           moveDistance={moveDistance}
           noAnimation={isTourOpen}
-          onClose={() => {
-            setCurDriversGroup(null)
-            setOpenDetails(false)
-            setIsTourOpen(false)
-          }}
+          onClose={() => handleCloseDetail()}
         >
           <DriversGroupDetails
             driversGroupsState={driversGroupsState}
             setDriversGroupsState={setDriversGroupsState}
             curDriversGroup={curDriversGroup}
+            driversGroupId={curDriversGroupId}
             driversManagers={driversManagersList?.managers}
             businesses={businessesList?.businesses}
             paymethods={paymethodsList?.paymethods}

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
@@ -38,6 +39,8 @@ export const UserDetailsUI = (props) => {
     handleScheduleUpdateUser
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -58,6 +61,28 @@ export const UserDetailsUI = (props) => {
     setExtraOpen(false)
   }, [currentMenuSelected])
 
+  const handleTabClick = (tab, isInitialRender) => {
+    setCurrentMenuSelected(tab)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      const section = query.get('section')
+      if (section) {
+        history.replace(`${location.pathname}?id=${id}&section=${section}&tab=${tab}`)
+      } else {
+        history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
+      }
+    }
+  }
+
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick(currentMenuSelected)
+    }
+  }, [])
+
   return (
     <>
       <DetailsHeader>
@@ -114,7 +139,7 @@ export const UserDetailsUI = (props) => {
       <UserDetailsMenu
         isDriverMenu={isDriversPage}
         currentMenuSelected={currentMenuSelected}
-        handleChangeMenu={setCurrentMenuSelected}
+        handleChangeMenu={handleTabClick}
       />
       {!userState?.loading && userState?.user && (
         <>