From 184e5511e6706e8ceaefc04e128a1feed0245031 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix?= <legrelle.f@gmail.com>
Date: Mon, 10 Oct 2022 14:59:51 +0200
Subject: [PATCH] :recycle: Refacto suggestion component

Co-authored-by: Lucas Stoebner <stoebnerl@gmail.com>
---
 site/source/components/Feedback/index.tsx | 184 +++++++++-------------
 1 file changed, 75 insertions(+), 109 deletions(-)

diff --git a/site/source/components/Feedback/index.tsx b/site/source/components/Feedback/index.tsx
index 3f510ddd3..ccdd5dfe6 100644
--- a/site/source/components/Feedback/index.tsx
+++ b/site/source/components/Feedback/index.tsx
@@ -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;
+`