Foxboro | Event Service | Add disclaimer/link to pilot (#249)

mbta · Oct 17, 2019 · 1f84d07 · 1f84d07
1 parent 016073f
commit 1f84d07
Show file tree

Hide file tree

Showing 18 changed files with 366 additions and 42 deletions.
diff --git a/apps/site/assets/css/_schedule-page.scss b/apps/site/assets/css/_schedule-page.scss
@@ -72,6 +72,10 @@
   }
 }
 
+.m-schedule-page__schedule-note--alternate {
+  margin-top: $base-spacing;
+}
+
 .m-schedule-page__service,
 .m-schedule-page__service-subheading {
   font-weight: bold;

diff --git a/apps/site/assets/ts/schedule/__tests__/ScheduleNoteTest.tsx b/apps/site/assets/ts/schedule/__tests__/ScheduleNoteTest.tsx
@@ -8,7 +8,8 @@ const scheduleNoteData = {
   peak_service: "5 minutes",
   exceptions: [
     { service: "26 minutes", type: "weekend mornings and late night" }
-  ]
+  ],
+  alternate_text: null
 };
 
 it("it renders", () => {
@@ -31,3 +32,21 @@ it("it renders without service exceptions", () => {
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+it("it renders alternate text if not showing specific times", () => {
+  createReactRoot();
+  const tree = renderer
+    .create(
+      <ScheduleNote
+        scheduleNote={{
+          offpeak_service: "",
+          peak_service: "",
+          exceptions: [],
+          alternate_text: "<div>Some other information here</div>"
+        }}
+        className="test"
+      />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/apps/site/assets/ts/schedule/__tests__/SchedulePageTest.tsx b/apps/site/assets/ts/schedule/__tests__/SchedulePageTest.tsx
@@ -154,7 +154,8 @@ const scheduleNoteData = {
   peak_service: "5 minutes",
   exceptions: [
     { service: "26 minutes", type: "weekend mornings and late night" }
-  ]
+  ],
+  alternate_text: null
 };
 
 it("it renders with conditional components", () => {

diff --git a/apps/site/assets/ts/schedule/__tests__/__snapshots__/ScheduleNoteTest.tsx.snap b/apps/site/assets/ts/schedule/__tests__/__snapshots__/ScheduleNoteTest.tsx.snap
@@ -61,6 +61,37 @@ exports[`it renders 1`] = `
 </div>
 `;
 
+exports[`it renders alternate text if not showing specific times 1`] = `
+<div
+  className="m-schedule-page__schedule-notes test"
+>
+  <h3
+    className="m-schedule-page__schedule-note-title"
+  >
+    <div
+      className="m-schedule-page__schedule-note-icon"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "SVG",
+        }
+      }
+    />
+    Schedule Note
+  </h3>
+  <div
+    className="m-schedule-page__schedule-note m-schedule-page__schedule-note--alternate"
+  >
+    <div
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<div>Some other information here</div>",
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
 exports[`it renders without service exceptions 1`] = `
 <div
   className="m-schedule-page__schedule-notes test"

diff --git a/apps/site/assets/ts/schedule/__tests__/__snapshots__/SchedulePageTest.tsx.snap b/apps/site/assets/ts/schedule/__tests__/__snapshots__/SchedulePageTest.tsx.snap
@@ -264,6 +264,132 @@ Array [
 
 exports[`it renders 1`] = `
 Array [
+  <div
+    className="schedule-finder--desktop"
+  >
+    <div
+      className="schedule-finder"
+    >
+      <h2
+        className="h3 schedule-finder__heading"
+      >
+        <span
+          aria-hidden="true"
+          className="notranslate c-svg__icon"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "SVG",
+            }
+          }
+        />
+         Schedule Finder
+      </h2>
+      <div>
+        Choose a stop to get schedule information and real-time departure predictions.
+      </div>
+      <div
+        className="c-select-custom__container "
+        id="sf_direction_select_container"
+        onClick={[Function]}
+        onKeyUp={[Function]}
+        role="button"
+        tabIndex={0}
+      >
+        <select
+          className="c-select-custom"
+          id="sf_direction_select"
+          onChange={[Function]}
+          onKeyUp={[Function]}
+          value=""
+        >
+          <option
+            value=""
+          >
+            Choose a direction
+          </option>
+          <option
+            value="0"
+          >
+            INBOUND
+             
+            Oak Grove
+          </option>
+          <option
+            value="1"
+          >
+            OUTBOUND
+             
+            Forest Hills
+          </option>
+        </select>
+        <span
+          aria-hidden="true"
+          className="notranslate c-svg__icon c-select-custom__arrow"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "SVG",
+            }
+          }
+        />
+      </div>
+      <div
+        className="c-select-custom__container "
+        id="sf_origin_select_container"
+        onClick={[Function]}
+        onKeyUp={[Function]}
+        role="button"
+        tabIndex={0}
+      >
+        <select
+          className="c-select-custom c-select-custom--noclick"
+          id="sf_origin_select"
+          onChange={[Function]}
+          onKeyUp={[Function]}
+          value=""
+        >
+          <option
+            value=""
+          >
+            Choose an origin stop
+          </option>
+          <option
+            value="place-welln"
+          >
+            Wellington
+          </option>
+          <option
+            value="123"
+          >
+            Abc
+          </option>
+          <option
+            value="741"
+          >
+            SL
+          </option>
+        </select>
+        <span
+          aria-hidden="true"
+          className="notranslate c-svg__icon c-select-custom__arrow"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "SVG",
+            }
+          }
+        />
+      </div>
+      <div
+        className="text-right"
+      >
+        <input
+          className="btn btn-primary"
+          onClick={[Function]}
+          type="submit"
+          value="Get schedules"
+        />
+      </div>
+    </div>
+  </div>,
   <div
     dangerouslySetInnerHTML={
       Object {

diff --git a/apps/site/assets/ts/schedule/components/LineDiagram.tsx b/apps/site/assets/ts/schedule/components/LineDiagram.tsx
@@ -76,12 +76,14 @@ const LineDiagram = ({
               )}
             </div>
             <div>
-              {stopData.map((stop: StopData) => (
-                <div>
+              {/* eslint-disable react/no-array-index-key */
+              stopData.map((stop: StopData, idx: number) => (
+                <div key={idx}>
                   {stop.branch ? `${stop.branch}, ` : ""}
                   {stop.type}
                 </div>
               ))}
+              {/* eslint-enable react/no-array-index-key */}
             </div>
           </div>
         </div>

diff --git a/apps/site/assets/ts/schedule/components/ScheduleNote.tsx b/apps/site/assets/ts/schedule/components/ScheduleNote.tsx
@@ -22,6 +22,40 @@ const offPeak = (
   return service(`${offpeak} ${except}`);
 };
 
+const alternateNote = (alternateText: string): ReactElement<HTMLElement> => (
+  /* eslint-disable react/no-danger */
+  <div className="m-schedule-page__schedule-note m-schedule-page__schedule-note--alternate">
+    <div dangerouslySetInnerHTML={{ __html: alternateText }} />
+  </div> /* eslint-enable react/no-danger */
+);
+
+const peakOffPeakTimes = ({
+  peakService,
+  offpeakService,
+  exceptions
+}: {
+  peakService: string;
+  offpeakService: string;
+  exceptions: ServiceException[];
+}): ReactElement<HTMLElement> => (
+  <>
+    <div className="m-schedule-page__schedule-note">
+      <h4 className="m-schedule-page__service">Peak Service</h4>
+      <div className="m-schedule-page__service-subheading">
+        Weekdays 7 AM - 9 AM, 4 PM - 6:30 PM
+      </div>
+      {service(peakService)}
+    </div>
+    <div className="m-schedule-page__schedule-note">
+      <h4 className="m-schedule-page__service">Off Peak / Weekends</h4>
+      {offPeak(offpeakService, exceptions)}
+      {exceptions.map(exception =>
+        service(`${exception.service} ${exception.type}`)
+      )}
+    </div>
+  </>
+);
+
 interface Props {
   scheduleNote: ScheduleNoteType;
   className: string;
@@ -31,7 +65,8 @@ const ScheduleNote = ({
   scheduleNote: {
     peak_service: peakService,
     offpeak_service: offpeakService,
-    exceptions
+    exceptions,
+    alternate_text: alternateText
   },
   className
 }: Props): ReactElement<HTMLElement> => (
@@ -43,20 +78,9 @@ const ScheduleNote = ({
       />
       Schedule Note
     </h3>
-    <div className="m-schedule-page__schedule-note">
-      <h4 className="m-schedule-page__service">Peak Service</h4>
-      <div className="m-schedule-page__service-subheading">
-        Weekdays 7 AM - 9 AM, 4 PM - 6:30 PM
-      </div>
-      {service(peakService)}
-    </div>
-    <div className="m-schedule-page__schedule-note">
-      <h4 className="m-schedule-page__service">Off Peak / Weekends</h4>
-      {offPeak(offpeakService, exceptions)}
-      {exceptions.map(exception =>
-        service(`${exception.service} ${exception.type}`)
-      )}
-    </div>
+    {alternateText
+      ? alternateNote(alternateText)
+      : peakOffPeakTimes({ peakService, offpeakService, exceptions })}
   </div>
 );
 

diff --git a/apps/site/assets/ts/schedule/components/SchedulePage.tsx b/apps/site/assets/ts/schedule/components/SchedulePage.tsx
@@ -31,13 +31,12 @@ const SchedulePage = ({
   }
 }: Props): ReactElement<HTMLElement> => (
   <>
-    {!!scheduleNote && (
+    {scheduleNote ? (
       <ScheduleNote
         className="m-schedule-page__schedule-notes--desktop"
         scheduleNote={scheduleNote}
       />
-    )}
-    {route.type !== 0 && route.type !== 1 && (
+    ) : (
       <div className="schedule-finder--desktop">
         <ScheduleFinder
           route={route} // don't show for subway

diff --git a/apps/site/assets/ts/schedule/components/__schedule.d.ts b/apps/site/assets/ts/schedule/components/__schedule.d.ts
@@ -104,6 +104,7 @@ export interface ScheduleNote {
   peak_service: string;
   offpeak_service: string;
   exceptions: ServiceException[];
+  alternate_text: string | null;
 }
 
 export interface ServiceException {

diff --git a/apps/site/assets/ts/schedule/schedule-loader.tsx b/apps/site/assets/ts/schedule/schedule-loader.tsx
@@ -38,9 +38,10 @@ const renderSchedulePage = (schedulePageData: SchedulePageData): void => {
     route,
     stops,
     services,
-    route_patterns: routePatternsByDirection
+    route_patterns: routePatternsByDirection,
+    schedule_note: scheduleNote
   } = schedulePageData;
-  if (route.type !== 0 && route.type !== 1) {
+  if (!scheduleNote) {
     ReactDOM.render(
       <ScheduleFinderAccordion
         directionId={directionId}