ordering-ui-admin-external 1.14.3 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.14.3",
+  "version": "1.15.0",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.14.1",
+    "ordering-components-admin-external": "1.15.0",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

package/src/components/BusinessIntelligence/BusinessReviewDetails/index.js

@@ -25,7 +25,7 @@ import {
 
 const BusinessReviewDetailsUI = (props) => {
   const {
-    business,
+    businessState,
     reviewsList,
     handleOpenProducts,
     handleChangeReviewEnabled
@@ -43,18 +43,18 @@ const BusinessReviewDetailsUI = (props) => {
     <>
       <ReviewDetailsContainer>
         <Header>
-          <h1>{business?.name}</h1>
+          <h1>{businessState.business?.name}</h1>
           <Button
             color='lightPrimary'
             borderRadius='8px'
-            onClick={() => handleOpenProducts(business)}
+            onClick={() => handleOpenProducts(businessState.business)}
           >
             {t('PRODUCT_REVIEW', 'Product review')}
           </Button>
         </Header>
         <BusinessLogoContainer>
           <WrapperImage>
-            <Image bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_120,c_limit')} />
+            <Image bgimage={optimizeImage(businessState.business?.logo || theme.images?.dummies?.businessLogo, 'h_120,c_limit')} />
           </WrapperImage>
         </BusinessLogoContainer>
         {reviewsList?.loading ? (

package/src/components/BusinessIntelligence/BusinessReviewList/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, useUtils, DashboardBusinessList as BusinessListController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
@@ -27,12 +28,16 @@ const BusinessReviewsListingUI = (props) => {
     onSearch,
     handleOpenProducts
   } = props
+
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
   const [{ optimizeImage }] = useUtils()
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [openReview, setOpenReview] = useState(false)
   const [curBusiness, setCurBusiness] = useState(null)
+  const [curBusinessId, setCurBusinessId] = useState(null)
 
   const handleChangePage = (page) => {
     getPageBusinesses(pagination.pageSize, page)
@@ -43,9 +48,14 @@ const BusinessReviewsListingUI = (props) => {
     getPageBusinesses(pageSize, expectedPage)
   }
 
-  const handleOpenReview = (business) => {
+  const handleOpenReview = (business, isInitialRender) => {
     setCurBusiness(business)
+    setCurBusinessId(business.id)
     setOpenReview(true)
+    if (!isInitialRender) {
+      const tab = query.get('tab')
+      history.replace(`${location.pathname}?tab=${tab}&id=${business.id}`)
+    }
   }
 
   useEffect(() => {
@@ -53,6 +63,22 @@ const BusinessReviewsListingUI = (props) => {
     onSearch(parentSearchValue)
   }, [parentSearchValue])
 
+  const handleCloseReviewDetails = () => {
+    setCurBusiness(null)
+    setOpenReview(false)
+    const tab = query.get('tab')
+    history.replace(`${location.pathname}?tab=${tab}`)
+  }
+
+  useEffect(() => {
+    const tab = query.get('tab')
+    const id = query.get('id')
+    if (tab === 'business' && id) {
+      setCurBusinessId(Number(id))
+      setOpenReview(true)
+    }
+  }, [])
+
   return (
     <>
       <ReviewsTable>
@@ -134,15 +160,12 @@ const BusinessReviewsListingUI = (props) => {
         <SideBar
           defaultSideBarWidth={550}
           open={openReview}
-          onClose={() => {
-            setCurBusiness(null)
-            setOpenReview(false)
-          }}
+          onClose={() => handleCloseReviewDetails()}
           showExpandIcon
         >
           <BusinessReviewDetails
             business={curBusiness}
-            businessId={curBusiness?.id}
+            businessId={curBusinessId}
             reviews={curBusiness?.reviews?.reviews}
             handleUpdateReview={handleUpdateReview}
             handleOpenProducts={handleOpenProducts}

package/src/components/BusinessIntelligence/InvoiceBusinessManager/index.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, useApi, InvoiceBusinessManager as InvoiceBusinessManagerController } from 'ordering-components-admin-external'
 import { DragScroll, SpinnerLoader } from '../../Shared'
 import {
@@ -23,6 +24,8 @@ const InvoiceBusinessManagerUI = (props) => {
     exportInvoiceList
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [ordering] = useApi()
   const inputRef = useRef(null)
@@ -31,9 +34,13 @@ const InvoiceBusinessManagerUI = (props) => {
 
   const [selectedDetailType, setSelectedDetailType] = useState('general')
 
-  const changeSelectedAnalyticsStatus = (detailType) => {
+  const changeSelectedAnalyticsStatus = (detailType, isInitialRender) => {
     window.scrollTo(0, 0)
     setSelectedDetailType(detailType)
+    if (!isInitialRender) {
+      const invoice = query.get('invoice')
+      history.replace(`${location.pathname}?invoice=${invoice}&tab=${detailType}`)
+    }
   }
 
   useEffect(() => {
@@ -42,6 +49,15 @@ const InvoiceBusinessManagerUI = (props) => {
     }
   }, [exportInvoiceList?.loading])
 
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      changeSelectedAnalyticsStatus(tab, true)
+    } else {
+      changeSelectedAnalyticsStatus(selectedDetailType)
+    }
+  }, [])
+
   return (
     <InvoiceDriversContainer>
       <DetailsHeader>

package/src/components/BusinessIntelligence/InvoiceDriverManager/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, useApi, InvoiceDriverManager as InvoiceDriverManagerController } from 'ordering-components-admin-external'
 import { DragScroll, SpinnerLoader } from '../../Shared'
 import {
@@ -21,6 +22,8 @@ const InvoiceDriverManagerUI = (props) => {
     exportInvoiceList
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [ordering] = useApi()
   const [selectedDetailType, setSelectedDetailType] = useState('general')
@@ -28,9 +31,13 @@ const InvoiceDriverManagerUI = (props) => {
   const submitBtnRef = useRef(null)
   const invoicePdfRef = useRef(null)
 
-  const changeSelectedAnalyticsStatus = (detailType) => {
+  const changeSelectedAnalyticsStatus = (detailType, isInitialRender) => {
     window.scrollTo(0, 0)
     setSelectedDetailType(detailType)
+    if (!isInitialRender) {
+      const invoice = query.get('invoice')
+      history.replace(`${location.pathname}?invoice=${invoice}&tab=${detailType}`)
+    }
   }
 
   useEffect(() => {
@@ -39,6 +46,15 @@ const InvoiceDriverManagerUI = (props) => {
     }
   }, [exportInvoiceList?.loading])
 
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      changeSelectedAnalyticsStatus(tab, true)
+    } else {
+      changeSelectedAnalyticsStatus(selectedDetailType)
+    }
+  }, [])
+
   return (
     <InvoiceDriversContainer>
       <DetailsHeader>

package/src/components/BusinessIntelligence/InvoiceManager/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 { useLanguage } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { IconButton } from '../../../styles'
@@ -20,6 +21,8 @@ import {
 } from './styles'
 
 export const InvoiceManager = (props) => {
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [openInvoiceDetail, setOpenInvoiceDetail] = useState(false)
@@ -30,16 +33,27 @@ export const InvoiceManager = (props) => {
     { id: 2, key: 'driver', name: t('DRIVER_INVOICE', 'Driver invoice'), icon: <DriverIcon />, description: t('DRIVER_INVOICE_DESCRIPTION', 'Driver invoice description') }
   ]
 
-  const handleOpenInvoiceDetail = (index) => {
+  const handleOpenInvoiceDetail = (index, isInitialRender) => {
     setOpenInvoiceDetail(true)
     setSelectedInvoice(index)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?invoice=${index}`)
+    }
   }
 
   const handleCloseInvoiceDetail = () => {
     setOpenInvoiceDetail(false)
     setSelectedInvoice(null)
+    history.replace(`${location.pathname}`)
   }
 
+  useEffect(() => {
+    const invoice = query.get('invoice')
+    if (invoice) {
+      handleOpenInvoiceDetail(invoice, true)
+    }
+  }, [])
+
   return (
     <>
       <InvoiceManagerContainer>

package/src/components/BusinessIntelligence/InvoiceOrdertype/styles.js

@@ -28,6 +28,7 @@ export const CheckboxWrapper = styled.div`
 export const ActionBtnWrapper = styled.div`
   position: sticky;
   top: 100%;
+  margin-top: 30px;
 
   > button {
     height: 44px;

package/src/components/BusinessIntelligence/ProductReviewDetails/index.js

@@ -18,7 +18,7 @@ import {
 
 const ProductReviewDetailsUI = (props) => {
   const {
-    product,
+    productState,
     productReviewList
   } = props
 
@@ -29,12 +29,12 @@ const ProductReviewDetailsUI = (props) => {
     <>
       <ReviewDetailsContainer>
         <Header>
-          <h1>{product?.name}</h1>
+          <h1>{productState.product?.name}</h1>
         </Header>
         <ProductImageContainer>
           <WrapperImage>
-            {product?.images ? (
-              <Image bgimage={optimizeImage(product?.images, 'h_120,c_limit')} />
+            {productState.product?.images ? (
+              <Image bgimage={optimizeImage(productState.product?.images, 'h_120,c_limit')} />
             ) : (
               <ImageFill />
             )}

package/src/components/BusinessIntelligence/Reports/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 { useInfoShare } from '../../../contexts/InfoShareContext'
 import { IconButton } from '../../../styles'
 import { useWindowSize } from '../../../hooks/useWindowSize'
@@ -56,6 +57,8 @@ import {
 } from './styles'
 
 export const Reports = (props) => {
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [isOpen, setIsOpen] = useState(false)
@@ -89,13 +92,24 @@ export const Reports = (props) => {
   const handleCloseSidebar = () => {
     setIsOpen(false)
     setSelectedReport(0)
+    history.replace(`${location.pathname}`)
   }
 
-  const handleOpenSlider = (index) => {
+  const handleOpenSlider = (index, isInitialRender) => {
     setSelectedReport(index)
     setIsOpen(true)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?id=${index}`)
+    }
   }
 
+  useEffect(() => {
+    const id = query.get('id')
+    if (id) {
+      handleOpenSlider(Number(id), true)
+    }
+  }, [])
+
   return (
     <ReportsContainer>
       <HeaderTitleContainer>

package/src/components/BusinessIntelligence/ReviewProductsListing/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, useUtils, ReviewProductList as ReviewProductListController } from 'ordering-components-admin-external'
 import { ImageFill, StarFill } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
@@ -25,11 +26,15 @@ export const ReviewProductsListingUI = (props) => {
     businessId
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
 
   const [openReview, setOpenReview] = useState(false)
   const [curProduct, setCurProduct] = useState(null)
+  const [curProductId, setCurProductId] = useState(null)
+  const [curCategoryId, setCurCategoryId] = useState(null)
 
   const [currentPage, setCurrentPage] = useState(1)
   const [productsPerPage, setProductsPerPage] = useState(10)
@@ -59,9 +64,24 @@ export const ReviewProductsListingUI = (props) => {
     setCurrentProducts(_currentProducts)
   }, [productState, currentPage, productsPerPage])
 
-  const handleOpenReview = (product) => {
+  const handleOpenReview = (product, isInitialRender) => {
     setCurProduct(product)
+    setCurProductId(product?.id)
+    setCurCategoryId(product?.category?.id)
     setOpenReview(true)
+    if (!isInitialRender) {
+      const tab = query.get('tab')
+      const business = query.get('business')
+      history.replace(`${location.pathname}?tab=${tab}&business=${business}&category=${product?.category?.id}&product=${product.id}`)
+    }
+  }
+
+  const handleCloseReviewDetails = () => {
+    setCurProduct(null)
+    setOpenReview(false)
+    const tab = query.get('tab')
+    const business = query.get('business')
+    history.replace(`${location.pathname}?tab=${tab}&business=${business}`)
   }
 
   useEffect(() => {
@@ -72,6 +92,16 @@ export const ReviewProductsListingUI = (props) => {
     handleChangeSearch(parentSearchValue)
   }, [parentSearchValue])
 
+  useEffect(() => {
+    const category = query.get('category')
+    const product = query.get('product')
+    if (category && product) {
+      setCurCategoryId(Number(category))
+      setCurProductId(Number(product))
+      setOpenReview(true)
+    }
+  }, [])
+
   return (
     <>
       <ReviewsListingContainer>
@@ -154,15 +184,13 @@ export const ReviewProductsListingUI = (props) => {
           sidebarId='review-details'
           defaultSideBarWidth={550}
           open={openReview}
-          onClose={() => {
-            setCurProduct(null)
-            setOpenReview(false)
-          }}
+          onClose={() => handleCloseReviewDetails()}
         >
           <ProductReviewDetails
             businessId={businessId}
             product={curProduct}
-            productId={curProduct?.id}
+            productId={curProductId}
+            categoryId={curCategoryId}
           />
         </SideBar>
       )}

package/src/components/BusinessIntelligence/ReviewsListing/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 { useLanguage } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { List as MenuIcon, CaretDownFill } from 'react-bootstrap-icons'
@@ -21,21 +22,30 @@ import {
 } from './styles'
 
 export const ReviewsListing = (props) => {
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [showOption, setShowOption] = useState('business')
   const [searchValue, setSearchValue] = useState(null)
   const [showSelect, setShowSelect] = useState(false)
   const [business, setBusiness] = useState('')
+  const [businessId, setBusinessId] = useState(null)
 
   const changeBusinessState = (business) => {
     setShowSelect(false)
     setBusiness(business)
+    setBusinessId(business.id)
+    const tab = query.get('tab')
+    history.replace(`${location.pathname}?tab=${tab}&business=${business.id}`)
   }
 
-  const handleChangeOption = (option) => {
+  const handleChangeOption = (option, isInitialRender) => {
     setShowOption(option)
-    if (option === 'products' && !business) setShowSelect(true)
+    if (option === 'products' && !businessId) setShowSelect(true)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?tab=${option}`)
+    }
   }
 
   const handleOpenProducts = (business) => {
@@ -44,6 +54,22 @@ export const ReviewsListing = (props) => {
     setShowSelect(false)
   }
 
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      const businessId = query.get('business')
+      if (tab === 'products' && businessId) {
+        setShowOption('products')
+        setShowSelect(false)
+        setBusinessId(Number(businessId))
+      } else {
+        handleChangeOption(tab, true)
+      }
+    } else {
+      handleChangeOption(showOption)
+    }
+  }, [])
+
   return (
     <>
       <ReviewsListingContainer>
@@ -138,10 +164,10 @@ export const ReviewsListing = (props) => {
             parentSearchValue={searchValue}
           />
         )}
-        {showOption === 'products' && business?.id && (
+        {showOption === 'products' && businessId && (
           <ReviewProductsListing
             parentSearchValue={searchValue}
-            businessId={business?.id}
+            businessId={businessId}
           />
         )}
       </ReviewsListingContainer>

package/src/components/BusinessIntelligence/UserReviewDetails/index.js

@@ -20,7 +20,7 @@ import {
 
 const UserReviewDetailsUI = (props) => {
   const {
-    driver,
+    userState,
     userReviewState
   } = props
 
@@ -48,12 +48,12 @@ const UserReviewDetailsUI = (props) => {
     <>
       <ReviewDetailsContainer>
         <Header>
-          <h1>{driver?.name} {driver?.lastname}</h1>
+          <h1>{userState.user?.name} {userState.user?.lastname}</h1>
         </Header>
         <DriverPhotoContainer>
           <WrapperImage>
-            {driver?.photo ? (
-              <Image bgimage={optimizeImage(driver?.photo, 'w_120,c_limit')} />
+            {userState.user?.photo ? (
+              <Image bgimage={optimizeImage(userState.user?.photo, 'w_120,c_limit')} />
             ) : (
               <PersonFill />
             )}

package/src/components/BusinessIntelligence/UsersReviewList/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import {
   useLanguage,
   useUtils,
@@ -30,11 +31,14 @@ const DriversReviewListUI = (props) => {
     defaultUserTypesSelected
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ optimizeImage, parseNumber }] = useUtils()
 
   const [openReview, setOpenReview] = useState(false)
-  const [curDriver, setCurDriver] = useState(null)
+  const [curUser, setCurUser] = useState(null)
+  const [curUserId, setCurUserId] = useState(null)
   const headerTitle = defaultUserTypesSelected.length === 1 && defaultUserTypesSelected[0] === 3 ? t('CUSTOMER', 'Customer') : defaultUserTypesSelected[0] === 8 ? t('PROFESSIONAL', 'Professional') : t('DRIVER', 'Driver')
 
   const handleChangePage = (page) => {
@@ -52,16 +56,36 @@ const DriversReviewListUI = (props) => {
   }, [parentSearchValue])
 
   const handleOpenReview = (user) => {
-    setCurDriver(user)
+    setCurUser(user)
+    setCurUserId(user.id)
     setOpenReview(true)
   }
 
-  const handleClickReview = (e, user) => {
-    const isInvalid = e.target.closest('.review-enabled') || e.target.closest('.review-actions')
+  const handleClickReview = (e, user, isInitialRender) => {
+    const isInvalid = e?.target?.closest('.review-enabled') || e.target.closest('.review-actions')
     if (isInvalid) return
     handleOpenReview(user)
+    if (!isInitialRender) {
+      const tab = query.get('tab')
+      history.replace(`${location.pathname}?tab=${tab}&id=${user.id}`)
+    }
   }
 
+  const handleCloseReviewDetails = () => {
+    setCurUser(null)
+    setOpenReview(false)
+    const tab = query.get('tab')
+    history.replace(`${location.pathname}?tab=${tab}`)
+  }
+
+  useEffect(() => {
+    const id = query.get('id')
+    if (id) {
+      setCurUserId(Number(id))
+      setOpenReview(true)
+    }
+  }, [])
+
   return (
     <>
       <ReviewsTable>
@@ -94,7 +118,7 @@ const DriversReviewListUI = (props) => {
           usersList.users.map(user => (
             <ReviewTbody
               key={user.id}
-              active={user.id === curDriver?.id}
+              active={user.id === curUser?.id}
               onClick={e => handleClickReview(e, user)}
             >
               <tr>
@@ -144,15 +168,12 @@ const DriversReviewListUI = (props) => {
           sidebarId='driver-review-details'
           defaultSideBarWidth={550}
           open={openReview}
-          onClose={() => {
-            setCurDriver(null)
-            setOpenReview(false)
-          }}
+          onClose={() => handleCloseReviewDetails()}
           showExpandIcon
         >
           <UserReviewDetails
-            userId={curDriver?.id}
-            driver={curDriver}
+            userId={curUserId}
+            user={curUser}
           />
         </SideBar>
       )}

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, RecoveryActionDetail as RecoveryActionDetailController } from 'ordering-components-admin-external'
 import { Alert, Confirm } from '../../Shared'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
@@ -30,6 +31,8 @@ const RecoveryActionDetailUI = (props) => {
     handleDeleteRecoveryAction
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -44,7 +47,7 @@ const RecoveryActionDetailUI = (props) => {
     { key: 'notifications', name: t('NOTIFICATIONS', 'Notifications') }
   ]
 
-  const handleSelectOption = (key) => {
+  const handleSelectOption = (key, isInitialRender) => {
     if (key === 'notifications' && isAddMode) {
       setAlertState({
         open: true,
@@ -53,6 +56,10 @@ const RecoveryActionDetailUI = (props) => {
       return
     }
     setSelectedOption(key)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&tab=${key}`)
+    }
   }
 
   const closeAlert = () => {
@@ -88,6 +95,16 @@ const RecoveryActionDetailUI = (props) => {
     })
   }, [actionState])
 
+  useEffect(() => {
+    if (Object.keys(recoveryActionState.action).length === 0) return
+    const tab = query.get('tab')
+    if (tab) {
+      handleSelectOption(tab, true)
+    } else {
+      handleSelectOption(selectedOption)
+    }
+  }, [recoveryActionState.action])
+
   return (
     <>
       <RecoveryActionDetailContainer>
@@ -151,6 +168,7 @@ const RecoveryActionDetailUI = (props) => {
         {selectedOption === 'notifications' && (
           <RecoveryNotificationList
             {...props}
+            action={recoveryActionState.action}
           />
         )}
       </RecoveryActionDetailContainer>