Merge pull request #641 from betagouv/modules-integration

Modules integration
2019-09-02 17:50:50 +02:00 · 2019-09-02 17:50:50 +02:00 · 88006ff807
parent b3820c65ee d2f6622868
commit 88006ff807
7 changed files with 157 additions and 92 deletions
--- a/package.json
+++ b/package.json
@ -28,7 +28,7 @@
 		"focus-trap-react": "^3.1.2",
 		"fuse.js": "^3.4.2",
 		"i18next": "^14.1.1",
-		"iframe-resizer": "^3.6.2",
+		"iframe-resizer": "^4.1.1",
 		"js-yaml": "^3.13.1",
 		"nearley": "^2.16.0",
 		"ramda": "^0.25.0",
@ -147,15 +147,15 @@
 		"ramda-fantasy": "^0.8.0",
 		"raw-loader": "^0.5.1",
 		"react-hot-loader": "^4.11.0",
-		"serve": "^11.0.0",
-		"serve-handler": "^5.0.5",
+		"serve": "^11.1.0",
+		"serve-handler": "^6.1.1",
 		"sinon": "^4.5.0",
 		"sinon-chai": "^3.0.0",
 		"source-map-support": "^0.5.4",
 		"style-loader": "^0.23.1",
 		"styled-components": "^4.2.0",
 		"url-loader": "^1.0.1",
-		"webpack": "^4.26.0",
+		"webpack": "^4.39.3",
 		"webpack-cli": "^3.1.2",
 		"webpack-dev-middleware": "^3.4.0",
 		"webpack-hot-middleware": "^2.24.2",
--- a/source/sites/mon-entreprise.fr/iframe-integration-script.js
+++ b/source/sites/mon-entreprise.fr/iframe-integration-script.js
@ -1,16 +1,20 @@
-import { iframeResizer } from 'iframe-resizer';
-let script = document.getElementById('script-simulateur-embauche'),
+import { iframeResizer } from 'iframe-resizer'
+let script =
+		document.getElementById('script-monentreprise') ||
+		document.getElementById('script-simulateur-embauche'),
+	moduleName = script.dataset.module || 'simulateur-embauche',
 	couleur = script.dataset.couleur,
 	lang = script.dataset.lang,
 	baseUrl =
 		script.dataset.iframeUrl ||
 		(lang === 'en' ? process.env.EN_SITE : process.env.FR_SITE).replace(
 			'${path}',
-			'/iframes/simulateur-embauche'
+			'/iframes/' + moduleName
 		),
 	integratorUrl = encodeURIComponent(window.location.href.toString()),
 	src =
-	baseUrl + (baseUrl.indexOf('?') !== -1 ? '&' : '?') +
+		baseUrl +
+		(baseUrl.indexOf('?') !== -1 ? '&' : '?') +
 		`couleur=${couleur}&iframe&integratorUrl=${integratorUrl}&lang=${lang}`

 const iframe = document.createElement('iframe')
--- a/source/sites/mon-entreprise.fr/layout/Footer/Integration.css
+++ b/source/sites/mon-entreprise.fr/layout/Footer/Integration.css
@ -1,41 +1,3 @@
-#integration p {
-	margin-top: 3em;
-	vertical-align: top;
-}
-#integration i {
-	margin-right: 0.6em;
-	color: #3c4963;
-}
-#integration code {
-	display: inline-block;
-	font-size: 80%;
-	width: 90%;
-	padding: 1em;
-	background: #f8f8f8;
-	margin: auto;
-	margin-bottom: 1em;
-	overflow: auto;
-	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), -1px 1px 1px rgba(0, 0, 0, 0.02);
-}
-
-#integration code em {
-	font-weight: 300;
-	color: black;
-}
-
-#integration code:before {
-	content: '';
-	position: absolute;
-	top: 0;
-	right: 0;
-	border-width: 0 16px 16px 0;
-	border-style: solid;
-	border-color: #e8e8e8 white;
-}
-
-#scriptColor {
-	color: #2975d1;
-}

 section#integrations a {
 	text-decoration: none;
--- a/source/sites/mon-entreprise.fr/layout/Footer/Integration.js
+++ b/source/sites/mon-entreprise.fr/layout/Footer/Integration.js
@ -8,6 +8,7 @@ import cciLogo from './images/cci.png'
 import minTraLogo from './images/min-tra.jpg'
 import poleEmploiLogo from './images/pole-emploi.png'
 import './Integration.css'
