@ministryofjustice/hmpps-connect-dps-shared-items 5.0.0 → 5.2.0

package/dist/assets/dps/components/address-autosuggest/autosuggest-ui.ts

@@ -0,0 +1,459 @@
+// Based on ONSDigital's https://github.com/ONSdigital/design-system/blob/main/src/components/autosuggest/autosuggest.ui.js
+/* eslint-disable no-param-reassign, @stylistic/lines-between-class-members */
+
+import { abortError, abortTimeout } from './abortable-fetch'
+
+const jsBaseClass = 'hmpps-js-autosuggest'
+
+const classSuffixInitialised = '--initialised'
+const classSuffixOption = '__option'
+const classSuffixOptionFocused = `${classSuffixOption}--focused`
+const classSuffixOptionNoResults = `${classSuffixOption}--no-results`
+const classSuffixHasResults = '--has-results'
+
+export const NoResults = {
+  type_more: 'TYPE_MORE',
+  no_match: 'NO_MATCH',
+  server_error: 'SERVER_ERROR',
+} as const
+type NoResults = typeof NoResults
+
+export interface AddressSuggestion {
+  displayText?: string
+  uprn?: number
+}
+
+export interface AddressSuggestions {
+  status: number
+  results?: AddressSuggestion[]
+}
+
+type AddressSuggestionFunction = (query: string) => Promise<AddressSuggestions>
+type AddressSelectedCallback = (selectedResult: AddressSuggestion) => Promise<void>
+
+interface AutosuggestUiOptions {
+  context: HTMLDivElement
+  suggestionFunction: AddressSuggestionFunction
+  onSelect: AddressSelectedCallback
+}
+
+export default class AutosuggestUi {
+  private readonly context: HTMLDivElement
+  public readonly input: HTMLInputElement
+  private readonly resultsContainer: HTMLDivElement
+  private readonly resultsTitleContainer: HTMLDivElement
+  private readonly listbox: HTMLUListElement
+  private readonly instructions: HTMLDivElement
+  private readonly errorContainer: HTMLDivElement
+  private readonly errorTextContainer: HTMLDivElement
+  private readonly ariaStatus: HTMLDivElement
+
+  private readonly minChars: number
+  private readonly ariaYouHaveSelected: string
+  private readonly ariaMinChars: string
+  private readonly ariaOneResult: string
+  private readonly ariaNResults: string
+  private readonly noResults: string
+  private readonly typeMore: string
+  private readonly listboxId: string
+  private readonly errorMessage: string
+  private readonly stylingBaseClass: string
+
+  private readonly fetchSuggestions: AddressSuggestionFunction
+  private readonly onSelect: AddressSelectedCallback
+
+  private query: string
+  private sanitisedQuery: string
+  private results: AddressSuggestion[] | undefined
+  private resultOptions: HTMLLIElement[]
+  private numberOfResults: number
+
+  private blurring: boolean
+  private blurTimeout: number
+  private scrolling: boolean
+  private scrollTimeout: number
+  private inputTimeout: number
+  private highlightedResultIndex: number | null
+
+  constructor({ context, onSelect, suggestionFunction }: AutosuggestUiOptions) {
+    // DOM Elements
+    this.context = context
+    this.input = context.querySelector<HTMLInputElement>(`.${jsBaseClass}-input`)!
+    this.resultsContainer = context.querySelector<HTMLDivElement>(`.${jsBaseClass}-results`)!
+    this.resultsTitleContainer = this.resultsContainer.querySelector<HTMLDivElement>(`.${jsBaseClass}-results-title`)!
+    this.listbox = this.resultsContainer.querySelector<HTMLUListElement>(`.${jsBaseClass}-listbox`)!
+    this.instructions = context.querySelector<HTMLDivElement>(`.${jsBaseClass}-instructions`)!
+    this.errorContainer = context.querySelector<HTMLDivElement>(`.${jsBaseClass}-error`)!
+    this.errorTextContainer = this.errorContainer.querySelector<HTMLDivElement>('.moj-alert__content')!
+    this.ariaStatus = context.querySelector<HTMLDivElement>(`.${jsBaseClass}-aria-status`)!
+
+    // Settings
+    this.minChars = 3
+    this.ariaYouHaveSelected = context.dataset.ariaYouHaveSelected!
+    this.ariaMinChars = context.dataset.ariaMinChars!
+    this.ariaOneResult = context.dataset.ariaOneResult!
+    this.ariaNResults = context.dataset.ariaNResults!
+    this.noResults = context.dataset.noResults!
+    this.typeMore = context.dataset.typeMore!
+    this.errorMessage = context.dataset.errorApi!
+    this.stylingBaseClass = context.dataset.stylingBaseClass!
+    this.listboxId = this.listbox.id
+
+    // Callbacks
+    this.onSelect = onSelect
+    this.fetchSuggestions = suggestionFunction
+
+    // State
+    this.query = ''
+    this.sanitisedQuery = ''
+    this.results = []
+    this.resultOptions = []
+    this.numberOfResults = 0
+    this.highlightedResultIndex = null
+    this.blurring = false
+    this.blurTimeout = 0
+    this.scrolling = false
+    this.scrollTimeout = 0
+    this.inputTimeout = 0
+
+    this.initialiseUI()
+  }
+
+  private initialiseUI(): void {
+    this.input.setAttribute('aria-autocomplete', 'list')
+    this.input.setAttribute('aria-controls', this.listbox.id)
+    this.input.setAttribute('aria-describedby', this.instructions.id)
+    this.input.setAttribute('aria-haspopup', 'true')
+    this.input.setAttribute('aria-owns', this.listbox.id)
+    this.input.setAttribute('aria-expanded', 'false')
+    this.input.setAttribute('autocomplete', 'off')
+    this.input.setAttribute('role', 'combobox')
+
+    this.context.classList.add(`${this.stylingBaseClass}${classSuffixInitialised}`)
+
+    this.bindEventListeners()
+  }
+
+  private bindEventListeners(): void {
+    this.input.addEventListener('keydown', this.handleKeydown.bind(this))
+    this.input.addEventListener('keyup', this.handleKeyup.bind(this))
+    this.input.addEventListener('input', this.handleChange.bind(this))
+    this.input.addEventListener('blur', this.handleBlur.bind(this))
+    this.input.addEventListener('focus', this.handleFocus.bind(this))
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    // eslint-disable-next-line default-case
+    switch (event.key) {
+      case 'ArrowUp': {
+        event.preventDefault()
+        this.navigateResults(-1)
+        break
+      }
+      case 'ArrowDown': {
+        event.preventDefault()
+        this.navigateResults(1)
+        break
+      }
+      case 'Escape': {
+        this.clearListbox()
+        break
+      }
+      case 'Enter': {
+        if (this.highlightedResultIndex !== null) {
+          event.preventDefault()
+        }
+        break
+      }
+    }
+  }
+
+  private handleKeyup(event: KeyboardEvent): void {
+    // eslint-disable-next-line default-case
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown': {
+        event.preventDefault()
+        break
+      }
+      case 'Enter': {
+        if (this.highlightedResultIndex !== null) {
+          this.selectResult()
+        }
+        break
+      }
+    }
+  }
+
+  private handleChange(_event: InputEvent): void {
+    if (!this.blurring && this.input.value.trim()) {
+      this.getSuggestions()
+    } else {
+      this.clearListbox()
+    }
+  }
+
+  private handleBlur(_event: FocusEvent): void {
+    clearTimeout(this.blurTimeout)
+    this.blurring = true
+
+    // Timeout required to allow user to click an option before clearing the listbox:
+    this.blurTimeout = setTimeout(() => {
+      this.blurring = false
+
+      this.context.classList.remove(`${this.stylingBaseClass}${classSuffixHasResults}`)
+      this.input.setAttribute('aria-expanded', 'false')
+      this.setAriaStatus()
+    }, 300)
+  }
+
+  private handleFocus(_event: FocusEvent): void {
+    if (this.listbox.innerHTML) {
+      this.context.classList.add(`${this.stylingBaseClass}${classSuffixHasResults}`)
+      this.input.setAttribute('aria-expanded', 'true')
+      this.setAriaStatus()
+    }
+  }
+
+  private handleScroll(option: HTMLLIElement, scrollUp: boolean): void {
+    clearTimeout(this.scrollTimeout)
+    this.scrolling = true
+    option.scrollIntoView(scrollUp)
+
+    // Timeout required to allow user to click an option before clearing the listbox:
+    this.scrollTimeout = setTimeout(() => {
+      this.scrolling = false
+    }, 300)
+  }
+
+  private checkCharCount(): void {
+    if (this.input.value.length > 1 && this.input.value.length < this.minChars) {
+      this.inputTimeout = setTimeout(() => {
+        this.handleNoResults(NoResults.type_more)
+      }, 2000)
+    } else {
+      clearTimeout(this.inputTimeout)
+    }
+  }
+
+  private navigateResults(direction: number): void {
+    let index: number | null = 0
+    if (this.highlightedResultIndex !== null) {
+      index = this.highlightedResultIndex + direction
+    }
+
+    if (index < this.numberOfResults) {
+      if (index < 0) {
+        index = null
+      }
+
+      this.setHighlightedResult(index)
+    }
+  }
+
+  private sanitiseAutosuggestText(string: string): string {
+    let sanitisedString = string.toLowerCase()
+
+    sanitisedString = sanitisedString.trim()
+    sanitisedString = sanitisedString.replace(/,/g, '')
+    sanitisedString = sanitisedString.replace(/\s\s+/g, ' ')
+    sanitisedString = sanitisedString.replace(/&/g, '%26')
+    sanitisedString = sanitisedString.replace(/\d(?=[a-z]{3,})/gi, '$& ')
+
+    return sanitisedString
+  }
+
+  private getSuggestions(): void {
+    this.query = this.input.value
+
+    const sanitisedQuery = this.sanitiseAutosuggestText(this.query)
+
+    if (sanitisedQuery !== this.sanitisedQuery) {
+      this.sanitisedQuery = sanitisedQuery
+      this.unsetResults()
+      this.checkCharCount()
+
+      if (this.sanitisedQuery.length >= this.minChars) {
+        this.fetchSuggestions(this.sanitisedQuery)
+          .then(this.handleResults.bind(this))
+          .catch(error => {
+            if (error.name !== abortError && error.reason !== abortTimeout) {
+              // eslint-disable-next-line no-console
+              console.log('error:', error)
+              this.handleNoResults(NoResults.server_error)
+            }
+          })
+      } else {
+        this.clearListbox()
+      }
+    }
+  }
+
+  private unsetResults(): void {
+    this.results = []
+    this.resultOptions = []
+  }
+
+  private clearListbox(): void {
+    this.listbox.innerHTML = ''
+    this.context.classList.remove(`${this.stylingBaseClass}${classSuffixHasResults}`)
+    this.input.removeAttribute('aria-activedescendant')
+    this.input.setAttribute('aria-expanded', 'false')
+    this.setHighlightedResult(null)
+    this.setAriaStatus()
+  }
+
+  private handleResults(response: AddressSuggestions): void {
+    this.results = response?.results
+    this.numberOfResults = this.results?.length || 0
+    this.setAriaStatus()
+    this.listbox.innerHTML = ''
+
+    this.resultOptions =
+      this.results?.map((result, index) => {
+        this.resultsTitleContainer?.classList?.remove('hmpps-display-none')
+        const listElement = this.createListElement(result, index)
+        this.listbox.appendChild(listElement)
+        return listElement
+      }) ?? []
+
+    this.setHighlightedResult(null)
+    this.input.setAttribute('aria-expanded', this.numberOfResults ? 'true' : 'false')
+
+    if (!!this.numberOfResults && this.sanitisedQuery.length >= this.minChars) {
+      this.context.classList.add(`${this.stylingBaseClass}${classSuffixHasResults}`)
+    } else {
+      this.context.classList.remove(`${this.stylingBaseClass}${classSuffixHasResults}`)
+      this.clearListbox()
+    }
+
+    if (this.numberOfResults === 0 && this.noResults) {
+      this.handleNoResults(NoResults.no_match)
+    }
+  }
+
+  private createListElement(result: AddressSuggestion, index: number): HTMLLIElement {
+    const innerHTML = this.emboldenMatch(result.displayText ?? '', this.query)
+    const listElement: HTMLLIElement = document.createElement('li')
+    listElement.className = `${this.stylingBaseClass}${classSuffixOption}`
+    listElement.setAttribute('id', `${this.listboxId}__option--${index}`)
+    listElement.setAttribute('role', 'option')
+    listElement.innerHTML = innerHTML
+    listElement.addEventListener('click', () => {
+      this.selectResult(index)
+    })
+    listElement.addEventListener('mouseenter', () => !this.scrolling && this.setHighlightedResult(index))
+    return listElement
+  }
+
+  public handleNoResults(reason: NoResults[keyof NoResults]): void {
+    if (reason === NoResults.type_more || reason === NoResults.no_match) {
+      this.context.classList.add(`${this.stylingBaseClass}${classSuffixHasResults}`)
+      this.resultsTitleContainer?.classList?.add('hmpps-display-none')
+      this.input.setAttribute('aria-expanded', 'true')
+
+      const message = reason === NoResults.type_more ? this.typeMore : this.noResults
+      this.setAriaStatus(message)
+      this.listbox.innerHTML = ''
+      const noResultsItem = document.createElement('li')
+      noResultsItem.className = `${this.stylingBaseClass}${classSuffixOption} ${this.stylingBaseClass}${classSuffixOptionNoResults}`
+      noResultsItem.textContent = message
+      this.listbox.appendChild(noResultsItem)
+    } else {
+      this.displayAPIError()
+    }
+  }
+
+  private displayAPIError(): void {
+    this.input.value = ''
+    this.input.setAttribute('disabled', 'true')
+    this.clearListbox()
+    this.errorContainer.classList.remove('hmpps-display-none')
+    this.errorTextContainer.textContent = this.errorMessage
+    this.ariaStatus.setAttribute('aria-hidden', 'true')
+    this.setAriaStatus(this.errorMessage)
+  }
+
+  private setHighlightedResult(index: number | null): void {
+    this.highlightedResultIndex = index
+
+    if (this.highlightedResultIndex === null) {
+      this.input.removeAttribute('aria-activedescendant')
+    }
+
+    if (this.numberOfResults) {
+      this.resultOptions.forEach((option, optionIndex) => {
+        if (index !== null && optionIndex === index) {
+          if (this.isAboveViewport(option)) {
+            this.handleScroll(option, true)
+          }
+          if (this.isBelowViewport(option)) {
+            this.handleScroll(option, false)
+          }
+          option.classList.add(`${this.stylingBaseClass}${classSuffixOptionFocused}`)
+          option.setAttribute('aria-selected', 'true')
+          this.input.setAttribute('aria-activedescendant', option.id)
+          const optionText = option.innerHTML.replace('<b>', '').replace('</b>', '')
+          this.setAriaStatus(optionText)
+        } else {
+          option.classList.remove(`${this.stylingBaseClass}${classSuffixOptionFocused}`)
+          option.removeAttribute('aria-selected')
+        }
+      })
+    }
+  }
+
+  private selectResult(index?: number): void {
+    if (!this.results?.length) return
+
+    const selectedIndex = typeof index === 'number' ? index : this.highlightedResultIndex
+    if (selectedIndex === null || selectedIndex === undefined) return
+
+    const result = this.results?.[selectedIndex]
+    if (!result) return
+
+    this.onSelect(result)
+    this.clearListbox()
+    this.setAriaStatus(`${this.ariaYouHaveSelected}: ${result.displayText}.`)
+  }
+
+  private setAriaStatus(content?: string): void {
+    if (!content) {
+      const queryTooShort = this.sanitisedQuery.length < this.minChars
+      const noResults = this.numberOfResults === 0
+      if (queryTooShort) {
+        content = this.ariaMinChars
+      } else if (noResults) {
+        content = `${this.noResults}: "${this.query}"`
+      } else if (this.numberOfResults === 1) {
+        content = this.ariaOneResult
+      } else {
+        content = this.ariaNResults.replace('{n}', `${this.numberOfResults}`)
+      }
+    }
+    this.ariaStatus.textContent = content
+  }
+
+  private emboldenMatch(string: string, query: string): string {
+    return this.escapeRegExp(query)
+      .trim()
+      .replace(/\s\s+/g, ' ')
+      .split(' ')
+      .reduce((accumulator, currentValue) => {
+        const reg = new RegExp(`(?<!<)${currentValue}(?![\\w\\s]*>)`, 'gi')
+        return accumulator.replace(reg, '<b>$&</b>')
+      }, string)
+  }
+
+  private escapeRegExp(string: string): string {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  }
+
+  private isAboveViewport(element: HTMLLIElement): boolean {
+    return element.getBoundingClientRect().top < 0
+  }
+
+  private isBelowViewport(element: HTMLLIElement): boolean {
+    return element.getBoundingClientRect().bottom > (window.innerHeight || document.documentElement.clientHeight)
+  }
+}

