From 1cfe372f09e0493b49e408fa1228f207e1234abf Mon Sep 17 00:00:00 2001
From: Paulo Gomes da Cruz Junior <paulo.cruz@gov.bc.ca>
Date: Thu, 29 Jun 2023 09:59:25 -0700
Subject: [PATCH] feat(FE:FSADT1-812): adding loading on details loading and
 global error

---
 .../grouping/AddressGroupComponent.vue        | 22 +++++++++++++++++--
 .../BusinessInformationWizardStep.vue         |  8 ++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/grouping/AddressGroupComponent.vue b/frontend/src/components/grouping/AddressGroupComponent.vue
index f670fdad21..e8789bcea4 100644
--- a/frontend/src/components/grouping/AddressGroupComponent.vue
+++ b/frontend/src/components/grouping/AddressGroupComponent.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { reactive, watch, computed, ref } from 'vue'
+import { useEventBus } from '@vueuse/core'
 import delete16 from '@carbon/icons-vue/es/trash-can/16'
 import type { CodeNameType, BusinessSearchResult } from '@/core/CommonTypes'
 import type { Address } from '@/dto/ApplyClientNumberDto'
@@ -31,12 +32,15 @@ const emit = defineEmits<{
   (e: 'remove', value: number): void
 }>()
 
+const generalErrorBus = useEventBus<string>('general-error-notification')
+
 //We set it as a separated ref due to props not being updatable
 const selectedValue = reactive<Address>(props.modelValue)
 const validateAddressData = props.validations[0]('Address', props.id + '')
 const validateAddressNameData = props.validations[0]('Names', props.id + '')
 const addressError = ref<string | undefined>('')
 const nameError = ref<string | undefined>('')
+const showDetailsLoading = ref<boolean>(false)
 
 //Watch for changes on the input
 watch([selectedValue], () => {
@@ -161,17 +165,27 @@ const autoCompleteUrl = computed(
     `/api/clients/addresses?country=${selectedValue.country.value}&maxSuggestions=10&searchTerm=${selectedValue.streetAddress}`
 )
 const autoCompleteResult = ref<BusinessSearchResult>({} as BusinessSearchResult)
-const detailsData = ref(null)
+const detailsData = ref<Address | null>(null)
 
 watch([autoCompleteResult], () => {
   if (autoCompleteResult.value) {
-    const { error } = useFetchTo(
+    showDetailsLoading.value = true
+    const { error, loading: detailsLoading } = useFetchTo(
       `/api/clients/addresses/${encodeURIComponent(
         autoCompleteResult.value.code
       )}`,
       detailsData,
       {}
     )
+
+    watch([error], () => {
+      generalErrorBus.emit(error.value.response.data.message)
+    })
+
+    watch(
+      [detailsLoading],
+      () => (showDetailsLoading.value = detailsLoading.value)
+    )
   }
 })
 
@@ -246,6 +260,10 @@ watch([detailsData], () => {
         validation.streetAddress = selectedValue.streetAddress ? true : false
       "
     />
+    <div class="spinner-block" v-if="showDetailsLoading">
+      <bx-loading type="small"> </bx-loading>
+      <span>Loading address details...</span>
+    </div>
   </data-fetcher>
 
   <text-input-component
diff --git a/frontend/src/pages/applyform/BusinessInformationWizardStep.vue b/frontend/src/pages/applyform/BusinessInformationWizardStep.vue
index ce5c96c86d..fa9e7d0327 100644
--- a/frontend/src/pages/applyform/BusinessInformationWizardStep.vue
+++ b/frontend/src/pages/applyform/BusinessInformationWizardStep.vue
@@ -23,6 +23,7 @@ const emit = defineEmits<{
 //Defining the event bus to send notifications up
 const navigationBus = useEventBus<boolean>('navigation-notification')
 const exitBus = useEventBus<Record<string, boolean | null>>('exit-notification')
+const generalErrorBus = useEventBus<string>('general-error-notification')
 
 //Set the prop as a ref, and then emit when it changes
 const formData = ref<FormDataDto>(props.data)
@@ -119,12 +120,17 @@ watch([autoCompleteResult], () => {
 
     showDetailsLoading.value = true
     watch([error], () => {
-      if (error.value.response.status === 409) toggleErrorMessages(null, true)
+      if (error.value.response.status === 409) {
+        toggleErrorMessages(null, true)
+        return
+      }
       if (error.value.response.status === 404) {
         toggleErrorMessages(null, null)
         validation.business = true
         emit('update:data', formData.value)
+        return
       }
+      generalErrorBus.emit(error.value.response.data.message)
     })
 
     watch(