feat: metro-zone-finder (#39)

* add link to metro finder * styling updates
wmcadigital · May 1, 2024 · 250d854 · 250d854
1 parent af714ec
commit 250d854
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 119 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -146,6 +146,7 @@
     "sass": "^1.32.8"
   },
   "dependencies": {
+    "findandreplacedomtext": "^0.4.6",
     "gulp-copy": "^4.0.1",
     "gulp-htmlmin": "^5.0.1",
     "gulp-rename": "^2.0.0",
@@ -160,4 +161,4 @@
     "> 5%",
     "Firefox ESR"
   ]
-}
+}
diff --git a/src/app/ticket/views/shared/details.html b/src/app/ticket/views/shared/details.html
@@ -3,7 +3,7 @@
   ng-class="{'bdr-top--orange' : ticket.all.allowBus==true && ticket.all.allowTrain==false && ticket.all.allowMetro==false, 'bdr-top--green' : ticket.all.allowBus==false && ticket.all.allowTrain==true && ticket.all.allowMetro==false, 'bdr-top--pink' : ticket.all.allowBus==false && ticket.all.allowTrain==false && ticket.all.allowMetro==true, 'bdr-top--blue' : ticket.all.allowBus==true && ticket.all.allowMetro==true && ticket.all.allowTrain==false, 'bdr-009fe3' : ticket.all.allowBus==true && ticket.all.allowTrain==true && ticket.all.allowMetro==true, 'bdr-top--cyan' : ticket.all.allowBus==true && ticket.all.allowTrain==true && ticket.all.allowMetro==false}"
 >
   <div class="cfx">
-    <div class="col">
+    <div class="col title">
       <h1>{{ticket.all.name}}</h1>
     </div>
 

diff --git a/src/app/ticket/views/shared/where-can-i-use.html b/src/app/ticket/views/shared/where-can-i-use.html
@@ -1,50 +1,40 @@
 <div class="block block--fullwidth">
-  <div
-    class="boxin"
+  <div class="boxin"
     ng-class="
             ticket.all.swiftCurrentAmount >= '0'? 'bdr-top--purple':
             ticket.all.allowBus == true && ticket.all.allowTrain == false && ticket.all.allowMetro == false? 'bdr-top--orange':
             ticket.all.allowBus == false && ticket.all.allowTrain == true && ticket.all.allowMetro == false? 'bdr-top--pink':
             ticket.all.allowBus == false && ticket.all.allowTrain == false && ticket.all.allowMetro==true? 'bdr-top--blue':
             ticket.all.allowBus == false && ticket.all.allowMetro == true && ticket.all.allowTrain == true? 'bdr-top--blue':
             ticket.all.swiftCurrentAmount !== '' && ticket.all.allowBus == true && ticket.all.allowTrain == true && ticket.all.allowMetro == true? 'nnetwork':
-            ticket.all.allowBus == true && ticket.all.allowTrain == true && ticket.all.allowMetro == false? 'bdr-top--cyan': 'bdr-top--purple' "
-  >
+            ticket.all.allowBus == true && ticket.all.allowTrain == true && ticket.all.allowMetro == false? 'bdr-top--cyan': 'bdr-top--purple' ">
     <h3>
       Where can I use?
     </h3>
     <hr />
     <p class="type--small"></p>
 
     <div
-      data-ng-if="ticket.all.allowBus && ticket.all.allowTrain || ticket.all.allowBus && ticket.all.allowMetro || ticket.all.allowTrain && ticket.all.allowMetro || ticket.all.allowBus && ticket.all.allowTrain && ticket.all.allowMetro"
-    >
+      data-ng-if="ticket.all.allowBus && ticket.all.allowTrain || ticket.all.allowBus && ticket.all.allowMetro || ticket.all.allowTrain && ticket.all.allowMetro || ticket.all.allowBus && ticket.all.allowTrain && ticket.all.allowMetro">
       <tabs>
         <pane data-ng-if="ticket.all.brand == 'nBus' || ticket.all.id == '811'" title="Bus">
           <div class="imgwrapper">
-            <a ng-href="$*imgUrl/nbus_nnetworkmap.png" data-lightbox="bus"
-              ><img ng-src="$*imgUrl/nbus_nnetworkmap-thumbnail.png" />
+            <a ng-href="$*imgUrl/nbus_nnetworkmap.png" data-lightbox="bus"><img
+                ng-src="$*imgUrl/nbus_nnetworkmap-thumbnail.png" />
               <i class="material-icons">
                 zoom_out_map
               </i>
             </a>
           </div>
           <p class="summary">Bus operators who accept this ticket</p>
