Skip to content

Commit

Permalink
Merge pull request #4875 from HSLdevcom/DT-4910
Browse files Browse the repository at this point in the history 
DT-4910: New texts for infobox
  • Loading branch information
@vesameskanen
vesameskanen authored Nov 20, 2023
2 parents 696743e + 74e5f3c commit a7d3bd2
Show file tree
Hide file tree
Showing 5 changed files with 220 additions and 114 deletions.
43 changes: 43 additions & 0 deletions app/component/FareDisclaimer.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
import Icon from './Icon';

const FareDisclaimer = ({ textId, values, href = null, linkText = null }) => {
return (
<div className="disclaimer-container unknown-fare-disclaimer__top">
<div className="icon-container">
<Icon className="info" img="icon-icon_info" />
</div>
<div className="description-container">
<FormattedMessage id={textId} values={values} />

{href && (
<a href={href}>
<FormattedMessage id={linkText} defaultMessage={linkText} />
</a>
)}
</div>
</div>
);
};

FareDisclaimer.propTypes = {
textId: PropTypes.string.isRequired,
values: PropTypes.oneOfType([
PropTypes.shape({
agencyName: PropTypes.string,
}),
PropTypes.object,
]),
href: PropTypes.string,
linkText: PropTypes.string,
};

FareDisclaimer.defaultProps = {
values: {},
href: null,
linkText: null,
};

export default FareDisclaimer;
147 changes: 84 additions & 63 deletions app/component/ItineraryTab.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,29 @@
import get from 'lodash/get';
import PropTypes from 'prop-types';
import React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import cx from 'classnames';
import { matchShape, routerShape } from 'found';
import { FormattedMessage, intlShape } from 'react-intl';
import connectToStores from 'fluxible-addons-react/connectToStores';

import Icon from './Icon';
import get from 'lodash/get';
import TicketInformation from './TicketInformation';
import RouteInformation from './RouteInformation';
import ItinerarySummary from './ItinerarySummary';
import ItineraryLegs from './ItineraryLegs';
import BackButton from './BackButton';
import MobileTicketPurchaseInformation from './MobileTicketPurchaseInformation';
import {
getRoutes,
getZones,
compressLegs,
getRoutes,
getTotalBikingDistance,
getTotalBikingDuration,
getTotalDrivingDistance,
getTotalDrivingDuration,
getTotalWalkingDistance,
getTotalWalkingDuration,
legContainsRentalBike,
getTotalDrivingDuration,
getTotalDrivingDistance,
getZones,
isCallAgencyPickupType,
legContainsRentalBike,
} from '../util/legUtils';
import { BreakpointConsumer } from '../util/withBreakpoint';

Expand All @@ -36,14 +34,15 @@ import {
} from '../util/fareUtils';
import { addAnalyticsEvent } from '../util/analyticsUtils';
import {
getCurrentMillis,
getFormattedTimeDate,
isToday,
isTomorrow,
getFormattedTimeDate,
getCurrentMillis,
} from '../util/timeUtils';
import CityBikeDurationInfo from './CityBikeDurationInfo';
import { getCityBikeNetworkId } from '../util/citybikes';
import { FareShape } from '../util/shapes';
import FareDisclaimer from './FareDisclaimer';

const AlertShape = PropTypes.shape({ alertSeverityLevel: PropTypes.string });

