Metal dealers (#2069)

# Description

This PR includes the following proposed change(s):

- start work on metal dealers

src/Spd.Presentation.Licensing/ClientApp/src/app/app-routes.ts

@@ -1,5 +1,6 @@
 import { BusinessLicenceApplicationRoutes } from './modules/business-licence-application/business-license-application-routes';
 import { ControllingMemberCrcRoutes } from './modules/controlling-member-crc/controlling-member-crc-routes';
+import { MetalDealersAndRecyclersRoutes } from './modules/metal-dealers-and-recyclers/metal-dealers-and-recyclers-routes';
 import { PersonalLicenceApplicationRoutes } from './modules/personal-licence-application/personal-licence-application-routes';
 import { SecurityLicenceStatusVerificationRoutes } from './modules/security-licence-status-verification/security-licence-status-verification-routes';
 
@@ -8,6 +9,7 @@ export class AppRoutes {
 	public static readonly BUSINESS_LICENCE_APPLICATION = BusinessLicenceApplicationRoutes.MODULE_PATH;
 	public static readonly CONTROLLING_MEMBERS_CRC = ControllingMemberCrcRoutes.MODULE_PATH;
 	public static readonly SECURITY_LICENCE_STATUS_VERIFICATION = SecurityLicenceStatusVerificationRoutes.MODULE_PATH;
+	public static readonly METAL_DEALERS_AND_RECYCLERS = MetalDealersAndRecyclersRoutes.MODULE_PATH;
 	public static readonly LANDING = '';
 	public static readonly ACCESS_DENIED = 'access-denied';
 	public static readonly INVITATION_DENIED = 'invitation-denied';

src/Spd.Presentation.Licensing/ClientApp/src/app/app-routing.module.ts

@@ -33,6 +33,13 @@ const routes: Routes = [
 				(m) => m.SecurityLicenceStatusVerificationModule
 			),
 	},
+	{
+		path: AppRoutes.METAL_DEALERS_AND_RECYCLERS,
+		loadChildren: () =>
+			import('./modules/metal-dealers-and-recyclers/metal-dealers-and-recyclers.module').then(
+				(m) => m.MetalDealersAndRecyclersModule
+			),
+	},
 	{
 		path: AppRoutes.ACCESS_DENIED,
 		component: AccessDeniedComponent,

src/Spd.Presentation.Licensing/ClientApp/src/app/core/services/metal-dealers-application.helper.ts

@@ -0,0 +1,165 @@
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { CommonApplicationHelper } from '@app/core/services/common-application.helper';
+import { ConfigService } from '@app/core/services/config.service';
+import { FileUtilService } from '@app/core/services/file-util.service';
+import { UtilService } from '@app/core/services/util.service';
+import { FormControlValidators } from '@app/core/validators/form-control.validators';
+import { FormGroupValidators } from '@app/core/validators/form-group.validators';
+import { FormatDatePipe } from '@app/shared/pipes/format-date.pipe';
+import { SPD_CONSTANTS } from '../constants/constants';
+
+export abstract class MetalDealersApplicationHelper extends CommonApplicationHelper {
+	businessOwnerFormGroup: FormGroup = this.formBuilder.group({
+		legalBusinessName: new FormControl('', [FormControlValidators.required]),
+		tradeName: new FormControl('', [FormControlValidators.required]),
+		givenName: new FormControl(''),
+		middleName: new FormControl(''),
+		surname: new FormControl('', [FormControlValidators.required]),
+	});
+
+	businessManagerFormGroup: FormGroup = this.formBuilder.group({
+		givenName: new FormControl(''),
+		middleName: new FormControl(''),
+		surname: new FormControl('', [FormControlValidators.required]),
+		phoneNumber: new FormControl('', [FormControlValidators.required]),
+		emailAddress: new FormControl('', [FormControlValidators.email]),
+	});
+
+	businessAddressFormGroup: FormGroup = this.formBuilder.group({
+		addressSelected: new FormControl(false),
+		addressLine1: new FormControl(''),
+		addressLine2: new FormControl(''),
+		city: new FormControl(''),
+		postalCode: new FormControl(''),
+		province: new FormControl(''),
+		country: new FormControl(''),
+	});
+
+	businessMailingAddressFormGroup: FormGroup = this.formBuilder.group(
+		{
+			addressSelected: new FormControl(false),
+			addressLine1: new FormControl(''),
+			addressLine2: new FormControl(''),
+			city: new FormControl(''),
+			postalCode: new FormControl(''),
+			province: new FormControl(''),
+			country: new FormControl(''),
+			isAddressTheSame: new FormControl(false),
+		},
+		{
+			validators: [
+				FormGroupValidators.conditionalDefaultRequiredTrueValidator(
+					'addressSelected',
+					(_form) => _form.get('isAddressTheSame')?.value != true
+				),
+				FormGroupValidators.conditionalRequiredValidator(
+					'addressLine1',
+					(_form) => _form.get('isAddressTheSame')?.value != true
+				),
+				FormGroupValidators.conditionalRequiredValidator(
+					'city',
+					(_form) => _form.get('isAddressTheSame')?.value != true
+				),
+				FormGroupValidators.conditionalRequiredValidator(
+					'postalCode',
+					(_form) => _form.get('isAddressTheSame')?.value != true
+				),
+				FormGroupValidators.conditionalRequiredValidator(
+					'province',
+					(_form) => _form.get('isAddressTheSame')?.value != true
+				),
+				FormGroupValidators.conditionalRequiredValidator(
+					'country',
+					(_form) => _form.get('isAddressTheSame')?.value != true
+				),
+			],
+		}
+	);
+
+	branchesFormGroup: FormGroup = this.formBuilder.group({
+		branches: this.formBuilder.array([]),
+	});
+
+	branchFormGroup: FormGroup = this.formBuilder.group({
+		addressSelected: new FormControl(false, [Validators.requiredTrue]),
+		addressLine1: new FormControl('', [FormControlValidators.required]),
+		addressLine2: new FormControl(''),
+		city: new FormControl('', [FormControlValidators.required]),
+		postalCode: new FormControl('', [FormControlValidators.required]),
+		province: new FormControl('', [FormControlValidators.required]),
+		country: new FormControl('', [
+			FormControlValidators.required,
+			FormControlValidators.requiredValue(SPD_CONSTANTS.address.countryCA, SPD_CONSTANTS.address.countryCanada),
+		]),
+		givenName: new FormControl(''),
+		middleName: new FormControl(''),
+		surname: new FormControl('', [FormControlValidators.required]),
+		phoneNumber: new FormControl('', [FormControlValidators.required]),
+		emailAddress: new FormControl('', [FormControlValidators.email]),
+	});
+
+	consentAndDeclarationFormGroup: FormGroup = this.formBuilder.group({
+		check1: new FormControl(null, [Validators.requiredTrue]),
+		agreeToCompleteAndAccurate: new FormControl(null, [Validators.requiredTrue]),
+		dateSigned: new FormControl({ value: null, disabled: true }),
+		captchaFormGroup: new FormGroup({
+			token: new FormControl('', FormControlValidators.required),
+		}),
+	});
+
+	constructor(
+		formBuilder: FormBuilder,
+		protected configService: ConfigService,
+		protected formatDatePipe: FormatDatePipe,
+		protected utilService: UtilService,
+		protected fileUtilService: FileUtilService
+	) {
+		super(formBuilder);
+	}
+
+	getFullNameWithMiddle(
+		givenName: string | null | undefined,
+		middleName: string | null | undefined,
+		surname: string | null | undefined
+	): string {
+		const userNameArray: string[] = [];
+		if (givenName) {
+			userNameArray.push(givenName);
+		}
+		if (middleName) {
+			userNameArray.push(middleName);
+		}
+		if (surname) {
+			userNameArray.push(surname);
+		}
+		return userNameArray.join(' ');
+	}
+
+	getSummarybusinessOwnerDataname(modelData: any): string {
+		return this.getFullNameWithMiddle(
+			modelData.businessOwnerData.givenName,
+			modelData.businessOwnerData.middleName,
+			modelData.businessOwnerData.surname
+		);
+	}
+	getSummarybusinessOwnerDatalegalBusinessName(modelData: any): string {
+		return modelData.businessOwnerData.legalBusinessName ?? '';
+	}
+	getSummarybusinessOwnerDatatradeName(modelData: any): string {
+		return modelData.businessOwnerData.tradeName ?? '';
+	}
+
+	getSummarybusinessManagerDataname(modelData: any): string {
+		return this.getFullNameWithMiddle(
+			modelData.businessManagerData.givenName,
+			modelData.businessManagerData.middleName,
+			modelData.businessManagerData.surname
+		);
+	}
+	getSummarybusinessManagerDataphoneNumber(modelData: any): string {
+		return modelData.businessManagerData.phoneNumber ?? '';
+	}
+	getSummarybusinessManagerDataemailAddress(modelData: any): string {
+		return modelData.businessManagerData.emailAddress ?? '';
+	}
+}

src/Spd.Presentation.Licensing/ClientApp/src/app/core/services/metal-dealers-application.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormatDatePipe } from '@app/shared/pipes/format-date.pipe';
+import { BehaviorSubject } from 'rxjs';
+import { ConfigService } from './config.service';
+import { FileUtilService } from './file-util.service';
+import { MetalDealersApplicationHelper } from './metal-dealers-application.helper';
+import { UtilService } from './util.service';
+
+@Injectable({
+	providedIn: 'root',
+})
+export class MetalDealersApplicationService extends MetalDealersApplicationHelper {
+	modelValueChanges$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+	modelFormGroup: FormGroup = this.formBuilder.group({
+		businessOwnerData: this.businessOwnerFormGroup,
+		businessManagerData: this.businessManagerFormGroup,
+		businessAddressData: this.businessAddressFormGroup,
+		businessMailingAddressData: this.businessMailingAddressFormGroup,
+		branchesData: this.branchesFormGroup,
+		consentAndDeclarationData: this.consentAndDeclarationFormGroup,
+	});
+
+	constructor(
+		formBuilder: FormBuilder,
+		configService: ConfigService,
+		formatDatePipe: FormatDatePipe,
+		utilService: UtilService,
+		fileUtilService: FileUtilService
+	) {
+		super(formBuilder, configService, formatDatePipe, utilService, fileUtilService);
+	}
+}

src/Spd.Presentation.Licensing/ClientApp/src/app/modules/business-licence-application/components/business-bc-branches.component.ts

@@ -24,8 +24,8 @@ export interface BranchResponse {
 }
 
 @Component({
-    selector: 'app-business-bc-branches',
-    template: `
+	selector: 'app-business-bc-branches',
+	template: `
 		<form [formGroup]="form" novalidate>
 			<div class="row">
 				<div class="py-2">Does your business have any branches in B.C.?</div>
@@ -62,22 +62,15 @@ export interface BranchResponse {
 							</ng-container>
 
 							<ng-container matColumnDef="city">
-								<mat-header-cell class="mat-table-header-cell" *matHeaderCellDef sortActionDescription="Sort by city"
-									>City</mat-header-cell
-								>
+								<mat-header-cell class="mat-table-header-cell" *matHeaderCellDef>City</mat-header-cell>
 								<mat-cell *matCellDef="let branch">
 									<span class="mobile-label">City:</span>
 									{{ branch.city | default }}
 								</mat-cell>
 							</ng-container>
 
 							<ng-container matColumnDef="branchManager">
-								<mat-header-cell
-									class="mat-table-header-cell"
-									*matHeaderCellDef
-									sortActionDescription="Sort by manager name"
-									>Manager</mat-header-cell
-								>
+								<mat-header-cell class="mat-table-header-cell" *matHeaderCellDef>Manager</mat-header-cell>
 								<mat-cell *matCellDef="let branch">
 									<span class="mobile-label">Manager:</span>
 									{{ branch.branchManager | default }}
@@ -128,8 +121,8 @@ export interface BranchResponse {
 			</div>
 		</form>
 	`,
-    styles: [
-        `
+	styles: [
+		`
 			.mat-column-action1 {
 				min-width: 150px;
 				max-width: 150px;
@@ -146,9 +139,9 @@ export interface BranchResponse {
 				}
 			}
 		`,
-    ],
-    animations: [showHideTriggerSlideAnimation],
-    standalone: false
+	],
+	animations: [showHideTriggerSlideAnimation],
+	standalone: false,
 })
 export class BusinessBcBranchesComponent implements OnInit, LicenceChildStepperStepComponent {
 	booleanTypeCodes = BooleanTypeCode;

src/Spd.Presentation.Licensing/ClientApp/src/app/modules/metal-dealers-and-recyclers/components/metal-dealers-base.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonApplicationService } from '@app/core/services/common-application.service';
+
+@Component({
+	selector: 'app-metal-dealers-base',
+	template: `
+		<div class="container px-0 my-0 px-md-2 my-md-3">
+			<!-- hide padding/margin on smaller screens -->
+			<div class="row">
+				<div class="col-12">
+					<router-outlet></router-outlet>
+				</div>
+			</div>
+		</div>
+	`,
+	styles: ``,
+	standalone: false,
+})
+export class MetalDealersBaseComponent implements OnInit {
+	constructor(private commonApplicationService: CommonApplicationService) {}
+
+	ngOnInit(): void {
+		this.commonApplicationService.setApplicationTitleText('Metal Dealers & Recyclers', 'Metal Dealers & Recyclers');
+	}
+}

src/Spd.Presentation.Licensing/ClientApp/src/app/modules/metal-dealers-and-recyclers/components/metal-dealers-main.component.ts

@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { MetalDealersAndRecyclersRoutes } from '@app/modules/metal-dealers-and-recyclers/metal-dealers-and-recyclers-routes';
+
+@Component({
+	selector: 'app-metal-dealers-main',
+	template: `
+		<section class="step-section">
+			<div class="row">
+				<div class="col-xxl-11 col-xl-12 col-lg-12 col-md-12 col-sm-12 mx-auto">
+					<div class="row">
+						<div class="col-12 my-auto">
+							<h2 class="fs-3">Metal Dealers & Recyclers</h2>
+						</div>
+					</div>
+					<mat-divider class="mat-divider-main mb-4"></mat-divider>
+
+					<div class="text-minor-heading my-3">Registering as a metal recycling dealer</div>
+
+					<div class="row">
+						<div class="col-xl-8 col-lg-6 col-md-12 col-sm-12">
+							<p>
+								Metal theft puts public safety at risk because it interferes with telephone services, emergency
+								communications and transportation systems, and may expose the public to electrocution from live wires.
+							</p>
+
+							<p>
+								The Province passed the <i>Metal Dealers and Recyclers Act</i> and
+								<i>Metal Dealers Recyclers Regulation</i>. The act and regulation help deter and track metal theft, and
+								protect the personal information of scrap metal sellers. They also increase the accountability of
+								dealers and sellers and create consistent, minimum requirements across the province.
+							</p>
+						</div>
+						<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12">
+							<button mat-flat-button color="primary" class="large" (click)="onRegister()">
+								Register as a Metal Recycling Dealer
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	`,
+	styles: ``,
+	standalone: false,
+})
+export class MetalDealersMainComponent {
+	constructor(private router: Router) {}
+
+	onRegister(): void {
+		this.router.navigateByUrl(
+			MetalDealersAndRecyclersRoutes.path(MetalDealersAndRecyclersRoutes.METAL_DEALERS_AND_RECYCLERS_REGISTER)
+		);
+	}
+}