From 4fef964b7ab231c090daf8c7adee895d3c586569 Mon Sep 17 00:00:00 2001
From: Johan Girod <dev@johangirod.com>
Date: Tue, 3 Nov 2020 16:48:59 +0100
Subject: [PATCH] Change le systeme de retour pour zammad (au lieu de netlify
 form)

---
 .../source/components/Feedback/Feedback.css   |  22 ++++
 .../components/Feedback/FeedbackForm.tsx      | 123 ++++++++++--------
 .../layout/Footer/Footer.tsx                  |   3 -
 3 files changed, 90 insertions(+), 58 deletions(-)

diff --git a/mon-entreprise/source/components/Feedback/Feedback.css b/mon-entreprise/source/components/Feedback/Feedback.css
index bd4747a68..80bdea302 100644
--- a/mon-entreprise/source/components/Feedback/Feedback.css
+++ b/mon-entreprise/source/components/Feedback/Feedback.css
@@ -18,3 +18,25 @@
 		display: inline;
 	}
 }
+
+.zammad-form > .form-group:nth-of-type(2) {
+	display: none;
+}
+.zammad-form > .btn[type='submit'] {
+	display: inline-block;
+	padding: 0.4rem 0.8rem;
+	color: inherit;
+	text-decoration: none;
+	border: 1px solid;
+	/* outline: none; */
+	line-height: initial;
+	display: inline-block;
+	border-radius: 0.3rem;
+	transition: all 0.15s;
+	text-align: center;
+	text-transform: uppercase;
+
+	font-family: 'Roboto', sans-serif;
+	font-weight: normal;
+	cursor: pointer;
+}
diff --git a/mon-entreprise/source/components/Feedback/FeedbackForm.tsx b/mon-entreprise/source/components/Feedback/FeedbackForm.tsx
index 23859407f..dedb37745 100644
--- a/mon-entreprise/source/components/Feedback/FeedbackForm.tsx
+++ b/mon-entreprise/source/components/Feedback/FeedbackForm.tsx
@@ -1,23 +1,68 @@
 import { ScrollToElement } from 'Components/utils/Scroll'
 import { TrackerContext } from 'Components/utils/withTracker'
-import React, { useContext, useRef } from 'react'
-import { Trans } from 'react-i18next'
+import React, { useContext, useEffect, useRef } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router'
 
 type Props = { onEnd: () => void; onCancel: () => void }
-
+declare global {
+	const $: any
+}
 export default function FeedbackForm({ onEnd, onCancel }: Props) {
-	const formRef = useRef<HTMLFormElement>(null)
-	const tracker = useContext(TrackerContext)
+	// const tracker = useContext(TrackerContext)
+	const pathname = useLocation().pathname
+	const page = pathname.split('/').slice(-1)[0]
+	const isSimulateur = pathname.includes('simulateurs')
+	const lang = useTranslation().i18n.language
+	useEffect(() => {
+		const script = document.createElement('script')
+		script.src = 'https://code.jquery.com/jquery-2.1.4.min.js'
 
-	const handleFormSubmit = (e: React.FormEvent): void => {
-		tracker.push(['trackEvent', 'Feedback', 'written feedback submitted'])
-		e.preventDefault()
-		fetch('/', {
-			method: 'POST',
-			body: new FormData(formRef.current ?? undefined)
-		})
-		onEnd()
-	}
+		document.body.appendChild(script)
+		setTimeout(() => {
+			const script = document.createElement('script')
+			script.id = 'zammad_form_script'
+			script.async = true
+			script.onload = () => {
+				$('#feedback-form').ZammadForm({
+					messageTitle: `Remarque sur ${
+						isSimulateur ? 'le simulateur' : 'la page'
+					} ${page}`,
+					messageSubmit: 'Envoyer',
+					messageThankYou:
+						'Merci pour votre retour ! Vous pouvez aussi nous contacter directement à contact@mon-entreprise.beta.gouv.fr',
+					lang,
+					attributes: [
+						{
+							display: 'Message',
+							name: 'body',
+							tag: 'textarea',
+							placeholder: 'Your Message...',
+							defaultValue: '',
+							rows: 7
+						},
+						{
+							display: 'Nom',
+							name: 'name',
+							tag: 'input',
+							type: 'text',
+							defaultValue: '-'
+						},
+						{
+							display: 'Email (pour recevoir notre réponse)',
+							name: 'email',
+							tag: 'input',
+							type: 'email',
+							placeholder: 'Your Email'
+						}
+					]
+				})
+			}
+			script.src = 'https://mon-entreprise.zammad.com/assets/form/form.js'
+			document.body.appendChild(script)
+		}, 100)
+		// tracker.push(['trackEvent', 'Feedback', 'written feedback submitted'])
+	}, [])
 
 	return (
 		<ScrollToElement onlyIfNotVisible>
@@ -31,47 +76,15 @@ export default function FeedbackForm({ onEnd, onCancel }: Props) {
 					X
 				</button>
 			</div>
-			<form
-				name="feedback"
-				style={{ flex: 1 }}
-				method="post"
-				ref={formRef}
-				onSubmit={handleFormSubmit}
-			>
-				<input type="hidden" name="form-name" value="feedback" />
-				<label htmlFor="message">
-					<p>
-						<Trans i18nKey="feedback.bad.form.headline">
-							Votre retour nous est précieux afin d'améliorer ce site en
-							continu. Sur quoi devrions nous travailler afin de mieux répondre
-							à vos attentes ?
-						</Trans>
-					</p>
-				</label>
-				<textarea
-					name="message"
-					rows={5}
-					style={{ resize: 'none', width: '100%', padding: '0.6rem' }}
-				/>
-				<br />
-				<br />
-				<label htmlFor="email">
-					<p>
-						<Trans i18nKey="feedback.bad.form.email">
-							Votre email (si vous souhaitez une réponse de notre part)
-						</Trans>
-					</p>
-				</label>
-				<input type="email" name="email" />
-				<input hidden name="url" value={window.location.href} />
-				<input hidden name="pageTitle" value={document.title} />
-				<br />
-				<div style={{ margin: '1rem 0' }}>
-					<button className="ui__ button small" type="submit">
-						<Trans>Envoyer</Trans>
-					</button>
-				</div>
-			</form>
+
+			<p>
+				<Trans i18nKey="feedback.bad.form.headline">
+					Votre retour nous est précieux afin d'améliorer ce site en continu.
+					Sur quoi devrions nous travailler afin de mieux répondre à vos
+					attentes ?
+				</Trans>
+			</p>
+			<div id="feedback-form"></div>
 		</ScrollToElement>
 	)
 }
diff --git a/mon-entreprise/source/sites/mon-entreprise.fr/layout/Footer/Footer.tsx b/mon-entreprise/source/sites/mon-entreprise.fr/layout/Footer/Footer.tsx
index 6abc00100..a11ca7545 100644
--- a/mon-entreprise/source/sites/mon-entreprise.fr/layout/Footer/Footer.tsx
+++ b/mon-entreprise/source/sites/mon-entreprise.fr/layout/Footer/Footer.tsx
@@ -117,9 +117,6 @@ export default function Footer() {
 					<a href="https://www.linkedin.com/company/mon-entreprise-fr/">
 						<SocialIcon media="linkedin" />
 					</a>
-					<a href="mailto:contact@mon-entreprise.beta.gouv.fr">
-						<SocialIcon media="email" />
-					</a>
 					<a href="https://github.com/betagouv/mon-entreprise/">
 						<SocialIcon media="github" />
 					</a>