Skip to content

Commit 7d84f38

Browse files
vesameskanenvesameskanen
authored
Merge pull request #5790 from HSLdevcom/AB#44-v3
AB#503 - Merge call agency and taxi changes into v3 without changing existing functionality
2 parents 8ce5de0 + 6a151ce commit 7d84f38

68 files changed

Lines changed: 1905 additions & 681 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/component/DesktopView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function DesktopView({
1616
}) {
1717
return (
1818
<div className="desktop">
19-
<div className="main-content" role="main">
19+
<div className="main-content" role="main" id="main-content">
2020
{bckBtnVisible && (
2121
<div className="desktop-title h1">
2222
<BackButton title={title} fallback={bckBtnFallback} />

‎app/component/Disclaimer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
22
import { FormattedMessage, useIntl } from 'react-intl';
33
import PropTypes from 'prop-types';
44
import Icon from './Icon';
5-
import { useDeepLink } from '../util/vehicleRentalUtils';
5+
import { openDeepLink } from '../util/vehicleRentalUtils';
66
import { useConfigContext } from '../configurations/ConfigContext';
77

88
export default function Disclaimer({
@@ -34,7 +34,7 @@ export default function Disclaimer({
3434
? () => {
3535
window.open(href, '_blank', 'noopener,noreferrer');
3636
}
37-
: () => useDeepLink(href, window.location.href);
37+
: () => openDeepLink(href, window.location.href);
3838

3939
if (!showCard) {
4040
return null;

‎app/component/IconWithIcon.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ const IconWithIcon = ({
1717
subIcon,
1818
subIconClassName,
1919
subIconShape,
20-
mode,
2120
omitViewBox,
21+
backgroundShape,
2222
}) => {
2323
const intl = useIntl();
2424
return (
@@ -27,8 +27,7 @@ const IconWithIcon = ({
2727
<Icon
2828
color={color}
2929
img={img}
30-
viewBox={mode === 'call' ? '0 0 60 60' : undefined}
31-
omitViewBox={omitViewBox}
30+
omitViewBox={backgroundShape ? undefined : omitViewBox}
3231
foreground={
3332
(badgeFill || badgeText) && (
3433
<IconBadge
@@ -38,6 +37,14 @@ const IconWithIcon = ({
3837
/>
3938
)
4039
}
40+
background={
41+
backgroundShape && (
42+
<IconBackground
43+
shape={backgroundShape}
44+
color={color || 'currentColor'}
45+
/>
46+
)
47+
}
4148
/>
4249
</span>
4350
{subIcon && (
@@ -69,8 +76,8 @@ IconWithIcon.propTypes = {
6976
subIcon: PropTypes.string,
7077
subIconClassName: PropTypes.string,
7178
subIconShape: PropTypes.string,
72-
mode: PropTypes.string,
7379
omitViewBox: PropTypes.bool,
80+
backgroundShape: PropTypes.string,
7481
};
7582

7683
IconWithIcon.defaultProps = {
@@ -82,9 +89,9 @@ IconWithIcon.defaultProps = {
8289
subIcon: '',
8390
subIconClassName: '',
8491
subIconShape: undefined,
85-
mode: undefined,
8692
color: undefined,
8793
omitViewBox: false,
94+
backgroundShape: undefined,
8895
};
8996

9097
export default IconWithIcon;

‎app/component/MobileView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ const MobileView = forwardRef(
175175
ref={contentRef}
176176
>
177177
{enableBottomScroll && <div className="drag-line" />}
178-
<div className="content-container">
178+
<div className="content-container" id="content-container">
179179
{header}
180180
{content}
181181
</div>

‎app/component/RouteNumber.js‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -65,16 +65,6 @@ function RouteNumber(props, context) {
6565
badgeTextFill,
6666
) => {
6767
const iconName = icon || transitIconName(mode, false);
68-
if (isCallAgency) {
69-
return (
70-
<IconWithIcon
71-
color={color}
72-
className={`${mode} call`}
73-
img={iconName}
74-
subIcon="icon_call"
75-
/>
76-
);
77-
}
7868

7969
if (hasDisruption || !!alertSeverityLevel) {
8070
return (
@@ -105,16 +95,19 @@ function RouteNumber(props, context) {
10595
badgeText={badgeText}
10696
badgeTextFill={badgeTextFill}
10797
color={color}
108-
className={cx(mode, {
109-
[['secondary']]:
110-
mode === 'citybike' &&
111-
props.icon &&
112-
props.icon.includes('secondary'), // Vantaa citybike station
113-
})}
98+
className={cx(
99+
mode,
100+
{
101+
[['secondary']]:
102+
mode === 'citybike' && props.icon?.includes('secondary'), // Vantaa citybike station
103+
},
104+
props.appendClass,
105+
)}
114106
img={iconName}
115107
subIcon=""
116108
mode={mode}
117-
omitViewBox
109+
omitViewBox={!isCallAgency}
110+
backgroundShape={isCallAgency ? 'square' : undefined}
118111
/>
119112
{withBicycle && (
120113
<Icon
@@ -220,7 +213,10 @@ function RouteNumber(props, context) {
220213

221214
return props.withBar ? (
222215
<div className={cx('bar-container', { long: hasNoShortName })}>
223-
<div className={cx('bar', mode)} style={{ backgroundColor: getColor() }}>
216+
<div
217+
className={cx('bar', mode, props.appendClass)}
218+
style={{ backgroundColor: getColor() }}
219+
>
224220
{rNumber}
225221
</div>
226222
</div>

‎app/component/icon/IconBackground.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,21 @@ const IconBackground = ({ shape, color }) => {
2727
rx="2"
2828
/>
2929
)}
30+
{shape === 'square' && (
31+
<rect
32+
className="icon-square"
33+
width="40"
34+
height="40"
35+
fill={color}
36+
rx="8"
37+
/>
38+
)}
3039
</>
3140
);
3241
};
3342

3443
IconBackground.propTypes = {
35-
shape: PropTypes.oneOf(['circle', 'stopsign']),
44+
shape: PropTypes.oneOf(['circle', 'stopsign', 'square']),
3645
color: PropTypes.string,
3746
};
3847

‎app/component/itinerary/CallAgencyDisclaimer.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import { FormattedMessage } from 'react-intl';
3+
import PropTypes from 'prop-types';
4+
import Icon from '../Icon';
5+
import { openDeepLink } from '../../util/vehicleRentalUtils';
6+
7+
export default function CallAgencyDisclaimer({
8+
textId,
9+
text,
10+
values,
11+
href,
12+
linkText,
13+
header,
14+
}) {
15+
const onClick = href?.startsWith('http')
16+
? () => {
17+
window.open(href, '_blank', 'noopener,noreferrer');
18+
}
19+
: () => openDeepLink(href, window.location.href);
20+
21+
return (
22+
<div className="call-agency-disclaimer-container">
23+
<Icon className="info" img="icon_info" />
24+
<div className="disclaimer">
25+
{header && <h3 className="disclaimer-header">{header}</h3>}
26+
{text || <FormattedMessage id={textId} values={values} />}
27+
{href && (
28+
<button
29+
type="button"
30+
className="external-link-button"
31+
onClick={e => {
32+
e.stopPropagation();
33+
onClick(e);
34+
}}
35+
>
36+
{linkText}
37+
</button>
38+
)}
39+
</div>
40+
</div>
41+
);
42+
}
43+
44+
CallAgencyDisclaimer.propTypes = {
45+
textId: PropTypes.string,
46+
text: PropTypes.string,
47+
values: PropTypes.objectOf(PropTypes.string),
48+
href: PropTypes.string,
49+
linkText: PropTypes.string,
50+
header: PropTypes.string,
51+
};
52+
53+
CallAgencyDisclaimer.defaultProps = {
54+
textId: null,
55+
text: null,
56+
values: {},
57+
href: null,
58+
linkText: null,
59+
header: null,
60+
};

‎app/component/itinerary/CallAgencyLeg.js‎

Lines changed: 61 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,77 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { FormattedMessage } from 'react-intl';
3+
import { useIntl } from 'react-intl';
44
import { legShape } from '../../util/shapes';
55
import TransitLeg from './TransitLeg';
6-
import Icon from '../Icon';
6+
import CallAgencyDisclaimer from './CallAgencyDisclaimer';
7+
import RouteNumberContainer from '../RouteNumber';
8+
import withBreakpoint from '../../util/withBreakpoint';
9+
import { isLocalCallAgency } from '../../util/legUtils';
10+
import { useConfigContext } from '../../configurations/ConfigContext';
711

8-
const CallAgencyLeg = ({ leg, ...props }) => {
12+
const CallAgencyLeg = ({ leg, breakpoint, ...props }) => {
13+
const intl = useIntl();
14+
const config = useConfigContext();
915
const modeClassName = 'call';
16+
const { route } = leg;
17+
const mobile = breakpoint === 'small' || breakpoint === 'medium';
18+
const notification =
19+
config.showRouteDescNotification &&
20+
route.desc?.length &&
21+
config.flex.infoLanguage === config.language // No translations available in the data at the moment
22+
? { content: route.desc, link: route.url }
23+
: {
24+
content: intl.formatMessage({ id: 'call-agency-disclaimer' }),
25+
link: '',
26+
};
27+
const key = `callAgencyNotification-${route.gtfsId}`;
28+
const routeNumber = (
29+
<RouteNumberContainer
30+
route={leg.route}
31+
className={`line ${modeClassName}`}
32+
mode={modeClassName}
33+
vertical
34+
withBar
35+
isTransitLeg
36+
text={leg.route && leg.route.shortName}
37+
appendClass={isLocalCallAgency(leg, config) ? 'call-local' : ''}
38+
/>
39+
);
1040
return (
11-
<TransitLeg mode={modeClassName} leg={leg} {...props}>
12-
<div className="itinerary-transit-leg-route call">
13-
<Icon img="icon_call" className="call-icon" />
14-
<span className="warning-message">
15-
<FormattedMessage
16-
id="warning-call-agency"
17-
values={{
18-
routeName: (
19-
<span className="route-name">{leg.route.longName}</span>
20-
),
21-
}}
22-
defaultMessage="Only on demand: {routeName}, which needs to be booked in advance."
23-
/>
24-
<div className="itinerary-warning-agency-container" />
25-
{leg.route.agency.phone && (
26-
<div className="call-button">
27-
<a href={`tel:${leg.route.agency.phone}`}>
28-
<FormattedMessage
29-
id="call-number"
30-
defaultMessage="Call"
31-
values={{ number: leg.route.agency.phone }}
32-
/>
33-
</a>
34-
</div>
35-
)}
36-
</span>
37-
</div>
41+
<TransitLeg
42+
mode={modeClassName}
43+
leg={leg}
44+
mobile={mobile}
45+
omitDivider
46+
{...props}
47+
>
48+
<CallAgencyDisclaimer
49+
key={key}
50+
text={notification.content}
51+
routeNumber={routeNumber}
52+
pickupBookingInfo={leg.pickupBookingInfo}
53+
agency={route.agency}
54+
route={route}
55+
mobile={mobile}
56+
header={intl.formatMessage({ id: 'on-demand-service' })}
57+
href={leg.pickupBookingInfo.contactInfo?.bookingUrl}
58+
linkText={intl.formatMessage({ id: 'open-app' })}
59+
/>
3860
</TransitLeg>
3961
);
4062
};
4163

4264
CallAgencyLeg.propTypes = {
4365
leg: legShape.isRequired,
4466
index: PropTypes.number.isRequired,
67+
showRouteDescNotification: PropTypes.bool,
68+
breakpoint: PropTypes.string,
69+
};
70+
71+
CallAgencyLeg.defaultProps = {
72+
showRouteDescNotification: false,
73+
breakpoint: undefined,
4574
};
4675

47-
export default CallAgencyLeg;
76+
export { CallAgencyLeg as Component };
77+
export default withBreakpoint(CallAgencyLeg);

0 commit comments

Comments
 (0)