diff --git a/package.json b/package.json index 6216ee675..4b699d360 100644 --- 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", diff --git a/source/sites/mon-entreprise.fr/iframe-integration-script.js b/source/sites/mon-entreprise.fr/iframe-integration-script.js index c47d69511..9ba530daa 100644 --- 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') diff --git a/source/sites/mon-entreprise.fr/layout/Footer/Integration.css b/source/sites/mon-entreprise.fr/layout/Footer/Integration.css index b86f88457..75b241716 100644 --- 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; diff --git a/source/sites/mon-entreprise.fr/layout/Footer/Integration.js b/source/sites/mon-entreprise.fr/layout/Footer/Integration.js index b607d8c5a..4511d8e5e 100644 --- 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() {

Intégrez le module Web

En ajoutant une ligne à votre page Web :

- - {'<'} - - script -
- id - - ="script-simulateur-embauche" data-couleur=" - #2975D1" src - ="https://mon-entreprise.fr/simulateur-iframe-integration.js"> - {'<'} - / - script - > - +

Vous pouvez{' '} choisir la couleur principale du module pour le diff --git a/source/sites/mon-entreprise.fr/pages/Dev/IntegrationTest.js b/source/sites/mon-entreprise.fr/pages/Dev/IntegrationTest.js index b6353ca54..047463284 100644 --- 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 ( -

-
(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 ( + <> +

+ 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. +

+

Choisissez d'abord le module et la couleur qui vous conviennent.

+

Quel module ?

+ + +

Quelle couleur ?

+ Chargement...
}> + + + + + +
0 ? 'block' : 'none'}; + `}> +

Code d'intégration

+ +
+
- ) - } - } +
+ + ) +} + +export let IntegrationCode = ({ + module = 'simulateur-embauche', + colour = '#2975D1' +}) => ( + + {'<'} + + script +
+ id + + ="script-simulateur-embauche" + data-module=" + {module}"data-couleur=" + {colour}" src + ="https://mon-entreprise.fr/simulateur-iframe-integration.js"> + {'<'} + / + script + > + ) diff --git a/source/sites/mon-entreprise.fr/pages/Iframes/index.js b/source/sites/mon-entreprise.fr/pages/Iframes/index.js index 2c194a5ff..f66b939fa 100644 --- 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} /> + + +
diff --git a/yarn.lock b/yarn.lock index 27e42a5aa..261bd07cd 100644 --- 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"