From 1a83a3aacf81121ad0150cf8bd1bd149b84dec70 Mon Sep 17 00:00:00 2001
From: Hrvoje Fekete <hrvoje.fekete@gmail.com>
Date: Fri, 2 Aug 2024 01:08:24 -0700
Subject: [PATCH 1/4] 21802 - Add details call and list.

---
 cypress/e2e/components/filings/section.cy.ts  | 20 +++++++-
 .../filings/directorChange/commentList.json   | 24 +++++++++
 .../filings/directorChange/directorChange.ts  |  2 +-
 .../bcros/filing/CommonTemplate.vue           | 44 ++++++++--------
 .../bcros/filing/common/DetailsList.vue       | 39 ++++++++-------
 .../bcros/filing/common/DocumentsList.vue     | 50 +++++++++++--------
 src/utils/filings.ts                          | 46 +++++++++++++++++
 7 files changed, 163 insertions(+), 62 deletions(-)
 create mode 100644 cypress/fixtures/filings/directorChange/commentList.json

diff --git a/cypress/e2e/components/filings/section.cy.ts b/cypress/e2e/components/filings/section.cy.ts
index b1a3be3..5be2347 100644
--- a/cypress/e2e/components/filings/section.cy.ts
+++ b/cypress/e2e/components/filings/section.cy.ts
@@ -13,7 +13,7 @@ context('Filings history section', () => {
     })
   })
 
-  it('Verifies body of the filings', () => {
+  it('Verifies body of the filings -- document list, court number', () => {
     // director change verification aka, verify body list
     const filings = [directorChange, administrativeDissolution]
     cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, undefined, filings)
@@ -74,4 +74,22 @@ context('Filings history section', () => {
       .find('[data-cy="pursuant-to-a-plan"]')
       .should('not.exist')
   })
+
+  it('Verifies body of the filings -- details (comments)', () => {
+    const filings = [directorChange, administrativeDissolution]
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, undefined, filings)
+
+    cy.fixture('filings/directorChange/documentList.json').then((response) => {
+      cy.intercept(
+        'GET',
+        `**/api/v2/businesses/**/filings/${directorChange.filingId}/comments`,
+        response).as('detailsList')
+    })
+
+    // expand filing
+    cy.get(`[data-cy="filingHistoryItem-default-filing-${directorChange.filingId}"]`)
+      .find('[data-cy="filing-main-action-button"]')
+      .click()
+
+  })
 })