-          <button
-            class="btn btn--arrow"
-            data-ng-click="ticket.toggleModalBus()"
-          >
+          <button class="btn btn--arrow" data-ng-click="ticket.toggleModalBus()">
             See bus operators
           </button>
         </pane>
         <pane data-ng-if="ticket.all.brand == 'National Express'" title="Bus">
           <div class="imgwrapper">
-            <a
-              ng-href="$*imgUrl/nx-west-midlands-travelcard-area.jpg"
-              data-lightbox="bus"
-              ><img
-                ng-src="$*imgUrl/nx-west-midlands-travelcard-area-thumbnail.jpg"
-              />
+            <a ng-href="$*imgUrl/nx-west-midlands-travelcard-area.jpg" data-lightbox="bus"><img
+                ng-src="$*imgUrl/nx-west-midlands-travelcard-area-thumbnail.jpg" />
               <i class="material-icons">
                 zoom_out_map
               </i>
@@ -53,70 +43,57 @@ <h3>
         </pane>
         <pane data-ng-if="ticket.all.allowTrain" title="Train">
           <div class="imgwrapper">
-            <a ng-href="$*imgUrl/nwmzonalcurves.png" data-lightbox="train"
-              ><img ng-src="$*imgUrl/nwmzonalcurves-thumbnail.png" />
+            <a ng-href="$*imgUrl/nwmzonalcurves.png" data-lightbox="train"><img
+                ng-src="$*imgUrl/nwmzonalcurves-thumbnail.png" />
               <i class="material-icons">
                 zoom_out_map
               </i>
             </a>
           </div>
           <p class="summary">Train operators who accept this ticket</p>
-          <button
-            class="btn btn--arrow"
-            data-ng-click="ticket.toggleModalTrain()"
-          >
+          <button class="btn btn--arrow" data-ng-click="ticket.toggleModalTrain()">
             See train operators
           </button>
         </pane>
         <pane data-ng-if="ticket.all.allowMetro" title="Tram">
           <div>
             <div class="imgwrapper">
-              <a ng-href="$*imgUrl/metro-line-route.png" data-lightbox="tram"
-                ><img ng-src="$*imgUrl/metro-line-route-thumbnail.png" />
+              <a ng-href="$*imgUrl/metro-line-route.png" data-lightbox="tram"><img
+                  ng-src="$*imgUrl/metro-line-route-thumbnail.png" />
                 <i class="material-icons">
                   zoom_out_map
                 </i>
               </a>
             </div>
             <p class="summary">
               Trams are operated by
-              <a href="https://westmidlandsmetro.com/" target="_blank"
-                >West Midlands Metro</a
-              >
+              <a href="https://westmidlandsmetro.com/" target="_blank">West Midlands Metro</a>
+            </p>
+            <p class="summary">
+              Not sure about your zone?
+              <a href="https://find-metro-zones.tfwm.org.uk/" target="_blank">Find your zone here
+              </a>
             </p>
           </div>
         </pane>
       </tabs>
     </div>
-    <div
-      data-ng-if="ticket.all.allowBus && !ticket.all.allowTrain && !ticket.all.allowMetro"
-    >
-      <div
-        class="imgwrapper"
-        data-ng-hide="ticket.all.busTravelArea == 'Walsall' || ticket.all.busTravelArea == 'Sandwell & Dudley'"
-      >
-        <a
-          data-ng-if="ticket.all.brand == 'nbus'"
-          ng-href="$*imgUrl/nbus_nnetworkmap.png"
-          data-lightbox="bus"
-          ><img ng-src="$*imgUrl/nbus_nnetworkmap-thumbnail.png" />
+    <div data-ng-if="ticket.all.allowBus && !ticket.all.allowTrain && !ticket.all.allowMetro">
+      <div class="imgwrapper"
+        data-ng-hide="ticket.all.busTravelArea == 'Walsall' || ticket.all.busTravelArea == 'Sandwell & Dudley'">
+        <a data-ng-if="ticket.all.brand == 'nbus'" ng-href="$*imgUrl/nbus_nnetworkmap.png" data-lightbox="bus"><img
+            ng-src="$*imgUrl/nbus_nnetworkmap-thumbnail.png" />
           <i class="material-icons">
             zoom_out_map
           </i>
         </a>
       </div>
 
-      <div
-        data-ng-if="ticket.all.brand == 'National Express'"
-        data-ng-hide="ticket.all.id == '419' || ticket.all.id == '433' || ticket.all.id == '863' || ticket.all.id == '418' || ticket.all.id == '432' || ticket.all.id == '862'"
-      >
+      <div data-ng-if="ticket.all.brand == 'National Express'"
+        data-ng-hide="ticket.all.id == '419' || ticket.all.id == '433' || ticket.all.id == '863' || ticket.all.id == '418' || ticket.all.id == '432' || ticket.all.id == '862'">
         <div class="imgwrapper">
