From 2755ab5aec107bb4557af177f8561413217808be Mon Sep 17 00:00:00 2001
From: Florian <hi@florianpanchout.com>
Date: Mon, 4 Mar 2024 12:05:56 +0100
Subject: [PATCH] feat: stop sondage creation + add warning message

---
 nosgestesclimat                               |   2 +-
 .../publicodes/conference/Instructions.tsx    | 349 +-----------------
 source/sites/publicodes/conference/Survey.tsx |  15 +
 3 files changed, 31 insertions(+), 335 deletions(-)

diff --git a/nosgestesclimat b/nosgestesclimat
index 433f6914f..55391348a 160000
--- a/nosgestesclimat
+++ b/nosgestesclimat
@@ -1 +1 @@
-Subproject commit 433f6914f9d00519b01bb32eafff5a42a9484cb7
+Subproject commit 55391348adc6f2249c27038dd67fe24f370b48df
diff --git a/source/sites/publicodes/conference/Instructions.tsx b/source/sites/publicodes/conference/Instructions.tsx
index ceb63e816..e6290fd46 100644
--- a/source/sites/publicodes/conference/Instructions.tsx
+++ b/source/sites/publicodes/conference/Instructions.tsx
@@ -1,12 +1,6 @@
-import QRCode from 'qrcode.react'
-import { useContext, useState } from 'react'
-import { Trans, useTranslation } from 'react-i18next'
-import { Link, useNavigate } from 'react-router-dom'
-import ShareButton from '../../../components/ShareButton'
-import { ThemeColorsContext } from '../../../components/utils/colors'
-import { useQuery } from '../../../utils'
-import LoadingButton from './LoadingButton'
-import NamingBlock from './NamingBlock'
+import Button from '@/components/groupe/Button'
+import ButtonLink from '@/components/groupe/ButtonLink'
+import { Trans } from 'react-i18next'
 
 /* The conference mode can be used with two type of communication between users : P2P or database. The P2P mode was implemented first, then we decided that we needed a survey mode, with permanent data. But YJS is not yet designed plug and play for persistence, hence our survey mode will be implemented using Supabase/Postgre.
  *
@@ -14,333 +8,20 @@ import NamingBlock from './NamingBlock'
  *
  * */
 
