Show mobile app banner (#2175)

* show mobile app banner

* could have hyphens

assets/js/app.js

@@ -45,6 +45,8 @@ import { accordionInit } from "../ts/ui/accordion";
 import initializeSentry from "../ts/sentry";
 import Hooks from "../ts/phoenix-hooks/index.ts";
 
+import mobileAppBanner from "./mobile-app-banner.js";
+
 // Establish Phoenix Socket and LiveView configuration.
 import { Socket } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
@@ -135,3 +137,5 @@ eventPageSetup();
 previousEventsButton();
 pslPageSetup();
 accordionInit();
+
+mobileAppBanner();

assets/js/mobile-app-banner.js

@@ -0,0 +1,28 @@
+const isAlertsPage = () => {
+  const url = window.location.href;
+
+  return /\/alerts\/[\w.-]+/.test(url);
+};
+
+const isIPhone = () => {
+  return /iPhone/.test(navigator.userAgent);
+};
+
+const isSchedulePage = () => {
+  const url = window.location.href;
+
+  return /\/schedules\/[\w.-]+\/line/.test(url);
+};
+
+const isStopPage = () => {
+  const url = window.location.href;
+
+  return /\/stops\/[\w.-]+/.test(url);
+};
+
+// Show the mobile app banner
+export default function mobileAppBanner() {
+  if (isIPhone() && (isAlertsPage() || isSchedulePage() || isStopPage())) {
+    document.querySelector("#mobile-app-banner").style.display = "block";
+  }
+}

lib/dotcom_web/templates/layout/root.html.eex

@@ -75,6 +75,11 @@
           </div>
         </div>
       <% end %>
+      <div id="mobile-app-banner" style="background: #DCD3E8; display: none; margin: 0 -1.5rem; padding: 10px; text-align: center">
+        <a href="https://mbta.com/app" rel="noreferrer" style="color: black; display: block" target="_blank">
+          Sign up to test the new <strong>MBTA app &#x2192;</strong>
+        </a>
+      </div>
       <%= if assigns[:search_header?] do %>
         <%= render "_searchbar.html", assigns %>
       <% end %>