ordering-ui-admin-external 1.14.3 → 1.15.0

package/src/components/Users/ProfessionalListing/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 { useLanguage, useConfig, UsersList as UsersListController } from 'ordering-components-admin-external'
 import { ProfessionalList } from '../ProfessionalList'
 import { UsersListingHeader } from '../UsersListingHeader'
@@ -40,7 +40,6 @@ const ProfessionalListingUI = (props) => {
     handleSelectedUsers,
     deleteUsersActionState,
     handleDeleteSeveralUsers,
-    onUserRedirect,
     handleSuccessUpdate,
     handleSuccessAddUser,
     handleSuccessDeleteUser,
@@ -56,6 +55,7 @@ const ProfessionalListingUI = (props) => {
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
 
+  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [queryId, setQueryId] = useState(null)
   const [isOpenUserDetails, setIsOpenUserDetails] = useState(false)
@@ -67,11 +67,13 @@ const ProfessionalListingUI = (props) => {
     setIsOpenUserDetails(false)
     setOpenUser(null)
     setQueryId(null)
-    onUserRedirect()
+    const enabled = selectedUserActiveState ? 'active' : 'inactive'
+    history.replace(`${location.pathname}?enabled=${enabled}`)
   }
 
   const handleOpenUserDetails = (user) => {
-    onUserRedirect(user?.id)
+    const enabled = selectedUserActiveState ? 'active' : 'inactive'
+    history.replace(`${location.pathname}?enabled=${enabled}&id=${user?.id}`)
     setOpenUser(user)
     setOpenUserAddForm(false)
     setIsOpenUserDetails(true)
@@ -196,8 +198,11 @@ const ProfessionalListingUI = (props) => {
 }
 
 export const ProfessionalListing = (props) => {
+  const query = new URLSearchParams(useLocation().search)
+  const defaultUserActiveState = query.get('enabled') !== 'inactive'
   const usersListingProps = {
     ...props,
+    defaultUserActiveState,
     isProfessional: true,
     UIComponent: ProfessionalListingUI,
     isSearchByUserEmail: true,

package/src/components/Users/UserActiveStateFilter/index.js

@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { DragScroll } from '../../Shared'
 import {
@@ -12,7 +13,19 @@ export const UserActiveStateFilter = (props) => {
     handleChangeUserActiveState
   } = props
 
+  const history = useHistory()
   const [, t] = useLanguage()
+  const query = new URLSearchParams(useLocation().search)
+  const defaultEnabled = query.get('enabled')
+  const onChangeUserActiveState = (enabled) => {
+    history.replace(`${location.pathname}?enabled=${enabled}`)
+    handleChangeUserActiveState()
+  }
+
+  useEffect(() => {
+    if (defaultEnabled) return
+    history.replace(`${location.pathname}?enabled=active`)
+  }, [])
 
   return (
     <>
@@ -20,13 +33,13 @@ export const UserActiveStateFilter = (props) => {
         <DragScroll>
           <Tab
             active={selectedUserActiveState}
-            onClick={() => handleChangeUserActiveState()}
+            onClick={() => onChangeUserActiveState('active')}
           >
             {t('ACTIVE', 'Active')}
           </Tab>
           <Tab
             active={!selectedUserActiveState}
-            onClick={() => handleChangeUserActiveState()}
+            onClick={() => onChangeUserActiveState('inactive')}
           >
             {t('INACTIVE', 'Inactive')}
           </Tab>

package/src/components/Users/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 { UserDetails as UserDetailsController, useLanguage, useSession } from 'ordering-components-admin-external'
 import { UserDetailsMenu } from '../UserDetailsMenu'
@@ -36,6 +37,8 @@ export const UserDetailsUI = (props) => {
     handleChangeActiveUser
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [adminUserState] = useSession()
   const [, t] = useLanguage()
@@ -65,6 +68,29 @@ export const UserDetailsUI = (props) => {
     setExtraOpen(false)
   }, [currentMenuSelected])
 
+  const handleTabClick = (tab, isInitialRender) => {
+    setCurrentMenuSelected(tab)
+    if (!isInitialRender) {
+      const enabled = query.get('enabled')
+      const id = query.get('id')
+      const section = query.get('section')
+      if (section) {
+        history.replace(`${location.pathname}?enabled=${enabled}&id=${id}&section=${section}&tab=${tab}`)
+      } else {
+        history.replace(`${location.pathname}?enabled=${enabled}&id=${id}&tab=${tab}`)
+      }
+    }
+  }
+
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick(currentMenuSelected)
+    }
+  }, [])
+
   return (
     <>
       <DetailsHeader>
@@ -131,7 +157,7 @@ export const UserDetailsUI = (props) => {
       </DetailsHeader>
       <UserDetailsMenu
         currentMenuSelected={currentMenuSelected}
-        handleChangeMenu={setCurrentMenuSelected}
+        handleChangeMenu={tab => handleTabClick(tab)}
         isBusinessOwner={userState?.user?.level === 2}
       />
       {!userState?.loading && userState?.user && (

package/src/components/Users/UsersListing/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 { useLanguage, UsersList as UsersListController } from 'ordering-components-admin-external'
 import { UsersList } from '../UsersList'
 import { UsersListingHeader } from '../UsersListingHeader'
@@ -39,7 +39,6 @@ const UsersListingUI = (props) => {
     handleSelectedUsers,
     deleteUsersActionState,
     handleDeleteSeveralUsers,
-    onUserRedirect,
     handleSuccessUpdate,
     handleSuccessAddUser,
     handleSuccessDeleteUser,
@@ -49,6 +48,7 @@ const UsersListingUI = (props) => {
   } = props
 
   const [, t] = useLanguage()
+  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [queryId, setQueryId] = useState(null)
   const [isOpenUserDetails, setIsOpenUserDetails] = useState(false)
@@ -59,11 +59,13 @@ const UsersListingUI = (props) => {
     setIsOpenUserDetails(false)
     setOpenUser(null)
     setQueryId(null)
-    onUserRedirect()
+    const enabled = selectedUserActiveState ? 'active' : 'inactive'
+    history.replace(`${location.pathname}?enabled=${enabled}`)
   }
 
   const handleOpenUserDetails = (user) => {
-    onUserRedirect(user?.id)
+    const enabled = selectedUserActiveState ? 'active' : 'inactive'
+    history.replace(`${location.pathname}?enabled=${enabled}&id=${user?.id}`)
     setOpenUser(user)
     setOpenUserAddForm(false)
     setIsOpenUserDetails(true)
@@ -179,8 +181,11 @@ const UsersListingUI = (props) => {
 }
 
 export const UsersListing = (props) => {
+  const query = new URLSearchParams(useLocation().search)
+  const defaultUserActiveState = query.get('enabled') !== 'inactive'
   const usersListingProps = {
     ...props,
+    defaultUserActiveState,
     UIComponent: UsersListingUI,
     isSearchByUserEmail: true,
     isSearchByUserPhone: true,

package/template/pages/BusinessProductsList/index.js

@@ -49,7 +49,7 @@ export const BusinessProductsList = (props) => {
       return events.emit('go_to_page', {
         page: 'store',
         params: { store: slug },
-        search: `?category=${category}&product=${product}`,
+        search: `category=${category}&product=${product}`,
         replace: true
       })
     }