chore: updating progress and style

- updating progress indicator to add disabled state
- updating styles to apply to shadow dom
- updated business info to notify on errors
- added inputmask definition helper
- updated main to use non-deprecated types

frontend/src/assets/global.css

@@ -3,11 +3,11 @@
 }
 
 .bx--btn {
-  width: 243px;
+  width: 261px;
   padding: 3px;
 }
 
-.rounded > button {
+.rounded {
   border-radius: 4px !important;
 }
 
@@ -42,6 +42,12 @@
   font-size: 16px;
   line-height: 24px;
   color: #606062;
+  opacity: 1;
+}
+
+.inner-text-disabled {
+  color: #131315;
+  opacity: 0.4;
 }
 
 .inner-text-spaced {
@@ -131,3 +137,12 @@
   flex-grow: 1;
   fill: var(--cds-hover-primary, #0353e9);
 }
+
+bx-btn::part(button) {
+  border-radius: 4px !important;
+}
+
+bx-btn#logout-btn::part(button) {
+  border: solid 1px white;
+  color: white;
+}

frontend/src/components/wizard/WizardProgressIndicatorComponent.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="wizard-wrap-indicator">
     <div
-      v-for="(step, index) in modelValue"
+      v-for="(step, index) in values"
       :class="{
         'wizard-wrap-item': true,
-        [`wizard-wrap-item-${step.kind}`]: true,
+        [`wizard-wrap-item-${step.kind}`]: true
       }"
     >
       <component
         :is="iconsForKinds[step.kind]"
         :alt="step.kind"
         :class="{
           'wizard-wrap-item-icon': true,
-          [`wizard-wrap-item-icon-${step.kind}`]: true,
+          [`wizard-wrap-item-icon-${step.kind}`]: true
         }"
       />
       <div class="wizard-wrap-item-text">
@@ -23,36 +23,70 @@
             @click.prevent="emit('go-to', index)"
             >{{ step.title }}</a
           >
-          <span v-else>{{ step.title }}</span>
+          <span
+            v-else
+            :class="{
+              'inner-text': true,
+              'inner-text-disabled': !step.enabled
+            }"
+            >{{ step.title }}</span
+          >
         </p>
-        <span class="inner-text">{{ step.subtitle }}</span>
+        <span
+          :class="{
+            'inner-text': true,
+            'inner-text-disabled': !step.enabled
+          }"
+          >{{ step.subtitle }} {{ step.enabled }}</span
+        >
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { ProgressData } from "@/core/CommonTypes";
-
-defineProps<{ modelValue: Array<ProgressData> }>();
-
-const emit = defineEmits<{ (e: "go-to", value: number): void }>();
-
-import Checkmark16 from "@carbon/icons-vue/es/checkmark--outline/16";
-import Error16 from "@carbon/icons-vue/es/error--outline/16";
-import Circle16 from "@carbon/icons-vue/es/circle-dash/16";
-import Info16 from "@carbon/icons-vue/es/incomplete/16";
+import { toRef, watch } from 'vue'
+import { useEventBus } from '@vueuse/core'
+import type { ProgressData } from '@/core/CommonTypes'
+
+import Checkmark16 from '@carbon/icons-vue/es/checkmark--outline/16'
+import Error16 from '@carbon/icons-vue/es/error--outline/16'
+import Circle16 from '@carbon/icons-vue/es/circle-dash/16'
+import Info16 from '@carbon/icons-vue/es/incomplete/16'
+
+const props = defineProps<{ modelValue: Array<ProgressData> }>()
+
+const emit = defineEmits<{ (e: 'go-to', value: number): void }>()
+
+const bus = useEventBus<boolean>('navigation-notification')
+
+const values = toRef(props.modelValue)
+watch(
+  () => props.modelValue,
+  () => {
+    values.value = props.modelValue
+  }
+)
+bus.on(
+  (value: boolean) =>
+    (values.value = values.value.map((item: ProgressData) => {
+      if (item.kind === 'queued') {
+        item.enabled = value
+      }
+      return item
+    }))
+)
 
 const iconsForKinds: Record<string, any> = {
-  ["complete"]: Checkmark16,
-  ["current"]: Info16,
-  ["queued"]: Circle16,
-  ["error"]: Error16,
-};
+  ['complete']: Checkmark16,
+  ['current']: Info16,
+  ['queued']: Circle16,
+  ['error']: Error16
+}
 
 const canShowLink = (step: ProgressData) => {
-  return step.kind === "current" || step.kind === "complete";
-};
+  return step.kind === 'current' || step.kind === 'complete'
+}
 </script>
 
 <style scoped>

frontend/src/core/CommonTypes.ts

