📈 [#2965] Add 'Mijn aanvragen' Siteimprove tracking (Dynamic errors)

src/open_inwoner/js/components/autosumbit/index.js

@@ -1,9 +1,11 @@
 class Autosubmit {
   constructor(form) {
     this.form = form
-    selects = form.querySelectorAll('select')
+    this.selects = form.querySelectorAll('select')
 
-    selects.forEach((select) => {
+    this.handle = this.handle.bind(this) // Bind `handle` to maintain `this` context
+
+    this.selects.forEach((select) => {
       select.addEventListener('change', this.handle)
     })
   }

src/open_inwoner/js/components/index.js

@@ -32,6 +32,7 @@ import { TabPanel } from './tab-panels'
 import './toggle'
 import { StatusAccordion } from './cases/status_accordion'
 import './session'
+import './siteimprove/error-tracking'
 import './siteimprove/tracking'
 import './twofactor-sms'
 import { FileInput } from './form/FileInput'

src/open_inwoner/js/components/siteimprove/error-tracking.js

@@ -0,0 +1,133 @@
+/**
+ * Note: users can upload multiple faulty files with their respective errors, and can delete them one by one,
+ * Tracking should only happen on newly added errors, not the entire occurring set.
+ */
+// if (typeof _sz === 'undefined') {
+//   /** Mock SiteImprove `_sz` object for testing - only used during development */
+//   var _sz = {
+//     push: function (data) {
+//       try {
+//         console.log('Event pushed to _sz:', data)
+//       } catch (error) {
+//         console.error('Error occurred while pushing event data:', error)
+//       }
+//     },
+//   }
+// }
+
+/**
+ * Class that handles the transaction between file errors and SiteImprove.
+ * Used in `/mijn-aanvragen/{number}/{uuid}/status`
+ */
+class DynamicFileInputErrors {
+  constructor() {
+    this.initialized = false
+    this.previousErrorState = new Map()
+    this.bindEvents()
+  }
+
+  /**
+   * Binds events to callbacks.
+   * Use this to define EventListeners, MutationObservers etc.
+   */
+  bindEvents() {
+    if (this.#formElement && !this.initialized) {
+      this.initialized = true
+      this.#formElement.addEventListener(
+        'change',
+        this.handleChanges.bind(this)
+      )
+    }
+  }
+
+  /**
+   * Gets called when this.getForm() changes.
+   * @param {MouseEvent} event
+   */
+  handleChanges(event) {
+    if (!this.#fileInputElement || event.target !== this.#fileInputElement)
+      return
+
+    const currentErrors = Object.entries(this.#occurringErrors).reduce(
+      (acc, [key, nodes]) => {
+        nodes.forEach((node) => {
+          const fileName =
+            node.querySelector('.file__name').textContent ??
+            [...this.#fileListElement.children].indexOf(node)
+          acc.set(fileName, this.#ERROR_MAP[key])
+        })
+        return acc
+      },
+      new Map()
+    )
+
+    currentErrors.forEach((message, id) => {
+      if (!this.previousErrorState.has(id) && typeof _sz !== 'undefined')
+        _sz.push(['event', 'Mijn Aanvragen', 'Error', message])
+    })
+
+    // Update previous error state only with persistent errors
+    this.previousErrorState = currentErrors
+  }
+
+  /**
+   * The predefined (Dutch) error messages
+   * @private
+   */
+  get #ERROR_MAP() {
+    return {
+      type: 'Error verkeerd bestand type.',
+      size: 'Error bestand te groot.',
+      typeSize: 'Error bestand te groot en van verkeerde type.',
+    }
+  }
+
+  /**
+   * Get the form element
+   * @returns {HTMLElement}
+   * @private
+   */
+  get #formElement() {
+    return document.querySelector('#document-upload')
+  }
+
+  /**
+   * Get the file input element
+   * @returns {HTMLElement}
+   * @private
+   */
+  get #fileInputElement() {
+    return document.querySelector('#document-upload .file-input__input')
+  }
+
+  /**
+   * Returns a specific file list based on a child.
+   * @returns {HTMLElement}
+   * @private
+   */
+  get #fileListElement() {
+    return document.querySelector('#document-upload .file-list__list')
+  }
+
+  /**
+   * Returns the name of a file or the index of the file in the list.
+   * @param {HTMLElement} node
+   * @returns {{type: NodeListOf<Element>, size: NodeListOf<Element>, typeSize: NodeListOf<Element>}}
+   * @private
+   */
+  get #occurringErrors() {
+    return {
+      type: document.querySelectorAll('.file:has(.error > .file-error__type)'),
+      size: document.querySelectorAll('.file:has(.error > .file-error__size)'),
+      typeSize: document.querySelectorAll(
+        '.file:has(.error > .file-error__type-size)'
+      ),
+    }
+  }
+}
+
+// HTMX event listener to start tracking when content updates. - Start!
+document.body.addEventListener(
+  'htmx:afterSwap',
+  () => new DynamicFileInputErrors()
+)

src/open_inwoner/js/components/siteimprove/tracking.js

@@ -6,8 +6,8 @@
  * in order to organize them for the Siteimprove Dashboard where they are grouped by category
  */
 
-// Mock _sz object for testing
 // if (typeof _sz === 'undefined') {
+//   /** Mock SiteImprove `_sz` object for testing - only used during development */
 //   var _sz = {
 //     push: function (data) {
 //       try {
@@ -235,6 +235,7 @@ const specificClickSelectors = {
       "Open aanvraag via 'Bekijk aanvraag' link",
     ],
   // Detail Case view
+  '.file__delete': ['event', 'Aanvraag detail', 'Click', 'Verwijder bestand'],
   '#statuses_component .status-list__notification-content > p.utrecht-paragraph.status-list__upload.status-list__upload--enabled > a':
     ['event', 'Aanvraag detail', 'Scroll click', 'Scroll omlaag'],
   '#cases-detail-content .column.column--start-4.column--span-6 > section.case-detail__documents > .file-list > ul > li > aside > div > div > *':
@@ -337,9 +338,17 @@ const specificClickSelectors = {
  * Enabling to overwrite the Category only and leave Label and/or Action alone, and vice versa.
  */
 const partialClickSelectors = {
+  'body > header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__main > ul > li > button':
+    {
+      category: 'Dropdown',
+    },
+  'body > header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__main > ul > li > button *':
+    {
+      category: 'Dropdown',
+    },
   '.header .primary-navigation.primary-navigation--open.primary-navigation__main > .primary-navigation__list > li > ul > li > a > .link__text':
     {
-      category: 'Desktop onderwerpen dropdown',
+      category: 'Dropdown',
     },
   '#modal .modal__actions *': {
     category: 'Modal pop-up',

src/open_inwoner/scss/components/Header/AnchorMenu.scss

@@ -36,7 +36,7 @@
 
   &--mobile {
     box-sizing: border-box;
-    padding: 0 (var(--spacing-large));
+    padding: 0 var(--spacing-large);
     margin: var(--spacing-medium) var(--spacing-tiny) 0 var(--spacing-tiny);
     position: initial;
     width: calc(100% - (var(--spacing-tiny)));