front: rename and refacto StdcmInputVia

front/src/applications/stdcm/components/StdcmForm/StdcmVias.tsx

@@ -13,9 +13,9 @@ import { useAppDispatch } from 'store';
 
 import StdcmCard from './StdcmCard';
 import StdcmDefaultCard from './StdcmDefaultCard';
-import StdcmInputVia from './StdcmInputVia';
 import StdcmOperationalPoint from './StdcmOperationalPoint';
 import StdcmStopType from './StdcmStopType';
+import StopDurationInput from './StopDurationInput';
 import { StdcmStopTypes } from '../../types';
 import type { StdcmConfigCardProps } from '../../types';
 
@@ -84,16 +84,6 @@ const StdcmVias = ({ disabled = false }: StdcmConfigCardProps) => {
     };
   }, [newIntermediateOpIndex]);
 
-  const updateStopDuration = (stopTime: string, pathStep: StdcmPathStep) => {
-    const stopFor = stopTime ? Number(stopTime) : undefined;
-    dispatch(
-      updateStdcmPathStep({
-        id: pathStep.id,
-        updates: { stopFor },
-      })
-    );
-  };
-
   const deleteViaOnClick = (pathStepId: string) => {
     dispatch(deleteStdcmVia(pathStepId));
   };
@@ -147,11 +137,9 @@ const StdcmVias = ({ disabled = false }: StdcmConfigCardProps) => {
                 stopTypes={pathStep.stopType}
                 updatePathStepStopType={(newStopType) => updateStopType(newStopType, pathStep)}
               />
-              <StdcmInputVia
-                stopType={pathStep.stopType}
-                stopDuration={pathStep.stopFor}
-                updatePathStepStopTime={(e) => updateStopDuration(e, pathStep)}
-              />
+              {pathStep.stopType !== StdcmStopTypes.PASSAGE_TIME && (
+                <StopDurationInput pathStep={pathStep} />
+              )}
             </StdcmCard>
           </div>
         );

front/src/applications/stdcm/components/StdcmForm/StopDurationInput.tsx

@@ -0,0 +1,75 @@
+import { useMemo, useEffect, useState } from 'react';
+
+import { Input } from '@osrd-project/ui-core';
+import type { Status } from '@osrd-project/ui-core/dist/components/inputs/StatusMessage';
+import { useTranslation } from 'react-i18next';
+
+import { useOsrdConfActions } from 'common/osrdContext';
+import type { StdcmConfSliceActions } from 'reducers/osrdconf/stdcmConf';
+import type { StdcmPathStep } from 'reducers/osrdconf/types';
+import { useAppDispatch } from 'store';
+import { useDebounce } from 'utils/helpers';
+
+import { StdcmStopTypes } from '../../types';
+
+type StopDurationInputProps = {
+  pathStep: Extract<StdcmPathStep, { isVia: true }>;
+};
+
+const StopDurationInput = ({ pathStep }: StopDurationInputProps) => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation('stdcm');
+
+  const { updateStdcmPathStep } = useOsrdConfActions() as StdcmConfSliceActions;
+
+  const [stopDuration, setStopDuration] = useState('');
+  const debouncedStopDuration = useDebounce(stopDuration, 300);
+
+  const stopWarning = useMemo(
+    () =>
+      pathStep.stopType === StdcmStopTypes.DRIVER_SWITCH &&
+      pathStep.stopFor !== undefined &&
+      pathStep.stopFor < 3
+        ? {
+            status: 'warning' as Status,
+            message: t('trainPath.warningMinStopTime'),
+          }
+        : undefined,
+    [pathStep.stopType, pathStep.stopFor]
+  );
+  useEffect(() => {
+    setStopDuration(pathStep.stopFor !== undefined ? `${pathStep.stopFor}` : '');
+  }, [pathStep.stopFor]);
+
+  useEffect(() => {
+    const newStopDuration = debouncedStopDuration ? Number(debouncedStopDuration) : undefined;
+    if (newStopDuration !== pathStep.stopFor) {
+      dispatch(
+        updateStdcmPathStep({
+          id: pathStep.id,
+          updates: { stopFor: newStopDuration },
+        })
+      );
+    }
+  }, [debouncedStopDuration]);
+
+  return (
+    <div className="stop-time">
+      <Input
+        id="stdcm-via-stop-time"
+        type="text"
+        label={t('trainPath.stopFor')}
+        onChange={(e) => {
+          // TODO: Find a better way to prevent user from entering decimal values
+          const value = e.target.value.replace(/[\D.,]/g, '');
+          setStopDuration(value);
+        }}
+        value={stopDuration}
+        trailingContent="minutes"
+        statusWithMessage={stopWarning}
+      />
+    </div>
+  );
+};
+
+export default StopDurationInput;