DT-6955 Viapoint by coordinates

app/action/ViaPointActions.js

@@ -5,3 +5,7 @@ export function addViaPoint(actionContext, val) {
 export function setViaPoints(actionContext, points) {
   actionContext.dispatch('setViaPoints', points);
 }
+
+export function deleteViaPoint(actionContext, val) {
+  actionContext.dispatch('deleteViaPoint', val);
+}

app/component/itinerary/BicycleLeg.js

@@ -52,7 +52,9 @@ export default function BicycleLeg(
   let legDescription = <span>{leg.from ? leg.from.name : ''}</span>;
   const firstLegClassName = index === 0 ? 'start' : '';
   let modeClassName = 'bicycle';
-  const [address, place] = splitStringToAddressAndPlace(leg.from.name);
+  const [name, place] = splitStringToAddressAndPlace(leg.from.name);
+  const address =
+    leg.from.viaLocationType && leg.viaAddress ? leg.viaAddress : name;
   const rentalVehicleNetwork =
     leg.from.vehicleRentalStation?.rentalNetwork.networkId ||
     leg.from.rentalVehicle?.rentalNetwork.networkId;
@@ -136,6 +138,7 @@ export default function BicycleLeg(
         icon="icon_scooter_rider"
         appendClass={!scooterSettingsOn ? 'settings' : 'scooter'}
         style={style}
+        viaType={leg.from.viaLocationType}
       />
     );
   } else if (bicycleWalkLeg) {
@@ -144,22 +147,31 @@ export default function BicycleLeg(
         index={index}
         modeClassName={modeClassName}
         boardingLeg={bicycleWalkLeg}
+        viaType={leg.from.viaLocationType}
       />
     );
   } else if (mode === 'BICYCLE') {
     circleLine = (
       <ItineraryCircleLineWithIcon
         index={index}
         modeClassName={modeClassName}
+        viaType={leg.from.viaLocationType}
       />
     );
   } else {
     circleLine = (
-      <ItineraryCircleLine index={index} modeClassName={modeClassName} />
+      <ItineraryCircleLine
+        index={index}
+        modeClassName={modeClassName}
+        viaType={leg.from.viaLocationType}
+      />
     );
   }
   const fromStop = leg?.from.stop || bicycleWalkLeg?.from.stop;
-  const origin = bicycleWalkLeg?.from.stop ? bicycleWalkLeg.from.name : address;
+  const origin =
+    bicycleWalkLeg?.from.stop && !bicycleWalkLeg?.from.viaLocationType
+      ? bicycleWalkLeg.from.name
+      : address;
   const destination = bicycleWalkLeg?.to.stop
     ? bicycleWalkLeg?.to.name
     : leg.to.name;
@@ -264,51 +276,56 @@ export default function BicycleLeg(
             }}
           />
         </span>
