Add terminal details to stop page

suvikankare · suvikankare · commit a78212b7cb2a · 2025-07-07T12:43:10.000+03:00
diff --git a/ui/src/components/stop-registry/stops/stop-details/location-details/LocationDetailsForm.tsx b/ui/src/components/stop-registry/stops/stop-details/location-details/LocationDetailsForm.tsx
@@ -3,8 +3,10 @@ import React, { ForwardRefRenderFunction } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Column, Row } from '../../../../../layoutComponents';
+import { StopWithDetails } from '../../../../../types';
 import { FormColumn, InputField, InputLabel } from '../../../../forms/common';
 import { useDirtyFormBlockNavigation } from '../../../../forms/common/NavigationBlocker';
+import { LocationTerminalDetails } from './LocationTerminalDetails';
 import { LocationDetailsFormState, locationDetailsFormSchema } from './schema';
 
 const testIds = {
@@ -21,18 +23,14 @@ const testIds = {
 type LocationDetailsFormComponentProps = {
   readonly className?: string;
   readonly defaultValues: Partial<LocationDetailsFormState>;
-  readonly municipality?: string | null;
-  readonly fareZone?: string | null;
   readonly onSubmit: (state: LocationDetailsFormState) => void;
+  readonly stop: StopWithDetails;
 };
 
 const LocationDetailsFormComponent: ForwardRefRenderFunction<
   ExplicitAny,
   LocationDetailsFormComponentProps
-> = (
-  { className = '', defaultValues, municipality, fareZone, onSubmit },
-  ref,
-) => {
+> = ({ className = '', defaultValues, onSubmit, stop }, ref) => {
   const { t } = useTranslation();
 
   const methods = useForm<LocationDetailsFormState>({
@@ -46,8 +44,9 @@ const LocationDetailsFormComponent: ForwardRefRenderFunction<
     // eslint-disable-next-line react/jsx-props-no-spreading
     <FormProvider {...methods}>
       <form className={className} onSubmit={handleSubmit(onSubmit)} ref={ref}>
+        <LocationTerminalDetails stop={stop} />
         <FormColumn>
-          <Row className="flex-wrap gap-4">
+          <Row className="mt-5 flex-wrap gap-4">
             <InputField<LocationDetailsFormState>
               type="text"
               translationPrefix="stopDetails.location"
@@ -76,7 +75,7 @@ const LocationDetailsFormComponent: ForwardRefRenderFunction<
                 >
                   {
                     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                    municipality || '-'
+                    stop.stop_place?.municipality || '-'
                   }
                 </span>
                 <i className="icon-info text-lg text-brand" />
@@ -97,7 +96,7 @@ const LocationDetailsFormComponent: ForwardRefRenderFunction<
                 >
                   {
                     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                    fareZone || '-'
+                    stop.stop_place?.fareZone || '-'
                   }
                 </span>
                 <i className="icon-info text-lg text-brand" />
diff --git a/ui/src/components/stop-registry/stops/stop-details/location-details/LocationDetailsSection.tsx b/ui/src/components/stop-registry/stops/stop-details/location-details/LocationDetailsSection.tsx
@@ -7,6 +7,7 @@ import { InfoContainer, useInfoContainerControls } from '../../../../common';
 import { stopInfoContainerColors } from '../stopInfoContainerColors';
 import { LocationDetailsForm } from './LocationDetailsForm';
 import { LocationDetailsViewCard } from './LocationDetailsViewCard';
+import { LocationTerminalDetails } from './LocationTerminalDetails';
 import { LocationDetailsFormState } from './schema';
 
 type LocationDetailsSectionProps = {
@@ -65,13 +66,15 @@ export const LocationDetailsSection: FC<LocationDetailsSectionProps> = ({
       {infoContainerControls.isInEditMode && !!defaultValues ? (
         <LocationDetailsForm
           defaultValues={defaultValues}
-          municipality={stop.stop_place?.municipality}
-          fareZone={stop.stop_place?.fareZone}
+          stop={stop}
           ref={formRef}
           onSubmit={onSubmit}
         />
       ) : (
-        <LocationDetailsViewCard stop={stop} />
+        <>
+          <LocationTerminalDetails stop={stop} />
+          <LocationDetailsViewCard stop={stop} />
+        </>
       )}
     </InfoContainer>
   );
diff --git a/ui/src/components/stop-registry/stops/stop-details/location-details/LocationDetailsViewCard.tsx b/ui/src/components/stop-registry/stops/stop-details/location-details/LocationDetailsViewCard.tsx
@@ -18,10 +18,8 @@ const testIds = {
   stopAreaName: 'LocationDetailsViewCard::stopAreaName',
   stopAreaStops: 'LocationDetailsViewCard::stopAreaStops',
   quay: 'LocationDetailsViewCard::quay',
+  guidanceType: 'LocationDetailsViewCard::guidanceType',
   stopAreaQuays: 'LocationDetailsViewCard::stopAreaQuays',
-  terminal: 'LocationDetailsViewCard::terminal',
-  terminalName: 'LocationDetailsViewCard::terminalName',
-  terminalStops: 'LocationDetailsViewCard::terminalStops',
 };
 
 type LocationDetailsViewCardProps = {
@@ -85,50 +83,22 @@ export const LocationDetailsViewCard: FC<LocationDetailsViewCardProps> = ({
       </DetailRow>
       <HorizontalSeparator />
       <DetailRow>
-        <LabeledDetail
-          title={t('stopDetails.location.stopArea')}
-          detail={null /* TODO */}
-          testId={testIds.stopArea}
-        />
-        <LabeledDetail
-          title={t('stopDetails.location.stopAreaName')}
-          detail={null /* TODO */}
-          testId={testIds.stopAreaName}
-        />
-        <LabeledDetail
-          title={t('stopDetails.location.stopAreaStops')}
-          detail={null /* TODO */}
-          testId={testIds.stopAreaStops}
-        />
         <LabeledDetail
           title={t('stopDetails.location.quay')}
-          detail={
-            null /* TODO:  stop.quay?.placeEquipments?.generalSign?.content?.value */
-          }
-          testId={testIds.quay}
-        />
-        <LabeledDetail
-          title={t('stopDetails.location.stopAreaQuays')}
           detail={null /* TODO */}
-          testId={testIds.stopAreaQuays}
-        />
-      </DetailRow>
-      <HorizontalSeparator />
-      <DetailRow>
-        <LabeledDetail
-          title={t('stopDetails.location.terminal')}
-          detail={null /* TODO */}
-          testId={testIds.terminal}
+          testId={testIds.quay}
         />
         <LabeledDetail
-          title={t('stopDetails.location.terminalName')}
+          title={t('stopDetails.location.guidanceType')}
           detail={null /* TODO */}
-          testId={testIds.terminalName}
+          testId={testIds.guidanceType}
         />
         <LabeledDetail
-          title={t('stopDetails.location.terminalStops')}
+          title={t('stopDetails.location.stopAreaQuays', {
+            total: 0,
+          })}
           detail={null /* TODO */}
-          testId={testIds.terminalStops}
+          testId={testIds.stopAreaQuays}
         />
       </DetailRow>
     </div>
diff --git a/ui/src/components/stop-registry/stops/stop-details/location-details/LocationTerminalDetails.tsx b/ui/src/components/stop-registry/stops/stop-details/location-details/LocationTerminalDetails.tsx
@@ -0,0 +1,60 @@
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router';
+import { Path, routeDetails } from '../../../../../router/routeDetails';
+import { StopWithDetails } from '../../../../../types';
+import { DetailRow, LabeledDetail } from '../layout';
+
+type LocationTerminalDetailsProps = {
+  readonly stop: StopWithDetails;
+};
+
+const testIds = {
+  terminal: 'LocationDetailsViewCard::terminal',
+  terminalLink: 'LocationDetailsViewCard::terminalLink',
+  terminalPrivateCode: 'LocationDetailsViewCard::terminalPrivateCode',
+  terminalName: 'LocationDetailsViewCard::terminalName',
+  terminalStops: 'LocationDetailsViewCard::terminalStops',
+};
+
+export const LocationTerminalDetails: FC<LocationTerminalDetailsProps> = ({
+  stop,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="-mx-5 -mt-5 bg-background px-5 py-2.5">
+      {/* Has negative margin to stretch grey bg to previous div */}
+      <DetailRow>
+        <Link
+          to={routeDetails[Path.terminalDetails].getLink(stop.stop_place?.id)}
+          data-testid={testIds.terminalLink}
+          title={t('accessibility:terminals.showTerminalDetails', {
+            terminalLabel: stop.stop_place?.name,
+          })}
+        >
+          <div className="flex flex-col">
+            <div className="text-sm">{t('stopDetails.location.terminal')}</div>
+            <div
+              className="text-sm font-bold"
+              data-testid={testIds.terminalPrivateCode}
+            >
+              <span>{stop.stop_place?.privateCode?.value}</span>
+              <i className="icon-open-in-new ml-1" aria-hidden="true" />
+            </div>
+          </div>
+        </Link>
+        <LabeledDetail
+          title={t('stopDetails.location.terminalName')}
+          detail={null /* TODO */}
+          testId={testIds.terminalName}
+        />
+        <LabeledDetail
+          title={t('stopDetails.location.terminalStops')}
+          detail={null /* TODO */}
+          testId={testIds.terminalStops}
+        />
+      </DetailRow>
+    </div>
+  );
+};
diff --git a/ui/src/locales/en-US/common.json b/ui/src/locales/en-US/common.json
@@ -259,10 +259,8 @@
       "longitude": "Longitude",
       "altitude": "Altitude",
       "functionalArea": "Functional area",
-      "stopArea": "Stop area",
-      "stopAreaName": "Stop area name",
-      "stopAreaStops": "Stop area stops",
       "quay": "Quay",
+      "guidanceType": "Guidance type",
       "stopAreaQuays": "Stop area quays",
       "terminal": "Terminal",
       "terminalName": "Terminal name",
diff --git a/ui/src/locales/fi-FI/common.json b/ui/src/locales/fi-FI/common.json
@@ -258,14 +258,12 @@
       "longitude": "Pituusaste",
       "altitude": "Korkeus",
       "functionalArea": "Toiminnallinen alue",
-      "stopArea": "Pysäkkialue",
-      "stopAreaName": "Pysäkkialueen nimi",
-      "stopAreaStops": "Jäsenpysäkit",
-      "quay": "Laituri",
-      "stopAreaQuays": "Jäsenlaiturit",
+      "quay": "Laiturinumero",
+      "guidanceType": "Opastetyyppi",
+      "stopAreaQuays": "Jäsenlaiturit ({{total}})",
       "terminal": "Terminaali",
       "terminalName": "Terminaalin nimi",
-      "terminalStops": "Jäsenpysäkit",
+      "terminalStops": "Terminaalin jäsenpysäkit",
       "input": {
         "functionalArea": "Toiminnallinen alue (m)"
       }