-export default ({
-	room,
-	newRoom,
-	setNewRoom,
-	mode: defaultMode = 'sondage',
-	started = false,
-}) => {
-	const URLMode = useQuery().get('mode')
-	const navigate = useNavigate()
-	const [mode, setModeState] = useState(URLMode || defaultMode)
-	const setMode = (mode) => {
-		setModeState(mode)
-
-		navigate(`/?mode=${mode}`, { replace: true })
-	}
-	const { color } = useContext(ThemeColorsContext)
-	const URLbase = `https://${window.location.hostname}`
-	const URLPath = `/${mode}/${room || newRoom}`,
-		shareURL = URLbase + URLPath
-	const URLGuide = '/guide'
-
-	const { t } = useTranslation()
-
+export default () => {
 	return (
 		<div>
-			{!room && (
-				<Trans i18nKey={'publicodes.conference.Instructions.intro'}>
-					<p>
-						Le test d'empreinte climat est individuel, mais nous vous proposons
-						ici de le faire à plusieurs. Chacun sera derrière son écran, mais
-						pourra voir en temps réel les résultats des autres.
-					</p>
-					<p>
-						C'est l'occasion de réfléchir ensemble aux enjeux de notre propre
-						impact en comparant nos modes de vie.
-					</p>
-				</Trans>
-			)}
-			<h2 className="mt-4">{t('📘 Comment ça marche ?')}</h2>
-			{!started && (
-				<InstructionBlock
-					index="1"
-					title={<span>{t('💡 Choisissez un nom de salle')}</span>}
-				>
-					{!room && <NamingBlock {...{ newRoom, setNewRoom }} />}
-					{room && <p>{t("✅ C'est fait")}</p>}
-				</InstructionBlock>
-			)}
-			{!started && newRoom !== '' && !room && (
-				<InstructionBlock
-					index="2"
-					title={<span>{t('⏲️  Choisissez votre mode de simulation')}</span>}
-				>
-					<div
-						css={`
-							display: flex;
-							flex-wrap: wrap;
-							label {
-								flex: auto !important;
-								max-width: 16rem !important;
-								cursor: pointer;
-							}
-						`}
-					>
-						<label
-							className={`ui__ card box interactive ${
-								mode === 'sondage' ? 'selected' : ''
-							}`}
-						>
-							<input
-								type="radio"
-								name="mode"
-								value="sondage"
-								checked={mode === 'sondage'}
-								onChange={(e) => setMode(e.target.value)}
-							/>
-							<h3>
-								💾 <Trans>Sondage</Trans>
-							</h3>
-							<p>
-								<Trans
-									i18nKey={
-										'publicodes.conference.Instructions.descriptionModeSondage'
-									}
-								>
-									Mode persistant : les données des participants sont stockées
-									sur notre serveur et restent accessibles et téléchargeables{' '}
-									<strong>pendant deux mois</strong>.
-								</Trans>
-							</p>
-						</label>
-						<label
-							className={`ui__ card box interactive ${
-								mode === 'conférence' ? 'selected' : ''
-							}`}
-						>
-							<input
-								type="radio"
-								name="mode"
-								value="conférence"
-								checked={mode === 'conférence'}
-								onChange={(e) => setMode(e.target.value)}
-							/>
-							<h3>
-								🌠 <Trans>Conférence</Trans>
-							</h3>
-							<p>
-								<Trans
-									i18nKey={
-										'publicodes.conference.Instructions.descriptionModeConference'
-									}
-								>
-									Mode éphémère : parfait pour l'animation d'un atelier, une
-									présentation interactive ou entre amis. Les données restent
-									entre les participants (pair-à-pair sans serveur),{' '}
-									<strong>juste le temps de la conférence</strong>.
-								</Trans>
-							</p>
-						</label>
-					</div>
-					<div
-						css={`
-							margin-top: 1rem;
-						`}
-					>
-						{mode == 'conférence' && (
-							<p>
-								⚠️{' '}
-								<Trans
-									i18nKey={
-										'publicodes.conference.Instructions.avertissementModeConference'
-									}
-								>
-									<strong
-										css={`
-											background: yellow;
-										`}
-									>
-										Attention
-									</strong>
-									, il est possible que votre organisation bloque le
-									pair-à-pair, et donc l'utilisation du mode conférence. Faites
-									le test au préalable sur site et en duo : en cas de problème,
-									vous pouvez utiliser le mode sondage.
-								</Trans>
-							</p>
-						)}
-						{mode == 'sondage' && (
-							<p>
-								<Trans
-									i18nKey={
-										'publicodes.conference.Instructions.contextualisationLink'
-									}
-								>
-									💡 Vous souhaitez ajouter des questions pour obtenir des
-									informations supplémentaires sur les répondants ?{' '}
-									<Link to={'/groupe/documentation-contexte'}>
-										Découvrez la fonctionnalité "contextualisation de sondage !"{' '}
-									</Link>
-								</Trans>
-							</p>
-						)}
-					</div>
-				</InstructionBlock>
-			)}
-			{newRoom !== '' && !room && (
-				<InstructionBlock index="3" title={t('Prêt à démarrer ?')}>
-					<LoadingButton {...{ mode, URLPath, room: room || newRoom }} />
-				</InstructionBlock>
-			)}
-			<InstructionBlock
-				index="4"
-				noIndex={started}
-				title={
-					<span>{t('🔗 Partagez le lien à vos amis, collègues, etc.')}</span>
-				}
-			>
-				{!newRoom && !room ? (
-					<p>
-						<Trans>Choisissez d'abord un nom</Trans>
-					</p>
-				) : newRoom && !room ? null : (
-					<div
-						css={`
-							display: flex;
-							flex-wrap: wrap;
-							justify-content: center;
-							align-items: center;
-						`}
-					>
-						<QRCode
-							value={shareURL}
-							size={200}
-							bgColor={'#ffffff'}
-							fgColor={color}
-							level={'L'}
-							includeMargin={false}
-							renderAs={'svg'}
-							role={'img'}
-							aria-label={'QR code'}
-						/>
-						<ShareButton
-							text={t("Faites un test d'empreinte climat avec moi")}
-							label={t('Partager le lien')}
-							url={shareURL}
-							title={t('Nos Gestes Climat Conférence')}
-						/>
-					</div>
-				)}
-			</InstructionBlock>
-			<InstructionBlock
-				index="5"
-				noIndex={started}
-				title={<span>{t('🎰 Faites toutes et tous votre simulation')}</span>}
+			<Trans>
+				<p>
+				Vous souhaitez réaliser une enquête sur le bilan carbone de votre organisation ? Un nouveau mode sondage est disponible. 
+				</p>
+			</Trans>
+			<br/>
+			<ButtonLink
+				href='https://nosgestesclimat.fr/organisations?mtm_campaign=sondages.nosgestesclimat.fr'
 			>
-				{!room ? null : mode === 'conférence' ? (
-					<>
-						<p>
-							<Trans
-								i18nKey={
-									'publicodes.conference.Instructions.liensSimulationConference'
-								}
-							>
-								Au moment convenu, ouvrez ce lien tous en même temps et faites
-								chacun de votre côté votre simulation.
-							</Trans>
-						</p>
-						<Link to={'/simulateur/bilan'}>
-							<button className="ui__ button plain">
-								{t('Faites votre test')}
-							</button>
-						</Link>
-					</>
-				) : (
-					<>
-						<Link to={'/simulateur/bilan'}>
-							<button className="ui__ button plain">
-								{t('Faites votre test')}
-							</button>
-						</Link>
-					</>
-				)}
-			</InstructionBlock>
-			<InstructionBlock
-				index="6"
-				noIndex={started}
-				title={
-					<span>
-						{t('🧮 Visualisez à tout moment les résultats de votre groupe')}
-					</span>
-				}
-			>
-				<Trans i18nKey={'publicodes.conference.Instructions.resultatInfos'}>
-					Les résultats pour chaque catégorie (alimentation, transport, logement
-					...) s'affichent progressivement et en temps réel pour l'ensemble du
-					groupe sur{' '}
-				</Trans>
-				{!started ? (
-					t("la page à partager à l'étape 3")
-				) : (
-					<span>
-						{t('cette page')} <Link to={URLPath}>{URLPath}</Link>
-					</span>
-				)}
-				.
-			</InstructionBlock>
-			{room && (
-				<InstructionBlock
-					noIndex={started}
-					title={
-						<span>
-							<Trans>
-								📊 Analysez les résultats et animez les discussions !
-							</Trans>
-						</span>
-					}
-				>
-					<Trans i18nKey={'publicodes.conference.Instructions.guideLien'}>
-						Les résultats sont là, que faire ? Notre guide vous accompagne dans
-						vos réflexions et vos discussions sur cette page
-					</Trans>
-					&nbsp;
-					<Link to={URLGuide}>{URLGuide}</Link> !
-				</InstructionBlock>
-			)}
+				✨ Accéder au nouveau mode organisation
+			</ButtonLink>
 		</div>
 	)
-}
-
-const InstructionBlock = ({ title, index, children, noIndex }) => (
-	<div
-		className="ui__ card !mx-0"
-		css={`
-			display: flex;
-			justify-content: start;
-			align-items: center;
-			margin: 1rem;
-			padding-bottom: 0.6rem;
-			@media (max-width: 800px) {
-				flex-direction: column;
-			}
-		`}
-	>
-		{!noIndex && (
-			<div
-				css={`
-					font-size: 300%;
-					padding: 1rem;
-					width: 4rem;
-					background: var(--lightercolor);
-					border-radius: 5rem;
-					margin: 0 1rem;
-				`}
-			>
-				{index}
-			</div>
-		)}
-		<div
-			css={`
-				width: calc(100% - 3rem);
-				@media (max-width: 800px) {
-					width: 100%;
-				}
-			`}
-		>
-			<h3>{title}</h3>
-			{children}
-		</div>
-	</div>
-)
+}
\ No newline at end of file
diff --git a/source/sites/publicodes/conference/Survey.tsx b/source/sites/publicodes/conference/Survey.tsx
index d525a4385..7d023d371 100644
--- a/source/sites/publicodes/conference/Survey.tsx
+++ b/source/sites/publicodes/conference/Survey.tsx
@@ -20,6 +20,8 @@ import NoSurveyCreatedWarning from './NoSurveyCreatedWarning'
 import NoTestMessage from './NoTestMessage'
 import { answersURL, surveysURL } from './useDatabase'
 import { defaultThreshold } from './utils'
+import IllustratedMessage from '@/components/ui/IllustratedMessage'
+import ButtonLink from '@/components/groupe/ButtonLink'
 
 export default () => {
 	const [surveyIds] = usePersistingState('surveyIds', {})
@@ -85,6 +87,19 @@ export default () => {
 			/>
 			<AutoCanonicalTag />
 			<Title title={t('Sondage')} />
+			<IllustratedMessage
+				emoji="⚠️"
+				message={
+					<div>
+						<p>Ce sondage ne sera bientôt plus accessible, vous pouvez en recréer un sur notre nouveau mode organisation.</p>
+						<ButtonLink
+							href='https://nosgestesclimat.fr/organisations?mtm_campaign=sondages.nosgestesclimat.fr'
+						>
+							✨ Accéder au nouveau mode organisation
+						</ButtonLink>
+					</div>
+				}
+			/>
 			{isRegisteredSurvey == false && (
 				<div css="margin-bottom: 3rem">
 					<NoSurveyCreatedWarning />