updates

Signed-off-by: Kial Jinnah <kialjinnah@gmail.com>

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",

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>

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

@@ -6,16 +6,23 @@
     <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>
 
 <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>

btr-web/btr-layouts/layouts/default.vue

@@ -5,16 +5,13 @@
     <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>
 
 <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>

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()

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'

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