From 6590641577ebfc36149a6459880e49b659251b52 Mon Sep 17 00:00:00 2001
From: owillborn <112968185+owillborn@users.noreply.github.com>
Date: Mon, 24 Oct 2022 15:10:37 -0700
Subject: [PATCH] 13959 UI authorization component (#1001)

* Added authorization component to review, UI tweaks
* Review changes and test added for authorization
---
 .../views/mhrInformation/MhrInformation.vue   | 43 +++++++++++++------
 ppr-ui/tests/unit/MhrInformation.spec.ts      | 39 ++++++++++++++++-
 2 files changed, 69 insertions(+), 13 deletions(-)

diff --git a/ppr-ui/src/views/mhrInformation/MhrInformation.vue b/ppr-ui/src/views/mhrInformation/MhrInformation.vue
index c3c05fb67..0fca4295b 100644
--- a/ppr-ui/src/views/mhrInformation/MhrInformation.vue
+++ b/ppr-ui/src/views/mhrInformation/MhrInformation.vue
@@ -16,7 +16,7 @@
           <v-col cols="9">
             <v-row no-gutters id="mhr-information-header" class="pt-3 pb-3 soft-corners-top">
               <v-col cols="auto">
-                <h1>Manufactured Home Information</h1>
+                <h1>{{isReviewMode ? 'Review and Confirm' : 'Manufactured Home Information'}}</h1>
                 <p class="mt-7">
                   This is the current information for this registration as of
                   <span class="font-weight-bold">{{ asOfDateTime }}</span>.
@@ -32,22 +32,31 @@
 
               <!-- MHR Information Review Section -->
               <template v-if="isReviewMode">
-                <HomeOwnersTable
-                  class="px-7"
-                  isMhrTransfer
-                  isReadonlyTable
-                  :homeOwners="reviewOwners"
-                  :currentHomeOwners="getMhrTransferCurrentHomeOwners"
-                />
+                <!-- TODO: Add some form of transferDetails review, either review flag in existing component or
+                new component. To be added in ticket 13905 -->
+                <section>
+                  <HomeOwnersTable
+                    class="px-7"
+                    isMhrTransfer
+                    isReadonlyTable
+                    :homeOwners="reviewOwners"
+                    :currentHomeOwners="getMhrTransferCurrentHomeOwners"
+                  />
+                </section>
+                <section id="transfer-certify-section" class="mt-10 py-4">
+                  <CertifyInformation
+                    :setShowErrors="validateAuthorizationError"
+                    @certifyValid="authorizationValid = $event"
+                  />
+                </section>
               </template>
 
               <!-- MHR Information Section -->
               <template v-else>
                 <HomeOwners isMhrTransfer class="mt-n2" />
+                <TransferDetails :validateTransferDetails="validateTransferDetails" />
               </template>
             </section>
-
-            <TransferDetails :validateTransferDetails="validateTransferDetails" />
           </v-col>
           <v-col class="pl-6 pt-5" cols="3">
             <aside>
@@ -89,7 +98,7 @@ import {
   submitMhrTransfer,
   updateMhrDraft
 } from '@/utils'
-import { StickyContainer } from '@/components/common'
+import { StickyContainer, CertifyInformation } from '@/components/common'
 import { useHomeOwners, useMhrInformation } from '@/composables'
 import { FeeSummaryTypes } from '@/composables/fees/enums'
 import { HomeOwnersTable } from '@/components/mhrRegistration/HomeOwners'
@@ -106,7 +115,8 @@ export default defineComponent({
     HomeOwners,
     TransferDetails,
     HomeOwnersTable,
-    StickyContainer
+    StickyContainer,
+    CertifyInformation
   },
   props: {
     appReady: {
@@ -150,6 +160,8 @@ export default defineComponent({
       isReviewMode: false,
       validate: false,
       validateTransferDetails: false,
+      authorizationValid: false,
+      validateAuthorizationError: false,
       feeType: FeeSummaryTypes.MHR_TRANSFER, // FUTURE STATE: To be dynamic, dependent on what changes have been made
       isAuthenticated: computed((): boolean => {
         return Boolean(sessionStorage.getItem(SessionStorageKeys.KeyCloakToken))
@@ -228,7 +240,13 @@ export default defineComponent({
     const goToReview = async (): Promise<void> => {
       localState.validate = true
       localState.validateTransferDetails = true
+      // If already in review mode, file the transfer
       if (localState.isReviewMode) {
+        // Check authorization checkbox
+        if (!localState.authorizationValid) {
+          localState.validateAuthorizationError = true
+          return
+        }
         localState.loading = true
         const apiData = await buildApiData()
         const mhrTransferFiling = await submitMhrTransfer(apiData, getMhrInformation.value.mhrNumber)
@@ -238,6 +256,7 @@ export default defineComponent({
           ? goToDash()
           : console.log(mhrTransferFiling?.error) // Handle Schema or Api errors here..
       }
+      // Otherwise if transfer is valid, enter review mode
       if (localState.isValidTransfer) {
         localState.isReviewMode = true
       }
diff --git a/ppr-ui/tests/unit/MhrInformation.spec.ts b/ppr-ui/tests/unit/MhrInformation.spec.ts
index 7e0a63532..fd80723f1 100644
--- a/ppr-ui/tests/unit/MhrInformation.spec.ts
+++ b/ppr-ui/tests/unit/MhrInformation.spec.ts
@@ -7,7 +7,7 @@ import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
 
 // local components
 import { HomeOwners, MhrInformation } from '@/views'
-import { StickyContainer } from '@/components/common'
+import { ButtonsStacked, StickyContainer } from '@/components/common'
 import mockRouter from './MockRouter'
 import { HomeTenancyTypes, RouteNames } from '@/enums'
 import { HomeOwnersTable } from '@/components/mhrRegistration/HomeOwners'
@@ -16,6 +16,7 @@ import { mockedAddedPerson, mockedRemovedPerson, mockedOrganization, mockedPerso
 import { MhrRegistrationHomeOwnerGroupIF, MhrRegistrationHomeOwnerIF } from '@/interfaces'
 import { nextTick } from '@vue/composition-api'
 import { TransferDetails } from '@/components/mhrTransfers'
+import { CertifyInformation } from '@/components/common'
 
 Vue.use(Vuetify)
 
@@ -250,6 +251,16 @@ describe('Mhr Information', () => {
   // TRANSFER DETAILS COMPONENT TESTS
 
   it('should render Transfer Details component', async () => {
+    setupCurrentHomeOwners()
+    wrapper.vm.$data.dataLoaded = true
+    await Vue.nextTick()
+
+    expect(wrapper.props().isMhrTransfer).toBe(true)
+    expect(wrapper.vm.$data.getMhrTransferCurrentHomeOwners.length).toBe(1)
+    expect(wrapper.vm.$data.getMhrTransferHomeOwners.length).toBe(1)
+
+    expect(wrapper.findComponent(MhrInformation).exists()).toBe(true)
+    
     const mhrTransferDetailsComponent = wrapper.findComponent(MhrInformation).findComponent(TransferDetails)
     expect(mhrTransferDetailsComponent.exists()).toBeTruthy()
 
@@ -270,4 +281,30 @@ describe('Mhr Information', () => {
     // Check that Consideration displayed Declared Value on blur
     expect(mhrTransferDetailsComponent.vm.$data.consideration).toBe('$123.00')
   })
+
+  it('should render Authorization component on review', async () => {
+    setupCurrentHomeOwners()
+    wrapper.vm.$data.dataLoaded = true
+    await Vue.nextTick()
+
+    expect(wrapper.props().isMhrTransfer).toBe(true)
+    expect(wrapper.vm.$data.getMhrTransferCurrentHomeOwners.length).toBe(1)
+    expect(wrapper.vm.$data.getMhrTransferHomeOwners.length).toBe(1)
+    expect(wrapper.findComponent(MhrInformation).exists()).toBe(true)
+
+    // Enter review mode
+    expect(wrapper.find('#btn-stacked-submit').exists()).toBe(true)
+    const submitButton = wrapper.find('#btn-stacked-submit')
+    submitButton.trigger('click')
+    await Vue.nextTick()
+
+    // Check if Authorization renders in review mode
+    expect(wrapper.findComponent(MhrInformation).findComponent(CertifyInformation).exists()).toBe(true)
+
+    // Check for component's attributes
+    const authorizationComponent = wrapper.findComponent(MhrInformation).findComponent(CertifyInformation)
+    expect(authorizationComponent.find('#certify-summary').exists()).toBeTruthy()
+    expect(authorizationComponent.find('#certify-information').exists()).toBeTruthy()
+    expect(authorizationComponent.find('#checkbox-certified').exists()).toBeTruthy()
+  })
 })