EMBCESSMOD-5139 EMBCESSMOD-5141 EMBCESSMOD-5142 EMBCESSMOD-5233: Self…

… serve Interac E-Transfer, review, submission modal, validations (#2105)

* WIP Setup Self serve support stepper form

* working eligible self serve confirmation screen

* format files

* fix lint issues

* download images to show in the app
- fix showing info messages
- fix dialog scroll overflow

* wip

* Refactor support forms
- fix styling

* Upgrade ng-opengen-api
- Generate api services

* setup types forms for self serve support details form

* Get draft data and show it in the forms
- prepare data to submit the support draft

* Setup optout dialog component
- add showing loading screen

* Setup etransfer and review steps

* Fix loading screen
- Fix totalAmount fields
- fix getting totals
- Fix dialog for total amount zero

* Fix etransfer and review forms steps

* setup submission dialog
- setup contact email form controls
- setup review form controls
- setup compare fields validator
- Fix showing error messages and loading spinner

* fix lint issues

* fix formating

---------

Co-authored-by: Hemanth Kona <Hemanth.Kona@quartech.com>

registrants/src/UI/embc-registrant/src/app/core/components/dialog-components/self-serve-submissoin-dialog/self-serve-submission-dialog.component.html

@@ -0,0 +1,72 @@
+<div class="row" style="justify-content: flex-end">
+  <button class="close-image close-button-style" mat-icon-button aria-label="Close" mat-dialog-close>
+    <img src="/assets/images/close.svg" height="20" width="20" />
+    <img src="/assets/images/close_onhover.svg" height="20" width="20" />
+  </button>
+</div>
+<div style="display: flex; flex-direction: column; gap: var(--size-1); align-items: center">
+  <img src="../../../../assets/images/check-mark-icon.svg" style="width: 80px; height: 80px" alt="check_mark" />
+  <h1 mat-dialog-title>Support Submission Complete</h1>
+  <p class="card-heading">Your e-Transfer request is being processed.</p>
+</div>
+
+<mat-dialog-content>
+  <h2 style="font-size: var(--size-3); font-weight: bold">Next Steps</h2>
+  <p>1. <b>Amount:</b> $ {{ data?.totalAmount }}</p>
+  <p>
+    @switch (data?.notificationPreference) {
+      @case (ETransferNotificationPreference.Email) {
+        <div style="display: flex">
+          <div style="width: 240px">2. <b>e-Transfer Notification:</b></div>
+          <div style="width: 160px">
+            {{ data?.eTransferDetails?.eTransferEmail }}
+          </div>
+        </div>
+      }
+      @case (ETransferNotificationPreference.Mobile) {
+        <div style="display: flex">
+          <div style="width: 240px">2. <b>e-Transfer Notification:</b></div>
+          <div style="width: 160px">
+            {{ data?.eTransferDetails?.eTransferMobile }}
+          </div>
+        </div>
+        <div style="display: flex">
+          <div style="width: 240px">Contact Email Address</div>
+          <div style="width: 160px">
+            {{ data?.eTransferDetails?.contactEmail }}
+          </div>
+        </div>
+      }
+      @case (ETransferNotificationPreference.EmailAndMobile) {
+        <div style="display: flex">
+          <div style="width: 240px">2. <b>e-Transfer Notification:</b></div>
+          <div style="width: 160px">
+            {{ data?.eTransferDetails?.eTransferMobile }}
+          </div>
+        </div>
+        <div style="display: flex">
+          <div style="width: 240px">&nbsp;</div>
+          <div style="width: 160px">
+            {{ data?.eTransferDetails?.eTransferEmail }}
+          </div>
+        </div>
+      }
+    }
+  </p>
+  <p>
+    3. <b>Support Contact:</b> While most e-Transfers are processed immediately, there are instances where processing
+    delays can occur. If your e-Transfer is not received within 24 hours, please contact <br />
+    <a>1-800-585-9559</a>.
+  </p>
+  <p>
+    4. <b>No Further Action Required:</b> You DO NOT need to meet with a responder at a reception centre. For
+    information about evacuation orders and alerts, please visit your Local Emergency Programs website or
+    <br />
+    <a href="https://EmergencyInfoBC.ca" target="blank">EmergencyInfoBC.ca</a>.
+  </p>
+  <p>5. <b>Email Confirmation:</b> A confirmation email will be sent to the email on file for your records.</p>
+</mat-dialog-content>
+
+<mat-dialog-actions style="justify-content: center">
+  <button class="button-p" style="max-width: 280px" cdkFocusInitial mat-button mat-dialog-close>Close</button>
+</mat-dialog-actions>

registrants/src/UI/embc-registrant/src/app/core/components/dialog-components/self-serve-submissoin-dialog/self-serve-submission-dialog.component.scss

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  padding: var(--size-3);
+}
+
+:host p {
+  margin-bottom: var(--size-2);
+}

