From 1a4cb2f93811b85474e17147932ca6e03c4a8eec Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Wed, 13 Sep 2023 15:41:53 +0200 Subject: [PATCH 01/19] =?UTF-8?q?feat:=20exception=20de=20la=20d=C3=A9mo?= =?UTF-8?q?=20iframe=20de=20simulation=20dans=20le=20.gitignore?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index adb2827af4..3db07144b5 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ dist/* !dist/_redirects !/dist/demo-iframe.html +!/dist/demo-iframeSimulation.html .DS_Store yarn-error.log From b16e3e79bd06c146f245c072378ee2a2697eefe5 Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Wed, 13 Sep 2023 15:51:06 +0200 Subject: [PATCH 02/19] feat: iframe resizing via ResizeObserver --- dist/demo-iframe.html | 13 +++--- source/Provider.tsx | 2 + source/components/IframeResizer.tsx | 26 +++++++++++ source/sites/publicodes/App.tsx | 1 - source/sites/publicodes/iframeSimulation.js | 48 +++++++++++++++++++++ webpack.common.js | 1 + 6 files changed, 84 insertions(+), 7 deletions(-) create mode 100644 source/components/IframeResizer.tsx create mode 100644 source/sites/publicodes/iframeSimulation.js diff --git a/dist/demo-iframe.html b/dist/demo-iframe.html index 4b51b1268b..52296b74f3 100644 --- a/dist/demo-iframe.html +++ b/dist/demo-iframe.html @@ -6,11 +6,12 @@ - -

iframe paramétré

- Ci-dessous, nosgestesclimat.fr intégré comme un iframe paramétré. - - - +

iframe paramétré

+ Ci-dessous, nosgestesclimat.fr intégré comme un iframe paramétré. + diff --git a/source/Provider.tsx b/source/Provider.tsx index df40a8729f..98e28f9c8a 100644 --- a/source/Provider.tsx +++ b/source/Provider.tsx @@ -9,6 +9,7 @@ import { BrowserRouter } from 'react-router-dom' import reducers, { AppState } from 'Reducers/rootReducer' import { applyMiddleware, compose, createStore, Middleware, Store } from 'redux' import thunk from 'redux-thunk' +import { IframeResizer } from './components/IframeResizer' import { MatomoProvider } from './contexts/MatomoContext' import RulesProvider from './RulesProvider' import { getIsIframe } from './utils' @@ -85,6 +86,7 @@ export default function Provider({ color={iframeCouleur && decodeURIComponent(iframeCouleur)} > + diff --git a/source/components/IframeResizer.tsx b/source/components/IframeResizer.tsx new file mode 100644 index 0000000000..6b2aafd9b3 --- /dev/null +++ b/source/components/IframeResizer.tsx @@ -0,0 +1,26 @@ +import { getIsIframe } from '@/utils' +import { useEffect } from 'react' + +export function IframeResizer() { + const isIframe = getIsIframe() + useEffect(() => { + // The code below communicate with the iframe.js script on a host site + // to automatically resize the iframe when its inner content height + // change. + + if (!isIframe) { + return + } + + const minHeight = 800 // Also used in iframe.js + const observer = new ResizeObserver(([entry]) => { + console.log(entry.contentRect.height) + const value = Math.max(minHeight, entry.contentRect.height) + window.parent?.postMessage({ kind: 'resize-height', value }, '*') + }) + observer.observe(window.document.body) + return () => observer.disconnect() + }, [isIframe]) + + return null +} diff --git a/source/sites/publicodes/App.tsx b/source/sites/publicodes/App.tsx index 628bac08ef..881c409b9a 100644 --- a/source/sites/publicodes/App.tsx +++ b/source/sites/publicodes/App.tsx @@ -322,7 +322,6 @@ const Main = () => { css={` @media (min-width: 800px) { display: flex; - min-height: 100vh; padding-top: 1rem; } diff --git a/source/sites/publicodes/iframeSimulation.js b/source/sites/publicodes/iframeSimulation.js new file mode 100644 index 0000000000..ec911d47b3 --- /dev/null +++ b/source/sites/publicodes/iframeSimulation.js @@ -0,0 +1,48 @@ +const script = + document.getElementById('ecolab-climat') || + document.getElementById('nosgestesclimat') + +const integratorUrl = encodeURIComponent(window.location.href.toString()) + +const srcURL = new URL(script.src) +const hostname = srcURL.origin || 'https://nosgestesclimat.fr' + +const possibleOptions = [ + { key: 'shareData', legacy: 'partagedatafinsimulation' }, + { key: 'lang' }, +] + +const optionFragments = possibleOptions.map(({ key, legacy }) => { + const value = script.dataset[key] || script.dataset[legacy] + + return value != null ? `&${key}=${value}` : '' +}) + +const src = `${hostname}/simulateur/bilan/?iframe&integratorUrl=${integratorUrl}${optionFragments.join( + '' +)}` + +const iframe = document.createElement('iframe') + +const iframeAttributes = { + src, + allowfullscreen: true, + webkitallowfullscreen: true, + mozallowfullscreen: true, + allow: 'fullscreen', + id: 'iframeNGC', + style: 'border: none; width: 100%; display: block; height: 800px', +} + +for (var key in iframeAttributes) { + iframe.setAttribute(key, iframeAttributes[key]) +} + +script.parentNode.insertBefore(iframe, script) + +window.addEventListener('message', function (evt) { + console.log(evt) + if (evt.data.kind === 'resize-height') { + iframe.style.height = `${evt.data.value}px` + } +}) diff --git a/webpack.common.js b/webpack.common.js index e25c285834..e7c4cc1bd3 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -35,6 +35,7 @@ module.exports.default = { entry: { publicodes: './source/sites/publicodes/entry.js', iframe: './source/sites/publicodes/iframe.js', + iframeSimulation: './source/sites/publicodes/iframeSimulation.js', }, output: { path: path.resolve('./dist/'), From 30abe69ab005ae12138f51ae6190514e9c7c625e Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Wed, 13 Sep 2023 15:52:42 +0200 Subject: [PATCH 03/19] =?UTF-8?q?feat:=20option=20de=20l'iframe=20pour=20f?= =?UTF-8?q?ixer=20la=20r=C3=A9gion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/localisation/Localisation.tsx | 16 +++++++++-- .../localisation/LocalisationMessage.tsx | 6 +++++ .../localisation/useLocalisation.ts | 27 ++++++++++++++++++- source/sites/publicodes/App.tsx | 8 ++++++ source/sites/publicodes/iframeSimulation.js | 1 + 5 files changed, 55 insertions(+), 3 deletions(-) diff --git a/source/components/localisation/Localisation.tsx b/source/components/localisation/Localisation.tsx index c6fbdfcbed..95366a4fd7 100644 --- a/source/components/localisation/Localisation.tsx +++ b/source/components/localisation/Localisation.tsx @@ -24,6 +24,9 @@ export default ({ title = 'Ma région de simulation' }) => { const [chosenIp, _] = usePersistingState('IP', undefined) const localisation: Localisation | undefined = useLocalisation(chosenIp) const dispatch = useDispatch() + const iframeLocalisationOption = useSelector( + (state: AppState) => state?.iframeOptions?.iframeLocalisation + ) const regionParams: Region | undefined = useSupportedRegion( localisation?.country?.code ) @@ -33,6 +36,10 @@ export default ({ title = 'Ma région de simulation' }) => { ] const countryName = useCountryNameInCurrentLang(localisation) + const versionName = regionParams + ? regionParams[currentLang]['gentilé'] ?? regionParams[currentLang]['nom'] + : localisation?.country?.name + return (

📍 {t(title)}

@@ -44,17 +51,22 @@ export default ({ title = 'Ma région de simulation' }) => { Vous avez choisi{' '} + ) : iframeLocalisationOption ? ( + + Vous utilisez la version {versionName} du test + ) : ( - Nous avons détecté que vous faites cette simulation depuis + Nous avons détecté que vous faites cette simulation depuis{' '} + {countryName} {' '} )} - {countryName} { ? regionParams[currentLang]['gentilé'] ?? regionParams[currentLang]['nom'] : localisation?.country?.name + const iframeLocalisationOption = useSelector( + (state: AppState) => state?.iframeOptions?.iframeLocalisation + ) + + if (iframeLocalisationOption) return + if (messagesRead.includes(code)) return if (code === defaultModelRegionCode) return diff --git a/source/components/localisation/useLocalisation.ts b/source/components/localisation/useLocalisation.ts index e05795a225..1fdc665d91 100644 --- a/source/components/localisation/useLocalisation.ts +++ b/source/components/localisation/useLocalisation.ts @@ -2,6 +2,7 @@ import { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import { setLocalisation } from '../../actions/actions' import { AppState } from '../../reducers/rootReducer' +import { Region, useSupportedRegion } from './utils' const API = '/.netlify/functions/geolocation' @@ -12,6 +13,17 @@ const API = '/.netlify/functions/geolocation' export default () => { const dispatch = useDispatch() const localisation = useSelector((state: AppState) => state.localisation) + const iframeLocalisationOption = useSelector( + (state: AppState) => state?.iframeOptions?.iframeLocalisation + ) + + const currentLang = useSelector( + (state: AppState) => state.currentLang + ).toLowerCase() + + const regionParams: Region | undefined = useSupportedRegion( + iframeLocalisationOption + ) useEffect(() => { if (localisation?.country != null) { @@ -44,7 +56,20 @@ export default () => { }) } - asyncFecthAPI() + if (iframeLocalisationOption) { + dispatch( + setLocalisation({ + country: { + code: regionParams?.[currentLang]?.code, + name: regionParams?.[currentLang]?.nom, + }, + userChosen: false, + }) + ) + } else { + asyncFecthAPI() + } + return undefined }, [localisation]) diff --git a/source/sites/publicodes/App.tsx b/source/sites/publicodes/App.tsx index 881c409b9a..da03231c2e 100644 --- a/source/sites/publicodes/App.tsx +++ b/source/sites/publicodes/App.tsx @@ -179,6 +179,10 @@ export default function Root() { document?.location.search.substring(1) ).get('shareData') + const iframeLocalisation = new URLSearchParams( + document?.location.search.substring(1) + ).get('localisation') + // We retrieve the User object from local storage to initialize the store. const persistedUser = fetchUser() @@ -225,6 +229,10 @@ export default function Root() { localisation: persistedUser.localisation, currentLang, iframeOptions: { iframeShareData }, + iframeOptions: { + iframeShareData, + iframeLocalisation, + }, actionChoices: persistedSimulation?.actionChoices ?? {}, storedTrajets: persistedSimulation?.storedTrajets ?? {}, storedAmortissementAvion: diff --git a/source/sites/publicodes/iframeSimulation.js b/source/sites/publicodes/iframeSimulation.js index ec911d47b3..c2643a2b6f 100644 --- a/source/sites/publicodes/iframeSimulation.js +++ b/source/sites/publicodes/iframeSimulation.js @@ -10,6 +10,7 @@ const hostname = srcURL.origin || 'https://nosgestesclimat.fr' const possibleOptions = [ { key: 'shareData', legacy: 'partagedatafinsimulation' }, { key: 'lang' }, + { key: 'localisation' }, ] const optionFragments = possibleOptions.map(({ key, legacy }) => { From 8a48f581dfc35d0c6aeb846bfeaea1877a914839 Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Wed, 13 Sep 2023 15:53:19 +0200 Subject: [PATCH 04/19] feat: plus de footer pour les iframe "Simulation" --- source/components/Footer.tsx | 21 ++++++++++++++------- source/sites/publicodes/App.tsx | 6 +++++- source/sites/publicodes/iframeSimulation.js | 1 + 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/source/components/Footer.tsx b/source/components/Footer.tsx index 4810d2236f..2591c72c1a 100644 --- a/source/components/Footer.tsx +++ b/source/components/Footer.tsx @@ -1,25 +1,32 @@ -import { useContext } from 'react' +import { AppState } from '@/reducers/rootReducer' +import { getIsIframe } from '@/utils' import { Trans } from 'react-i18next' +import { useSelector } from 'react-redux' import { Link, useLocation } from 'react-router-dom' import { useMediaQuery } from 'usehooks-ts' import DocumentationButton from '../sites/publicodes/DocumentationButton' import LandingContent from '../sites/publicodes/LandingContent' import { isFluidLayout } from '../sites/publicodes/utils' -import { IframeOptionsContext } from './utils/IframeOptionsProvider' export default ({}) => { const location = useLocation(), path = decodeURIComponent(location.pathname) - const { isIframe } = useContext(IframeOptionsContext), - displaySponsorLogos = - path === '/' && - // would be a repetition with header logos - !isIframe + const isIframe = getIsIframe() + const iframeOnlySimulationOption = useSelector( + (state: AppState) => state?.iframeOptions?.iframeOnlySimulation + ) + + const displaySponsorLogos = + path === '/' && + // would be a repetition with header logos + !isIframe const mobileNoFooter = !isFluidLayout(path) const mobileScreen = useMediaQuery('(max-width: 800px)') + if (iframeOnlySimulationOption) return null + if (mobileScreen && mobileNoFooter) return null return ( diff --git a/source/sites/publicodes/App.tsx b/source/sites/publicodes/App.tsx index da03231c2e..25234beee2 100644 --- a/source/sites/publicodes/App.tsx +++ b/source/sites/publicodes/App.tsx @@ -183,6 +183,10 @@ export default function Root() { document?.location.search.substring(1) ).get('localisation') + const iframeOnlySimulation = new URLSearchParams( + document?.location.search.substring(1) + ).get('onlySimulation') + // We retrieve the User object from local storage to initialize the store. const persistedUser = fetchUser() @@ -228,10 +232,10 @@ export default function Root() { tutorials: persistedUser.tutorials, localisation: persistedUser.localisation, currentLang, - iframeOptions: { iframeShareData }, iframeOptions: { iframeShareData, iframeLocalisation, + iframeOnlySimulation, }, actionChoices: persistedSimulation?.actionChoices ?? {}, storedTrajets: persistedSimulation?.storedTrajets ?? {}, diff --git a/source/sites/publicodes/iframeSimulation.js b/source/sites/publicodes/iframeSimulation.js index c2643a2b6f..c4b79eb452 100644 --- a/source/sites/publicodes/iframeSimulation.js +++ b/source/sites/publicodes/iframeSimulation.js @@ -11,6 +11,7 @@ const possibleOptions = [ { key: 'shareData', legacy: 'partagedatafinsimulation' }, { key: 'lang' }, { key: 'localisation' }, + { key: 'onlySimulation' }, ] const optionFragments = possibleOptions.map(({ key, legacy }) => { From 6108d39aa635a45a72445e07447baabff67f6c82 Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Wed, 13 Sep 2023 15:53:39 +0200 Subject: [PATCH 05/19] feat: plus de redirection vers la home via le logo pour un iframe "Simulation" --- source/components/Logo.tsx | 118 ++++++++++++++++++++----------------- 1 file changed, 65 insertions(+), 53 deletions(-) diff --git a/source/components/Logo.tsx b/source/components/Logo.tsx index 4cee40a876..e904dae059 100644 --- a/source/components/Logo.tsx +++ b/source/components/Logo.tsx @@ -1,62 +1,74 @@ +import { AppState } from '@/reducers/rootReducer' +import { useSelector } from 'react-redux' import { Link } from 'react-router-dom' -export default ({ showText, size = 'large' }) => ( -
- { + const iframeOnlySimulationOption = useSelector( + (state: AppState) => state?.iframeOptions?.iframeOnlySimulation + ) + return ( +
- + iframeOnlySimulationOption && event.preventDefault() + } + data-cypress-id="home-logo-link" + css={` + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + margin: ${{ + large: '1rem auto', + medium: '1rem 3rem 0rem 0rem', + small: '.1rem auto', + }[size]}; + img { + width: ${{ large: '100px', medium: '55px', small: '30px' }[size]}; + height: auto; + } + `} + > + - {showText && ( -
- Nos -
- Gestes -
- Climat -
- )} - -
-) + width="75" + height="75" + /> + {showText && ( +
+ Nos +
+ Gestes +
+ Climat +
+ )} + +
+ ) +} From 99274b66b0b9fc2a864077a2380ef654a146d759 Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Wed, 13 Sep 2023 15:54:33 +0200 Subject: [PATCH 06/19] =?UTF-8?q?fix:=20hostname=20d=C3=A9fini=20via=20l'U?= =?UTF-8?q?RL=20complet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/sites/publicodes/iframe.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/source/sites/publicodes/iframe.js b/source/sites/publicodes/iframe.js index ef962e4775..5e3152317e 100644 --- a/source/sites/publicodes/iframe.js +++ b/source/sites/publicodes/iframe.js @@ -1,10 +1,11 @@ const script = - document.getElementById('ecolab-climat') || - document.getElementById('nosgestesclimat'), - integratorUrl = encodeURIComponent(window.location.href.toString()) + document.getElementById('ecolab-climat') || + document.getElementById('nosgestesclimat') + +const integratorUrl = encodeURIComponent(window.location.href.toString()) const srcURL = new URL(script.src) -const hostname = srcURL.hostname || 'nosgestesclimat.fr' +const hostname = srcURL.origin || 'https://nosgestesclimat.fr' const possibleOptions = [ { key: 'shareData', legacy: 'partagedatafinsimulation' }, @@ -17,7 +18,7 @@ const optionFragments = possibleOptions.map(({ key, legacy }) => { return value != null ? `&${key}=${value}` : '' }) -const src = `https://${hostname}/?iframe&integratorUrl=${integratorUrl}${optionFragments.join( +const src = `${hostname}/?iframe&integratorUrl=${integratorUrl}${optionFragments.join( '' )}` From 497b3ab8351695b60c8152327fc6653eb1247f7b Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Wed, 13 Sep 2023 16:08:47 +0200 Subject: [PATCH 07/19] =?UTF-8?q?feat:=20fix=20gitignore=20pour=20prendre?= =?UTF-8?q?=20en=20compte=20la=20page=20de=20d=C3=A9mo=20de=20l'iframe=20"?= =?UTF-8?q?Simulation"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 - dist/demo-iframeSimulation.html | 20 ++++++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 dist/demo-iframeSimulation.html diff --git a/.gitignore b/.gitignore index 3db07144b5..1859b9fe71 100644 --- a/.gitignore +++ b/.gitignore @@ -18,4 +18,3 @@ node_modules/ /cypress/screenshots/* # They are automatically generated when running cypress in CI /cypress/e2e/test-completion/persona-*.cy.js -dist diff --git a/dist/demo-iframeSimulation.html b/dist/demo-iframeSimulation.html new file mode 100644 index 0000000000..d083240bbe --- /dev/null +++ b/dist/demo-iframeSimulation.html @@ -0,0 +1,20 @@ + + + + + + + +

Exemple d'intégration du test avec région fixée par l'intégrateur.

+ Ci-dessous, nosgestesclimat.fr intégré comme un iframe paramétré ne + contenant que la partie simulation du test. Dans cet exemple, la Suisse a + été définie comme étant la région par défaut du test. + + + From 5306d40530d6dd79961ab5e480cf2ad2df966bfb Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Wed, 13 Sep 2023 16:30:03 +0200 Subject: [PATCH 08/19] Update .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 1859b9fe71..3db07144b5 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,4 @@ node_modules/ /cypress/screenshots/* # They are automatically generated when running cypress in CI /cypress/e2e/test-completion/persona-*.cy.js +dist From c25c65f335ce0a3ba3850fc541caf53132d1ec2f Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Wed, 13 Sep 2023 16:35:05 +0200 Subject: [PATCH 09/19] =?UTF-8?q?feat:=20pas=20de=20partage=20de=20donn?= =?UTF-8?q?=C3=A9es=20pour=20la=20d=C3=A9mo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/demo-iframeSimulation.html | 1 - 1 file changed, 1 deletion(-) diff --git a/dist/demo-iframeSimulation.html b/dist/demo-iframeSimulation.html index d083240bbe..6556b6dd7f 100644 --- a/dist/demo-iframeSimulation.html +++ b/dist/demo-iframeSimulation.html @@ -14,7 +14,6 @@

Exemple d'intégration du test avec région fixée par l'intégrateur.

src="/iframeSimulation.js" data-only-simulation="true" data-localisation="CH" - data-share-data="true" > From c7f72fb5320abce20686166eb2d1ef457c440200 Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Wed, 13 Sep 2023 17:28:43 +0200 Subject: [PATCH 10/19] clean log --- source/components/IframeResizer.tsx | 1 - source/sites/publicodes/iframeSimulation.js | 1 - 2 files changed, 2 deletions(-) diff --git a/source/components/IframeResizer.tsx b/source/components/IframeResizer.tsx index 6b2aafd9b3..84a728b414 100644 --- a/source/components/IframeResizer.tsx +++ b/source/components/IframeResizer.tsx @@ -14,7 +14,6 @@ export function IframeResizer() { const minHeight = 800 // Also used in iframe.js const observer = new ResizeObserver(([entry]) => { - console.log(entry.contentRect.height) const value = Math.max(minHeight, entry.contentRect.height) window.parent?.postMessage({ kind: 'resize-height', value }, '*') }) diff --git a/source/sites/publicodes/iframeSimulation.js b/source/sites/publicodes/iframeSimulation.js index c4b79eb452..9c9a3564ea 100644 --- a/source/sites/publicodes/iframeSimulation.js +++ b/source/sites/publicodes/iframeSimulation.js @@ -43,7 +43,6 @@ for (var key in iframeAttributes) { script.parentNode.insertBefore(iframe, script) window.addEventListener('message', function (evt) { - console.log(evt) if (evt.data.kind === 'resize-height') { iframe.style.height = `${evt.data.value}px` } From d77570d43d348af0a76da2757eb596ec5edd4731 Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Wed, 13 Sep 2023 17:29:01 +0200 Subject: [PATCH 11/19] feat: tentative simple pour fixer la PR --- dist/demo-iframeSimulation.html | 1 + source/sites/publicodes/iframeSimulation.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/dist/demo-iframeSimulation.html b/dist/demo-iframeSimulation.html index 6556b6dd7f..987fac8d60 100644 --- a/dist/demo-iframeSimulation.html +++ b/dist/demo-iframeSimulation.html @@ -14,6 +14,7 @@

Exemple d'intégration du test avec région fixée par l'intégrateur.

src="/iframeSimulation.js" data-only-simulation="true" data-localisation="CH" + data-pr="1872" > diff --git a/source/sites/publicodes/iframeSimulation.js b/source/sites/publicodes/iframeSimulation.js index 9c9a3564ea..8bb8c6296c 100644 --- a/source/sites/publicodes/iframeSimulation.js +++ b/source/sites/publicodes/iframeSimulation.js @@ -12,12 +12,13 @@ const possibleOptions = [ { key: 'lang' }, { key: 'localisation' }, { key: 'onlySimulation' }, + { key: 'pr' }, ] const optionFragments = possibleOptions.map(({ key, legacy }) => { const value = script.dataset[key] || script.dataset[legacy] - return value != null ? `&${key}=${value}` : '' + return value != null ? `&${key === 'pr' ? 'PR' : key}=${value}` : '' }) const src = `${hostname}/simulateur/bilan/?iframe&integratorUrl=${integratorUrl}${optionFragments.join( From 963b40a2364286aa46a34e08daf9f1d3b14296d1 Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Wed, 13 Sep 2023 20:01:42 +0200 Subject: [PATCH 12/19] fix: oubli condition --- source/components/localisation/useLocalisation.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/components/localisation/useLocalisation.ts b/source/components/localisation/useLocalisation.ts index 1fdc665d91..0c7f71e3e9 100644 --- a/source/components/localisation/useLocalisation.ts +++ b/source/components/localisation/useLocalisation.ts @@ -26,7 +26,7 @@ export default () => { ) useEffect(() => { - if (localisation?.country != null) { + if (localisation?.country != null && localisation?.country?.code != null) { return undefined } @@ -71,7 +71,7 @@ export default () => { } return undefined - }, [localisation]) + }, [localisation, iframeLocalisationOption]) return localisation } From 6f7965c5f7cd6dd0cfba70b9a8a47a1658021d4e Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Thu, 14 Sep 2023 09:20:35 +0200 Subject: [PATCH 13/19] fix: useLocalisation --- .../localisation/useLocalisation.ts | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/source/components/localisation/useLocalisation.ts b/source/components/localisation/useLocalisation.ts index 0c7f71e3e9..c15b047697 100644 --- a/source/components/localisation/useLocalisation.ts +++ b/source/components/localisation/useLocalisation.ts @@ -21,15 +21,28 @@ export default () => { (state: AppState) => state.currentLang ).toLowerCase() - const regionParams: Region | undefined = useSupportedRegion( - iframeLocalisationOption - ) + const iframeRegionParams: Region | undefined = + iframeLocalisationOption && useSupportedRegion(iframeLocalisationOption) + console.log(iframeRegionParams) useEffect(() => { if (localisation?.country != null && localisation?.country?.code != null) { return undefined } + if (iframeLocalisationOption) { + dispatch( + setLocalisation({ + country: { + code: iframeRegionParams?.[currentLang]?.code, + name: iframeRegionParams?.[currentLang]?.nom, + }, + userChosen: false, + }) + ) + return undefined + } + const asyncFecthAPI = async () => { await fetch(API) .then((res) => { @@ -56,20 +69,7 @@ export default () => { }) } - if (iframeLocalisationOption) { - dispatch( - setLocalisation({ - country: { - code: regionParams?.[currentLang]?.code, - name: regionParams?.[currentLang]?.nom, - }, - userChosen: false, - }) - ) - } else { - asyncFecthAPI() - } - + asyncFecthAPI() return undefined }, [localisation, iframeLocalisationOption]) From b01a9a83997c6882da805246d95ecac3814a0690 Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Thu, 14 Sep 2023 09:27:27 +0200 Subject: [PATCH 14/19] fix message de localisation --- source/components/localisation/Localisation.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/source/components/localisation/Localisation.tsx b/source/components/localisation/Localisation.tsx index 95366a4fd7..dbc5f2eab2 100644 --- a/source/components/localisation/Localisation.tsx +++ b/source/components/localisation/Localisation.tsx @@ -49,7 +49,8 @@ export default ({ title = 'Ma région de simulation' }) => {

{localisation?.userChosen ? ( - Vous avez choisi{' '} + Vous avez choisi + {countryName} ) : iframeLocalisationOption ? ( @@ -59,8 +60,8 @@ export default ({ title = 'Ma région de simulation' }) => { Nous avons détecté que vous faites cette simulation depuis{' '} - {countryName} - {' '} + + {countryName} )} Date: Thu, 14 Sep 2023 09:27:50 +0200 Subject: [PATCH 15/19] temp: logs --- source/components/localisation/useLocalisation.ts | 9 ++++++--- source/components/localisation/utils.ts | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/source/components/localisation/useLocalisation.ts b/source/components/localisation/useLocalisation.ts index c15b047697..cd9904dccd 100644 --- a/source/components/localisation/useLocalisation.ts +++ b/source/components/localisation/useLocalisation.ts @@ -13,16 +13,19 @@ const API = '/.netlify/functions/geolocation' export default () => { const dispatch = useDispatch() const localisation = useSelector((state: AppState) => state.localisation) - const iframeLocalisationOption = useSelector( + const iframeLocalisationOption: string | undefined = useSelector( (state: AppState) => state?.iframeOptions?.iframeLocalisation ) + console.log(iframeLocalisationOption) + const currentLang = useSelector( (state: AppState) => state.currentLang ).toLowerCase() - const iframeRegionParams: Region | undefined = - iframeLocalisationOption && useSupportedRegion(iframeLocalisationOption) + const iframeRegionParams: Region | undefined = useSupportedRegion( + iframeLocalisationOption + ) console.log(iframeRegionParams) useEffect(() => { diff --git a/source/components/localisation/utils.ts b/source/components/localisation/utils.ts index d6a39bcaf0..a647f87222 100644 --- a/source/components/localisation/utils.ts +++ b/source/components/localisation/utils.ts @@ -51,7 +51,7 @@ export function useSupportedRegion( const supportedRegions: SupportedRegions = useSelector( (state: AppState) => state.supportedRegions ) - + console.log(supportedRegions) // Check for undefined AFTER useSelector, because hooks can't be called conditionally if (inputCode === undefined) { return undefined From e8ce98a88d5bfe656ed361b14739ac5921d61008 Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Thu, 14 Sep 2023 10:39:17 +0200 Subject: [PATCH 16/19] fix: useEffect params --- .../localisation/useLocalisation.ts | 29 +++++++++++++++---- source/components/localisation/utils.ts | 1 - 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/source/components/localisation/useLocalisation.ts b/source/components/localisation/useLocalisation.ts index cd9904dccd..9b9c65c028 100644 --- a/source/components/localisation/useLocalisation.ts +++ b/source/components/localisation/useLocalisation.ts @@ -16,9 +16,6 @@ export default () => { const iframeLocalisationOption: string | undefined = useSelector( (state: AppState) => state?.iframeOptions?.iframeLocalisation ) - - console.log(iframeLocalisationOption) - const currentLang = useSelector( (state: AppState) => state.currentLang ).toLowerCase() @@ -27,13 +24,16 @@ export default () => { iframeLocalisationOption ) - console.log(iframeRegionParams) useEffect(() => { if (localisation?.country != null && localisation?.country?.code != null) { return undefined } - if (iframeLocalisationOption) { + if (!iframeRegionParams) { + return undefined + } + + if (iframeLocalisationOption && iframeRegionParams) { dispatch( setLocalisation({ country: { @@ -43,6 +43,23 @@ export default () => { userChosen: false, }) ) + } + + return undefined + }, [ + localisation, + iframeLocalisationOption, + iframeRegionParams, + dispatch, + currentLang, + ]) + + useEffect(() => { + if (iframeLocalisationOption) { + return undefined + } + + if (localisation?.country != null && localisation?.country?.code != null) { return undefined } @@ -74,7 +91,7 @@ export default () => { asyncFecthAPI() return undefined - }, [localisation, iframeLocalisationOption]) + }, [localisation, iframeLocalisationOption, dispatch]) return localisation } diff --git a/source/components/localisation/utils.ts b/source/components/localisation/utils.ts index a647f87222..4010cfd3e4 100644 --- a/source/components/localisation/utils.ts +++ b/source/components/localisation/utils.ts @@ -51,7 +51,6 @@ export function useSupportedRegion( const supportedRegions: SupportedRegions = useSelector( (state: AppState) => state.supportedRegions ) - console.log(supportedRegions) // Check for undefined AFTER useSelector, because hooks can't be called conditionally if (inputCode === undefined) { return undefined From 141c1b1040e776a6f7dc4a5d592cf6a6f09207fd Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Thu, 14 Sep 2023 10:53:10 +0200 Subject: [PATCH 17/19] traduction --- source/locales/ui/ui-en-us.yaml | 6 ++++++ source/locales/ui/ui-fr.yaml | 3 +++ 2 files changed, 9 insertions(+) diff --git a/source/locales/ui/ui-en-us.yaml b/source/locales/ui/ui-en-us.yaml index e400710a06..6ba6fef15d 100644 --- a/source/locales/ui/ui-en-us.yaml +++ b/source/locales/ui/ui-en-us.yaml @@ -920,3 +920,9 @@ entries: Créer un groupe: Create a group 'Oups ! Désolé, une erreur est survenue.': Oops! Sorry, an error has occurred. Nos équipes ont été prévenues ; veuillez réessayer d'accéder à cette page plus tard.: Our teams have been notified; please try to access this page again later. + Choisissez une option: Choose an option + Groupes: Groups + 'Vous avez choisi ': 'You have chosen ' + Fermer le bandeau de feedback: Close feedback banner + ' Vous utilisez la version {versionName} du test': ' You are using the {versionName} version of the test' + 'Nous avons détecté que vous faites cette simulation depuis ': 'We have detected that you have been running this simulation since ' diff --git a/source/locales/ui/ui-fr.yaml b/source/locales/ui/ui-fr.yaml index a25fcf0095..c917c2df94 100644 --- a/source/locales/ui/ui-fr.yaml +++ b/source/locales/ui/ui-fr.yaml @@ -720,3 +720,6 @@ entries: Choisissez une option: Choisissez une option Fermer le bandeau de feedback: Fermer le bandeau de feedback Groupes: Groupes + ' Vous utilisez la version {versionName} du test': ' Vous utilisez la version {versionName} du test' + 'Nous avons détecté que vous faites cette simulation depuis ': 'Nous avons détecté que vous faites cette simulation depuis ' + 'Vous avez choisi ': 'Vous avez choisi ' From e69dd658a3b77d6937d70509ba66a0a23d092e73 Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Thu, 14 Sep 2023 16:08:33 +0200 Subject: [PATCH 18/19] =?UTF-8?q?D=C3=A9sactivation=20de=20la=20redirectio?= =?UTF-8?q?n=20du=20logo=20plus=20accessible?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/components/Logo.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/source/components/Logo.tsx b/source/components/Logo.tsx index e904dae059..5be967d056 100644 --- a/source/components/Logo.tsx +++ b/source/components/Logo.tsx @@ -13,13 +13,14 @@ export default ({ showText, size = 'large' }) => { display: flex; align-items: center; justify-content: center; + ${iframeOnlySimulationOption && + ` + pointer-events: none; + `} `} > - iframeOnlySimulationOption && event.preventDefault() - } data-cypress-id="home-logo-link" css={` display: flex; From 9514d8864c650a5e6ac0c9e396c7f23f735df88a Mon Sep 17 00:00:00 2001 From: Clement AUGER Date: Thu, 14 Sep 2023 17:34:22 +0200 Subject: [PATCH 19/19] fix: apparition du message avant la fin du fetch --- .../components/localisation/Localisation.tsx | 140 +++++++++--------- .../localisation/LocalisationMessage.tsx | 6 +- .../localisation/useLocalisation.ts | 6 +- source/components/localisation/utils.ts | 5 +- source/reducers/rootReducer.ts | 4 +- 5 files changed, 84 insertions(+), 77 deletions(-) diff --git a/source/components/localisation/Localisation.tsx b/source/components/localisation/Localisation.tsx index dbc5f2eab2..23352df15b 100644 --- a/source/components/localisation/Localisation.tsx +++ b/source/components/localisation/Localisation.tsx @@ -43,83 +43,81 @@ export default ({ title = 'Ma région de simulation' }) => { return (

📍 {t(title)}

- {localisation != null ? ( - regionParams ? ( - <> -

- {localisation?.userChosen ? ( - - Vous avez choisi - {countryName} - - ) : iframeLocalisationOption ? ( - - Vous utilisez la version {versionName} du test - - ) : ( - - - Nous avons détecté que vous faites cette simulation depuis{' '} - - {countryName} - - )} - - .{' '} - {localisation?.userChosen && ( - - )} -

- - - ) : ( - localisation?.country && ( -

- - Nous avons détecté que vous faites cette simulation depuis - {' '} - {countryName} - - . - - Pour le moment, il n'existe pas de modèle de calcul pour{' '} - {{ countryName }}, le modèle Français vous est proposé par - défaut. - -

- ) - ) - ) : ( + {!regionParams && localisation?.fetchDone ? (

Nous n'avons pas pu détecter votre pays de simulation, le modèle Français vous est proposé par défaut. {' '}

+ ) : regionParams ? ( + <> +

+ {localisation?.userChosen ? ( + + Vous avez choisi + {countryName} + + ) : iframeLocalisationOption ? ( + + Vous utilisez la version {versionName} du test + + ) : ( + + + Nous avons détecté que vous faites cette simulation depuis{' '} + + {countryName} + + )} + + .{' '} + {localisation?.userChosen && ( + + )} +

+ + + ) : ( + localisation?.country && ( +

+ + Nous avons détecté que vous faites cette simulation depuis + {' '} + {countryName} + + . + + Pour le moment, il n'existe pas de modèle de calcul pour{' '} + {{ countryName }}, le modèle Français vous est proposé par défaut. + +

+ ) )} {} diff --git a/source/components/localisation/LocalisationMessage.tsx b/source/components/localisation/LocalisationMessage.tsx index 4d6b3d341d..e56f398a5a 100644 --- a/source/components/localisation/LocalisationMessage.tsx +++ b/source/components/localisation/LocalisationMessage.tsx @@ -42,6 +42,10 @@ export default (): JSX.Element => { if (code === defaultModelRegionCode) return + if (localisation == null) return + + if (!code && !localisation.fetchDone) return + return ( { )}{' '}

- ) : localisation ? ( + ) : code ? (

Nous avons détecté que vous faites cette simulation depuis diff --git a/source/components/localisation/useLocalisation.ts b/source/components/localisation/useLocalisation.ts index 9b9c65c028..20ef2e5ef8 100644 --- a/source/components/localisation/useLocalisation.ts +++ b/source/components/localisation/useLocalisation.ts @@ -63,6 +63,10 @@ export default () => { return undefined } + if (localisation?.fetchDone) { + return undefined + } + const asyncFecthAPI = async () => { await fetch(API) .then((res) => { @@ -88,8 +92,8 @@ export default () => { ) }) } - asyncFecthAPI() + dispatch(setLocalisation({ ...localisation, fetchDone: true })) return undefined }, [localisation, iframeLocalisationOption, dispatch]) diff --git a/source/components/localisation/utils.ts b/source/components/localisation/utils.ts index 4010cfd3e4..1b2fc67784 100644 --- a/source/components/localisation/utils.ts +++ b/source/components/localisation/utils.ts @@ -35,8 +35,9 @@ export type SupportedRegions = { } export type Localisation = { - country: { code: RegionCode; name: string } - userChosen: boolean + country?: { code: RegionCode; name: string } + userChosen?: boolean + fetchDone?: boolean } export const defaultModelRegionCode = 'FR' diff --git a/source/reducers/rootReducer.ts b/source/reducers/rootReducer.ts index 90f18ec9d3..59fcd91b60 100644 --- a/source/reducers/rootReducer.ts +++ b/source/reducers/rootReducer.ts @@ -348,10 +348,10 @@ type LocalisationAction = { type: string } & Localisation function localisation( state = null, - { type, country, userChosen }: LocalisationAction + { type, country, userChosen, fetchDone = false }: LocalisationAction ): Localisation | null { if (type === 'SET_LOCALISATION') { - return { country, userChosen } + return { country, userChosen, fetchDone } } else if (type === 'RESET_LOCALISATION') { return null } else {