Feature/personal information new layout 977 (#581)

* personal info page card and dropdown added

* username added, pannel modified

* mobile view added

* test cases fix

* test case modified

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

@@ -1,76 +1,99 @@
 <div class="container" uiPidpInjectViewportCss>
   <app-breadcrumb [breadcrumbs]="breadcrumbsData"></app-breadcrumb>
   <ui-page mode="full" [form]="formState.form" (submitted)="onSubmit()">
-    <ui-page-header>{{ title }}</ui-page-header>
-    <ui-page-section>
-      <ui-page-section-subheader
-        icon="assignment_ind"
-        heading="Personal Information">
-        <ng-container uiPageSectionSubheaderDesc>
-          Provide the following information to complete your Provider Identity
-          Profile.
-        </ng-container>
-      </ui-page-section-subheader>
-    </ui-page-section>
+    <h1>Personal Information</h1>
+    <div>
+      <p>
+        Welcome to OneHealthID <b>{{userName}}</b>. Before you get started using
+        the systems available to you, we just need some information for our
+        records. This will be a one time setup of some general information we
+        need from you, you can provide this information now, or at your leisure.
+        But you will be directed where you left off at your next login.
+      </p>
+      <p><b> Let's get started.</b></p>
+      <p>
+        In the next few steps, we'll be asking for your contact, college, and
+        user agreement signing. Please enter you contact information for our
+        records.
+      </p>
+    </div>
+
+    <div class="cards card-styles">
+      <div class="card-header-icon">
+        <div class="card-icon">
+          <img
+            src="/assets/images/icons/perm-contact-calendar.svg"
+            alt="Contact Calendar" />
+        </div>
+      </div>
+      <h2>BC Services Card information</h2>
+      <app-user-info [user]="user$ | async"></app-user-info>
+    </div>
 
     <ui-page-section>
-      <ui-page-section-subheader heading="Name">
+      <ui-page-section-subheader>
         <ng-container uiPageSectionSubheaderDesc>
           <span *ngIf="(identityProvider$ | async) | isHighAssurance">
             This information comes from the BC Services Card. If you use a
             different name in your college licence, select "My name is different
             on my college licence".
           </span>
+          <p class="light-color">
+            This will not change your BC Services card information.
+          </p>
         </ng-container>
       </ui-page-section-subheader>
 
-      <app-user-info [user]="user$ | async"></app-user-info>
+      <div class="row expansion-item-container">
+        <div class="expansion-item col-sm-10">
+          <mat-expansion-panel
+            class="expansion-panel"
+            #panel
+            hideToggle
+            (opened)="panelOpenState.set(true)"
+            (closed)="panelOpenState.set(false)">
+            <mat-expansion-panel-header>
+              <mat-panel-title
+                ><b
+                  >My name is different on my college licence</b
+                ></mat-panel-title
+              >
+              <mat-icon>{{panel.expanded ? 'remove' : 'add'}}</mat-icon>
+            </mat-expansion-panel-header>
+            <!--body-->
+            <h1>Preferred Name</h1>
+            <ng-container uiPageSectionSubheaderDesc>
+              If you use a name professionally that is different from your legal
+              name, enter it here.
+              <p>
+                Entering a preferred name will not change your BC Services Card
+                name.
+              </p>
+            </ng-container>
 
-      <ui-toggle-content
-        *ngIf="(identityProvider$ | async) | isHighAssurance"
-        label="My name is different on my college licence"
-        [checked]="hasPreferredName"
-        (toggle)="onPreferredNameToggle($event)">
-        <ui-page-section-subheader heading="Preferred Name">
-          <ng-container uiPageSectionSubheaderDesc>
-            If you use a name professionally that is different from your legal
-            name, enter it here.
-            <span>
-              Entering a preferred name will not change your BC Services Card
-              name.
-            </span>
-          </ng-container>
-        </ui-page-section-subheader>
-        <ui-preferred-name-form
-          [form]="formState.form"></ui-preferred-name-form>
-      </ui-toggle-content>
+            <ui-preferred-name-form
+              [form]="formState.form"></ui-preferred-name-form>
+          </mat-expansion-panel>
+        </div>
+      </div>
     </ui-page-section>
 
     <ui-page-section>
-      <ui-page-section-subheader heading="Contact Information">
-        <ng-container uiPageSectionSubheaderDesc>
-          Provide your contact information. Please use an email that you check
-          regularly.
-        </ng-container>
-      </ui-page-section-subheader>
+      <h1>Contact Information</h1>
+      <ng-container uiPageSectionSubheaderDesc>
+        Provide your contact information. Please use an email that you check
+        regularly.
+      </ng-container>
 
       <ui-contact-info-form
+        class="contact-information"
         [form]="formState.form"
         (emailChanges)="onEmailInputChange($event)"></ui-contact-info-form>
     </ui-page-section>
 
-    <ui-page-footer>
-      <button
-        mat-stroked-button
-        uiPageFooterAction
-        type="button"
-        color="primary"
-        (click)="onBack()">
-        Back Home
-      </button>
-
+    <ui-page-footer [mode]="'reverse'">
       <button mat-flat-button uiPageFooterAction type="submit" color="primary">
-        Save Information
+        {{(profileStatus === '1') ? 'Continue' : 'Save Information'}}
       </button>
     </ui-page-footer>
   </ui-page>

workspace/apps/pidp/src/app/features/profile/pages/personal-information/personal-information.page.scss

@@ -1,5 +1,60 @@
 .viewport-all {
   padding: 1.25rem 0.75rem;
+  h1 {
+    color: #036;
+    font-size: 3.125rem;
+    font-weight: 700;
+    margin-bottom: 0;
+    padding-bottom: 1rem;
+  }
+
+  & .card {
+    display: flex;
+    flex-direction: column;
+    padding-right: calc(var(--gap) * 0.5);
+    position: relative;
+    line-height: 1.5rem;
+  }
+
+  & .card-styles {
+    border-radius: 1.25rem;
+    border: 1px solid #ccc;
+    background: #fff;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 25.1875rem;
+    height: 11.875rem;
+    padding: 1.25rem;
+
+    h2 {
+      color: #036;
+      font-size: 1.5rem;
+      font-weight: 700;
+      padding-top: 0.25rem;
+      margin-bottom: 0.75rem;
+    }
+  }
+
+  .light-color {
+    color: #ccc;
+    font-size: 1rem;
+  }
+
+  .expansion-item-container {
+    padding: 0 16px;
+    .expansion-item {
+      border-radius: 0.25rem;
+      border: 1px solid #c2c2c2;
+      padding: 0;
+
+      .mat-expansion-panel-header {
+        padding: 0 12px 0 28px;
+
+        .mat-icon {
+          margin-top: 0.25rem;
+        }
+      }
+    }
+  }
 }
 
 .viewport-small {
@@ -13,3 +68,31 @@
     font-size: 0.9rem;
   }
 }
