From 4c728b0609b4058d1da997141ad9f775593c37ab Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Tue, 2 Nov 2021 18:00:44 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Affichage=20imm=C3=A9diat=20de?=
 =?UTF-8?q?=20la=20couleur=20personnalis=C3=A9e=20dans=20les=20int=C3=A9gr?=
 =?UTF-8?q?ations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mon-entreprise/index.html                     | 72 ++++++++++++++-----
 mon-entreprise/source/Provider.tsx            | 12 ++--
 .../source/components/utils/colors.tsx        |  1 +
 .../source/iframe-integration-script.js       |  3 +-
 mon-entreprise/webpack.prod.js                | 14 ++--
 yarn.lock                                     |  5 ++
 6 files changed, 72 insertions(+), 35 deletions(-)

diff --git a/mon-entreprise/index.html b/mon-entreprise/index.html
index 4606eccde..198f77a9f 100644
--- a/mon-entreprise/index.html
+++ b/mon-entreprise/index.html
@@ -66,9 +66,7 @@
 		<!-- data-helmet pour que React Helmet puisse écraser ce meta par défaut -->
 
 		<link rel="manifest" href="/manifest.webmanifest" />
-		<title>
-			<%= htmlWebpackPlugin.options.title %>
-		</title>
+		<title><%= htmlWebpackPlugin.options.title %></title>
 
 		<% for (var css in htmlWebpackPlugin.files.css) { %>
 		<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet" />
@@ -193,7 +191,12 @@
 			<img
 				src="<%= htmlWebpackPlugin.options.logo %>"
 				alt="Un service de l'État français"
-				style="width: 300px; margin: auto; margin-bottom: 0.6rem; display:block"
+				style="
+					width: 300px;
+					margin: auto;
+					margin-bottom: 0.6rem;
+					display: block;
+				"
 			/>
 			<div id="lds-ellipsis">
 				<div></div>
@@ -212,36 +215,70 @@
 			// Hack to force styled components to render styles during prerender
 			if (window.__PRERENDER_INJECTED) {
 				window.onload = () => {
-					var el = document.createElement('style');
+					var el = document.createElement('style')
 					document.head.appendChild(el)
 					var styles = document.querySelectorAll('style[data-styled]')
 					for (style of styles.values()) {
-							for (rule of style.sheet.rules) {
-								el.appendChild(document.createTextNode(rule.cssText))
-							}
+						for (rule of style.sheet.rules) {
+							el.appendChild(document.createTextNode(rule.cssText))
+						}
 					}
+				}
 			}
-			};
 		</script>
 		<!-- APP  -->
 		<div id="js"></div>
 
+		<script>
+			// Set the main colors from the provided customization in the URL We do it
+			// before loading the whole JS bundle to avoid a UI flash. cf. #1786
+			try {
+				let iframeColor = new URLSearchParams(
+					document.location.search.substring(1)
+				).get('couleur')
+				if (iframeColor) {
+					;[
+						document.documentElement,
+						...document.querySelectorAll('.js-color-element'),
+					].forEach((element) => {
+						element.style.setProperty('--color', iframeColor)
+						element.style.setProperty('--lightColor', iframeColor)
+						element.style.setProperty('--darkColor', iframeColor)
+					})
+				}
+			} catch (e) {
+				console.error(e)
+			}
+		</script>
+
 		<!-- OUTDATED BROWSER WARNING -->
 		<div
 			id="outdated-browser"
-			style="position: fixed; top: 0; left: 0; bottom: 0; right: 0; display: none; background-color: white"
+			style="
+				position: fixed;
+				top: 0;
+				left: 0;
+				bottom: 0;
+				right: 0;
+				display: none;
+				background-color: white;
+			"
 		>
 			<div
-				style="margin: 100px auto; max-width: 800px; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 300;"
+				style="
+					margin: 100px auto;
+					max-width: 800px;
+					text-align: center;
+					font-family: 'Montserrat', sans-serif;
+					font-weight: 300;
+				"
 			>
 				<img
 					src="images/logo.svg"
 					alt="Logo mon-entreprise.fr"
-					style="width: 200px; margin-bottom: 2rem;"
+					style="width: 200px; margin-bottom: 2rem"
 				/>
-				<h1>
-					Votre navigateur n'est plus supporté.
-				</h1>
+				<h1>Votre navigateur n'est plus supporté.</h1>
 				<h2>
 					Nous vous invitons à réessayer avec un autre, ou depuis un mobile
 					récent.
@@ -267,15 +304,12 @@
 			</div>
 		</div>
 
-
 		<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
 		<script
 			type="module"
 			src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"
 		></script>
-		<% } %>
-
-		<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+		<% } %> <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
 		<script nomodule src="<%= chunk %>.legacy.bundle.js"></script>
 		<% } %>
 	</body>
