@ministryofjustice/hmpps-connect-dps-shared-items 2.0.0 → 2.1.1

package/README.md

@@ -1,11 +1,17 @@
-# hmpps-connect-dps-shared-items-package
-A library for sharing dps components across applications
+# hmpps-connect-dps-shared-items
+
+A library for sharing DPS Components across applications.
 
 ## Contents
 
-1. [Publishing to NPM](readme/publishing.md)
+1. [Using the library](#using-the-library)
+2. [Library components](#library-components)
+3. [For library developers](#for-library-developers)
+
 
-## Installation
+## Using the library
+
+### Installation
 
 To install the package, run the following command:
 
@@ -13,7 +19,7 @@ To install the package, run the following command:
 npm install @ministryofjustice/hmpps-connect-dps-shared-items
 ```
 
-## Nunjucks macro usage
+### Nunjucks macro usage
 
 Add the `hmpps-connect-dps-shared-items` assets directory to nunjucks configuration in your application:
 
@@ -30,7 +36,14 @@ Add the `hmpps-connect-dps-shared-items` assets directory to nunjucks configurat
   },
 )
 ```
-Include the package scss within the all.scss file. You can either import all:
+
+then import the component into your nunkucks file:
+```js
+{% from "dps/components/alert-flag/macro.njk" import alertFlag %}
+```
+
+### Styling
+Include the package scss within the `index.scss` file. You can either import all:
 ```scss
   @import 'node_modules/@ministryofjustice/hmpps-connect-dps-shared-items/dist/assets/scss/all';
 ```
@@ -38,11 +51,21 @@ or import the specific component scss you are using, e.g:
 ```scss
   @import 'node_modules/@ministryofjustice/hmpps-connect-dps-shared-items/dist/assets/dps/components/alrt-flag/alert-flag';
 ```
-import the component into your nunkucks file:
-```javascript
-{% from "dps/components/alert-flag/macro.njk" import alertFlag %}
+
+### Client side javascript
+
+In your client side javascript, include:
+```js
+import * as connectDps from '@ministryofjustice/hmpps-connect-dps-shared-items/dist/assets/js/all'
+
+connectDps.initAll()
 ```
 
-## Components:
+## Library Components:
+
+1. [Alert Flag](readme/components/alertFlag/alert-flag.md)
+2. [Address Autosuggest](readme/components/addressAutosuggest/address-autosuggest.md)
+
+## For Library Developers
 
-1. [Alert flag](readme/components/alert-flag.md)
+1. [Publishing to NPM](readme/publishing.md)

package/dist/addressAutosuggest/osPlacesAddressService.d.ts

@@ -0,0 +1,14 @@
+import { OsAddress } from '../types/public/addressAutosuggest/osAddress';
+import OsPlacesApiClient from './osPlacesApiClient';
+import { ConnectDpsComponentLogger } from '../types/public/ConnectDpsComponentLogger';
+export default class OsPlacesAddressService {
+    private readonly logger;
+    private readonly osPlacesApiClient;
+    constructor(logger: ConnectDpsComponentLogger, osPlacesApiClient: OsPlacesApiClient);
+    getAddressesMatchingQuery(searchQuery: string, sanitisePostcode?: boolean): Promise<OsAddress[]>;
+    getAddressByUprn(uprn: string): Promise<OsAddress | null>;
+    sanitiseUkPostcode(stringContainingPostcode: string): string;
+    private handleResponse;
+    private toOsAddress;
+    private formatAddressString;
+}

package/dist/addressAutosuggest/osPlacesAddressService.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/addressAutosuggest/osPlacesApiClient.d.ts

@@ -0,0 +1,13 @@
+import { ApiConfig } from '@ministryofjustice/hmpps-rest-client';
+import { OsPlacesQueryResponse } from '../types/public/addressAutosuggest/osPlaces';
+import { ConnectDpsComponentLogger } from '../types/public/ConnectDpsComponentLogger';
+export default class OsPlacesApiClient {
+    private readonly logger;
+    private readonly config;
+    constructor(logger: ConnectDpsComponentLogger, config: ApiConfig & {
+        apiKey: string;
+    });
+    getAddressesByFreeTextQuery(freeTextQuery: string): Promise<OsPlacesQueryResponse>;
+    getAddressesByUprn(uprn: string): Promise<OsPlacesQueryResponse>;
+    get<T>(path: string, query: Record<string, string>): Promise<T>;
+}

package/dist/addressAutosuggest/osPlacesApiClient.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/addressAutosuggest/testMocks/osPlacesAddressQueryResponse.d.ts

@@ -0,0 +1,12 @@
+import { OsPlacesQueryResponse } from '../../types/public/addressAutosuggest/osPlaces';
+export declare const mockOsPlacesAddressQueryResponse: OsPlacesQueryResponse;
+export declare const mockOsPlacesAddressQueryEmptyResponse: OsPlacesQueryResponse;
+export declare const mockOsPlacesAddressQuerySingleResponse: OsPlacesQueryResponse;
+export declare const mockOsPlacesInvalidApiKey: {
+    fault: {
+        faultstring: string;
+        detail: {
+            errorcode: string;
+        };
+    };
+};

package/dist/addressAutosuggest/testMocks/osPlacesApiClientMock.d.ts

@@ -0,0 +1,2 @@
+import OsPlacesApiClient from '../osPlacesApiClient';
+export declare const osPlacesApiClientMock: () => OsPlacesApiClient;

package/dist/assets/dps/components/address-autosuggest/_address-autosuggest.scss

@@ -0,0 +1,98 @@
+@import 'govuk-frontend/dist/govuk/helpers/colour';
+@import 'govuk-frontend/dist/govuk/settings/colours-applied';
+
+.hmpps-address-autosuggest {
+    position: relative;
+    max-width: 630px;
+
+    .govuk-form-group {
+        margin-bottom: 10px;
+    }
+
+    &__combobox {
+        border-radius: 3px;
+        display: inline-block;
+    }
+
+    &__results {
+        border: 1px solid $govuk-border-colour;
+        border-radius: 3px;
+        display: none;
+        margin: 0 0 0;
+        overflow: hidden;
+        padding: 0;
+        width: 100%;
+    }
+
+    &__results-title {
+        background: govuk-colour("light-grey");
+        border-bottom: 1px solid $govuk-border-colour;
+        padding: 0.25rem 0.5rem;
+    }
+
+    &__listbox {
+        background: govuk-colour("white");
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        &:focus {
+            outline: none;
+        }
+    }
+
+    &__option {
+        cursor: pointer;
+        margin: 0;
+        outline: none;
+        padding: 0.25rem 0.5rem;
+
+        &:not(:last-child) {
+            border-bottom: 1px solid $govuk-border-colour;
+        }
+
+        &--focused:not(&--no-results) {
+            background: #1d70b8;
+            border-color: #1d70b8;
+            color: govuk-colour("white");
+        }
+
+        &:active:not(&--no-results) {
+            background: var(--ons-color-focus);
+            color: govuk-colour("black");
+        }
+
+        &--no-results {
+            background: govuk-colour("light-grey");
+            cursor: not-allowed;
+            padding: 0.25rem 0.5rem;
+        }
+    }
+
+    &__error {
+       margin-top: 5px;
+    }
+
+    &:not(&--initialised) & {
+        &__instructions,
+        &__listbox,
+        &__status {
+            display: none;
+        }
+    }
+
+    &--has-results & {
+        &__results {
+            display: block;
+        }
+    }
+
+    &--header {
+        .hmpps-address-autosuggest__results {
+            border: 0;
+            box-shadow: 0 0 5px 0 rgb(34 34 34 / 60%);
+            left: 0;
+            position: absolute;
+            z-index: 10;
+        }
+    }
+}

package/dist/assets/dps/components/address-autosuggest/abortable-fetch.js

@@ -0,0 +1,43 @@
+// Based on ONSDigital's https://github.com/ONSdigital/design-system/blob/main/src/js/abortable-fetch.js
+
+export const FetchStatus = {
+  unsent: 'UNSENT',
+  loading: 'LOADING',
+  done: 'DONE',
+}
+
+export const abortError = 'AbortError'
+export const abortTimeout = 'AbortTimeout'
+
+class AbortableFetch {
+  constructor(url) {
+    this.url = url
+    this.controller = new window.AbortController()
+    this.status = FetchStatus.unsent
+  }
+
+  async send() {
+    this.status = FetchStatus.loading
+    try {
+      setTimeout(() => {
+        this.controller.abort(abortTimeout)
+      }, 5000)
+      const response = await window.fetch(this.url, { signal: this.controller.signal })
+
+      if (!(+response.status === 200)) {
+        const error = new Error(`API error: ${response?.status ?? 500}`)
+        error.response = response
+        throw error
+      }
+      return response
+    } finally {
+      this.status = FetchStatus.done
+    }
+  }
+
+  abort() {
+    this.controller.abort()
+  }
+}
+
+export const abortableFetch = (url, options) => new AbortableFetch(url, options)

package/dist/assets/dps/components/address-autosuggest/autosuggest-address.js

@@ -0,0 +1,90 @@
+// Based on ONSDigital's https://github.com/ONSdigital/design-system/blob/main/src/components/address-input/autosuggest.address.js
+import { AutosuggestUi, NoResults } from './autosuggest-ui'
+import { abortableFetch, abortError, FetchStatus } from './abortable-fetch'
+
+const classUPRN = 'hmpps-js-uprn'
+const classInputContainer = 'hmpps-address-autosuggest'
+const classInput = 'hmpps-js-autosuggest-input'
+
+export class AutosuggestAddress {
+  constructor(context) {
+    this.context = context
+    this.input = context.querySelector(`.${classInput}`)
+    this.container = context.querySelector(`.${classInputContainer}`)
+    this.uprn = context.querySelector(`.${classUPRN}`)
+    this.findUrl = this.container.getAttribute('data-find-url')
+
+    // State:
+    this.fetch = null
+
+    // Initialise autosuggest:
+    this.autosuggest = new AutosuggestUi({
+      context: this.container,
+      onSelect: this.onAddressSelect.bind(this),
+      suggestionFunction: this.suggestAddresses.bind(this),
+    })
+
+    // Check API status:
+    this.checkAPIStatus()
+  }
+
+  async checkAPIStatus() {
+    this.fetch = abortableFetch(`${this.findUrl}/SW1H9AJ`)
+
+    try {
+      const response = await this.fetch.send()
+      const status = response && (await response.json()).status
+      if (status !== 200) {
+        this.autosuggest.handleNoResults(NoResults.server_error)
+      }
+    } catch (error) {
+      if (error.name !== abortError) {
+        this.autosuggest.handleNoResults(NoResults.server_error)
+      }
+    }
+  }
+
+  async suggestAddresses(query) {
+    if (this.fetch && this.fetch.status !== FetchStatus.done) {
+      this.fetch.abort()
+    }
+
+    // Reset any previously selected result:
+    this.uprn.value = ''
+
+    return await this.findAddress(query?.replace(/[^A-Z0-9 ]/gi, ''))
+  }
+
+  async findAddress(query) {
+    this.fetch = abortableFetch(`${this.findUrl}/${query}`)
+    const data = await this.fetch.send()
+    const response = await data.json()
+    const status = response.status
+    const addresses = response.results
+    return this.mapFindResults(addresses, status)
+  }
+
+  mapFindResults(results, status) {
+    if (!results) return { status }
+
+    return {
+      results: this.addressMapping(results),
+      status: status,
+    }
+  }
+
+  addressMapping(addresses) {
+    if (!addresses?.length) return []
+
+    return addresses.map(address => ({ uprn: address.uprn, displayText: address.addressString }))
+  }
+
+  async onAddressSelect(selectedResult) {
+    if (this.fetch && this.fetch.status !== FetchStatus.done) {
+      this.fetch.abort()
+    }
+
+    this.autosuggest.input.value = selectedResult.displayText
+    this.uprn.value = selectedResult.uprn
+  }
+}