diff --git a/registrants/src/UI/embc-registrant/src/app/core/components/dialog-components/self-serve-submissoin-dialog/self-serve-submission-dialog.component.html b/registrants/src/UI/embc-registrant/src/app/core/components/dialog-components/self-serve-submissoin-dialog/self-serve-submission-dialog.component.html new file mode 100644 index 000000000..607999f3d --- /dev/null +++ b/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 @@ +
+ +
+
+ check_mark +

Support Submission Complete

+

Your e-Transfer request is being processed.

+
+ + +

Next Steps

+

1. Amount: $ {{ data?.totalAmount }}

+

+ @switch (data?.notificationPreference) { + @case (ETransferNotificationPreference.Email) { +

+
2. e-Transfer Notification:
+
+ {{ data?.eTransferDetails?.eTransferEmail }} +
+
+ } + @case (ETransferNotificationPreference.Mobile) { +
+
2. e-Transfer Notification:
+
+ {{ data?.eTransferDetails?.eTransferMobile }} +
+
+
+
Contact Email Address
+
+ {{ data?.eTransferDetails?.contactEmail }} +
+
+ } + @case (ETransferNotificationPreference.EmailAndMobile) { +
+
2. e-Transfer Notification:
+
+ {{ data?.eTransferDetails?.eTransferMobile }} +
+
+
+
 
+
+ {{ data?.eTransferDetails?.eTransferEmail }} +
+
+ } + } +

+

+ 3. Support Contact: 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
+ 1-800-585-9559. +

+

+ 4. No Further Action Required: 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 +
+ EmergencyInfoBC.ca. +

+

5. Email Confirmation: A confirmation email will be sent to the email on file for your records.

+ + + + + diff --git a/registrants/src/UI/embc-registrant/src/app/core/components/dialog-components/self-serve-submissoin-dialog/self-serve-submission-dialog.component.scss b/registrants/src/UI/embc-registrant/src/app/core/components/dialog-components/self-serve-submissoin-dialog/self-serve-submission-dialog.component.scss new file mode 100644 index 000000000..df0941f7a --- /dev/null +++ b/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); +} diff --git a/registrants/src/UI/embc-registrant/src/app/core/components/dialog-components/self-serve-submissoin-dialog/self-serve-submission-dialog.component.ts b/registrants/src/UI/embc-registrant/src/app/core/components/dialog-components/self-serve-submissoin-dialog/self-serve-submission-dialog.component.ts new file mode 100644 index 000000000..87e68bb39 --- /dev/null +++ b/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; + } + ) {} +} diff --git a/registrants/src/UI/embc-registrant/src/app/core/model/e-transfer-notification-preference.model.ts b/registrants/src/UI/embc-registrant/src/app/core/model/e-transfer-notification-preference.model.ts new file mode 100644 index 000000000..a94a1237c --- /dev/null +++ b/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' +} diff --git a/registrants/src/UI/embc-registrant/src/app/core/services/customValidation.service.ts b/registrants/src/UI/embc-registrant/src/app/core/services/customValidation.service.ts index 04a73a057..6e58714a6 100644 --- a/registrants/src/UI/embc-registrant/src/app/core/services/customValidation.service.ts +++ b/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) { diff --git a/registrants/src/UI/embc-registrant/src/app/core/services/globalConstants.ts b/registrants/src/UI/embc-registrant/src/app/core/services/globalConstants.ts index ab1dcdc22..c02f967b9 100644 --- a/registrants/src/UI/embc-registrant/src/app/core/services/globalConstants.ts +++ b/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 = { diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-opt-out-dialog.component.ts b/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-opt-out-dialog.component.ts deleted file mode 100644 index 2c5c5258b..000000000 --- a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-opt-out-dialog.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { Component } from '@angular/core'; -import { MatButtonModule } from '@angular/material/button'; -import { MatDialogModule } from '@angular/material/dialog'; - -@Component({ - standalone: true, - selector: 'app-eligible-self-serve-opt-out-dialog', - imports: [MatDialogModule, MatButtonModule], - template: ` -
-
-

Interac e-Transfer Opt-Out

-
-
- -
-
- - -

Are you sure you want to opt out of self-serve e-transfer?

