[#2870] Add 'Mijn aanvragen' tracking events for Siteimprove

src/open_inwoner/js/components/form/FileInput.js

@@ -301,7 +301,7 @@ export class FileInput extends Component {
             <div class="file__data">
               <span class="file__name">${name} (${ext}, ${sizeMB}MB)</span>
             </div>
-            <a class="link link--primary file__download" href="#document-upload" role="button" aria-label="${labelDelete}">
+            <a class="link link--primary file__download file__delete" href="#document-upload" role="button" aria-label="${labelDelete}">
               <span aria-hidden="true" class="material-icons-outlined">delete</span>
             </a>
         </div>
@@ -310,20 +310,20 @@ export class FileInput extends Component {
               ? `
               <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-small error">
                 <span aria-hidden="true" class="material-icons-outlined">warning_amber</span>
-                <span class="file-error__content">Dit type bestand (${ext}) is ongeldig en te groot. Geldige bestandstypen zijn: ${uploadFileTypes}</span>
+                <span class="file-error__content file-error__type-size">Dit type bestand (${ext}) is ongeldig en te groot. Geldige bestandstypen zijn: ${uploadFileTypes}</span>
               </p>`
               : typeError || sizeError
               ? `
               <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-small error">
                 <span aria-hidden="true" class="material-icons-outlined">warning_amber</span>
                 ${
                   typeError
-                    ? `<span class="file-error__content">Dit type bestand (${ext}) is ongeldig. Geldige bestandstypen zijn: ${uploadFileTypes}</span>`
+                    ? `<span class="file-error__content file-error__type">Dit type bestand (${ext}) is ongeldig. Geldige bestandstypen zijn: ${uploadFileTypes}</span>`
                     : ''
                 }
                 ${
                   sizeError
-                    ? '<span class="file-error__content">Dit bestand is te groot</span>'
+                    ? '<span class="file-error__content file-error__size">Dit bestand is te groot</span>'
                     : ''
                 }
               </p>`

src/open_inwoner/js/components/index.js

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

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

@@ -0,0 +1,113 @@
+// Mock _sz object for testing
+if (typeof _sz === 'undefined') {
+  var _sz = {
+    push: function (data) {
+      try {
+        console.log('Event pushed to _sz:', data)
+      } catch (error) {
+        console.error('Error occurred while pushing event data:', error)
+      }
+    },
+  }
+}
+//
+// document.addEventListener('DOMContentLoaded', function () {
+//   console.log('DOM fully loaded and parsed. Initializing tracker...')
+//
+//   // Stable parent element for checking existence
+//   const parentSelector = '#cases-detail-content'
+//
+//   // Retry interval in milliseconds
+//   const retryInterval = 20
+//
+//   // Function to track delete links and spans
+//   function trackDeleteEvents() {
+//     console.log('Checking for #form_upload...')
+//     const formUpload = document.querySelector('#form_upload')
+//
+//     if (!formUpload) {
+//       console.log('#form_upload not found. Retrying...')
+//       return false
+//     }
+//
+//     console.log('#form_upload detected. Checking for .file-list...')
+//     const fileList = formUpload.querySelector(
+//       '.file-list .file-list__list .file-list__list-item'
+//     )
+//
+//     if (!fileList) {
+//       console.log(
+//         '.file-list structure not found within #form_upload. Retrying...'
+//       )
+//       return false
+//     }
+//
+//     console.log('.file-list structure detected. Setting up event listeners...')
+//
+//     // Add event listener for 'Verwijder document' links
+//     const links = formUpload.querySelectorAll(
+//       '.file-list .file-list__list .file-list__list-item a'
+//     )
+//     if (links.length) {
+//       console.log(
+//         `Found ${links.length} delete links. Adding click listeners...`
+//       )
+//       links.forEach((link, index) => {
+//         link.addEventListener('click', function () {
+//           console.log(`Link ${index + 1} clicked. Sending Siteimprove event.`)
+//           _sz.push(['event', 'Aanvraag detail', 'Click', 'Verwijder document'])
+//         })
+//       })
+//     } else {
+//       console.log('No delete links found within the file list.')
+//     }
+//
+//     // Add event listener for the <span> within the links
+//     const spans = formUpload.querySelectorAll(
+//       '.file-list .file-list__list .file-list__list-item a span'
+//     )
+//     if (spans.length) {
+//       console.log(
+//         `Found ${spans.length} delete spans. Adding click listeners...`
+//       )
+//       spans.forEach((span, index) => {
+//         span.addEventListener('click', function () {
+//           console.log(`Span ${index + 1} clicked. Sending Siteimprove event.`)
+//           _sz.push(['event', 'Aanvraag detail', 'Click', 'Verwijder document'])
+//         })
+//       })
+//     } else {
+//       console.log('No delete spans found within the file list.')
+//     }
+//
+//     return true // Successfully tracked
+//   }
+//
+//   // Function to poll for the existence of #form_upload and .file-list
+//   function startPolling() {
+//     console.log('Starting polling for #form_upload...')
+//     const pollingInterval = setInterval(() => {
+//       const parent = document.querySelector(parentSelector)
+//
+//       if (!parent) {
+//         console.log(
+//           `#cases-detail-content (${parentSelector}) not found. Stopping polling.`
+//         )
+//         clearInterval(pollingInterval)
+//         return
+//       }
+//
+//       console.log(
+//         `#cases-detail-content (${parentSelector}) found. Checking components...`
+//       )
+//
+//       if (trackDeleteEvents()) {
+//         console.log('Required elements found and tracked. Stopping polling.')
+//         clearInterval(pollingInterval)
+//       }
+//     }, retryInterval)
+//   }
+//
+//   // Start the polling process
+//   startPolling()
+// })

src/open_inwoner/js/components/siteimprove/index.js

@@ -0,0 +1,2 @@
+import './tracking'
+import './dynamic-tracking'