registrants/src/UI/embc-registrant/src/app/core/components/dialog-components/self-serve-submissoin-dialog/self-serve-submission-dialog.component.ts

@@ -0,0 +1,25 @@
+import { Component, Inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { SubmitSupportsRequest } from '../../../api/models';
+import { ETransferNotificationPreference } from '../../../model/e-transfer-notification-preference.model';
+
+@Component({
+  selector: 'app-ess-file-self-serve-submitssion-dialog',
+  standalone: true,
+  imports: [MatDialogModule, MatButtonModule],
+  templateUrl: './self-serve-submission-dialog.component.html',
+  styleUrl: './self-serve-submission-dialog.component.scss'
+})
+export class SelfServeSubmissionDialogComponent {
+  ETransferNotificationPreference = ETransferNotificationPreference;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
+      totalAmount: number;
+      eTransferDetails: SubmitSupportsRequest['eTransferDetails'];
+      notificationPreference: ETransferNotificationPreference;
+    }
+  ) {}
+}

registrants/src/UI/embc-registrant/src/app/core/model/e-transfer-notification-preference.model.ts

@@ -0,0 +1,5 @@
+export enum ETransferNotificationPreference {
+  Email = 'Email',
+  Mobile = 'Mobile',
+  EmailAndMobile = 'Email & Mobile'
+}

registrants/src/UI/embc-registrant/src/app/core/services/customValidation.service.ts

@@ -83,6 +83,31 @@ export class CustomValidationService {
     };
   }
 
+  /**
+   * Checks if the email and confirm email field matches
+   */
+  compare({ fieldName }: { fieldName: string }): ValidatorFn {
+    return (control: AbstractControl): { [key: string]: boolean } | null => {
+      if (control) {
+        const value = control.parent.get(fieldName).value;
+        const confirmValue = control.value;
+        if (
+          value !== undefined &&
+          confirmValue !== undefined &&
+          value !== null &&
+          confirmValue !== null &&
+          value !== '' &&
+          confirmValue !== ''
+        ) {
+          if (value.toLowerCase() !== confirmValue.toLowerCase()) {
+            return { compare: true };
+          }
+        }
+      }
+      return null;
+    };
+  }
+
   requiredConfirmEmailValidator(): ValidatorFn {
     return (control: AbstractControl): { [key: string]: boolean } | null => {
       if (control) {

registrants/src/UI/embc-registrant/src/app/core/services/globalConstants.ts

@@ -78,7 +78,7 @@ export const incidentalsNeedDialog: DialogContent = {
 
 export const interacETransferDialog: DialogContent = {
   title: 'Interac e-Transfers',
-  text: 'Please Note: While the majority of Interac e-Transfers are processed immediately, there are instances where processing delays may occur'
+  text: 'Please Note: While the majority of Interac e-Transfers are processed immediately, there are instances where processing delays may occur.'
 };
 
 export const interacOptOut: DialogContent = {