18359 filing control

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' }
     },

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",
+      "saveExit": "Save and Resume Later"
+    },
     "birthdate": "Birthdate",
     "competency": "Competency",
     "citizenship": "Citizenship",

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>

btr-web/btr-layouts/components/bcros/BusinessDetails.vue

@@ -51,8 +51,8 @@ function loadComponentData (identifier: string) {
 }
 // watcher required because layouts start rendering before the route is initialized
 watch(() => route.params.identifier as string, loadComponentData)
-onMounted(() => {
-  // onMounted required for refresh case (route will be set already so ^ watcher will not fire)
+onBeforeMount(() => {
+  // 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)
   }

btr-web/btr-layouts/components/bcros/ButtonControl.vue

@@ -0,0 +1,46 @@
+<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">
+const props = defineProps<{
+  leftButtonConstructors?:(() => ButtonControlI)[],
+  rightButtonConstructors?:(() => ButtonControlI)[]
+}>()
+
+const leftButtons = computed(() => props.leftButtonConstructors?.map(getBtn => getBtn()) || [])
+const rightButtons = computed(() => props.rightButtonConstructors?.map(getBtn => getBtn()) || [])
+</script>

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
+}

btr-web/btr-layouts/layouts/business.vue

@@ -6,13 +6,23 @@
     <div class="mx-auto px-4 w-full max-w-[1360px]">
       <slot />
     </div>
+    <BcrosButtonControl
+      :left-button-constructors="leftButtonConstructors"
+      :right-button-constructors="rightButtonConstructors"
+    />
     <BcrosFooter :app-version="version" />
   </div>
 </template>
 
 <script setup lang="ts">
 const route = useRoute()
 const crumbConstructors = computed(() => (route?.meta?.breadcrumbs || []) as (() => BreadcrumbI)[])
+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>

btr-web/btr-layouts/tests/unit/components/bcros/ButtonControl.spec.ts

@@ -0,0 +1,64 @@
+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: {
+          leftButtonConstructors: leftButtons.map(btn => () => btn),
+          rightButtonConstructors: rightButtons.map(btn => () => btn)
+        }
+      })
+  })
+  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()
+    }
+  })
+})

btr-web/btr-main-app/app/router.options.ts

@@ -17,6 +17,10 @@ export default <RouterConfig> {
           getBusinessNameCrumb,
           getBeneficialOwnerChangeCrumb
         ],
+        buttonControl: {
+          leftButtons: [getSIChangeCancel, getSIChangeSaveExit, getSIChangeSave],
+          rightButtons: [getSIChangeConfirm]
+        },
         layout: 'business',
         title: 'Beneficial Owner Change'
       }

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')
+  })
+})

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'
+  }
+}