-        {isFirstLeg(index) || bicycleWalkLeg?.from.stop ? (
-          <div className={cx('itinerary-leg-first-row', 'bicycle', 'first')}>
-            <div className="address-container">
-              <div className="address">
-                {fromStop ? (
-                  <Link
-                    onClick={e => {
-                      e.stopPropagation();
-                    }}
-                    to={stopPagePath(false, fromStop.gtfsId)}
-                  >
-                    {origin}
-                    {leg.isViaPoint && (
+        {isFirstLeg(index) ||
+        bicycleWalkLeg?.from.stop ||
+        leg?.from.viaLocationType ? (
+          <>
+            {leg?.from.viaLocationType ? <div className="divider" /> : null}
+            <div className={cx('itinerary-leg-first-row', 'bicycle', 'first')}>
+              <div className="address-container">
+                <div className="address">
+                  {fromStop ? (
+                    <Link
+                      onClick={e => {
+                        e.stopPropagation();
+                      }}
+                      to={stopPagePath(false, fromStop.gtfsId)}
+                    >
+                      {origin}
+                      {leg.isViaPoint && (
+                        <Icon
+                          img="icon_mapMarker"
+                          className="itinerary-mapmarker-icon"
+                        />
+                      )}
                       <Icon
-                        img="icon_mapMarker"
-                        className="itinerary-mapmarker-icon"
+                        img="icon_arrow-collapse--right"
+                        className="itinerary-arrow-icon"
+                        color={config.colors.primary}
                       />
-                    )}
-                    <Icon
-                      img="icon_arrow-collapse--right"
-                      className="itinerary-arrow-icon"
-                      color={config.colors.primary}
+                    </Link>
+                  ) : (
+                    address
+                  )}
+                </div>
+                {bicycleWalkLeg?.from.stop?.code && (
+                  <>
+                    <StopCode code={bicycleWalkLeg.from.stop.code} />
+                    <PlatformNumber
+                      number={bicycleWalkLeg.from.stop.platformCode}
+                      short
+                      isRailOrSubway
                     />
-                  </Link>
-                ) : (
-                  address
+                  </>
                 )}
+                <div className="place">{place}</div>
               </div>
-              {bicycleWalkLeg?.from.stop?.code && (
-                <>
-                  <StopCode code={bicycleWalkLeg.from.stop.code} />
-                  <PlatformNumber
-                    number={bicycleWalkLeg.from.stop.platformCode}
-                    short
-                    isRailOrSubway
-                  />
-                </>
-              )}
-              <div className="place">{place}</div>
+              <ItineraryMapAction
+                target={leg.from.name || ''}
+                focusAction={focusAction}
+              />
             </div>
-            <ItineraryMapAction
-              target={leg.from.name || ''}
-              focusAction={focusAction}
-            />
-          </div>
+          </>
         ) : (
           <div>
             <div className="divider" />

app/component/itinerary/Itinerary.js

@@ -16,7 +16,6 @@ import RouteNumberContainer from '../RouteNumberContainer';
 import { getActiveLegAlertSeverityLevel } from '../../util/alertUtils';
 import {
   getLegMode,
-  splitLegsAtViaPoints,
   compressLegs,
   getLegBadgeProps,
   getInterliningLegs,
@@ -42,6 +41,7 @@ import { getCapacityForLeg } from '../../util/occupancyUtil';
 import getCo2Value from '../../util/emissions';
 import { ItineraryFragment } from './queries/ItineraryFragment';
 import { getTicketString } from '../../util/fareUtils';
+import { ViaLocationType } from '../../constants';
 import BoardingInformation, {
   getBoardingInformationText,
 } from './BoardingInformation';
@@ -250,18 +250,6 @@ export const ViaLeg = () => (
   </div>
 );
 
-const getViaPointIndex = (leg, intermediatePlaces) => {
-  if (!leg || !Array.isArray(intermediatePlaces)) {
-    return -1;
-  }
-  return intermediatePlaces.findIndex(
-    place => place.lat === leg.from.lat && place.lon === leg.from.lon,
-  );
-};
-
-const connectsFromViaPoint = (currLeg, intermediatePlaces) =>
-  getViaPointIndex(currLeg, intermediatePlaces) > -1;
-
 const bikeWasParked = legs => {
   const legsLength = legs.length;
   for (let i = 0; i < legsLength; i++) {
@@ -309,8 +297,7 @@ const Itinerary = (
   const mobile = bp => !(bp === 'large');
   const legs = [];
   let noTransitLegs = true;
-  const splitLegs = splitLegsAtViaPoints(itinerary.legs, intermediatePlaces);
-  const compressedLegs = compressLegs(splitLegs).map(leg => ({
+  const compressedLegs = compressLegs(itinerary.legs).map(leg => ({
     ...leg,
   }));
   let intermediateSlack = 0;
@@ -324,10 +311,7 @@ const Itinerary = (
       nameLengthSum += getRouteText(leg.route, config).length;
     }
     nameLengthSum += 10; // every leg requires some minimum space
-    if (
-      i > 0 &&
-      (leg.intermediatePlace || connectsFromViaPoint(leg, intermediatePlaces))
-    ) {
+    if (i > 0 && (leg.from.viaLocationType || leg.to.viaLocationType)) {
       intermediateSlack +=
         legTime(leg.start) - legTime(compressedLegs[i - 1].end); // calculate time spent at each intermediate place
     }
@@ -368,17 +352,12 @@ const Itinerary = (
     let waitLength;
     const startMs = legTime(leg.start);
     const endMs = legTime(leg.end);
-    const previousLeg = i > 0 ? compressedLegs[i - 1] : null;
     const nextLeg =
       i < compressedLegs.length - 1 ? compressedLegs[i + 1] : null;
     let legLength = relativeLength(endMs - startMs);
     const longName = !leg?.route?.shortName || leg?.route?.shortName.length > 5;
 
-    if (
-      nextLeg &&
-      !nextLeg.intermediatePlace &&
-      !connectsFromViaPoint(nextLeg, intermediatePlaces)
-    ) {
+    if (nextLeg && !leg.to.viaLocationType) {
       // don't show waiting in intermediate places
       waitTime = legTime(nextLeg.start) - endMs;
       waitLength = relativeLength(waitTime);
@@ -427,14 +406,9 @@ const Itinerary = (
       renderBar = false;
       addition += legLength; // carry over the length of the leg to the next
     }
-    // There are two places which inject ViaLegs in this logic, but we certainly
-    // don't want to add it twice in the same place with the same key, so we
-    // record whether we added it here at the first place.
-    let viaAdded = false;
-    if (leg.intermediatePlace) {
+    if (leg.from.viaLocationType === ViaLocationType.Visit) {
       onlyIconLegs += 1;
       legs.push(<ViaLeg key={`via_${leg.mode}_${startMs}`} />);
-      viaAdded = true;
     }
     if (isLegOnFoot(leg) && renderBar) {
       const walkingTime = Math.floor(leg.duration / 60);
@@ -595,12 +569,8 @@ const Itinerary = (
       const withCar =
         usingOwnCarWholeTrip &&
         config.carBoardingModes[leg.route.mode] !== undefined;
-      if (
-        previousLeg &&
-        !previousLeg.intermediatePlace &&
-        connectsFromViaPoint(leg, intermediatePlaces) &&
-        !viaAdded
-      ) {
+      if (leg.from.viaLocationType === ViaLocationType.PassThrough) {
+        onlyIconLegs += 1;
         legs.push(<ViaLeg key={`via_${leg.mode}_${startMs}`} />);
       }
       const renderRouteNumberForALongLeg =
@@ -636,6 +606,13 @@ const Itinerary = (
         ),
       );
       stopNames.push(leg.from.name);
+      if (
+        leg.to?.viaLocationType === ViaLocationType.PassThrough &&
+        !(nextLeg.transitLeg && nextLeg?.from.viaLocationType)
+      ) {
+        onlyIconLegs += 1;
+        legs.push(<ViaLeg key={`via_${leg.mode}_${startMs}`} />);
+      }
     }
 
     if (waiting && !nextLeg?.interlineWithPreviousLeg) {

app/component/itinerary/ItineraryCircleLine.js

@@ -2,10 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import Icon from '../Icon';
+import { ViaLocationType } from '../../constants';
 
 class ItineraryCircleLine extends React.Component {
   static defaultProps = {
-    isVia: false,
+    viaType: null,
     color: null,
     renderBottomMarker: true,
     carPark: false,
@@ -15,7 +16,7 @@ class ItineraryCircleLine extends React.Component {
   static propTypes = {
     index: PropTypes.number.isRequired,
     modeClassName: PropTypes.string.isRequired,
-    isVia: PropTypes.bool,
+    viaType: PropTypes.string,
     color: PropTypes.string,
     renderBottomMarker: PropTypes.bool,
     carPark: PropTypes.bool,
@@ -39,7 +40,7 @@ class ItineraryCircleLine extends React.Component {
   }
 
   isFirstChild = () => {
-    return this.props.index === 0 && this.props.isVia === false;
+    return this.props.index === 0 && !this.props.viaType;
   };
 
   getMarker = top => {
@@ -80,7 +81,7 @@ class ItineraryCircleLine extends React.Component {
         </div>
       );
     }
-    if (this.props.isVia === true) {
+    if (this.props.viaType === ViaLocationType.Visit) {
       return (
         <div className="itinerary-icon-container">
           <Icon img="icon_mapMarker" className="itinerary-icon via via-it" />

app/component/itinerary/ItineraryCircleLineLong.js

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import Icon from '../Icon';
 import RouteNumber from '../RouteNumber';
 import { legShape } from '../../util/shapes';
+import { ViaLocationType } from '../../constants';
 
 const ItineraryCircleLineLong = props => {
   const [imgUrl, setImgUrl] = useState('');
@@ -28,6 +29,13 @@ const ItineraryCircleLineLong = props => {
         </div>
       );
     }
+    if (props.viaType === ViaLocationType.Visit) {
+      return (
+        <div className="itinerary-icon-container">
+          <Icon img="icon_mapMarker" className="itinerary-icon via via-it" />
+        </div>
+      );
+    }
     return null;
   };
 
@@ -156,11 +164,13 @@ ItineraryCircleLineLong.propTypes = {
   renderBottomMarker: PropTypes.bool,
   modeClassName: PropTypes.string.isRequired,
   boardingLeg: legShape.isRequired,
+  viaType: PropTypes.string,
 };
 
 ItineraryCircleLineLong.defaultProps = {
   color: undefined,
   renderBottomMarker: false,
+  viaType: null,
 };
 
 export default ItineraryCircleLineLong;