Feat/cb2 14449

src/app/features/tech-record/components/tech-record-summary-changes/tech-record-summary-changes.component.html

@@ -82,6 +82,16 @@
 
   <ng-template #accordion let-sectionName="sectionName" let-section="section">
     <ng-container [ngSwitch]="sectionName">
+      <ng-container *ngSwitchCase="'notes'">
+        <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsNotes'); else oldNotes">
+          <app-notes-section [techRecord]="techRecordEdited" mode="summary" />
+        </ng-container>
+
+        <ng-template #oldNotes>
+          <app-dynamic-form-group [data]="techRecordChanges" [template]="section"></app-dynamic-form-group>
+        </ng-template>
+      </ng-container>
+
       <ng-container *ngSwitchCase="'techRecordSummary'">
         <!-- New Vehicle Summary section -->
         <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsVehicleSummary'); else oldTechRecordSummary">
@@ -95,7 +105,17 @@
 
       </ng-container>
 
-      <app-body *ngSwitchCase="'bodySection'" [techRecord]="techRecordEdited" [disableLoadOptions]="true"></app-body>
+      <ng-container *ngSwitchCase="'bodySection'">
+        <!-- New Body section -->
+        <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsBody')">
+          <app-body-section [techRecord]="techRecordEdited" mode="summary" />
+        </ng-container>
+
+        <!-- Old Body section -->
+        <ng-template #oldBodySection>
+          <app-body [techRecord]="techRecordEdited" [disableLoadOptions]="true"></app-body>
+        </ng-template>
+      </ng-container>
 
       <ng-container *ngSwitchCase="'dimensionsSection'">
         <app-dimensions

src/app/features/tech-record/components/tech-record-summary/__tests__/tech-record-summary.component.spec.ts

@@ -8,6 +8,7 @@ import { LettersComponent } from '@forms/custom-sections/letters/letters.compone
 import { DynamicFormsModule } from '@forms/dynamic-forms.module';
 import { MultiOptionsService } from '@services/multi-options/multi-options.service';
 
+import { FormControl, FormGroup } from '@angular/forms';
 import { TechRecordType as TechRecordTypeByVehicle } from '@dvsa/cvs-type-definitions/types/v3/tech-record/tech-record-vehicle-type';
 import { TechRecordType } from '@dvsa/cvs-type-definitions/types/v3/tech-record/tech-record-verb';
 import { Roles } from '@models/roles.enum';
@@ -196,4 +197,23 @@ describe('TechRecordSummaryComponent', () => {
 			expect(dispatchSpy).toHaveBeenCalledWith(updateEditingTechRecord({ vehicleTechRecord: mockTechRecord }));
 		});
 	});
+
+	describe('handleVehicleConfigurationChanges', () => {
+		it('should update various form fields once the vehicle configuration changes', () => {
+			const form = new FormGroup({
+				techRecord_vehicleConfiguration: new FormControl(''),
+				techRecord_bodyType_description: new FormControl(''),
+				techRecord_bodyType_code: new FormControl(''),
+				techRecord_functionCode: new FormControl(''),
+			});
+			const subscriptionSpy = jest
+				.spyOn(form.get('techRecord_vehicleConfiguration')!.valueChanges, 'pipe')
+				.mockReturnValue(of('articulated'));
+			const formPatchSpy = jest.spyOn(form, 'patchValue');
+			component.form = form;
+			component.handleVehicleConfigurationChanges();
+			expect(subscriptionSpy).toHaveBeenCalled();
+			expect(formPatchSpy).toHaveBeenCalled();
+		});
+	});
 });

src/app/features/tech-record/components/tech-record-summary/tech-record-summary.component.html

@@ -10,7 +10,7 @@
     </div>
     <div class="govuk-grid-column-one-half">
       <ng-container *ngFor="let section of sectionTemplates; let i = index">
-        <app-accordion *ngIf="i >= middleIndex" [id]="section.name" [title]="section.label">
+        <app-accordion *ngIf="i >= middleIndex" [id]="section.name" [title]="section.label" [isExpanded]="isSectionExpanded$(section.name) | async">
           <ng-template [ngTemplateOutlet]="accordion" [ngTemplateOutletContext]="{ sectionName: section.name, section: section }"></ng-template>
         </app-accordion>
       </ng-container>
@@ -22,6 +22,23 @@
   <form [formGroup]="form">
     <ng-container *ngIf="techRecordCalculated">
       <ng-container [ngSwitch]="sectionName">
