Feat/v3 modal cancel

src/components/ComponentsRenderer/ComponentsRenderer.tsx

@@ -2,14 +2,22 @@ import * as lunatic from '@inseefr/lunatic';
 import { OrchestratedElement } from '../../typeStromae/type';
 import { LunaticComponentContainer } from '../formulaire/LunaticComponentContainer';
 import { LunaticComponents } from '@inseefr/lunatic';
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 
 type Props = {
 	only?: string[];
 	except?: string[];
 	// Key that trigger a new autofocus on the first field
 	focusKey?: string;
-} & Pick<OrchestratedElement, 'currentErrors' | 'disabled' | 'getComponents'>;
+} & Pick<
+	OrchestratedElement,
+	| 'currentErrors'
+	| 'disabled'
+	| 'getComponents'
+	| 'goToPage'
+	| 'goPreviousPage'
+	| 'goNextPage'
+>;
 
 export function ComponentsRenderer(props: Props) {
 	const {
@@ -27,18 +35,20 @@ export function ComponentsRenderer(props: Props) {
 		) ?? [];
 
 	return (
-		<LunaticComponents
-			autoFocusKey={computeFocusKey(focusKey, currentErrors)}
-			components={validComponents as any}
-			componentProps={() => ({
-				...rest,
-				errors: currentErrors,
-				disabled,
-			})}
-			wrapper={({ children, id }: { children: ReactNode; id: string }) => (
-				<LunaticComponentContainer id={id} children={children} />
-			)}
-		/>
+		<>
+			<LunaticComponents
+				autoFocusKey={computeFocusKey(focusKey, currentErrors)}
+				components={validComponents as any}
+				componentProps={() => ({
+					...rest,
+					errors: currentErrors,
+					disabled,
+				})}
+				wrapper={({ children, id }: { children: ReactNode; id: string }) => (
+					<LunaticComponentContainer id={id} children={children} />
+				)}
+			/>
+		</>
 	);
 }
 

src/components/ConfirmationModal/ConfirmationModal.tsx

@@ -0,0 +1,76 @@
+import { ReactNode, useCallback, useContext, useState } from 'react';
+import { makeStyles } from '@codegouvfr/react-dsfr/tss';
+import { GoToPage } from '../../typeLunatic/type-source';
+import {
+	ModalDsfr,
+	ModalDsfrContent,
+	ModalDsfrFooter,
+} from '../ContinueOrRestart/ModalDsfr';
+import { fr } from '@codegouvfr/react-dsfr';
+import { useLunaticContext } from '../orchestrator/UseLunatic';
+
+const useStyles = makeStyles()({
+	root: {
+		'+ .lunatic-component-with-dsfr': {
+			marginBottom: '2rem',
+		},
+	},
+});
+
+type ConfirmationType = {
+	goToPage?: GoToPage;
+	description: ReactNode;
+	label: ReactNode;
+};
+
+export function ConfirmationModal(props: ConfirmationType) {
+	const { classes, cx } = useStyles();
+
+	const [display, setDisplay] = useState(true);
+	const { goToPage, goNextPage } = useContext(useLunaticContext);
+	const onClose = useCallback(() => {
+		setDisplay(false);
+		goToPage?.({ page: '17' });
+	}, [goToPage]);
+
+	const confirm = useCallback(() => {
+		goNextPage?.();
+	}, [goNextPage]);
+
+	if (!display) {
+		return null;
+	}
+	return (
+		<div id="stromae-modals" className={cx(classes.root)}>
+			<ModalDsfr close={onClose}>
+				<ModalDsfrContent>
+					<h1 className="fr-modal__title">{props.label}</h1>
+					{props.description}
+				</ModalDsfrContent>
+				<ModalDsfrFooter>
+					<ul
+						className={fr.cx(
+							'fr-btns-group',
+							'fr-btns-group--inline-md',
+							'fr-btns-group--right'
+						)}
+					>
+						<li>
+							<button
+								className={fr.cx('fr-btn', 'fr-btn--secondary')}
+								onClick={onClose}
+							>
+								Annuler
+							</button>
+						</li>
+						<li>
+							<button className={fr.cx('fr-btn')} onClick={confirm}>
+								Je confirme
+							</button>
+						</li>
+					</ul>
+				</ModalDsfrFooter>
+			</ModalDsfr>
+		</div>
+	);
+}

src/components/ContinueOrRestart/ModalContinueOrRestart.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { ModalDsfr } from './ModalDsfr';
+import { ModalDsfr, ModalDsfrContent, ModalDsfrFooter } from './ModalDsfr';
 import { fr } from '@codegouvfr/react-dsfr/fr';
 
 export function ModalContinueOrRestart(props: {
@@ -15,30 +15,36 @@ export function ModalContinueOrRestart(props: {
 			close={props.onClose}
 			last={last.current as HTMLElement}
 		>
-			<h1 className={fr.cx('fr-modal__title')}  id="fr-modal-title-modal-1">Bienvenue</h1>
-			<p>
-				Vous avez déjà commencé à renseigner le questionnaire. Souhaitez-vous
-				reprendre là où vous en étiez ou revenir à la première page ?
-			</p>
-			<ul className={fr.cx('fr-btns-group', 'fr-btns-group--inline-md')}>
-				<li>
-					<button
-						className={fr.cx('fr-btn', 'fr-btn--secondary')}
-						onClick={props.onRestart}
-					>
-						Revenir à la première page
-					</button>
-				</li>
-				<li>
-					<button
-						className={fr.cx('fr-btn')}
-						onClick={props.onContinue}
-						ref={last}
-					>
-						Reprendre là où j'en étais
-					</button>
-				</li>
-			</ul>
+			<ModalDsfrContent>
+				<h1 className={fr.cx('fr-modal__title')} id="fr-modal-title-modal-1">
+					Bienvenue
+				</h1>
+				<p>
+					Vous avez déjà commencé à renseigner le questionnaire. Souhaitez-vous
+					reprendre là où vous en étiez ou revenir à la première page ?
+				</p>
+			</ModalDsfrContent>
+			<ModalDsfrFooter>
+				<ul className={fr.cx('fr-btns-group', 'fr-btns-group--inline-md')}>
+					<li>
+						<button
+							className={fr.cx('fr-btn', 'fr-btn--secondary')}
+							onClick={props.onRestart}
+						>
+							Revenir à la première page
+						</button>
+					</li>
+					<li>
+						<button
+							className={fr.cx('fr-btn')}
+							onClick={props.onContinue}
+							ref={last}
+						>
+							Reprendre là où j'en étais
+						</button>
+					</li>
+				</ul>
+			</ModalDsfrFooter>
 		</ModalDsfr>
 	);
 }

src/components/ContinueOrRestart/ModalDsfr.tsx

@@ -8,6 +8,14 @@ type ModalDsfrProps = {
 	last?: HTMLElement;
 };
 
+export function ModalDsfrContent(props: PropsWithChildren) {
+	return <div className={fr.cx('fr-modal__content')}>{props.children}</div>;
+}
+
+export function ModalDsfrFooter(props: PropsWithChildren) {
+	return <div className="fr-modal__footer">{props.children}</div>;
+}
+
 export function ModalDsfr(props: PropsWithChildren<ModalDsfrProps>) {
 	const first = useRef<HTMLButtonElement>(null);
 	const { children, id, close, last } = props;
@@ -26,7 +34,13 @@ export function ModalDsfr(props: PropsWithChildren<ModalDsfrProps>) {
 	);
 
 	return (
-		<div  id={id} className={fr.cx('fr-modal', 'fr-modal--opened')} role='dialog' aria-labelledby="fr-modal-title-modal-1" aria-modal="true">
+		<div
+			id={id}
+			className={fr.cx('fr-modal', 'fr-modal--opened')}
+			role="dialog"
+			aria-labelledby="fr-modal-title-modal-1"
+			aria-modal="true"
+		>
 			<div
 				className={fr.cx(
 					'fr-container',
@@ -44,13 +58,15 @@ export function ModalDsfr(props: PropsWithChildren<ModalDsfrProps>) {
 								<button
 									className={fr.cx('fr-link--close', 'fr-link')}
 									title="Fermer"
-									onClick={close}
+									onClick={() => {
+										close();
+									}}
 									ref={first}
 								>
 									Fermer
 								</button>
 							</div>
-							<div className={fr.cx('fr-modal__content')}>{children}</div>
+							{children}
 						</div>
 					</div>
 				</div>

src/components/formulaire/Formulaire.tsx

@@ -11,6 +11,8 @@ type Props = Pick<
 	| 'waiting'
 	| 'pageTag'
 	| 'isLastPage'
+	| 'goNextPage'
+	| 'goToPage'
 >;
 
 const useStyles = makeStyles()({
@@ -87,6 +89,8 @@ const useStyles = makeStyles()({
 export function Formulaire(props: Props) {
 	const {
 		getComponents,
+		goToPage,
+		goNextPage,
 		currentErrors,
 		disabled = false,
 		waiting,
@@ -102,9 +106,11 @@ export function Formulaire(props: Props) {
 			<ComponentsRenderer
 				focusKey={pageTag}
 				getComponents={getComponents}
+				goToPage={goToPage}
+				goNextPage={goNextPage}
 				currentErrors={currentErrors}
 				disabled={disabled}
-				except={['QuestionExplication', 'ConfirmationModal']}
+				except={['QuestionExplication']}
 			/>
 		</form>
 	);