package/dist/assets/dps/components/address-autosuggest/index.d.ts

@@ -0,0 +1 @@
+export declare function init(): void;

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

@@ -1,11 +1,11 @@
 import { AutosuggestAddress } from './autosuggest-address.js';
 
+// eslint-disable-next-line import/prefer-default-export
 function init() {
     // Setup all address autosuggest instances:
-    const addressAutosuggests = [...document.querySelectorAll('.hmpps-js-address-autosuggest')];
-    if (addressAutosuggests.length) {
-        addressAutosuggests.forEach(addressAutosuggest => new AutosuggestAddress(addressAutosuggest));
-    }
+    document
+        .querySelectorAll('.hmpps-js-address-autosuggest')
+        .forEach(addressAutosuggest => new AutosuggestAddress(addressAutosuggest));
 }
 
 export { init };

package/dist/assets/dps/components/address-autosuggest/index.ts

@@ -0,0 +1,9 @@
+import { AutosuggestAddress } from './autosuggest-address'
+
+// eslint-disable-next-line import/prefer-default-export
+export function init() {
+  // Setup all address autosuggest instances:
+  document
+    .querySelectorAll<HTMLDivElement>('.hmpps-js-address-autosuggest')
+    .forEach(addressAutosuggest => new AutosuggestAddress(addressAutosuggest))
+}

