fix(FSADT1-1086): Email Address Pattern Found

frontend/src/assets/styles/global.scss

@@ -1807,3 +1807,17 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     max-width: calc(100vw - 21rem);
   }
 }
+
+.link-button {
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  color: var(--light-theme-link-link-primary, #005cb8);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.link-button:hover {
+  color: var(--light-theme-link-link-primary-hover, #00478f);
+}

frontend/src/components/MainHeaderComponent.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { ref, watchEffect, getCurrentInstance } from "vue";
+import { openMailtoLink, getObfuscatedEmail } from "@/services/ForestClientService";
+
 // Carbon
 import "@carbon/web-components/es/components/button/index";
 import "@carbon/web-components/es/components/ui-shell/index";
 import type { CDSHeaderPanel } from "@carbon/web-components";
 import type CDSHeaderGlobalAction from "@carbon/web-components/es/components/ui-shell/header-global-action";
+
 // Composables
 import { isSmallScreen, isMediumScreen } from "@/composables/useScreenSize";
 import { useRoute } from "vue-router";
@@ -90,6 +93,8 @@ const onClickLogout = () => {
     logoutModalActive.value = true;
   }
 }
+
+const adminEmail = "[email protected]"; 
 </script>
 
 <template>
@@ -237,7 +242,10 @@ const onClickLogout = () => {
     </cds-modal-header>
     <cds-modal-body>
       <p>
-        Can’t proceed with your application? Let us know by emailing your issue to <a href='mailto:[email protected]'>[email protected]</a> and we’ll get back to you.
+        Can’t proceed with your application? Let us know by emailing your issue to 
+        <button class="link-button" @click="openMailtoLink(adminEmail)" aria-label="Contact Admin via Email">
+          <span v-bind:innerHTML="getObfuscatedEmail(adminEmail)"></span>
+        </button>
       </p>
     </cds-modal-body>
   </cds-modal>

frontend/src/pages/bceidform/BusinessInformationWizardStep.vue

@@ -24,7 +24,7 @@ import { submissionValidation } from "@/helpers/validators/SubmissionValidators"
 import { retrieveClientType, exportAddress } from "@/helpers/DataConversors";
 // Importing session
 import ForestClientUserSession from "@/helpers/ForestClientUserSession";
-import { getEnumKeyByEnumValue } from "@/services/ForestClientService";
+import { getEnumKeyByEnumValue, openMailtoLink, getObfuscatedEmail } from "@/services/ForestClientService";
 
 //Defining the props and emiter to reveice the data and emit an update
 const props = defineProps<{ data: FormDataDto; active: boolean }>();
@@ -223,6 +223,8 @@ watch(showBirthDate, (value) => {
     validation.birthdate = true;
   }
 });
+
+const bcRegistryEmail = "[email protected]";    
 </script>
 
 <template>
@@ -297,7 +299,9 @@ watch(showBirthDate, (value) => {
             <li class="body-compact-01">
               If your name isn’t there, call BC Registry toll free at
               <a href="tel:18775261526">1-877-526-1526</a> or email them at
-              <a href="mailto:[email protected]">[email protected]</a>.
+              <button class="link-button" @click="openMailtoLink(bcRegistryEmail)" aria-label="Contact BC Registry via Email">
+                <span v-bind:innerHTML="getObfuscatedEmail(bcRegistryEmail)"></span>
+              </button>.
             </li>
           </ol>
         </div>

frontend/src/services/ForestClientService.ts

@@ -49,3 +49,19 @@ export const getEnumKeyByEnumValue = <T extends Record<string, any>>(enumObject:
   const key = Object.keys(enumObject).find((x) => enumObject[x] === enumValue);
   return key ? String(key) : "Unknown";
 };
+
+export const getObfuscatedEmail = email => {
+  const obfuscatedEmail = email.replace('@', '&#64;');
+  return obfuscatedEmail;
+};
+
+export const getMailtoLink = email => {
+  const encodedEmail = encodeURIComponent(email);
+  return 'mailto:' + encodedEmail;
+};
+
+export const openMailtoLink = (email) => {
+  const encodedEmail = encodeURIComponent(email);
+  const mailtoLink = 'mailto:' +  encodedEmail;
+  location.assign(mailtoLink);
+}