- - - - - - - `, - styles: [ - ` - :host { - display: block; - padding: var(--size-3); - } - ` - ] -}) -export class EligibleSelfServeOptOutDialogComponent {} diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-support-form.component.html b/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-support-form.component.html deleted file mode 100644 index ad88b7244..000000000 --- a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-support-form.component.html +++ /dev/null @@ -1,327 +0,0 @@ -@if (draftSupportError) { -
- Error: Unable to retrieve Draft Support information. -
-} -
-
- Self Serve Supports -
- @if (isLoadingDraftSupport) { - - } @else { - - -
- Support Details -

- Please review the following and make any necessary edits. Required fields are marked with a red asterisk. -

- @if (showSelfServeShelterAllowanceSupport) { - - -
-

Shelter Allowance

-
- -
- - - - - @for (date of shelterAllowanceDates; track $index) { - - } - - @for (person of draftSupports.householdMembers; track person.id) { - - - @for (date of shelterAllowanceDates; track $index) { - @if ( - supportDraftForm.controls?.shelterAllowance?.controls?.nights && - getDateControl(supportDraftForm.controls.shelterAllowance.controls.nights, person, date) - ?.controls?.isSelected - ) { - - } - } - - } -
{{ date.format('MMM DD, yyy') }}
{{ getPersonName(person.id) }} - -
-
-
- Shelter Allowance is provided at $30 per night based on single occupancy, $10 for each - additional adult and youth and $5 for each additional child. -
- - - } - - @if (showSelfServeFoodSupport) { - - -
-

Food

-
- -
-
- - Groceries - Restaurant - -
- - @if (supportDraftForm.controls.food.controls.fundsFor.value === SupportSubCategory.FoodGroceries) { - -
- - - - @for (date of foodGroceriesDates; track $index) { - - } - - @for (person of draftSupports.householdMembers; track person.id) { - - - @for (date of foodGroceriesDates; track $index) { - @if ( - supportDraftForm.controls?.food?.controls?.groceries && - getDateControl( - supportDraftForm.controls.food.controls.groceries.controls.nights, - person, - date - )?.controls?.isSelected - ) { - - } - } - - } -
{{ date.format('MMM DD, yyy') }}
{{ getPersonName(person.id) }} - -
-
- } - - @if (supportDraftForm.controls.food.controls.fundsFor.value === SupportSubCategory.FoodRestaurant) { - -
- @for ( - person of supportDraftForm.controls?.food?.controls?.restaurant?.controls - ?.includedHouseholdMembers.controls; - track $index - ) { -
- - {{ getPersonName(person.controls.personId.value) }} - -
- } -
- -
- - - - @for (date of foodRestaurantDates; track $index) { - - } - - - - @for ( - meal of supportDraftForm.controls?.food?.controls?.restaurant?.controls?.mealTypes - ?.controls; - track $index - ) { - - } - - - - @for ( - meal of supportDraftForm.controls?.food?.controls?.restaurant?.controls?.mealTypes - ?.controls; - track $index - ) { - - } - - - - @for ( - meal of supportDraftForm.controls?.food?.controls?.restaurant?.controls?.mealTypes - ?.controls; - track $index - ) { - - } - -
{{ date.format('MMM DD, yyy') }}
Breakfast
Lunch
Dinner
-
- } - - @if ( - supportDraftForm.controls?.food?.touched && - supportDraftForm.controls?.food?.controls?.fundsFor?.hasError('required') - ) { - Food is required - } -
-
- Restaurant Meals are provided at $12.75 for breakfast, $14.75 for lunch and - $25.50 for dinner per person per day. Groceries are provided at a daily rate of - $22.50 per person per day. -
- - - } - - @if (showSelfServeClothingSupport) { - - -
-

Clothing

-
- -
-
- @for ( - person of supportDraftForm.controls?.clothing?.controls?.includedHouseholdMembers?.controls; - track $index - ) { -
- - {{ getPersonName(person.controls.personId.value) }} - -
- } -
-
-
- Clothing is provided at $150 per person for the time you are evacuated. -
- - - } - - @if (showSelfServeIncidentsSupport) { - - -
-

Incidentals

-
- -
-
- @for ( - person of supportDraftForm.controls?.incidents?.controls?.includedHouseholdMembers?.controls; - track $index - ) { -
- - {{ getPersonName(person.controls.personId.value) }} - -
- } -
-
-
- Incidentals are provided at $50 per person for the time you are evacuated. -
- - - } - -
- - @if (draftSupports.items?.length > 0) { - - } -
-
- - -
- e-Transfer Details - - - -
- - @if (draftSupports.items?.length > 0) { - - } -
-
- - - Review & Submit - Review Details -
- - @if (draftSupports.items?.length > 0) { - - } -
- - - } -
diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-support-form.component.ts b/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-support-form.component.ts deleted file mode 100644 index e67599928..000000000 --- a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-support-form.component.ts +++ /dev/null @@ -1,612 +0,0 @@ -import { CUSTOM_ELEMENTS_SCHEMA, Component, OnInit, ViewChild } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; -import { MatCardModule } from '@angular/material/card'; -import { MatCheckboxModule } from '@angular/material/checkbox'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatInputModule } from '@angular/material/input'; -import { MatRadioModule } from '@angular/material/radio'; -import { MatStepper, MatStepperModule } from '@angular/material/stepper'; -import * as moment from 'moment'; -import { - DraftSupports, - HouseholdMember, - SelfServeClothingSupport, - SelfServeFoodGroceriesSupport, - SelfServeFoodRestaurantSupport, - SelfServeIncidentalsSupport, - SelfServeShelterAllowanceSupport, - SelfServeSupport, - SelfServeSupportType, - SubmitSupportsRequest, - SupportDay, - SupportSubCategory -} from 'src/app/core/api/models'; -import { SupportsService } from 'src/app/core/api/services'; -import { EvacuationFileDataService } from 'src/app/sharedModules/components/evacuation-file/evacuation-file-data.service'; -import { NeedsAssessmentService } from '../needs-assessment/needs-assessment.service'; -import { MatDialog } from '@angular/material/dialog'; -import { EligibleSelfServeTotalAmountZeroDialogComponent } from './eligible-self-serve-total-amount-zero.component'; -import { AppLoaderComponent } from 'src/app/core/components/app-loader/app-loader.component'; -import { tap } from 'rxjs'; - -type SelfServeSupportFormControl = { - [k in keyof SelfServeSupport]: FormControl; -}; - -interface BaseSelfServeSupportForm extends Omit { - totalAmount: FormControl; -} - -interface SupportPersonForm { - personId: FormControl; - isSelected?: FormControl; -} - -interface SupportPersonDateForm { - date: FormControl; - personId: FormControl; - isSelected?: FormControl; -} - -type SupportDayFormControl = { - [k in keyof SupportDay]: FormControl; -}; - -interface SelfServeSupportDayMealForm extends Omit { - date: FormControl; - breakfast: FormControl; - lunch: FormControl; - dinner: FormControl; -} - -type FundsFor = SupportSubCategory.FoodGroceries | SupportSubCategory.FoodRestaurant | null; - -interface SelfServeFoodRestaurantSupportForm { - includedHouseholdMembers: FormArray>; - mealTypes: FormArray>; - totalAmount: FormControl; -} - -interface SelfServeFoodGroceriesSupportForm { - nights: FormArray>; - totalAmount: FormControl; -} - -interface SelfServeFoodSupportForm { - fundsFor: FormControl; - restaurant: FormGroup; - groceries: FormGroup; -} - -interface SelfServeShelerAllowanceSupportForm extends BaseSelfServeSupportForm { - nights: FormArray>; -} - -interface SelfServeClothingSupportForm extends BaseSelfServeSupportForm { - includedHouseholdMembers: FormArray>; -} - -interface SelfServeIncidentsSupportForm extends BaseSelfServeSupportForm { - includedHouseholdMembers: FormArray>; -} - -interface DraftSupportForm { - shelterAllowance: FormGroup; - food: FormGroup; - clothing: FormGroup; - incidents: FormGroup; -} - -@Component({ - standalone: true, - selector: 'app-eligible-self-serve-support-form', - templateUrl: './eligible-self-serve-support-form.component.html', - imports: [ - MatStepperModule, - MatCardModule, - MatCheckboxModule, - MatRadioModule, - ReactiveFormsModule, - MatFormFieldModule, - MatInputModule, - AppLoaderComponent - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - styles: [ - ` - mat-card { - margin-bottom: var(--size-3); - } - - .mat-mdc-card-content, - .mat-mdc-card-content:first-child, - .mat-mdc-card-content:last-child { - display: flex; - flex-wrap: wrap; - gap: var(--size-3); - justify-content: space-between; - padding: var(--size-3); - } - - :host .mat-mdc-checkbox ::ng-deep label { - font-weight: bold; - font-size: var(--size-2); - line-height: var(--size-6); - } - - .card-question { - font-size: var(--size-2); - margin-bottom: var(--size-2); - } - - table { - min-width: 400px; - } - - th { - font-weight: bold; - padding: var(--size-1); - } - - td { - width: 150px; - word-break: break-word; - padding: var(--size-1); - } - - tr.header-row { - height: 60px; - background: #f2f2f2; - } - - .note-box { - flex: 1 0 300px; - max-width: 400px; - height: min-content; - padding: var(--size-2); - } - ` - ] -}) -export class EligibleSelfServeSupportFormComponent implements OnInit { - isLinear = false; - essFileId = this.needsAssessmentService.getVerifiedEvacuationFileNo(); - SupportSubCategory = SupportSubCategory; - - showSelfServeShelterAllowanceSupport = false; - showSelfServeFoodSupport = false; - showSelfServeClothingSupport = false; - showSelfServeIncidentsSupport = false; - - shelterAllowanceDates: moment.Moment[] = []; - foodGroceriesDates: moment.Moment[] = []; - foodRestaurantDates: moment.Moment[] = []; - - draftSupports: DraftSupports = { - items: [], - householdMembers: [] - }; - - isLoadingDraftSupport = true; - showButtonLoader = false; - draftSupportError = false; - loaderColor = '#169bd5'; - - supportDraftForm = new FormGroup({ - shelterAllowance: new FormGroup({ - totalAmount: new FormControl(0), - nights: new FormArray>([]) - }), - food: new FormGroup({ - fundsFor: new FormControl(null, Validators.required), - restaurant: new FormGroup({ - includedHouseholdMembers: new FormArray([]), - mealTypes: new FormArray([]), - totalAmount: new FormControl(0) - }), - groceries: new FormGroup({ - nights: new FormArray>([]), - totalAmount: new FormControl(0) - }) - }), - clothing: new FormGroup({ - totalAmount: new FormControl(0), - includedHouseholdMembers: new FormArray>([]) - }), - incidents: new FormGroup({ - totalAmount: new FormControl(0), - includedHouseholdMembers: new FormArray>([]) - }) - }); - - eTransferForm: FormGroup = this._formBuilder.group({ - secondCtrl: ['', Validators.required] - }); - - @ViewChild('stepper') stepper: MatStepper; - - constructor( - private _formBuilder: FormBuilder, - private supportService: SupportsService, - public needsAssessmentService: NeedsAssessmentService, - private router: Router, - private route: ActivatedRoute, - private dialog: MatDialog - ) {} - - ngOnInit() { - if (!this.essFileId) { - return; - } - - this.getDraft(); - } - - private getDraft() { - this.supportService.supportsGetDraftSupports({ evacuationFileId: this.essFileId }).subscribe({ - next: (res) => { - this.draftSupports = res; - - this.draftSupports.items.forEach((support) => { - switch (support.type) { - case SelfServeSupportType.ShelterAllowance: - this.createSelfServeShelterAllowanceSupportForm(support as any); - break; - - case SelfServeSupportType.FoodGroceries: - this.createSelfServeFoodGroceriesSupportForm(support as any); - break; - - case SelfServeSupportType.FoodRestaurant: - this.createSelfServeFoodRestaurantSupportForm(support as any); - break; - case SelfServeSupportType.Clothing: - this.createSelfServeClothingSupportForm(support as any); - break; - - case SelfServeSupportType.Incidentals: - this.createSelfServeIncidentsSupportForm(support as any); - break; - - default: - break; - } - }); - }, - error: (err) => { - this.draftSupportError = true; - }, - complete: () => { - this.isLoadingDraftSupport = false; - } - }); - } - - private createSelfServeShelterAllowanceSupportForm(selfServeSupport: SelfServeShelterAllowanceSupport) { - const dates = selfServeSupport.nights.map((n) => moment(n.date, 'YYYY-MM-DD')); - const persons = selfServeSupport.nights[0].includedHouseholdMembers; - - this.createSupportPersonDateForm(this.supportDraftForm.controls.shelterAllowance.controls.nights, persons, dates); - - this.supportDraftForm.controls.shelterAllowance.controls.totalAmount.setValue(selfServeSupport.totalAmount ?? 0); - - this.shelterAllowanceDates = [...dates]; - this.showSelfServeShelterAllowanceSupport = true; - } - - private createSelfServeFoodGroceriesSupportForm(selfServeSupport: SelfServeFoodGroceriesSupport) { - const dates = selfServeSupport.nights.map((n) => moment(n.date, 'YYYY-MM-DD')); - const persons = selfServeSupport.nights[0].includedHouseholdMembers; - - this.createSupportPersonDateForm( - this.supportDraftForm.controls.food.controls.groceries.controls.nights, - persons, - dates - ); - - this.supportDraftForm.controls.food.controls.groceries.controls.totalAmount.setValue( - selfServeSupport.totalAmount ?? 0 - ); - - this.foodGroceriesDates = [...dates]; - this.showSelfServeFoodSupport = true; - } - - private createSelfServeFoodRestaurantSupportForm(selfServeSupport: SelfServeFoodRestaurantSupport) { - const dates = selfServeSupport.meals.map((m) => moment(m.date, 'YYYY-MM-DD')); - selfServeSupport.includedHouseholdMembers.forEach((p) => { - this.supportDraftForm.controls.food.controls.restaurant.controls.includedHouseholdMembers.push( - this.createSupportPersonForm(p) - ); - }); - - selfServeSupport.meals.forEach((m) => { - this.supportDraftForm.controls.food.controls.restaurant.controls.mealTypes.push( - new FormGroup({ - date: new FormControl(moment(m.date, 'YYYY-MM-DD')), - breakfast: new FormControl({ value: m.breakfast, disabled: m.breakfast !== true && m.breakfast !== false }), - lunch: new FormControl({ value: m.lunch, disabled: m.lunch !== true && m.lunch !== false }), - dinner: new FormControl({ value: m.dinner, disabled: m.dinner !== true && m.dinner !== false }) - }) - ); - }); - - this.supportDraftForm.controls.food.controls.restaurant.controls.includedHouseholdMembers.valueChanges.subscribe({ - next: (includedHouseholdMembers) => { - if (includedHouseholdMembers.every((m) => !m.isSelected)) { - this.supportDraftForm.controls.food.controls.restaurant.controls.mealTypes.controls.forEach((m) => { - if (m.controls.breakfast.value === true) m.controls.breakfast.setValue(false); - if (m.controls.lunch.value === true) m.controls.lunch.setValue(false); - if (m.controls.dinner.value === true) m.controls.dinner.setValue(false); - }); - } - } - }); - - this.supportDraftForm.controls.food.controls.restaurant.controls.totalAmount.setValue( - selfServeSupport.totalAmount ?? 0 - ); - - this.foodRestaurantDates = [...dates]; - - this.showSelfServeShelterAllowanceSupport = true; - } - - private createSelfServeClothingSupportForm(selfServeSupport: SelfServeClothingSupport) { - selfServeSupport.includedHouseholdMembers.forEach((p) => { - this.supportDraftForm.controls.clothing.controls.includedHouseholdMembers.push(this.createSupportPersonForm(p)); - }); - - this.supportDraftForm.controls.clothing.controls.totalAmount.setValue(selfServeSupport.totalAmount ?? 0); - - this.showSelfServeClothingSupport = true; - } - - private createSelfServeIncidentsSupportForm(selfServeSupport: SelfServeIncidentalsSupport) { - selfServeSupport.includedHouseholdMembers.forEach((p) => { - this.supportDraftForm.controls.incidents.controls.includedHouseholdMembers.push(this.createSupportPersonForm(p)); - }); - - this.supportDraftForm.controls.incidents.controls.totalAmount.setValue(selfServeSupport.totalAmount ?? 0); - - this.showSelfServeIncidentsSupport = true; - } - - createSupportPersonForm(id: string, isSelected: boolean = true): FormGroup { - return new FormGroup({ personId: new FormControl(id), isSelected: new FormControl(isSelected) }); - } - - createSupportPersonDateForm( - formArray: FormArray>, - perons: string[], - dates: moment.Moment[] - ) { - perons.forEach((p) => { - dates.forEach((d) => { - formArray.push( - new FormGroup({ - personId: new FormControl(p), - isSelected: new FormControl(true), - date: new FormControl(d) - }) - ); - }); - }); - } - - getPersonName(id: string) { - const personDetails = this.draftSupports.householdMembers.find((p) => p.id == id)?.details; - return `${personDetails?.firstName ?? ''} ${personDetails?.lastName ?? ''}`; - } - - getDateControl( - supportPersonDateForm: FormArray>, - person: HouseholdMember, - date: moment.Moment - ): FormGroup { - const personFormGroup = supportPersonDateForm.controls.find( - (p: FormGroup) => p.controls.personId.value === person.id && p.controls.date.value === date - ); - - return personFormGroup; - } - - gotoETransfterStep(formGroup: FormGroup) { - formGroup.markAllAsTouched(); - if (!this.essFileId || formGroup.invalid) return; - this.showButtonLoader = true; - this.calculateSelfServeSupportsTotalAmount().subscribe((res) => { - this.showButtonLoader = false; - if (res.every((s) => s.totalAmount === 0)) - this.dialog.open(EligibleSelfServeTotalAmountZeroDialogComponent, {}).afterClosed().subscribe(); - else this.stepper.next(); - }); - } - - processShelterAllowanceData(): SelfServeShelterAllowanceSupport | null { - const supportFormValue = this.supportDraftForm.value.shelterAllowance; - - const data: SelfServeShelterAllowanceSupport & { $type: 'SelfServeShelterAllowanceSupport' } = { - $type: 'SelfServeShelterAllowanceSupport', - type: SelfServeSupportType.ShelterAllowance, - totalAmount: supportFormValue.totalAmount - }; - - const datesWithMembers: Record = this.getSupportDays( - this.supportDraftForm.controls.shelterAllowance.controls.nights - ); - - data.nights = Object.values(datesWithMembers); - - return data; - } - - processFoodData(): SelfServeFoodGroceriesSupport | SelfServeFoodRestaurantSupport | null { - const supportFormValue = this.supportDraftForm.value.food; - - if (supportFormValue.fundsFor === SupportSubCategory.FoodGroceries) { - const data: SelfServeFoodGroceriesSupport & { $type: 'SelfServeFoodGroceriesSupport' } = { - $type: 'SelfServeFoodGroceriesSupport', - type: SelfServeSupportType.FoodGroceries, - totalAmount: 34 - }; - - const supportDays: Record = this.getSupportDays( - this.supportDraftForm.controls.food.controls.groceries.controls.nights - ); - - data.nights = Object.values(supportDays); - - return data; - } else if (supportFormValue.fundsFor === SupportSubCategory.FoodRestaurant) { - const data: SelfServeFoodRestaurantSupport & { $type: 'SelfServeFoodRestaurantSupport' } = { - $type: 'SelfServeFoodRestaurantSupport', - type: SelfServeSupportType.FoodRestaurant, - totalAmount: 234, - includedHouseholdMembers: [], - meals: [] - }; - - data.includedHouseholdMembers = supportFormValue.restaurant.includedHouseholdMembers - .filter((p) => p.isSelected) - .map((p) => p.personId); - - data.meals = supportFormValue.restaurant.mealTypes - .filter((m) => m.breakfast || m.lunch || m.dinner) - .map((m) => ({ - breakfast: m.breakfast, - lunch: m.lunch, - dinner: m.dinner, - date: m.date.format('YYYY-MM-DD') - })); - - return data; - } - - return null; - } - - processClothing() { - const supportFormValue = this.supportDraftForm.value.clothing; - const data: SelfServeClothingSupport & { $type: 'SelfServeClothingSupport' } = { - $type: 'SelfServeClothingSupport', - type: SelfServeSupportType.Clothing, - totalAmount: supportFormValue.totalAmount - }; - - data.includedHouseholdMembers = supportFormValue.includedHouseholdMembers - .filter((m) => m.isSelected) - .map((m) => m.personId); - - return data; - } - - processIncidents() { - const supportFormValue = this.supportDraftForm.value.incidents; - const data: SelfServeIncidentalsSupport & { $type: 'SelfServeIncidentalsSupport' } = { - $type: 'SelfServeIncidentalsSupport', - type: SelfServeSupportType.Incidentals, - totalAmount: supportFormValue.totalAmount - }; - - data.includedHouseholdMembers = supportFormValue.includedHouseholdMembers - .filter((m) => m.isSelected) - .map((m) => m.personId); - - return data; - } - - private getSupportDays(supportDays: FormArray>) { - const datesWithMembers: Record = {}; - supportDays.value.map((s) => { - if (s.isSelected) { - if (!datesWithMembers[s.date.format('YYYY-MM-DD')]) - datesWithMembers[s.date.format('YYYY-MM-DD')] = { - date: s.date.format('YYYY-MM-DD'), - includedHouseholdMembers: [s.personId] - }; - else datesWithMembers[s.date.format('YYYY-MM-DD')].includedHouseholdMembers.push(s.personId); - } - }); - return datesWithMembers; - } - - getPayloadData() { - this.supportDraftForm.markAllAsTouched(); - - const selfServeSupportRequest: SubmitSupportsRequest = { - supports: [] - }; - - if (this.showSelfServeShelterAllowanceSupport) { - const processShelterAllowance = this.processShelterAllowanceData(); - if (processShelterAllowance) selfServeSupportRequest.supports.push(processShelterAllowance); - } - - if (this.showSelfServeFoodSupport) { - const processFood = this.processFoodData(); - if (processFood) selfServeSupportRequest.supports.push(processFood); - } - - if (this.showSelfServeClothingSupport) { - const processClothing = this.processClothing(); - if (processClothing) selfServeSupportRequest.supports.push(processClothing); - } - - if (this.showSelfServeIncidentsSupport) { - const processIncidents = this.processIncidents(); - if (processIncidents) selfServeSupportRequest.supports.push(processIncidents); - } - - return selfServeSupportRequest; - } - - calculateSelfServeSupportsTotalAmount() { - const selfServeRequestPayload = this.getPayloadData(); - - return this.supportService - .supportsCalculateAmounts({ - evacuationFileId: this.essFileId, - body: selfServeRequestPayload.supports - }) - .pipe( - tap((res) => { - res.forEach((s) => { - switch (s.type) { - case SelfServeSupportType.ShelterAllowance: - this.supportDraftForm.controls.shelterAllowance.controls.totalAmount.setValue(s.totalAmount); - break; - - case SelfServeSupportType.FoodGroceries: - this.supportDraftForm.controls.food.controls.groceries.controls.totalAmount.setValue(s.totalAmount); - break; - - case SelfServeSupportType.FoodRestaurant: - this.supportDraftForm.controls.food.controls.restaurant.controls.totalAmount.setValue(s.totalAmount); - break; - - case SelfServeSupportType.Clothing: - this.supportDraftForm.controls.clothing.controls.totalAmount.setValue(s.totalAmount); - break; - - case SelfServeSupportType.Incidentals: - this.supportDraftForm.controls.incidents.controls.totalAmount.setValue(s.totalAmount); - break; - - default: - break; - } - }); - }) - ); - } - - submit() { - const selfServeRequestPayload = this.getPayloadData(); - } - - gotoEligibilityConfirmation() { - this.router.navigate(['../confirm'], { relativeTo: this.route }); - } -} diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve.routes.ts b/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve.routes.ts deleted file mode 100644 index a3b7c441a..000000000 --- a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve.routes.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { EligibleSelfServeConfirmComponent } from './eligible-self-serve-confirm.component'; -import { EligibleSelfServeSupportFormComponent } from './eligible-self-serve-support-form.component'; -import { Routes } from '@angular/router'; - -export const routes: Routes = [ - { path: '', redirectTo: 'confirm', pathMatch: 'full' }, - { path: 'confirm', component: EligibleSelfServeConfirmComponent }, - { path: 'support-form', component: EligibleSelfServeSupportFormComponent } -]; diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-interac-e-transfer-form/self-serve-support-interac-e-transfer-form.component.html b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-interac-e-transfer-form/self-serve-support-interac-e-transfer-form.component.html new file mode 100644 index 000000000..4e49c18fa --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-interac-e-transfer-form/self-serve-support-interac-e-transfer-form.component.html @@ -0,0 +1,198 @@ +

Please review the following and make any necessary edits. Required fields are marked with a red asterisk.

+@if (eTransferDetailsForm) { +
+ + +
+ +
How would you prefer to be notified of your e-Transfer?
+ + + @for (preference of eTransferNotificationPreferenceOptions; track preference) { + + {{ preference }} + + } + + @if ( + eTransferDetailsForm.controls?.notificationPreference.invalid && + eTransferDetailsForm.controls?.notificationPreference.hasError('required') + ) { + Notification Preference is required + } + + @if ( + [ETransferNotificationPreference.Email, ETransferNotificationPreference.EmailAndMobile].includes( + eTransferDetailsForm.controls.notificationPreference.value + ) + ) { +
+ @if (eTransferDetailsForm.controls.useEmailOnFile.value === false) { + + Email + + @if (eTransferDetailsForm.controls.eTransferEmail.hasError('required')) { + Email Address is required + } @else if (eTransferDetailsForm.controls.eTransferEmail.hasError('email')) { + Enter a valid Email Address + } + + } @else { + + {{ profileDataService.getProfile().contactDetails.email }} + + } + @if (hasEmailAddressOnFile) { + + Use email address on file + + } +
+ @if (eTransferDetailsForm.controls.useEmailOnFile.value === false) { + + Confirm Email + + @if (eTransferDetailsForm.controls.confirmEmail.hasError('required')) { + Email Address is required + } @else if (eTransferDetailsForm.controls.confirmEmail.hasError('email')) { + Enter a valid Email Address + } @else if (eTransferDetailsForm.controls.confirmEmail.hasError('compare')) { + Email Address Mismatch + } + + } + } + @if ( + [ETransferNotificationPreference.Mobile, ETransferNotificationPreference.EmailAndMobile].includes( + eTransferDetailsForm.controls.notificationPreference.value + ) + ) { +
+ @if (eTransferDetailsForm.controls.useMobileOnFile.value === false) { + + Mobile + + @if (eTransferDetailsForm.controls.eTransferMobile.hasError('required')) { + Mobile is required + } + + @if (eTransferDetailsForm.controls.eTransferMobile.hasError('compare')) { + Mobile number mismatch + } + + } @else { + + {{ profileDataService.getProfile().contactDetails.phone }} + + } + @if (hasPhoneOnFile) { + + Use mobile number on file + + } +
+ @if (eTransferDetailsForm.controls.useMobileOnFile.value === false) { + + Confirm Mobile + + @if (eTransferDetailsForm.controls.confirmMobile.hasError('require')) { + Confirm Mobile Number is required + } + + @if (eTransferDetailsForm.controls.confirmMobile.hasError('compare')) { + Mobile Number Mismatch + } + + } + @if ( + eTransferDetailsForm.controls.notificationPreference.value === ETransferNotificationPreference.Mobile && + !hasEmailAddressOnFile + ) { +
+ Kindly provide an email address for any further communications related to the e-transfer. +
+ + Mobile + + @if (eTransferDetailsForm.controls.contactEmail.hasError('required')) { + Email Address is required + } @else if (eTransferDetailsForm.controls.contactEmail.hasError('email')) { + Enter a valid Email Address + } + + + Confirm Email + + @if (eTransferDetailsForm.controls.confirmContactEmail.hasError('required')) { + Email Address is required + } @else if (eTransferDetailsForm.controls.confirmContactEmail.hasError('email')) { + Enter a valid Email Address + } @else if (eTransferDetailsForm.controls.confirmContactEmail.hasError('compare')) { + Email Address Mismatch + } + + } + } +
+ + +
+} diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-interac-e-transfer-form/self-serve-support-interac-e-transfer-form.component.scss b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-interac-e-transfer-form/self-serve-support-interac-e-transfer-form.component.scss new file mode 100644 index 000000000..dc96d540b --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-interac-e-transfer-form/self-serve-support-interac-e-transfer-form.component.scss @@ -0,0 +1,15 @@ +.eTransfer-form mat-form-field { + width: 450px; +} + +.container-with-logo { + display: flex; + flex-direction: row; + flex-wrap: wrap-reverse; + justify-content: space-between; +} + +.card-question { + font-size: var(--size-2); + margin-bottom: var(--size-2); +} diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-interac-e-transfer-form/self-serve-support-interac-e-transfer-form.component.ts b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-interac-e-transfer-form/self-serve-support-interac-e-transfer-form.component.ts new file mode 100644 index 000000000..33a488f8d --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-interac-e-transfer-form/self-serve-support-interac-e-transfer-form.component.ts @@ -0,0 +1,69 @@ +import { Component, Input } from '@angular/core'; +import { MatCardModule } from '@angular/material/card'; +import { ETransferDetailsForm } from '../self-serve-support.model'; +import { FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { ETransferNotificationPreference } from 'src/app/core/model/e-transfer-notification-preference.model'; +import { ProfileDataService } from '../../profile/profile-data.service'; +import { IMaskDirective } from 'angular-imask'; +import { CustomValidationService } from 'src/app/core/services/customValidation.service'; +import { MatSelectModule } from '@angular/material/select'; +import { MatInputModule } from '@angular/material/input'; +import { MatCheckboxModule } from '@angular/material/checkbox'; + +@Component({ + selector: 'app-self-serve-support-interac-e-transfer-form', + standalone: true, + imports: [ + ReactiveFormsModule, + MatFormFieldModule, + MatCardModule, + MatInputModule, + MatSelectModule, + MatCheckboxModule, + IMaskDirective + ], + templateUrl: './self-serve-support-interac-e-transfer-form.component.html', + styleUrls: [ + '../self-serve-support-form.component.scss', + './self-serve-support-interac-e-transfer-form.component.scss' + ] +}) +export class SelfServeSupportInteracETransfterFormComponent { + ETransferNotificationPreference = ETransferNotificationPreference; + + @Input() eTransferDetailsForm: FormGroup; + + eTransferNotificationPreferenceOptions = Object.values(ETransferNotificationPreference); + readonly phoneMask = { mask: '000-000-0000' }; + + hasEmailAddressOnFile = false; + hasPhoneOnFile = false; + + constructor( + public profileDataService: ProfileDataService, + private customValidation: CustomValidationService + ) {} + + ngOnInit() { + console.log('Etransfer Form:', this.eTransferDetailsForm); + const profile = this.profileDataService.getProfile(); + + this.eTransferDetailsForm.controls.recipientName.setValue( + `${profile.personalDetails.firstName ?? ''} ${profile.personalDetails.lastName ?? ''}` + ); + + // @NOTE: adding it directly in the form group is not populating `control.parent` property of the control + // which is required in the `compare` validator, adding the `compare` validator after the formgroup initialized + // keeps the `control.parent` property = the FormGorup(eTransferDetailsForm) + this.eTransferDetailsForm.controls.confirmEmail.addValidators( + this.customValidation.compare({ fieldName: 'eTransferEmail' }) + ); + this.eTransferDetailsForm.controls.confirmMobile.addValidators( + this.customValidation.compare({ fieldName: 'eTransferMobile' }) + ); + + if (profile?.contactDetails?.email) this.hasEmailAddressOnFile = true; + if (profile?.contactDetails?.phone) this.hasPhoneOnFile = true; + } +} diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-confirm.component.html b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-confirm/self-serve-support-confirm.component.html similarity index 98% rename from registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-confirm.component.html rename to registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-confirm/self-serve-support-confirm.component.html index 8a277fc4d..72791bfee 100644 --- a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-confirm.component.html +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-confirm/self-serve-support-confirm.component.html @@ -7,7 +7,7 @@

- Before proceeding, please confirm that you meet the following requirements. + Before proceeding, please confirm that you meet the following requirements.

diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-confirm.component.ts b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-confirm/self-serve-support-confirm.component.ts similarity index 80% rename from registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-confirm.component.ts rename to registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-confirm/self-serve-support-confirm.component.ts index e475ad3d9..67bd19ba2 100644 --- a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-confirm.component.ts +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-confirm/self-serve-support-confirm.component.ts @@ -2,23 +2,23 @@ import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'; import { MatCardModule } from '@angular/material/card'; import { MatDialog } from '@angular/material/dialog'; import { ActivatedRoute, Router } from '@angular/router'; -import { EligibleSelfServeOptOutDialogComponent } from './eligible-self-serve-opt-out-dialog.component'; +import { SelfServeSupportOptOutDialogComponent } from '../self-serve-support-opt-out-dialog/self-serve-support-opt-out-dialog.component'; import { MatButtonModule } from '@angular/material/button'; import { DialogContent } from 'src/app/core/model/dialog-content.model'; import { InformationDialogComponent } from 'src/app/core/components/dialog-components/information-dialog/information-dialog.component'; import { DialogComponent } from 'src/app/core/components/dialog/dialog.component'; -import * as globalConst from '../../core/services/globalConstants'; +import * as globalConst from '../../../core/services/globalConstants'; import { SupportsService } from 'src/app/core/api/services'; -import { NeedsAssessmentService } from '../needs-assessment/needs-assessment.service'; +import { NeedsAssessmentService } from '../../needs-assessment/needs-assessment.service'; @Component({ standalone: true, - selector: 'app-eligible-self-serve-confirm', - templateUrl: './eligible-self-serve-confirm.component.html', + selector: 'app-self-serve-confirm', + templateUrl: './self-serve-support-confirm.component.html', imports: [MatCardModule, MatButtonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) -export class EligibleSelfServeConfirmComponent { +export class SelfServeSupportConfirmComponent { essFileId = this.needsAssessmentService.getVerifiedEvacuationFileNo(); constructor( @@ -31,7 +31,7 @@ export class EligibleSelfServeConfirmComponent { optOutSelfServe() { this.dialog - .open(EligibleSelfServeOptOutDialogComponent, { + .open(SelfServeSupportOptOutDialogComponent, { width: '700px' }) .afterClosed() diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-details-form/self-serve-support-details-form.component.html b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-details-form/self-serve-support-details-form.component.html new file mode 100644 index 000000000..774b50dae --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-details-form/self-serve-support-details-form.component.html @@ -0,0 +1,232 @@ +@if (supportDraftForm) { +
+

Please review the following and make any necessary edits. Required fields are marked with a red asterisk.

+ @if (showSelfServeShelterAllowanceSupport) { + + +
+

Shelter Allowance

+
+ +
+ + + + + @for (date of shelterAllowanceDates; track $index) { + + } + + @for (person of draftSupports.householdMembers; track person.id) { + + + @for (date of shelterAllowanceDates; track $index) { + @if ( + supportDraftForm.controls?.shelterAllowance?.controls?.nights && + getDateControl(supportDraftForm.controls.shelterAllowance.controls.nights, person, date)?.controls + ?.isSelected + ) { + + } + } + + } +
{{ date.format('MMM DD, yyy') }}
{{ getPersonName(person.id) }} + +
+
+
+ Shelter Allowance is provided at $30 per night based on single occupancy, $10 for each + additional adult and youth and $5 for each additional child. +
+ + + } + + @if (showSelfServeFoodSupport) { + + +
+

Food

+
+ +
+
+ + Groceries + Restaurant Meals + +
+ @if (supportDraftForm.controls.food.controls.fundsFor.value === SelfServeSupportType.FoodGroceries) { + +
+ + + + @for (date of foodGroceriesDates; track $index) { + + } + + @for (person of draftSupports.householdMembers; track person.id) { + + + @for (date of foodGroceriesDates; track $index) { + @if ( + supportDraftForm.controls?.food?.controls?.groceries && + getDateControl( + supportDraftForm.controls.food.controls.groceries.controls.nights, + person, + date + )?.controls?.isSelected + ) { + + } + } + + } +
{{ date.format('MMM DD, yyy') }}
{{ getPersonName(person.id) }} + +
+
+ } + + @if (supportDraftForm.controls.food.controls.fundsFor.value === SelfServeSupportType.FoodRestaurant) { + +
+ @for ( + person of supportDraftForm.controls?.food?.controls?.restaurant?.controls?.includedHouseholdMembers + .controls; + track $index + ) { +
+ + {{ getPersonName(person.controls.personId.value) }} + +
+ } +
+ +
+ + + + @for (date of foodRestaurantDates; track $index) { + + } + + + + @for ( + meal of supportDraftForm.controls?.food?.controls?.restaurant?.controls?.mealTypes?.controls; + track $index + ) { + + } + + + + @for ( + meal of supportDraftForm.controls?.food?.controls?.restaurant?.controls?.mealTypes?.controls; + track $index + ) { + + } + + + + @for ( + meal of supportDraftForm.controls?.food?.controls?.restaurant?.controls?.mealTypes?.controls; + track $index + ) { + + } + +
{{ date.format('MMM DD, yyy') }}
Breakfast
Lunch
Dinner
+
+ } + + @if ( + supportDraftForm.controls?.food?.touched && + supportDraftForm.controls?.food?.controls?.fundsFor?.hasError('required') + ) { + Food is required + } +
+
+ Restaurant Meals are provided at $12.75 for breakfast, $14.75 for lunch and $25.50 for + dinner per person per day. Groceries are provided at a daily rate of $22.50 per person per day. +
+ + + } + + @if (showSelfServeClothingSupport) { + + +
+

Clothing

+
+ +
+
+ @for ( + person of supportDraftForm.controls?.clothing?.controls?.includedHouseholdMembers?.controls; + track $index + ) { +
+ + {{ getPersonName(person.controls.personId.value) }} + +
+ } +
+
+
Clothing is provided at $150 per person for the time you are evacuated.
+ + + } + + @if (showSelfServeIncidentsSupport) { + + +
+

Incidentals

+
+ +
+
+ @for ( + person of supportDraftForm.controls?.incidents?.controls?.includedHouseholdMembers?.controls; + track $index + ) { +
+ + {{ getPersonName(person.controls.personId.value) }} + +
+ } +
+
+
Incidentals are provided at $50 per person for the time you are evacuated.
+ + + } +
+} diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-details-form/self-serve-support-details-form.component.scss b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-details-form/self-serve-support-details-form.component.scss new file mode 100644 index 000000000..0d498414e --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-details-form/self-serve-support-details-form.component.scss @@ -0,0 +1,42 @@ +:host .support-details-form .mat-mdc-checkbox ::ng-deep label { + font-weight: bold; + line-height: var(--size-4); +} + +.card-question { + font-size: var(--size-2); + margin-bottom: var(--size-2); +} + +hr { + height: 1px; + background-color: #333; + margin-top: 0; +} + +table { + min-width: 400px; +} + +th { + font-weight: bold; + padding: var(--size-1); +} + +td { + width: 150px; + word-break: break-word; + padding: var(--size-1); +} + +tr.header-row { + height: 60px; + background: #f2f2f2; +} + +.note-box { + flex: 1 0 300px; + max-width: 400px; + height: min-content; + padding: var(--size-2); +} diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-details-form/self-serve-support-details-form.component.ts b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-details-form/self-serve-support-details-form.component.ts new file mode 100644 index 000000000..81424796c --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-details-form/self-serve-support-details-form.component.ts @@ -0,0 +1,210 @@ +import { Component, Input } from '@angular/core'; +import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { + DraftSupportForm, + SelfServeSupportDayMealForm, + SupportPersonDateForm, + SupportPersonForm +} from '../self-serve-support.model'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatCardModule } from '@angular/material/card'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { + DraftSupports, + HouseholdMember, + SelfServeClothingSupport, + SelfServeFoodGroceriesSupport, + SelfServeFoodRestaurantSupport, + SelfServeIncidentalsSupport, + SelfServeShelterAllowanceSupport, + SelfServeSupportType +} from 'src/app/core/api/models'; +import * as moment from 'moment'; + +@Component({ + selector: 'app-self-serve-support-details-form', + standalone: true, + imports: [ReactiveFormsModule, MatCheckboxModule, MatCardModule, MatRadioModule, MatFormFieldModule], + templateUrl: './self-serve-support-details-form.component.html', + styleUrls: ['../self-serve-support-form.component.scss', './self-serve-support-details-form.component.scss'] +}) +export class SelfServeSupportDetailsFormComponent { + SelfServeSupportType = SelfServeSupportType; + @Input() supportDraftForm: FormGroup; + + showSelfServeShelterAllowanceSupport = false; + showSelfServeFoodSupport = false; + showSelfServeClothingSupport = false; + showSelfServeIncidentsSupport = false; + + shelterAllowanceDates: moment.Moment[] = []; + foodGroceriesDates: moment.Moment[] = []; + foodRestaurantDates: moment.Moment[] = []; + + _draftSupports: DraftSupports; + + @Input() + set draftSupports(draftSupports: DraftSupports) { + draftSupports.items.forEach((support) => { + switch (support.type) { + case SelfServeSupportType.ShelterAllowance: + this.createSelfServeShelterAllowanceSupportForm(support as any); + break; + + case SelfServeSupportType.FoodGroceries: + this.createSelfServeFoodGroceriesSupportForm(support as any); + break; + + case SelfServeSupportType.FoodRestaurant: + this.createSelfServeFoodRestaurantSupportForm(support as any); + break; + case SelfServeSupportType.Clothing: + this.createSelfServeClothingSupportForm(support as any); + break; + + case SelfServeSupportType.Incidentals: + this.createSelfServeIncidentsSupportForm(support as any); + break; + + default: + break; + } + }); + + this._draftSupports = draftSupports; + } + + get draftSupports() { + return this._draftSupports; + } + + private createSelfServeShelterAllowanceSupportForm(selfServeSupport: SelfServeShelterAllowanceSupport) { + const dates = selfServeSupport.nights.map((n) => moment(n.date, 'YYYY-MM-DD')); + const persons = selfServeSupport.nights[0].includedHouseholdMembers; + + this.createSupportPersonDateForm(this.supportDraftForm.controls.shelterAllowance.controls.nights, persons, dates); + + this.supportDraftForm.controls.shelterAllowance.controls.totalAmount.setValue(selfServeSupport.totalAmount ?? 0); + + this.shelterAllowanceDates = [...dates]; + this.showSelfServeShelterAllowanceSupport = true; + } + + private createSelfServeFoodGroceriesSupportForm(selfServeSupport: SelfServeFoodGroceriesSupport) { + const dates = selfServeSupport.nights.map((n) => moment(n.date, 'YYYY-MM-DD')); + const persons = selfServeSupport.nights[0].includedHouseholdMembers; + + this.createSupportPersonDateForm( + this.supportDraftForm.controls.food.controls.groceries.controls.nights, + persons, + dates + ); + + this.supportDraftForm.controls.food.controls.groceries.controls.totalAmount.setValue( + selfServeSupport.totalAmount ?? 0 + ); + + this.foodGroceriesDates = [...dates]; + this.showSelfServeFoodSupport = true; + } + + private createSelfServeFoodRestaurantSupportForm(selfServeSupport: SelfServeFoodRestaurantSupport) { + const dates = selfServeSupport.meals.map((m) => moment(m.date, 'YYYY-MM-DD')); + selfServeSupport.includedHouseholdMembers.forEach((p) => { + this.supportDraftForm.controls.food.controls.restaurant.controls.includedHouseholdMembers.push( + this.createSupportPersonForm(p) + ); + }); + + selfServeSupport.meals.forEach((m) => { + this.supportDraftForm.controls.food.controls.restaurant.controls.mealTypes.push( + new FormGroup({ + date: new FormControl(moment(m.date, 'YYYY-MM-DD')), + breakfast: new FormControl({ value: m.breakfast, disabled: m.breakfast !== true && m.breakfast !== false }), + lunch: new FormControl({ value: m.lunch, disabled: m.lunch !== true && m.lunch !== false }), + dinner: new FormControl({ value: m.dinner, disabled: m.dinner !== true && m.dinner !== false }) + }) + ); + }); + + this.supportDraftForm.controls.food.controls.restaurant.controls.includedHouseholdMembers.valueChanges.subscribe({ + next: (includedHouseholdMembers) => { + if (includedHouseholdMembers.every((m) => !m.isSelected)) { + this.supportDraftForm.controls.food.controls.restaurant.controls.mealTypes.controls.forEach((m) => { + if (m.controls.breakfast.value === true) m.controls.breakfast.setValue(false); + if (m.controls.lunch.value === true) m.controls.lunch.setValue(false); + if (m.controls.dinner.value === true) m.controls.dinner.setValue(false); + }); + } + } + }); + + this.supportDraftForm.controls.food.controls.restaurant.controls.totalAmount.setValue( + selfServeSupport.totalAmount ?? 0 + ); + + this.foodRestaurantDates = [...dates]; + + this.showSelfServeFoodSupport = true; + } + + private createSelfServeClothingSupportForm(selfServeSupport: SelfServeClothingSupport) { + selfServeSupport.includedHouseholdMembers.forEach((p) => { + this.supportDraftForm.controls.clothing.controls.includedHouseholdMembers.push(this.createSupportPersonForm(p)); + }); + + this.supportDraftForm.controls.clothing.controls.totalAmount.setValue(selfServeSupport.totalAmount ?? 0); + + this.showSelfServeClothingSupport = true; + } + + private createSelfServeIncidentsSupportForm(selfServeSupport: SelfServeIncidentalsSupport) { + selfServeSupport.includedHouseholdMembers.forEach((p) => { + this.supportDraftForm.controls.incidents.controls.includedHouseholdMembers.push(this.createSupportPersonForm(p)); + }); + + this.supportDraftForm.controls.incidents.controls.totalAmount.setValue(selfServeSupport.totalAmount ?? 0); + + this.showSelfServeIncidentsSupport = true; + } + + createSupportPersonForm(id: string, isSelected: boolean = true): FormGroup { + return new FormGroup({ personId: new FormControl(id), isSelected: new FormControl(isSelected) }); + } + + createSupportPersonDateForm( + formArray: FormArray>, + perons: string[], + dates: moment.Moment[] + ) { + perons.forEach((p) => { + dates.forEach((d) => { + formArray.push( + new FormGroup({ + personId: new FormControl(p), + isSelected: new FormControl(true), + date: new FormControl(d) + }) + ); + }); + }); + } + + getPersonName(id: string) { + const personDetails = this.draftSupports.householdMembers.find((p) => p.id == id)?.details; + return `${personDetails?.firstName ?? ''}`; + } + + getDateControl( + supportPersonDateForm: FormArray>, + person: HouseholdMember, + date: moment.Moment + ): FormGroup { + const personFormGroup = supportPersonDateForm.controls.find( + (p: FormGroup) => p.controls.personId.value === person.id && p.controls.date.value === date + ); + + return personFormGroup; + } +} diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-form.component.html b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-form.component.html new file mode 100644 index 000000000..eb6fa588d --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-form.component.html @@ -0,0 +1,133 @@ +@if (draftSupportError) { +
Error: Unable to retrieve Draft Support information.
+} +@if (submitSupportError) { +
Error: Unable to submit Support information.
+} +@if (calculateTotalsError) { +
Error: Unable to submit Support information.
+} +
+
+ Self Serve Supports +
+ @if (isLoadingDraftSupport) { + + } @else { + + + Support Details + @if (supportDraftForm) { + + } +
+ + @if (draftSupports.items?.length > 0) { + + } +
+ + + e-Transfer Details + @if (eTransferDetailsForm) { + + + } +
+ + @if (draftSupports.items?.length > 0) { + + } +
+ + + Review & Submit + @if (supportDraftForm && eTransferDetailsForm) { + + + } +
+ + @if (draftSupports.items?.length > 0) { + + } +
+ + + } +
diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-form.component.scss b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-form.component.scss new file mode 100644 index 000000000..1f1692b10 --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-form.component.scss @@ -0,0 +1,30 @@ +mat-card { + margin-bottom: var(--size-3); +} + +.mat-mdc-card-content, +.mat-mdc-card-content:first-child, +.mat-mdc-card-content:last-child { + display: flex; + flex-wrap: wrap; + gap: var(--size-3); + justify-content: space-between; + padding: var(--size-3); +} + +:host .mat-mdc-checkbox ::ng-deep label { + font-size: var(--size-2); + padding: 4px 0; +} + +:host .mat-mdc-checkbox ::ng-deep .mdc-form-field { + align-items: flex-start; +} + +.self-serve-support-error-container { + display: block; + color: white; + background-color: orange; + padding: var(--size-2); + font-size: var(--size-3); +} diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-form.component.ts b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-form.component.ts new file mode 100644 index 000000000..cef3520df --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-form.component.ts @@ -0,0 +1,562 @@ +import { CUSTOM_ELEMENTS_SCHEMA, Component, OnInit, ViewChild } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; +import { MatCardModule } from '@angular/material/card'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatStepper, MatStepperModule } from '@angular/material/stepper'; +import { + DraftSupports, + ETransferDetails, + SelfServeClothingSupport, + SelfServeFoodGroceriesSupport, + SelfServeFoodRestaurantSupport, + SelfServeIncidentalsSupport, + SelfServeShelterAllowanceSupport, + SelfServeSupportType, + SubmitSupportsRequest, + SupportDay +} from 'src/app/core/api/models'; +import { SupportsService } from 'src/app/core/api/services'; +import { NeedsAssessmentService } from '../needs-assessment/needs-assessment.service'; +import { MatDialog } from '@angular/material/dialog'; +import { EligibleSelfServeTotalAmountZeroDialogComponent } from './self-serve-support-total-amount-zero-dialog/self-serve-support-total-amount-zero.component'; +import { AppLoaderComponent } from 'src/app/core/components/app-loader/app-loader.component'; +import { tap } from 'rxjs'; +import { MatSelectModule } from '@angular/material/select'; +import { CustomValidationService } from 'src/app/core/services/customValidation.service'; +import { IMaskDirective } from 'angular-imask'; +import { ProfileDataService } from '../profile/profile-data.service'; +import { ETransferNotificationPreference } from 'src/app/core/model/e-transfer-notification-preference.model'; +import { + DraftSupportForm, + SelfServeShelerAllowanceSupportForm, + SupportPersonDateForm, + SelfServeFoodSupportForm, + FundsFor, + SelfServeFoodRestaurantSupportForm, + SelfServeClothingSupportForm, + SupportPersonForm, + SelfServeIncidentsSupportForm, + ETransferDetailsForm, + SelfServeSupportDayMealForm +} from './self-serve-support.model'; +import { SelfServeSupportDetailsFormComponent } from './self-serve-support-details-form/self-serve-support-details-form.component'; +import { SelfServeSupportInteracETransfterFormComponent } from './self-serve-interac-e-transfer-form/self-serve-support-interac-e-transfer-form.component'; +import { + GotoStepType, + SelfServeSupportReviewComponent +} from './self-serve-support-review/self-serve-support-review.component'; + +@Component({ + standalone: true, + selector: 'app-self-serve-support-form', + templateUrl: './self-serve-support-form.component.html', + imports: [ + MatStepperModule, + MatCardModule, + MatCheckboxModule, + MatRadioModule, + ReactiveFormsModule, + MatFormFieldModule, + MatInputModule, + MatSelectModule, + AppLoaderComponent, + SelfServeSupportDetailsFormComponent, + SelfServeSupportInteracETransfterFormComponent, + SelfServeSupportReviewComponent + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + styleUrl: './self-serve-support-form.component.scss' +}) +export class SelfServeSupportFormComponent implements OnInit { + isLinear = false; + SelfServeSupportType = SelfServeSupportType; + essFileId = this.needsAssessmentService.getVerifiedEvacuationFileNo(); + + draftSupports: DraftSupports = { + items: [], + householdMembers: [] + }; + + isLoadingDraftSupport = true; + showButtonLoader = false; + draftSupportError = false; + calculateTotalsError = false; + submitSupportError = false; + loaderColor = '#169bd5'; + + supportDraftForm = new FormGroup({ + shelterAllowance: new FormGroup({ + totalAmount: new FormControl(0), + nights: new FormArray>([]) + }), + food: new FormGroup({ + fundsFor: new FormControl(null, Validators.required), + restaurant: new FormGroup({ + includedHouseholdMembers: new FormArray([]), + mealTypes: new FormArray([]), + totalAmount: new FormControl(0) + }), + groceries: new FormGroup({ + nights: new FormArray>([]), + totalAmount: new FormControl(0) + }) + }), + clothing: new FormGroup({ + totalAmount: new FormControl(0), + includedHouseholdMembers: new FormArray>([]) + }), + incidents: new FormGroup({ + totalAmount: new FormControl(0), + includedHouseholdMembers: new FormArray>([]) + }), + totals: new FormControl(0) + }); + + ETransferNotificationPreference = ETransferNotificationPreference; + + eTransferDetailsForm: FormGroup = this._formBuilder.group({ + notificationPreference: new FormControl(null), + eTransferEmail: new FormControl('', [ + this.customValidation.conditionalValidation( + () => + [ETransferNotificationPreference.Email, ETransferNotificationPreference.EmailAndMobile].includes( + this.eTransferDetailsForm.controls.notificationPreference.value + ) && this.eTransferDetailsForm.controls.useEmailOnFile.value === false, + Validators.required + ), + this.customValidation.conditionalValidation( + () => + [ETransferNotificationPreference.Email, ETransferNotificationPreference.EmailAndMobile].includes( + this.eTransferDetailsForm.controls.notificationPreference.value + ) && this.eTransferDetailsForm.controls.useEmailOnFile.value === false, + Validators.email + ) + ]), + confirmEmail: new FormControl('', [ + this.customValidation.conditionalValidation( + () => + [ETransferNotificationPreference.Email, ETransferNotificationPreference.EmailAndMobile].includes( + this.eTransferDetailsForm.controls.notificationPreference.value + ) && this.eTransferDetailsForm.controls.useEmailOnFile.value === false, + Validators.required + ), + this.customValidation.conditionalValidation( + () => + [ETransferNotificationPreference.Email, ETransferNotificationPreference.EmailAndMobile].includes( + this.eTransferDetailsForm.controls.notificationPreference.value + ) && this.eTransferDetailsForm.controls.useEmailOnFile.value === false, + Validators.email + ) + ]), + contactEmail: new FormControl('', [ + this.customValidation.conditionalValidation( + () => + [ETransferNotificationPreference.Mobile].includes( + this.eTransferDetailsForm.controls.notificationPreference.value + ) && this.eTransferDetailsForm.controls.useEmailOnFile.value === false, + Validators.required + ), + this.customValidation.conditionalValidation( + () => + [ETransferNotificationPreference.Mobile].includes( + this.eTransferDetailsForm.controls.notificationPreference.value + ) && this.eTransferDetailsForm.controls.useEmailOnFile.value === false, + Validators.email + ) + ]), + confirmContactEmail: new FormControl('', [ + this.customValidation.conditionalValidation( + () => + [ETransferNotificationPreference.Mobile].includes( + this.eTransferDetailsForm.controls.notificationPreference.value + ) && this.eTransferDetailsForm.controls.useEmailOnFile.value === false, + Validators.required + ), + this.customValidation.conditionalValidation( + () => + [ETransferNotificationPreference.Mobile].includes( + this.eTransferDetailsForm.controls.notificationPreference.value + ) && this.eTransferDetailsForm.controls.useEmailOnFile.value === false, + Validators.email + ) + ]), + eTransferMobile: new FormControl( + '', + this.customValidation.conditionalValidation( + () => + [ETransferNotificationPreference.Mobile, ETransferNotificationPreference.EmailAndMobile].includes( + this.eTransferDetailsForm.controls.notificationPreference.value + ) && this.eTransferDetailsForm.controls.useMobileOnFile.value === false, + Validators.required + ) + ), + confirmMobile: new FormControl('', [ + this.customValidation.conditionalValidation( + () => + [ETransferNotificationPreference.Mobile, ETransferNotificationPreference.EmailAndMobile].includes( + this.eTransferDetailsForm.controls.notificationPreference.value + ) && this.eTransferDetailsForm.controls.useMobileOnFile.value === false, + Validators.required + ) + ]), + useEmailOnFile: new FormControl(false), + useMobileOnFile: new FormControl(false), + recipientName: new FormControl() + }); + + reviewAcknowledgeForm = new FormGroup({ + fundsExclusive: new FormControl('', Validators.requiredTrue), + meetMyOwnNeeds: new FormControl('', Validators.requiredTrue), + information: new FormControl('', Validators.requiredTrue) + }); + + @ViewChild('stepper') stepper: MatStepper; + + constructor( + private _formBuilder: FormBuilder, + private supportService: SupportsService, + public needsAssessmentService: NeedsAssessmentService, + public profileDataService: ProfileDataService, + private router: Router, + private route: ActivatedRoute, + private dialog: MatDialog, + private customValidation: CustomValidationService + ) {} + + ngOnInit() { + if (!this.essFileId) { + return; + } + + this.getDraft(); + } + + private getDraft() { + this.supportService.supportsGetDraftSupports({ evacuationFileId: this.essFileId }).subscribe({ + next: (res) => { + // Show the primary applicant at the top of the list + res.householdMembers = res.householdMembers.sort((p) => { + return p.isPrimaryRegistrant === true ? -1 : 1; + }); + + this.draftSupports = res; + }, + error: (err) => { + this.draftSupportError = true; + }, + complete: () => { + this.isLoadingDraftSupport = false; + } + }); + } + + gotoETransfterStep(formGroup: FormGroup) { + formGroup.markAllAsTouched(); + if (!this.essFileId || formGroup.invalid) return; + this.showButtonLoader = true; + this.calculateTotalsError = false; + this.calculateSelfServeSupportsTotalAmount().subscribe({ + next: (res) => { + this.showButtonLoader = false; + const selfServeSupportsTotalAmount = res.reduce((prev, curr) => prev + curr.totalAmount, 0); + + this.supportDraftForm.controls.totals.setValue(selfServeSupportsTotalAmount); + + if (selfServeSupportsTotalAmount === 0) + this.dialog.open(EligibleSelfServeTotalAmountZeroDialogComponent, {}).afterClosed().subscribe(); + else this.stepper.next(); + }, + error: (err) => { + this.calculateTotalsError = true; + this.showButtonLoader = false; + } + }); + } + + gotoReviewStep(formGroup: FormGroup) { + formGroup.markAllAsTouched(); + if (formGroup.invalid) return; + this.stepper.next(); + } + + gotoStep(step: GotoStepType) { + switch (step) { + case 'supportDetails': + this.stepper.selectedIndex = 0; + break; + case 'eTransfer': + this.stepper.selectedIndex = 1; + break; + default: + break; + } + } + + processShelterAllowanceData(): SelfServeShelterAllowanceSupport | null { + const supportFormValue = this.supportDraftForm.value.shelterAllowance; + + const data: SelfServeShelterAllowanceSupport & { $type: 'SelfServeShelterAllowanceSupport' } = { + $type: 'SelfServeShelterAllowanceSupport', + type: SelfServeSupportType.ShelterAllowance, + totalAmount: supportFormValue.totalAmount + }; + + const datesWithMembers: Record = this.getSupportDays( + this.supportDraftForm.controls.shelterAllowance.controls.nights + ); + + data.nights = Object.values(datesWithMembers); + + return data; + } + + processFoodGroceriesData(): SelfServeFoodGroceriesSupport | null { + const supportFormValue = this.supportDraftForm.value.food; + + if (supportFormValue.fundsFor === SelfServeSupportType.FoodGroceries) { + const data: SelfServeFoodGroceriesSupport & { $type: 'SelfServeFoodGroceriesSupport' } = { + $type: 'SelfServeFoodGroceriesSupport', + type: SelfServeSupportType.FoodGroceries, + totalAmount: 34 + }; + + const supportDays: Record = this.getSupportDays( + this.supportDraftForm.controls.food.controls.groceries.controls.nights + ); + + data.nights = Object.values(supportDays); + + return data; + } + + return null; + } + + processFoodRestaurantData(): SelfServeFoodRestaurantSupport | null { + const supportFormValue = this.supportDraftForm.value.food; + + if (supportFormValue.fundsFor === SelfServeSupportType.FoodRestaurant) { + const data: SelfServeFoodRestaurantSupport & { $type: 'SelfServeFoodRestaurantSupport' } = { + $type: 'SelfServeFoodRestaurantSupport', + type: SelfServeSupportType.FoodRestaurant, + totalAmount: 234, + includedHouseholdMembers: [], + meals: [] + }; + + data.includedHouseholdMembers = supportFormValue.restaurant.includedHouseholdMembers + .filter((p) => p.isSelected) + .map((p) => p.personId); + + data.meals = supportFormValue.restaurant.mealTypes + .filter((m) => m.breakfast || m.lunch || m.dinner) + .map((m) => ({ + breakfast: m.breakfast, + lunch: m.lunch, + dinner: m.dinner, + date: m.date.format('YYYY-MM-DD') + })); + + return data; + } + + return null; + } + + processClothing() { + const supportFormValue = this.supportDraftForm.value.clothing; + const data: SelfServeClothingSupport & { $type: 'SelfServeClothingSupport' } = { + $type: 'SelfServeClothingSupport', + type: SelfServeSupportType.Clothing, + totalAmount: supportFormValue.totalAmount + }; + + data.includedHouseholdMembers = supportFormValue.includedHouseholdMembers + .filter((m) => m.isSelected) + .map((m) => m.personId); + + return data; + } + + processIncidents() { + const supportFormValue = this.supportDraftForm.value.incidents; + const data: SelfServeIncidentalsSupport & { $type: 'SelfServeIncidentalsSupport' } = { + $type: 'SelfServeIncidentalsSupport', + type: SelfServeSupportType.Incidentals, + totalAmount: supportFormValue.totalAmount + }; + + data.includedHouseholdMembers = supportFormValue.includedHouseholdMembers + .filter((m) => m.isSelected) + .map((m) => m.personId); + + return data; + } + + private getSupportDays(supportDays: FormArray>) { + const datesWithMembers: Record = {}; + supportDays.value.map((s) => { + if (s.isSelected) { + if (!datesWithMembers[s.date.format('YYYY-MM-DD')]) + datesWithMembers[s.date.format('YYYY-MM-DD')] = { + date: s.date.format('YYYY-MM-DD'), + includedHouseholdMembers: [s.personId] + }; + else datesWithMembers[s.date.format('YYYY-MM-DD')].includedHouseholdMembers.push(s.personId); + } + }); + return datesWithMembers; + } + + getPayloadData() { + this.supportDraftForm.markAllAsTouched(); + + const selfServeSupportRequest: SubmitSupportsRequest = { + supports: [] + }; + + this.draftSupports.items.forEach((support) => { + switch (support.type) { + case SelfServeSupportType.ShelterAllowance: + const processShelterAllowance = this.processShelterAllowanceData(); + if (processShelterAllowance) selfServeSupportRequest.supports.push(processShelterAllowance); + break; + + case SelfServeSupportType.FoodGroceries: + const processFoodGroceries = this.processFoodGroceriesData(); + if (processFoodGroceries) selfServeSupportRequest.supports.push(processFoodGroceries); + break; + + case SelfServeSupportType.FoodRestaurant: + const processFoodRestaurant = this.processFoodRestaurantData(); + if (processFoodRestaurant) selfServeSupportRequest.supports.push(processFoodRestaurant); + break; + + case SelfServeSupportType.Clothing: + const processClothing = this.processClothing(); + if (processClothing) selfServeSupportRequest.supports.push(processClothing); + break; + + case SelfServeSupportType.Incidentals: + const processIncidents = this.processIncidents(); + if (processIncidents) selfServeSupportRequest.supports.push(processIncidents); + break; + + default: + break; + } + }); + + return selfServeSupportRequest; + } + + calculateSelfServeSupportsTotalAmount() { + const selfServeRequestPayload = this.getPayloadData(); + + return this.supportService + .supportsCalculateAmounts({ + evacuationFileId: this.essFileId, + body: selfServeRequestPayload.supports + }) + .pipe( + tap((res) => { + res.forEach((s) => { + switch (s.type) { + case SelfServeSupportType.ShelterAllowance: + this.supportDraftForm.controls.shelterAllowance.controls.totalAmount.setValue(s.totalAmount); + break; + + case SelfServeSupportType.FoodGroceries: + this.supportDraftForm.controls.food.controls.groceries.controls.totalAmount.setValue(s.totalAmount); + break; + + case SelfServeSupportType.FoodRestaurant: + this.supportDraftForm.controls.food.controls.restaurant.controls.totalAmount.setValue(s.totalAmount); + break; + + case SelfServeSupportType.Clothing: + this.supportDraftForm.controls.clothing.controls.totalAmount.setValue(s.totalAmount); + break; + + case SelfServeSupportType.Incidentals: + this.supportDraftForm.controls.incidents.controls.totalAmount.setValue(s.totalAmount); + break; + + default: + break; + } + }); + }) + ); + } + + submit() { + this.reviewAcknowledgeForm.markAllAsTouched(); + if (this.reviewAcknowledgeForm.invalid) return; + + const selfServeSupportsPayload = this.getPayloadData(); + + const eTransferFormDetailsValue = this.eTransferDetailsForm.value; + const eTransferDetails: ETransferDetails = { + recipientName: eTransferFormDetailsValue.recipientName + }; + + switch (eTransferFormDetailsValue.notificationPreference) { + case ETransferNotificationPreference.Email: + eTransferDetails.eTransferEmail = eTransferFormDetailsValue.eTransferEmail; + break; + + case ETransferNotificationPreference.Mobile: + eTransferDetails.eTransferMobile = eTransferFormDetailsValue.eTransferMobile; + if (eTransferFormDetailsValue.contactEmail) + eTransferDetails.contactEmail = eTransferFormDetailsValue.contactEmail; + break; + + case ETransferNotificationPreference.EmailAndMobile: + eTransferDetails.eTransferEmail = eTransferFormDetailsValue.eTransferEmail; + eTransferDetails.eTransferMobile = eTransferFormDetailsValue.eTransferMobile; + break; + + default: + break; + } + + const selfServeRequestPayload: SubmitSupportsRequest = { + evacuationFileId: this.essFileId, + supports: selfServeSupportsPayload.supports, + eTransferDetails + }; + + this.showButtonLoader = true; + this.submitSupportError = false; + this.supportService + .supportsSubmitSupports({ evacuationFileId: this.essFileId, body: selfServeRequestPayload }) + .subscribe({ + next: (res) => { + this.showButtonLoader = false; + this.router.navigate(['/verified-registration/dashboard'], { + state: { + selfServe: true, + supportData: { + notificationPreference: this.eTransferDetailsForm.controls.notificationPreference.value, + eTransferDetails: selfServeRequestPayload.eTransferDetails, + totalAmount: this.supportDraftForm.controls.totals.value + } + } + }); + }, + error: (err) => { + this.submitSupportError = true; + this.showButtonLoader = false; + } + }); + } + + gotoEligibilityConfirmation() { + this.router.navigate(['../confirm'], { relativeTo: this.route }); + } +} diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-opt-out-dialog/self-serve-support-opt-out-dialog.component.html b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-opt-out-dialog/self-serve-support-opt-out-dialog.component.html new file mode 100644 index 000000000..4240d0a90 --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-opt-out-dialog/self-serve-support-opt-out-dialog.component.html @@ -0,0 +1,20 @@ +
+
+

Interac e-Transfer Opt-Out

+
+
+ +
+
+ + +

Are you sure you want to opt out of self-serve e-transfer?

+ + + + + + diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-opt-out-dialog/self-serve-support-opt-out-dialog.component.ts b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-opt-out-dialog/self-serve-support-opt-out-dialog.component.ts new file mode 100644 index 000000000..7cfeb0095 --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-opt-out-dialog/self-serve-support-opt-out-dialog.component.ts @@ -0,0 +1,19 @@ +import { Component } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDialogModule } from '@angular/material/dialog'; + +@Component({ + standalone: true, + selector: 'app--self-serve-support-opt-out-dialog', + imports: [MatDialogModule, MatButtonModule], + templateUrl: './self-serve-support-opt-out-dialog.component.html', + styles: [ + ` + :host { + display: block; + padding: var(--size-3); + } + ` + ] +}) +export class SelfServeSupportOptOutDialogComponent {} diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-review/self-serve-support-review.component.html b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-review/self-serve-support-review.component.html new file mode 100644 index 000000000..6642ca881 --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-review/self-serve-support-review.component.html @@ -0,0 +1,191 @@ + + +
+

Review Details

+
+

Support Details

+ +
+
+ + @for (support of draftSupports?.items; track support.type) { + @switch (support.type) { + @case (SelfServeSupportType.ShelterAllowance) { +
+
Shelter Allowance
+
+ $ {{ supportDraftForm.controls.shelterAllowance.controls.totalAmount.value }} +
+
+ } + @case (SelfServeSupportType.FoodGroceries) { + @if (supportDraftForm.controls.food.controls.fundsFor.value === SelfServeSupportType.FoodGroceries) { +
+
Grocery
+
+ $ {{ supportDraftForm.controls.food.controls.groceries.controls.totalAmount.value }} +
+
+ } + } + @case (SelfServeSupportType.FoodRestaurant) { + @if (supportDraftForm.controls.food.controls.fundsFor.value === SelfServeSupportType.FoodRestaurant) { +
+
Restaurant
+
+ $ {{ supportDraftForm.controls.food.controls.restaurant.controls.totalAmount.value }} +
+
+ } + } + @case (SelfServeSupportType.Clothing) { +
+
Clothing
+
+ $ {{ supportDraftForm.controls.clothing.controls.totalAmount.value }} +
+
+ } + @case (SelfServeSupportType.Incidentals) { +
+
Incidentals
+
+ $ {{ supportDraftForm.controls.incidents.controls.totalAmount.value }} +
+
+ } + } + } + +
+
Total Amount
+
+ $ {{ supportDraftForm.controls.totals.value }} +
+
+ +
+

e-Transfer Recipient Details

+ +
+
+ +
+
e-Transfer Recipient:
+
+ {{ eTransferDetailsForm.controls.recipientName.value }} +
+
+ + @switch (eTransferDetailsForm.controls.notificationPreference.value) { + @case (ETransferNotificationPreference.Email) { +
+
e-Transfer Notification:
+
+ {{ eTransferDetailsForm.controls.eTransferEmail.value }} +
+
+ } + @case (ETransferNotificationPreference.Mobile) { +
+
e-Transfer Notification:
+
+ {{ eTransferDetailsForm.controls.eTransferMobile.value }} +
+
+
+
Contact Email Address
+
+ {{ eTransferDetailsForm.controls.contactEmail.value }} +
+
+ } + @case (ETransferNotificationPreference.EmailAndMobile) { +
+
e-Transfer Notification:
+
+ {{ eTransferDetailsForm.controls.eTransferMobile.value }} +
+
+
+
 
+
+ {{ eTransferDetailsForm.controls.eTransferEmail.value }} +
+
+ } + } + +
+

Acknowledgment

+
+
+

+ + You are being provided with a one-time digital payment for supports. These funds have been provided for the + sole purpose to meet essential needs of individuals and their household members. + +

+ + + I acknowledge that by accepting this digital payment, I agree to use the funds exclusively for meeting my basic + needs as outlined above. I understand that purchases such as alcohol, tobacco, cannabis products, entertainment + goods or services (such as online gaming), and luxury items are not permissible. + + @if ( + reviewAcknowledgeForm.controls.fundsExclusive.touched && + reviewAcknowledgeForm.controls.fundsExclusive.hasError('required') + ) { + Acknowledgment is required + } + + I acknowledge that by accepting this digital payment, I am able to meet my own needs and will not seek further + supports during the valid timeframe of + {{ shelterAllowanceDates[0].format('MMM DD, YYYY') }} to + {{ shelterAllowanceDates[shelterAllowanceDates.length - 1].format('MMM DD, YYYY') }}. + + @if ( + reviewAcknowledgeForm.controls.fundsExclusive.touched && + reviewAcknowledgeForm.controls.meetMyOwnNeeds.hasError('required') + ) { + Acknowledgment is required + } + + I certify that all information I have provided is accurate to the best of my knowledge. If information is found + to be untrue, this may result in repayment of funds already received. Intentional provision of inaccurate + information may be investigated, and legal action may be undertaken. + + @if ( + reviewAcknowledgeForm.controls.fundsExclusive.touched && + reviewAcknowledgeForm.controls.information.hasError('required') + ) { + Acknowledgment is required + } + +
+

+ If you haven't set up auto-deposit for Interac e-Transfer, the security answer for the e-transfer will be your + ESS File Number, which is {{ essFileId }}. +

+

You can find your ESS File number under the Current Events tab of your ERA profile.

+
+
+ + diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-review/self-serve-support-review.component.ts b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-review/self-serve-support-review.component.ts new file mode 100644 index 000000000..60d3ee084 --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-review/self-serve-support-review.component.ts @@ -0,0 +1,58 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; +import { DraftSupportForm, ETransferDetailsForm } from '../self-serve-support.model'; +import { NeedsAssessmentService } from '../../needs-assessment/needs-assessment.service'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatCardModule } from '@angular/material/card'; +import { ETransferNotificationPreference } from 'src/app/core/model/e-transfer-notification-preference.model'; +import { DraftSupports, SelfServeShelterAllowanceSupport, SelfServeSupportType } from 'src/app/core/api/models'; +import * as moment from 'moment'; + +export type GotoStepType = 'supportDetails' | 'eTransfer'; + +@Component({ + selector: 'app-self-serve-support-review', + standalone: true, + imports: [MatFormFieldModule, MatCheckboxModule, MatCardModule, ReactiveFormsModule], + templateUrl: './self-serve-support-review.component.html', + styleUrls: ['../self-serve-support-form.component.scss'] +}) +export class SelfServeSupportReviewComponent { + SelfServeSupportType = SelfServeSupportType; + ETransferNotificationPreference = ETransferNotificationPreference; + essFileId = this.needsAssessmentService.getVerifiedEvacuationFileNo(); + + @Input() supportDraftForm: FormGroup; + @Input() eTransferDetailsForm: FormGroup; + + @Input() reviewAcknowledgeForm = new FormGroup({ + fundsExclusive: new FormControl('', Validators.requiredTrue), + meetMyOwnNeeds: new FormControl('', Validators.requiredTrue), + information: new FormControl('', Validators.requiredTrue) + }); + + shelterAllowanceDates = []; + + _draftSupports: DraftSupports; + @Input() + set draftSupports(draftSupports: DraftSupports) { + const dates = ( + draftSupports.items.find( + (s) => s.type === SelfServeSupportType.ShelterAllowance + ) as SelfServeShelterAllowanceSupport + )?.nights.map((n) => moment(n.date, 'YYYY-MM-DD')); + + if (dates) this.shelterAllowanceDates = [...dates]; + + this._draftSupports = draftSupports; + } + + get draftSupports() { + return this._draftSupports; + } + + @Output() gotoStep: EventEmitter = new EventEmitter(); + + constructor(private needsAssessmentService: NeedsAssessmentService) {} +} diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-total-amount-zero-dialog/self-serve-support-total-amount-zero.component.html b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-total-amount-zero-dialog/self-serve-support-total-amount-zero.component.html new file mode 100644 index 000000000..b626935a4 --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-total-amount-zero-dialog/self-serve-support-total-amount-zero.component.html @@ -0,0 +1,29 @@ +
+
+

Support Update Required

+
+
+ +
+
+ + +

+ You currently have no supports selected. Please take a moment to update your support details to select the + necessary assistance for you and your household while you are evacuated. +

+

+ If you no longer require support or would prefer to proceed with referrals, you can + + + click here to opt out and receive supports via referral. + +

+ + + + + diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-total-amount-zero.component.ts b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-total-amount-zero-dialog/self-serve-support-total-amount-zero.component.ts similarity index 50% rename from registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-total-amount-zero.component.ts rename to registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-total-amount-zero-dialog/self-serve-support-total-amount-zero.component.ts index cfff4879b..3bed45c29 100644 --- a/registrants/src/UI/embc-registrant/src/app/feature-components/eligible-self-serve/eligible-self-serve-total-amount-zero.component.ts +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support-total-amount-zero-dialog/self-serve-support-total-amount-zero.component.ts @@ -2,44 +2,14 @@ import { Component } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; import { SupportsService } from 'src/app/core/api/services'; -import { NeedsAssessmentService } from '../needs-assessment/needs-assessment.service'; +import { NeedsAssessmentService } from '../../needs-assessment/needs-assessment.service'; import { Router } from '@angular/router'; @Component({ standalone: true, selector: 'app-eligible-self-serve-opt-out-dialog', imports: [MatDialogModule, MatButtonModule], - template: ` -
-
-

Support Update Required

-
-
- -
-
- - -

- You currently have no supports selected. Please take a moment to update your support details to select - the necessary assistance for you and your household while you are evacuated. -

-

- If you no longer require support or would prefer to proceed with referrals, you can - - - click here to opt out and receive supports via referral. - -

- - - - - - `, + template: './self-serve-support-total-amount-zero.component.html', styles: [ ` :host { diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support.model.ts b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support.model.ts new file mode 100644 index 000000000..2f1349def --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support.model.ts @@ -0,0 +1,85 @@ +import { FormControl, FormArray, FormGroup } from '@angular/forms'; +import { SelfServeSupport, SelfServeSupportType, SupportDay } from 'src/app/core/api/models'; +import { ETransferNotificationPreference } from 'src/app/core/model/e-transfer-notification-preference.model'; + +export type SelfServeSupportFormControl = { + [k in keyof SelfServeSupport]: FormControl; +}; + +export interface BaseSelfServeSupportForm extends Omit { + totalAmount: FormControl; +} + +export interface SupportPersonForm { + personId: FormControl; + isSelected?: FormControl; +} + +export interface SupportPersonDateForm { + date: FormControl; + personId: FormControl; + isSelected?: FormControl; +} + +export type SupportDayFormControl = { + [k in keyof SupportDay]: FormControl; +}; + +export interface SelfServeSupportDayMealForm extends Omit { + date: FormControl; + breakfast: FormControl; + lunch: FormControl; + dinner: FormControl; +} + +export type FundsFor = SelfServeSupportType.FoodGroceries | SelfServeSupportType.FoodRestaurant | null; + +export interface SelfServeFoodRestaurantSupportForm { + includedHouseholdMembers: FormArray>; + mealTypes: FormArray>; + totalAmount: FormControl; +} + +export interface SelfServeFoodGroceriesSupportForm { + nights: FormArray>; + totalAmount: FormControl; +} + +export interface SelfServeFoodSupportForm { + fundsFor: FormControl; + restaurant: FormGroup; + groceries: FormGroup; +} + +export interface SelfServeShelerAllowanceSupportForm extends BaseSelfServeSupportForm { + nights: FormArray>; +} + +export interface SelfServeClothingSupportForm extends BaseSelfServeSupportForm { + includedHouseholdMembers: FormArray>; +} + +export interface SelfServeIncidentsSupportForm extends BaseSelfServeSupportForm { + includedHouseholdMembers: FormArray>; +} + +export interface DraftSupportForm { + shelterAllowance: FormGroup; + food: FormGroup; + clothing: FormGroup; + incidents: FormGroup; + totals: FormControl; +} + +export interface ETransferDetailsForm { + notificationPreference: FormControl; + eTransferEmail: FormControl; + confirmEmail: FormControl; + contactEmail: FormControl; + confirmContactEmail: FormControl; + useEmailOnFile: FormControl; + eTransferMobile: FormControl; + confirmMobile: FormControl; + useMobileOnFile: FormControl; + recipientName: FormControl; +} diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support.routes.ts b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support.routes.ts new file mode 100644 index 000000000..d2a48577e --- /dev/null +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/self-serve-support/self-serve-support.routes.ts @@ -0,0 +1,9 @@ +import { SelfServeSupportConfirmComponent } from './self-serve-support-confirm/self-serve-support-confirm.component'; +import { SelfServeSupportFormComponent } from './self-serve-support-form.component'; +import { Routes } from '@angular/router'; + +export const routes: Routes = [ + { path: '', redirectTo: 'confirm', pathMatch: 'full' }, + { path: 'confirm', component: SelfServeSupportConfirmComponent }, + { path: 'support-form', component: SelfServeSupportFormComponent } +]; diff --git a/registrants/src/UI/embc-registrant/src/app/feature-components/verified-registration/verified-registration-routing.module.ts b/registrants/src/UI/embc-registrant/src/app/feature-components/verified-registration/verified-registration-routing.module.ts index 2c8144b0f..06183c0c6 100644 --- a/registrants/src/UI/embc-registrant/src/app/feature-components/verified-registration/verified-registration-routing.module.ts +++ b/registrants/src/UI/embc-registrant/src/app/feature-components/verified-registration/verified-registration-routing.module.ts @@ -59,7 +59,7 @@ const routes: Routes = [ }, { path: 'eligible-self-serve', - loadChildren: () => import('../eligible-self-serve/eligible-self-serve.routes').then((m) => m.routes) + loadChildren: () => import('../self-serve-support/self-serve-support.routes').then((m) => m.routes) }, { path: 'fileSubmission', diff --git a/registrants/src/UI/embc-registrant/src/app/sharedModules/components/dashboard/dashboard.component.ts b/registrants/src/UI/embc-registrant/src/app/sharedModules/components/dashboard/dashboard.component.ts index 216de651b..00c18319d 100644 --- a/registrants/src/UI/embc-registrant/src/app/sharedModules/components/dashboard/dashboard.component.ts +++ b/registrants/src/UI/embc-registrant/src/app/sharedModules/components/dashboard/dashboard.component.ts @@ -13,6 +13,7 @@ import { AlertComponent } from '../../../core/components/alert/alert.component'; import { MatButtonModule } from '@angular/material/button'; import { AsyncPipe } from '@angular/common'; import { MatCardModule } from '@angular/material/card'; +import { SelfServeSubmissionDialogComponent } from 'src/app/core/components/dialog-components/self-serve-submissoin-dialog/self-serve-submission-dialog.component'; @Component({ selector: 'app-dashboard', @@ -77,21 +78,36 @@ export class DashboardComponent implements OnInit { const registrationResult = this.needsAssessmentService.getVerifiedEvacuationFileNo(); if (registrationResult !== null) { - this.dialog - .open(DialogComponent, { - data: { - component: EssFileDialogComponent, - content: globalConst.newEssFile, - essFileData: registrationResult, - initDialog: false - }, - width: '700px', - height: '750px' - }) - .afterClosed() - .subscribe(() => { - this.needsAssessmentService.setVerifiedEvacuationFileNo(this.emptyRegistrationResult); - }); + const { selfServe, supportData } = this.router.lastSuccessfulNavigation.extras.state; + if (selfServe) { + this.dialog + .open(SelfServeSubmissionDialogComponent, { + data: supportData, + width: '80%', + height: '750px', + maxWidth: '900px' + }) + .afterClosed() + .subscribe(() => { + this.needsAssessmentService.setVerifiedEvacuationFileNo(this.emptyRegistrationResult); + }); + } else { + this.dialog + .open(DialogComponent, { + data: { + component: EssFileDialogComponent, + content: globalConst.newEssFile, + essFileData: registrationResult, + initDialog: false + }, + width: '700px', + height: '750px' + }) + .afterClosed() + .subscribe(() => { + this.needsAssessmentService.setVerifiedEvacuationFileNo(this.emptyRegistrationResult); + }); + } } } diff --git a/registrants/src/UI/embc-registrant/src/assets/images/interac-e-transfer-logo.png b/registrants/src/UI/embc-registrant/src/assets/images/interac-e-transfer-logo.png new file mode 100644 index 000000000..5e514d6a5 Binary files /dev/null and b/registrants/src/UI/embc-registrant/src/assets/images/interac-e-transfer-logo.png differ diff --git a/registrants/src/UI/embc-registrant/src/styles/styles.scss b/registrants/src/UI/embc-registrant/src/styles/styles.scss index 8b873b95e..d15631f85 100644 --- a/registrants/src/UI/embc-registrant/src/styles/styles.scss +++ b/registrants/src/UI/embc-registrant/src/styles/styles.scss @@ -207,16 +207,32 @@ button:focus { outline: 0px !important; } -.close-image img:last-of-type { - display: none; +.button-with-loader { + min-width: 240px; + display: flex; + align-items: center; + justify-content: center; +} + +.close-image, +.edit-image { + img:last-of-type { + display: none; + } } -.close-image:hover img:last-of-type { - display: inline; +.close-image:hover, +.edit-image:hover { + img:last-of-type { + display: inline; + } } -.close-image:hover img:first-of-type { - display: none; +.close-image:hover, +.edit-image:hover { + img:first-of-type { + display: none; + } } @media screen and (max-width: 768px) {