-          <a
-            ng-href="$*imgUrl/nx-west-midlands-travelcard-area.jpg"
-            data-lightbox="nx"
-            ><img
-              ng-src="$*imgUrl/nx-west-midlands-travelcard-area-thumbnail.jpg"
-            />
+          <a ng-href="$*imgUrl/nx-west-midlands-travelcard-area.jpg" data-lightbox="nx"><img
+              ng-src="$*imgUrl/nx-west-midlands-travelcard-area-thumbnail.jpg" />
             <br />View National Express network map
             <i class="material-icons">
               zoom_out_map
@@ -126,13 +103,11 @@ <h3>
         <p>Use on National Express buses only</p>
       </div>
       <!-- walsall nbus zone -->
-      <div
-        data-ng-if="ticket.all.busTravelArea == 'Walsall'"
-        data-ng-hide="ticket.all.id == '419' || ticket.all.id == '433' || ticket.all.id == '863'"
-      >
+      <div data-ng-if="ticket.all.busTravelArea == 'Walsall'"
+        data-ng-hide="ticket.all.id == '419' || ticket.all.id == '433' || ticket.all.id == '863'">
         <div class="imgwrapper">
-          <a ng-href="$*imgUrl/nbus_walsall.png" data-lightbox="nbus walsall"
-            ><img ng-src="$*imgUrl/nbus_walsall.png" /> <br />View Walsall nBus
+          <a ng-href="$*imgUrl/nbus_walsall.png" data-lightbox="nbus walsall"><img ng-src="$*imgUrl/nbus_walsall.png" />
+            <br />View Walsall nBus
             network map
             <i class="material-icons">
               zoom_out_map
@@ -141,12 +116,10 @@ <h3>
         </div>
       </div>
       <!-- walsall low fare zone -->
-      <div
-        data-ng-if="ticket.all.id == '419' || ticket.all.id == '433' || ticket.all.id == '863'"
-      >
+      <div data-ng-if="ticket.all.id == '419' || ticket.all.id == '433' || ticket.all.id == '863'">
         <div class="imgwrapper">
-          <a href="https://nxbus.co.uk/walsall" target="_blank"
-            ><img ng-src="$*imgUrl/walsall-low-fare-zone-map.png" /> <br />View
+          <a href="https://nxbus.co.uk/walsall" target="_blank"><img ng-src="$*imgUrl/walsall-low-fare-zone-map.png" />
+            <br />View
             National Express Walsall low fare zone map
             <i class="material-icons">
               exit_to_app
@@ -156,15 +129,10 @@ <h3>
         <p>Use on National Express Walsall low fare zone</p>
       </div>
       <!-- sandwell and dudley nbus zone -->
-      <div
-        data-ng-if="ticket.all.busTravelArea == 'Sandwell & Dudley'"
-        data-ng-hide="ticket.all.id == '418' || ticket.all.id == '432' || ticket.all.id == '862'"
-      >
+      <div data-ng-if="ticket.all.busTravelArea == 'Sandwell & Dudley'"
+        data-ng-hide="ticket.all.id == '418' || ticket.all.id == '432' || ticket.all.id == '862'">
         <div class="imgwrapper">
-          <a
-            ng-href="$*imgUrl/nbus_sandwell_dudley.png"
-            data-lightbox="nbus sandwell & dudley"
-          >
+          <a ng-href="$*imgUrl/nbus_sandwell_dudley.png" data-lightbox="nbus sandwell & dudley">
             <img ng-src="$*imgUrl/nbus_sandwell_dudley.png" />
             <br />View Sandwell &amp; Dudley nBus network map
             <i class="material-icons">
@@ -174,12 +142,10 @@ <h3>
         </div>
       </div>
       <!-- sandwell and dudley low fare zone -->
-      <div
-        data-ng-if="ticket.all.id == '418' || ticket.all.id == '432' || ticket.all.id == '862'"
-      >
+      <div data-ng-if="ticket.all.id == '418' || ticket.all.id == '432' || ticket.all.id == '862'">
         <div class="imgwrapper">
-          <a href="https://nxbus.co.uk/paylocal" target="_blank"
-            ><img ng-src="$*imgUrl/s-d-low-fare-zone-map.png" /> <br />View
+          <a href="https://nxbus.co.uk/paylocal" target="_blank"><img ng-src="$*imgUrl/s-d-low-fare-zone-map.png" />
+            <br />View
             National Express Sandwell & Dudley low fare zone map
             <i class="material-icons">
               exit_to_app
