front: add error messages for missing path steps in new itinerary modal

Signed-off-by: Theo Macron <theo.macron0315@gmail.com>

Author: Akctarus

front/public/locales/en/operational-studies.json

@@ -410,6 +410,9 @@
     "itineraryModal": {
       "addLocationOnMap": "Add a location on the map",
       "alertInvalidOP": "At least one of the waypoints could not be recognized",
+      "alertMissingDestination": "Destination is not defined",
+      "alertMissingOrigin": "Origin is not defined",
+      "alertMissingRequestedPoint": "At least two path steps are required to define an itinerary",
       "cancel": "Cancel",
       "focusLocationOnMap": "Focus the map on this operational point",
       "frameAll": "Center on all path steps on map",

front/public/locales/fr/operational-studies.json

@@ -410,6 +410,9 @@
     "itineraryModal": {
       "addLocationOnMap": "Ajouter un point remarquable sur la carte",
       "alertInvalidOP": "Au moins un des points de passage n'a pas été reconnu",
+      "alertMissingDestination": "La destination n'est pas définie",
+      "alertMissingOrigin": "L'origine n'est pas définie",
+      "alertMissingRequestedPoint": "Il faut au minimum deux points de passage pour définir un itinéraire",
       "cancel": "Annuler",
       "focusLocationOnMap": "Centrer la carte sur ce point remarquable",
       "frameAll": "Centrer sur tous les points de passage sur la carte",

front/src/applications/operationalStudies/views/Scenario/components/ManageTimetableItem/Itinerary/ItineraryModal.tsx

@@ -80,6 +80,7 @@ const ItineraryModal = ({
 
   const [pathSteps, setPathSteps] = useState<PathStepV2[]>([]);
   const [categoryWarning, setCategoryWarning] = useState<string | undefined>(undefined);
+  const [alertBoxWiggle, setAlertBoxWiggle] = useState(0);
 
   const [hoveredGapIndex, setHoveredGapIndex] = useState<number | null>(null);
 
@@ -364,10 +365,9 @@ const ItineraryModal = ({
 
   const submitItinerary = () => {
     setSubmitAttempted(true);
+    setAlertBoxWiggle((c) => c + 1);
     if (isNameEmpty) return;
-    if (locatedStepsCount < 2) {
-      return;
-    }
+    if (locatedStepsCount < 2) return;
 
     const filledSteps = pathSteps.filter((step) => !isEmptyStep(step, getInputForStep(step.id)));
     if (filledSteps.length < 2) return;
@@ -416,9 +416,29 @@ const ItineraryModal = ({
         </div>
         <div className="itinerary-modal-form-body">
           {categoryWarning && <AlertBox message={categoryWarning} closeable />}
-          {hasInvalidPathStepDisplay && <AlertBox type="error" message={t('alertInvalidOP')} />}
+          {hasInvalidPathStepDisplay && (
+            <div key={`invalid-op-${alertBoxWiggle}`}>
+              <AlertBox type="error" message={t('alertInvalidOP')} />
+            </div>
+          )}
           {!hasInvalidPathStepDisplay && pathfindingError && (
-            <AlertBox type="error" message={pathfindingError} />
+            <div key={`pathfinding-${alertBoxWiggle}`}>
+              <AlertBox type="error" message={pathfindingError} />
+            </div>
+          )}
+          {submitAttempted && (!pathSteps[0]?.location || locatedStepsCount < 2) && (
+            <div key={`missing-step-${alertBoxWiggle}`}>
+              <AlertBox
+                type="error"
+                message={t(
+                  !pathSteps[0]?.location && locatedStepsCount < 2
+                    ? 'alertMissingRequestedPoint'
+                    : !pathSteps[0]?.location
+                      ? 'alertMissingOrigin'
+                      : 'alertMissingDestination'
+                )}
+              />
+            </div>
           )}
           <TypeAndPath rollingStockId={rollingStockId} isInNewModal />
           <div className="path-step-list">

front/src/styles/scss/applications/operationalStudies/_itineraryModal.scss

@@ -1,5 +1,23 @@
 @use './scenario';
 
+@keyframes wiggle {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(5px);
+  }
+  50% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
 .itinerary-modal {
   --header-height: 164px;
   --footer-height: 96px;
@@ -121,6 +139,7 @@
 
       .alert-box {
         margin-top: -1px;
+        animation: wiggle 0.4s ease-in;
       }
 
       .path-step-list {