+        <ng-container *ngSwitchCase="'notesSection'">
+          <!-- New Notes section -->
+          <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsNotes'); else oldNotes">
+            <app-notes-section [techRecord]="techRecordCalculated" [mode]="(isEditing$ | async) ? 'edit' : 'view'" />
+          </ng-container>
+
+          <!-- Old Notes section -->
+          <ng-template #oldNotes>
+            <app-dynamic-form-group
+              [data]="techRecordCalculated"
+              [template]="section"
+              [edit]="(isEditing$ | async) ?? false"
+              (formChange)="handleFormState($event)"
+            ></app-dynamic-form-group>
+          </ng-template>
+        </ng-container>
+
         <ng-container *ngSwitchCase="'techRecordSummary'">
           <!-- New Vehicle Summary section -->
           <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsVehicleSummary'); else oldTechRecordSummary">
@@ -40,12 +57,21 @@
 
         </ng-container>
 
-        <app-body
-          *ngSwitchCase="'bodySection'"
-          [techRecord]="techRecordCalculated"
-          [isEditing]="(isEditing$ | async) ?? false"
-          (formChange)="handleFormState($event)"
-        ></app-body>
+        <ng-container *ngSwitchCase="'bodySection'">
+          <!-- New Body section -->
+          <ng-container *ngIf="featureToggleService.isFeatureEnabled('FsBody'); else oldBodySection">
+            <app-body-section [techRecord]="techRecordCalculated" [mode]="(isEditing$ | async) ? 'edit' : 'view'" />
+          </ng-container>
+
+          <!-- Old Body section -->
+          <ng-template #oldBodySection>
+            <app-body
+              [techRecord]="techRecordCalculated"
+              [isEditing]="(isEditing$ | async) ?? false"
+              (formChange)="handleFormState($event)"
+            ></app-body>
+          </ng-template>
+        </ng-container>
 
         <ng-container *ngSwitchCase="'dimensionsSection'">
           <app-dimensions

src/app/features/tech-record/components/tech-record-summary/tech-record-summary.component.ts

@@ -71,7 +71,7 @@ export class TechRecordSummaryComponent implements OnInit, OnDestroy, AfterViewI
 	isEditing = false;
 	scrollPosition: [number, number] = [0, 0];
 	isADRCertGenEnabled = false;
-	isDFSEnabled = false;
+	isADREnabled = false;
 
 	private axlesService = inject(AxlesService);
 	private errorService = inject(GlobalErrorService);
@@ -90,11 +90,11 @@ export class TechRecordSummaryComponent implements OnInit, OnDestroy, AfterViewI
 
 	private destroy$ = new Subject<void>();
 
-	form = this.fb.group({});
+	form: FormGroup = this.fb.group({});
 
 	ngOnInit(): void {
 		this.isADRCertGenEnabled = this.featureToggleService.isFeatureEnabled('adrCertToggle');
-		this.isDFSEnabled = this.featureToggleService.isFeatureEnabled('FsAdr');
+		this.isADREnabled = this.featureToggleService.isFeatureEnabled('FsAdr');
 
 		this.technicalRecordService.techRecord$
 			.pipe(
@@ -178,6 +178,34 @@ export class TechRecordSummaryComponent implements OnInit, OnDestroy, AfterViewI
 			.subscribe((techRecord) => {
 				if (this.isEditing && techRecord) this.form.patchValue({ ...techRecord });
 			});
+
+		this.handleVehicleConfigurationChanges();
+	}
+
+	handleVehicleConfigurationChanges() {
+		// TODO clean this up in the future
+		const formControl = this.form.get('techRecord_vehicleConfiguration');
+		formControl?.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+			if (!value) {
+				return;
+			}
+			if (this.techRecordCalculated?.techRecord_vehicleType === VehicleTypes.HGV && value === 'articulated') {
+				this.form.patchValue({
+					techRecord_bodyType_description: 'articulated',
+					techRecord_bodyType_code: 'a',
+				});
+			}
+			const functionCodes: Record<string, string> = {
+				rigid: 'R',
+				articulated: 'A',
+				'semi-trailer': 'A',
+			};
+
+			const functionCode = functionCodes[value];
+			this.form.patchValue({
+				techRecord_functionCode: functionCode,
+			});
+		});
 	}
 
 	get vehicleType() {
@@ -214,30 +242,44 @@ export class TechRecordSummaryComponent implements OnInit, OnDestroy, AfterViewI
 	}
 
 	get customSectionForms(): Array<CustomFormGroup | CustomFormArray> {
-		const commonCustomSections = [
-			this.body?.form,
-			this.dimensions?.form,
-			this.tyres?.form,
-			this.weights?.form,
-			this.approvalType?.form,
-		];
+		const commonCustomSections = this.addCustomSectionsBasedOffFlag();
 
 		switch (this.vehicleType) {
 			case VehicleTypes.PSV:
 				return [...commonCustomSections, this.psvBrakes.form];
 			case VehicleTypes.HGV:
-				return !this.isDFSEnabled ? [...commonCustomSections, this.adr.form] : commonCustomSections;
+				return !this.isADREnabled ? [...commonCustomSections, this.adr.form] : commonCustomSections;
 			case VehicleTypes.TRL:
-				return !this.isDFSEnabled
+				return !this.isADREnabled
 					? [...commonCustomSections, this.trlBrakes.form, this.letters.form, this.adr.form]
 					: [...commonCustomSections, this.trlBrakes.form, this.letters.form];
 			case VehicleTypes.LGV:
-				return !this.isDFSEnabled ? [this.adr.form] : [];
+				return !this.isADREnabled ? [this.adr.form] : [];
 			default:
 				return [];
 		}
 	}
 
