Fix for future effective bootstrap business address and directors also #94

src/components/bcros/OfficeAddressBootstrap.vue

@@ -1,5 +1,25 @@
 <script setup lang="ts">
-defineProps<{ items: { title?: string }[] }>()
+import { getName } from 'country-list'
+const bootstrap = useBcrosBusinessBootstrap()
+const { bootstrapFiling } = storeToRefs(bootstrap)
+
+defineProps<{ items: { title?: string, field?: string }[] }>()
+
+const bootstrapFiledAndPaid: Ref<boolean> = computed(() => {
+  return bootstrapFiling?.value?.filing?.header?.status === FilingStatusE.PAID
+})
+
+const bootstrapAddress: Ref<EntityAddressCollectionI> = computed(() => {
+  return bootstrapFiledAndPaid.value ? bootstrapFiling.value?.filing?.incorporationApplication?.offices : undefined
+})
+
+const sameAs = function(addr1, addr2) {
+  if (!addr1 || !addr2) {
+    return false
+  }
+  return JSON.stringify(addr1) === JSON.stringify(addr2)
+}
+
 </script>
 
 <template>
@@ -19,7 +39,17 @@ defineProps<{ items: { title?: string }[] }>()
             {{ $t('label.address.addressType.delivery') }}
           </div>
           <div class="flex justify-center">
-            <p>{{ $t('text.filing.completeYourFiling') }}</p>
+            <span v-if="bootstrapAddress?.[item.field]?.deliveryAddress?.streetAddress">
+              <p>{{ bootstrapAddress?.[item.field]?.deliveryAddress?.streetAddress }}</p>
+              <p>
+                {{ bootstrapAddress?.[item.field]?.deliveryAddress?.addressCity }}
+                &nbsp;{{ bootstrapAddress?.[item.field]?.deliveryAddress?.postalCode }}
+              </p>
+              <p>{{ getName(bootstrapAddress?.[item.field]?.deliveryAddress?.addressCountry) }}</p>
+            </span>
+            <p v-else>
+              {{ $t('text.filing.completeYourFiling') }}
+            </p>
           </div>
         </div>
       </div>
@@ -30,7 +60,24 @@ defineProps<{ items: { title?: string }[] }>()
             {{ $t('label.address.addressType.mailing') }}
           </div>
           <div class="flex justify-center">
-            <p>{{ $t('text.filing.completeYourFiling') }}</p>
+            <span
+              v-if="sameAs(
+                bootstrapAddress?.[item.field]?.deliveryAddress,
+                bootstrapAddress?.[item.field]?.mailingAddress
+              )"
+            >
+              <p>{{ $t('text.general.sameAsAbove') }}</p>
+            </span>
+            <span v-else-if="bootstrapAddress?.[item.field]?.mailingAddress?.streetAddress">
+              <p>{{ bootstrapAddress?.[item.field]?.mailingAddress?.streetAddress }}</p>
+              <p>
+                {{ bootstrapAddress?.[item.field]?.mailingAddress?.addressCity }}
+                &nbsp;{{ bootstrapAddress?.[item.field]?.mailingAddress?.postalCode }}</p>
+              <p>{{ getName(bootstrapAddress?.[item.field]?.mailingAddress?.addressCountry) }}</p>
+            </span>
+            <p v-else>
+              {{ $t('text.filing.completeYourFiling') }}
+            </p>
           </div>
         </div>
       </div>

src/components/bcros/PartyInfo.vue

@@ -2,30 +2,41 @@
   <BcrosAccordion
     :name="name"
     :items="partyItems"
+    :disabled="disableExpand"
   />
 </template>
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 
 const business = useBcrosBusiness()
+const bootstrap = useBcrosBusinessBootstrap()
 const { currentParties } = storeToRefs(business)
