Skip to content

Commit

Permalink
Merge pull request #799 from ibi-group/configure-and-style-alert-mess…
Browse files Browse the repository at this point in the history 
…aging

feat(itinerary-body): add and use showAlertEffectiveDateTimeText to alert components
  • Loading branch information
@josh-willis-arcadis
josh-willis-arcadis authored Dec 5, 2024
2 parents 4fe1b9b + d62d53d commit 1e50c60
Show file tree
Hide file tree
Showing 8 changed files with 967 additions and 62 deletions.
4 changes: 3 additions & 1 deletion packages/itinerary-body/src/ItineraryBody/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,9 @@ const ItineraryBody = ({
setActiveLeg,
setLegDiagram,
setViewedTrip,
showApproximateAccessLegTravelTimes,
showAgencyInfo,
showAlertEffectiveDateTimeText,
showApproximateAccessLegTravelTimes,
showElevationProfile,
showLegIcon,
showMapButtonColumn = true,
Expand Down Expand Up @@ -87,6 +88,7 @@ const ItineraryBody = ({
showApproximateAccessLegTravelTimes
}
showAgencyInfo={showAgencyInfo}
showAlertEffectiveDateTimeText={showAlertEffectiveDateTimeText}
showElevationProfile={showElevationProfile}
showLegIcon={showLegIcon}
showMapButtonColumn={showMapButtonColumn}
Expand Down
2 changes: 2 additions & 0 deletions packages/itinerary-body/src/ItineraryBody/place-row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export default function PlaceRow({
setLegDiagram,
setViewedTrip,
showAgencyInfo,
showAlertEffectiveDateTimeText,
showApproximateAccessLegTravelTimes,
showElevationProfile,
showLegIcon,
Expand Down Expand Up @@ -158,6 +159,7 @@ export default function PlaceRow({
setActiveLeg={setActiveLeg}
setViewedTrip={setViewedTrip}
showAgencyInfo={showAgencyInfo}
showAlertEffectiveDateTimeText={showAlertEffectiveDateTimeText}
showViewTripButton={showViewTripButton}
timeZone={config.homeTimezone}
TransitLegSubheader={TransitLegSubheader}
Expand Down
129 changes: 68 additions & 61 deletions packages/itinerary-body/src/TransitLegBody/alerts-body.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ interface Props {
agencyName?: string;
alerts: Alert[];
AlertIcon?: FunctionComponent;
showAlertEffectiveDateTimeText?: boolean;
timeZone?: string;
}

Expand Down Expand Up @@ -67,6 +68,7 @@ export default function AlertsBody({
agencyName,
alerts,
AlertIcon = S.DefaultAlertBodyIcon,
showAlertEffectiveDateTimeText = true,
timeZone = getUserTimezone()
}: Props): ReactElement {
if (typeof alerts !== "object") return null;
Expand Down Expand Up @@ -105,68 +107,73 @@ export default function AlertsBody({
<S.TransitAlertHeader>{header}</S.TransitAlertHeader>
)}
<S.TransitAlertBody>{description}</S.TransitAlertBody>
<S.TransitAlertEffectiveDate>
{Math.abs(dayDiff) <= 1 ? (
<FormattedMessage
defaultMessage={
defaultMessages[
"otpUi.TransitLegBody.AlertsBody.effectiveTimeAndDate"
]
}
description="Text with the time and date an alert takes effect"
id="otpUi.TransitLegBody.AlertsBody.effectiveTimeAndDate"
values={{
dateTime: effectiveStartDate * 1000,
day: <AlertDay dayDiff={dayDiff} />
}}
/>
) : (
<FormattedMessage
defaultMessage={
defaultMessages[
"otpUi.TransitLegBody.AlertsBody.effectiveDate"
]
}
description="Text with the date an alert takes effect"
id="otpUi.TransitLegBody.AlertsBody.effectiveDate"
values={{
dateTime: effectiveStartDate * 1000
}}
/>
)}
{alertUrl?.trim() && (
<S.TransitAlertExternalLink href={alertUrl} target="_blank">
<ExternalLinkAlt height={10} />
{agencyName ? (
<FormattedMessage
defaultMessage={
defaultMessages[
"otpUi.TransitLegBody.AlertsBody.alertLinkText"
]
}
description="Describes how link directs to agency website"
id="otpUi.TransitLegBody.AlertsBody.alertLinkText"
values={{ agency: agencyName }}
/>
) : (
<FormattedMessage
defaultMessage={
defaultMessages[
"otpUi.TransitLegBody.AlertsBody.noAgencyAlertLinkText"
]
}
description="Describes how link directs to agency website, but does not name agency"
id="otpUi.TransitLegBody.AlertsBody.noAgencyAlertLinkText"
/>
)}
{showAlertEffectiveDateTimeText && (
<S.TransitAlertEffectiveDate>
{Math.abs(dayDiff) <= 1 ? (
<FormattedMessage
defaultMessage={
defaultMessages[
"otpUi.TransitLegBody.AlertsBody.effectiveTimeAndDate"
]
}
description="Text with the time and date an alert takes effect"
id="otpUi.TransitLegBody.AlertsBody.effectiveTimeAndDate"
values={{
dateTime: effectiveStartDate * 1000,
day: <AlertDay dayDiff={dayDiff} />
}}
/>
) : (
<FormattedMessage
defaultMessage={
defaultMessages[
"otpUi.TransitLegBody.AlertsBody.effectiveDate"
]
}
description="Text with the date an alert takes effect"
id="otpUi.TransitLegBody.AlertsBody.effectiveDate"
values={{
dateTime: effectiveStartDate * 1000
}}
/>
)}
{alertUrl?.trim() && (
<S.TransitAlertExternalLink
href={alertUrl}
target="_blank"
>
<ExternalLinkAlt height={10} />
{agencyName ? (
<FormattedMessage
defaultMessage={
defaultMessages[
"otpUi.TransitLegBody.AlertsBody.alertLinkText"
]
}
description="Describes how link directs to agency website"
id="otpUi.TransitLegBody.AlertsBody.alertLinkText"
values={{ agency: agencyName }}
/>
) : (
<FormattedMessage
defaultMessage={
defaultMessages[
"otpUi.TransitLegBody.AlertsBody.noAgencyAlertLinkText"
]
}
description="Describes how link directs to agency website, but does not name agency"
id="otpUi.TransitLegBody.AlertsBody.noAgencyAlertLinkText"
/>
)}

<S.InvisibleAdditionalDetails>
{" "}
<FormattedMessage id="otpUi.TransitLegBody.AlertsBody.linkOpensNewWindow" />
</S.InvisibleAdditionalDetails>
</S.TransitAlertExternalLink>
)}
</S.TransitAlertEffectiveDate>
<S.InvisibleAdditionalDetails>
{" "}
<FormattedMessage id="otpUi.TransitLegBody.AlertsBody.linkOpensNewWindow" />
</S.InvisibleAdditionalDetails>
</S.TransitAlertExternalLink>
)}
</S.TransitAlertEffectiveDate>
)}
</S.TransitAlert>
);
}
Expand Down
3 changes: 3 additions & 0 deletions packages/itinerary-body/src/TransitLegBody/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ interface Props {
setActiveLeg: SetActiveLegFunction;
setViewedTrip: SetViewedTripFunction;
showAgencyInfo: boolean;
showAlertEffectiveDateTimeText?: boolean;
showViewTripButton: boolean;
timeZone: string;
TransitLegSubheader?: FunctionComponent<TransitLegSubheaderProps>;
Expand Down Expand Up @@ -140,6 +141,7 @@ class TransitLegBody extends Component<Props, State> {
RouteDescriptionFooter,
setViewedTrip,
showAgencyInfo,
showAlertEffectiveDateTimeText,
showViewTripButton,
timeZone,
TransitLegSubheader,
Expand Down Expand Up @@ -332,6 +334,7 @@ class TransitLegBody extends Component<Props, State> {
agencyName={agencyName}
alerts={leg.alerts}
AlertIcon={AlertBodyIcon}
showAlertEffectiveDateTimeText={showAlertEffectiveDateTimeText}
timeZone={timeZone}
/>
</AnimateHeight>
Expand Down
10 changes: 10 additions & 0 deletions packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ interface StoryWrapperProps {
defaultFareSelector?: FareProductSelector;
hideDrivingDirections?: boolean;
itinerary: Itinerary;
showAlertEffectiveDateTimeText?: boolean;
showApproximateAccessLegTravelTimes?: boolean;
TimeColumnContent?: FunctionComponent<TimeColumnContentProps>;
}
Expand All @@ -70,6 +71,7 @@ function OtpRRItineraryBodyWrapper({
defaultFareSelector,
hideDrivingDirections = false,
itinerary,
showAlertEffectiveDateTimeText = true,
showApproximateAccessLegTravelTimes = false,
TimeColumnContent
}: StoryWrapperProps): ReactElement {
Expand All @@ -84,6 +86,7 @@ function OtpRRItineraryBodyWrapper({
PlaceName={OtpRRPlaceName}
RouteDescription={OtpRRRouteDescription}
showAgencyInfo
showAlertEffectiveDateTimeText={showAlertEffectiveDateTimeText}
showApproximateAccessLegTravelTimes={showApproximateAccessLegTravelTimes}
showLegIcon
showMapButtonColumn={false}
Expand Down Expand Up @@ -263,3 +266,10 @@ export const ApproximatePrefixItinerary = (): ReactElement => (
export const TransferLegItinerary = (): ReactElement => (
<OtpRRItineraryBodyWrapper itinerary={transferLegItinerary} />
);

export const AlertNoEffectiveAsOfItinerary = (): ReactElement => (
<OtpRRItineraryBodyWrapper
itinerary={walkTransitWalkItinerary}
showAlertEffectiveDateTimeText={false}
/>
);
Loading

0 comments on commit 1e50c60

Please sign in to comment.