diff --git a/mon-entreprise/source/Provider.tsx b/mon-entreprise/source/Provider.tsx
index 02d2dcd81..d0ca79574 100644
--- a/mon-entreprise/source/Provider.tsx
+++ b/mon-entreprise/source/Provider.tsx
@@ -116,10 +116,12 @@ export default function Provider({
 	display: none !important;
 }`
 	document.body.appendChild(css)
-	const iframeCouleur =
-		new URLSearchParams(document?.location.search.substring(1)).get(
-			'couleur'
-		) ?? undefined
+	// Note that the iframeColor is first set in the index.html file, but without
+	// the full palette generation that happen here. This is to prevent a UI
+	// flash, cf. #1786.
+	const iframeCouleur = new URLSearchParams(
+		document.location.search.substring(1)
+	).get('couleur')
 
 	return (
 		<ErrorBoundary
@@ -149,7 +151,7 @@ export default function Provider({
 		>
 			<ReduxProvider store={store}>
 				<ThemeColorsProvider
-					color={iframeCouleur && decodeURIComponent(iframeCouleur)}
+					color={iframeCouleur ? decodeURIComponent(iframeCouleur) : undefined}
 				>
 					<TrackingContext.Provider
 						value={
diff --git a/mon-entreprise/source/components/utils/colors.tsx b/mon-entreprise/source/components/utils/colors.tsx
index a6ed0f0ff..3e02af01e 100644
--- a/mon-entreprise/source/components/utils/colors.tsx
+++ b/mon-entreprise/source/components/utils/colors.tsx
@@ -117,6 +117,7 @@ export function ThemeColorsProvider({ color, children }: ProviderProps) {
 			{/* This div is only used to set the CSS variables */}
 			<div
 				ref={divRef}
+				className="js-color-element"
 				css={`
 					height: 100%;
 					display: flex;
diff --git a/mon-entreprise/source/iframe-integration-script.js b/mon-entreprise/source/iframe-integration-script.js
index daee799a6..ec6fc3260 100644
--- a/mon-entreprise/source/iframe-integration-script.js
+++ b/mon-entreprise/source/iframe-integration-script.js
@@ -7,7 +7,8 @@ let script =
 		document.getElementById('script-monentreprise') ||
 		document.getElementById('script-simulateur-embauche'),
 	moduleName = script.dataset.module || 'simulateur-embauche',
-	couleur = encodeURIComponent(script.dataset.couleur),
+	couleur =
+		script.dataset.couleur && encodeURIComponent(script.dataset.couleur),
 	lang = script.dataset.lang || 'fr',
 	fr = lang === 'fr',
 	baseUrl =
diff --git a/mon-entreprise/webpack.prod.js b/mon-entreprise/webpack.prod.js
index 790762f0e..53e20bb38 100644
--- a/mon-entreprise/webpack.prod.js
+++ b/mon-entreprise/webpack.prod.js
@@ -17,7 +17,7 @@ const cheerio = require('cheerio')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 
-const prerenderConfig = () => ({
+const prerenderConfig = {
 	staticDir: path.resolve('dist'),
 	renderer: new Renderer({
 		renderAfterTime: 5000,
@@ -26,10 +26,6 @@ const prerenderConfig = () => ({
 	}),
 	postProcess: (context) => {
 		const $ = cheerio.load(context.html)
-		// force https on twitter emoji cdn
-		$('img[src^="http://twemoji.maxcdn.com"]').each((i, el) => {
-			$(el).attr('src', (_, path) => path.replace('http://', 'https://'))
-		})
 		// Remove loader
 		$('#outdated-browser').after(`
 			<style>
@@ -42,13 +38,11 @@ const prerenderConfig = () => ({
 				}
 			</style>
 		`)
-		// Remove piwik script
-		$('script[src$="stats.data.gouv.fr/piwik.js"]').remove()
 
 		context.html = $.html()
 		return context
 	},
-})
+}
 
 module.exports = {
 	...common,
@@ -86,14 +80,14 @@ module.exports = {
 		}),
 		process.env.ANALYZE_BUNDLE !== '1' &&
 			new PrerenderSPAPlugin({
-				...prerenderConfig(),
+				...prerenderConfig,
 				outputDir: path.resolve('dist', 'prerender', 'infrance'),
 				routes: ['/', '/calculators/salary', '/iframes/simulateur-embauche'],
 				indexPath: path.resolve('dist', 'infrance.html'),
 			}),
 		process.env.ANALYZE_BUNDLE !== '1' &&
 			new PrerenderSPAPlugin({
-				...prerenderConfig(),
+				...prerenderConfig,
 				outputDir: path.resolve('dist', 'prerender', 'mon-entreprise'),
 				routes: [
 					'/',
diff --git a/yarn.lock b/yarn.lock
index 42a4ad46f..b237c6497 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5917,6 +5917,11 @@ classnames@^2.2.5:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
+classnames@^2.2.6:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@4.2.x:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"