+import { IntegrationCode } from '../../pages/Dev/IntegrationTest'

 export default function Integration() {
 	const [opened, setOpened] = useState(false)
@ -23,21 +24,7 @@ export default function Integration() {
 						<div>
 							<h1>Intégrez le module Web</h1>
 							<p>En ajoutant une ligne à votre page Web :</p>
-							<code>
-								<span>{'<'}</span>
-								<em>
-									script
-									<br />
-									id
-								</em>
-								="script-simulateur-embauche" <em>data-couleur</em>="
-								<span id="scriptColor">#2975D1</span>" <em>src</em>
-								="https://mon-entreprise.fr/simulateur-iframe-integration.js">
-								<span>{'<'}</span>
-								<span>/</span>
-								<em>script</em>
-								<span>></span>
-							</code>
+							<IntegrationCode />
 							<p>
 								Vous pouvez{' '}
 								<strong>choisir la couleur principale du module</strong> pour le
--- a/source/sites/mon-entreprise.fr/pages/Dev/IntegrationTest.js
+++ b/source/sites/mon-entreprise.fr/pages/Dev/IntegrationTest.js
@ -1,21 +1,118 @@
-import React, { Component } from 'react'
-import { withRouter } from 'react-router'
+import React, { Suspense } from 'react'
+let LazyColorPicker = React.lazy(() => import('./ColorPicker'))

-export default withRouter(
-	class IntegrationTest extends Component {
-		componentDidMount() {
-			const script = document.createElement('script')
-			script.id = 'script-simulateur-embauche'
-			script.src = window.location.origin + '/simulateur-iframe-integration.js'
-			script.dataset.couleur = '#005aa1'
-			this.DOMNode.appendChild(script)
-		}
-		render() {
-			return (
-				<div style={{ border: '2px solid blue' }}>
-					<div ref={ref => (this.DOMNode = ref)} />
+const integrableModuleNames = [
+	'simulateur-embauche',
+	'simulateur-autoentrepreneur',
+	'simulateur-independant',
+	'simulateur-assimilesalarie'
+]
+
+export default function IntegrationTest() {
+	const [currentModule, setCurrentModule] = React.useState(
+		integrableModuleNames[0]
+	)
+	const [colour, setColour] = React.useState('#005aa1')
+	const [version, setVersion] = React.useState(0)
+	const domNode = React.useRef(null)
+	React.useEffect(() => {
+		const script = document.createElement('script')
+		script.id = 'script-monentreprise'
+		script.src = window.location.origin + '/simulateur-iframe-integration.js'
+		script.dataset.module = currentModule
+		script.dataset.couleur = colour
+		domNode.current.innerHTML = ''
+		domNode.current.appendChild(script)
+	}, [version])
+	return (
+		<>
+			<p>
+				Les 4 simulateurs mon-entreprise.fr sont disponibles à l'intégration sur
+				un site tiers. Ils sont hébergés chez nous, et il suffit de placer un
+				simple bout de code Javascript dans votre code HTML.
+			</p>
+			<p>Choisissez d'abord le module et la couleur qui vous conviennent.</p>
+			<h2>Quel module ?</h2>
+			<select onChange={event => setCurrentModule(event.target.value)}>
+				{integrableModuleNames.map(name => (
+					<option key={name}>{name}</option>
+				))}
+			</select>
+
+			<h2>Quelle couleur ?</h2>
+			<Suspense fallback={<div>Chargement...</div>}>
+				<LazyColorPicker colour={colour} onChange={setColour} />
+			</Suspense>
+
+			<button
+				className="ui__ button plain"
+				onClick={() => setVersion(version + 1)}>
+				{!version ? 'Visualiser le module' : 'Valider les changements'}
+			</button>
+
+			<div
+				css={`
+					display: ${version > 0 ? 'block' : 'none'};
+				`}>
+				<p>Code d'intégration </p>
+				<IntegrationCode colour={colour} module={currentModule} />
+				<div style={{ border: '2px dashed blue' }}>
+					<div ref={domNode} />
 				</div>
-			)
-		}
-	}
+			</div>
+		</>
+	)
+}
+
+export let IntegrationCode = ({
+	module = 'simulateur-embauche',
+	colour = '#2975D1'
+}) => (
+	<code
+		css={`
+			display: block;
+			font-size: 80%;
+			width: 90%;
+			padding: 1em;
+			background: #f8f8f8;
+			margin: auto;
+			margin-bottom: 1em;
+			overflow: auto;
+			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05),
+				-1px 1px 1px rgba(0, 0, 0, 0.02);
+
+			em {
+				font-weight: 300;
+				color: black;
+			}
+
+			:before {
+				content: '';
+				position: absolute;
+				top: 0;
+				right: 0;
+				border-width: 0 16px 16px 0;
+				border-style: solid;
+				border-color: #e8e8e8 white;
+			}
+			#scriptColor {
+				color: #2975d1;
+			}
+		`}>
+		<span>{'<'}</span>
+		<em>
+			script
+			<br />
+			id
+		</em>
+		="script-simulateur-embauche"
+		<em>data-module</em>="
+		<span>{module}</span>"<em>data-couleur</em>="
+		<span id="scriptColor">{colour}</span>" <em>src</em>
+		="https://mon-entreprise.fr/simulateur-iframe-integration.js">
+		<span>{'<'}</span>
+		<span>/</span>
+		<em>script</em>
+		<span>></span>
+	</code>
 )
--- a/source/sites/mon-entreprise.fr/pages/Iframes/index.js
+++ b/source/sites/mon-entreprise.fr/pages/Iframes/index.js
@ -1,6 +1,9 @@
 import { IsEmbeddedContext } from 'Components/utils/embeddedContext'
 import React from 'react'
 import { Route } from 'react-router'
+import SimulateurAssimiléSalarié from '../SocialSecurity/AssimiléSalarié'
+import SimulateurAutoEntrepreneur from '../SocialSecurity/AutoEntrepreneur'
+import SimulateurIndépendant from '../SocialSecurity/Indépendant'
 import IframeFooter from './IframeFooter'
 import SimulateurEmbauche from './SimulateurEmbauche'

@ -12,6 +15,18 @@ export default function Iframes() {
 					path="/iframes/simulateur-embauche"
 					component={SimulateurEmbauche}
 				/>
+				<Route
+					path="/iframes/simulateur-autoentrepreneur"
+					component={SimulateurAutoEntrepreneur}
+				/>
+				<Route
+					path="/iframes/simulateur-independant"
+					component={SimulateurIndépendant}
+				/>
+				<Route
+					path="/iframes/simulateur-assimilesalarie"
+					component={SimulateurAssimiléSalarié}
+				/>
 				<IframeFooter />
 			</div>
 		</IsEmbeddedContext.Provider>
--- a/yarn.lock
+++ b/yarn.lock
@ -4912,10 +4912,10 @@ iferr@^0.1.5:
  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=

-iframe-resizer@^3.6.2:
-  version "3.6.6"
-  resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-3.6.6.tgz#ece6a0b7e879cfe3783a1003261408152ff9bd9b"
-  integrity sha512-WYprloB8s18Be9wbybQZmeEWueEczJH2is/5DxDn4jH8Bs2DuaSuaOeYICe6IvmF04SBy4mQ+pX4Xc+E9FEMSg==
+iframe-resizer@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-4.1.1.tgz#607c36edfb4547ecce8247226ef062e269a4eccc"
+  integrity sha512-+cs/M4ivpLyKYDs9AZWK0eRA1FKXut0yQr0iaEqdMKuk5yZJeF9H691q1qW1Cz5D3wHmiT+cTubWEsaSJBLUJA==

 ignore-walk@^3.0.1:
  version "3.0.1"
@ -8757,10 +8757,10 @@ serve-handler@6.1.0:
    path-to-regexp "2.2.1"
    range-parser "1.2.0"

-serve-handler@^5.0.5:
-  version "5.0.8"
-  resolved "https://registry.yarnpkg.com/serve-handler/-/serve-handler-5.0.8.tgz#790dbe340dabf1d61bdbaa02ea37dcab372377a8"
-  integrity sha512-pqk0SChbBLLHfMIxQ55czjdiW7tj2cFy53svvP8e5VqEN/uB/QpfiTJ8k1uIYeFTDVoi+FGi5aqXScuu88bymg==
+serve-handler@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/serve-handler/-/serve-handler-6.1.1.tgz#e4470ba9f4294c970012f5b5428c6582225106f6"
+  integrity sha512-LQPvxGia2TYqyMkHKH4jW9jx6jlQUMcWz6gJavZ3+4vsnB+SaWbYTncb9YsK5YBR6SlvyumREZJAzLw8VaFAUQ==
  dependencies:
    bytes "3.0.0"
    content-disposition "0.5.2"
@ -8781,7 +8781,7 @@ serve-static@1.14.1:
    parseurl "~1.3.3"
    send "0.17.1"

-serve@^11.0.0:
+serve@^11.1.0:
  version "11.1.0"
  resolved "https://registry.yarnpkg.com/serve/-/serve-11.1.0.tgz#1bfe2f4a08d0130cbf44711cdb7996cb742172e0"
  integrity sha512-+4wpDtOSS+4ZLyDWMxThutA3iOTawX2+yDovOI8cjOUOmemyvNlHyFAsezBlSgbZKTYChI3tzA1Mh0z6XZ62qA==
@ -10054,10 +10054,10 @@ webpack-sources@^1.4.0, webpack-sources@^1.4.1:
    source-list-map "^2.0.0"
    source-map "~0.6.1"

-webpack@^4.26.0:
-  version "4.39.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.39.2.tgz#c9aa5c1776d7c309d1b3911764f0288c8c2816aa"
-  integrity sha512-AKgTfz3xPSsEibH00JfZ9sHXGUwIQ6eZ9tLN8+VLzachk1Cw2LVmy+4R7ZiwTa9cZZ15tzySjeMui/UnSCAZhA==
+webpack@^4.39.3:
+  version "4.39.3"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.39.3.tgz#a02179d1032156b713b6ec2da7e0df9d037def50"
+  integrity sha512-BXSI9M211JyCVc3JxHWDpze85CvjC842EvpRsVTc/d15YJGlox7GIDd38kJgWrb3ZluyvIjgenbLDMBQPDcxYQ==
  dependencies:
    "@webassemblyjs/ast" "1.8.5"
    "@webassemblyjs/helper-module-context" "1.8.5"