diff --git a/cypress/fixtures/filings/directorChange/commentList.json b/cypress/fixtures/filings/directorChange/commentList.json
new file mode 100644
index 0000000..d6eb46c
--- /dev/null
+++ b/cypress/fixtures/filings/directorChange/commentList.json
@@ -0,0 +1,24 @@
+{
+  "comments": [
+    {
+      "comment": {
+        "businessId": null,
+        "comment": "this is another comment... test 123",
+        "filingId": 150006,
+        "id": 620860,
+        "submitterDisplayName": "Business Registry Test 1",
+        "timestamp": "2024-08-02T05:14:39.403319+00:00"
+      }
+    },
+    {
+      "comment": {
+        "businessId": null,
+        "comment": "Test adding STAFF comments ",
+        "filingId": 150006,
+        "id": 620671,
+        "submitterDisplayName": "Business Registry Test 1",
+        "timestamp": "2024-07-29T17:36:29.851567+00:00"
+      }
+    }
+  ]
+}
diff --git a/cypress/fixtures/filings/directorChange/directorChange.ts b/cypress/fixtures/filings/directorChange/directorChange.ts
index 140ada1..691d6f9 100644
--- a/cypress/fixtures/filings/directorChange/directorChange.ts
+++ b/cypress/fixtures/filings/directorChange/directorChange.ts
@@ -1,7 +1,7 @@
 export const directorChange = {
   availableOnPaperOnly: false,
   businessIdentifier: 'CP1002605',
-  commentsCount: 0,
+  commentsCount: 2,
   commentsLink:
     'https://legal-api-dev.apps.silver.devops.gov.bc.ca/api/v2/businesses/CP1002605/filings/150006/comments',
   data: {
diff --git a/src/components/bcros/filing/CommonTemplate.vue b/src/components/bcros/filing/CommonTemplate.vue
index 9f460ca..d506d88 100644
--- a/src/components/bcros/filing/CommonTemplate.vue
+++ b/src/components/bcros/filing/CommonTemplate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="`filingHistoryItem-${dataCy}-${filing.filingId}`" class="w-full bg-white p-3 rounded-sm">
+  <div :data-cy="`filingHistoryItem-${dataCy}-${filing.filingId}`" class="w-full bg-white px-6 py-3 rounded-sm">
     <div data-cy="filingHistoryItem-header" class="flex flex-row gap-2 items-center">
       <div class="flex flex-col">
         <strong class="item-header-title">
@@ -17,19 +17,19 @@
         </div>
 
         <slot name="detailsButton">
-          <UButton
-            v-if="filing.commentsCount > 0"
-            class="comments-btn mt-1"
-            outlined
-            color="primary"
-            :ripple="false"
-            @click.stop="isShowBody = !isShowBody"
-          >
-            <UIcon name="i-mdi-message-reply" size="small" />
-            <span>
+          <diV >
+            <UButton
+              v-if="filing.commentsCount > 0"
+              class="px-3 py-2"
+              variant="ghost"
+              @click.stop="isShowBody = !isShowBody"
+            >
+              <UIcon name="i-mdi-message-reply" size="small" />
+              <span>
               {{ isShowBody ? $t('label.filing.detail') : $t('label.filing.detail') }}
               ({{ filing.commentsCount }})</span>
-          </UButton>
+            </UButton>
+          </diV>
         </slot>
       </div>
       <div class="ml-auto order-2">
@@ -89,22 +89,26 @@
 import { FilingTypes } from '@bcrs-shared-components/enums'
 import type { ApiResponseFilingI } from '#imports'
 import { FilingStatusE, isFilingStatus } from '#imports'
+import type { CommentIF } from '@bcrs-shared-components/interfaces'
+import { loadComments } from '~/utils/filings'
 
 const contacts = getContactInfo('registries')
 const t = useNuxtApp().$i18n.t
 
-const props = defineProps({
-  filing: { type: Object as PropType<ApiResponseFilingI>, required: true },
-  dataCy: { type: String, required: true }
-})
+const filing = defineModel('filing', { type: Object as PropType<ApiResponseFilingI>, required: true })
+defineProps({ dataCy: { type: String, required: true } })
 
-const isStatusPaid = computed(() => isFilingStatus(props.filing, FilingStatusE.PAID))
-const isStatusApproved = computed(() => isFilingStatus(props.filing, FilingStatusE.APPROVED))
+const isStatusPaid = computed(() => isFilingStatus(filing.value, FilingStatusE.PAID))
+const isStatusApproved = computed(() => isFilingStatus(filing.value, FilingStatusE.APPROVED))
 const isShowBody = ref(false)
 
 /** The title of this filing. */
 const title =
-  isFilingType(props.filing, FilingTypes.ALTERATION)
+  isFilingType(filing.value, FilingTypes.ALTERATION)
     ? t('filing.name.alteration')
-    : props.filing.displayName || t('filing.name.filing')
+    : filing.value.displayName || t('filing.name.filing')
+
+if (filing.value.commentsCount && filing.value.commentsLink) {
+  filing.value.comments = await loadComments(filing.value)
+}
 </script>
diff --git a/src/components/bcros/filing/common/DetailsList.vue b/src/components/bcros/filing/common/DetailsList.vue
index 2c872c3..1a366a7 100644
--- a/src/components/bcros/filing/common/DetailsList.vue
+++ b/src/components/bcros/filing/common/DetailsList.vue
@@ -1,24 +1,27 @@
 <template>
-  <div class="details-list">
-    <div class="title-bar">
-      <h4>
-        <v-icon small>
-          mdi-message-reply
-        </v-icon>
-        <span class="ml-1">Detail{{ filing.comments.length > 1 ? "s" : "" }} ({{ filing.comments.length }})</span>
-      </h4>
-      <UButton
-        v-if="!isDisableNonBenCorps && hasRoleStaff"
-        color="primary"
-        :disabled="!filing.filingId"
-        @click="showCommentDialog()"
-      >
-        <span>Add Detail</span>
-      </UButton>
+  <div data-cy="details-list">
+    <div class="flex flex-row gap-2">
+      <div class="mt-auto pb-4">
+        <strong>
+          <UIcon name="i-mdi-message-reply" class="my-auto" />
+          <span class="pl-1">
+          {{ $t('label.filing.detail') }} ({{ filing.comments.length }})</span>
+        </strong>
+      </div>
+      <div class="ml-auto pr-2 order-2">
+        <UButton
+          v-if="!isDisableNonBenCorps() && hasRoleStaff"
+          class="rounded-sm px-3 py-2"
+          :disabled="!filing.filingId"
+          @click="showCommentDialog()"
+        >
+          <span>{{ $t('button.filing.actions.addDetail') }}</span>
+        </UButton>
+      </div>
     </div>
 
     <!-- the detail comments list-->
-    <div class="flex flex-col gap-3 pb-0" data-cy="detail-comments-list">
+    <div class="flex flex-col gap-5 pb-0 text-sm" data-cy="detail-comments-list">
       <div
         v-for="(comment, index) in filing.comments"
         :key="index"
@@ -53,7 +56,7 @@ const { isDisableNonBenCorps } = useBcrosBusiness()
 const { hasRoleStaff } = storeToRefs(useBcrosKeycloak())
 
 const showCommentDialog = () => {
-  // todo: add after #21352 & #21305
+  // todo: add with 21305
 }
 
 </script>
diff --git a/src/components/bcros/filing/common/DocumentsList.vue b/src/components/bcros/filing/common/DocumentsList.vue
index cd1a1dc..690ecb2 100644
--- a/src/components/bcros/filing/common/DocumentsList.vue
+++ b/src/components/bcros/filing/common/DocumentsList.vue
@@ -4,29 +4,35 @@
     class="flex flex-col gap-1"
     data-cy="filing-history-document-list"
   >
-    <UButton
-      v-for="(document, index) in filing.documents"
-      :key="index"
-      :label="document.title"
-      variant="ghost"
-      leading-icon="i-mdi-file-pdf-outline"
-      :disabled="isLoading && !!loadingDocuments.find(doc => doc === document)"
-      :loading="isLoading"
-      class="px-4 py-2 min-w-10 resize-x"
-      :data-cy="`download-document-button-${document.title}`"
-      @click="downloadOne(document)"
-    />
+    <div class="flex flex-col gap-1.5">
 
-    <UButton
-      :label="$t('button.filing.common.downloadAll')"
-      variant="ghost"
-      :disabled="isLoading"
-      :loading="isLoading"
-      leading-icon="i-mdi-download"
-      class="px-4 py-2 min-w-10"
-      data-cy="download-document-button-downloadAll"
-      @click="downloadAll()"
-    />
+      <div v-for="(document, index) in filing.documents">
+        <UButton
+          :key="index"
+          :label="document.title"
+          variant="ghost"
+          leading-icon="i-mdi-file-pdf-outline"
+          :disabled="isLoading && !!loadingDocuments.find(doc => doc === document)"
+          :loading="isLoading"
+          class="px-4 py-2"
+          :data-cy="`download-document-button-${document.title}`"
+          @click="downloadOne(document)"
+        />
+      </div>
+    </div>
+
+    <div>
+      <UButton
+        :label="$t('button.filing.common.downloadAll')"
+        variant="ghost"
+        :disabled="isLoading"
+        :loading="isLoading"
+        leading-icon="i-mdi-download"
+        class="px-4 py-2 min-w-10"
+        data-cy="download-document-button-downloadAll"
+        @click="downloadAll()"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/src/utils/filings.ts b/src/utils/filings.ts
index b7d4838..10e2ddd 100644
--- a/src/utils/filings.ts
+++ b/src/utils/filings.ts
@@ -1,6 +1,8 @@
 import { FilingTypes } from '@bcrs-shared-components/enums'
 import type { ApiResponseFilingI, FetchDocumentsI, StateFilingI } from '#imports'
 import { FilingStatusE, FilingSubTypeE } from '#imports'
+import { v4 as UUIDv4 } from 'uuid'
+import type { CommentIF } from '@bcrs-shared-components/interfaces'
 
 export const isFilingType =
   (filing: ApiResponseFilingI, filingType: FilingTypes = undefined, filingSubtype: FilingSubTypeE = undefined) =>
@@ -51,6 +53,22 @@ export const fetchDocumentList = async (url: string) => {
     })
 }
 