@@ -190,15 +156,9 @@ <h3>
       </div>
       <div data-ng-if="ticket.all.brand == 'Diamond Bus' ">
         <div class="imgwrapper">
-          <a
-            href="https://www.diamondbuses.com/about-us/network-maps/"
-            target="_blank"
-            title="View Diamond network maps"
-          >
-            <img
-              ng-src="$*imgUrl/diamond-westmids-zone-map_apr2018.png"
-              alt="Diamond network maps"
-            />
+          <a href="https://www.diamondbuses.com/about-us/network-maps/" target="_blank"
+            title="View Diamond network maps">
+            <img ng-src="$*imgUrl/diamond-westmids-zone-map_apr2018.png" alt="Diamond network maps" />
             <br />View Diamond network maps
             <i class="material-icons">
               exit_to_app
@@ -209,15 +169,8 @@ <h3>
       </div>
       <div data-ng-if="ticket.all.brand == 'Stagecoach' ">
         <div class="imgwrapper">
-          <a
-            href="https://www.stagecoachbus.com/maps"
-            target="_blank"
-            title="View Diamond network maps"
-          >
-            <img
-              ng-src="$*imgUrl/stagecoach-coventrymap_edit-08.17.png"
-              alt="Diamond network maps"
-            />
+          <a href="https://www.stagecoachbus.com/maps" target="_blank" title="View Diamond network maps">
+            <img ng-src="$*imgUrl/stagecoach-coventrymap_edit-08.17.png" alt="Diamond network maps" />
             <br />View Stagecoach network maps
             <i class="material-icons">
               exit_to_app
@@ -228,15 +181,8 @@ <h3>
       </div>
       <div data-ng-if="ticket.all.brand == 'Johnsons' ">
         <div class="imgwrapper">
-          <a
-            href="http://www.johnsonscoaches.co.uk/bus-route-maps/"
-            target="_blank"
-            title="View Johnsons network maps"
-          >
-            <img
-              ng-src="$*imgUrl/johnsons-map.jpg"
-              alt="Johnsons network maps"
-            />
+          <a href="http://www.johnsonscoaches.co.uk/bus-route-maps/" target="_blank" title="View Johnsons network maps">
+            <img ng-src="$*imgUrl/johnsons-map.jpg" alt="Johnsons network maps" />
             <br />View Johnsons network maps
             <i class="material-icons">
               exit_to_app
@@ -253,12 +199,10 @@ <h3>
         </button>
       </div>
     </div>
-    <div
-      data-ng-if="!ticket.all.allowBus && ticket.all.allowTrain && !ticket.all.allowMetro"
-    >
+    <div data-ng-if="!ticket.all.allowBus && ticket.all.allowTrain && !ticket.all.allowMetro">
       <div class="imgwrapper">
-        <a ng-href="$*imgUrl/nwmzonalcurves.png" data-lightbox="train"
-          ><img ng-src="$*imgUrl/nwmzonalcurves-thumbnail.png" />
+        <a ng-href="$*imgUrl/nwmzonalcurves.png" data-lightbox="train"><img
+            ng-src="$*imgUrl/nwmzonalcurves-thumbnail.png" />
           <i class="material-icons">
             zoom_out_map
           </i>
@@ -269,23 +213,25 @@ <h3>
         See train operators
       </button>
     </div>
-    <div
-      data-ng-if="!ticket.all.allowBus && !ticket.all.allowTrain && ticket.all.allowMetro"
-    >
+    <div data-ng-if="!ticket.all.allowBus && !ticket.all.allowTrain && ticket.all.allowMetro">
       <div class="imgwrapper">
-        <a ng-href="$*imgUrl/metro-line-route.png" data-lightbox="tram"
-          ><img ng-src="$*imgUrl/Metro-Line-Route-thumbnail.png" />
+        <a ng-href="$*imgUrl/metro-line-route.png" data-lightbox="tram"><img
+            ng-src="$*imgUrl/Metro-Line-Route-thumbnail.png" />
           <i class="material-icons">
             zoom_out_map
           </i>
         </a>
       </div>
       <p class="summary">
         Trams are operated by
-        <a href="https://westmidlandsmetro.com/" target="_blank"
-          >West Midlands Metro
+        <a href="https://westmidlandsmetro.com/" target="_blank">West Midlands Metro
+        </a>
+      </p>
+      <p class="summary">
+        Not sure about your zone?
+        <a href="https://find-metro-zones.tfwm.org.uk/" target="_blank">Find your zone here
         </a>
       </p>
     </div>
   </div>
-</div>
+</div>