+
+.viewport-small,
+.viewport-xsmall {
+  h1 {
+    font-size: 40px;
+    line-height: 1.1;
+  }
+}
+
+.viewport-xsmall {
+  & .card-styles {
+    width: 18rem;
+    height: 14rem;
+  }
+
+  .expansion-item-container {
+    padding: 0 10px;
+    .expansion-item {
+      .mat-expansion-panel-header {
+        padding: 0 12px 0 10px;
+
+        .mat-icon {
+          margin-top: 1rem;
+        }
+      }
+    }
+  }
+}

workspace/apps/pidp/src/app/features/profile/pages/personal-information/personal-information.page.ts

@@ -1,8 +1,10 @@
 import { AsyncPipe, NgIf } from '@angular/common';
 import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, signal } from '@angular/core';
 import { FormBuilder, FormControl } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -37,7 +39,10 @@ import { LoggerService } from '@app/core/services/logger.service';
 import { IdentityProvider } from '@app/features/auth/enums/identity-provider.enum';
 import { User } from '@app/features/auth/models/user.model';
 import { AuthorizedUserService } from '@app/features/auth/services/authorized-user.service';
+import { ProfileStatus } from '@app/features/portal/models/profile-status.model';
+import { PortalResource } from '@app/features/portal/portal-resource.service';
 import { LookupResource } from '@app/modules/lookup/lookup-resource.service';
