Skip to content

Commit

Permalink
Merge pull request #5162 from HSLdevcom/DT-6476_patch-1
Browse files Browse the repository at this point in the history 
DT-6533 Improved navigator and local storage cooperation
  • Loading branch information
@vesameskanen
vesameskanen authored Nov 14, 2024
2 parents f96a761 + 1ad32a8 commit 3e764c9
Show file tree
Hide file tree
Showing 5 changed files with 291 additions and 93 deletions.
147 changes: 80 additions & 67 deletions app/component/itinerary/ItineraryDetails.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import PropTypes from 'prop-types';
import React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import cx from 'classnames';
import connectToStores from 'fluxible-addons-react/connectToStores';
import { matchShape, routerShape } from 'found';
import PropTypes from 'prop-types';
import React from 'react';
import { FormattedMessage, intlShape } from 'react-intl';
import connectToStores from 'fluxible-addons-react/connectToStores';
import { configShape, itineraryShape, relayShape } from '../../util/shapes';
import TicketInformation from './TicketInformation';
import ItinerarySummary from './ItinerarySummary';
import Legs from './Legs';
import BackButton from '../BackButton';
import StartNavi from './StartNavi';
import MobileTicketPurchaseInformation from './MobileTicketPurchaseInformation';
import { createFragmentContainer, graphql } from 'react-relay';
import {
getFaresFromLegs,
shouldShowFareInfo,
shouldShowFarePurchaseInfo,
} from '../../util/fareUtils';
import {
compressLegs,
getTotalBikingDistance,
Expand All @@ -25,24 +23,25 @@ import {
legContainsBikePark,
legContainsRentalBike,
} from '../../util/legUtils';
import { BreakpointConsumer } from '../../util/withBreakpoint';
import { streetHash } from '../../util/path';
import {
getFaresFromLegs,
shouldShowFareInfo,
shouldShowFarePurchaseInfo,
} from '../../util/fareUtils';
import { configShape, itineraryShape, relayShape } from '../../util/shapes';
import {
getFormattedTimeDate,
isToday,
isTomorrow,
} from '../../util/timeUtils';
import VehicleRentalDurationInfo from './VehicleRentalDurationInfo';
import { BreakpointConsumer } from '../../util/withBreakpoint';
import BackButton from '../BackButton';
import Emissions from './Emissions';
import EmissionsInfo from './EmissionsInfo';
import FareDisclaimer from './FareDisclaimer';
import ItinerarySummary from './ItinerarySummary';
import Legs from './Legs';
import MobileTicketPurchaseInformation from './MobileTicketPurchaseInformation';
import StartNavi from './StartNavi';
import TicketInformation from './TicketInformation';
import VehicleRentalDurationInfo from './VehicleRentalDurationInfo';

/* eslint-disable prettier/prettier */
class ItineraryDetails extends React.Component {
static propTypes = {
itinerary: itineraryShape.isRequired,
Expand Down Expand Up @@ -83,7 +82,7 @@ class ItineraryDetails extends React.Component {
this.context.match.params.hash !== streetHash.walk &&
this.context.match.params.hash !== streetHash.bike
);
};
}

getFutureText(startTime) {
const refTime = Date.now();
Expand All @@ -96,7 +95,7 @@ class ItineraryDetails extends React.Component {
});
}
return getFormattedTimeDate(startTime, 'dd D.M.');
};
}

getExtraProps(itinerary) {
const compressedItinerary = {
Expand Down Expand Up @@ -130,24 +129,36 @@ class ItineraryDetails extends React.Component {
futureText,
isMultiRow,
};
};
}

