welcome modal in component

package.json

@@ -23,7 +23,7 @@
     "build": "yarn run build:css && yarn run build:browser",
     "release": "standard-version --no-verify",
     "winstack": "start powershell -command docker run --rm -it -p 8080:8080 -p 5984:5984 -p 8025:8025 -v $PWD/build:/data/cozy-app/ecolyo -v $PWD/data/konnectors_sources/:/data/cozy_konnectors/ -v $PWD/data:/usr/local/couchdb/data -v $PWD/docker/disableCSP.yaml:/etc/cozy/cozy.yaml registry.forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/cozy-env",
-    "linuxstack": "docker run --rm -it -p 8080:8080 -p 5984:5984 -p 8025:8025 -v $(pwd)/build:/data/cozy-app/ecolyo -v ~/cozy/data/db/konnectors_sources/:/data/cozy_konnectors/ -v ~/cozy/data/db:/usr/local/couchdb/data -v ~/cozy/data/storage:/data/cozy-storage -v $(pwd)/docker/disableCSP.yaml:/etc/cozy/cozy.yaml registry.forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/cozy-env",
+    "linuxstack": "docker run --rm -it -p 8080:8080 -p 5984:5984 -p 8025:8025 -v $(pwd)/build:/data/cozy-app/ecolyo -v ~/cozy/data/db/konnectors_sources/:/data/cozy_konnectors/ -v ~/cozy/data/db:/usr/local/couchdb/data -v ~/cozy/data/storage:/data/cozy-storage -v $(pwd)/docker/disableCSP.yaml:/etc/cozy/cozy.yaml 5fdc0725024f",
     "load-data": "cd test && importData.bat"
   },
   "repository": {

src/components/ContainerComponents/ViewContainer/HomeViewContainer.tsx

-import React, { useState, useContext, useEffect } from 'react'
+import React, { useState, useContext } from 'react'
 import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
 import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
 import Header from 'components/ContainerComponents/Header/Header'
@@ -10,39 +10,15 @@ import { AppContext } from 'components/Contexts/AppContextProvider'
 import MultliFluidIndicatorsContainer from 'components/ContainerComponents/IndicatorsContainer/MultiFluidIndicatorsContainer'
 import ChallengeCardContainer from 'components/ContainerComponents/ChallengeCardContainer/ChallengeCardContainer'
 import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
-import Modal from 'components/CommonKit/Modal/Modal'
-import StyledButton from 'components/CommonKit/Button/StyledButton'
-import { translate } from 'cozy-ui/react/I18n'
-import { withClient, Client } from 'cozy-client'
-import { USERPROFILE_DOCTYPE } from 'doctypes'
-import useInstanceSettings from 'components/Hooks/userInstanceSettings'
+import WelcomeModalContainer from '../WelcomeModalContainer/WelcomeModalContainer'
 
-interface HomeViewContainerProps {
-  t: Function
-  client: Client
-}
-
-const HomeViewContainer: React.FC = ({ t, client }: HomeViewContainerProps) => {
+const HomeViewContainer: React.FC = () => {
   const [timeStep, setTimeStep] = useState<TimeStep>(20)
   const [resetRefenceDate, setResetReferenceDate] = useState<boolean>(false)
   const { fluidTypes } = useContext(AppContext)
   const [headerHeight, setHeaderHeight] = useState<number>(0)
-  const [modalOpen, setModalOpen] = useState<boolean>(true)
   const [isChartLoading, setChartLoading] = useState<boolean>(true)
   const [isIndicatorsLoading, setIndicatorsLoading] = useState<boolean>(true)
-  const { data: instanceSettings } = useInstanceSettings(client)
-
-  async function updateWelcomeModalState() {
-    await client
-      .query(client.find(USERPROFILE_DOCTYPE).limitBy(1))
-      .then(async ({ data }) => {
-        const doc = data[0]
-        await client.save({
-          ...doc,
-          haveSeenWelcomeModal: true,
-        })
-      })
-  }
 
   const setChartLoaded = () => {
     setChartLoading(false)
@@ -66,46 +42,9 @@ const HomeViewContainer: React.FC = ({ t, client }: HomeViewContainerProps) => {
     setHeaderHeight(height)
   }
 
-  const handleCloseClick = () => {
-    setModalOpen(false)
-    updateWelcomeModalState()
-  }
-
-  useEffect(() => {
-    async function getWelcomeModalState() {
-      await client
-        .query(client.find(USERPROFILE_DOCTYPE).limitBy(1))
-        .then(async ({ data }) => {
-          const welcomeModalState = data[0].haveSeenWelcomeModal
-          setModalOpen(!welcomeModalState)
-        })
-    }
-    getWelcomeModalState()
-  }, [])
-
   return (
     <React.Fragment>
-      <Modal
-        open={modalOpen}
-        handleCloseClick={handleCloseClick}
-        yellowBorder="yellow-border"
-      >
-        <div className="wm-header text-24-bold">
-          {t('COMMON.WELCOME_MODAL_TITLE')}
-        </div>
-        <div className="wm-name text-24-bold">
-          {instanceSettings.public_name} !
-        </div>
-        <div className="wm-perso text-18-bold">
-          {t('COMMON.WELCOME_MODAL_PERSO')}
-        </div>
-        <div className="wm-connect text-18-bold">
-          {t('COMMON.WELCOME_MODAL_CONNECT')}
-        </div>
-        <StyledButton className="button-ok" onClick={handleCloseClick}>
-          {t('COMMON.WELCOME_MODAL_OK')}
-        </StyledButton>
-      </Modal>
+      <WelcomeModalContainer />
       <CozyBar />
       {fluidTypes && fluidTypes.length > 0 ? (
         <>
@@ -153,4 +92,4 @@ const HomeViewContainer: React.FC = ({ t, client }: HomeViewContainerProps) => {
   )
 }
 
-export default translate()(withClient(HomeViewContainer))
+export default HomeViewContainer