+import { BreadcrumbComponent } from '@app/shared/components/breadcrumb/breadcrumb.component';
 import { IsHighAssurancePipe } from '@app/shared/pipes/is-high-assurance.pipe';
 
 import {
@@ -49,7 +54,6 @@ import { UserInfoComponent } from './components/user-info/user-info.component';
 import { PersonalInformationFormState } from './personal-information-form-state';
 import { PersonalInformationResource } from './personal-information-resource.service';
 import { PersonalInformation } from './personal-information.model';
-import { BreadcrumbComponent } from '@app/shared/components/breadcrumb/breadcrumb.component';
 
 @Component({
   selector: 'app-personal-information',
@@ -63,7 +67,10 @@ import { BreadcrumbComponent } from '@app/shared/components/breadcrumb/breadcrum
     ContactFormComponent,
     InjectViewportCssClassDirective,
     IsHighAssurancePipe,
+    InjectViewportCssClassDirective,
     MatButtonModule,
+    MatExpansionModule,
+    MatIconModule,
     NgIf,
     PageComponent,
     PageFooterActionDirective,
@@ -89,11 +96,15 @@ export class PersonalInformationPage
   public warningMessage: string;
   public emailChanged: Subject<null>;
   public userEmail: string;
+  public userName: string;
+  public userDOB: string;
+  public profileStatus: string;
 
   public IdentityProvider = IdentityProvider;
 
   // ui-page is handling this.
   public showOverlayOnSubmit = false;
+  public readonly panelOpenState = signal(false);
   public breadcrumbsData: Array<{ title: string; path: string }> = [
     { title: 'Home', path: '' },
     { title: 'Personal Information', path: '' },
@@ -105,6 +116,7 @@ export class PersonalInformationPage
     private router: Router,
     private partyService: PartyService,
     private resource: PersonalInformationResource,
+    private portalResource: PortalResource,
     private authorizedUserService: AuthorizedUserService,
     private logger: LoggerService,
     private _snackBar: MatSnackBar,
@@ -122,6 +134,9 @@ export class PersonalInformationPage
       'Our system is not familiar with this email address, please double check the spelling. If everything is correct hit save information, and our system will update.';
     this.emailChanged = new Subject<null>();
     this.userEmail = '';
+    this.userName = '';
+    this.userDOB = '';
+    this.profileStatus = '';
   }
 
   public onPreferredNameToggle({ checked }: ToggleContentChange): void {
@@ -163,6 +178,25 @@ export class PersonalInformationPage
         }
       });
 
+    if (this.user$ !== undefined) {
+      this.user$.pipe().subscribe((userFound) => {
+        if (userFound) {
+          this.userName = userFound.firstName + ' ' + userFound.lastName;
+        }
+      });
+    }
+
+    this.getProfileStatus(this.partyService.partyId)
+      .pipe()
+      .subscribe((profileStatus: ProfileStatus | null) => {
+        if (!profileStatus) {
+          return '';
+        }
+        this.profileStatus =
+          profileStatus.status.userAccessAgreement.statusCode.toString();
+        return this.profileStatus;
+      });
+
     this.resource
       .get(partyId)
       .pipe(
@@ -176,9 +210,9 @@ export class PersonalInformationPage
           return of(null);
         }),
       )
-      .subscribe((model: PersonalInformation | null) =>
-        this.handlePreferredNameChange(!!model?.preferredFirstName),
-      );
+      .subscribe((model: PersonalInformation | null) => {
+        this.handlePreferredNameChange(!!model?.preferredFirstName);
+      });
   }
 
   protected performSubmission(): Observable<void> {
@@ -209,4 +243,8 @@ export class PersonalInformationPage
   private navigateToRoot(): void {
     this.router.navigate([this.route.snapshot.data.routes.root]);
   }
+
+  private getProfileStatus(partyId: number): Observable<ProfileStatus | null> {
+    return this.portalResource.getProfileStatus(partyId);
+  }
 }

workspace/apps/pidp/src/scss/material/_material-overrides.scss

@@ -179,6 +179,13 @@
   overflow: visible !important;
 }
 
+.expansion-item,
+.contact-information {
+  mat-label {
+    font-weight: 700;
+    color: #313132;
+  }
+}
 //
 // SideNav
 //

workspace/libs/shared/ui/src/lib/components/contact-info-form/contact-info-form.component.html

@@ -1,5 +1,5 @@
 <div class="row" [formGroup]="form">
-  <div class="col">
+  <div class="col-sm-7">
     <mat-form-field class="w-100 email">
       <mat-label>Email</mat-label>
       <input matInput formControlName="email" (keyup)="onKeyUp()" />
@@ -9,7 +9,7 @@
       </mat-error>
     </mat-form-field>
   </div>
-  <div class="col">
+  <div class="col-sm-3">
     <mat-form-field class="w-100">
       <mat-label>Phone Number</mat-label>
       <input