Skip to content
Snippets Groups Projects
Commit 5b6e5e07 authored by Yoan VALLET's avatar Yoan VALLET
Browse files

feat: add TutorialWelcome to App component

parent 2ec88424
1 merge request!336Feature/cgu tutorials creation
......@@ -12,11 +12,12 @@ import SplashRoot from 'components/Splash/SplashRoot'
import SplashScreen from 'components/Splash/SplashScreen'
import SplashScreenError from 'components/Splash/SplashScreenError'
import GCUModal from 'components/GCU/GCUModal'
import TutorialWelcome from './Tutorial/TutorialWelcome'
export const history = createBrowserHistory()
export const App = () => {
const { GCUApprovalDate } = useSelector(
const { GCUApprovalDate, isFirstConnection, tutorial } = useSelector(
(state: AppStore) => state.ecolyo.profile
)
return (
......@@ -30,6 +31,9 @@ export const App = () => {
<GCUModal />
) : (
<>
<TutorialWelcome
open={isFirstConnection && !tutorial.isWelcomeSeen}
/>
<Navbar />
<Main>
<Content className="app-content" tabIndex="-1">
......
import React, { useCallback, useEffect } from 'react'
import './content.scss'
import { useClient } from 'cozy-client'
import { history } from 'components/App'
import { useSelector, useDispatch } from 'react-redux'
import { AppStore } from 'store'
import { changeScreenType } from 'store/global/global.actions'
import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
import { updateProfile } from 'store/profile/profile.actions'
import MailService from 'services/mail.service'
import { ScreenType } from 'enum/screen.enum'
import get from 'lodash/get'
import FeedbackModal from 'components/Feedback/FeedbackModal'
import TutorialWelcome from 'components/Tutorial/TutorialWelcome'
interface ContentProps {
children?: React.ReactNode
......@@ -26,12 +19,8 @@ const Content: React.FC<ContentProps> = ({
height = 0,
background = 'inherit',
}: ContentProps) => {
const client = useClient()
const dispatch = useDispatch()
const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
const { isFirstConnection, tutorial } = useSelector(
(state: AppStore) => state.ecolyo.profile
)
const { isFeedbacksOpen } = useSelector(
(state: AppStore) => state.ecolyo.modal
)
......@@ -39,42 +28,6 @@ const Content: React.FC<ContentProps> = ({
const cozyBarHeight = 48
const cozyNavHeight = 56
const setTutorialWelcomeViewed = useCallback(async () => {
const mailService = new MailService()
let username = ''
// TODO Move this code to Mail Service
const settings = await client
.getStackClient()
.fetchJSON('GET', '/settings/instance')
const publicName = get(settings, 'data.attributes.public_name')
if (publicName) {
username = publicName
}
const bodyWelcome = mailService.CreateBodyWelcome(
username,
window.location.href
)
const mailData = {
mode: 'noreply',
subject: '[Ecolyo] - Bienvenue',
parts: [
{
type: 'text/html',
body: bodyWelcome,
},
],
}
mailService.SendMail(client, mailData)
dispatch(
updateProfile({
isFirstConnection: false,
tutorial: {
isWelcomeSeen: true,
},
})
)
}, [client, dispatch])
const handleFeedbackModalClose = useCallback(() => {
dispatch(updateModalIsFeedbacksOpen(false))
}, [dispatch])
......@@ -107,10 +60,6 @@ const Content: React.FC<ContentProps> = ({
return (
<>
<TutorialWelcome
open={isFirstConnection && !tutorial.isWelcomeSeen}
handleCloseClick={setTutorialWelcomeViewed}
/>
<FeedbackModal
open={isFeedbacksOpen}
handleCloseClick={handleFeedbackModalClose}
......
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
.gcu-content-root{
height: 100%;
width: 100%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 2rem;
.gcu-content-wrapper{
width: 36rem;
margin: 2rem 0;
color: $grey-bright;
margin: 2rem;
@media #{$large-phone} {
width: 100%;
}
> div:last-child{
margin-bottom: 1rem;
}
......
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
.gcu-modal-root{
height: 100%;
width: 100%;
......@@ -8,6 +11,18 @@
overflow-x: hidden;
overflow-y: scroll;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: $scrollbar-track;
}
&::-webkit-scrollbar-thumb {
background: $scrollbar-thumb;
}
}
.gcu-modal-footer{
position: relative;
......@@ -18,7 +33,10 @@
.gcu-modal-icon{
position: absolute;
left: calc(50% - 13px);
top: -35px;
top: -42px;
@media #{$large-phone} {
top: -35px;
}
}
.rounded {
border-radius: 22px;
......
import React from 'react'
import React, { useCallback } from 'react'
import './tutorialWelcome.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useClient } from 'cozy-client'
import { useDispatch } from 'react-redux'
import { updateProfile } from 'store/profile/profile.actions'
import MailService from 'services/mail.service'
import userInstanceSettings from 'components/Hooks/userInstanceSettings'
import Dialog from '@material-ui/core/Dialog'
import Button from '@material-ui/core/Button'
import userInstanceSettings from 'components/Hooks/userInstanceSettings'
import './tutorialWelcome.scss'
import get from 'lodash/get'
interface TutorialWelcomeProps {
open: boolean
handleCloseClick: () => void
}
const TutorialWelcome: React.FC<TutorialWelcomeProps> = ({
open,
handleCloseClick,
}: TutorialWelcomeProps) => {
const { t } = useI18n()
const client = useClient()
const dispatch = useDispatch()
const { data: instanceSettings } = userInstanceSettings()
const setTutorialWelcomeViewed = useCallback(async () => {
const mailService = new MailService()
let username = ''
// TODO Move this code to Mail Service
const settings = await client
.getStackClient()
.fetchJSON('GET', '/settings/instance')
const publicName = get(settings, 'data.attributes.public_name')
if (publicName) {
username = publicName
}
const bodyWelcome = mailService.CreateBodyWelcome(
username,
window.location.href
)
const mailData = {
mode: 'noreply',
subject: '[Ecolyo] - Bienvenue',
parts: [
{
type: 'text/html',
body: bodyWelcome,
},
],
}
mailService.SendMail(client, mailData)
dispatch(
updateProfile({
isFirstConnection: false,
tutorial: {
isWelcomeSeen: true,
},
})
)
}, [client, dispatch])
return (
<Dialog
open={open}
disableBackdropClick
disableEscapeKeyDown
onClose={handleCloseClick}
aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
......@@ -33,28 +73,32 @@ const TutorialWelcome: React.FC<TutorialWelcomeProps> = ({
{t('tutorial_welcome.accessibility.window_title')}
</div>
<div className="welcome-root">
<div className="welcome-header text-24-bold">
<span>{t('tutorial_welcome.title')}</span>
{instanceSettings.public_name ? (
<div className="wm-name text-24-bold">{`${instanceSettings.public_name} !`}</div>
) : (
' !'
)}
<div className="welcome-content">
<div className="welcome-header text-24-bold">
<span>{t('tutorial_welcome.title')}</span>
{instanceSettings.public_name ? (
<div className="wm-name text-24-bold">{`${instanceSettings.public_name} !`}</div>
) : (
' !'
)}
</div>
<div className="welcome-perso text-18-bold">
{t('tutorial_welcome.perso')}
</div>
</div>
<div className="welcome-perso text-18-bold">
{t('tutorial_welcome.perso')}
<div className="welcome-footer">
<Button
aria-label={t('tutorial_welcome.accessibility.button_valid')}
className="button-ok"
onClick={setTutorialWelcomeViewed}
classes={{
root: 'btn-highlight',
label: 'text-16-bold',
}}
>
{t('tutorial_welcome.button_valid')}
</Button>
</div>
<Button
aria-label={t('tutorial_welcome.accessibility.button_valid')}
className="button-ok"
onClick={handleCloseClick}
classes={{
root: 'btn-highlight',
label: 'text-16-bold',
}}
>
{t('tutorial_welcome.button_valid')}
</Button>
</div>
</Dialog>
)
......
......@@ -2,13 +2,30 @@
@import 'src/styles/base/breakpoint';
.welcome-root{
.welcome-header {
background: $multi-color-radial-gradient;
background-clip: 'text';
-webkit-background-clip: text;
color: transparent;
margin-bottom: 1.25rem;
text-align: center;
height: 100%;
width: 36rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
@media #{$large-phone} {
width: 100%;
}
.welcome-content{
margin: 2rem 0;
height: 100%;
flex: 1;
.welcome-header {
background: $multi-color-radial-gradient;
background-clip: 'text';
-webkit-background-clip: text;
color: transparent;
margin-bottom: 1.25rem;
text-align: center;
}
}
.welcome-footer{
margin: 1.5rem 0;
}
}
......
......@@ -2,7 +2,7 @@
div.modal-root{
.MuiBackdrop-root{
background-color: rgba(27, 28, 34, 0.85);
background-color: hsla(231, 11%, 12%, 0.85);
}
}
......@@ -47,25 +47,18 @@ div.modal-paper{
div.modal-paper-full-screen{
background: $grey-linear-gradient-background;
width: 36rem;
width: 100%;
max-width: 100%;
height: 85vh;
max-height: 85vh;
height: 100%;
max-height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
align-items: center;
color: $white;
@media #{$tablet} {
width: 35rem;
}
@media #{$large-phone} {
width: 100%;
height: 100%;
max-height: 100%;
}
display: flex;
align-items: center;
&.dark-background {
background: $dark-light-2;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment