UI - FOIPPA Notice and STRB Contact Modal [Host Application and Dashboard]

strr-web/components/common/InfoModal.vue

@@ -12,7 +12,12 @@ const props = defineProps<{
   hideContactInfo?: boolean
 }>()
 
-const { header, hideContactInfo = false, openButtonLabel, openButtonIcon = 'i-mdi-help-circle-outline' } = props
+const {
+  header,
+  hideContactInfo = true,
+  openButtonLabel,
+  openButtonIcon = props.openButtonIcon || 'i-mdi-help-circle-outline'
+} = props
 
 const handleCloseModal = () => {
   isOpen.value = false

strr-web/lang/en.json

@@ -39,6 +39,13 @@
       "pending": "APPLIED",
       "submitted": "SUBMITTED",
       "paid": "PAID"
+    },
+    "modal":{
+      "contactInfo": {
+        "header": "Need Help?",
+        "openButtonLabel": "Help with using this dashboard",
+        "contactUs": "If you need help with setting up your BC Registries and Online Services account, please contact us."
+      }
     }
   },
   "tos": {
@@ -184,6 +191,21 @@
       "eligibility": "Principal Residence",
       "review": "Review and Confirm"
     },
+    "modal":{
+      "bcrosFoippaNotice": {
+        "header": "Information Collection Notice",
+        "openButtonLabel": "Information collection notice",
+        "noticeTextFirstPart": "Any personal information required is collected to support the administration and enforcement of the ",
+        "noticeTextSecondPart": ", under the authority of section 33(1) of that Act. Any questions about the collection of any information can be directed to the Executive Director of the Short-Term Rental Branch, at",
+        "email": "strbranch{'@'}gov.bc.ca",
+        "actName": "Short-Term Rental Accommodations Act"
+      },
+      "contactInfo": {
+        "header": "Need Help?",
+        "openButtonLabel": "Help with registering a rental unit",
+        "contactUs": "If you need help with setting up your BC Registries and Online Services account, please contact us."
+      }
+    },
     "applicationConfirm": {
       "submitted": "Application Submitted",
       "altTextConfirm": "Confirmation check mark",

strr-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strr-web",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "description": "Short Term Rental Registration UI - Mono repo workspace",
   "scripts": {
     "preinstall": "npx only-allow pnpm",

strr-web/pages/account-select.vue

@@ -6,6 +6,7 @@
         <InfoModal
           :header="t('account.helpModal.header')"
           :open-button-label="t('account.helpModal.openButtonLabel')"
+          :hide-contact-info="false"
           class="mb-6"
         >
           <p class="mb-10">

strr-web/pages/create-account.vue

@@ -11,6 +11,35 @@
               data-test-id="create-application-title"
               class="mobile:pb-[20px]"
             />
+            <div class="flex flex-row items-center mb-6">
+              <InfoModal
+                :header="t('createAccount.modal.contactInfo.header')"
+                :open-button-label="t('createAccount.modal.contactInfo.openButtonLabel')"
+                :hide-contact-info="false"
+                class="mb-6"
+              >
+                <p class="mb-10">
+                  {{ t('createAccount.modal.contactInfo.contactUs') }}
+                </p>
+              </InfoModal>
+              <div class="self-stretch w-px bg-gray-300 mx-4" />
+              <InfoModal
+                :header="t('createAccount.modal.bcrosFoippaNotice.header')"
+                :open-button-label="t('createAccount.modal.bcrosFoippaNotice.openButtonLabel')"
+                :open-button-icon="'i-mdi-info-circle-outline'"
+                :hide-contact-info="true"
+                class="mb-6"
+              >
+                <p class="mb-10">
+                  {{ $t('createAccount.modal.bcrosFoippaNotice.noticeTextFirstPart') }}
+                  <i>{{ $t('createAccount.modal.bcrosFoippaNotice.actName') }}</i>
+                  {{ $t('createAccount.modal.bcrosFoippaNotice.noticeTextSecondPart') }}
+                  <a :href="`mailto:${t('createAccount.modal.bcrosFoippaNotice.email')}`">
+                    {{ t('createAccount.modal.bcrosFoippaNotice.email') }}
+                  </a>.
+                </p>
+              </InfoModal>
+            </div>
             <BcrosStepper
               :key="headerUpdateKey"
               :active-step="activeStepIndex"
@@ -68,6 +97,7 @@
 <script setup lang="ts">
 import steps from '../page-data/create-account/steps'
 import { FormPageI } from '~/interfaces/form/form-page-i'
+import InfoModal from '~/components/common/InfoModal.vue'
 
 const hasSecondaryContact: Ref<boolean> = ref(false)
 const activeStepIndex: Ref<number> = ref(0)

strr-web/pages/finalization.vue

@@ -12,6 +12,7 @@
       <InfoModal
         :header="t('account.helpModal.header')"
         :open-button-label="t('account.helpModal.openButtonLabel')"
+        :hide-contact-info="false"
         class="mb-6"
       >
         <p class="mb-10">

strr-web/pages/registry-dashboard.vue

@@ -2,6 +2,16 @@
   <div class="mb-[100px]">
     <BcrosTypographyH1 text="My CEU STR Registry Dashboard" />
     <BcrosTypographyH2 text="Owners STR Registration Applications" />
+    <InfoModal
+      :header="tRegistryDashboard('modal.contactInfo.header')"
+      :open-button-label="tRegistryDashboard('modal.contactInfo.openButtonLabel')"
+      :hide-contact-info="false"
+      class="mb-6"
+    >
+      <p class="mb-10">
+        {{ tRegistryDashboard('modal.contactInfo.contactUs') }}
+      </p>
+    </InfoModal>
     <UTabs
       id="filter-applications-tabs"
       :items="filterOptions"
@@ -112,6 +122,7 @@
 
 <script setup lang="ts">
 import { ApplicationI, ApplicationStatusE } from '#imports'
+import InfoModal from '~/components/common/InfoModal.vue'
 
 const { t } = useTranslation()
 const tRegistryDashboard = (translationKey: string) => t(`registryDashboard.${translationKey}`)