Hdpi 1779 address capture

JOURNEY_ENGINE_README.md

@@ -152,3 +152,27 @@ The engine uses a smart template resolution system:
 4. Falls back to step ID as template path
 
 Place templates in `views/journey-slug/` or use the defaults in `views/_defaults/`.
+
+## Address Lookup (OS Places)
+
+The engine includes a composite `address` field type that adds UK postcode lookup via the OS Places API and a manual entry form.
+
+Example usage in a step:
+
+```
+fields: {
+  homeAddress: {
+    type: 'address',
+    label: { text: 'Address lookup' },
+    validate: { required: true }
+  },
+  continueButton: { type: 'button', attributes: { type: 'submit' } }
+}
+```
+
+Config required:
+
+- `osPostcodeLookup.url` (e.g. `https://api.os.uk/search/places/v1`)
+- `secrets.pcs.pcs-os-client-lookup-key` – OS Places API key
+
+The lookup is performed client-side against `/api/postcode-lookup` and returns a list of addresses to populate the form.

config/default.json

@@ -24,8 +24,8 @@
     "key": "s2s:service-token"
   },
   "ccd": {
-    "url": "http://ccd-data-store-api-aat.service.core-compute-aat.internal",
-    "caseTypeId": "PCS"
+    "url": "https://ccd-data-store-api-pcs-api-pr-316.preview.platform.hmcts.net",
+    "caseTypeId": "PCS-316"
   },
   "osPostcodeLookup": {
     "url": "https://api.os.uk/search/places/v1"

src/main/assets/js/index.ts

@@ -1,7 +1,9 @@
 import '../scss/main.scss';
 import { initAll } from 'govuk-frontend';
 
+import { initPostcodeLookup } from './postcode-lookup';
 import { initPostcodeSelection } from './postcode-select';
 
 initAll();
 initPostcodeSelection();
+initPostcodeLookup();

src/main/assets/js/postcode-lookup.ts

@@ -0,0 +1,214 @@
+/**
+ * Lightweight postcode lookup UI behaviour.
+ * Expects the following DOM elements (ids are fixed for now):
+ * - #lookupPostcode: input for entering postcode
+ * - #findAddressBtn: button (type=button) to trigger lookup
+ * - #selectedAddress: select populated with results
+ * - #addressLine1, #addressLine2, #addressLine3, #town, #county, #postcode: inputs to populate
+ */
+let postcodeLookupDelegatedBound = false;
+
+export function initPostcodeLookup(): void {
+  const containers = Array.from(document.querySelectorAll<HTMLElement>('[data-address-component]'));
+
+  // Helper utilities that work per-container
+  const getParts = (container: HTMLElement) => {
+    const prefix = container.dataset.namePrefix || 'address';
+    const byId = (id: string) => container.querySelector<HTMLElement>(`#${prefix}-${id}`);
+    return {
+      prefix,
+      byId,
+      postcodeInput: byId('lookupPostcode') as HTMLInputElement | null,
+      findBtn: byId('findAddressBtn') as HTMLButtonElement | null,
+      select: byId('selectedAddress') as HTMLSelectElement | null,
+      selectContainer: byId('addressSelectContainer') as HTMLDivElement | null,
+      addressLine1: byId('addressLine1') as HTMLInputElement | null,
+      addressLine2: byId('addressLine2') as HTMLInputElement | null,
+      addressLine3: byId('addressLine3') as HTMLInputElement | null,
+      town: byId('town') as HTMLInputElement | null,
+      county: byId('county') as HTMLInputElement | null,
+      postcodeOut: byId('postcode') as HTMLInputElement | null,
+      country: byId('country') as HTMLInputElement | null,
+      details: container.querySelector('.govuk-details, details'),
+    };
+  };
+
+  const clearOptions = (select: HTMLSelectElement) => {
+    while (select.options.length) {
+      select.remove(0);
+    }
+  };
+
+  const populateOptions = (
+    select: HTMLSelectElement,
+    selectContainer: HTMLDivElement | null,
+    addresses: Record<string, string>[]
+  ) => {
+    clearOptions(select);
+    const defaultOpt = document.createElement('option');
+    defaultOpt.value = '';
+    defaultOpt.textContent = `${addresses.length} address${addresses.length === 1 ? '' : 'es'} found`;
+    select.appendChild(defaultOpt);
+
+    for (let i = 0; i < addresses.length; i++) {
+      const addr = addresses[i];
+      const opt = document.createElement('option');
+      opt.value = String(i);
+      opt.textContent = addr.fullAddress || '';
+      opt.dataset.line1 = addr.addressLine1 || '';
+      opt.dataset.line2 = addr.addressLine2 || '';
+      opt.dataset.line3 = addr.addressLine3 || '';
+      opt.dataset.town = addr.town || '';
+      opt.dataset.county = addr.county || '';
+      opt.dataset.postcode = addr.postcode || '';
+      opt.dataset.country = addr.country || '';
+      select.appendChild(opt);
+    }
+    if (selectContainer) {
+      selectContainer.hidden = false;
+    }
+    select.hidden = false;
+    select.focus();
+  };
+
+  const populateAddressFields = (container: HTMLElement, selected: HTMLOptionElement) => {
+    const { addressLine1, addressLine2, addressLine3, town, county, postcodeOut, country, details } =
+      getParts(container);
+
+    if (details && !(details as HTMLDetailsElement).open) {
+      (details as HTMLDetailsElement).open = true;
+    }
+
+    const fieldMappings = [
+      { field: addressLine1, value: selected.dataset.line1 },
+      { field: addressLine2, value: selected.dataset.line2 },
+      { field: addressLine3, value: selected.dataset.line3 },
+      { field: town, value: selected.dataset.town },
+      { field: county, value: selected.dataset.county },
+      { field: postcodeOut, value: selected.dataset.postcode },
+      { field: country, value: selected.dataset.country },
+    ];
+
+    fieldMappings.forEach(({ field, value }) => {
+      if (field) {
+        field.value = value || '';
+      }
+    });
+
+    addressLine1?.focus();
+  };
+
+  const handleSelectionChange = (container: HTMLElement, select: HTMLSelectElement) => {
+    const selected = select.options[select.selectedIndex];
+    if (!selected?.value) {
+      return;
+    }
+    populateAddressFields(container, selected);
+  };
+
+  const performPostcodeLookup = async (
+    postcode: string,
+    select: HTMLSelectElement,
+    selectContainer: HTMLDivElement | null,
+    button: HTMLButtonElement
+  ) => {
+    button.disabled = true;
+    try {
+      const resp = await fetch(`/api/postcode-lookup?postcode=${encodeURIComponent(postcode)}`, {
+        headers: { Accept: 'application/json' },
+        credentials: 'same-origin',
+      });
+      if (!resp.ok) {
+        throw new Error('Lookup failed');
+      }
+      const json = (await resp.json()) as { addresses?: Record<string, string>[] };
+      const addresses = json.addresses || [];
+      populateOptions(select, selectContainer, addresses);
+    } catch {
+      clearOptions(select);
+      const opt = document.createElement('option');
+      opt.value = '';
+      opt.textContent = 'No addresses found';
+      select.appendChild(opt);
+      if (selectContainer) {
+        selectContainer.hidden = false;
+      }
+      select.hidden = false;
+    } finally {
+      button.disabled = false;
+    }
+  };
+
+  // If more than one component, use event delegation to avoid multiple handlers
+  if (containers.length > 1) {
+    if (postcodeLookupDelegatedBound) {
+      return;
+    }
+    postcodeLookupDelegatedBound = true;
+
+    document.addEventListener('click', async evt => {
+      const target = evt.target as Element | null;
+      if (!target) {
+        return;
+      }
+      const btn = target.closest('button[id$="-findAddressBtn"]') as HTMLButtonElement;
+      if (!btn) {
+        return;
+      }
+      const container = btn.closest('[data-address-component]') as HTMLElement;
+      if (!container) {
+        return;
+      }
+      const { postcodeInput, select, selectContainer } = getParts(container);
+      if (!postcodeInput || !select) {
+        return;
+      }
+
+      const value = postcodeInput.value?.trim();
+      if (!value) {
+        return;
+      }
+      await performPostcodeLookup(value, select, selectContainer, btn);
+    });
+
+    document.addEventListener('change', evt => {
+      const target = evt.target as Element | null;
+      if (!target) {
+        return;
+      }
+      const select = target.closest('select[id$="-selectedAddress"]') as HTMLSelectElement;
+      if (!select) {
+        return;
+      }
+      const container = select.closest('[data-address-component]') as HTMLElement;
+      if (!container) {
+        return;
+      }
+      handleSelectionChange(container, select);
+    });
+    return;
+  }
+
+  // Fallback: bind directly when 0 or 1 components present
+  if (!containers.length) {
+    return;
+  }
+
+  containers.forEach(container => {
+    const { postcodeInput, findBtn, select, selectContainer } = getParts(container);
+    if (!postcodeInput || !findBtn || !select) {
+      return;
+    }
+
+    // Selection behaviour for single component
+    select.addEventListener('change', () => handleSelectionChange(container, select));
+
+    findBtn.addEventListener('click', async () => {
+      const value = postcodeInput.value?.trim();
+      if (!value) {
+        return;
+      }
+      await performPostcodeLookup(value, select, selectContainer, findBtn);
+    });
+  });
+}

src/main/assets/js/postcode-select.ts

@@ -2,8 +2,19 @@ export function initPostcodeSelection(): void {
   const addressSelect = document.getElementById('selectedAddress') as HTMLSelectElement | null;
 
   // ✅ Step 1: Focus the dropdown if we just came from a postcode lookup
-  const url = new URL(window.location.href);
-  const isLookup = url.searchParams.get('lookup') === '1';
+  // Be robust to environments that cannot safely stub window.location
+  let href = '';
+  // Prefer explicit test hook when present
+  if ((window as { __testHref?: string }).__testHref) {
+    href = (window as { __testHref?: string }).__testHref as string;
+  } else {
+    try {
+      href = (window as { location?: { href?: string } })?.location?.href || '';
+    } catch {
+      href = '';
+    }
+  }
+  const isLookup = /(^|[?&])lookup=1(&|$)/.test(href);
 
   if (isLookup && addressSelect) {
     addressSelect.focus();

src/main/assets/locales/en/eligibility.json

@@ -22,7 +22,6 @@
   "page3": {
     "title": "What are your grounds for possession?",
     "description": "Select all grounds that apply to your case",
-    "groundsLabel": "Select all that apply",
     "options": {
       "rentArrears8": {
         "text": "Rent arrears (ground 8)",

src/main/interfaces/osPostcodeLookup.interface.ts

@@ -28,7 +28,7 @@ export interface OSResponse {
       POST_TOWN: string;
       LOCAL_CUSTODIAN_CODE_DESCRIPTION?: string;
       POSTCODE: string;
-      COUNTRY_CODE_DESCRIPTION?: string;
+      COUNTRY_CODE?: string;
     };
   }[];
 }

src/main/journeys/eligibility/steps/page2/step.ts

@@ -13,7 +13,7 @@ const step: StepDraft = {
           classes: 'govuk-fieldset__legend--l',
         },
       },
-      options: [
+      items: [
         { value: 'yes', text: 'page2.ageOptions.yes' },
         { value: 'no', text: 'page2.ageOptions.no' },
       ],

src/main/journeys/eligibility/steps/page3/step.ts

@@ -8,8 +8,7 @@ const step: StepDraft = {
   fields: {
     grounds: {
       type: 'checkboxes',
-      label: { text: 'page3.groundsLabel' },
-      options: [
+      items: [
         {
           value: 'rent-arrears-8',
           text: 'page3.options.rentArrears8.text',

src/main/journeys/eligibility/steps/page5/step.ts

@@ -7,12 +7,8 @@ const step: StepDraft = {
   fields: {
     date: {
       type: 'date',
-      hint: {
-        text: 'page5.fields.date.hint',
-      },
-      label: {
-        text: 'page5.fields.date.label',
-      },
+      hint: { text: 'page5.fields.date.hint' },
+      fieldset: { legend: { text: 'page5.fields.date.label' } },
       validate: { required: true, mustBePast: true },
       errorMessages: {
         required: 'errors.date.required',
@@ -33,9 +29,7 @@ const step: StepDraft = {
     },
     email: {
       type: 'email',
-      label: {
-        text: 'page5.fields.email.label',
-      },
+      label: { text: 'page5.fields.email.label' },
       validate: {
         required: true,
         customMessage: 'errors.email.invalid',