VIH-10160 Added new booking status to display in booking list and detail views

.gitignore

@@ -350,4 +350,4 @@ jasmine-tests
 .DS_Store
 
 .env
-.angular/
+.angular/

AdminWebsite/AdminWebsite.AcceptanceTests/packages.lock.json

@@ -161,8 +161,8 @@
       },
       "BookingsApi.Client": {
         "type": "Transitive",
-        "resolved": "1.44.57",
-        "contentHash": "TcoiHRRew9LRr6eXlNOjRIna8/9vigUTVdCXI2xwr6gnWbMUhq9D0Xfl9kBD+hhW8ATPKL7x9NIcv+fxqf6wJw==",
+        "resolved": "1.47.6",
+        "contentHash": "O9oihWH0vAm2A4l3SFRCyq/cyQR+in3JmkLLotnf0kvVk1Uk5MqScYcthHlCmIUa1EODQfFZBaMrkGKGl488bA==",
         "dependencies": {
           "Microsoft.AspNetCore.Mvc.Core": "2.2.5"
         }
@@ -2669,7 +2669,7 @@
         "type": "Project",
         "dependencies": {
           "AspNetCore.HealthChecks.Uris": "[6.0.3, )",
-          "BookingsApi.Client": "[1.44.57, )",
+          "BookingsApi.Client": "[1.47.6, )",
           "FluentValidation.AspNetCore": "[10.4.0, )",
           "LaunchDarkly.ServerSdk": "[7.0.3, )",
           "MicroElements.Swashbuckle.FluentValidation": "[5.7.0, )",

AdminWebsite/AdminWebsite.IntegrationTests/packages.lock.json

@@ -102,8 +102,8 @@
       },
       "BookingsApi.Client": {
         "type": "Transitive",
-        "resolved": "1.44.57",
-        "contentHash": "TcoiHRRew9LRr6eXlNOjRIna8/9vigUTVdCXI2xwr6gnWbMUhq9D0Xfl9kBD+hhW8ATPKL7x9NIcv+fxqf6wJw==",
+        "resolved": "1.47.6",
+        "contentHash": "O9oihWH0vAm2A4l3SFRCyq/cyQR+in3JmkLLotnf0kvVk1Uk5MqScYcthHlCmIUa1EODQfFZBaMrkGKGl488bA==",
         "dependencies": {
           "Microsoft.AspNetCore.Mvc.Core": "2.2.5"
         }
@@ -2101,7 +2101,7 @@
         "type": "Project",
         "dependencies": {
           "AspNetCore.HealthChecks.Uris": "[6.0.3, )",
-          "BookingsApi.Client": "[1.44.57, )",
+          "BookingsApi.Client": "[1.47.6, )",
           "FluentValidation.AspNetCore": "[10.4.0, )",
           "LaunchDarkly.ServerSdk": "[7.0.3, )",
           "MicroElements.Swashbuckle.FluentValidation": "[5.7.0, )",

AdminWebsite/AdminWebsite.UnitTests/packages.lock.json

@@ -107,8 +107,8 @@
       },
       "BookingsApi.Client": {
         "type": "Transitive",
-        "resolved": "1.44.57",
-        "contentHash": "TcoiHRRew9LRr6eXlNOjRIna8/9vigUTVdCXI2xwr6gnWbMUhq9D0Xfl9kBD+hhW8ATPKL7x9NIcv+fxqf6wJw==",
+        "resolved": "1.47.6",
+        "contentHash": "O9oihWH0vAm2A4l3SFRCyq/cyQR+in3JmkLLotnf0kvVk1Uk5MqScYcthHlCmIUa1EODQfFZBaMrkGKGl488bA==",
         "dependencies": {
           "Microsoft.AspNetCore.Mvc.Core": "2.2.5"
         }
@@ -1979,7 +1979,7 @@
         "type": "Project",
         "dependencies": {
           "AspNetCore.HealthChecks.Uris": "[6.0.3, )",
-          "BookingsApi.Client": "[1.44.57, )",
+          "BookingsApi.Client": "[1.47.6, )",
           "FluentValidation.AspNetCore": "[10.4.0, )",
           "LaunchDarkly.ServerSdk": "[7.0.3, )",
           "MicroElements.Swashbuckle.FluentValidation": "[5.7.0, )",

AdminWebsite/AdminWebsite/AdminWebsite.csproj

@@ -32,7 +32,7 @@
   </PropertyGroup>
   <ItemGroup>
     <PackageReference Include="AspNetCore.HealthChecks.Uris" Version="6.0.3" />
-    <PackageReference Include="BookingsApi.Client" Version="1.44.57" />
+    <PackageReference Include="BookingsApi.Client" Version="1.47.6" />
     <PackageReference Include="LaunchDarkly.ServerSdk" Version="7.0.3" />
     <PackageReference Include="MicroElements.Swashbuckle.FluentValidation" Version="5.7.0" />
     <PackageReference Include="Microsoft.Identity.Client" Version="4.51.0" />

AdminWebsite/AdminWebsite/ClientApp/package.json

@@ -77,7 +77,7 @@
     "eslint-plugin-import": "^2.27.5",
     "jasmine-core": "~3.7.1",
     "jasmine-spec-reporter": "~6.0.0",
-    "karma": "^6.4.1",
+    "karma": "^6.4.2",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "^2.0.3",
     "karma-jasmine": "~4.0.1",

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/booking-confirmation/booking-confirmation.component.spec.ts

@@ -155,6 +155,21 @@ describe('BookingConfirmationComponent', () => {
             // assert
             expect(component.bookingConfirmedSuccessfully).toBe(true);
         });
+        it('should return true, when booking successful but without a judge', () => {
+            // arrange: set spy to return Failed status hearing
+            newHearing.status = BookingStatus.BookedWithoutJudge;
+            videoHearingsServiceSpy.getHearingById.and.returnValue(of(newHearing));
+            TestBed.overrideProvider(VideoHearingsService, { useValue: videoHearingsServiceSpy });
+            TestBed.compileComponents();
+            fixture = TestBed.createComponent(BookingConfirmationComponent);
+            component = fixture.componentInstance;
+            fixture.detectChanges();
+            // act
+            component.ngOnInit();
+            component.retrieveSavedHearing();
+            // assert
+            expect(component.bookingConfirmedSuccessfully).toBe(true);
+        });
         it('should return false, when booking unsuccessful', () => {
             // arrange: set spy to return Failed status hearing
             newHearing.status = BookingStatus.Failed;

AdminWebsite/AdminWebsite/ClientApp/src/app/booking/booking-confirmation/booking-confirmation.component.ts

@@ -31,7 +31,12 @@ export class BookingConfirmationComponent implements OnInit {
     ) {}
 
     get bookingConfirmedSuccessfully(): boolean {
-        return this.status === BookingStatus.Booked || this.status === BookingStatus.Created;
+        return (
+            this.status === BookingStatus.Booked ||
+            this.status === BookingStatus.Created ||
+            this.status === BookingStatus.BookedWithoutJudge ||
+            this.status === BookingStatus.ConfirmedWithoutJudge
+        );
     }
 
     ngOnInit() {

AdminWebsite/AdminWebsite/ClientApp/src/app/bookings-list/booking-details/booking-details.component.css

@@ -14,3 +14,10 @@
     color: #ffffff;
     background-color: #d4351c;
 }
+
+.vh-booking-detail-status {
+    width: 25%;
+    padding-top: 7px;
+    padding-bottom: 7px;
+    float: left;
+}

AdminWebsite/AdminWebsite/ClientApp/src/app/bookings-list/booking-details/booking-details.component.html

@@ -9,11 +9,11 @@
         <div class="vh-title">
           <h1 class="govuk-heading-l" id="hearingNumber">{{ hearing.HearingCaseNumber }}</h1>
         </div>
-        <div *ngIf="hearing.isCancelled" id="lblCancelled" class="vh-cancelled-booking">{{ hearing.Status }}</div>
+        <div class="vh-booking-detail-status">
+          <app-booking-status [bookingDetails]="hearing"></app-booking-status>
+        </div>
         <div *ngIf="hearing.isCancelled" id="lblCancelledDetails" class="vh-cancelled-reason">{{ hearing.CancelReason }}</div>
       </div>
-      <div *ngIf="hearing.isCreated" id="lblCreated" class="vh-created-booking">Confirmed</div>
-      <div *ngIf="hearing.hasBookingConfirmationFailed" id="lblFailedConfirmation" class="vh-created-confirmation-failed">Failed</div>
     </div>
   </div>
 

AdminWebsite/AdminWebsite/ClientApp/src/app/bookings-list/booking-status/booking-status.component.html

@@ -0,0 +1,16 @@
+<span *ngIf="this.hasNoJudge" class="vh-sml vh-nojudge">NO JUDGE ASSIGNED</span>
+<div *ngIf="this.showTime">
+  <div class="vh-sml vh-col govuk-!-margin-top-2">{{ bookingDetails.StartTime | amLocal | amDateFormat : 'h:mm a' }}</div>
+  <div class="govuk-hint vh-sml vh-col vh-font-black">listed for {{ bookingDetails.DurationInHoursAndMinutes }}</div>
+</div>
+<div
+  *ngIf="statusMessage !== null"
+  class="vh-status"
+  [ngClass]="{
+    'vh-cancelled-booking': bookingDetails.isCancelled,
+    'vh-created-booking': bookingDetails.isCreated || bookingDetails.hasConfirmationWithNoJudge,
+    'vh-confirmation-failed': bookingDetails.hasBookingConfirmationFailed
+  }"
+>
+  {{ this.statusMessage }}
+</div>

AdminWebsite/AdminWebsite/ClientApp/src/app/bookings-list/booking-status/booking-status.component.scss

@@ -0,0 +1,41 @@
+@import 'govuk-frontend/govuk/base';
+.vh-sml {
+  font-size: smaller;
+}
+
+.vh-status {
+  color: govuk-colour('white');
+  margin-left: 9px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  width: 50%;
+  font-weight: 200;
+  text-align: center;
+}
+
+.vh-cancelled-booking,
+.vh-confirmation-failed {
+  background-color: govuk-colour('red');
+}
+
+.vh-created-booking {
+  background-color: govuk-colour('blue');
+}
+
+.vh-nojudge {
+  background: govuk-colour('red');
+  color: govuk-colour('white');
+  padding: 0px 4px;
+}
+
+.vh-col {
+  margin-left: 10px;
+}
+
+.govuk-hint {
+  margin-bottom: 0;
+}
+
+.vh-font-black {
+  color: govuk-colour('black');
+}

AdminWebsite/AdminWebsite/ClientApp/src/app/bookings-list/booking-status/booking-status.component.spec.ts

@@ -0,0 +1,59 @@
+import { BookingStatusComponent } from './booking-status.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MomentModule } from 'ngx-moment';
+
+describe('BookingStatusComponent', () => {
+    let component: BookingStatusComponent;
+    let fixture: ComponentFixture<BookingStatusComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [BookingStatusComponent],
+            imports: [MomentModule]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(BookingStatusComponent);
+        component = fixture.componentInstance;
+        component.bookingDetails = {} as any;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    describe('statusMessage', () => {
+        it('should return Confirmed when status is Created', () => {
+            component.bookingDetails = { Status: 'Created' } as any;
+            expect(component.statusMessage).toBe('Confirmed');
+        });
+        it('should return Confirmed when status is ConfirmedWithoutJudge', () => {
+            component.bookingDetails = { Status: 'ConfirmedWithoutJudge' } as any;
+            expect(component.statusMessage).toBe('Confirmed');
+        });
+        it('should return Cancelled when status is Cancelled', () => {
+            component.bookingDetails = { Status: 'Cancelled' } as any;
+            expect(component.statusMessage).toBe('Cancelled');
+        });
+        it('should return Failed when status is Failed', () => {
+            component.bookingDetails = { Status: 'Failed' } as any;
+            expect(component.statusMessage).toBe('Failed');
+        });
+        it('should return null when status is anything else', () => {
+            component.bookingDetails = { Status: 'anything else' } as any;
+            expect(component.statusMessage).toBe(null);
+        });
+    });
+
+    describe('hasNoJudge', () => {
+        it('should return true when status is BookedWithoutJudge', () => {
+            component.bookingDetails = { Status: 'BookedWithoutJudge' } as any;
+            expect(component.hasNoJudge).toBe(true);
+        });
+
+        it('should return false when status is ConfirmedWithoutJudge', () => {
+            component.bookingDetails = { Status: 'ConfirmedWithoutJudge' } as any;
+            expect(component.hasNoJudge).toBe(true);
+        });
+    });
+});

AdminWebsite/AdminWebsite/ClientApp/src/app/bookings-list/booking-status/booking-status.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+import { BookingsDetailsModel } from '../../common/model/bookings-list.model';
+@Component({
+    selector: 'app-booking-status',
+    templateUrl: './booking-status.component.html',
+    styleUrls: ['./booking-status.component.scss']
+})
+export class BookingStatusComponent {
+    @Input() bookingDetails: BookingsDetailsModel;
+    @Input() showTime = false;
+
+    public get statusMessage(): string {
+        switch (this.bookingDetails.Status) {
+            case 'Created':
+            case 'ConfirmedWithoutJudge':
+                return 'Confirmed';
+            case 'Cancelled':
+                return 'Cancelled';
+            case 'Failed':
+                return 'Failed';
+            default:
+                return null;
+        }
+    }
+
+    public get hasNoJudge(): boolean {
+        return this.bookingDetails.Status === 'BookedWithoutJudge' || this.bookingDetails.Status === 'ConfirmedWithoutJudge';
+    }
+}

AdminWebsite/AdminWebsite/ClientApp/src/app/bookings-list/bookings-list.module.ts

@@ -12,6 +12,7 @@ import { CopySipComponent } from './copy-sip/copy-sip.component';
 import { CopyConferencePhoneComponent } from './copy-conference-phone/copy-conference-phone.component';
 import { CopyJoinLinkComponent } from './copy-join-link/copy-join-link.component';
 import { NgSelectModule } from '@ng-select/ng-select';
+import { BookingStatusComponent } from './booking-status/booking-status.component';
 
 @NgModule({
     imports: [SharedModule, BookingsListRoutingModule, PopupModule, MomentModule, NgSelectModule],
@@ -23,15 +24,17 @@ import { NgSelectModule } from '@ng-select/ng-select';
         HearingDetailsComponent,
         CopySipComponent,
         CopyConferencePhoneComponent,
-        CopyJoinLinkComponent
+        CopyJoinLinkComponent,
+        BookingStatusComponent
     ],
     providers: [],
     exports: [
         BookingsListComponent,
         BookingDetailsComponent,
         ParticipantDetailsComponent,
         BookingParticipantListComponent,
-        HearingDetailsComponent
+        HearingDetailsComponent,
+        BookingStatusComponent
     ]
 })
 export class BookingsListModule {}

AdminWebsite/AdminWebsite/ClientApp/src/app/bookings-list/bookings-list/bookings-list.component.html

@@ -144,12 +144,7 @@ <h1 class="govuk-heading-l">{{ title }}</h1>
       >
         <div class="govuk-grid-row vh-row vh-a" (click)="rowSelected(b, i)" [attr.id]="b + '_' + i">
           <div class="govuk-grid-column-one-quarter">
-            <span *ngIf="!detail?.JudgeName && ejudFeatureFlag" class="vh-sml vh-nojudge">NO JUDGE ASSIGNED</span>
-            <div class="vh-sml vh-col govuk-!-margin-top-2">{{ detail.StartTime | amLocal | amDateFormat : 'h:mm a' }}</div>
-            <div class="govuk-hint vh-sml vh-col vh-font-black">listed for {{ detail.DurationInHoursAndMinutes }}</div>
-            <div *ngIf="detail.isCancelled" class="vh-cancelled-booking">{{ detail.Status }}</div>
-            <div *ngIf="detail.isCreated" class="vh-created-booking">Confirmed</div>
-            <div *ngIf="detail.hasBookingConfirmationFailed" class="vh-confirmation-failed">Failed</div>
+            <app-booking-status [bookingDetails]="detail" [showTime]="true"></app-booking-status>
           </div>
           <div class="govuk-grid-column-one-quarter">
             <div class="vh-sml">{{ detail.HearingCaseNumber }}</div>