From 9fd7acbcdde445ba4a86b61ffe6ec52f5a3dab67 Mon Sep 17 00:00:00 2001
From: Jonathan <395137+Grafikart@users.noreply.github.com>
Date: Wed, 14 Aug 2024 17:04:55 +0200
Subject: [PATCH] Error on item for roundabout (#1145)

---
 .../Roundabout/CustomRoundabout.tsx           | 20 ++++++++++++-------
 src/components/Roundabout/Roundabout.tsx      | 15 +++++++++++++-
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/Roundabout/CustomRoundabout.tsx b/src/components/Roundabout/CustomRoundabout.tsx
index c9e2b93b5..1dff82a8d 100644
--- a/src/components/Roundabout/CustomRoundabout.tsx
+++ b/src/components/Roundabout/CustomRoundabout.tsx
@@ -4,11 +4,9 @@ import { Label } from '../shared/Label/Label';
 import type { ItemOf } from '../../type.utils';
 import { Button } from '../shared/Button/Button';
 import classnames from 'classnames';
-import {
-	ComponentErrors,
-	getComponentErrors,
-} from '../shared/ComponentErrors/ComponentErrors';
+import { ComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
 import type { LunaticError } from '../../use-lunatic/type';
+import type { ReactNode } from 'react';
 
 type PropsItem = ItemOf<LunaticComponentProps<'Roundabout'>['items']> & {
 	onClick: () => void;
@@ -62,14 +60,22 @@ function RoundaboutItem({
 
 type Props = Pick<
 	LunaticComponentProps<'Roundabout'>,
-	'items' | 'label' | 'locked' | 'id' | 'errors'
+	'label' | 'locked' | 'id'
 > & {
 	goToIteration: (v: number) => void;
+	errors?: LunaticError[];
+	items: {
+		label?: ReactNode;
+		progress: number; // -1: not completed, 0: started, 1: finished
+		description?: ReactNode;
+		disabled?: boolean;
+		errors?: LunaticError[] | undefined;
+	}[];
 };
 
 export const CustomRoundabout = slottableComponent<Props>(
 	'Roundabout',
-	({ items, goToIteration, label, locked, errors, id }) => {
+	({ items, goToIteration, label, locked }) => {
 		return (
 			<div className="lunatic-roundabout">
 				<Label>{label}</Label>
@@ -79,7 +85,7 @@ export const CustomRoundabout = slottableComponent<Props>(
 							key={k}
 							iteration={k}
 							{...item}
-							errors={getComponentErrors(errors, `${id}-${k}`)}
+							errors={item.errors}
 							onClick={() => goToIteration(k)}
 							locked={locked}
 						/>
diff --git a/src/components/Roundabout/Roundabout.tsx b/src/components/Roundabout/Roundabout.tsx
index ed7a5bcb2..eeb93dbaf 100644
--- a/src/components/Roundabout/Roundabout.tsx
+++ b/src/components/Roundabout/Roundabout.tsx
@@ -1,5 +1,6 @@
 import { CustomRoundabout } from './CustomRoundabout';
 import type { LunaticComponentProps } from '../type';
+import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
 
 /**
  * Roundabout is a special loop component where the user can select the iteration to go to
@@ -22,5 +23,17 @@ export function Roundabout(props: LunaticComponentProps<'Roundabout'>) {
 		});
 	};
 
-	return <CustomRoundabout {...props} goToIteration={goToIteration} />;
+	const itemsWithErrors = props.items.map((item, k) => ({
+		...item,
+		errors: getComponentErrors(props.errors, `${props.id}-${k}`),
+	}));
+
+	return (
+		<CustomRoundabout
+			{...props}
+			errors={getComponentErrors(props.errors, props.id)}
+			items={itemsWithErrors}
+			goToIteration={goToIteration}
+		/>
+	);
 }