Expand Down Expand Up @@ -87,7 +86,7 @@ class ItineraryTab extends React.Component {

static defaultProps = {
hideTitle: false,
currentLanguage: "fi"
currentLanguage: 'fi',
};

static contextTypes = {
Expand Down Expand Up @@ -159,7 +158,7 @@ class ItineraryTab extends React.Component {
walkingDistance > 0 &&
(bikingDistance > 0 || drivingDistance > 0) &&
futureText !== '';
const extraProps = {
return {
walking: {
duration: walkingDuration,
distance: walkingDistance,
Expand All @@ -175,7 +174,6 @@ class ItineraryTab extends React.Component {
futureText,
isMultiRow,
};
return extraProps;
};

render() {
Expand Down Expand Up @@ -217,8 +215,60 @@ class ItineraryTab extends React.Component {
const suggestionIndex = this.context.match.params.secondHash
? Number(this.context.match.params.secondHash) + 1
: Number(this.context.match.params.hash) + 1;
const itineraryContainsCallLegs = itinerary.legs.some(leg => isCallAgencyPickupType(leg));


const disclaimers = [];

if (shouldShowFareInfo(config) && fares.some(fare => fare.isUnknown)) {
const found = {};
itinerary.legs.forEach(leg => {
if (
config.modeDisclaimers?.[leg.mode] &&
!found[leg.mode]
) {
found[leg.mode] = true;
const disclaimer = config.modeDisclaimers[leg.mode][currentLanguage];
disclaimers.push(
<FareDisclaimer
key={leg.mode}
values={{}}
textId={disclaimer.disclaimer}
href={disclaimer.link}
linkText={disclaimer.text}
/>,
);
}
});

if (config.callAgencyInfo && itinerary.legs.some(leg => isCallAgencyPickupType(leg))) {
disclaimers.push(
<FareDisclaimer
textId="separate-ticket-required-for-call-agency-disclaimer"
values={{
agencyName: get(
config,
`callAgencyInfo.${currentLanguage}.callAgencyInfoLink`,
),
}}
href={config.callAgencyInfo[currentLanguage].callAgencyInfoLink}
linkText={
config.callAgencyInfo[currentLanguage].callAgencyInfoLinkText
}
/>,
);
}

if (!disclaimers.length) {
disclaimers.push(
<FareDisclaimer
textId="separate-ticket-required-disclaimer"
values={{
agencyName: get(config, 'ticketInformation.primaryAgencyName'),
}}
/>,
);
}
}

return (
<div className="itinerary-tab">
<h2 className="sr-only">
Expand All @@ -241,7 +291,11 @@ class ItineraryTab extends React.Component {
futureText={extraProps.futureText}
isMultiRow={extraProps.isMultiRow}
isMobile={this.props.isMobile}
hideBottomDivider={shouldShowFarePurchaseInfo(config, breakpoint, fares)}
hideBottomDivider={shouldShowFarePurchaseInfo(
config,
breakpoint,
fares,
)}
/>
) : (
<>
Expand Down Expand Up @@ -282,18 +336,19 @@ class ItineraryTab extends React.Component {
config={config}
/>
),
shouldShowFareInfo(config) && (
shouldShowFarePurchaseInfo(config,breakpoint,fares) ? (
shouldShowFareInfo(config) &&
(shouldShowFarePurchaseInfo(config, breakpoint, fares) ? (
<MobileTicketPurchaseInformation
fares={fares}
zones={getZones(itinerary.legs)}
/>) :
( <TicketInformation
/>
) : (
<TicketInformation
fares={fares}
zones={getZones(itinerary.legs)}
legs={itinerary.legs}
/>)
),
/>
)),
<div
className={cx('momentum-scroll itinerary-tabs__scroll', {
multirow: extraProps.isMultiRow,
Expand All @@ -305,45 +360,7 @@ class ItineraryTab extends React.Component {
'bp-large': breakpoint === 'large',
})}
>
{shouldShowFareInfo(config) &&
fares.some(fare => fare.isUnknown) && (
<div className="disclaimer-container unknown-fare-disclaimer__top">
<div className="icon-container">
<Icon className="info" img="icon-icon_info" />
</div>
{config.callAgencyInfo && itineraryContainsCallLegs ?
(<div className="description-container">
<FormattedMessage
id="separate-ticket-required-for-call-agency-disclaimer"
values={{
callAgencyInfoUrl: get(
config,
`callAgencyInfo.${currentLanguage}.callAgencyInfoLink`,
),
}}
/>
<a href={config.callAgencyInfo[currentLanguage].callAgencyInfoLink}>
<FormattedMessage
id={config.callAgencyInfo[currentLanguage].callAgencyInfoLinkText}
defaultMessage={config.callAgencyInfo[currentLanguage].callAgencyInfoLinkText}
/>
</a>
</div>
) : (
<div className="description-container">
<FormattedMessage
id="separate-ticket-required-disclaimer"
values={{
agencyName: get(
config,
'ticketInformation.primaryAgencyName',
),
}}
/>
</div>
)}
</div>
)}
<>{disclaimers}</>
<ItineraryLegs
fares={fares}
itinerary={itinerary}
Expand Down Expand Up @@ -406,7 +423,11 @@ const withRelay = createFragmentContainer(
}
legs {
mode
nextLegs(numberOfLegs: 2 originModesWithParentStation: [RAIL] destinationModesWithParentStation: [RAIL]) {
nextLegs(
numberOfLegs: 2
originModesWithParentStation: [RAIL]
destinationModesWithParentStation: [RAIL]
) {
mode
distance
route {
Expand Down Expand Up @@ -439,7 +460,7 @@ const withRelay = createFragmentContainer(
tripHeadsign
pattern {
code
}
}
occupancy {
occupancyStatus
}
Expand Down
Loading

0 comments on commit a7d3bd2

Please sign in to comment.