refactor(feedback): simpler fb component

src/components/Content/Content.tsx

 import FeedbackModal from 'components/Feedback/FeedbackModal'
 import { ScreenType } from 'enum/screen.enum'
-import React, { useCallback, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { changeScreenType } from 'store/global/global.slice'
 import { useAppDispatch, useAppSelector } from 'store/hooks'
-import { openFeedbackModal } from 'store/modal/modal.slice'
 import './content.scss'
 interface ContentProps {
   children: React.ReactNode
@@ -17,18 +16,11 @@ const Content = ({
   background = 'inherit',
 }: ContentProps) => {
   const dispatch = useAppDispatch()
-  const {
-    global: { screenType },
-    modal: { isFeedbacksOpen },
-  } = useAppSelector(state => state.ecolyo)
+  const { screenType } = useAppSelector(state => state.ecolyo.global)
 
   const cozyBarHeight = 48
   const cozyNavHeight = 56
 
-  const handleFeedbackModalClose = useCallback(() => {
-    dispatch(openFeedbackModal(false))
-  }, [dispatch])
-
   // Set listeners for scroll
   useEffect(() => {
     window.scrollTo(0, 0)
@@ -53,10 +45,7 @@ const Content = ({
 
   return (
     <>
-      <FeedbackModal
-        open={isFeedbacksOpen}
-        handleCloseClick={handleFeedbackModalClose}
-      />
+      <FeedbackModal />
       <div
         className={'content-view'}
         style={{

src/components/Feedback/FeedbackModal.spec.tsx

 import FeedbackModal from 'components/Feedback/FeedbackModal'
 import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
+import * as storeHooks from 'store/hooks'
 import { createMockEcolyoStore } from '../../../tests/__mocks__/store'
-import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
 
 // Value coming from jest.config
 declare let __SAU_LINK__: string
@@ -22,53 +23,51 @@ jest.mock('services/environment.service', () => {
   })
 })
 
-const handleFeedbackModalClose = jest.fn()
+jest.mock('components/Hooks/useExploration', () => () => ['', jest.fn()])
+
+const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')
 
 describe('FeedbackModal component', () => {
-  const store = createMockEcolyoStore()
+  const store = createMockEcolyoStore({ modal: { isFeedbacksOpen: true } })
   beforeEach(() => {
-    store.clearActions()
+    jest.clearAllMocks()
   })
   it('should render the component', () => {
-    // TODO fix empty snapshot
     const component = mount(
       <Provider store={store}>
-        <FeedbackModal
-          open={true}
-          handleCloseClick={handleFeedbackModalClose}
-        />
+        <FeedbackModal />
       </Provider>
-    ).getElement()
-    expect(component).toMatchSnapshot()
+    )
+    expect(toJson(component)).toMatchSnapshot()
   })
 
   describe('FeedbackModal functionalities', () => {
-    it('should close the modal', async () => {
+    it('should close modal with the "x" button', async () => {
       const wrapper = mount(
         <Provider store={store}>
-          <FeedbackModal
-            open={true}
-            handleCloseClick={handleFeedbackModalClose}
-          />
+          <FeedbackModal />
         </Provider>
       )
-      await waitForComponentToPaint(wrapper)
 
       wrapper.find('.modal-paper-close-button').first().simulate('click')
-      expect(handleFeedbackModalClose).toHaveBeenCalledTimes(1)
+      expect(mockAppDispatch).toHaveBeenCalledTimes(1)
+    })
+
+    it('should close modal with the "later" button', async () => {
+      const wrapper = mount(
+        <Provider store={store}>
+          <FeedbackModal />
+        </Provider>
+      )
       wrapper.find('.btn-secondary-positive').first().simulate('click')
-      expect(handleFeedbackModalClose).toHaveBeenCalledTimes(2)
+      expect(mockAppDispatch).toHaveBeenCalledTimes(1)
     })
 
     it('should open the SAU link', () => {
       global.open = jest.fn()
-
       const wrapper = mount(
         <Provider store={store}>
-          <FeedbackModal
-            open={true}
-            handleCloseClick={handleFeedbackModalClose}
-          />
+          <FeedbackModal />
         </Provider>
       )
       wrapper.find('.btn-highlight').first().simulate('click')

src/components/Feedback/FeedbackModal.tsx

@@ -11,22 +11,21 @@ import { IuseI18n, useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import { UserExplorationID } from 'enum/userExploration.enum'
 import React from 'react'
+import { useAppDispatch, useAppSelector } from 'store/hooks'
+import { openFeedbackModal } from 'store/modal/modal.slice'
 import './feedbackModal.scss'
 
 declare let __SAU_LINK__: string
 
-interface FeedbackModalProps {
-  open: boolean
-  handleCloseClick: () => void
-}
-
-const FeedbackModal = ({ open, handleCloseClick }: FeedbackModalProps) => {
+const FeedbackModal = () => {
   const { t }: IuseI18n = useI18n()
   const client: Client = useClient()
+  const dispatch = useAppDispatch()
+  const { isFeedbacksOpen } = useAppSelector(state => state.ecolyo.modal)
   const [, setValidExploration] = useExploration()
 
   const closeModal = () => {
-    handleCloseClick()
+    dispatch(openFeedbackModal(false))
   }
 
   const goToSAU = () => {
@@ -36,11 +35,8 @@ const FeedbackModal = ({ open, handleCloseClick }: FeedbackModalProps) => {
 
   return (
     <Dialog
-      open={open}
-      onClose={(event, reason): void => {
-        event && reason !== 'backdropClick' && closeModal()
-      }}
-      disableEscapeKeyDown
+      open={isFeedbacksOpen}
+      onClose={() => closeModal()}
       aria-labelledby={'accessibility-title'}
       classes={{
         root: 'modal-root',