+/**
+ * Fetches the list of documents grouped by types.
+ * @param url the full URL to fetch the documents
+ * @returns the fetch documents object or throws error
+ */
+export const fetchComments = async (url: string) => {
+  return await useBcrosFetch<{ comments: CommentIF[] }>(url, { method: 'GET' })
+    .then(({ data, error }) => {
+      if (error.value || !data.value) {
+        console.warn('fetchDocuments() error - invalid response =', error?.value)
+        throw new Error('Failed to retrieve list of available documents for the filing')
+      }
+      return data?.value
+    })
+}
+
 /** Is True if this is a bootstrap filing item and should be displayed in the Filing History List. */
 export const isBootstrapFiling = computed((): boolean => {
   return false
@@ -62,3 +80,31 @@ export const isBootstrapFiling = computed((): boolean => {
   // isRegistrationFiling
   // )
 })
+
+export const loadComments = async (filing: ApiResponseFilingI): Promise<Array<CommentIF>> => {
+  try {
+    // fetch comments array from API
+    const commentsObj = await fetchComments(filing.commentsLink)
+    const comments = commentsObj.comments || []
+    // flatten and sort the comments
+    return flattenAndSortComments(comments)
+  } catch (error) {
+    filing.comments = undefined
+    console.info('loadComments() error =', error)
+    // FUTURE: enable some error dialog?
+  }
+  filing.commentsCount = filing.comments?.length || 0
+
+  /** Flattens and sorts an array of comments. */
+  function flattenAndSortComments (comments: Array<CommentIF>): Array<CommentIF> {
+    if (comments && comments.length > 0) {
+      // first use map to change comment.comment to comment
+      const temp: Array<any> = comments.map(c => c.comment)
+      // then sort newest to oldest
+      // NB: these `new Date()` are safe because we're comparing like units
+      temp.sort((a, b) => new Date(a.timestamp) < new Date(b.timestamp) ? 1 : -1)
+      return temp
+    }
+    return [] as CommentIF[]
+  }
+}

From fd792074d2290ae01d0f48f9c44e44225c3a1523 Mon Sep 17 00:00:00 2001
From: Hrvoje Fekete <hrvoje.fekete@gmail.com>
Date: Fri, 2 Aug 2024 09:14:39 -0700
Subject: [PATCH 2/4] 21802 - eslint fixes.

---
 cypress/e2e/components/filings/section.cy.ts         | 1 -
 src/components/bcros/filing/CommonTemplate.vue       | 7 +++----
 src/components/bcros/filing/common/DetailsList.vue   | 2 +-
 src/components/bcros/filing/common/DocumentsList.vue | 4 +---
 src/utils/filings.ts                                 | 3 +--
 5 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/cypress/e2e/components/filings/section.cy.ts b/cypress/e2e/components/filings/section.cy.ts
index 5be2347..69c3579 100644
--- a/cypress/e2e/components/filings/section.cy.ts
+++ b/cypress/e2e/components/filings/section.cy.ts
@@ -90,6 +90,5 @@ context('Filings history section', () => {
     cy.get(`[data-cy="filingHistoryItem-default-filing-${directorChange.filingId}"]`)
       .find('[data-cy="filing-main-action-button"]')
       .click()
-
   })
 })
diff --git a/src/components/bcros/filing/CommonTemplate.vue b/src/components/bcros/filing/CommonTemplate.vue
index d506d88..a7b24bc 100644
--- a/src/components/bcros/filing/CommonTemplate.vue
+++ b/src/components/bcros/filing/CommonTemplate.vue
@@ -17,7 +17,7 @@
         </div>
 
         <slot name="detailsButton">
-          <diV >
+          <diV>
             <UButton
               v-if="filing.commentsCount > 0"
               class="px-3 py-2"
@@ -26,8 +26,8 @@
             >
               <UIcon name="i-mdi-message-reply" size="small" />
               <span>
-              {{ isShowBody ? $t('label.filing.detail') : $t('label.filing.detail') }}
-              ({{ filing.commentsCount }})</span>
+                {{ isShowBody ? $t('label.filing.detail') : $t('label.filing.detail') }}
+                ({{ filing.commentsCount }})</span>
             </UButton>
           </diV>
         </slot>
@@ -89,7 +89,6 @@
 import { FilingTypes } from '@bcrs-shared-components/enums'
 import type { ApiResponseFilingI } from '#imports'
 import { FilingStatusE, isFilingStatus } from '#imports'
-import type { CommentIF } from '@bcrs-shared-components/interfaces'
 import { loadComments } from '~/utils/filings'
 
 const contacts = getContactInfo('registries')