+const { bootstrapFiling } = storeToRefs(bootstrap)
 
 const props = defineProps({
   name: { type: String, required: true },
   roleType: { type: String, required: true },
   showEmail: { type: Boolean, required: true },
-  expandTopItem: { type: Boolean, default: false }
+  expandTopItem: { type: Boolean, default: false },
+  showAddress: { type: Boolean, default: true }
+})
+
+const disableExpand = computed(() => {
+  return !currentParties?.value?.parties && !!bootstrapFiling?.value?.filing?.incorporationApplication?.parties
 })
 
 const partyItems = computed(() => {
   const items: BcrosAccordionItem[] = []
-
-  if (currentParties.value.parties) {
-    currentParties.value.parties.forEach((party) => {
+  const parties = currentParties?.value?.parties || bootstrapFiling?.value?.filing?.incorporationApplication?.parties
+  const disabled = !currentParties?.value?.parties &&
+    !!bootstrapFiling?.value?.filing?.incorporationApplication?.parties
+  if (parties) {
+    parties.forEach((party) => {
       if (party.roles.find(role => role.roleType === props.roleType && !role.cessationDate)) {
         items.push({
           label: getName(party),
+          disabled,
           defaultOpen: false,
           showAddressIcons: false,
           showAvatar: true,
@@ -36,6 +47,9 @@ const partyItems = computed(() => {
           },
           email: party.officer.email
         })
+        if (!props.showAddress) {
+          delete items[items.length - 1].address
+        }
       }
     })
   }

src/components/bcros/accordion/Index.vue

@@ -2,19 +2,29 @@
 defineProps({
   name: { type: String, required: true },
   items: { type: Array as PropType<BcrosAccordionItem[]>, required: true },
-  pendingAddress: { type: Boolean, default: false, required: false }
+  pendingAddress: { type: Boolean, default: false, required: false },
+  disabled: { type: Boolean, default: false, required: false }
 })
+
 </script>
 
 <template>
   <div class="overflow-y-auto overflow-x-hidden max-h-[336px]" :data-cy="'accordion_' + name">
-    <UAccordion :items="items">
+    <UAccordion
+      :items="items"
+      :ui="{
+        item: {
+          padding: 'p-0'
+        }
+      }"
+    >
       <template #default="{ item, open, index }">
         <UButton
           ref="accordionButton"
           variant="ghost"
           :class="`${pendingAddress ? 'hover:bg-yellow-pendingtint' : 'hover:bg-white'}
-            text-sm font-bold text-gray-900 rounded p-4 pl-3`"
+            ${disabled ? 'text-lg pb-0' : 'text-sm'}
+            font-bold text-gray-900 rounded p-4 pl-3`"
           :data-cy="'accordion_item_button_' + name + index"
         >
           <template #leading>
@@ -25,6 +35,7 @@ defineProps({
           <span class="text-left" :class="item.showAvatar ? 'pl-2' : ''">{{ item.label }}</span>
           <template #trailing>
             <UIcon
+              v-if="!disabled"
               name="i-heroicons-chevron-down-20-solid"
               class="w-5 h-5 ms-auto transform transition-transform duration-200 text-gray-700"
               :class="[open && '-rotate-180']"
@@ -36,6 +47,7 @@ defineProps({
         <BcrosAccordionItem
           :name="name + '_' + index"
           :item="item"
+          :disabled="disabled"
         />
       </template>
     </UAccordion>

src/components/bcros/accordion/Item.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="'accordion-item_' + name" class="flex flex-col pl-3 pb-3">
+  <div :data-cy="'accordion-item_' + name" :class="`flex flex-col ${disabled ? '' : 'pl-3 pb-3'}`">
     <div v-if="item.showEmail" class="flex flex-col w-3/4 ml-10 pb-3">
       <div class="text-gray-900 pb-1">
         {{ $t('label.general.email') }}
@@ -12,6 +12,7 @@
       </span>
     </div>
     <BcrosAddress
+      v-if="item.address"
       :name="name"
       :address="item.address"
       :show-address-icons="item.showAddressIcons"
@@ -22,6 +23,7 @@
 <script setup lang="ts">
 defineProps({
   name: { type: String, required: true },
-  item: { type: Object as PropType<BcrosAccordionItem>, required: true }
+  item: { type: Object as PropType<BcrosAccordionItem>, required: true },
+  disabled: { type: Boolean, default: false, required: false }
 })
 </script>

src/components/bcros/businessDetails/Links.vue

@@ -23,6 +23,7 @@ const isCommentOpen = ref(false)
 const isDissolutionDialogOpen = ref(false)
 const { goToCreatePage } = useBcrosNavigate()
 const filings = useBcrosFilings()
+const isFetchingDataSpinner = ref(false)
 
 const isAllowedBusinessSummary = computed(() =>
   !!currentBusinessIdentifier.value &&
@@ -121,8 +122,7 @@ const promptChangeBusinessInfo = () => {
 
 /** Request and Download Business Summary Document. */
 const downloadBusinessSummary = async (): Promise<void> => {
-  // todo: add loading full screen // ticket #22059
-  // this.setFetchingDataSpinner(true)
+  isFetchingDataSpinner.value = true
   const businessId = currentBusiness.value.identifier
   const apiURL = useRuntimeConfig().public.legalApiURL
   const summaryDocument: DocumentI = {
@@ -135,6 +135,7 @@ const downloadBusinessSummary = async (): Promise<void> => {
   if (blob) {
     saveBlob(blob, summaryDocument.filename)
   }
+  isFetchingDataSpinner.value = false
 }
 
 /** Creates a draft filing and navigates to the Create UI to file a company dissolution filing. */
@@ -178,6 +179,24 @@ const contacts = getContactInfo('registries')
 
 <template>
   <div class="flex flex-wrap gap-x-3 gap-y-1 items-center max-w-bcros">
+    <UModal
+      v-model="isFetchingDataSpinner"
+      prevent-close
+      :ui="{
+        background: 'bg-transparent',
+        shadow: 'shadow-none',
+        overlay: {
+          background: 'bg-gray-800/75 dark:bg-gray-800/75',
+        }
+      }"
+    >
+      <div class="w-full h-full text-center items-center">
+        <BcrosLoadingIcon />
+        <p class="text-white font-semibold">
+          {{ $t('text.general.fetchingData') }}
+        </p>
+      </div>
+    </UModal>
     <!-- Dissolution Confirmation Dialog -->
     <BcrosDialog
       attach="#businessDetails"

src/interfaces/accordion-item-i.ts

@@ -4,6 +4,7 @@ export interface BcrosAccordionItem extends AccordionItem {
   showAddressIcons: boolean,
   showAvatar: boolean,
   showEmail: boolean,
-  address: deliveryAndMailingAddressI,
-  email?: string
+  address?: deliveryAndMailingAddressI,
+  email?: string,
+  disabled?: boolean
 }

src/interfaces/bootstrap-i.ts

@@ -1,5 +1,7 @@
 export interface BootstrapFilingDataI {
   nameRequest?: NameRequestFilingI
+  offices?: EntityAddressCollectionI
+  parties?: PartyI[]
 }
 
 export interface BootstrapBusinessI {

src/pages/dashboard.vue

@@ -59,7 +59,8 @@ const bootstrapOfficeTitle = computed(() => {
 const bootstrapOffices = computed(() => {
   return bootstrapFilingType.value === FilingTypes.REGISTRATION
     ? [{}]
-    : [{ title: t('label.address.officeType.registered') }, { title: t('label.address.officeType.records') }]
+    : [{ title: t('label.address.officeType.registered'), field: 'registeredOffice' },
+        { title: t('label.address.officeType.records'), field: 'recordsOffice' }]
 })
 
 const bootstrapPartiesTitle = computed(() => {
@@ -356,8 +357,18 @@ const coaEffectiveDate = computed(() => {
             />
           </div>
         </template>
-        <div class="flex justify-center py-5">
-          <p>{{ $t('text.filing.completeYourFiling') }}</p>
+        <div class="flex justify-left">
+          <BcrosPartyInfo
+            v-if="bootstrapFiling?.filing?.incorporationApplication?.parties"
+            name="director"
+            :role-type="RoleTypeE.DIRECTOR"
+            :show-address="false"
+            :show-email="false"
+            :expand-top-item="true"
+          />
+          <p v-else>
+            {{ $t('text.filing.completeYourFiling') }}
+          </p>
         </div>
       </BcrosSection>
     </div>