From ab476275523d9196a42efd9bf7e81c198d59c753 Mon Sep 17 00:00:00 2001
From: karthik-aot <78374865+karthik-aot@users.noreply.github.com>
Date: Fri, 9 Jul 2021 09:25:07 -0700
Subject: [PATCH] Bug/8162 (#1724)

---
 .../staff/review-task/AccountInformation.vue  |  2 +-
 .../auth/staff/review-task/AccountStatus.vue  | 20 +++++++++++++++++--
 auth-web/src/models/Task.ts                   |  1 +
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/auth-web/src/components/auth/staff/review-task/AccountInformation.vue b/auth-web/src/components/auth/staff/review-task/AccountInformation.vue
index d82dae5bb6..15167bf7b2 100644
--- a/auth-web/src/components/auth/staff/review-task/AccountInformation.vue
+++ b/auth-web/src/components/auth/staff/review-task/AccountInformation.vue
@@ -75,7 +75,7 @@ export default class AccountInformation extends Vue {
 
   @Prop({ default: 'Account Information' }) private title: string
   @Prop({ default: {} }) accountUnderReview: any
-  @Prop({ default: {} }) accountUnderReviewAddress: Address
+  @Prop({ default: null }) accountUnderReviewAddress: Address
 
   AccessType = AccessType
   Account = Account
diff --git a/auth-web/src/components/auth/staff/review-task/AccountStatus.vue b/auth-web/src/components/auth/staff/review-task/AccountStatus.vue
index 4e0b19b117..cd8c50fa52 100644
--- a/auth-web/src/components/auth/staff/review-task/AccountStatus.vue
+++ b/auth-web/src/components/auth/staff/review-task/AccountStatus.vue
@@ -7,6 +7,12 @@
           >{{ statusLabel }}
           </v-col>
     </v-row>
+    <v-row v-if="isAccountOnHold">
+      <v-col class="col-12 col-sm-5 py-2">Reason</v-col>
+      <v-col class="py-2">
+          {{ accountOnHoldRemarks }}
+      </v-col>
+    </v-row>
     <v-row v-if="!isPendingReviewPage">
       <v-col class="col-12 col-sm-5 py-2">
         <span v-if="taskDetails.relationshipStatus === TaskRelationshipStatusEnum.ACTIVE">Approved By</span>
@@ -26,8 +32,8 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
+import { TaskRelationshipStatus, TaskStatus } from '@/util/constants'
 import { Task } from '@/models/Task'
-import { TaskRelationshipStatus } from '@/util/constants'
 import moment from 'moment'
 
 @Component({})
@@ -45,11 +51,21 @@ export default class AccountStatusTab extends Vue {
       case TaskRelationshipStatus.REJECTED:
         return 'Rejected'
       case TaskRelationshipStatus.PENDING_STAFF_REVIEW:
-        return 'Pending'
+        // Eg, If the task pertaining to the BCEID account review is on hold then we display the status as "on hold" else "pending"
+        return this.isAccountOnHold ? 'On Hold' : 'Pending'
       default:
         return ''
     }
   }
+
+  private get isAccountOnHold (): boolean {
+    return this.taskDetails.status === TaskStatus.HOLD
+  }
+
+  private get accountOnHoldRemarks (): string {
+    return this.taskDetails?.remarks
+  }
+
   private formatDate (date: Date): string {
     return moment(date).format('MMM DD, YYYY')
   }
diff --git a/auth-web/src/models/Task.ts b/auth-web/src/models/Task.ts
index 58f0abcc1e..ed08cf497f 100644
--- a/auth-web/src/models/Task.ts
+++ b/auth-web/src/models/Task.ts
@@ -17,6 +17,7 @@ export interface Task {
     user?: number;
     dueDate?: Date;
     accountId?:number;
+    remarks?: string;
 }
 export interface TaskFilterParams {
     statuses?: string[];