diff --git a/src/components/bcros/filing/common/DetailsList.vue b/src/components/bcros/filing/common/DetailsList.vue
index 1a366a7..0f1d184 100644
--- a/src/components/bcros/filing/common/DetailsList.vue
+++ b/src/components/bcros/filing/common/DetailsList.vue
@@ -5,7 +5,7 @@
         <strong>
           <UIcon name="i-mdi-message-reply" class="my-auto" />
           <span class="pl-1">
-          {{ $t('label.filing.detail') }} ({{ filing.comments.length }})</span>
+            {{ $t('label.filing.detail') }} ({{ filing.comments.length }})</span>
         </strong>
       </div>
       <div class="ml-auto pr-2 order-2">
diff --git a/src/components/bcros/filing/common/DocumentsList.vue b/src/components/bcros/filing/common/DocumentsList.vue
index 690ecb2..099ee57 100644
--- a/src/components/bcros/filing/common/DocumentsList.vue
+++ b/src/components/bcros/filing/common/DocumentsList.vue
@@ -5,10 +5,8 @@
     data-cy="filing-history-document-list"
   >
     <div class="flex flex-col gap-1.5">
-
-      <div v-for="(document, index) in filing.documents">
+      <div v-for="(document, index) in filing.documents" :key="index">
         <UButton
-          :key="index"
           :label="document.title"
           variant="ghost"
           leading-icon="i-mdi-file-pdf-outline"
diff --git a/src/utils/filings.ts b/src/utils/filings.ts
index 10e2ddd..333bae4 100644
--- a/src/utils/filings.ts
+++ b/src/utils/filings.ts
@@ -1,8 +1,7 @@
 import { FilingTypes } from '@bcrs-shared-components/enums'
+import type { CommentIF } from '@bcrs-shared-components/interfaces'
 import type { ApiResponseFilingI, FetchDocumentsI, StateFilingI } from '#imports'
 import { FilingStatusE, FilingSubTypeE } from '#imports'
-import { v4 as UUIDv4 } from 'uuid'
-import type { CommentIF } from '@bcrs-shared-components/interfaces'
 
 export const isFilingType =
   (filing: ApiResponseFilingI, filingType: FilingTypes = undefined, filingSubtype: FilingSubTypeE = undefined) =>