+	addCustomSectionsBasedOffFlag(): CustomFormGroup[] {
+		const sections = [];
+		if (!this.featureToggleService.isFeatureEnabled('FsBody') && this.body?.form) {
+			sections.push(this.body.form);
+		}
+		if (!this.featureToggleService.isFeatureEnabled('FsDimensions') && this.dimensions?.form) {
+			sections.push(this.dimensions.form);
+		}
+		if (!this.featureToggleService.isFeatureEnabled('FsTyres') && this.tyres?.form) {
+			sections.push(this.tyres.form);
+		}
+		if (!this.featureToggleService.isFeatureEnabled('FsWeights') && this.weights?.form) {
+			sections.push(this.weights.form);
+		}
+		if (!this.featureToggleService.isFeatureEnabled('FsApprovalType') && this.approvalType?.form) {
+			sections.push(this.approvalType.form);
+		}
+		return sections;
+	}
+
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	handleFormState(event: any): void {
 		const isPrimitiveArray = (a: unknown, b: unknown) =>

src/app/forms/components/autocomplete/autocomplete.component.html

@@ -17,5 +17,5 @@
       <option value=""></option>
       <option *ngFor="let option of options" [value]="option.value" [selected]="option.value === control?.value">{{ option.label }}</option>
     </select>
-  </div>
+  </div>   
 </div>

src/app/forms/components/govuk-form-group-autocomplete/govuk-form-group-autocomplete.component.html

@@ -0,0 +1,25 @@
+<div [class]="style">
+  <label tag for="{{ id }}" [id]="labelId" class="govuk-label govuk-label--m">
+    {{ controlLabel }}
+    <ng-container *ngIf="tags?.length">
+      <div class="flex gap-2">
+        <app-tag *ngFor="let tag of tags" [type]="tag.colour">{{ tag.label }}</app-tag>
+      </div>
+    </ng-container>
+  </label>
+
+  <ng-container *ngIf="controlHint">
+    <div class="govuk-hint" id="{{ hintId }}"> {{ controlHint }} </div>
+  </ng-container>
+
+  <ng-container *ngIf="hasError">
+    <p class="govuk-error-message" id="{{ errorId }}">
+      <span class="govuk-visually-hidden">Error: </span>
+      <span>{{ (control?.errors | keyvalue)?.[0]?.value }}</span>
+    </p>
+  </ng-container>
+
+  <div [class]="innerStyle">
+    <select id="{{ id }}"></select>
+  </div>
+</div>

src/app/forms/components/govuk-form-group-autocomplete/govuk-form-group-autocomplete.component.scss

@@ -0,0 +1,25 @@
+.autocomplete__wrapper {
+  z-index: 0;
+  font-family: 'GDS Transport', arial, sans-serif;
+}
+
+.extra-margin {
+  margin-bottom: 30px;
+}
+
+.internal-wrapper {
+  margin-top: 10px;
+  display: flex;
+
+  .prefix {
+    border: 2px solid #0b0c0c;
+    border-right: 0;
+    height: fit-content;
+  }
+
+  @media (max-width: 640px) {
+    .prefix {
+      line-height: 1.25;
+    }
+  }
+}