From 27c9ec27025d5365f57c15ddb99ea203c97c5b57 Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Wed, 1 Aug 2018 12:11:22 +0200
Subject: [PATCH] =?UTF-8?q?R=C3=A9pare=20l'integration=20en=20iframe,=20et?=
 =?UTF-8?q?=20rajoute=20une=20page=20de=20test=20accessible=20depuis=20l'a?=
 =?UTF-8?q?pp=20()?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/sites/embauche.gouv.fr/App.js          |  2 ++
 .../sites/embauche.gouv.fr/iframe-script.js   | 26 +++++++++++++------
 .../embauche.gouv.fr/pages/IntegrationTest.js | 19 ++++++++++++++
 source/webpack.common.js                      |  6 +++--
 4 files changed, 43 insertions(+), 10 deletions(-)
 create mode 100644 source/sites/embauche.gouv.fr/pages/IntegrationTest.js

diff --git a/source/sites/embauche.gouv.fr/App.js b/source/sites/embauche.gouv.fr/App.js
index de125bddd..b96d33466 100644
--- a/source/sites/embauche.gouv.fr/App.js
+++ b/source/sites/embauche.gouv.fr/App.js
@@ -6,6 +6,7 @@ import { Redirect, Route, Switch } from 'react-router-dom'
 import 'Ui/index.css'
 import Provider from '../../Provider'
 import About from './pages/About'
+import IntegrationTest from './pages/IntegrationTest'
 import Contact from './pages/Contact'
 import Couleur from './pages/Couleur'
 import Contribution from './pages/Contribution'
@@ -34,6 +35,7 @@ class EmbaucheRoute extends Component {
 					<Route path="/intégrer" component={Integration} />
 					<Route path="/contribuer" component={Contribution} />
 					<Route path="/couleur" component={Couleur} />
+					<Route path="/integration-test" component={IntegrationTest} />
 					<Redirect from="/simulateur" to="/" />
 					<Route component={Route404} />
 				</Switch>
diff --git a/source/sites/embauche.gouv.fr/iframe-script.js b/source/sites/embauche.gouv.fr/iframe-script.js
index 3a1178456..6904cd1cd 100644
--- a/source/sites/embauche.gouv.fr/iframe-script.js
+++ b/source/sites/embauche.gouv.fr/iframe-script.js
@@ -1,12 +1,22 @@
+
 // Get the "couleur" parameter passed to this script
 let script = document.getElementById('script-simulateur-embauche'),
-	couleur = script.dataset['couleur'],
-	src = script.getAttribute('src'),
+	couleur = script.dataset.couleur,
+	baseUrl = script.dataset.iframeUrl || script.getAttribute('src').split('dist')[0],
 	integratorUrl = encodeURIComponent(window.location.href.toString()),
-	lang = script.dataset['lang']
+	lang = script.dataset.lang,
+	src = baseUrl + `?couleur=${couleur}&iframe&integratorUrl=${integratorUrl}&lang=${lang}`
+
+const iframe = document.createElement('iframe')
+const iframeAttributes = {
+	id: 'simulateurEmbauche',
+	src,
+	style: "border: none; width: 100%; display: block; margin: 0 auto; height: 45em",
+	allowfullscreen : true,
+	webkitallowfullscreen: true,
+	mozallowfullscreen: true
+}
+Object.entries(iframeAttributes).forEach(([key, value]) => iframe.setAttribute(key, value));
+
+script.replaceWith(iframe, null);
 
-document.write(`
-<iframe id="simulateurEmbauche" src="${
-	src.split('dist')[0]
-}?couleur=${couleur}&iframe&integratorUrl=${integratorUrl}&lang=${lang}" style="border: none; width: 100%; display: block; margin: 0 auto; height: 45em" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
-`)
diff --git a/source/sites/embauche.gouv.fr/pages/IntegrationTest.js b/source/sites/embauche.gouv.fr/pages/IntegrationTest.js
new file mode 100644
index 000000000..431a37357
--- /dev/null
+++ b/source/sites/embauche.gouv.fr/pages/IntegrationTest.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import { withRouter } from 'react-router'
+
+@withRouter
+export default class IntegrationTest extends Component {
+	componentDidMount() {
+		const script = document.createElement('script')
+		script.id = 'script-simulateur-embauche'
+		script['data-couleur'] = script.src =
+			window.location.origin + '/dist/simulateur.js'
+		script.dataset.couleur = '#2975D1'
+		script.dataset.iframeUrl =
+			window.location.origin + this.props.history.createHref({})
+		this.DOMNode.appendChild(script)
+	}
+	render() {
+		return <div ref={ref => (this.DOMNode = ref)} />
+	}
+}
diff --git a/source/webpack.common.js b/source/webpack.common.js
index d98c684ce..b9e7ce48b 100644
--- a/source/webpack.common.js
+++ b/source/webpack.common.js
@@ -16,12 +16,14 @@ module.exports = {
 		}
 	},
 	entry: {
-		embauche: ['./source/sites/embauche.gouv.fr/entry.js'],
 		infrance: ['./source/sites/mycompanyinfrance.fr/entry.js'],
+		embauche: ['./source/sites/embauche.gouv.fr/entry.js'],
+		// To not introduce breaking into the iframe integration, we serve simulateur.js from a 'dist' subdirectory 
+		'dist/simulateur': ['./source/sites/embauche.gouv.fr/iframe-script.js'],
 	},
 	output: {
 		path: path.resolve('./dist/'),
-		filename: '[name].[hash].js'
+		filename: ({ chunk }) => chunk.name === 'dist/simulateur' ? '[name].js' : '[name].[hash].js'
 	},
 	module: {
 		rules: [