From f50d4f3538b1c3826867994652aba71f943f7faf Mon Sep 17 00:00:00 2001
From: Kial Jinnah <kialjinnah@gmail.com>
Date: Wed, 22 Nov 2023 08:47:19 -0800
Subject: [PATCH 1/3] button control layout

Signed-off-by: Kial Jinnah <kialjinnah@gmail.com>
---
 btr-web/btr-common-components/app.config.ts   |  5 ++
 btr-web/btr-common-components/lang/en.json    |  6 ++
 .../components/bcros/Breadcrumb.vue           | 78 -------------------
 .../components/bcros/BusinessDetails.vue      |  2 +-
 .../components/bcros/ButtonControl.vue        | 43 ++++++++++
 .../interfaces/button-control-i.ts            |  8 ++
 btr-web/btr-layouts/layouts/business.vue      |  3 +
 btr-web/btr-layouts/layouts/default.vue       |  3 +
 .../components/bcros/ButtonControl.spec.ts    | 57 ++++++++++++++
 btr-web/btr-main-app/app/router.options.ts    | 11 +++
 .../cypress/e2e/layouts/buttonControl.cy.ts   | 18 +++++
 11 files changed, 155 insertions(+), 79 deletions(-)
 create mode 100644 btr-web/btr-layouts/components/bcros/ButtonControl.vue
 create mode 100644 btr-web/btr-layouts/interfaces/button-control-i.ts
 create mode 100644 btr-web/btr-layouts/tests/unit/components/bcros/ButtonControl.spec.ts
 create mode 100644 btr-web/btr-main-app/cypress/e2e/layouts/buttonControl.cy.ts