From 8c52c8663ccc7b737e3fc24bb8ed31e3c95673b2 Mon Sep 17 00:00:00 2001
From: Hrvoje Fekete <hrvoje.fekete@gmail.com>
Date: Fri, 2 Aug 2024 13:19:22 -0700
Subject: [PATCH 3/4] 21802 - added remaining part of test. Moved loading into
 the details.

---
 cypress/e2e/components/filings/section.cy.ts   | 18 +++++++++++++++++-
 src/components/bcros/filing/CommonTemplate.vue |  6 +-----
 .../bcros/filing/common/DetailsList.vue        | 10 ++++++----
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/cypress/e2e/components/filings/section.cy.ts b/cypress/e2e/components/filings/section.cy.ts
index 69c3579..d834fd2 100644
--- a/cypress/e2e/components/filings/section.cy.ts
+++ b/cypress/e2e/components/filings/section.cy.ts
@@ -79,16 +79,32 @@ context('Filings history section', () => {
     const filings = [directorChange, administrativeDissolution]
     cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, undefined, filings)
 
-    cy.fixture('filings/directorChange/documentList.json').then((response) => {
+    cy.fixture('filings/directorChange/commentList.json').then((response) => {
       cy.intercept(
         'GET',
         `**/api/v2/businesses/**/filings/${directorChange.filingId}/comments`,
         response).as('detailsList')
     })
 
+    cy.get(`[data-cy="details-list"]`).should('not.exist')
+
     // expand filing
     cy.get(`[data-cy="filingHistoryItem-default-filing-${directorChange.filingId}"]`)
       .find('[data-cy="filing-main-action-button"]')
       .click()
+
+    cy.wait('@detailsList')
+
+    cy.get(`[data-cy="details-list"]`).should('exist')
+    cy.get(`[data-cy="details-list"]`).contains('Details (2)')
+    cy.get(`[data-cy="details-list"]`).contains('this is another comment... test 123')
+    cy.get(`[data-cy="details-list"]`).contains('Test adding STAFF comments')
+
+    // collapse filing
+    cy.get(`[data-cy="filingHistoryItem-default-filing-${directorChange.filingId}"]`)
+      .find('[data-cy="filing-main-action-button"]')
+      .click()
+
+    cy.get(`[data-cy="details-list"]`).should('not.exist')
   })
 })
diff --git a/src/components/bcros/filing/CommonTemplate.vue b/src/components/bcros/filing/CommonTemplate.vue
index a7b24bc..c54521d 100644
--- a/src/components/bcros/filing/CommonTemplate.vue
+++ b/src/components/bcros/filing/CommonTemplate.vue
@@ -76,7 +76,7 @@
 
       <slot name="detail-comments">
         <!-- if we have detail comments, show them -->
-        <div v-if="filing.comments && filing.commentsCount > 0" class="mb-n2">
+        <div v-if="filing.commentsCount > 0 && filing.commentsLink" class="mb-n2">
           <UDivider class="my-6" />
           <BcrosFilingCommonDetailsList :filing="filing" />
         </div>
@@ -106,8 +106,4 @@ const title =
   isFilingType(filing.value, FilingTypes.ALTERATION)
     ? t('filing.name.alteration')
     : filing.value.displayName || t('filing.name.filing')
-
-if (filing.value.commentsCount && filing.value.commentsLink) {
-  filing.value.comments = await loadComments(filing.value)
-}
 </script>
diff --git a/src/components/bcros/filing/common/DetailsList.vue b/src/components/bcros/filing/common/DetailsList.vue
index 0f1d184..2b3d31f 100644
--- a/src/components/bcros/filing/common/DetailsList.vue
+++ b/src/components/bcros/filing/common/DetailsList.vue
@@ -46,13 +46,15 @@
 
 <script setup lang="ts">
 import type { ApiResponseFilingI } from '#imports'
+import { loadComments } from '~/utils/filings'
 
