betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

♻️ Refacto suggestion component 

Co-authored-by: Lucas Stoebner <stoebnerl@gmail.com>
pull/2314/head
Félix 2022-10-10 14:59:51 +02:00 committed by Johan Girod
parent 97e0ec70dc
commit 184e5511e6
1 changed files with 75 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
site/source/components/Feedback/index.tsx
View File

@ -7,10 +7,10 @@ import { Link } from '@/design-system/typography/link'
import { Body, SmallBody } from '@/design-system/typography/paragraphs'
import { CurrentSimulatorDataContext } from '@/pages/Simulateurs/metadata'
import React, { useCallback, useContext, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { Trans } from 'react-i18next'
import { useLocation } from 'react-router-dom'
import styled from 'styled-components'
import { TrackingContext } from '../../ATInternetTracking'
import { TrackingContext } from '@/ATInternetTracking'
import * as safeLocalStorage from '../../storage/safeLocalStorage'
import { JeDonneMonAvis } from '../JeDonneMonAvis'
import { INSCRIPTION_LINK } from '../layout/Footer/InscriptionBetaTesteur'
@ -30,6 +30,7 @@ const setFeedbackGivenForUrl = (url: string) => {
JSON.stringify(new Date().toISOString())
)
}
// Ask for feedback again after 4 months
const askFeedback = (url: string) => {
const previousFeedbackDate = safeLocalStorage.getItem(localStorageKey(url))
@ -43,21 +44,14 @@ const askFeedback = (url: string) => {
)
}
const Container = styled.div`
padding: 1rem 0 1.5rem 0;
text-align: center;
`
export default function PageFeedback({ customMessage }: PageFeedbackProps) {
const url = useLocation().pathname
const currentSimulatorData = useContext(CurrentSimulatorDataContext)
const [display, setDisplay] = useState(askFeedback(url))
const [state, setState] = useState({
showForm: false,
showThanks: false,
})
const tag = useContext(TrackingContext)
const { t } = useTranslation()
const handleFeedback = useCallback(
(rating: 'mauvais' | 'moyen' | 'bien' | 'très bien') => {
@ -79,83 +73,9 @@ export default function PageFeedback({ customMessage }: PageFeedbackProps) {
setState({ ...state, showForm: true })
}, [state])
if (!display) {
return null
}
return (
<Container>
{!state.showForm && !state.showThanks && (
<>
<SmallBody>
{customMessage || (
<Trans i18nKey="feedback.question">
Êtes-vous satisfait de cette page ?
</Trans>
)}{' '}
</SmallBody>
<div
css={`
display: flex;
flex-wrap: wrap;
justify-content: center;
`}
>
<div>
<EmojiButton onClick={() => handleFeedback('mauvais')}>
<Emoji
emoji="🙁"
aria-label="Pas satisfait, envoyer cette réponse"
aria-hidden={false}
/>
</EmojiButton>
<EmojiButton onClick={() => handleFeedback('moyen')}>
<Emoji
emoji="😐"
aria-label="Moyennement satisfait, envoyer cette réponse"
aria-hidden={false}
/>
</EmojiButton>
</div>
<div>
<EmojiButton onClick={() => handleFeedback('bien')}>
<Emoji
emoji="🙂"
aria-label="Plutôt satisfait, envoyer cette réponse"
aria-hidden={false}
/>
</EmojiButton>
<EmojiButton onClick={() => handleFeedback('très bien')}>
<Emoji
emoji="😀"
aria-label="Très satisfait, envoyer cette réponse"
aria-hidden={false}
/>
</EmojiButton>
</div>
</div>
</>
)}
{(state.showThanks || state.showForm) && (
<button
onClick={() => setDisplay(false)}
style={{
position: 'absolute',
right: '-2.4rem',
top: '-0.6rem',
fontSize: '200%',
}}
css={`
:hover {
opacity: 0.8;
}
`}
aria-label={t('Fermer')}
>
<small>×</small>
</button>
)}
{state.showThanks && (
{(state.showThanks || !askFeedback(url)) ? (
<>
<Body>
<Strong>
@ -172,8 +92,54 @@ export default function PageFeedback({ customMessage }: PageFeedbackProps) {
</Trans>
</Body>
</>
) : (
<>
<SmallBody>
{customMessage || (
<Trans i18nKey="feedback.question">
Êtes-vous satisfait de cette page ?
</Trans>
)}
</SmallBody>
<div
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center'
}}
>
<EmojiButton onClick={() => handleFeedback('mauvais')}>
<Emoji
emoji="🙁"
aria-label="Pas satisfait, envoyer cette réponse"
aria-hidden={false}
/>
</EmojiButton>
<EmojiButton onClick={() => handleFeedback('moyen')}>
<Emoji
emoji="😐"
aria-label="Moyennement satisfait, envoyer cette réponse"
aria-hidden={false}
/>
</EmojiButton>
<EmojiButton onClick={() => handleFeedback('bien')}>
<Emoji
emoji="🙂"
aria-label="Plutôt satisfait, envoyer cette réponse"
aria-hidden={false}
/>
</EmojiButton>
<EmojiButton onClick={() => handleFeedback('très bien')}>
<Emoji
emoji="😀"
aria-label="Très satisfait, envoyer cette réponse"
aria-hidden={false}
/>
</EmojiButton>
</div>
</>
)}
{state.showForm ? (
{state.showForm && (
<Popover
isOpen
title="Votre avis nous interesse"
@ -183,31 +149,26 @@ export default function PageFeedback({ customMessage }: PageFeedbackProps) {
>
<Form />
</Popover>
) : (
<>
<Spacing md />
<Grid container spacing={2} css={{ justifyContent: 'center' }}>
{currentSimulatorData?.pathId === 'simulateurs.salarié' ? (
<Grid item>
<JeDonneMonAvis />
</Grid>
) : (
<Grid item>
<Button
onPress={openSuggestionForm}
color="tertiary"
size="XS"
light
>
<Trans i18nKey="feedback.reportError">
Faire une suggestion
</Trans>
</Button>
</Grid>
)}
</Grid>
</>
)}
<Spacing md />
<Grid container spacing={2} style={{ justifyContent: 'center' }}>
<Grid item>
{currentSimulatorData?.pathId === 'simulateurs.salarié' ? (
<JeDonneMonAvis />
) : (
<Button
onPress={openSuggestionForm}
color="tertiary"
size="XS"
light
>
<Trans i18nKey="feedback.reportError">
Faire une suggestion
</Trans>
</Button>
)}
</Grid>
</Grid>
</Container>
)
}
@ -223,3 +184,8 @@ const EmojiButton = styled.button`
transform: scale(1.3);
}
`
const Container = styled.div`
padding: 1rem 0 1.5rem 0;
text-align: center;
`