From 90a5069f31d19b0ade86ba15521633b9d7af1097 Mon Sep 17 00:00:00 2001
From: Romain CREY <ext.sopra.rcrey@grandlyon.com>
Date: Tue, 26 May 2020 17:42:05 +0200
Subject: [PATCH] welcome modal in component
---
.../WelcomeModalContainer.tsx | 78 +++++++++++++++++++
1 file changed, 78 insertions(+)
create mode 100644 src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx
diff --git a/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx b/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx
new file mode 100644
index 000000000..dae75ee79
--- /dev/null
+++ b/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx
@@ -0,0 +1,78 @@
+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))
--
GitLab