Dt 5248

app/component/itinerary/ItineraryDetails.js

@@ -418,6 +418,17 @@ const withRelay = createFragmentContainer(
           legGeometry {
             points
           }
+          steps {
+            feature {
+              __typename
+              ... on Entrance {
+                publicCode
+                wheelchairAccessible
+              }
+            }
+            lat
+            lon
+          }
           nextLegs(
             numberOfLegs: 2
             originModesWithParentStation: [RAIL]

app/component/itinerary/Legs.js

@@ -201,7 +201,7 @@ export default class Legs extends React.Component {
         legs.push(<CarParkLeg {...legProps} carPark={carPark} />);
       } else if (isLegOnFoot(leg)) {
         legs.push(
-          <WalkLeg {...legProps} previousLeg={previousLeg}>
+          <WalkLeg {...legProps} previousLeg={previousLeg} nextLeg={nextLeg}>
             {stopCode(leg.from.stop)}
           </WalkLeg>,
         );
@@ -305,6 +305,7 @@ export default class Legs extends React.Component {
           index={numberOfLegs}
           leg={{ ...lastLeg, isViaPoint: false }}
           previousLeg={lastLeg}
+          nextLeg={compressedLegs[numberOfLegs]}
           focusAction={this.focus(lastLeg.to)}
           focusToLeg={this.focusToLeg(lastLeg)}
         >

app/component/itinerary/PlanConnection.js

@@ -115,6 +115,17 @@ const planConnection = graphql`
             legGeometry {
               points
             }
+            steps {
+              feature {
+                __typename
+                ... on Entrance {
+                  publicCode
+                  wheelchairAccessible
+                }
+              }
+              lat
+              lon
+            }
             route {
               shortName
               longName

app/component/itinerary/WalkLeg.js

@@ -22,7 +22,7 @@ import { splitStringToAddressAndPlace } from '../../util/otpStrings';
 import VehicleRentalLeg from './VehicleRentalLeg';
 
 function WalkLeg(
-  { children, focusAction, focusToLeg, index, leg, previousLeg },
+  { children, focusAction, focusToLeg, index, leg, previousLeg, nextLeg },
   { config, intl },
 ) {
   const distance = displayDistance(
@@ -74,6 +74,19 @@ function WalkLeg(
           defaultMessage: 'scooter',
         })
       : leg.to.name;
+  const entranceName = leg?.steps?.find(
+    step =>
+      // eslint-disable-next-line no-underscore-dangle
+      step?.feature?.__typename === 'Entrance' || step?.feature?.publicCode,
+  )?.feature?.publicCode;
+
+  const entranceAccessible = leg?.steps?.find(
+    // eslint-disable-next-line no-underscore-dangle
+    step =>
+      // eslint-disable-next-line no-underscore-dangle
+      step?.feature?.__typename === 'Entrance' ||
+      step?.feature?.wheelchairAccessible,
+  )?.feature?.wheelchairAccessible;
 
   return (
     <div key={index} className="row itinerary-row">
@@ -229,20 +242,75 @@ function WalkLeg(
           </div>
         )}
 
-        <div className="itinerary-leg-action itinerary-leg-action-content">
-          <FormattedMessage
-            id="walk-distance-duration"
-            values={{
-              distance: config.emphasizeDistance ? <b>{distance}</b> : distance,
-              duration,
-            }}
-            defaultMessage="Walk {distance} ({duration})"
-          />
-          <ItineraryMapAction
-            target=""
-            ariaLabelId="itinerary-summary-row.clickable-area-description"
-            focusAction={focusToLeg}
-          />
+        <div className="itinerary-leg-action">
+          {previousLeg?.mode === 'SUBWAY' && (
+            <div className="subway-entrance-info-container">
+              <div className="subway-entrance-info-text">
+                <FormattedMessage id="station-exit" defaultMessage="Exit" />
+              </div>
+              <Icon
+                img="icon-icon_subway_entrance"
+                className="subway-entrance-info-icon-metro"
+              />
+              {entranceName && (
+                <Icon
+                  className="subway-entrance-info-icon-code"
+                  img={`icon-icon_subway_entrance_${entranceName.toLowerCase()}`}
+                />
+              )}
+              {entranceAccessible === 'POSSIBLE' && (
+                <Icon
+                  className="subway-entrance-info-icon-code"
+                  img="icon-icon_wheelchair_filled"
+                />
+              )}
+            </div>
+          )}
+          <div className=" itinerary-leg-action-content">
+            <FormattedMessage
+              id="walk-distance-duration"
+              values={{
+                distance: config.emphasizeDistance ? (
+                  <b>{distance}</b>
+                ) : (
+                  distance
+                ),
+                duration,
+              }}
+              defaultMessage="Walk {distance} ({duration})"
+            />
+            <ItineraryMapAction
+              target=""
+              ariaLabelId="itinerary-summary-row.clickable-area-description"
+              focusAction={focusToLeg}
+            />
+          </div>
+          {nextLeg?.mode === 'SUBWAY' && (
+            <div className="subway-entrance-info-container">
+              <div className="subway-entrance-info-text">
+                <FormattedMessage
+                  id="station-entrance"
+                  defaultMessage="Entrance"
+                />
+              </div>
+              <Icon
+                img="icon-icon_subway_entrance"
+                className="subway-entrance-info-icon-metro"
+              />
+              {entranceName && (
+                <Icon
+                  className="subway-entrance-info-icon-code"
+                  img={`icon-icon_subway_entrance_${entranceName.toLowerCase()}`}
+                />
+              )}
+              {entranceAccessible === 'POSSIBLE' && (
+                <Icon
+                  className="subway-entrance-info-icon-code"
+                  img="icon-icon_wheelchair_filled"
+                />
+              )}
+            </div>
+          )}
         </div>
       </div>
     </div>
@@ -255,11 +323,13 @@ WalkLeg.propTypes = {
   index: PropTypes.number.isRequired,
   leg: legShape.isRequired,
   previousLeg: legShape,
+  nextLeg: legShape,
   focusToLeg: PropTypes.func.isRequired,
 };
 
 WalkLeg.defaultProps = {
   previousLeg: undefined,
+  nextLeg: undefined,
   children: undefined,
 };
 

app/component/itinerary/itinerary.scss

@@ -2112,7 +2112,7 @@ $itinerary-tab-switch-height: 48px;
     .itinerary-leg-action {
       border-top: 1px solid #ddd;
       padding: 1.2em 0;
-      margin-bottom: 1px;
+      margin-bottom: 1em;
       height: 60px;
       font-size: 0.9375rem;
 
@@ -2135,6 +2135,36 @@ $itinerary-tab-switch-height: 48px;
       }
     }
 
+    .subway-entrance-info-container {
+      display: flex;
+      align-items: center;
+      height: 24px;
+      margin-top: 1px;
+
+      .subway-entrance-info-text {
+        margin-right: 0.2em;
+        align-items: center;
+      }
+
+      .icon-container {
+        display: flex;
+      }
+
+      .subway-entrance-info-icon-metro {
+        width: 24px;
+        height: 100%;
+        vertical-align: middle;
+        display: flex;
+      }
+
+      .subway-entrance-info-icon-code {
+        width: 24px;
+        height: 100%;
+        vertical-align: middle;
+        display: flex;
+      }
+    }
+
     .itinerary-leg-intermediate-stops {
       margin-top: 12px;
       padding-bottom: 0;

app/component/map/EntranceMarker.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Icon from '../Icon';
+import IconMarker from './IconMarker';
+
+export default function EntranceMarker({
+  position,
+  code,
+  wheelchairAccesible,
+}) {
+  const objs = [];
+
+  const subwayIconAnchor =
+    // eslint-disable-next-line no-nested-ternary
+    code && wheelchairAccesible === 'POSSIBLE'
+      ? 36
+      : code || wheelchairAccesible === 'POSSIBLE'
+        ? 24
+        : 12;
+
+  const codeIconAnchor = wheelchairAccesible === 'POSSIBLE' ? 12 : 0;
+  const accessibleIconAnchor = code ? -12 : 0;
+
+  objs.push(
+    <IconMarker
+      className="map-subway-entrance-info-icon-metro"
+      key="icon-icon_subway_entrance"
+      position={position}
+      icon={{
+        element: <Icon img="icon-icon_subway_entrance" />,
+        iconAnchor: [subwayIconAnchor, 30], // 12 if only this 24 if two  and 36 if all
+        className: 'map-subway-entrance-info-icon-metro',
+      }}
+    />,
+  );
+
+  if (code) {
+    objs.push(
+      <IconMarker
+        className="map-subway-entrance-info-icon-metro"
+        key="icon-icon_subway_entrance_a"
+        position={position}
+        icon={{
+          element: <Icon img={`icon-icon_subway_entrance_${code}`} />,
+          iconAnchor: [codeIconAnchor, 30], // 12 if three icons 0 if two
+          className: 'map-subway-entrance-info-icon-metro',
+        }}
+      />,
+    );
+  }
+
+  if (wheelchairAccesible === 'POSSIBLE') {
+    objs.push(
+      <IconMarker
+        className="map-subway-entrance-info-icon-metro"
+        key="icon-icon_wheelchair_filled"
+        position={position}
+        icon={{
+          element: <Icon img="icon-icon_wheelchair_filled" />,
+          iconAnchor: [accessibleIconAnchor, 30], // -12 if three o if two
+          className: 'map-subway-entrance-info-icon-metro',
+        }}
+      />,
+    );
+  }
+
+  return <div className="map-entrance-info-container">{objs}</div>;
+}
+
+EntranceMarker.propTypes = {
+  position: IconMarker.propTypes.position,
+  code: PropTypes.string,
+  wheelchairAccesible: PropTypes.string,
+};
+
+EntranceMarker.defaultProps = {
+  position: undefined,
+  code: undefined,
+  wheelchairAccesible: undefined,
+};