diff --git a/btr-web/btr-common-components/app.config.ts b/btr-web/btr-common-components/app.config.ts
index cd366c00..06560b40 100644
--- a/btr-web/btr-common-components/app.config.ts
+++ b/btr-web/btr-common-components/app.config.ts
@@ -2,6 +2,11 @@ export default defineAppConfig({
   ui: {
     primary: 'bcGovBlue',
     gray: 'bcGovGray',
+    button: {
+      variant: {
+        solid: 'hover:bg-opacity-[.92] hover:bg-{color}-500'
+      }
+    },
     formGroup: {
       label: { base: 'block text-base font-bold py-3 text-gray-900' }
     },
diff --git a/btr-web/btr-common-components/lang/en.json b/btr-web/btr-common-components/lang/en.json
index b28afff7..84d3e78c 100644
--- a/btr-web/btr-common-components/lang/en.json
+++ b/btr-web/btr-common-components/lang/en.json
@@ -18,6 +18,12 @@
     "registrationNum": "Registration Number"
   },
   "labels": {
+    "buttons": {
+      "cancel": "Cancel",
+      "reviewConfirm": "Review and Confirm",
+      "save": "Save",
+      "saveResume": "Save and Resume"
+    },
     "birthdate": "Birthdate",
     "competency": "Competency",
     "citizenship": "Citizenship",
diff --git a/btr-web/btr-layouts/components/bcros/Breadcrumb.vue b/btr-web/btr-layouts/components/bcros/Breadcrumb.vue
index 2a27d338..4424fc27 100644
--- a/btr-web/btr-layouts/components/bcros/Breadcrumb.vue
+++ b/btr-web/btr-layouts/components/bcros/Breadcrumb.vue
@@ -51,81 +51,3 @@ const navigate = (breadcrumb: BreadcrumbI): void => {
 }
 
 </script>
-
-<style lang="scss" scoped>
-//@import '@/assets/styles/theme.scss';
-#breadcrumb {
-  height: 45px;
-  //background-color: $app-dk-blue;
-  color: white;
-  display: flex;
-  align-items: center;
-  li {
-    margin-bottom: 0 !important;
-  }
-}
-.back-btn {
-  background-color: white;
-  //color: $app-dk-blue;
-}
-.v-breadcrumbs li {
-    align-items: center;
-    display: inline-flex;
-    font-size: 14px;
-}
-.breadcrumb-text {
-  font-size: 0.8125rem !important;
-  color: white;
-}
-.breadcrumb-col {
-  display: flex;
-  align-items: center;
-}
-.active-crumb {
-  text-decoration: underline !important;
-  cursor: pointer !important;
-}
-.inactive-crumb {
-  cursor: default !important; // To override default or local link styling
-}
-.text-primary{
-  color: #1669bb!important;
-}
-
-@media(min-width:960px) {
-.container {
-  max-width: 900px
-}
-}
-
-@media(min-width:1264px) {
-.container {
-  max-width: 1185px
-}
-}
-
-@media(min-width:1904px) {
-.container {
-  max-width: 1785px
-}
-}
-
-.container {
-    max-width: 1360px;
-}
-
-:deep(.v-breadcrumbs .v-breadcrumbs__divider) {
-  color: white !important;
-  margin-bottom: 0;
-}
-:deep(.theme--bcgov.v-btn.v-btn--disabled) {
-  opacity: .4;
-  .v-icon {
-    //color: $app-blue !important;
-  }
-}
-:deep(.v-btn--icon.v-btn--density-default) {
-  height: 28px;
-  width: 28px;
-}
-</style>
diff --git a/btr-web/btr-layouts/components/bcros/BusinessDetails.vue b/btr-web/btr-layouts/components/bcros/BusinessDetails.vue
index 0c2e6b77..7bbb2f83 100644
--- a/btr-web/btr-layouts/components/bcros/BusinessDetails.vue
+++ b/btr-web/btr-layouts/components/bcros/BusinessDetails.vue
@@ -51,7 +51,7 @@ function loadComponentData (identifier: string) {
 }
 // watcher required because layouts start rendering before the route is initialized
 watch(() => route.params.identifier as string, loadComponentData)
-onMounted(() => {
+onBeforeMount(() => {
   // onMounted required for refresh case (route will be set already so ^ watcher will not fire)
   if (route.params.identifier) {
     loadComponentData(route.params.identifier as string)
diff --git a/btr-web/btr-layouts/components/bcros/ButtonControl.vue b/btr-web/btr-layouts/components/bcros/ButtonControl.vue
new file mode 100644
index 00000000..051661b0
--- /dev/null
+++ b/btr-web/btr-layouts/components/bcros/ButtonControl.vue
@@ -0,0 +1,43 @@
+<template>
+  <div id="bcros-button-control" class="bg-white pt-8 pb-[60px]">
+    <div class="grid grid-cols-2 m-auto px-4 w-full max-w-[1360px]">
+      <div v-if="leftButtons" class="flex gap-4">
+        <UButton
+          v-for="button, i in leftButtons"
+          :key="'left-button-' + i"
+          class="px-4 py-3"
+          :color="button.color || 'primary'"
+          :icon="button.icon || ''"
+          :label="button.label"
+          :trailing="button.trailing || false"
+          :variant="button.variant || 'solid'"
+          data-cy="button-control-left-button"
+          @click="button.action()"
+        />
+      </div>
+      <div class="col-auto justify-self-end">
+        <div v-if="rightButtons" class="flex gap-4">
+          <UButton
+            v-for="button, i in rightButtons"
+            :key="'right-button-' + i"
+            class="px-4 py-3 font-bold"
+            :color="button.color || 'primary'"
+            :icon="button.icon || ''"
+            :label="button.label"
+            :trailing="button.trailing || false"
+            :variant="button.variant || 'solid'"
+            data-cy="button-control-right-button"
+            @click="button.action()"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  leftButtons?: ButtonControlI[],
+  rightButtons?: ButtonControlI[]
+}>()
+</script>
diff --git a/btr-web/btr-layouts/interfaces/button-control-i.ts b/btr-web/btr-layouts/interfaces/button-control-i.ts
new file mode 100644
index 00000000..da0223d6
--- /dev/null
+++ b/btr-web/btr-layouts/interfaces/button-control-i.ts
@@ -0,0 +1,8 @@
+export interface ButtonControlI {
+  action: () => any
+  color?: string
+  icon?: string
+  label: string
+  variant?: string
+  trailing?: boolean
+}
diff --git a/btr-web/btr-layouts/layouts/business.vue b/btr-web/btr-layouts/layouts/business.vue
index 560eb039..979a3caa 100644
--- a/btr-web/btr-layouts/layouts/business.vue
+++ b/btr-web/btr-layouts/layouts/business.vue
@@ -6,6 +6,7 @@
     <div class="mx-auto px-4 w-full max-w-[1360px]">
       <slot />
     </div>
+    <BcrosButtonControl :left-buttons="leftButtons" :right-buttons="rightButtons" />
     <BcrosFooter :app-version="version" />
   </div>
 </template>
@@ -13,6 +14,8 @@
 <script setup lang="ts">
 const route = useRoute()
 const crumbConstructors = computed(() => (route?.meta?.breadcrumbs || []) as (() => BreadcrumbI)[])
+const leftButtons = computed(() => (route?.meta?.buttonControl?.leftButtons || []) as (() => ButtonControlI)[])
+const rightButtons = computed(() => (route?.meta?.buttonControl?.rightButtons || []) as (() => ButtonControlI)[])
 
 const version = useRuntimeConfig().public.version
 </script>
diff --git a/btr-web/btr-layouts/layouts/default.vue b/btr-web/btr-layouts/layouts/default.vue
index b3bd8578..90e77c98 100644
--- a/btr-web/btr-layouts/layouts/default.vue
+++ b/btr-web/btr-layouts/layouts/default.vue
@@ -5,6 +5,7 @@
     <div class="mx-auto px-4 w-full max-w-[1360px]">
       <slot />
     </div>
+    <BcrosButtonControl :left-buttons="leftButtons" :right-buttons="rightButtons" />
     <BcrosFooter :app-version="version" />
   </div>
 </template>
@@ -12,6 +13,8 @@
 <script setup lang="ts">
 const route = useRoute()
 const crumbConstructors = computed(() => (route?.meta?.breadcrumbs || []) as (() => BreadcrumbI)[])
+const leftButtons = computed(() => (route?.meta?.buttonControl?.leftButtons || []) as (() => ButtonControlI)[])
+const rightButtons = computed(() => (route?.meta?.buttonControl?.rightButtons || []) as (() => ButtonControlI)[])
 
 const version = useRuntimeConfig().public.version
 </script>
diff --git a/btr-web/btr-layouts/tests/unit/components/bcros/ButtonControl.spec.ts b/btr-web/btr-layouts/tests/unit/components/bcros/ButtonControl.spec.ts
new file mode 100644
index 00000000..dfaa6cd8
--- /dev/null
+++ b/btr-web/btr-layouts/tests/unit/components/bcros/ButtonControl.spec.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it, vi } from 'vitest'
+import { VueWrapper, mount } from '@vue/test-utils'
+
+import { BcrosButtonControl } from '#components'
+
+describe('Button Control tests', () => {
+  let wrapper: VueWrapper<any>
+
+  const leftBtnActions = [
+    vi.fn().mockImplementation(() => {}),
+    vi.fn().mockImplementation(() => {}),
+    vi.fn().mockImplementation(() => {})
+  ]
+  const rightBtnActions = [vi.fn().mockImplementation(() => {}), vi.fn().mockImplementation(() => {})]
+
+  const leftButtons: ButtonControlI[] = [
+    { action: leftBtnActions[0], label: 'left 1' },
+    { action: leftBtnActions[1], label: 'left 2' },
+    { action: leftBtnActions[2], label: 'left 3' }
+  ]
+
+  const rightButtons: ButtonControlI[] = [
+    { action: rightBtnActions[0], label: 'right 1' },
+    { action: rightBtnActions[1], label: 'right 2' }
+  ]
+
+  beforeEach(() => {
+    wrapper = mount(BcrosButtonControl, { props: { leftButtons, rightButtons } })
+  })
+  afterEach(() => {
+    wrapper.unmount()
+    vi.clearAllMocks()
+  })
+
+  it('renders with expected buttons / behaviour', async () => {
+    expect(wrapper.find('#bcros-button-control').exists()).toBe(true)
+
+    const renderedLeftBtns = wrapper.findAll('[data-cy=button-control-left-button]')
+    const renderedRightBtns = wrapper.findAll('[data-cy=button-control-right-button]')
+    expect(renderedLeftBtns.length).toBe(leftButtons.length)
+    expect(renderedRightBtns.length).toBe(rightButtons.length)
+
+    for (let i = 0; i < leftButtons.length; i++) {
+      expect(renderedLeftBtns.at(i)?.text()).toBe(leftButtons[i].label)
+      expect(leftBtnActions[i]).not.toHaveBeenCalled()
+      await renderedLeftBtns.at(i)?.trigger('click')
+      expect(leftBtnActions[i]).toHaveBeenCalled()
+    }
+
+    for (let i = 0; i < rightButtons.length; i++) {
+      expect(renderedRightBtns.at(i)?.text()).toBe(rightButtons[i].label)
+      expect(rightBtnActions[i]).not.toHaveBeenCalled()
+      await renderedRightBtns.at(i)?.trigger('click')
+      expect(rightBtnActions[i]).toHaveBeenCalled()
+    }
+  })
+})
diff --git a/btr-web/btr-main-app/app/router.options.ts b/btr-web/btr-main-app/app/router.options.ts
index 122fccf3..4856f49c 100644
--- a/btr-web/btr-main-app/app/router.options.ts
+++ b/btr-web/btr-main-app/app/router.options.ts
@@ -17,6 +17,17 @@ export default <RouterConfig> {
           getBusinessNameCrumb,
           getBeneficialOwnerChangeCrumb
         ],
+        buttonControl: {
+          // FUTURE: pass action functions from SI store
+          leftButtons: [
+            { action: () => {}, label: 'Cancel', variant: 'outline' },
+            { action: () => {}, label: 'Save and Resume Later', variant: 'outline' },
+            { action: () => {}, label: 'Save', variant: 'outline' }
+          ],
+          rightButtons: [
+            { action: () => {}, icon: 'i-mdi-chevron-right', label: 'Review and Confirm', trailing: true }
+          ]
+        },
         layout: 'business',
         title: 'Beneficial Owner Change'
       }
diff --git a/btr-web/btr-main-app/cypress/e2e/layouts/buttonControl.cy.ts b/btr-web/btr-main-app/cypress/e2e/layouts/buttonControl.cy.ts
new file mode 100644
index 00000000..6d43006b
--- /dev/null
+++ b/btr-web/btr-main-app/cypress/e2e/layouts/buttonControl.cy.ts
@@ -0,0 +1,18 @@
+describe('Layout -> ButtonControl', () => {
+  it('shows button control in the business layout for SI change', () => {
+    cy.visit('/')
+    cy.wait(1000)
+    cy.get('#bcros-button-control').should('exist')
+    cy.get('[data-cy=button-control-left-button]').should('have.length', 3)
+    cy.get('[data-cy=button-control-left-button]').eq(0).should('have.text', 'Cancel')
+    cy.get('[data-cy=button-control-left-button]').eq(1).should('have.text', 'Save and Resume Later')
+    cy.get('[data-cy=button-control-left-button]').eq(2).should('have.text', 'Save')
+    cy.get('[data-cy=button-control-right-button]').should('have.length', 1)
+    cy.get('[data-cy=button-control-right-button]').eq(0).should('have.text', 'Review and Confirm')
+  })
+
+  it('does NOT show button control in the person layout for profile', () => {
+    cy.visit('/my-registries-details')
+    cy.get('#bcros-button-control').should('not.exist')
+  })
+})

From f0473ba8aa27c1a5653e60b8e6ce59951c912df5 Mon Sep 17 00:00:00 2001
From: Kial Jinnah <kialjinnah@gmail.com>
Date: Wed, 22 Nov 2023 09:39:58 -0800
Subject: [PATCH 2/3] updates

Signed-off-by: Kial Jinnah <kialjinnah@gmail.com>
---
 btr-web/btr-common-components/lang/en.json    |  2 +-
 .../components/bcros/ButtonControl.vue        |  9 +++--
 btr-web/btr-layouts/layouts/business.vue      | 13 ++++++--
 btr-web/btr-layouts/layouts/default.vue       |  3 --
 .../components/bcros/ButtonControl.spec.ts    |  9 ++++-
 btr-web/btr-main-app/app/router.options.ts    | 11 ++-----
 btr-web/btr-main-app/utils/button-controls.ts | 33 +++++++++++++++++++
 7 files changed, 60 insertions(+), 20 deletions(-)
 create mode 100644 btr-web/btr-main-app/utils/button-controls.ts

diff --git a/btr-web/btr-common-components/lang/en.json b/btr-web/btr-common-components/lang/en.json
index 84d3e78c..0a0fd6d2 100644
--- a/btr-web/btr-common-components/lang/en.json
+++ b/btr-web/btr-common-components/lang/en.json
@@ -22,7 +22,7 @@
       "cancel": "Cancel",
       "reviewConfirm": "Review and Confirm",
       "save": "Save",
-      "saveResume": "Save and Resume"
+      "saveExit": "Save and Resume Later"
     },
     "birthdate": "Birthdate",
     "competency": "Competency",
diff --git a/btr-web/btr-layouts/components/bcros/ButtonControl.vue b/btr-web/btr-layouts/components/bcros/ButtonControl.vue
index 051661b0..2d467876 100644
--- a/btr-web/btr-layouts/components/bcros/ButtonControl.vue
+++ b/btr-web/btr-layouts/components/bcros/ButtonControl.vue
@@ -36,8 +36,11 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
-  leftButtons?: ButtonControlI[],
-  rightButtons?: ButtonControlI[]
+const props = defineProps<{
+  leftButtonConstructors?:(() => ButtonControlI)[],
+  rightButtonConstructors?:(() => ButtonControlI)[]
 }>()
+
+const leftButtons = computed(() => props.leftButtonConstructors?.map(getBtn => getBtn()) || [])
+const rightButtons = computed(() => props.rightButtonConstructors?.map(getBtn => getBtn()) || [])
 </script>
diff --git a/btr-web/btr-layouts/layouts/business.vue b/btr-web/btr-layouts/layouts/business.vue
index 979a3caa..5b0bac78 100644
--- a/btr-web/btr-layouts/layouts/business.vue
+++ b/btr-web/btr-layouts/layouts/business.vue
@@ -6,7 +6,10 @@
     <div class="mx-auto px-4 w-full max-w-[1360px]">
       <slot />
     </div>
-    <BcrosButtonControl :left-buttons="leftButtons" :right-buttons="rightButtons" />
+    <BcrosButtonControl
+      :left-button-constructors="leftButtonConstructors"
+      :right-button-constructors="rightButtonConstructors"
+    />
     <BcrosFooter :app-version="version" />
   </div>
 </template>
@@ -14,8 +17,12 @@
 <script setup lang="ts">
 const route = useRoute()
 const crumbConstructors = computed(() => (route?.meta?.breadcrumbs || []) as (() => BreadcrumbI)[])
-const leftButtons = computed(() => (route?.meta?.buttonControl?.leftButtons || []) as (() => ButtonControlI)[])
-const rightButtons = computed(() => (route?.meta?.buttonControl?.rightButtons || []) as (() => ButtonControlI)[])
+const leftButtonConstructors = computed(() => {
+  return route?.meta?.buttonControl?.leftButtons || [] as (() => ButtonControlI)[]
+})
+const rightButtonConstructors = computed(() => {
+  return route?.meta?.buttonControl?.rightButtons || [] as (() => ButtonControlI)[]
+})
 
 const version = useRuntimeConfig().public.version
 </script>
diff --git a/btr-web/btr-layouts/layouts/default.vue b/btr-web/btr-layouts/layouts/default.vue
index 90e77c98..b3bd8578 100644
--- a/btr-web/btr-layouts/layouts/default.vue
+++ b/btr-web/btr-layouts/layouts/default.vue
@@ -5,7 +5,6 @@
     <div class="mx-auto px-4 w-full max-w-[1360px]">
       <slot />
     </div>
-    <BcrosButtonControl :left-buttons="leftButtons" :right-buttons="rightButtons" />
     <BcrosFooter :app-version="version" />
   </div>
 </template>
@@ -13,8 +12,6 @@
 <script setup lang="ts">
 const route = useRoute()
 const crumbConstructors = computed(() => (route?.meta?.breadcrumbs || []) as (() => BreadcrumbI)[])
-const leftButtons = computed(() => (route?.meta?.buttonControl?.leftButtons || []) as (() => ButtonControlI)[])
-const rightButtons = computed(() => (route?.meta?.buttonControl?.rightButtons || []) as (() => ButtonControlI)[])
 
 const version = useRuntimeConfig().public.version
 </script>
diff --git a/btr-web/btr-layouts/tests/unit/components/bcros/ButtonControl.spec.ts b/btr-web/btr-layouts/tests/unit/components/bcros/ButtonControl.spec.ts
index dfaa6cd8..4805684c 100644
--- a/btr-web/btr-layouts/tests/unit/components/bcros/ButtonControl.spec.ts
+++ b/btr-web/btr-layouts/tests/unit/components/bcros/ButtonControl.spec.ts
@@ -25,7 +25,14 @@ describe('Button Control tests', () => {
   ]
 
   beforeEach(() => {
-    wrapper = mount(BcrosButtonControl, { props: { leftButtons, rightButtons } })
+    wrapper = mount(
+      BcrosButtonControl,
+      {
+        props: {
+          leftButtonConstructors: leftButtons.map(btn => () => btn),
+          rightButtonConstructors: rightButtons.map(btn => () => btn)
+        }
+      })
   })
   afterEach(() => {
     wrapper.unmount()
diff --git a/btr-web/btr-main-app/app/router.options.ts b/btr-web/btr-main-app/app/router.options.ts
index 4856f49c..090b6a4d 100644
--- a/btr-web/btr-main-app/app/router.options.ts
+++ b/btr-web/btr-main-app/app/router.options.ts
@@ -18,15 +18,8 @@ export default <RouterConfig> {
           getBeneficialOwnerChangeCrumb
         ],
         buttonControl: {
-          // FUTURE: pass action functions from SI store
-          leftButtons: [
-            { action: () => {}, label: 'Cancel', variant: 'outline' },
-            { action: () => {}, label: 'Save and Resume Later', variant: 'outline' },
-            { action: () => {}, label: 'Save', variant: 'outline' }
-          ],
-          rightButtons: [
-            { action: () => {}, icon: 'i-mdi-chevron-right', label: 'Review and Confirm', trailing: true }
-          ]
+          leftButtons: [getSIChangeCancel, getSIChangeSaveExit, getSIChangeSave],
+          rightButtons: [getSIChangeConfirm]
         },
         layout: 'business',
         title: 'Beneficial Owner Change'
diff --git a/btr-web/btr-main-app/utils/button-controls.ts b/btr-web/btr-main-app/utils/button-controls.ts
new file mode 100644
index 00000000..cd2e2956
--- /dev/null
+++ b/btr-web/btr-main-app/utils/button-controls.ts
@@ -0,0 +1,33 @@
+// FUTURE: pass action functions from SI store
+export function getSIChangeCancel (): ButtonControlI {
+  return {
+    action: () => {},
+    label: useI18n().t('labels.buttons.cancel'),
+    variant: 'outline'
+  }
+}
+
+export function getSIChangeConfirm (): ButtonControlI {
+  return {
+    action: () => {},
+    icon: 'i-mdi-chevron-right',
+    label: useI18n().t('labels.buttons.reviewConfirm'),
+    trailing: true
+  }
+}
+
+export function getSIChangeSave (): ButtonControlI {
+  return {
+    action: () => {},
+    label: useI18n().t('labels.buttons.save'),
+    variant: 'outline'
+  }
+}
+
+export function getSIChangeSaveExit (): ButtonControlI {
+  return {
+    action: () => {},
+    label: useI18n().t('labels.buttons.saveExit'),
+    variant: 'outline'
+  }
+}

From 5cfdbec3dc2db0a907ec6ef7400d0af039b27317 Mon Sep 17 00:00:00 2001
From: Kial Jinnah <kialjinnah@gmail.com>
Date: Thu, 23 Nov 2023 08:55:38 -0800
Subject: [PATCH 3/3] updated comment

Signed-off-by: Kial Jinnah <kialjinnah@gmail.com>
---
 btr-web/btr-layouts/components/bcros/BusinessDetails.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/btr-web/btr-layouts/components/bcros/BusinessDetails.vue b/btr-web/btr-layouts/components/bcros/BusinessDetails.vue
index 7bbb2f83..494d3172 100644
--- a/btr-web/btr-layouts/components/bcros/BusinessDetails.vue
+++ b/btr-web/btr-layouts/components/bcros/BusinessDetails.vue
@@ -52,7 +52,7 @@ function loadComponentData (identifier: string) {
 // watcher required because layouts start rendering before the route is initialized
 watch(() => route.params.identifier as string, loadComponentData)
 onBeforeMount(() => {
-  // onMounted required for refresh case (route will be set already so ^ watcher will not fire)
+  // onBeforeMount required for refresh case (route will be set already so ^ watcher will not fire)
   if (route.params.identifier) {
     loadComponentData(route.params.identifier as string)
   }