[FE] various usability updates (#2063)

# Description

This PR includes the following proposed change(s):

- SPDBT-3489 - Terms and Conditions error wording
- SPDBT-3490 - Characteristics defaults
- SPDBT-3491 - Checklists to use bullets
- SPDBT-3492 - Licence categories informational instructions
- SPDBT-3493 - Fingerprint clarification text and button
- SPDBT-3494 - Authorization to use restraints/dogs clarification text
- SPDBT-3495 - Upload photo clarification text
- SPDBT-3496 - Payment received - move Download Receipt button
- SPDBT-3499 - Expired Licence text clarification

src/Spd.Presentation.Licensing/ClientApp/src/app/core/code-types/model-desc.models.ts

@@ -344,7 +344,7 @@ export const EyeColourTypes: SelectOptions[] = [
 
 export const HeightUnitTypes: SelectOptions[] = [
 	{ desc: 'Centimeters', code: HeightUnitCode.Centimeters },
-	{ desc: 'Feet', code: HeightUnitCode.Inches },
+	{ desc: 'Feet and Inches', code: HeightUnitCode.Inches },
 ];
 
 export const WeightUnitTypes: SelectOptions[] = [

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

@@ -21,6 +21,7 @@ import {
 	PermitAppUpsertRequest,
 	PermitLicenceAppResponse,
 	ServiceTypeCode,
+	WeightUnitCode,
 } from '@app/api/models';
 import { BooleanTypeCode } from '@app/core/code-types/model-desc.models';
 import { AuthenticationService } from '@app/core/services/authentication.service';
@@ -838,12 +839,23 @@ export class PermitApplicationService extends PermitApplicationHelper {
 	private createEmptyPermitAnonymous(serviceTypeCode: ServiceTypeCode): Observable<any> {
 		this.reset();
 
+		const characteristicsData = {
+			hairColourCode: null,
+			eyeColourCode: null,
+			height: null,
+			heightUnitCode: HeightUnitCode.Inches,
+			heightInches: null,
+			weight: null,
+			weightUnitCode: WeightUnitCode.Pounds,
+		};
+
 		this.permitModelFormGroup.patchValue(
 			{
 				serviceTypeData: { serviceTypeCode: serviceTypeCode },
 				permitRequirementData: { serviceTypeCode: serviceTypeCode },
 				licenceTermData: { licenceTermCode: LicenceTermCode.FiveYears },
 				profileConfirmationData: { isProfileUpToDate: true },
+				characteristicsData,
 			},
 			{
 				emitEvent: false,
@@ -1077,10 +1089,10 @@ export class PermitApplicationService extends PermitApplicationHelper {
 			hairColourCode: applicantProfile.hairColourCode,
 			eyeColourCode: applicantProfile.eyeColourCode,
 			height,
-			heightUnitCode: applicantProfile.heightUnitCode,
+			heightUnitCode: applicantProfile.heightUnitCode ?? HeightUnitCode.Inches,
 			heightInches,
 			weight: applicantProfile.weight ? applicantProfile.weight + '' : null,
-			weightUnitCode: applicantProfile.weightUnitCode,
+			weightUnitCode: applicantProfile.weightUnitCode ?? WeightUnitCode.Pounds,
 		};
 
 		const contactInformationData = {

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

@@ -15,6 +15,7 @@ import {
 	LicenceDocumentTypeCode,
 	LicenceResponse,
 	ServiceTypeCode,
+	WeightUnitCode,
 	WorkerCategoryTypeCode,
 	WorkerLicenceAppResponse,
 	WorkerLicenceAppSubmitRequest,
@@ -1079,11 +1080,22 @@ export class WorkerApplicationService extends WorkerApplicationHelper {
 	private getLicenceEmptyAnonymous(serviceTypeCode: ServiceTypeCode): Observable<any> {
 		this.reset();
 
+		const characteristicsData = {
+			hairColourCode: null,
+			eyeColourCode: null,
+			height: null,
+			heightUnitCode: HeightUnitCode.Inches,
+			heightInches: null,
+			weight: null,
+			weightUnitCode: WeightUnitCode.Pounds,
+		};
+
 		this.workerModelFormGroup.patchValue(
 			{
 				serviceTypeData: { serviceTypeCode: serviceTypeCode },
 				profileConfirmationData: { isProfileUpToDate: true },
 				mentalHealthConditionsData: { hasNewMentalHealthCondition: BooleanTypeCode.Yes },
+				characteristicsData,
 			},
 			{
 				emitEvent: false,
@@ -1346,10 +1358,10 @@ export class WorkerApplicationService extends WorkerApplicationHelper {
 			hairColourCode: applicantProfile.hairColourCode,
 			eyeColourCode: applicantProfile.eyeColourCode,
 			height,
-			heightUnitCode: applicantProfile.heightUnitCode,
+			heightUnitCode: applicantProfile.heightUnitCode ?? HeightUnitCode.Inches,
 			heightInches,
 			weight: applicantProfile.weight ? applicantProfile.weight + '' : null,
-			weightUnitCode: applicantProfile.weightUnitCode,
+			weightUnitCode: applicantProfile.weightUnitCode ?? WeightUnitCode.Pounds,
 		};
 
 		const contactInformationData = {

src/Spd.Presentation.Licensing/ClientApp/src/app/modules/business-licence-application/components/business-category-private-investigator.component.ts

@@ -11,8 +11,8 @@ import {
 } from '../../../shared/components/modal-lookup-by-licence-number.component';
 
 @Component({
-    selector: 'app-business-category-private-investigator',
-    template: `
+	selector: 'app-business-category-private-investigator',
+	template: `
 		<form [formGroup]="form" novalidate>
 			<div class="row mt-3">
 				<div class="col-lg-8 col-md-12 col-sm-12">
@@ -35,14 +35,14 @@ import {
 									<div class="text-primary-color">Name</div>
 									<div class="text-primary-color fs-5">{{ managerLicenceHolderName.value }}</div>
 								</div>
-								<div class="col-lg-4 col-md-6 col-sm-12 mt-2 mt-lg-0">
+								<div class="col-lg-3 col-md-6 col-sm-12 mt-2 mt-lg-0">
 									<div class="text-primary-color">Security Worker Licence Number</div>
 									<div class="text-primary-color fs-5">{{ managerLicenceNumber.value }}</div>
 								</div>
-								<div class="col-lg-2 col-md-6 col-sm-12 mt-2 mt-lg-0">
+								<div class="col-lg-3 col-md-6 col-sm-12 mt-2 mt-lg-0">
 									<div class="text-primary-color">Expiry Date</div>
 									<div class="text-primary-color fs-5">
-										{{ managerLicenceExpiryDate.value | formatDate : formalDateFormat }}
+										{{ managerLicenceExpiryDate.value | formatDate: formalDateFormat }}
 									</div>
 								</div>
 								<div class="col-lg-2 col-md-6 col-sm-12 mt-2 mt-lg-0">
@@ -70,15 +70,18 @@ import {
 			</div>
 		</form>
 	`,
-    styles: ``,
-    standalone: false
+	styles: ``,
+	standalone: false,
 })
 export class BusinessCategoryPrivateInvestigatorComponent implements LicenceChildStepperStepComponent {
 	formalDateFormat = SPD_CONSTANTS.date.formalDateFormat;
 
 	form = this.businessApplicationService.categoryPrivateInvestigatorFormGroup;
 
-	constructor(private dialog: MatDialog, private businessApplicationService: BusinessApplicationService) {}
+	constructor(
+		private dialog: MatDialog,
+		private businessApplicationService: BusinessApplicationService
+	) {}
 
 	isFormValid(): boolean {
 		this.form.markAllAsTouched();

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

@@ -25,8 +25,8 @@ import { HotToastService } from '@ngxpert/hot-toast';
 import { Observable, forkJoin, switchMap, take, tap } from 'rxjs';
 
 @Component({
-    selector: 'app-business-user-applications',
-    template: `
+	selector: 'app-business-user-applications',
+	template: `
 		<section class="step-section" *ngIf="results$ | async">
 			<div class="row">
 				<div class="col-xxl-10 col-xl-12 col-lg-12 col-md-12 col-sm-12 mx-auto">
@@ -117,7 +117,11 @@ import { Observable, forkJoin, switchMap, take, tap } from 'rxjs';
 					<div class="summary-card-section mt-4 mb-3 px-4 py-3" *ngIf="!activeLicenceExist">
 						<div class="row">
 							<div class="col-xl-7 col-lg-6">
-								<div class="text-data">You don't have an active business licence</div>
+								<div class="text-data">You don't have an active business licence.</div>
+								<div class="d-block text-muted mt-3 mb-2">
+									Apply for a new business licence if you have a never held a licence or you have a previously expired
+									one.
+								</div>
 							</div>
 							<div class="col-xl-5 col-lg-6 text-end">
 								<button mat-flat-button color="primary" class="large mt-2 mt-lg-0" (click)="onNewBusinessLicence()">
@@ -132,8 +136,8 @@ import { Observable, forkJoin, switchMap, take, tap } from 'rxjs';
 			</div>
 		</section>
 	`,
-    styles: [],
-    standalone: false
+	styles: [],
+	standalone: false,
 })
 export class BusinessUserApplicationsComponent implements OnInit {
 	formalDateFormat = SPD_CONSTANTS.date.formalDateFormat;

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

@@ -15,13 +15,20 @@ import { FileUploadComponent } from '@app/shared/components/file-upload.componen
 import { OptionsPipe } from '@app/shared/pipes/options.pipe';
 
 @Component({
-    selector: 'app-step-business-licence-category',
-    template: `
+	selector: 'app-step-business-licence-category',
+	template: `
 		<app-step-section [title]="title" [subtitle]="infoTitle">
 			<form [formGroup]="form" novalidate>
 				<div class="row">
-					<div class="offset-xxl-2 col-xxl-8 offset-xl-2 col-xl-8 col-lg-12 mx-auto">
+					<div class="col-xxl-8 col-xl-8 col-lg-12 mx-auto">
 						<div class="row">
+							<div class="col-12 mb-3">
+								<app-alert type="info" icon="info">
+									Select a category from the dropdown and then click 'Add Category'. Repeat this process for multiple
+									categories.
+								</app-alert>
+							</div>
+
 							<div class="col-md-8 col-sm-12">
 								<mat-form-field>
 									<mat-label>Category</mat-label>
@@ -32,7 +39,7 @@ import { OptionsPipe } from '@app/shared/pipes/options.pipe';
 									</mat-select>
 								</mat-form-field>
 								<mat-error class="mat-option-error" *ngIf="isDirtyAndInvalid">
-									At least one category must be added. Click 'Add Category' after selection.
+									At least one category must be added. Click 'Add Category' after selecting a category.
 								</mat-error>
 							</div>
 							<div class="col-md-4 col-sm-12">
@@ -361,8 +368,8 @@ import { OptionsPipe } from '@app/shared/pipes/options.pipe';
 			</form>
 		</app-step-section>
 	`,
-    styles: [
-        `
+	styles: [
+		`
 			.title {
 				padding-bottom: 2px;
 			}
@@ -376,9 +383,9 @@ import { OptionsPipe } from '@app/shared/pipes/options.pipe';
 				pointer-events: none;
 			}
 		`,
-    ],
-    animations: [showHideTriggerSlideAnimation],
-    standalone: false
+	],
+	animations: [showHideTriggerSlideAnimation],
+	standalone: false,
 })
 export class StepBusinessLicenceCategoryComponent implements OnInit, LicenceChildStepperStepComponent {
 	isDirtyAndInvalid = false;
@@ -793,7 +800,10 @@ export class StepBusinessLicenceCategoryComponent implements OnInit, LicenceChil
 			!this.showInsuranceError
 		);
 
-		return valid1 && valid2 && valid3 && valid4 && !this.showInsuranceError;
+		const isValid = valid1 && valid2 && valid3 && valid4;
+
+		this.isDirtyAndInvalid = this.categoryList.length == 0;
+		return isValid && !this.showInsuranceError && !this.isDirtyAndInvalid;
 	}
 
 	onFileUploaded(file: File): void {