package/dist/assets/dps/components/alert-flag/_alert-flag.scss

@@ -1,6 +1,7 @@
 @use "sass:color";
 @use "sass:selector";
 @use "govuk-frontend/dist/govuk/helpers/colour";
+@use "govuk-frontend/dist/govuk/helpers/typography";
 
 @mixin unify-parent($child) {
   @at-root #{selector.unify(&, $child)} {
@@ -14,11 +15,11 @@
     border: 3px solid;
     padding: 5px 10px;
     height: initial;
-    font-size: 16px;
     text-align: center;
     line-height: 1;
     user-select: none;
     border-radius: 5px;
+    @include typography.govuk-font($size: 16);
   }
 
   @media print {
@@ -60,6 +61,8 @@
   color: black;
   background-color: white;
 
+  // NB: styles for alert types should have a matching entry in AlertType enumeration
+
   &--care-leaver {
     @include alertType(#00703c, #03532e);
   }
@@ -96,7 +99,7 @@
     @include alertType(#2ea01c, #26711a);
   }
 
-
+  // NB: styles below are deprecated
 
   &--acct {
     @include alertType(#d34700);

package/dist/assets/dps/components/modal/index.d.ts

@@ -0,0 +1,34 @@
+/** Modal dialogue box component */
+export declare class Modal {
+    private readonly root;
+    static readonly showTriggerClassName = "hmpps-modal__trigger-show";
+    static readonly hideTriggerClassName = "hmpps-modal__trigger-hide";
+    private static readonly modals;
+    /** Initialise all modal components rendered in the document; none will automatically open */
+    static init(): void;
+    /** Find an instance of the `Modal` class to programmatically control it */
+    static getById(modalId: string): Modal | undefined;
+    /** Hide all showing modals */
+    static hideAll(): void;
+    private readonly dialog;
+    private readonly content;
+    private showing;
+    constructor(root: HTMLDivElement);
+    get id(): string;
+    get isShowing(): boolean;
+    private attachHideTriggers;
+    private handleKeyDown;
+    private previouslyFocused;
+    private takeFocus;
+    private maintainFocus;
+    private revertFocus;
+    private trapFocus;
+    private getFocusableChildren;
+    /** Show the modal dialog box */
+    show(): void;
+    /** Hide the modal dialog box */
+    hide(): void;
+    /** Show modal dialog box with loading graphic while loading HTML content from `url` */
+    load(url: string | URL): Promise<void>;
+    private replaceContentWithTemplate;
+}

package/dist/assets/dps/components/modal/macro.njk

@@ -28,7 +28,8 @@ Parameters as JSDoc:
     </dialog>
 
     <template class="hmpps-modal__loading-graphic-template">
-      <svg class="hmpps-modal__loading-graphic" width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <span class="govuk-visually-hidden">Content is loading…</span>
+      <svg class="hmpps-modal__loading-graphic" aria-hidden="true" width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <g>
           <rect x="11" y="1" width="2" height="5" opacity=".14"/>
           <rect x="11" y="1" width="2" height="5" transform="rotate(30 12 12)" opacity=".29"/>

package/dist/assets/dps/components/webcam-capture/_webcam-capture.scss

@@ -15,13 +15,13 @@ $hmpps-webcam-capture-height: 276px;
     }
 
     &__error {
-      border: 5px solid #eb611cff;
+      border: 5px solid #eb611c;
 
       .hmpps-webcam-error-icon {
         display: block;
         width: 1.875rem;
         height: 1.875rem;
-        color: #eb611cff;
+        color: #eb611c;
       }
     }
 

package/dist/assets/dps/components/webcam-capture/index.d.ts

@@ -0,0 +1 @@
+export declare function init(): void;

package/dist/assets/dps/components/webcam-capture/index.js

@@ -13,19 +13,20 @@ function hmppsWebcamCapture(component) {
     // Permissions
     const permissionRequested = document.getElementById('hmpps-webcam__permission-requested');
     const permissionGranted = document.getElementById('hmpps-webcam__permission-granted');
-    const webcamError = document.getElementById('hmpps-webcam__webcam-error');
     // Preview elements
     const photoPreviewContainer = document.getElementById('hmpps-webcam__photo-preview-container');
     const photoCaptureContainer = document.getElementById('hmpps-webcam__photo-capture-container');
     const photoCaptureErrorContainer = document.getElementById('hmpps-webcam__photo-capture-container__error');
     const mimetype = 'image/jpeg';
     let stream = null;
-    function updateWebcamList({ activeDeviceId }) {
+    function updateWebcamList(activeDeviceId) {
         webcamSelect.querySelectorAll('option').forEach(option => {
             if (option.value === activeDeviceId && option.label.indexOf('- Active') === -1) {
+                // eslint-disable-next-line no-param-reassign
                 option.label = `${option.label} - Active`;
             }
             else if (option.value !== activeDeviceId && option.label.indexOf('- Active') > -1) {
+                // eslint-disable-next-line no-param-reassign
                 option.label = option.label.replace(' - Active', '');
             }
         });
@@ -55,13 +56,16 @@ function hmppsWebcamCapture(component) {
             photoCaptureContainer.style.display = 'none';
             photoCaptureErrorContainer.style.display = 'block';
             if (enableReporting) {
-                await fetch(`/api/report-error?pageUrl=${encodeURIComponent(location.href)}&error=${e.name}`, {
+                // @ts-expect-error error type is not known
+                const error = 'name' in e ? e.name : e.message;
+                // eslint-disable-next-line no-restricted-globals
+                await fetch(`/api/report-error?pageUrl=${encodeURIComponent(location.href)}&error=${error}`, {
                     method: 'GET',
                 });
             }
         }
     }
-    async function stopWebcam() {
+    function stopWebcam() {
         if (stream) {
             stream.getTracks().forEach(track => track.stop());
         }
@@ -80,11 +84,13 @@ function hmppsWebcamCapture(component) {
             webcamPlaceholder.style.display = 'none';
             video.style.display = 'block';
             captureBtn.disabled = false;
-            updateWebcamList({ activeDeviceId: deviceId });
+            updateWebcamList(deviceId);
         }
         catch (error) {
             permissionRequested.style.display = 'none';
-            webcamError.style.display = 'block';
+            photoCaptureContainer.style.display = 'none';
+            photoCaptureErrorContainer.style.display = 'block';
+            // eslint-disable-next-line no-console
             console.error('Webcam error:', error);
         }
     }
@@ -103,8 +109,7 @@ function hmppsWebcamCapture(component) {
         canvas.height = video.videoHeight;
         const ctx = canvas.getContext('2d');
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        const imageDataUrl = canvas.toDataURL(mimetype);
-        snapshot.src = imageDataUrl;
+        snapshot.src = canvas.toDataURL(mimetype);
         canvas.toBlob(blob => {
             if (!blob)
                 return;
@@ -124,6 +129,7 @@ function hmppsWebcamCapture(component) {
     }
     return pageInit();
 }
+// eslint-disable-next-line import/prefer-default-export
 function init() {
     const webcamContainer = document.getElementById('hmpps-webcam-capture-component');
     if (webcamContainer) {