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