Merge pull request #5813 from HSLdevcom/trafficnow-v3

AB#425 Trafficnow canceled trips and other improvements

Author: hjvuor

app/component/Card.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import cx from 'classnames';
 
-const Card = forwardRef(({ className, children, ...rest }, ref) => {
+const Card = forwardRef(({ className = undefined, children, ...rest }, ref) => {
   return (
     <div ref={ref} className={cx('card', className)} {...rest}>
       {children}
@@ -17,6 +17,4 @@ Card.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-Card.defaultProps = { className: undefined };
-
 export default Card;

app/component/Icon.js

@@ -31,6 +31,11 @@ const Icon = ({
       viewBox={!omitViewBox ? viewBox : null}
       className={cx('icon', className)}
       aria-label={ariaLabel}
+      transform={
+        background?.props?.shape === 'stopsign'
+          ? 'translate(0, -3.33)'
+          : undefined
+      }
     >
       {background}
       <g

app/component/icon/IconBackground.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const STOP_SIGN_POLE_WIDTH = 4;
+const STOP_SIGN_POLE_WIDTH = 3;
 const STOP_SIGN_POLE_X = 20 - STOP_SIGN_POLE_WIDTH / 2;
 
 const IconBackground = ({ shape, color }) => {
@@ -10,23 +10,23 @@ const IconBackground = ({ shape, color }) => {
   }
   return (
     <>
-      <circle
-        className="icon-circle"
-        cx="20"
-        cy="20"
-        fill={color}
-        r={shape === 'stopsign' ? '13.33' : '20'}
-      />
       {shape === 'stopsign' && (
         <rect
           x={STOP_SIGN_POLE_X}
-          y="33.33"
+          y="30"
           width={STOP_SIGN_POLE_WIDTH}
-          height="6.67"
+          height="10"
           fill="#333333"
           rx="2"
         />
       )}
+      <circle
+        className="icon-circle"
+        cx="20"
+        cy="20"
+        fill={color}
+        r={shape === 'stopsign' ? '13.33' : '20'}
+      />
       {shape === 'square' && (
         <rect
           className="icon-square"

app/component/trafficnow/Alerts.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import { useRouter } from 'found';
+import { DateTime } from 'luxon';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useConfigContext } from '../../configurations/ConfigContext';
+import { PREFIX_TIMETABLE, TRAFFICNOW, routePagePath } from '../../util/path';
+import Card from '../Card';
+import Icon from '../Icon';
+import CanceledDepartures from './components/CanceledDepartures';
+import RouteBadgeGroup from './components/RouteBadgeGroup';
+import DisruptionBadge from './DisruptionBadge';
+
+const CanceledTripCard = ({ mode, totalCount, trips }) => {
+  const { router } = useRouter();
+  const { colors } = useConfigContext();
+  const intl = useIntl();
+
+  const handleRouteBadgeClick = url => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    router.push(url);
+  };
+
+  /* eslint-disable no-param-reassign */
+  const groupedTrips = trips.reduce((container, { start, trip }) => {
+    if (!trip?.route?.gtfsId || !start?.schedule?.time?.departure) {
+      return container;
+    }
+
+    const shortName = trip?.route?.shortName || 'unknown';
+    if (container[shortName]) {
+      container[shortName].trips.push({
+        ...trip,
+        departureTime: DateTime.fromISO(
+          start?.schedule.time.departure,
+        ).toFormat('HH:mm'),
+      });
+    } else {
+      container[shortName] = {
+        routeGtfsId: trip.route.gtfsId,
+        trips: [
+          {
+            ...trip,
+            departureTime: DateTime.fromISO(
+              start?.schedule.time.departure,
+            ).toFormat('HH:mm'),
+          },
+        ],
+      };
+    }
+    return container;
+  }, {});
+
+  const isSingleRoute = Object.keys(groupedTrips).length === 1;
+
+  return (
+    <Card
+      className="disruption-card clickable"
+      onClick={handleRouteBadgeClick(`/${TRAFFICNOW}/peruutukset/${mode}`)}
+    >
+      <header>
+        <DisruptionBadge showIcon variant="WARNING" label="NO_SERVICE" />
+        <button type="button">
+          <Icon
+            img="icon_arrow-collapse--right"
+            color={colors.primary}
+            className="disruption-card__icon"
+          />
+        </button>
+      </header>
+      <div className="badges">
+        <RouteBadgeGroup
+          mode={mode}
+          stopPropagation
+          routes={Object.entries(groupedTrips).map(
+            ([shortName, { routeGtfsId, trips: groupedRouteTrips }]) => ({
+              id: shortName,
+              name: shortName,
+              url: routePagePath(routeGtfsId, PREFIX_TIMETABLE),
+              gtfsId: routeGtfsId,
+              trips: groupedRouteTrips,
+            }),
+          )}
+          renderRouteSuffix={({ trips: groupedRouteTrips }) =>
+            isSingleRoute ? (
+              <CanceledDepartures
+                departures={groupedRouteTrips.map(
+                  ({ tripId, departureTime }) => ({
+                    tripId,
+                    departureTime,
+                  }),
+                )}
+              />
+            ) : null
+          }
+          renderSuffix={
+            totalCount > trips.length ? (
+              <span style={{ backgroundColor: '#F2F5F7' }}>
+                <Icon img="icon_three-dots" width={1.3} height={1.3} />
+              </span>
+            ) : null
+          }
+        />
+      </div>
+      <div className="disruption-card__body-row-validity-icon text-xs">
+        <Icon img="icon_clock" />
+        {intl.formatMessage({ id: 'valid', defaultMessage: 'Active' })}
+      </div>
+    </Card>
+  );
+};
+
+CanceledTripCard.propTypes = {
+  mode: PropTypes.string.isRequired,
+  totalCount: PropTypes.number.isRequired,
+  trips: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+};
+
+export default CanceledTripCard;