diff --git a/source/components/Satisfaction.css b/source/components/Satisfaction.css new file mode 100644 index 000000000..f4a5377fb --- /dev/null +++ b/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; +} diff --git a/source/components/Satisfaction.js b/source/components/Satisfaction.js index 74d0bd046..61099a72f 100644 --- a/source/components/Satisfaction.js +++ b/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 ( -

- {answer === ':)' ? 'Une suggestion' : 'Un problème'} ? Envie de discuter ?
- - Écrivez-nous - +

+ Vous êtes satisfait du simulateur ? + {" "} + +

) + let messagePlaceholder = { + ':)': 'Envoyez-nous un commentaire !', + ':|': "Qu'est-ce qui n'a pas été ?" + }[answer] + return ( -

- Vous êtes satisfait du simulateur ? - {" "} - this.sendSatisfaction(s)}/> - this.sendSatisfaction(s)}/> -

+
+ {!messageSent && +