From c6b51b801dd558693219e974c39574e5aa7e9b8a Mon Sep 17 00:00:00 2001
From: weskubo-cgi <wes.kubo@cgi.com>
Date: Mon, 16 May 2022 16:21:57 -0700
Subject: [PATCH 1/8] Initial implementation of Help/Instructions and updates
 to tooltip to make it more versatile.

---
 frontend/src/components/ui/AppDateInput.vue   | 111 ++++++++----------
 frontend/src/components/ui/AppHelp.vue        |  34 ++++++
 frontend/src/components/ui/AppInput.vue       |  32 ++---
 .../src/components/ui/AppInstructions.vue     |  91 ++++++++++++++
 frontend/src/components/ui/AppModal.vue       | 104 ++++++++++++++++
 .../src/components/ui/AppRadioButtonGroup.vue |   6 +-
 frontend/src/components/ui/AppTooltip.vue     |  64 ++++++----
 .../components/ui/YesNoRadioButtonGroup.vue   |   6 +-
 .../views/eligibility/CheckEligibility.vue    |  23 ++++
 .../views/eligibility/CoverageStatusCheck.vue |  17 ++-
 frontend/src/views/eligibility/PhnInquiry.vue |  58 ++++++++-
 .../src/views/groupmember/AddDependent.vue    |   8 +-
 .../src/views/groupmember/AddGroupMember.vue  |   4 +-
 .../src/views/groupmember/CancelDependent.vue |   4 +-
 .../views/groupmember/CancelGroupMember.vue   |   4 +-
 15 files changed, 448 insertions(+), 118 deletions(-)
 create mode 100644 frontend/src/components/ui/AppHelp.vue
 create mode 100644 frontend/src/components/ui/AppInstructions.vue
 create mode 100644 frontend/src/components/ui/AppModal.vue

diff --git a/frontend/src/components/ui/AppDateInput.vue b/frontend/src/components/ui/AppDateInput.vue
index df1fadad..97b2336a 100644
--- a/frontend/src/components/ui/AppDateInput.vue
+++ b/frontend/src/components/ui/AppDateInput.vue
@@ -1,72 +1,57 @@
 <template>
   <div class="text_label">
-    <label>{{label}}</label>
-    <AppTooltip v-if="tooltip" :tooltipText="tooltipText" >
-      <font-awesome-icon class="tooltip-icon" icon="question-circle"/>
-    </AppTooltip>
+    <label>{{ label }}</label>
+    <AppTooltip v-if="this.$slots.tooltip"><slot name="tooltip"></slot></AppTooltip>
   </div>
   <div v-bind="$attrs">
-    <Datepicker
-      :autoApply="true"
-      :class="inputClass"
-      :enableTimePicker="false"
-      :format="inputDateFormat"
-      :placeholder="placeholder"
-      :text-input="true"
-      :monthPicker=$attrs.monthPicker
-      :uid="$attrs.id"
-      v-model="value" 
-    />
+    <Datepicker :autoApply="true" :class="inputClass" :enableTimePicker="false" :format="inputDateFormat" :placeholder="placeholder" :text-input="true" :monthPicker="$attrs.monthPicker" :uid="$attrs.id" v-model="value" />
   </div>
-  <AppInputError :e-model="eModel" :label="label"/>
-
+  <AppInputError :e-model="eModel" :label="label" />
 </template>
 
 <script>
-import Datepicker from 'vue3-date-time-picker';
+import Datepicker from 'vue3-date-time-picker'
 import AppInputError from './AppInputError.vue'
-import AppTooltip from "./AppTooltip.vue";
+import AppTooltip from './AppTooltip.vue'
 import 'vue3-date-time-picker/dist/main.css'
 import { INPUT_DATE_FORMAT, OUTPUT_DATE_FORMAT } from '../../util/constants.js'
 
