PIDP-762 update college ux to match mockups

workspace/apps/pidp/src/app/features/profile/pages/college-licence/college-licence-declaration/college-licence-declaration-form-state.ts

@@ -50,15 +50,20 @@ export class CollegeLicenceDeclarationFormState extends AbstractFormState<PartyL
 
   public buildForm(): void {
     this.formInstance = this.fb.group({
-      collegeCode: [0, [Validators.required]],
-      licenceNumber: [''],
+      collegeCode: [{ disabled: false, value:0 }, [Validators.required]],
+      licenceNumber: [{ disabled: false, value: '' }],
     });
 
     this.collegeCode.valueChanges.subscribe((value) =>
       this.onCollegeCodeValueChanged(value),
     );
   }
 
+  public disableCollegeLicenseForm(): void {
+    this.collegeCode.disable();
+    this.licenceNumber.disable();
+  }
+
   private onCollegeCodeValueChanged(collegeCode: number | null): void {
     if (collegeCode) {
       this.licenceNumber.setValidators([Validators.required]);

workspace/apps/pidp/src/app/features/profile/pages/college-licence/college-licence-declaration/college-licence-declaration.page.html

@@ -15,15 +15,13 @@
 
   <form novalidate [formGroup]="formState.form" (ngSubmit)="onSubmit()">
     <section>
-      <h2 class="header">College Licence</h2>
+      <h2 class="header">LICENCE</h2>
+      <h3 class="college-licence">College licence information</h3>
       <div class="content">
-        <p>Provide details for your active college licence.</p>
-        <label
-          id="college-licence-declaration-college-licence"
-          class="field-label"
-          >College Licence</label
-        >
+        <p class="college-licence-introduction">Provide details for your college licence if you have one. If you do not have a college licence,
+          select "None" and you can update this information at a later date</p>
         <mat-form-field>
+          <mat-label class="field-label">College Licence</mat-label>
           <mat-select
             formControlName="collegeCode"
             aria-labelledby="college-licence-declaration-college-licence">
@@ -34,12 +32,6 @@ <h2 class="header">College Licence</h2>
           </mat-select>
           <mat-error>Required</mat-error>
         </mat-form-field>
-        <label
-          *ngIf="formState.collegeCode.value"
-          id="college-licence-declaration-licence-number"
-          class="field-label"
-          >Licence Number</label
-        >
         <p *ngIf="showNurseValidationInfo">
           If you are a nurse, this number may be referred to as your "Nurse ID".
           You can confirm you have the correct number by checking it
@@ -51,26 +43,27 @@ <h2 class="header">College Licence</h2>
             >here</a
           >.
         </p>
-        <mat-form-field *ngIf="formState.collegeCode.value">
+        <mat-form-field *ngIf="formState.collegeCode.value" >
+          <mat-label class="field-label">Licence Number</mat-label>
           <input
             matInput
             formControlName="licenceNumber"
-            aria-labelledby="college-licence-declaration-licence-number" />
+            aria-labelledby="college-licence-declaration-licence-number"/>
           <mat-error>Required</mat-error>
+          <mat-hint>
+            Example would be a 5 digit code
+          </mat-hint>
         </mat-form-field>
       </div>
     </section>
+    <div>
+      <p class="footer-text">
+        Our system will automatically authenticate your college licence after information has been filled.
+      </p>
+    </div>
     <div class="actions">
-      <button
-        mat-stroked-button
-        uiPageFooterAction
-        type="button"
-        color="primary"
-        (click)="onBack()">
-        Back Home
-      </button>
-      <button mat-flat-button uiPageFooterAction type="submit" color="primary">
-        Save Information
+      <button mat-flat-button uiPageFooterAction type="submit" color="primary"  [disabled]="disableSearch">
+        Search
       </button>
     </div>
   </form>

workspace/apps/pidp/src/app/features/profile/pages/college-licence/college-licence-declaration/college-licence-declaration.page.scss

@@ -14,6 +14,7 @@ p {
   --button-margin-right: 15px;
   --actions-padding: 0 20px;
   padding: 1.25rem 0.75rem;
+  padding-top: 0px !important;
 }
 .viewport-large {
   --box-padding: 40px 0;
@@ -30,6 +31,29 @@ p {
 .viewport-small {
   --box-padding: 0 0 20px;
   --field-max-width: 400px;
+  & .content {
+    padding: 0px !important;
+  }
+  & .actions {
+    padding: 0px !important;
+  }
+}
+.viewport-xsmall {
+  & .college-licence {
+    color: pidp.$bcgov-color-primary;
+    margin-left: 15px;
+    font-weight: 600;
+    font-size: 25px !important;
+    padding-bottom: 0px !important;
+  }
+
+  & .footer-text {
+    margin-left: 20px;
+  }
+
+  & .header {
+    padding-left: 15px !important;
+   }
 }
 .viewport-all {
   padding: var(--box-padding);
@@ -38,18 +62,29 @@ p {
     flex-direction: column;
 
     & .header {
-      padding: var(--header-padding);
-      background-color: $lightgrey;
+     color:skyblue;
+    }
+
+    & .college-licence {
+      color: pidp.$bcgov-color-primary;
+      font-weight: 600;
+      font-size: 50px;
+      padding-bottom: 20px;
     }
 
     & .content {
       display: flex;
       flex-direction: column;
       padding: var(--content-padding);
 
+      & .college-licence-introduction {
+        padding-bottom: 10px;
+      }
+
       & .field-label {
         font-size: var(--field-label-font-size);
         font-weight: bold;
+        color: black;
       }
 
       & mat-form-field {
@@ -62,5 +97,12 @@ p {
     & button:not(:last-of-type) {
       margin-right: var(--button-margin-right);
     }
+    button {
+      width: 100px;
+    }
+  }
+  & .footer-text {
+    font-weight: bold;
+    padding-top: 15px;
   }
 }

workspace/apps/pidp/src/app/features/profile/pages/college-licence/college-licence-declaration/college-licence-declaration.page.ts

@@ -1,6 +1,6 @@
 import { NgFor, NgIf } from '@angular/common';
 import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
@@ -64,11 +64,15 @@ export class CollegeLicenceDeclarationPage
   extends AbstractFormPage<CollegeLicenceDeclarationFormState>
   implements OnInit
 {
+  @Input() public disableCollegeCode: boolean = false;
+  @Input() public disableCollegeLicenceNumber: boolean = false;
+
   public title: string;
   public formState: CollegeLicenceDeclarationFormState;
   public colleges: CollegeLookup[];
   public showOverlayOnSubmit = true;
   public licenceDeclarationFailed = false;
+  public disableSearch = false;
 
   public get showNurseValidationInfo(): boolean {
     const isNurse =
@@ -99,6 +103,10 @@ export class CollegeLicenceDeclarationPage
   }
 
   public ngOnInit(): void {
+    if(this.disableCollegeCode && this.disableCollegeLicenceNumber) {
+      this.formState.disableCollegeLicenseForm();
+      this.disableSearch = true;
+    }
     const partyId = this.partyService.partyId;
     if (!partyId) {
       this.logger.error('No party ID was provided');
@@ -123,6 +131,7 @@ export class CollegeLicenceDeclarationPage
 
   protected performSubmission(): Observable<string | null> {
     const partyId = this.partyService.partyId;
+    this.formState.disableCollegeLicenseForm();
 
     return partyId && this.formState.json
       ? this.resource.updateDeclaration(partyId, this.formState.json)
@@ -145,8 +154,8 @@ export class CollegeLicenceDeclarationPage
     this.stateService.setNamedState(PidpStateName.dashboard, newState);
 
     if (cpn) {
-      this.router.navigate(
-        [ProfileRoutes.routePath(ProfileRoutes.COLLEGE_LICENCE_INFO)],
+            this.router.navigate(
+        [ProfileRoutes.routePath(ProfileRoutes.COLLEGE_LICENCE_INFO), {showCollegeLicenceDeclarationPage: true}],
         { replaceUrl: true },
       );
     } else if (this.formState.collegeCode.value === 0) {

workspace/apps/pidp/src/app/features/profile/pages/college-licence/college-licence-information/college-licence-information.page.html

@@ -1,58 +1,101 @@
-<section class="component-container container" uiPidpInjectViewportCss>
+<div class="container breadcrumb-top" uiPidpInjectViewportCss>
+  <nav class="breadcrumb">
+    <ul>
+      <li>
+        <a (click)="onBack()">Home</a>
+      </li>
+      <li>
+        <a class="fa-duotone">
+          <fa-icon [icon]="faAngleRight">
+          </fa-icon>
+        </a>
+      </li>
+      <li>
+        <a>
+          College Licence
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<div *ngIf="showCollegeLicenceDeclarationPage">
+  <app-college-licence-declaration [disableCollegeCode]=true [disableCollegeLicenceNumber]=true>
+  </app-college-licence-declaration>
+</div>
+<section class="component-container container section-top" uiPidpInjectViewportCss>
+  <div *ngIf="!showCollegeLicenceDeclarationPage">
+    <h3 class="college-licence">
+      College licence information
+    </h3>
+    <p class="college-licence-text">
+      Here you can view your licence information and status.
+      <span>
+        <p>
+          If any of this information is incorrect, please contact your regulatory college.
+        </p>
+      </span>
+    </p>
+  </div>
   <section *ngFor="let alert of alerts" class="alert-box section-box">
     <app-portal-alert
       [heading]="alert.heading"
       [content]="alert.content"></app-portal-alert>
   </section>
-  <h2 class="header">All licence information found in our records</h2>
-  <div class="info-box">
-    <p class="info-here">
-      Here you can view your licence information and status.
-    </p>
-    <p class="info-confirm">
-      If any of this information is incorrect, please contact your regulatory
-      college.
-    </p>
-  </div>
   <div class="licences-box">
     <div
-      *ngFor="let certification of collegeCertifications$ | async"
-      class="licences-licence-box">
-      <div class="licence-icon-box">
-        <fa-icon
-          class="licence-icon-image"
-          [fixedWidth]="true"
-          [icon]="faStethoscope"></fa-icon>
-      </div>
-      <div class="licence-detail-box">
-        <div class="licence-detail-content">
-          <app-college-licence-information-detail
-            class="licence-detail"
-            labelText="Identifier Type:"
-            [valueText]="certification.identifierType"></app-college-licence-information-detail>
-          <app-college-licence-information-detail
-            class="licence-detail"
-            labelText="Status Code:"
-            [valueText]="certification.statusCode"></app-college-licence-information-detail>
-          <app-college-licence-information-detail
-            class="licence-detail"
-            labelText="College ID:"
-            [valueText]="certification.collegeId"></app-college-licence-information-detail>
-          <app-college-licence-information-detail
-            class="licence-detail"
-            labelText="Status Start Date:"
-            [valueText]="certification.statusStartDate"></app-college-licence-information-detail>
-          <app-college-licence-information-detail
-            class="licence-detail"
-            labelText="Provider Role Type:"
-            [valueText]="certification.providerRoleType"></app-college-licence-information-detail>
+      *ngFor="let certification of collegeCertifications$ | async">
+      <div class="card-styles">
+        <div class="card-header-icon">
+          <div class="card-icon">
+            <img
+              src="/assets/images/college-licence-logo.svg"
+              alt="college-licence-logo" />
+          </div>
+        </div>
+        <div class="licence-detail-box">
+          <h2>College information</h2>
+          <div class="licence-detail-content">
+            <app-college-licence-information-detail
+              class="licence-detail"
+              labelText="Identifier Type:"
+              [valueText]="certification.identifierType"></app-college-licence-information-detail>
+              <div
+                class="status-active" *ngIf="certification.statusCode==='ACTIVE'">
+                <label>Status Code:</label>
+                <span>Active</span>
+                <img
+                  src="/assets/images/icons/icon-check-circle.svg"
+                  alt="check circle"
+                />
+              </div>
+              <div
+                class="status-non-active" *ngIf="certification.statusCode !=='ACTIVE'">
+                <label>Status Code:</label>
+                <span>{{certification.statusCode}}</span>
+              </div>
+            <app-college-licence-information-detail
+              class="licence-detail"
+              labelText="College ID:"
+              [valueText]="certification.collegeId"></app-college-licence-information-detail>
+            <app-college-licence-information-detail
+              class="licence-detail"
+              labelText="Status Start Date:"
+              [valueText]="certification.statusStartDate"></app-college-licence-information-detail>
+            <app-college-licence-information-detail
+              class="licence-detail"
+              labelText="Provider Role Type:"
+              [valueText]="certification.providerRoleType"></app-college-licence-information-detail>
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div class="actions">
-    <button mat-stroked-button type="button" color="primary" (click)="onBack()">
-      Back Home
-    </button>
+    <span>
+      <button mat-stroked-button type="button" (click)="onBack()" color="primary">
+        Home
+      </button>
+    </span>
   </div>
+
 </section>