Merge pull request #12 from sgmap/commentaires-utilisateur

Ajout d'un champ libre de commentaire en fin de simulation

source/components/Satisfaction.css

@@ -0,0 +1,59 @@
+#satisfaction {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+}
+
+
+
+
+.satisfaction-smiley {
+	color: #4A89DC;
+	font-size: 90%;
+	font-weight: bold;
+	border-radius: 6em;
+	width: 2em;
+	text-align: center;
+	display: inline-block;
+	border: 2px solid #4A89DC;
+	margin: 0 .6em;
+	padding: .3em 0;
+	transform: rotate(90deg)
+}
+
+#satisfaction textarea {
+	border: 1px solid rgb(74, 137, 220, .5);
+	border-radius: .3em;
+	width: 65%;
+	height: 5em;
+	padding: .6em;
+	font-size: 85%;
+}
+
+#sendMessage {
+	font-size: 100%;
+	border: none;
+	color: rgb(74, 137, 220);
+
+	transition: color 1s;
+}
+#sendMessage:disabled {
+	color: #bbb;
+	cursor: default;
+}
+#sendMessage i {
+	margin-right: .6em;
+}
+#messageSent {
+	color: rgb(74, 137, 220);
+	font-size: 160%
+}
+
+#satisfaction p {
+	font-size: 85%;
+}
+
+#satisfaction p a {
+	text-decoration: underline;
+}

source/components/Satisfaction.js

@@ -2,6 +2,8 @@ import React, {Component} from 'react'
 import HoverDecorator from 'Components/HoverDecorator'
 import 'whatwg-fetch'
 import {connect} from 'react-redux'
+import './Satisfaction.css'
+import classNames from 'classnames'
 
 @connect(
 	state => ({
@@ -10,9 +12,12 @@ import {connect} from 'react-redux'
 )
 export default class Satisfaction extends Component {
 	state = {
-		answer: false
+		answer: false,
+		message: null,
+		messageSent: false
 	}
-	sendSatisfaction(satisfait) {
+	sendSatisfaction(answer) {
+		let {message} = this.state
 		fetch('https://embauche.beta.gouv.fr/retour-syso', {
 			method: 'POST',
 			headers: {
@@ -20,8 +25,8 @@ export default class Satisfaction extends Component {
 			},
 			body: JSON.stringify({
 				fields: {
-					satisfait,
-					message: '', //pas de message pour l'instant
+					satisfait: answer || '',
+					message: message || '',
 					date: new Date().toISOString(),
 					id: this.props.sessionId,
 					url: document.location.href.toString()
@@ -30,30 +35,57 @@ export default class Satisfaction extends Component {
 		}).then(response => {
 			if (!response.ok)
 				return console.log('Erreur dans la récolte de la satisfaction') //eslint-disable-line no-console
-			this.setState({answer: satisfait})
-
+			if (message)
+				return this.setState({messageSent: true})
+			this.setState({answer})
 		})
 	}
 	render() {
-		let {answer} = this.state
-		if (answer)
+		let {answer, message, messageSent} = this.state,
+			validMessage = typeof message == 'string' && message.length > 4,
+			onSmileyClick = s => this.sendSatisfaction(s)
+console.log(messageSent)
+		if (!answer)
 			return (
-				<p>
-					{answer === ':)' ? 'Une suggestion' : 'Un problème'} ? Envie de discuter ? <br/>
-					<a href={"mailto:contact@embauche.beta.gouv.fr?subject=Suggestion pour le simulateur " + this.props.simu}>
-						Écrivez-nous <i className="fa fa-envelope-open-o" aria-hidden="true" style={{margin: '0 .3em'}}></i>
-					</a>
+				<p id="satisfaction">
+					Vous êtes satisfait du simulateur ?
+					{" "}
+					<Smiley text=":)" hoverColor="#16a085" clicked={onSmileyClick}/>
+					<Smiley text=":|" hoverColor="#f39c12" clicked={onSmileyClick}/>
 				</p>
 			)
 
+		let messagePlaceholder = {
+			':)': 'Envoyez-nous un commentaire !',
+			':|': "Qu'est-ce qui n'a pas été ?"
+		}[answer]
+
 		return (
-			<p id="satisfaction">
-				Vous êtes satisfait du simulateur ?
-				{" "}
-				<Smiley text=":)" hoverColor="#16a085" clicked={s => this.sendSatisfaction(s)}/>
-				<Smiley text=":|" hoverColor="#f39c12" clicked={s => this.sendSatisfaction(s)}/>
-			</p>
+			<div id="satisfaction">
+				{!messageSent &&
+					<textarea
+						value={this.state.message || ''}
+						onChange={e => this.setState({message: e.target.value})}
+						placeholder={messagePlaceholder} /> }
+				<button id="sendMessage" disabled={!validMessage || messageSent} onClick={() => this.sendSatisfaction()}>
+					{messageSent ?
+						<i id="messageSent" className="fa fa-check" aria-hidden="true"></i>
+					: <span>
+						<i className="fa fa-paper-plane" aria-hidden="true"></i>
+						<span className="text">envoyer</span>
+					</span>
+					}
+				</button>
+				<p>
+					Pour recevoir une réponse, donnez-nous votre adresse ou {' '}
+					<a href={"mailto:contact@embauche.beta.gouv.fr?subject=Suggestion pour le simulateur " + this.props.simu}>
+						envoyez-nous directement un mail <i className="fa fa-envelope-open-o" aria-hidden="true" style={{margin: '0 .3em'}}></i>
+					</a>
+				</p>
+			</div>
 		)
+
+
 	}
 }
 

source/components/Simulateur.css

@@ -146,19 +146,3 @@
 	width: 25%;
 	display: inline-block;
 }
-
-
-
-.satisfaction-smiley {
-	color: #4A89DC;
-	font-size: 90%;
-	font-weight: bold;
-	border-radius: 6em;
-	width: 2em;
-	text-align: center;
-	display: inline-block;
-	border: 2px solid #4A89DC;
-	margin: 0 .6em;
-	padding: .3em 0;
-	transform: rotate(90deg)
-}

source/components/rule/Examples.js

@@ -45,7 +45,7 @@ export default class Examples extends Component {
 
 		return (
 			<div id="examples">
-				<h2 className="subtitled">Examples de calcul</h2>
+				<h2 className="subtitled">Exemples de calcul</h2>
 				<p className="subtitle">Cliquez sur un exemple pour le visualiser</p>
 				{situationExists && <div>
 					<button