-  export default {
-    name: 'AppDateInput',
-    components: { AppTooltip, AppInputError, Datepicker },
-    props: {
-      eModel: {
-        required: false,
-        type: Object,
-      },
-      label: String,
-      modelValue: Object,
-      inputDateFormat: {
-        default: INPUT_DATE_FORMAT,
-        type: String,
-      },
-      placeholder: {
-        default: OUTPUT_DATE_FORMAT,
-        type: String,
-      },
-      tooltip: Boolean,
-      tooltipText: String,
+export default {
+  name: 'AppDateInput',
+  components: { AppTooltip, AppInputError, Datepicker },
+  props: {
+    eModel: {
+      required: false,
+      type: Object,
+    },
+    label: String,
+    modelValue: Object,
+    inputDateFormat: {
+      default: INPUT_DATE_FORMAT,
+      type: String,
+    },
+    placeholder: {
+      default: OUTPUT_DATE_FORMAT,
+      type: String,
     },
-    computed: {
-      value: {
-        get() {
-          return this.modelValue
-        },
-        set(value) {
-          this.$emit('update:modelValue', value)
-        }
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue
       },
-      inputClass() {
-        return {
-          'text_input': true,
-          'error-input' : this.eModel?.$error,
-        }
+      set(value) {
+        this.$emit('update:modelValue', value)
       },
     },
-  }
+    inputClass() {
+      return {
+        text_input: true,
+        'error-input': this.eModel?.$error,
+      }
+    },
+  },
+}
 </script>
 
 <style>
@@ -74,7 +59,7 @@ import { INPUT_DATE_FORMAT, OUTPUT_DATE_FORMAT } from '../../util/constants.js'
   --dp-border-color: #606060;
   --dp-text-color: #000000;
   --dp-hover-color: #6583b0;
-/*   --dp-background-color: #ffffff;    
+  /*   --dp-background-color: #ffffff;    
   --dp-hover-color: #f3f3f3;
   --dp-primary-color: #1976d2;
   --dp-primary-text-color: #f8f5f5;
@@ -86,11 +71,10 @@ import { INPUT_DATE_FORMAT, OUTPUT_DATE_FORMAT } from '../../util/constants.js'
   --dp-success-color: #76d275;
   --dp-icon-color: #959595;
   --dp-danger-color: #ff6f60; */
-
 }
-  
+
 input.dp__input {
-  border-color: #606060;;
+  border-color: #606060;
   border-width: 2px;
   color: #000000;
   font-family: 'BCSans';
@@ -103,18 +87,17 @@ input.dp__input {
 .text_label {
   display: flex;
 }
-  
+
 .dp__input:focus {
-  outline: 2px solid #3B99FC;
+  outline: 2px solid #3b99fc;
   outline-offset: 1px;
 }
 
-.error-input input  {
-  border-color: #D8292F !important;
+.error-input input {
+  border-color: #d8292f !important;
 }
 
 .tooltip-icon {
-  margin-left: 5px
+  margin-left: 5px;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/ui/AppHelp.vue b/frontend/src/components/ui/AppHelp.vue
new file mode 100644
index 00000000..a60f3e8d
--- /dev/null
+++ b/frontend/src/components/ui/AppHelp.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="instructions">
+    <a href="#" id="show-modal" @click="showModal = true">Instructions</a>
+  </div>
+  <Teleport to="body">
+    <!-- use the modal component, pass in the prop -->
+    <AppModal :show="showModal" @close="showModal = false">
+      <template #header>
+        <h3>Instructions</h3>
+      </template>
+      <template #body>
+        <slot></slot>
+      </template>
+      <template #footer></template>
+    </AppModal>
+  </Teleport>
+</template>
+<script>
+import AppModal from './AppModal.vue'
+export default {
+  name: 'AppHelp',
+  components: { AppModal },
+  data() {
+    return {
+      showModal: false,
+    }
+  },
+}
+</script>
+<style scoped>
+.instructions {
+  float: right;
+}
+</style>
diff --git a/frontend/src/components/ui/AppInput.vue b/frontend/src/components/ui/AppInput.vue
index 9d768bfb..e51685ba 100644
--- a/frontend/src/components/ui/AppInput.vue
+++ b/frontend/src/components/ui/AppInput.vue
@@ -3,20 +3,23 @@ import AppInputError from './AppInputError.vue'
 </script>
 
 <template>
-
   <div class="text_label">
-    <label>{{label}}</label>
+    <label>{{ label }}</label>
+    <AppTooltip v-if="this.$slots.tooltip">
+      <slot name="tooltip"></slot>
+    </AppTooltip>
   </div>
 
-  <input :class="inputClass" :value="modelValue" @input='$emit("update:modelValue", $event.target.value)' v-bind="$attrs"/>
-  
-  <AppInputError :e-model="eModel" :label="label"/>
-  
+  <input :class="inputClass" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" v-bind="$attrs" />
+
+  <AppInputError :e-model="eModel" :label="label" />
 </template>
 
 <script>
+import AppTooltip from './AppTooltip.vue'
 export default {
   name: 'AppInput',
+  components: { AppTooltip },
   props: {
     eModel: {
       type: Object,
@@ -28,11 +31,11 @@ export default {
   computed: {
     inputClass() {
       return {
-        'text_input': true,
-        'error-input' : this.eModel?.$error,
+        text_input: true,
+        'error-input': this.eModel?.$error,
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -51,8 +54,8 @@ export default {
   padding: 5px 5px 5px 7px;
 }
 
-.text_input[type="text"]:focus {
-  outline: 2px solid #3B99FC;
+.text_input[type='text']:focus {
+  outline: 2px solid #3b99fc;
   outline-offset: 1px;
 }
 
@@ -61,7 +64,6 @@ export default {
 }
 
 .error-input {
-  border-color: #D8292F !important;
+  border-color: #d8292f !important;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/ui/AppInstructions.vue b/frontend/src/components/ui/AppInstructions.vue
new file mode 100644
index 00000000..47146e7f
--- /dev/null
+++ b/frontend/src/components/ui/AppInstructions.vue
@@ -0,0 +1,91 @@
+<template>
+  <div :class="instructionsClass">
+    <a href="#" @click="handleOnClick()"><span class="instruction-text">Instructions</span></a>
+    <!-- <Transition> -->
+    <div class="showHide" v-if="expanded">
+      <slot></slot>
+    </div>
+    <!-- </Transition> -->
+  </div>
+</template>
+<script>
+import { Transition } from 'vue'
+
+export default {
+  name: 'AppInstructions',
+  components: {},
+  data() {
+    return {
+      expanded: false,
+    }
+  },
+  computed: {
+    instructionsClass() {
+      return {
+        instructions: true,
+        show: this.expanded,
+      }
+    },
+  },
+  methods: {
+    handleOnClick() {
+      this.expanded = !this.expanded
+    },
+  },
+}
+</script>
+<style scoped>
+a {
+  color: #1a5a96;
+  outline: none;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+div.instructions {
+  background: #ffffff;
+  border: 1px solid #535d6e;
+  border-radius: 6px;
+  -moz-border-radius: 5px;
+  -webkit-borderradius: 5px;
+  padding: 11px 10px 8px;
+  width: 11%;
+  text-align: center;
+  margin-bottom: 10px;
+  float: right;
+}
+div.instructions.show {
+  width: 100%;
+  text-align: right;
+}
+.instruction-text {
+  font-size: 1.2em;
+  color: #494949;
+}
+
+/* .absolute-right {
+  position: absolute;
+  right: 55px;
+} */
+.show {
+}
+.showHide {
+  padding-top: 10px;
+  text-align: left;
+  display: block;
+}
+
+.v-enter-active {
+  transition: opacity 0.5s ease;
+}
+.v-leave-active {
+}
+
+.v-enter-from {
+  opacity: 0;
+}
+.v-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/frontend/src/components/ui/AppModal.vue b/frontend/src/components/ui/AppModal.vue
new file mode 100644
index 00000000..e77223fc
--- /dev/null
+++ b/frontend/src/components/ui/AppModal.vue
@@ -0,0 +1,104 @@
+<template>
+  <Transition name="modal">
+    <div v-if="show" class="modal-mask">
+      <div class="modal-wrapper">
+        <div class="modal-container">
+          <div class="modal-header">
+            <slot name="header"></slot>
+          </div>
+
+          <div class="modal-body">
+            <slot name="body"></slot>
+          </div>
+
+          <div class="modal-footer">
+            <slot name="footer">
+              <AppButton class="modal-default-button" mode="secondary" @click="$emit('close')">OK</AppButton>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+<script>
+export default {
+  props: {
+    show: Boolean,
+  },
+}
+</script>
+
+<style>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+  transition: opacity 0.3s ease;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  width: 600px;
+  margin: 0px auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  transition: all 0.3s ease;
+}
+
+.modal-header h3 {
+  margin-top: 0;
+  color: #003366;
+}
+
+.modal-body {
+  margin: 20px 0;
+}
+
+.modal-footer {
+  padding-bottom: 40px;
+}
+
+.modal-default-button {
+  float: right;
+}
+
+:slotted(ul) {
+  list-style: disc;
+  margin-left: 20px;
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter-from {
+  opacity: 0;
+}
+
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .modal-container,
+.modal-leave-to .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+</style>
diff --git a/frontend/src/components/ui/AppRadioButtonGroup.vue b/frontend/src/components/ui/AppRadioButtonGroup.vue
index 52d4d9a3..d456328e 100644
--- a/frontend/src/components/ui/AppRadioButtonGroup.vue
+++ b/frontend/src/components/ui/AppRadioButtonGroup.vue
@@ -2,8 +2,8 @@
   <div>
     <div class="text_label">
       <label>{{ label }}</label>
-      <AppTooltip v-if="tooltip" :tooltipText="tooltipText">
-        <font-awesome-icon class="tooltip-icon" icon="question-circle" />
+      <AppTooltip v-if="this.$slots.tooltip">
+        <slot name="tooltip"></slot>
       </AppTooltip>
     </div>
     <div :class="groupClass">
@@ -34,8 +34,6 @@ export default {
     label: String,
     modelValue: String,
     group: Array,
-    tooltip: Boolean,
-    tooltipText: String,
   },
   watch: {
     modelValue: function (val) {
diff --git a/frontend/src/components/ui/AppTooltip.vue b/frontend/src/components/ui/AppTooltip.vue
index d832fc3e..91252542 100644
--- a/frontend/src/components/ui/AppTooltip.vue
+++ b/frontend/src/components/ui/AppTooltip.vue
@@ -1,37 +1,59 @@
 <template>
   <div class="tooltip">
-    <slot></slot>
-    <span class="tooltiptext">{{ tooltipText }}</span>
+    <font-awesome-icon class="tooltip-icon" icon="question-circle" />
+    <span :class="tooltipTextClass"><slot></slot></span>
   </div>
 </template>
 
 <script>
 export default {
-  name: "AppTooltip",
+  name: 'AppTooltip',
   props: {
-    tooltipText: String,
+    mode: {
+      type: String,
+      default: 'normal',
+    },
+  },
+  computed: {
+    tooltipTextClass() {
+      console.log(this.mode)
+      return {
+        tooltiptext: true,
+        'tooltip-normal': this.mode === '' || this.mode === 'normal',
+        'tooltip-header': this.mode === 'header',
+      }
+    },
   },
 }
 </script>
 
 <style scoped>
+.tooltip .tooltiptext {
+  visibility: hidden;
+  opacity: 0.9;
+  text-align: left;
+  padding: 5px;
+  margin-left: 5px;
+  max-width: 500px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
 
-  .tooltip .tooltiptext {
-    visibility: hidden;
-    background-color: #38598A;
-    opacity: 0.90;
-    color: #fff;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px;
-    margin-left: 5px;
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+}
 
-    /* Position the tooltip */
-    position: absolute;
-    z-index: 1;
-  }
+.tooltip-normal {
+  background-color: #38598a;
+  color: #ffffff;
+}
 
-  .tooltip:hover .tooltiptext {
-    visibility: visible;
-  }
-</style>
\ No newline at end of file
+.tooltip-header {
+  background-color: #ffffff;
+  color: #000000;
+  font-weight: normal;
+}
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+</style>
diff --git a/frontend/src/components/ui/YesNoRadioButtonGroup.vue b/frontend/src/components/ui/YesNoRadioButtonGroup.vue
index 4a0716ad..9b397de8 100644
--- a/frontend/src/components/ui/YesNoRadioButtonGroup.vue
+++ b/frontend/src/components/ui/YesNoRadioButtonGroup.vue
@@ -1,5 +1,7 @@
 <template>
-  <AppRadioButtonGroup :e-model="eModel" :id="id" :label="label" :group="this.YES_NO_RADIO_BUTTON_GROUP" :tooltip="tooltip" :tooltipText="tooltipText" v-model="modelValue" />
+  <AppRadioButtonGroup :e-model="eModel" :id="id" :label="label" :group="this.YES_NO_RADIO_BUTTON_GROUP" v-model="modelValue">
+    <template v-slot:tooltip><slot name="tooltip"></slot></template>
+  </AppRadioButtonGroup>
 </template>
 
 <script>
@@ -15,8 +17,6 @@ export default {
     label: { default: 'Choose Yes or No', type: String },
     id: { default: 'yesNo', type: String },
     modelValue: String,
-    tooltip: Boolean,
-    tooltipText: String,
   },
   created() {
     this.YES_NO_RADIO_BUTTON_GROUP = [
diff --git a/frontend/src/views/eligibility/CheckEligibility.vue b/frontend/src/views/eligibility/CheckEligibility.vue
index 5e9a6566..ff413373 100644
--- a/frontend/src/views/eligibility/CheckEligibility.vue
+++ b/frontend/src/views/eligibility/CheckEligibility.vue
@@ -1,4 +1,14 @@
 <template>
+  <AppHelp>
+    <p>Use Check Eligibility to determine if a person is a beneficiary of the Medical Services Plan (MSP) on a particular date of service. heck Eligibility returns a "Yes" or "No" for the Personal Health Number (PHN) submitted.</p>
+    <ul>
+      <li>
+        A "Yes" response means that, when checked today, the person is eligible on the "Date to Check" date. The person could subsequently become ineligible for service on that date. If a fee-for-service claim is involved, you may wish to use the MSP Teleplan system or Claims IVR to verify
+        eligibility.
+      </li>
+      <li>If the response is "No", the screen will return additional information about why the coverage was terminated and instructions that should be provided to the individual. If the individual is subject to alternate billing (RCMP or Armed Forces), this information will also be displayed.</li>
+    </ul>
+  </AppHelp>
   <div>
     <form @submit.prevent="submitForm">
       <AppRow>
@@ -48,6 +58,7 @@
 
 <script>
 import AppCard from '../../components/ui/AppCard.vue'
+import AppHelp from '../../components/ui/AppHelp.vue'
 import EligibilityService from '../../services/EligibilityService'
 import useVuelidate from '@vuelidate/core'
 import { validatePHN, VALIDATE_PHN_MESSAGE } from '../../util/validators'
@@ -60,6 +71,7 @@ export default {
   name: 'CheckEligibility',
   components: {
     AppCard,
+    AppHelp,
   },
   setup() {
     return {
@@ -83,6 +95,7 @@ export default {
         status: '',
         message: '',
       },
+      showModal: false,
     }
   },
   computed: {
@@ -152,3 +165,13 @@ export default {
   },
 }
 </script>
+<style scoped>
+ul {
+  list-style: disc;
+  margin-left: 20px;
+}
+
+.show-modal {
+  float: right;
+}
+</style>
diff --git a/frontend/src/views/eligibility/CoverageStatusCheck.vue b/frontend/src/views/eligibility/CoverageStatusCheck.vue
index 78db0f4b..ba721550 100644
--- a/frontend/src/views/eligibility/CoverageStatusCheck.vue
+++ b/frontend/src/views/eligibility/CoverageStatusCheck.vue
@@ -3,7 +3,9 @@
     <form @submit.prevent="submitForm">
       <AppRow>
         <AppCol class="col3">
-          <AppInput :e-model="v$.phn" id="phn" label="PHN" type="text" v-model.trim="phn" />
+          <AppInput :e-model="v$.phn" id="phn" label="PHN" tooltip type="text" v-model.trim="phn">
+            <template v-slot:tooltip>Enter the individual’s 10 digit PHN. PHN is a mandatory field. If you leave it blank or enter invalid characters, an edit error message box will be displayed on the input screen.</template>
+          </AppInput>
         </AppCol>
       </AppRow>
       <AppRow>
@@ -13,12 +15,20 @@
       </AppRow>
       <AppRow>
         <AppCol class="col3">
-          <AppDateInput :e-model="v$.dateOfService" id="dateOfService" label="Date Of Service" v-model="dateOfService" />
+          <AppDateInput :e-model="v$.dateOfService" id="dateOfService" label="Date Of Service" v-model="dateOfService">
+            <template v-slot:tooltip>The Date of Service defaults on the screen to today's date. The year (CCYY), month (MM) and day (DD) can be overridden. If you override the date with another date, it cannot be greater than today's date or more than 18 months in the past.</template>
+          </AppDateInput>
         </AppCol>
       </AppRow>
       <AppRow>
         <AppCol class="col4">
           <h3>Patient Status Request</h3>
+          <AppTooltip>
+            Subsidy Insured Service: the screen will display whether MSP pays for Subsidy Insured Services for this PHN, including the number of services last paid to date, whether the beneficiary must pay, the number of paid services by calendar year. This information will be of interest to
+            supplementary benefits providers.<br />
+            Last Eye Exam: the screen will return the date of the last paid eye exam for this PHN within the last 24 months. This information will be of interest to those performing eye exams. Patient Restriction:, if the patient has been restricted to a single general practitioner, the MSP Coverage
+            Status Check will advise you to review the MSP Bulletin."
+          </AppTooltip>
           <p>Select by clicking one or more boxes</p>
         </AppCol>
         <AppCol>
@@ -95,6 +105,7 @@
 <script>
 import AppCard from '../../components/ui/AppCard.vue'
 import AppCheckbox from '../../components/ui/AppCheckbox.vue'
+import AppTooltip from '../../components/ui/AppTooltip.vue'
 import EligibilityService from '../../services/EligibilityService'
 import useVuelidate from '@vuelidate/core'
 import { validateDOB, validatePHN, VALIDATE_DOB_MESSAGE, VALIDATE_PHN_MESSAGE } from '../../util/validators'
@@ -106,7 +117,7 @@ import { useAlertStore } from '../../stores/alert.js'
 
 export default {
   name: 'CoverageStatusCheck',
-  components: { AppCard, AppCheckbox },
+  components: { AppCard, AppCheckbox, AppTooltip },
   setup() {
     return {
       alertStore: useAlertStore(),
diff --git a/frontend/src/views/eligibility/PhnInquiry.vue b/frontend/src/views/eligibility/PhnInquiry.vue
index b8d3c66d..149c6e73 100644
--- a/frontend/src/views/eligibility/PhnInquiry.vue
+++ b/frontend/src/views/eligibility/PhnInquiry.vue
@@ -1,4 +1,9 @@
 <template>
+  <AppInstructions
+    >Use PHN Inquiry to verify an individual's name, birthdate, gender, and to check their eligibility for Medical Services Plan (MSP) coverage. Access to PHN Inquiry is available to authorized users within both EMPLOYER organizations and HEALTH AUTHORITIES. Please look for notes of special interest
+    to either EMPLOYERS or HEALTH AUTHORITIES.<br />
+    HEALTH AUTHORITIES and HEALTH CARE PROVIDERS: If "N" response is received, use MSP Coverage Status Check to check eligibility.
+  </AppInstructions>
   <div>
     <p>Enter 1 or more PHNs</p>
     <form @submit.prevent="submitForm">
@@ -54,12 +59,46 @@
     <AppSimpleTable id="resultsTable">
       <thead>
         <tr>
-          <th>PHN</th>
+          <th>
+            <div>PHN</div>
+            <AppTooltip mode="header">
+              Each PHN is processed individually.<br />
+              Unsuccesfully processed PHNs appear with an error message, at the top of the response screen.<br />
+              Successfully processed PHNs are displayed in the order they were entered. Each has two lines, given name, birthdate, gender, ELIGIBIILTY status, and STUDENT status if applicable.
+            </AppTooltip>
+          </th>
           <th>Name</th>
           <th>Date of Birth</th>
           <th>Gender</th>
-          <th>Eligible</th>
-          <th>Student</th>
+          <th>
+            <div>Eligible</div>
+            <AppTooltip mode="header">
+              <p>"Eligible = Y" means that when checked today, the person is eligible for MSP.</p>
+              <ul>
+                <li>EMPLOYERS - if Y and this is a new employee or dependent, you can add them to your group account using the R30 - Add Employee or R31 - Add Employee Dependent.</li>
+                <li>HEALTH AUTHORITIES - although eligible today, a person could subsequently become ineligible for service on today's date. If a fee-for-service claim is involved, you may wish to use the MSP Teleplan system or Claims IVR to verify eligibility.</li>
+              </ul>
+              <br />
+              <p>
+                "Eligible = N" means the person was enrolled in MSP in the past, but is NOT eligible for publicly funded health care as of today's date. This person may have moved away from BC, opted out of MSP, joined the Armed Forces or RCMP, or may hold expired temporary immigration documents.
+                Any ‘N’ you receive must also be confirmed using the E45 MSP Coverage Status Check business service.
+              </p>
+              <ul>
+                <li>EMPLOYERS - if this person is a new employee or dependent who has moved back to BC, they will have to re-enroll. An MSP application or change form, with copies of foundation documents, must be submitted. Otherwise, contact the Help Desk.</li>
+                <li>HEALTH AUTHORITIES - if you need to know WHY a client is not eligible, use the E45 - Check Eligibility business service.</li>
+              </ul>
+            </AppTooltip>
+          </th>
+
+          <th>
+            <div>Student</div>
+            <AppTooltip mode="header">
+              <p>Student status, whether "Yes" or "No" does not affect eligibility for publicly funded health care.</p>
+              <ul>
+                <li>EMPLOYERS - you need to know student status if you are planning to add a dependent aged 19 to 24 to an employee's coverage.</li>
+              </ul>
+            </AppTooltip>
+          </th>
         </tr>
       </thead>
       <tbody>
@@ -72,6 +111,8 @@
 </template>
 
 <script>
+import AppInstructions from '../../components/ui/AppInstructions.vue'
+import AppTooltip from '../../components/ui/AppTooltip.vue'
 import AppSimpleTable from '../../components/ui/AppSimpleTable.vue'
 import EligibilityService from '../../services/EligibilityService'
 import PhnInquiryBeneficiary from '../../components/eligibility/PhnInquiryBeneficiary.vue'
@@ -83,7 +124,9 @@ import { useAlertStore } from '../../stores/alert.js'
 export default {
   name: 'PhnInquiry',
   components: {
+    AppInstructions,
     AppSimpleTable,
+    AppTooltip,
     PhnInquiryBeneficiary,
   },
   setup() {
@@ -205,3 +248,12 @@ export default {
   },
 }
 </script>
+<style scoped>
+th div {
+  float: left;
+}
+ul {
+  list-style: disc;
+  margin-left: 20px;
+}
+</style>
diff --git a/frontend/src/views/groupmember/AddDependent.vue b/frontend/src/views/groupmember/AddDependent.vue
index 880e5ffe..3a9b9c79 100644
--- a/frontend/src/views/groupmember/AddDependent.vue
+++ b/frontend/src/views/groupmember/AddDependent.vue
@@ -6,7 +6,9 @@
           <AppInput :e-model="v$.groupNumber" id="groupNumber" label="Group Number" type="text" v-model.trim="groupNumber" />
         </AppCol>
         <AppCol class="col4">
-          <AppDateInput :e-model="v$.coverageEffectiveDate" id="coverageEffectiveDate" label="Coverage Effective Date" tooltip tooltipText="Day always defaults to 1st of month" monthPicker inputDateFormat="yyyyMM" placeholder="YYYYMM" v-model="coverageEffectiveDate" />
+          <AppDateInput :e-model="v$.coverageEffectiveDate" id="coverageEffectiveDate" label="Coverage Effective Date" monthPicker inputDateFormat="yyyyMM" placeholder="YYYYMM" v-model="coverageEffectiveDate">
+            <template v-slot:tooltip>Day always defaults to 1st of month</template>
+          </AppDateInput>
         </AppCol>
       </AppRow>
       <AppRow>
@@ -24,7 +26,9 @@
       </AppRow>
       <AppRow>
         <AppCol class="col6">
-          <YesNoRadioButtonGroup :e-model="v$.isStudent" id="isStudent" label="Is this Dependent attending a Canadian Educational Institution?" tooltip tooltipText="Click either Yes or No" v-model="isStudent" />
+          <YesNoRadioButtonGroup :e-model="v$.isStudent" id="isStudent" label="Is this Dependent attending a Canadian Educational Institution?" v-model="isStudent">
+            <template v-slot:tooltip> Click either Yes or No </template>
+          </YesNoRadioButtonGroup>
         </AppCol>
       </AppRow>
       <AppRow>
diff --git a/frontend/src/views/groupmember/AddGroupMember.vue b/frontend/src/views/groupmember/AddGroupMember.vue
index c8e7de0a..c82d84c2 100644
--- a/frontend/src/views/groupmember/AddGroupMember.vue
+++ b/frontend/src/views/groupmember/AddGroupMember.vue
@@ -6,7 +6,9 @@
           <AppInput :e-model="v$.groupNumber" id="groupNumber" label="Group Number" type="text" v-model.trim="groupNumber" />
         </AppCol>
         <AppCol class="col3">
-          <AppDateInput :e-model="v$.coverageEffectiveDate" id="coverageEffectiveDate" label="Coverage Effective Date" tooltip tooltipText="Date always defaults to first day of the month" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="coverageEffectiveDate" />
+          <AppDateInput :e-model="v$.coverageEffectiveDate" id="coverageEffectiveDate" label="Coverage Effective Date" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="coverageEffectiveDate">
+            <template v-slot:tooltip>Date always defaults to first day of the month</template>
+          </AppDateInput>
         </AppCol>
       </AppRow>
       <AppRow>
diff --git a/frontend/src/views/groupmember/CancelDependent.vue b/frontend/src/views/groupmember/CancelDependent.vue
index 717ff898..6c18db8e 100644
--- a/frontend/src/views/groupmember/CancelDependent.vue
+++ b/frontend/src/views/groupmember/CancelDependent.vue
@@ -23,7 +23,9 @@
       </AppRow>
       <AppRow>
         <AppCol class="col3">
-          <AppDateInput :e-model="v$.cancelDate" id="cancelDate" label="Coverage Cancel Date" tooltip tooltipText="Date always defaults to last day of the month" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="cancelDate" />
+          <AppDateInput :e-model="v$.cancelDate" id="cancelDate" label="Coverage Cancel Date" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="cancelDate">
+            <template v-slot:tooltip> Date always defaults to last day of the month </template>
+          </AppDateInput>
         </AppCol>
       </AppRow>
       <AppRow>
diff --git a/frontend/src/views/groupmember/CancelGroupMember.vue b/frontend/src/views/groupmember/CancelGroupMember.vue
index caa22133..2979f7e8 100644
--- a/frontend/src/views/groupmember/CancelGroupMember.vue
+++ b/frontend/src/views/groupmember/CancelGroupMember.vue
@@ -13,7 +13,9 @@
       </AppRow>
       <AppRow>
         <AppCol class="col3">
-          <AppDateInput :e-model="v$.cancelDate" id="cancelDate" label="Coverage Cancel Date" tooltip tooltipText="Date always defaults to last day of the month" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="cancelDate" />
+          <AppDateInput :e-model="v$.cancelDate" id="cancelDate" label="Coverage Cancel Date" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="cancelDate">
+            <template v-slot:tooltip> Date always defaults to last day of the month </template>
+          </AppDateInput>
         </AppCol>
       </AppRow>
       <AppRow>

From b96e2202c702d07f06d69a3b838ef1351deab3f0 Mon Sep 17 00:00:00 2001
From: weskubo-cgi <wes.kubo@cgi.com>
Date: Tue, 17 May 2022 13:27:48 -0700
Subject: [PATCH 2/8] Minor updates.

---
 frontend/src/assets/css/main.css              | 82 +++++++++----------
 frontend/src/components/ui/AppTooltip.vue     |  3 +-
 .../views/eligibility/CoverageStatusCheck.vue | 18 ++--
 3 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/frontend/src/assets/css/main.css b/frontend/src/assets/css/main.css
index f646be7c..5f717c0c 100644
--- a/frontend/src/assets/css/main.css
+++ b/frontend/src/assets/css/main.css
@@ -1,77 +1,77 @@
 /* Body */
 body {
-    background-color: #F1F1F1;
-    padding-bottom: 20px;
+  background-color: #f1f1f1;
+  padding-bottom: 20px;
 }
 
 hr {
-    background-color: #606060;
-    border: 1px solid #606060;
+  background-color: #606060;
+  border: 1px solid #606060;
 }
 
 /* Main */
 main {
-    max-width: 1320px;
-    min-width: 1100px;
-    width: 100%;
-    min-height: calc(100vh - 168px);
-    margin: 0 auto;
-    padding: 20px 60px 60px 60px;
-    background-color: #FFFFFF;
+  max-width: 1320px;
+  min-width: 1100px;
+  width: 100%;
+  min-height: calc(100vh - 168px);
+  margin: 0 auto;
+  padding: 20px 60px 60px 60px;
+  background-color: #ffffff;
 }
 main .content {
-    padding: 0;
-    font-size: 1rem;
+  padding: 0;
+  font-size: 1rem;
 }
 main .content:after {
-    content: "";
-    display: table;
-    clear: both;
+  content: '';
+  display: table;
+  clear: both;
 }
 
 /* Sub groups */
 .subgroup {
-/*.v-card.subgroup*/ 
-    padding: 20px; margin:0px -20px 20px -20px; max-width: 110%;
+  padding: 20px;
+  margin: 0px -20px 20px -20px;
+  max-width: 110%;
 }
 .subgroup h2 {
-    font-weight: 100;
-    color: #999;
-    font-size: 24px;
-    line-height: 30px;
-    text-transform: uppercase;
-    margin-top: 0;
-    margin-bottom: 20px;
+  font-weight: 100;
+  color: #999;
+  font-size: 24px;
+  line-height: 30px;
+  text-transform: uppercase;
+  margin-top: 0;
+  margin-bottom: 20px;
 }
 
-/* Input */ 
+/* Input */
 input {
-    display: block;
-    width: 100%;
+  display: block;
+  width: 100%;
 }
 
 .checkbox-group .v-input--selection-controls {
-    margin-top: 8px;
+  margin-top: 8px;
 }
 
-/* Vuetify Components */
-/*.v-icon.v-icon {
-    vertical-align: baseline;
-}
-*/
-
 /* tables */
 .theme--light.v-data-table.base-table thead tr:last-child th {
-    border-top: 2px solid #003366;
-    border-bottom: 2px solid #003366;
+  border-top: 2px solid #003366;
+  border-bottom: 2px solid #003366;
 }
 
-.v-data-table td, .v-data-table th {
-    padding: 0 16px;
+.v-data-table td,
+.v-data-table th {
+  padding: 0 16px;
 }
 .select-table tr {
-    cursor: pointer;
+  cursor: pointer;
 }
 .select-table tr.v-data-table__empty-wrapper {
-    cursor: default;
+  cursor: default;
+}
+
+.flex {
+  display: flex;
 }
diff --git a/frontend/src/components/ui/AppTooltip.vue b/frontend/src/components/ui/AppTooltip.vue
index 91252542..c7318e9a 100644
--- a/frontend/src/components/ui/AppTooltip.vue
+++ b/frontend/src/components/ui/AppTooltip.vue
@@ -30,7 +30,6 @@ export default {
 <style scoped>
 .tooltip .tooltiptext {
   visibility: hidden;
-  opacity: 0.9;
   text-align: left;
   padding: 5px;
   margin-left: 5px;
@@ -46,12 +45,14 @@ export default {
 .tooltip-normal {
   background-color: #38598a;
   color: #ffffff;
+  opacity: 0.9;
 }
 
 .tooltip-header {
   background-color: #ffffff;
   color: #000000;
   font-weight: normal;
+  opacity: 1;
 }
 .tooltip:hover .tooltiptext {
   visibility: visible;
diff --git a/frontend/src/views/eligibility/CoverageStatusCheck.vue b/frontend/src/views/eligibility/CoverageStatusCheck.vue
index ba721550..0c982adf 100644
--- a/frontend/src/views/eligibility/CoverageStatusCheck.vue
+++ b/frontend/src/views/eligibility/CoverageStatusCheck.vue
@@ -21,14 +21,16 @@
         </AppCol>
       </AppRow>
       <AppRow>
-        <AppCol class="col4">
-          <h3>Patient Status Request</h3>
-          <AppTooltip>
-            Subsidy Insured Service: the screen will display whether MSP pays for Subsidy Insured Services for this PHN, including the number of services last paid to date, whether the beneficiary must pay, the number of paid services by calendar year. This information will be of interest to
-            supplementary benefits providers.<br />
-            Last Eye Exam: the screen will return the date of the last paid eye exam for this PHN within the last 24 months. This information will be of interest to those performing eye exams. Patient Restriction:, if the patient has been restricted to a single general practitioner, the MSP Coverage
-            Status Check will advise you to review the MSP Bulletin."
-          </AppTooltip>
+        <AppCol class="col4 flex">
+          <div class="flex">
+            <h3>Patient Status Request</h3>
+            <AppTooltip>
+              Subsidy Insured Service: the screen will display whether MSP pays for Subsidy Insured Services for this PHN, including the number of services last paid to date, whether the beneficiary must pay, the number of paid services by calendar year. This information will be of interest to
+              supplementary benefits providers.<br />
+              Last Eye Exam: the screen will return the date of the last paid eye exam for this PHN within the last 24 months. This information will be of interest to those performing eye exams. Patient Restriction:, if the patient has been restricted to a single general practitioner, the MSP
+              Coverage Status Check will advise you to review the MSP Bulletin."
+            </AppTooltip>
+          </div>
           <p>Select by clicking one or more boxes</p>
         </AppCol>
         <AppCol>

From f4531b5fd0d56d1c86ee44b19b3ed3089567a35e Mon Sep 17 00:00:00 2001
From: weskubo-cgi <wes.kubo@cgi.com>
Date: Wed, 18 May 2022 11:52:28 -0700
Subject: [PATCH 3/8] Added draggable functionality to modal. Added max
 height/scrollbra to modal. Finalized PHN Inquiry.

---
 frontend/package.json                         |  1 +
 frontend/src/assets/css/main.css              |  4 ++
 frontend/src/components/ui/AppModal.vue       |  7 +++-
 frontend/src/components/ui/AppTooltip.vue     |  9 +++--
 frontend/src/main.js                          |  3 ++
 frontend/src/views/eligibility/PhnInquiry.vue | 39 ++++++++-----------
 6 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 206696fc..6daeda08 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@bcgov/bc-sans": "^1.0.1",
+    "@braks/revue-draggable": "^0.4.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "prerelease",
diff --git a/frontend/src/assets/css/main.css b/frontend/src/assets/css/main.css
index 5f717c0c..08a9c0f3 100644
--- a/frontend/src/assets/css/main.css
+++ b/frontend/src/assets/css/main.css
@@ -9,6 +9,10 @@ hr {
   border: 1px solid #606060;
 }
 
+th div {
+  float: left;
+}
+
 /* Main */
 main {
   max-width: 1320px;
diff --git a/frontend/src/components/ui/AppModal.vue b/frontend/src/components/ui/AppModal.vue
index e77223fc..6f014559 100644
--- a/frontend/src/components/ui/AppModal.vue
+++ b/frontend/src/components/ui/AppModal.vue
@@ -1,8 +1,8 @@
 <template>
   <Transition name="modal">
-    <div v-if="show" class="modal-mask">
+    <div v-if="show" class="modal-mask" @keydown.esc="$emit('close')" tabindex="0">
       <div class="modal-wrapper">
-        <div class="modal-container">
+        <div class="modal-container" v-draggable="">
           <div class="modal-header">
             <slot name="header"></slot>
           </div>
@@ -55,6 +55,9 @@ export default {
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
   transition: all 0.3s ease;
+  cursor: grab;
+  max-height: 600px;
+  overflow: auto;
 }
 
 .modal-header h3 {
diff --git a/frontend/src/components/ui/AppTooltip.vue b/frontend/src/components/ui/AppTooltip.vue
index c7318e9a..158c81df 100644
--- a/frontend/src/components/ui/AppTooltip.vue
+++ b/frontend/src/components/ui/AppTooltip.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tooltip">
     <font-awesome-icon class="tooltip-icon" icon="question-circle" />
-    <span :class="tooltipTextClass"><slot></slot></span>
+    <div :class="tooltipTextClass"><slot></slot></div>
   </div>
 </template>
 
@@ -16,7 +16,6 @@ export default {
   },
   computed: {
     tooltipTextClass() {
-      console.log(this.mode)
       return {
         tooltiptext: true,
         'tooltip-normal': this.mode === '' || this.mode === 'normal',
@@ -41,7 +40,6 @@ export default {
   position: absolute;
   z-index: 1;
 }
-
 .tooltip-normal {
   background-color: #38598a;
   color: #ffffff;
@@ -57,4 +55,9 @@ export default {
 .tooltip:hover .tooltiptext {
   visibility: visible;
 }
+
+:slotted(li) {
+  list-style: disc;
+  margin-left: 20px;
+}
 </style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 2410cb77..b88a08fc 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,6 +3,7 @@ import '@bcgov/bc-sans/css/BCSans.css'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
+import { DraggablePlugin } from '@braks/revue-draggable'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faBullhorn, faCheckCircle, faChevronDown, faExclamationCircle, faExclamationTriangle, faExternalLinkAlt, faInfoCircle, faQuestionCircle, faSpinner, faTimes, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -61,6 +62,8 @@ function initApp(permissions) {
   const router = createRouter(app)
   app.use(router)
 
+  app.use(DraggablePlugin)
+
   app.config.globalProperties.$keycloak = keycloak
 
   library.add(faBullhorn)
diff --git a/frontend/src/views/eligibility/PhnInquiry.vue b/frontend/src/views/eligibility/PhnInquiry.vue
index 149c6e73..3b6321f2 100644
--- a/frontend/src/views/eligibility/PhnInquiry.vue
+++ b/frontend/src/views/eligibility/PhnInquiry.vue
@@ -1,9 +1,11 @@
 <template>
-  <AppInstructions
-    >Use PHN Inquiry to verify an individual's name, birthdate, gender, and to check their eligibility for Medical Services Plan (MSP) coverage. Access to PHN Inquiry is available to authorized users within both EMPLOYER organizations and HEALTH AUTHORITIES. Please look for notes of special interest
-    to either EMPLOYERS or HEALTH AUTHORITIES.<br />
-    HEALTH AUTHORITIES and HEALTH CARE PROVIDERS: If "N" response is received, use MSP Coverage Status Check to check eligibility.
-  </AppInstructions>
+  <AppHelp
+    ><p>
+      Use PHN Inquiry to verify an individual's name, birthdate, gender, and to check their eligibility for Medical Services Plan (MSP) coverage. Access to PHN Inquiry is available to authorized users within both EMPLOYER organizations and HEALTH AUTHORITIES. Please look for notes of special
+      interest to either EMPLOYERS or HEALTH AUTHORITIES.
+    </p>
+    <p>HEALTH AUTHORITIES and HEALTH CARE PROVIDERS: If "N" response is received, use MSP Coverage Status Check to check eligibility.</p>
+  </AppHelp>
   <div>
     <p>Enter 1 or more PHNs</p>
     <form @submit.prevent="submitForm">
@@ -62,9 +64,11 @@
           <th>
             <div>PHN</div>
             <AppTooltip mode="header">
-              Each PHN is processed individually.<br />
-              Unsuccesfully processed PHNs appear with an error message, at the top of the response screen.<br />
-              Successfully processed PHNs are displayed in the order they were entered. Each has two lines, given name, birthdate, gender, ELIGIBIILTY status, and STUDENT status if applicable.
+              <p>
+                Each PHN is processed individually.<br />
+                Unsuccesfully processed PHNs appear with an error message, at the top of the response screen.<br />
+                Successfully processed PHNs are displayed in the order they were entered. Each has two lines, given name, birthdate, gender, ELIGIBILITY status, and STUDENT status if applicable.
+              </p>
             </AppTooltip>
           </th>
           <th>Name</th>
@@ -75,17 +79,17 @@
             <AppTooltip mode="header">
               <p>"Eligible = Y" means that when checked today, the person is eligible for MSP.</p>
               <ul>
-                <li>EMPLOYERS - if Y and this is a new employee or dependent, you can add them to your group account using the R30 - Add Employee or R31 - Add Employee Dependent.</li>
+                <li>EMPLOYERS - if Y and this is a new employee or dependent, you can add them to your group account using the Add Group Member or Add Dependent.</li>
                 <li>HEALTH AUTHORITIES - although eligible today, a person could subsequently become ineligible for service on today's date. If a fee-for-service claim is involved, you may wish to use the MSP Teleplan system or Claims IVR to verify eligibility.</li>
               </ul>
               <br />
               <p>
                 "Eligible = N" means the person was enrolled in MSP in the past, but is NOT eligible for publicly funded health care as of today's date. This person may have moved away from BC, opted out of MSP, joined the Armed Forces or RCMP, or may hold expired temporary immigration documents.
-                Any ‘N’ you receive must also be confirmed using the E45 MSP Coverage Status Check business service.
+                Any ‘N’ you receive must also be confirmed using the MSP Coverage Status Check business service.
               </p>
               <ul>
                 <li>EMPLOYERS - if this person is a new employee or dependent who has moved back to BC, they will have to re-enroll. An MSP application or change form, with copies of foundation documents, must be submitted. Otherwise, contact the Help Desk.</li>
-                <li>HEALTH AUTHORITIES - if you need to know WHY a client is not eligible, use the E45 - Check Eligibility business service.</li>
+                <li>HEALTH AUTHORITIES - if you need to know WHY a client is not eligible, use the Check Eligibility business service.</li>
               </ul>
             </AppTooltip>
           </th>
@@ -111,7 +115,7 @@
 </template>
 
 <script>
-import AppInstructions from '../../components/ui/AppInstructions.vue'
+import AppHelp from '../../components/ui/AppHelp.vue'
 import AppTooltip from '../../components/ui/AppTooltip.vue'
 import AppSimpleTable from '../../components/ui/AppSimpleTable.vue'
 import EligibilityService from '../../services/EligibilityService'
@@ -124,7 +128,7 @@ import { useAlertStore } from '../../stores/alert.js'
 export default {
   name: 'PhnInquiry',
   components: {
-    AppInstructions,
+    AppHelp,
     AppSimpleTable,
     AppTooltip,
     PhnInquiryBeneficiary,
@@ -248,12 +252,3 @@ export default {
   },
 }
 </script>
-<style scoped>
-th div {
-  float: left;
-}
-ul {
-  list-style: disc;
-  margin-left: 20px;
-}
-</style>

From e8e79112d039f77ebffe593b6193aa083bb477fc Mon Sep 17 00:00:00 2001
From: weskubo-cgi <wes.kubo@cgi.com>
Date: Wed, 18 May 2022 12:13:05 -0700
Subject: [PATCH 4/8] Updated syntax.

---
 frontend/src/components/ui/AppDateInput.vue        | 2 +-
 frontend/src/components/ui/AppInput.vue            | 2 +-
 frontend/src/components/ui/AppRadioButtonGroup.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ui/AppDateInput.vue b/frontend/src/components/ui/AppDateInput.vue
index 97b2336a..ea2e9160 100644
--- a/frontend/src/components/ui/AppDateInput.vue
+++ b/frontend/src/components/ui/AppDateInput.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="text_label">
     <label>{{ label }}</label>
-    <AppTooltip v-if="this.$slots.tooltip"><slot name="tooltip"></slot></AppTooltip>
+    <AppTooltip v-if="$slots.tooltip"><slot name="tooltip"></slot></AppTooltip>
   </div>
   <div v-bind="$attrs">
     <Datepicker :autoApply="true" :class="inputClass" :enableTimePicker="false" :format="inputDateFormat" :placeholder="placeholder" :text-input="true" :monthPicker="$attrs.monthPicker" :uid="$attrs.id" v-model="value" />
diff --git a/frontend/src/components/ui/AppInput.vue b/frontend/src/components/ui/AppInput.vue
index e51685ba..4025cf3f 100644
--- a/frontend/src/components/ui/AppInput.vue
+++ b/frontend/src/components/ui/AppInput.vue
@@ -5,7 +5,7 @@ import AppInputError from './AppInputError.vue'
 <template>
   <div class="text_label">
     <label>{{ label }}</label>
-    <AppTooltip v-if="this.$slots.tooltip">
+    <AppTooltip v-if="$slots.tooltip">
       <slot name="tooltip"></slot>
     </AppTooltip>
   </div>
diff --git a/frontend/src/components/ui/AppRadioButtonGroup.vue b/frontend/src/components/ui/AppRadioButtonGroup.vue
index d456328e..6c4842b6 100644
--- a/frontend/src/components/ui/AppRadioButtonGroup.vue
+++ b/frontend/src/components/ui/AppRadioButtonGroup.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="text_label">
       <label>{{ label }}</label>
-      <AppTooltip v-if="this.$slots.tooltip">
+      <AppTooltip v-if="$slots.tooltip">
         <slot name="tooltip"></slot>
       </AppTooltip>
     </div>

From 70124166aa7790e21d93a3213577d50609acd4e5 Mon Sep 17 00:00:00 2001
From: weskubo-cgi <wes.kubo@cgi.com>
Date: Wed, 18 May 2022 15:22:27 -0700
Subject: [PATCH 5/8] Fixed typo and cleaned up styles.

---
 frontend/src/views/eligibility/CheckEligibility.vue | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/frontend/src/views/eligibility/CheckEligibility.vue b/frontend/src/views/eligibility/CheckEligibility.vue
index ff413373..35ae190e 100644
--- a/frontend/src/views/eligibility/CheckEligibility.vue
+++ b/frontend/src/views/eligibility/CheckEligibility.vue
@@ -1,6 +1,6 @@
 <template>
   <AppHelp>
-    <p>Use Check Eligibility to determine if a person is a beneficiary of the Medical Services Plan (MSP) on a particular date of service. heck Eligibility returns a "Yes" or "No" for the Personal Health Number (PHN) submitted.</p>
+    <p>Use Check Eligibility to determine if a person is a beneficiary of the Medical Services Plan (MSP) on a particular date of service. Check Eligibility returns a "Yes" or "No" for the Personal Health Number (PHN) submitted.</p>
     <ul>
       <li>
         A "Yes" response means that, when checked today, the person is eligible on the "Date to Check" date. The person could subsequently become ineligible for service on that date. If a fee-for-service claim is involved, you may wish to use the MSP Teleplan system or Claims IVR to verify
@@ -165,13 +165,3 @@ export default {
   },
 }
 </script>
-<style scoped>
-ul {
-  list-style: disc;
-  margin-left: 20px;
-}
-
-.show-modal {
-  float: right;
-}
-</style>

From 2828226eb15e35ccd61a9517a9a7bd655623f623 Mon Sep 17 00:00:00 2001
From: weskubo-cgi <wes.kubo@cgi.com>
Date: Thu, 19 May 2022 10:28:46 -0700
Subject: [PATCH 6/8] Completed Coverage Status Check. Styling fixes.

---
 .../src/components/ui/AppInstructions.vue     | 91 -------------------
 frontend/src/components/ui/AppOutput.vue      | 35 +++----
 frontend/src/components/ui/AppTooltip.vue     |  9 ++
 .../views/eligibility/CoverageStatusCheck.vue | 33 +++++--
 4 files changed, 54 insertions(+), 114 deletions(-)
 delete mode 100644 frontend/src/components/ui/AppInstructions.vue

diff --git a/frontend/src/components/ui/AppInstructions.vue b/frontend/src/components/ui/AppInstructions.vue
deleted file mode 100644
index 47146e7f..00000000
--- a/frontend/src/components/ui/AppInstructions.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <div :class="instructionsClass">
-    <a href="#" @click="handleOnClick()"><span class="instruction-text">Instructions</span></a>
-    <!-- <Transition> -->
-    <div class="showHide" v-if="expanded">
-      <slot></slot>
-    </div>
-    <!-- </Transition> -->
-  </div>
-</template>
-<script>
-import { Transition } from 'vue'
-
-export default {
-  name: 'AppInstructions',
-  components: {},
-  data() {
-    return {
-      expanded: false,
-    }
-  },
-  computed: {
-    instructionsClass() {
-      return {
-        instructions: true,
-        show: this.expanded,
-      }
-    },
-  },
-  methods: {
-    handleOnClick() {
-      this.expanded = !this.expanded
-    },
-  },
-}
-</script>
-<style scoped>
-a {
-  color: #1a5a96;
-  outline: none;
-  text-decoration: none;
-}
-a:hover {
-  text-decoration: underline;
-}
-div.instructions {
-  background: #ffffff;
-  border: 1px solid #535d6e;
-  border-radius: 6px;
-  -moz-border-radius: 5px;
-  -webkit-borderradius: 5px;
-  padding: 11px 10px 8px;
-  width: 11%;
-  text-align: center;
-  margin-bottom: 10px;
-  float: right;
-}
-div.instructions.show {
-  width: 100%;
-  text-align: right;
-}
-.instruction-text {
-  font-size: 1.2em;
-  color: #494949;
-}
-
-/* .absolute-right {
-  position: absolute;
-  right: 55px;
-} */
-.show {
-}
-.showHide {
-  padding-top: 10px;
-  text-align: left;
-  display: block;
-}
-
-.v-enter-active {
-  transition: opacity 0.5s ease;
-}
-.v-leave-active {
-}
-
-.v-enter-from {
-  opacity: 0;
-}
-.v-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/frontend/src/components/ui/AppOutput.vue b/frontend/src/components/ui/AppOutput.vue
index e610c8e9..57e6c307 100644
--- a/frontend/src/components/ui/AppOutput.vue
+++ b/frontend/src/components/ui/AppOutput.vue
@@ -1,26 +1,27 @@
 <template>
-
   <div class="text_label">
-    <label>{{label}}</label>
+    <label>{{ label }}</label>
+    <AppTooltip v-if="$slots.tooltip">
+      <slot name="tooltip"></slot>
+    </AppTooltip>
   </div>
-  <span>{{value}}</span>
-  
+  <span>{{ value }}</span>
 </template>
 
 <script>
-  export default {
-    name: 'AppOutput',
-    props: {
-      label: String,
-      value: String,
-    },
-  }
+import AppTooltip from './AppTooltip.vue'
+export default {
+  name: 'AppOutput',
+  components: { AppTooltip },
+  props: {
+    label: String,
+    value: String,
+  },
+}
 </script>
 
 <style scoped>
-
-  .text_label {
-    display: flex;
-  }
-
-</style>
\ No newline at end of file
+.text_label {
+  display: flex;
+}
+</style>
diff --git a/frontend/src/components/ui/AppTooltip.vue b/frontend/src/components/ui/AppTooltip.vue
index 158c81df..bc999fc6 100644
--- a/frontend/src/components/ui/AppTooltip.vue
+++ b/frontend/src/components/ui/AppTooltip.vue
@@ -46,12 +46,21 @@ export default {
   opacity: 0.9;
 }
 
+:slotted(.tooltip-normal p) {
+  color: #ffffff;
+}
+
 .tooltip-header {
   background-color: #ffffff;
   color: #000000;
   font-weight: normal;
   opacity: 1;
 }
+
+:slotted(.tooltip-header p) {
+  color: #000000;
+}
+
 .tooltip:hover .tooltiptext {
   visibility: visible;
 }
diff --git a/frontend/src/views/eligibility/CoverageStatusCheck.vue b/frontend/src/views/eligibility/CoverageStatusCheck.vue
index 0c982adf..95f1a505 100644
--- a/frontend/src/views/eligibility/CoverageStatusCheck.vue
+++ b/frontend/src/views/eligibility/CoverageStatusCheck.vue
@@ -1,4 +1,13 @@
 <template>
+  <AppHelp
+    ><p>MSP Direct Coverage Status Check provides the same functionality as the Medical Services Plan (MSP) Teleplan system and Claims IVR.</p>
+    <p>Use the MSP Coverage Status Check to check if a person is eligible to have their claim for a health service paid by the MSP. The MSP Coverage Status Check returns a "YES" or "NO" answer for the Personal Health Number (PHN) submitted</p>
+    <p>As well as checking eligibility, you can use the MSP Coverage Status Check to submit one or more requests (Patient Status answers are only returned if the person is eligible "YES" eligibility response)</p>
+    <p>
+      Edit error messages appear on the input screen and tell you what fields need correcting. These will be mandatory fields that have been left blank or fields that have been completed with invalid data. Make the necessary correction(s) on the input screen and click Submit to resubmit the business
+      service.
+    </p></AppHelp
+  >
   <div>
     <form @submit.prevent="submitForm">
       <AppRow>
@@ -25,10 +34,14 @@
           <div class="flex">
             <h3>Patient Status Request</h3>
             <AppTooltip>
-              Subsidy Insured Service: the screen will display whether MSP pays for Subsidy Insured Services for this PHN, including the number of services last paid to date, whether the beneficiary must pay, the number of paid services by calendar year. This information will be of interest to
-              supplementary benefits providers.<br />
-              Last Eye Exam: the screen will return the date of the last paid eye exam for this PHN within the last 24 months. This information will be of interest to those performing eye exams. Patient Restriction:, if the patient has been restricted to a single general practitioner, the MSP
-              Coverage Status Check will advise you to review the MSP Bulletin."
+              <p>
+                Subsidy Insured Service: the screen will display whether MSP pays for Subsidy Insured Services for this PHN, including the number of services last paid to date, whether the beneficiary must pay, the number of paid services by calendar year. This information will be of interest to
+                supplementary benefits providers.
+              </p>
+              <p>
+                Last Eye Exam: the screen will return the date of the last paid eye exam for this PHN within the last 24 months. This information will be of interest to those performing eye exams. Patient Restriction:, if the patient has been restricted to a single general practitioner, the MSP
+                Coverage Status Check will advise you to review the MSP Bulletin.
+              </p>
             </AppTooltip>
           </div>
           <p>Select by clicking one or more boxes</p>
@@ -66,7 +79,14 @@
         <AppOutput label="Date Of Service" :value="result.dateOfService" />
       </AppCol>
       <AppCol class="col3">
-        <AppOutput label="Eligible on Date of Service?" :value="eligibleOnDateOfService" />
+        <AppOutput label="Eligible on Date of Service?" :value="eligibleOnDateOfService">
+          <template v-slot:tooltip
+            ><p>If the response is "YES", the person is eligible to have their claim for that date of service paid by MSP.</p>
+            <p>
+              If the response is "No", the screen will return additional information about why the coverage was terminated and instructions that should be provided to the individual If the individual is subject to alternate billing (RCMP or Armed Forces), this information will also be displayed
+            </p></template
+          >
+        </AppOutput>
       </AppCol>
       <AppCol class="col3">
         <AppOutput label="Coverage End Date" :value="result.coverageEndDate" />
@@ -107,6 +127,7 @@
 <script>
 import AppCard from '../../components/ui/AppCard.vue'
 import AppCheckbox from '../../components/ui/AppCheckbox.vue'
+import AppHelp from '../../components/ui/AppHelp.vue'
 import AppTooltip from '../../components/ui/AppTooltip.vue'
 import EligibilityService from '../../services/EligibilityService'
 import useVuelidate from '@vuelidate/core'
@@ -119,7 +140,7 @@ import { useAlertStore } from '../../stores/alert.js'
 
 export default {
   name: 'CoverageStatusCheck',
-  components: { AppCard, AppCheckbox, AppTooltip },
+  components: { AppCard, AppCheckbox, AppHelp, AppTooltip },
   setup() {
     return {
       alertStore: useAlertStore(),

From 5efacf0d05c6d5663ea5c7848a64ce3ca9e25382 Mon Sep 17 00:00:00 2001
From: Trevor Schiavone <trevor.schiavone@cgi.com>
Date: Tue, 24 May 2022 11:12:43 -0700
Subject: [PATCH 7/8] Update checkbox styling and CoverageStatusCheck layout

This brings this page and component more in line with the rest of the site
---
 frontend/src/components/ui/AppCheckbox.vue        |  7 ++++---
 .../src/views/eligibility/CoverageStatusCheck.vue | 15 +++++++++++----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ui/AppCheckbox.vue b/frontend/src/components/ui/AppCheckbox.vue
index 9f80df9a..926ab8a4 100644
--- a/frontend/src/components/ui/AppCheckbox.vue
+++ b/frontend/src/components/ui/AppCheckbox.vue
@@ -40,10 +40,11 @@ export default {
   display: block;
   position: relative;
   padding-left: 25px;
-  margin-bottom: 12px;
+  margin: 5px 0px 7px 3px;
   cursor: pointer;
-  font-family: ‘BCSans’, ‘Noto Sans’, Verdana, Arial, sans-serif;
+  font-family: 'BCSans', 'Noto Sans', Verdana, Arial, sans-serif;
   font-size: 16px;
+  font-weight: 400;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -62,7 +63,7 @@ export default {
 /* Create a custom checkbox */
 .checkmark {
   position: absolute;
-  top: 0;
+  top: 3px;
   left: 0;
   height: 16px;
   width: 16px;
diff --git a/frontend/src/views/eligibility/CoverageStatusCheck.vue b/frontend/src/views/eligibility/CoverageStatusCheck.vue
index e3904076..0d762f4e 100644
--- a/frontend/src/views/eligibility/CoverageStatusCheck.vue
+++ b/frontend/src/views/eligibility/CoverageStatusCheck.vue
@@ -32,7 +32,7 @@
       <AppRow>
         <AppCol class="col4 flex">
           <div class="flex">
-            <h3>Patient Status Request</h3>
+            <h4>Patient Status Request</h4>
             <AppTooltip>
               <p>
                 Subsidy Insured Service: the screen will display whether MSP pays for Subsidy Insured Services for this PHN, including the number of services last paid to date, whether the beneficiary must pay, the number of paid services by calendar year. This information will be of interest to
@@ -44,11 +44,13 @@
               </p>
             </AppTooltip>
           </div>
-          <p>Select by clicking one or more boxes</p>
+          <div class="checkbox-group">
+            <AppCheckbox id="checkSubsidyInsuredService" label="Check for Subsidy Insured Service" v-model="checkSubsidyInsuredService" />
+            <AppCheckbox id="checkLastEyeExam" label="Check for Last Eye Exam" v-model="checkLastEyeExam" />
+          </div>
         </AppCol>
         <AppCol>
-          <AppCheckbox id="checkSubsidyInsuredService" label="Check for Subsidy Insured Service" v-model="checkSubsidyInsuredService" />
-          <AppCheckbox id="checkLastEyeExam" label="Check for Last Eye Exam" v-model="checkLastEyeExam" />
+
         </AppCol>
       </AppRow>
       <AppRow>
@@ -319,3 +321,8 @@ export default {
   },
 }
 </script>
+<style>
+.checkbox-group {
+  margin-bottom: 10px;
+}
+</style>

From 08fee058d9c9b47b0ec7813b7bb46939681ba793 Mon Sep 17 00:00:00 2001
From: weskubo-cgi <wes.kubo@cgi.com>
Date: Tue, 24 May 2022 12:16:34 -0700
Subject: [PATCH 8/8] Addressed code review comments.

---
 frontend/src/components/ui/YesNoRadioButtonGroup.vue   |  2 +-
 frontend/src/views/eligibility/CoverageStatusCheck.vue | 10 ++++------
 frontend/src/views/groupmember/AddDependent.vue        |  4 ++--
 frontend/src/views/groupmember/AddGroupMember.vue      |  2 +-
 frontend/src/views/groupmember/CancelDependent.vue     |  2 +-
 frontend/src/views/groupmember/CancelGroupMember.vue   |  2 +-
 6 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ui/YesNoRadioButtonGroup.vue b/frontend/src/components/ui/YesNoRadioButtonGroup.vue
index 9b397de8..67ad4ccc 100644
--- a/frontend/src/components/ui/YesNoRadioButtonGroup.vue
+++ b/frontend/src/components/ui/YesNoRadioButtonGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <AppRadioButtonGroup :e-model="eModel" :id="id" :label="label" :group="this.YES_NO_RADIO_BUTTON_GROUP" v-model="modelValue">
-    <template v-slot:tooltip><slot name="tooltip"></slot></template>
+    <template #tooltip><slot name="tooltip"></slot></template>
   </AppRadioButtonGroup>
 </template>
 
diff --git a/frontend/src/views/eligibility/CoverageStatusCheck.vue b/frontend/src/views/eligibility/CoverageStatusCheck.vue
index 0d762f4e..ac8198c0 100644
--- a/frontend/src/views/eligibility/CoverageStatusCheck.vue
+++ b/frontend/src/views/eligibility/CoverageStatusCheck.vue
@@ -13,7 +13,7 @@
       <AppRow>
         <AppCol class="col3">
           <AppInput :e-model="v$.phn" id="phn" label="PHN" tooltip type="text" v-model.trim="phn">
-            <template v-slot:tooltip>Enter the individual’s 10 digit PHN. PHN is a mandatory field. If you leave it blank or enter invalid characters, an edit error message box will be displayed on the input screen.</template>
+            <template #tooltip>Enter the individual’s 10 digit PHN. PHN is a mandatory field. If you leave it blank or enter invalid characters, an edit error message box will be displayed on the input screen.</template>
           </AppInput>
         </AppCol>
       </AppRow>
@@ -25,7 +25,7 @@
       <AppRow>
         <AppCol class="col3">
           <AppDateInput :e-model="v$.dateOfService" id="dateOfService" label="Date Of Service" v-model="dateOfService">
-            <template v-slot:tooltip>The Date of Service defaults on the screen to today's date. The year (CCYY), month (MM) and day (DD) can be overridden. If you override the date with another date, it cannot be greater than today's date or more than 18 months in the past.</template>
+            <template #tooltip>The Date of Service defaults on the screen to today's date. The year (CCYY), month (MM) and day (DD) can be overridden. If you override the date with another date, it cannot be greater than today's date or more than 18 months in the past.</template>
           </AppDateInput>
         </AppCol>
       </AppRow>
@@ -49,9 +49,7 @@
             <AppCheckbox id="checkLastEyeExam" label="Check for Last Eye Exam" v-model="checkLastEyeExam" />
           </div>
         </AppCol>
-        <AppCol>
-
-        </AppCol>
+        <AppCol> </AppCol>
       </AppRow>
       <AppRow>
         <AppButton :submitting="searching" mode="primary" type="submit">Submit</AppButton>
@@ -82,7 +80,7 @@
       </AppCol>
       <AppCol class="col3">
         <AppOutput label="Eligible on Date of Service?" :value="eligibleOnDateOfService">
-          <template v-slot:tooltip
+          <template #tooltip
             ><p>If the response is "YES", the person is eligible to have their claim for that date of service paid by MSP.</p>
             <p>
               If the response is "No", the screen will return additional information about why the coverage was terminated and instructions that should be provided to the individual If the individual is subject to alternate billing (RCMP or Armed Forces), this information will also be displayed
diff --git a/frontend/src/views/groupmember/AddDependent.vue b/frontend/src/views/groupmember/AddDependent.vue
index 91cc8e19..2228b0f0 100644
--- a/frontend/src/views/groupmember/AddDependent.vue
+++ b/frontend/src/views/groupmember/AddDependent.vue
@@ -7,7 +7,7 @@
         </AppCol>
         <AppCol class="col4">
           <AppDateInput :e-model="v$.coverageEffectiveDate" id="coverageEffectiveDate" label="Coverage Effective Date" monthPicker inputDateFormat="yyyyMM" placeholder="YYYYMM" v-model="coverageEffectiveDate">
-            <template v-slot:tooltip>Day always defaults to 1st of month</template>
+            <template #tooltip>Day always defaults to 1st of month</template>
           </AppDateInput>
         </AppCol>
       </AppRow>
@@ -27,7 +27,7 @@
       <AppRow>
         <AppCol class="col6">
           <YesNoRadioButtonGroup :e-model="v$.isStudent" id="isStudent" label="Is this Dependent attending a Canadian Educational Institution?" v-model="isStudent">
-            <template v-slot:tooltip> Click either Yes or No </template>
+            <template #tooltip> Click either Yes or No </template>
           </YesNoRadioButtonGroup>
         </AppCol>
       </AppRow>
diff --git a/frontend/src/views/groupmember/AddGroupMember.vue b/frontend/src/views/groupmember/AddGroupMember.vue
index bbe9b0dc..9a7e53be 100644
--- a/frontend/src/views/groupmember/AddGroupMember.vue
+++ b/frontend/src/views/groupmember/AddGroupMember.vue
@@ -7,7 +7,7 @@
         </AppCol>
         <AppCol class="col3">
           <AppDateInput :e-model="v$.coverageEffectiveDate" id="coverageEffectiveDate" label="Coverage Effective Date" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="coverageEffectiveDate">
-            <template v-slot:tooltip>Date always defaults to first day of the month</template>
+            <template #tooltip>Date always defaults to first day of the month</template>
           </AppDateInput>
         </AppCol>
       </AppRow>
diff --git a/frontend/src/views/groupmember/CancelDependent.vue b/frontend/src/views/groupmember/CancelDependent.vue
index ad7cbf25..d6b1d420 100644
--- a/frontend/src/views/groupmember/CancelDependent.vue
+++ b/frontend/src/views/groupmember/CancelDependent.vue
@@ -24,7 +24,7 @@
       <AppRow>
         <AppCol class="col3">
           <AppDateInput :e-model="v$.cancelDate" id="cancelDate" label="Coverage Cancel Date" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="cancelDate">
-            <template v-slot:tooltip> Date always defaults to last day of the month </template>
+            <template #tooltip> Date always defaults to last day of the month </template>
           </AppDateInput>
         </AppCol>
       </AppRow>
diff --git a/frontend/src/views/groupmember/CancelGroupMember.vue b/frontend/src/views/groupmember/CancelGroupMember.vue
index ead22642..417f3293 100644
--- a/frontend/src/views/groupmember/CancelGroupMember.vue
+++ b/frontend/src/views/groupmember/CancelGroupMember.vue
@@ -14,7 +14,7 @@
       <AppRow>
         <AppCol class="col3">
           <AppDateInput :e-model="v$.cancelDate" id="cancelDate" label="Coverage Cancel Date" monthPicker inputDateFormat="yyyy-MM" placeholder="YYYY-MM" v-model="cancelDate">
-            <template v-slot:tooltip> Date always defaults to last day of the month </template>
+            <template #tooltip> Date always defaults to last day of the month </template>
           </AppDateInput>
         </AppCol>
       </AppRow>