hmcts · ishu-kumra · Sep 8, 2026 · Sep 1, 2026 · Sep 2, 2026 · Sep 3, 2026
@@ -85,6 +85,33 @@ describe('ChangeHearingDetailsComponent', () => {
       fixture.detectChanges();
       expect(fixture).toMatchSnapshot();
     });
+
+    it('should render the session dropdown for a Crown hearing', async () => {
+      mockFixtureInputs(fixture, {
+        selectedHearing: {
+          ...selectedHearing,
+          jurisdictionType: 'CROWN',
+          hearingDays: [
+            {
+              ...selectedHearing.hearingDays[0],
+              courtScheduleId: 'court-schedule-id'
+            }
+          ]
+        },
+        hearingSlots: [
+          {
+            courtScheduleId: 'court-schedule-id',
+            businessType: 'test-business-type',
+            sessionStartTime: `${selectedHearing.startDate}T09:00:00.000Z`,
+            sessionEndTime: `${selectedHearing.startDate}T12:00:00.000Z`
+          } as HearingSlot
+        ]
+      });
+      fixture.detectChanges();
+      await fixture.whenStable();
+      fixture.detectChanges();
+      expect(fixture).toMatchSnapshot();
+    });
   });
 
   describe('Jurisdiction type control routing', () => {

@@ -55,8 +55,17 @@ <h4 pdk-margin-bottom="1">Start date</h4>
     </pdk-checkbox-conditional>
   }
   @if (!multiDay.value) {
+    @if (hearingSlots()?.length > 0) {
+      <change-hearing-session-selector
+        name="courtScheduleId"
+        [ngModel]="hearingCourtScheduleId()"
+        [hearingSlots]="hearingSlots()"
+        [startTime]="timeToCompare"
+      ></change-hearing-session-selector>
+    }
     <change-hearing-start-time-controls
       [startTime]="startTime()"
+      (startTimeChange)="timeToCompare = $event"
       [duration]="duration()"
     ></change-hearing-start-time-controls>
   }

@@ -34,6 +34,8 @@ import { NonDefaultDaysComponent } from '../../../../shared/components/non-defau
 import { CourtCentre, HearingDay, JurisdictionType, NonDefaultDay } from '../../../../core';
 import { ChangeHearingStartTimeControlsComponent } from '../change-hearing-start-time-controls.component';
 import { DatePipe } from '@angular/common';
+import { HearingSlot } from '@cpp/scheduling';
+import { ChangeHearingSessionSelectorComponent } from '../change-hearing-session-selector.component';
 
 const ERROR_MESSAGES: ErrorMessageConfig[] = [
   { rule: 'required', message: 'Enter an end date' },
@@ -65,7 +67,8 @@ const ERROR_MESSAGES: ErrorMessageConfig[] = [
     PdkCheckBox,
     PdkDateInput,
     PdkCore,
-    DatePipe
+    DatePipe,
+    ChangeHearingSessionSelectorComponent
   ],
   providers: [
     {
@@ -101,6 +104,9 @@ export class ChangeHearingDetailsCrownControlComponent implements ControlValueAc
   readonly duration = input<number>(undefined);
   readonly jurisdictionType = input<JurisdictionType>(undefined);
   readonly onValidationError = output<ValidationError[]>();
+  readonly hearingSlots = input<HearingSlot[]>([]);
+  readonly hearingCourtScheduleId = input<string>(undefined);
+  timeToCompare: string;
   endDateControl: FormControl<string>;
   errorMessages = ERROR_MESSAGES;
   dateRange: DateRange;

@@ -12,34 +12,13 @@ <h4 pdk-margin-bottom="1">End date</h4>
     </non-sitting-days>
   }
   @if (!isMultiDay) {
-    @if (sessionTimesOptions?.length > 0) {
-      <div>
-        <pdk-form-field
-          label="Session"
-          labelType="small"
-          [errorMessages]="[
-            {
-              rule: 'required',
-              message: 'Select a session'
-            },
-            {
-              rule: 'startTimeInvalid',
-              message: 'The start time must be between valid session timings'
-            }
-          ]"
-        >
-          <pdk-select
-            justified
-            required
-            name="courtScheduleId"
-            [options]="sessionTimesOptions"
-            [ngModel]="hearingCourtScheduleId()"
-            [startTimeBetweenSession]="timeToCompare"
-            [hearingSlots]="hearingSlots()"
-          >
-          </pdk-select>
-        </pdk-form-field>
-      </div>
+    @if (hearingSlots()?.length > 0) {
+      <change-hearing-session-selector
+        name="courtScheduleId"
+        [ngModel]="hearingCourtScheduleId()"
+        [hearingSlots]="hearingSlots()"
+        [startTime]="timeToCompare"
+      ></change-hearing-session-selector>
     }
     <change-hearing-start-time-controls
       [startTime]="originalStartTime()"

@@ -1,13 +1,12 @@
-import { ChangeDetectionStrategy, Component, OnInit, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
 
-import { PdkCore, PdkForm, PdkSelectComponent, SelectOption } from '@cpp/pdk';
+import { PdkCore } from '@cpp/pdk';
 import { DatePipe } from '@angular/common';
 import { ChangeHearingStartTimeControlsComponent } from '../change-hearing-start-time-controls.component';
 import { HearingSlot } from '@cpp/scheduling';
-import { sortSelectOptionAlphabetical } from '@cpp/reference-data';
 import { NonSittingDaysComponent } from '../../../../shared/components/non-sitting-days/non-sitting-days.component';
-import { StartTimeBetweenSessionDirective } from './start-time-between-session-validator.directive';
+import { ChangeHearingSessionSelectorComponent } from '../change-hearing-session-selector.component';
 
 @Component({
   selector: 'change-hearing-mags-control',
@@ -16,12 +15,10 @@ import { StartTimeBetweenSessionDirective } from './start-time-between-session-v
   imports: [
     FormsModule,
     PdkCore,
-    PdkForm,
-    PdkSelectComponent,
     ChangeHearingStartTimeControlsComponent,
     NonSittingDaysComponent,
-    StartTimeBetweenSessionDirective,
-    DatePipe
+    DatePipe,
+    ChangeHearingSessionSelectorComponent
   ],
   viewProviders: [
     {
@@ -30,7 +27,7 @@ import { StartTimeBetweenSessionDirective } from './start-time-between-session-v
     }
   ]
 })
-export class ChangeHearingDetailsMagsControlComponent implements OnInit {
+export class ChangeHearingDetailsMagsControlComponent {
   readonly originalStartTime = input<string>(undefined, { alias: 'startTime' });
   readonly startDate = input<string>(undefined);
   readonly endDate = input<string>(undefined);
@@ -41,22 +38,5 @@ export class ChangeHearingDetailsMagsControlComponent implements OnInit {
   get isMultiDay() {
     return this.startDate() !== this.endDate();
   }
-  sessionTimesOptions: SelectOption[] = [];
-  datePipe = new DatePipe('en-GB');
   timeToCompare: string;
-
-  ngOnInit() {
-    const hearingSlots = this.hearingSlots();
-    if (hearingSlots?.length > 0) {
-      this.sessionTimesOptions = hearingSlots
-        .map(({ courtScheduleId, sessionStartTime, sessionEndTime, businessType }) => ({
-          value: courtScheduleId,
-          label: `${businessType} ${this.datePipe.transform(
-            sessionStartTime,
-            'hh:mm a'
-          )} to ${this.datePipe.transform(sessionEndTime, 'hh:mm a')}`
-        }))
-        .sort(sortSelectOptionAlphabetical);
-    }
-  }
 }
@@ -39,6 +39,8 @@
           [selectedCourtCentre]="selectedCourtCentre()"
           [startTime]="initialValues()?.startTime"
           [duration]="initialValues()?.duration"
+          [hearingSlots]="hearingSlots()"
+          [hearingCourtScheduleId]="selectedHearing()?.hearingDays[0]?.courtScheduleId"
           [jurisdictionType]="selectedHearing()?.jurisdictionType"
           (onValidationError)="onValidationError.emit($event)"
         >

@@ -0,0 +1,133 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  input,
+  untracked
+} from '@angular/core';
+import {
+  ControlContainer,
+  ControlValueAccessor,
+  FormControl,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  NgForm,
+  ReactiveFormsModule,
+  ValidationErrors,
+  Validator
+} from '@angular/forms';
+import { PdkForm, PdkSelectComponent, generateId, ErrorMessageConfig } from '@cpp/pdk';
+import { DatePipe } from '@angular/common';
+import { HearingSlot } from '@cpp/scheduling';
+import { SelectOption } from '@kolkov/angular-editor';
+import { sortSelectOptionAlphabetical } from '@cpp/reference-data';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { StartTimeBetweenSessionDirective } from './start-time-between-session-validator.directive';
+
+const ERROR_MESSAGES: ErrorMessageConfig[] = [
+  { rule: 'required', message: 'Select a session' },
+  { rule: 'startTimeInvalid', message: 'The start time must be between valid session timings' }
+];
+
+@Component({
+  selector: 'change-hearing-session-selector',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ReactiveFormsModule, PdkForm, PdkSelectComponent, StartTimeBetweenSessionDirective],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: forwardRef(() => ChangeHearingSessionSelectorComponent)
+    },
+    {
+      provide: NG_VALIDATORS,
+      multi: true,
+      useExisting: forwardRef(() => ChangeHearingSessionSelectorComponent)
+    }
+  ],
+  template: `
+    <pdk-form-field label="Session" labelType="small" [errorMessages]="errorMessages">
+      <pdk-select
+        justified
+        required
+        [id]="id"
+        [formControl]="control"
+        [options]="sessionTimesOptions()"
+        [startTimeBetweenSession]="startTime()"
+        [hearingSlots]="hearingSlots()"
+      >
+      </pdk-select>
+    </pdk-form-field>
+  `,
+  viewProviders: [
+    {
+      provide: ControlContainer,
+      useExisting: NgForm
+    }
+  ],
+  styles: [
+    `
+      .timeDuration {
+        display: flex;
+        justify-content: space-between;
+        width: 600px;
+      }
+    `
+  ]
+})
+export class ChangeHearingSessionSelectorComponent implements ControlValueAccessor, Validator {
+  readonly hearingSlots = input<HearingSlot[]>([]);
+  readonly startTime = input<string>(undefined);
+  readonly id = generateId('hearing-start-time-within-session-time');
+  readonly control = new FormControl<string>(null);
+  readonly errorMessages = ERROR_MESSAGES;
+
+  private readonly datePipe = new DatePipe('en-GB');
+
+  readonly sessionTimesOptions = computed<SelectOption[]>(() =>
+    (this.hearingSlots() ?? [])
+      .map(({ courtScheduleId, sessionStartTime, sessionEndTime, businessType }) => ({
+        value: courtScheduleId,
+        label: `${businessType} ${this.datePipe.transform(
+          sessionStartTime,
+          'hh:mm a'
+        )} to ${this.datePipe.transform(sessionEndTime, 'hh:mm a')}`
+      }))
+      .sort(sortSelectOptionAlphabetical)
+  );
+
+  private propagateChange: (courtScheduleId: string) => void = () => {};
+  private revalidate: () => void = () => {};
+
+  constructor() {
+    this.control.valueChanges
+      .pipe(takeUntilDestroyed())
+      .subscribe(courtScheduleId => this.propagateChange(courtScheduleId));
+
+    effect(() => {
+      this.startTime();
+      untracked(() => this.revalidate());
+    });
+  }
+
+  writeValue(courtScheduleId: string): void {
+    this.control.setValue(courtScheduleId ?? null, { emitEvent: false });
+  }
+
+  registerOnChange(fn: (courtScheduleId: string) => void): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(): void {}
+
+  registerOnValidatorChange(fn: () => void): void {
+    this.revalidate = fn;
+  }
+
+  validate(): ValidationErrors | null {
+    this.control.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+    return this.control.errors;
+  }
+}
@@ -2,7 +2,7 @@ import { DatePipe } from '@angular/common';
 import { Directive, effect, forwardRef, inject, input } from '@angular/core';
 import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';
 import { HearingSlot } from '@cpp/scheduling';
-import { CPPDate } from '../../../../core/util';
+import { CPPDate } from '../../../core/util';
 
 @Directive({
   selector: '[startTimeBetweenSession]',

@@ -7,7 +7,11 @@ import { getSelectedHearing } from '../state/selectors/court-calendar.selectors'
 
 import { ActivatedRouteSnapshot, CanActivateFn, Router } from '@angular/router';
 import { ERROR_ROUTE_PATHS } from '@cpp/application';
-import { loadHearingSlotsSuccess, SearchHearingSlotsParams } from '@cpp/scheduling';
+import {
+  CrownSessionStatus,
+  loadHearingSlotsSuccess,
+  SearchHearingSlotsParams
+} from '@cpp/scheduling';
 import { getOrganisationUnits } from '@cpp/reference-data';
 import { SchedulingService } from '@cpp/scheduling';
 
@@ -23,22 +27,22 @@ export const getSessionsForSeelectedHearingGuard: CanActivateFn = (
     withLatestFrom(store.pipe(select(getOrganisationUnits))),
     take(1),
     switchMap(([selectedHearing, courtCentres]) => {
-      if (selectedHearing.jurisdictionType === 'CROWN') {
-        return of(true);
-      }
       const courtCentre = courtCentres.find(({ id }) => selectedHearing.courtCentreId === id);
-      const { jurisdictionType, hearingDayCount, hearingDays, startDate, endDate } =
+      const { jurisdictionType, hearingDayCount, hearingDays, startDate, endDate, courtRoomId } =
         selectedHearing;
       const isMultiday = !!hearingDayCount ? hearingDayCount > 1 : hearingDays.length > 1;
+      const isCrown = jurisdictionType === 'CROWN';
       const slotsParams: SearchHearingSlotsParams & { isMultiday?: boolean } = {
         sessionStartDate: startDate,
         sessionEndDate: endDate,
+        courtRoomId,
         panel: 'ADULT,YOUTH',
         ouCode: courtCentre.oucode,
         pageSize: 500,
         pageNumber: 1,
         showOverbookedSlots: true,
         jurisdiction: jurisdictionType,
+        status: isCrown ? CrownSessionStatus.FINAL : undefined,
         isMultiday
       };
       return scheduleService.searchHearingSlots(slotsParams).pipe(