render() {
const { itinerary, currentLanguage, isMobile, bikeAndPublicItineraryCount } = this.props;
const {
itinerary,
currentLanguage,
isMobile,
bikeAndPublicItineraryCount,
} = this.props;
const { config } = this.context;
if (!itinerary?.legs[0]) {
return null;
}
const fares = getFaresFromLegs(itinerary.legs, config);
const extraProps = this.getExtraProps(itinerary);
const {biking, walking, driving, futureText, isMultiRow} = extraProps;
const { biking, walking, driving, futureText, isMultiRow } = extraProps;
const legsWithRentalBike = compressLegs(itinerary.legs).filter(leg =>
legContainsRentalBike(leg),
);
const legswithBikePark = compressLegs(itinerary.legs).filter(leg => legContainsBikePark(leg));
const legsWithScooter = compressLegs(itinerary.legs).some(leg => leg.mode === 'SCOOTER');
const legswithBikePark = compressLegs(itinerary.legs).filter(leg =>
legContainsBikePark(leg),
);
const legsWithScooter = compressLegs(itinerary.legs).some(
leg => leg.mode === 'SCOOTER',
);
const containsBiking = biking.duration > 0 && biking.distance > 0;
const showBikeBoardingInformation = containsBiking && bikeAndPublicItineraryCount > 0 && legswithBikePark.length === 0;
const showBikeBoardingInformation =
containsBiking &&
bikeAndPublicItineraryCount > 0 &&
legswithBikePark.length === 0;
const rentalBikeNetworks = new Set();
let showRentalBikeDurationWarning = false;
if (legsWithRentalBike.length > 0) {
Expand Down Expand Up @@ -183,7 +194,10 @@ class ItineraryDetails extends React.Component {

const externalOperatorJourneys = legsWithScooter;

if (shouldShowFareInfo(config) && (fares.some(fare => fare.isUnknown) || externalOperatorJourneys) ) {
if (
shouldShowFareInfo(config) &&
(fares.some(fare => fare.isUnknown) || externalOperatorJourneys)
) {
const found = {};
itinerary.legs.forEach(leg => {
if (config.modeDisclaimers?.[leg.mode] && !found[leg.mode]) {
Expand All @@ -201,13 +215,10 @@ class ItineraryDetails extends React.Component {
});

const info = config.callAgencyInfo?.[currentLanguage];
if (
info &&
itinerary.legs.some(leg => isCallAgencyPickupType(leg))
) {
if (info && itinerary.legs.some(leg => isCallAgencyPickupType(leg))) {
disclaimers.push(
<FareDisclaimer
key={disclaimers.length}
key={disclaimers.length}
textId="separate-ticket-required-for-call-agency-disclaimer"
href={info.callAgencyInfoLink}
linkText={info.callAgencyInfoLinkText}
Expand All @@ -218,11 +229,13 @@ class ItineraryDetails extends React.Component {
if (!disclaimers.length) {
disclaimers.push(
<FareDisclaimer
key="faredisclaimer-separate-ticket-key"
key="faredisclaimer-separate-ticket-key"
textId="separate-ticket-required-disclaimer"
values={{
agencyName: typeof config.primaryAgencyName === 'string' ? config.primaryAgencyName :
config.primaryAgencyName?.[currentLanguage]
agencyName:
typeof config.primaryAgencyName === 'string'
? config.primaryAgencyName
: config.primaryAgencyName?.[currentLanguage],
}}
/>,
);
Expand All @@ -238,10 +251,10 @@ class ItineraryDetails extends React.Component {
number: itineraryIndex,
}}
/>
</h2>
</h2>
<BreakpointConsumer>
{breakpoint => [
breakpoint === 'large' && !this.props.hideTitle && (
breakpoint === 'large' && !this.props.hideTitle && (
<div className="desktop-title" key="header">
<div className="title-container h2">
<BackButton
Expand All @@ -258,7 +271,7 @@ class ItineraryDetails extends React.Component {
</div>
</div>
),
<ItinerarySummary
<ItinerarySummary
itinerary={itinerary}
key="summary"
walking={walking}
Expand All @@ -267,44 +280,44 @@ class ItineraryDetails extends React.Component {
futureText={futureText}
isMultiRow={isMultiRow}
isMobile={isMobile}
hideBottomDivider={isMobile && shouldShowFarePurchaseInfo(
config,
breakpoint,
fares,
)}
hideBottomDivider={
isMobile &&
shouldShowFarePurchaseInfo(config, breakpoint, fares)
}
/>,
showRentalBikeDurationWarning && (
<VehicleRentalDurationInfo
key="rentaldurationinfo"
key="rentaldurationinfo"
networks={Array.from(rentalBikeNetworks)}
config={config}
/>
),
shouldShowFareInfo(config) &&
(shouldShowFarePurchaseInfo(config, breakpoint, fares) ? (
<MobileTicketPurchaseInformation
key="mobileticketpurchaseinformation"
key="mobileticketpurchaseinformation"
fares={fares}
zones={getZones(itinerary.legs)}
/>
) : (
<TicketInformation
key="ticketinformation"
key="ticketinformation"
fares={fares}
zones={getZones(itinerary.legs)}
legs={itinerary.legs}
/>
)),

this.props.setNavigation && (
<StartNavi
key="navigation"
setNavigation={this.props.setNavigation}
/>
),
this.props.setNavigation && (
<StartNavi
key="navigation"
itinerary={itinerary}
setNavigation={this.props.setNavigation}
/>
),
config.showCO2InItinerarySummary && !legsWithScooter && (
<EmissionsInfo
key="emissionsummary"
key="emissionsummary"
itinerary={itinerary}
isMobile={isMobile}
/>
Expand All @@ -319,11 +332,11 @@ class ItineraryDetails extends React.Component {
className={cx('itinerary-main', {
'bp-large': breakpoint === 'large',
})}
key="legwrapper"
key="legwrapper"
>
{disclaimers}
<Legs
key="itinerarylegs"
key="itinerarylegs"
fares={fares}
itinerary={itinerary}
focusToPoint={this.props.focusToPoint}
Expand All @@ -337,7 +350,7 @@ class ItineraryDetails extends React.Component {
</div>
{config.showCO2InItinerarySummary && !legsWithScooter && (
<Emissions
key="emissionsinfo"
key="emissionsinfo"
config={config}
itinerary={itinerary}
carEmissions={this.props.carEmissions}
Expand All @@ -354,7 +367,7 @@ class ItineraryDetails extends React.Component {
/>
</div>
)}
<div className="itinerary-empty-space" key="emptyspace"/>
<div className="itinerary-empty-space" key="emptyspace" />
</div>,
]}
</BreakpointConsumer>
Expand Down Expand Up @@ -447,14 +460,14 @@ const withRelay = createFragmentContainer(
lat
lon
name
vehicleParking {
vehicleParking {
name
vehicleParkingId
}
vehicleRentalStation {
rentalNetwork {
networkId
}
networkId
}
availableVehicles {
total
}
Expand All @@ -469,7 +482,7 @@ const withRelay = createFragmentContainer(
lon
rentalUris {
android
ios
ios
web
}
rentalNetwork {
Expand Down Expand Up @@ -507,7 +520,7 @@ const withRelay = createFragmentContainer(
lon
stationId
rentalNetwork {
networkId
networkId
}
availableVehicles {
total
Expand Down Expand Up @@ -542,13 +555,13 @@ const withRelay = createFragmentContainer(
}
}
}
vehicleParking {
vehicleParkingId
name
vehicleParking {
vehicleParkingId
name
}
}
intermediatePlaces {
arrival {
arrival {
scheduledTime
estimated {
time
Expand Down
23 changes: 10 additions & 13 deletions app/component/itinerary/ItineraryPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
getDialogState,
getLatestNavigatorItinerary,
setDialogState,
setLatestNavigatorItinerary,
} from '../../store/localStorage';
import { addAnalyticsEvent } from '../../util/analyticsUtils';
import { getWeatherData } from '../../util/apiUtils';
Expand Down Expand Up @@ -62,6 +61,7 @@ import {
getSelectedItineraryIndex,
getTopics,
isEqualItineraries,
isStoredItineraryRelevant,
mergeBikeTransitPlans,
mergeScooterTransitPlan,
quitIteration,
Expand Down Expand Up @@ -650,11 +650,6 @@ export default function ItineraryPage(props, context) {
setMapState({ center: undefined, zoom: undefined, bounds: undefined });
navigateMap();
clearLatestNavigatorItinerary();
} else {
const { combinedEdges, selectedIndex } = getItinerarySelection();
if (combinedEdges[selectedIndex]?.node) {
setLatestNavigatorItinerary(combinedEdges[selectedIndex]?.node);
}
}
setNaviMode(isEnabled);
};
Expand Down Expand Up @@ -751,10 +746,11 @@ export default function ItineraryPage(props, context) {
addFeedbackly(context);

const storedItinerary = getLatestNavigatorItinerary();

setNavigation(
storedItinerary?.end && Date.parse(storedItinerary.end) > Date.now(),
);
if (isStoredItineraryRelevant(storedItinerary, match)) {
setNavigation(true);
} else {
clearLatestNavigatorItinerary();
}

return () => {
if (showVehicles()) {
Expand Down Expand Up @@ -1140,8 +1136,9 @@ export default function ItineraryPage(props, context) {
);
} else if (detailView) {
if (naviMode) {
const naviModeItinerary =
getLatestNavigatorItinerary() || combinedEdges[selectedIndex]?.node;
const { itinerary: storedItinerary } = getLatestNavigatorItinerary();
const itineraryForNavigator =
storedItinerary || combinedEdges[selectedIndex]?.node;

content = (
<>
Expand All @@ -1153,7 +1150,7 @@ export default function ItineraryPage(props, context) {
/>
)}
<NaviContainer
itinerary={naviModeItinerary}
itinerary={itineraryForNavigator}
focusToLeg={focusToLeg}
relayEnvironment={props.relayEnvironment}
setNavigation={setNavigation}
Expand Down
Loading

0 comments on commit 3e764c9

Please sign in to comment.