welcome modal in component

src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx

+import React, { useState, useEffect } from 'react'
+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'
+
+interface WelcomeModalContainerProps {
+  t: Function
+  client: Client
+}
+
+const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({
+  t,
+  client,
+}: WelcomeModalContainerProps) => {
+  const [modalOpen, setModalOpen] = 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 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>
+    </React.Fragment>
+  )
+}
+
+export default translate()(withClient(WelcomeModalContainer))