@@ -37,6 +37,7 @@ export interface ProgressData {
   kind: string
   title: string
   subtitle: string
+  enabled: boolean
 }
 
 export interface Submitter {

frontend/src/helpers/InputMask.ts

@@ -1,6 +1,6 @@
 import { mask } from 'vue-the-mask'
 
-export default (shadowSelector: string) => (el: any, binding: any) => {
+export const masking = (shadowSelector: string) => (el: any, binding: any) => {
   if (el.shadowRoot && binding.value) {
     const input = el.shadowRoot.querySelector(shadowSelector)
     if (input) {

frontend/src/main.ts

@@ -1,12 +1,12 @@
 import { createApp } from 'vue'
 import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
-import type { KeycloakInstance } from 'keycloak-js'
+import type { Keycloak, KeycloakPromise } from 'keycloak-js'
 import type { VueKeycloakInstance } from '@dsb-norge/vue-keycloak-js/dist/types'
 
 import App from '@/App.vue'
 import { router } from '@/routes'
 import { keycloakUrl, keycloakClientId, nodeEnv } from '@/core/CoreConstants'
-import masking from '@/helpers/InputMask'
+import { masking } from '@/helpers/InputMask'
 
 // Importing BC typography
 import '@bcgov/bc-sans/css/BCSans.css'
@@ -31,6 +31,16 @@ app.directive('mask', masking('.bx--text-input__field-wrapper input'))
 if (nodeEnv && nodeEnv == 'openshift-dev') {
   // disable the login authentication for the deployment in the openshift dev namespace
   // cause the url in the dev namespace is not stable
+
+  const fakeKeycloak = {
+    authenticated: true,
+    login: () => {},
+    logout: () => {},
+    register: () => {},
+    logoutFn: (options?: any): KeycloakPromise<void, void> | void => {}
+  }
+
+  app.provide('keycloak', fakeKeycloak)
   app.mount('#app')
 } else {
   app.use(VueKeycloakJs, {
@@ -47,7 +57,7 @@ if (nodeEnv && nodeEnv == 'openshift-dev') {
       realm: 'standard',
       clientId: keycloakClientId
     },
-    onReady(keycloak: KeycloakInstance) {
+    onReady(keycloak: Keycloak) {
       console.log('Keycloak ready', keycloak)
       // provde global property keycloak to read login information
       app.provide('keycloak', keycloak)

frontend/src/pages/applyform/BusinessInformationWizardStep.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { watch, computed, ref, reactive } from 'vue'
+import { useEventBus } from '@vueuse/core'
 import { useFetchTo } from '@/services/ForestClientService'
 import { type BusinessSearchResult, ClientTypeEnum } from '@/core/CommonTypes'
 import type {
@@ -17,6 +18,10 @@ const emit = defineEmits<{
   (e: 'valid', value: boolean): void
 }>()
 
+//Defining the event bus to send notifications up
+const navigationBus = useEventBus<boolean>('navigation-notification')
+const exitBus = useEventBus<Record<string, boolean | null>>('exit-notification')
+
 //Set the prop as a ref, and then emit when it changes
 const formData = ref<FormDataDto>(props.data)
 watch(
@@ -61,13 +66,28 @@ const showGoodStandingError = ref<boolean>(false)
 const showDuplicatedError = ref<boolean>(false)
 const detailsData = ref(null)
 
+const toggleErrorMessages = (
+  goodStanding: boolean | null,
+  duplicated: boolean | null
+) => {
+  showGoodStandingError.value = goodStanding ? goodStanding : false
+  showDuplicatedError.value = duplicated ? duplicated : false
+
+  if (goodStanding || duplicated) {
+    navigationBus.emit(false)
+    exitBus.emit({ goodStanding, duplicated })
+  } else {
+    navigationBus.emit(true)
+    exitBus.emit({ goodStanding: false, goodStanding: false })
+  }
+}
+
 //Using this as we have to handle the selected result to get
 //incorporation number and client type
 const autoCompleteResult = ref<BusinessSearchResult>()
 watch([autoCompleteResult], () => {
   if (autoCompleteResult.value) {
-    showDuplicatedError.value = false
-    showGoodStandingError.value = false
+    toggleErrorMessages(false, false)
 
     formData.value.businessInformation.incorporationNumber =
       autoCompleteResult.value.code
@@ -91,7 +111,7 @@ watch([autoCompleteResult], () => {
       config
     )
     watch([error], () => {
-      if (error.value.response.status === 409) showDuplicatedError.value = true
+      if (error.value.response.status === 409) toggleErrorMessages(null, true)
     })
   }
 })
@@ -106,7 +126,7 @@ watch([detailsData], () => {
     formData.value.location.addresses = forestClientDetails.addresses
     formData.value.businessInformation.goodStandingInd =
       forestClientDetails.goodStanding ? 'Y' : 'N'
-    showGoodStandingError.value = !forestClientDetails.goodStanding
+    toggleErrorMessages(!forestClientDetails.goodStanding, null)
     validation.business = forestClientDetails.goodStanding
 
     emit('update:data', formData.value)
@@ -210,14 +230,13 @@ watch([selectedOption], () => {
 
     <display-block-component
       v-show="showDuplicatedError"
-      kind="warning"
+      kind="error"
       title="Client already exists"
     >
       <p>
-        Your application for a client number can't go ahead because “{{
-          formData.businessInformation.businessName
-        }}” already has one. Check your email
-        {{ formData.location.contacts[0].email }} to find out what it is.
+        Looks like “{{ formData.businessInformation.businessName }}” has a
+        client number. Select the 'Receive email and logout' button below to
+        have it sent to you at {{ formData.location.contacts[0].email }}
       </p>
     </display-block-component>
   </data-fetcher>