-defineProps({
-  filing: { type: Object as PropType<ApiResponseFilingI>, required: true }
-})
+const filing = defineModel('filing', { type: Object as PropType<ApiResponseFilingI>, required: true })
 
-const { isDisableNonBenCorps } = useBcrosBusiness()
+if (filing.value.commentsCount && filing.value.commentsLink) {
+  filing.value.comments = await loadComments(filing.value)
+}
 
+const { isDisableNonBenCorps } = useBcrosBusiness()
 const { hasRoleStaff } = storeToRefs(useBcrosKeycloak())
 
 const showCommentDialog = () => {

From 641ced9140f4fb3c242051ada4cf219a3a2add16 Mon Sep 17 00:00:00 2001
From: Hrvoje Fekete <hrvoje.fekete@gmail.com>
Date: Fri, 2 Aug 2024 13:36:50 -0700
Subject: [PATCH 4/4] 21802 - pr changes.

---
 cypress/e2e/components/filings/section.cy.ts   | 12 ++++++------
 src/components/bcros/filing/CommonTemplate.vue |  5 ++---
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/cypress/e2e/components/filings/section.cy.ts b/cypress/e2e/components/filings/section.cy.ts
index d834fd2..63ae9cf 100644
--- a/cypress/e2e/components/filings/section.cy.ts
+++ b/cypress/e2e/components/filings/section.cy.ts
@@ -86,7 +86,7 @@ context('Filings history section', () => {
         response).as('detailsList')
     })
 
-    cy.get(`[data-cy="details-list"]`).should('not.exist')
+    cy.get('[data-cy="details-list"]').should('not.exist')
 
     // expand filing
     cy.get(`[data-cy="filingHistoryItem-default-filing-${directorChange.filingId}"]`)
@@ -95,16 +95,16 @@ context('Filings history section', () => {
 
     cy.wait('@detailsList')
 
-    cy.get(`[data-cy="details-list"]`).should('exist')
-    cy.get(`[data-cy="details-list"]`).contains('Details (2)')
-    cy.get(`[data-cy="details-list"]`).contains('this is another comment... test 123')
-    cy.get(`[data-cy="details-list"]`).contains('Test adding STAFF comments')
+    cy.get('[data-cy="details-list"]').should('exist')
+    cy.get('[data-cy="details-list"]').contains('Details (2)')
+    cy.get('[data-cy="details-list"]').contains('this is another comment... test 123')
+    cy.get('[data-cy="details-list"]').contains('Test adding STAFF comments')
 
     // collapse filing
     cy.get(`[data-cy="filingHistoryItem-default-filing-${directorChange.filingId}"]`)
       .find('[data-cy="filing-main-action-button"]')
       .click()
 
-    cy.get(`[data-cy="details-list"]`).should('not.exist')
+    cy.get('[data-cy="details-list"]').should('not.exist')
   })
 })
diff --git a/src/components/bcros/filing/CommonTemplate.vue b/src/components/bcros/filing/CommonTemplate.vue
index c54521d..6591894 100644
--- a/src/components/bcros/filing/CommonTemplate.vue
+++ b/src/components/bcros/filing/CommonTemplate.vue
@@ -17,7 +17,7 @@
         </div>
 
         <slot name="detailsButton">
-          <diV>
+          <div>
             <UButton
               v-if="filing.commentsCount > 0"
               class="px-3 py-2"
@@ -29,7 +29,7 @@
                 {{ isShowBody ? $t('label.filing.detail') : $t('label.filing.detail') }}
                 ({{ filing.commentsCount }})</span>
             </UButton>
-          </diV>
+          </div>
         </slot>
       </div>
       <div class="ml-auto order-2">
@@ -89,7 +89,6 @@
 import { FilingTypes } from '@bcrs-shared-components/enums'
 import type { ApiResponseFilingI } from '#imports'
 import { FilingStatusE, isFilingStatus } from '#imports'
-import { loadComments } from '~/utils/filings'
 
 const contacts = getContactInfo('registries')
 const t = useNuxtApp().$i18n.t