From 482e3381d95f026bcf12c5ee0d8162241418207b Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Thu, 18 Jan 2024 12:53:12 -0800
Subject: [PATCH] SDCI-98: Added alert to direct users to Info hub to learn
 about new EDX process

---
 frontend/src/assets/main.css                    |  6 ++++++
 frontend/src/components/SchoolSelect.vue        |  4 +++-
 frontend/src/components/common/DisplayAlert.vue | 11 +++++++++++
 frontend/src/views/AuthorityView.vue            |  2 ++
 frontend/src/views/ContactsView.vue             |  3 +++
 frontend/src/views/DistrictView.vue             |  3 +++
 frontend/src/views/OffshoreView.vue             |  5 ++++-
 frontend/src/views/SchoolSearchView.vue         |  5 ++++-
 frontend/src/views/SchoolView.vue               |  2 ++
 9 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/common/DisplayAlert.vue

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 99347e45..c438d8ca 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -12,6 +12,12 @@ a {
   color: #2a6496;
 }
 
+/** Need to look at how CSS is loaded in since Vuetify defaults are overriding our custom CSS.
+Fixing this now could risk delaying other releases, so we will have to wait on this one - SF **/
+.v-alert, .v-alert--variant-outlined {
+  border-radius: 8px !important;
+}
+
 @media (max-width: 768px) {
   #app {
     min-width: 1130px; /* Adjust as needed */
diff --git a/frontend/src/components/SchoolSelect.vue b/frontend/src/components/SchoolSelect.vue
index 234a29c3..c9a56ba1 100644
--- a/frontend/src/components/SchoolSelect.vue
+++ b/frontend/src/components/SchoolSelect.vue
@@ -4,6 +4,7 @@ import { useAppStore } from '@/stores/app'
 import router from '@/router'
 import { useSanitizeURL } from '@/composables/string'
 import DownloadSchoolsModal from '@/components/DownloadSchoolsModal.vue'
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
 
 // Type Imports
 import type { ListSchool } from '@/types/types'
@@ -35,11 +36,12 @@ function goToSchoolSearch() {
 <template>
   <v-container fluid class="pt-0">
     <v-sheet elevation="2" class="py-6 full-width">
+      <DisplayAlert />
       <v-row no-gutters justify="space-between">
         <img
           src="@/assets/images/BCMapGraphic.png"
           alt="Map of British Columbia"
-          style="height: 268px; position: absolute; top: 50px; left: -80px"
+          style="height: 268px; position: absolute; top: 120px; left: -80px"
         />
         <v-spacer />
         <v-col lg="6" md="8" class="ml-0 py-6 school-search">
diff --git a/frontend/src/components/common/DisplayAlert.vue b/frontend/src/components/common/DisplayAlert.vue
new file mode 100644
index 00000000..af229ac0
--- /dev/null
+++ b/frontend/src/components/common/DisplayAlert.vue
@@ -0,0 +1,11 @@
+<script></script>
+
+<template>
+  <v-alert type="info" color="primary" variant="outlined" style="background-color: #f6f9fc"
+    >The information on this page is provided by schools and districts through the Education Data
+    Exchange (EDX).
+    <a href="https://www2.gov.bc.ca/gov/content?id=0F6C7869EEC844F190091E71D6BA3B58"
+      >Learn more.</a
+    ></v-alert
+  >
+</template>
diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index 3910b4ee..2e005112 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -11,6 +11,7 @@ import { useSanitizeURL } from '@/composables/string'
 
 // import common components
 import DisplayAddress from '@/components/common/DisplayAddress.vue'
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
 
 const appStore = useAppStore()
 const authorityId = ref<any>(null) // Initialize with null initially
@@ -212,6 +213,7 @@ onMounted(async () => {
       ]"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
+      <DisplayAlert />
       <v-row no-gutters justify="space-between">
         <v-col>
           <h1 class="mt-3 mb-2">
diff --git a/frontend/src/views/ContactsView.vue b/frontend/src/views/ContactsView.vue
index b9eaaad9..23c01c65 100644
--- a/frontend/src/views/ContactsView.vue
+++ b/frontend/src/views/ContactsView.vue
@@ -4,6 +4,8 @@ import { ref, onMounted } from 'vue'
 import InstituteService from '@/services/InstituteService'
 import jsonexport from 'jsonexport/dist'
 
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
+
 const appStore = useAppStore()
 // used for open and close modal
 const dialog = ref(false)
@@ -111,6 +113,7 @@ onMounted(() => {
       <v-row no-gutters justify="space-between">
         <v-spacer />
         <v-col cols="12">
+          <DisplayAlert />
           <h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
           <v-row>
             <v-autocomplete
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index 09261118..514f8ec7 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -10,6 +10,8 @@ import jsonexport from 'jsonexport/dist'
 import { useSanitizeURL } from '@/composables/string'
 // import common components
 import DisplayAddress from '@/components/common/DisplayAddress.vue'
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
+
 const appStore = useAppStore()
 const districtId = ref<string | null>(null) // Initialize with null initially
 const district = reactive({ value: {} as District })
@@ -187,6 +189,7 @@ onMounted(async () => {
     ></v-breadcrumbs>
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
+      <DisplayAlert />
       <v-row no-gutters justify="space-between">
         <v-col v-if="district.value.districtData">
           <v-row no-gutters>
diff --git a/frontend/src/views/OffshoreView.vue b/frontend/src/views/OffshoreView.vue
index a61a9fb3..16c23bdb 100644
--- a/frontend/src/views/OffshoreView.vue
+++ b/frontend/src/views/OffshoreView.vue
@@ -5,6 +5,8 @@ import { reactive, onBeforeMount, ref } from 'vue'
 import { distNumberFromMincode } from '@/utils/common'
 import jsonexport from 'jsonexport/dist'
 import DisplayAddress from '@/components/common/DisplayAddress.vue'
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
+
 const appStore = useAppStore()
 const { offshoreSchools } = storeToRefs(appStore)
 const schoolSearch = ref('')
@@ -129,9 +131,10 @@ onBeforeMount(() => {
       :items="[{ title: 'Home', href: '/' }, 'Offshore Schools']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
+      <DisplayAlert />
       <v-row no-gutters justify="space-between">
         <v-col>
-          <h2 class="mt-3 mb-2">Offshore Schools</h2>
+          <h1 class="mt-3 mb-2">Offshore Schools</h1>
         </v-col>
         <v-spacer />
         <v-col cols="3"
diff --git a/frontend/src/views/SchoolSearchView.vue b/frontend/src/views/SchoolSearchView.vue
index c7c24c94..874878d1 100644
--- a/frontend/src/views/SchoolSearchView.vue
+++ b/frontend/src/views/SchoolSearchView.vue
@@ -3,6 +3,8 @@ import { ref, onMounted, onBeforeMount, isProxy, toRaw } from 'vue'
 import { useAppStore } from '@/stores/app'
 import InstituteService from '@/services/InstituteService'
 import DisplayAddress from '@/components/common/DisplayAddress.vue'
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
+
 const currentDate: Date = new Date()
 const appStore = useAppStore()
 const jurisdictions = ref([])
@@ -225,8 +227,9 @@ onBeforeMount(async () => {
       :items="[{ title: 'Home', href: '/' }, 'Search']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
+      <DisplayAlert />
       <v-container class="main">
-        <h2>Find Schools</h2>
+        <h1>Find Schools</h1>
         <v-row>
           <v-col cols="12" md="3">
             <v-select
diff --git a/frontend/src/views/SchoolView.vue b/frontend/src/views/SchoolView.vue
index ce05d422..b0b7046e 100644
--- a/frontend/src/views/SchoolView.vue
+++ b/frontend/src/views/SchoolView.vue
@@ -8,6 +8,7 @@ import type { School, Grade } from '@/types/types.d.ts'
 import jsonexport from 'jsonexport/dist'
 import { distNumberFromMincode, formatPhoneNumber } from '@/utils/common'
 import DisplayAddress from '@/components/common/DisplayAddress.vue'
+import DisplayAlert from '@/components/common/DisplayAlert.vue'
 import { useSanitizeURL } from '@/composables/string'
 const appStore = useAppStore()
 
@@ -203,6 +204,7 @@ function goToDistrict() {
     ></v-breadcrumbs>
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
+      <DisplayAlert />
       <v-row no-gutters justify="space-between">
         <v-row v-if="schoolData.value" no-gutters justify="space-between">
           <v-col>