first commit

services/web/frontend/js/features/contact-form/index.js

@@ -0,0 +1,35 @@
+import { setupSearch } from './search'
+
+document
+  .querySelectorAll('[data-ol-contact-form-with-search]')
+  .forEach(setupSearch)
+
+document
+  .querySelectorAll('[data-ol-open-contact-form-modal="contact-us"]')
+  .forEach(el => {
+    el.addEventListener('click', function (e) {
+      e.preventDefault()
+      $('[data-ol-contact-form-modal="contact-us"]').modal()
+    })
+  })
+
+document
+  .querySelectorAll('[data-ol-open-contact-form-modal="general"]')
+  .forEach(el => {
+    el.addEventListener('click', function (e) {
+      e.preventDefault()
+      $('[data-ol-contact-form-modal="general"]').modal()
+    })
+  })
+
+document.querySelectorAll('[data-ol-contact-form]').forEach(el => {
+  el.addEventListener('submit', function (e) {
+    const emailValue = document.querySelector(
+      '[data-ol-contact-form-email-input]'
+    ).value
+    const thankYouEmailEl = document.querySelector(
+      '[data-ol-contact-form-thank-you-email]'
+    )
+    thankYouEmailEl.textContent = emailValue
+  })
+})

services/web/frontend/js/features/contact-form/search.js

@@ -0,0 +1,70 @@
+import _ from 'lodash'
+import { formatWikiHit, searchWiki } from '../algolia-search/search-wiki'
+import { sendMB } from '../../infrastructure/event-tracking'
+
+export function setupSearch(formEl) {
+  const inputEl = formEl.querySelector('[name="subject"]')
+  const resultsEl = formEl.querySelector('[data-ol-search-results]')
+  const wrapperEl = formEl.querySelector('[data-ol-search-results-wrapper]')
+
+  let lastValue = ''
+  function hideResults() {
+    wrapperEl.setAttribute('hidden', '')
+  }
+  function showResults() {
+    wrapperEl.removeAttribute('hidden')
+  }
+
+  async function handleChange() {
+    const value = inputEl.value
+    if (value === lastValue) return
+    lastValue = value
+    if (value.length < 3) {
+      hideResults()
+      return
+    }
+
+    try {
+      const { hits, nbHits } = await searchWiki(value, {
+        hitsPerPage: 3,
+        typoTolerance: 'strict',
+      })
+      resultsEl.innerText = ''
+
+      for (const hit of hits) {
+        const { url, pageName } = formatWikiHit(hit)
+        const liEl = document.createElement('li')
+
+        const linkEl = document.createElement('a')
+        linkEl.className = 'contact-suggestion-list-item'
+        linkEl.href = url
+        linkEl.target = '_blank'
+        liEl.append(linkEl)
+
+        const contentEl = document.createElement('span')
+        contentEl.innerHTML = pageName
+        linkEl.append(contentEl)
+
+        const iconEl = document.createElement('i')
+        iconEl.className = 'fa fa-angle-right'
+        iconEl.setAttribute('aria-hidden', 'true')
+        linkEl.append(iconEl)
+
+        resultsEl.append(liEl)
+      }
+      if (nbHits > 0) {
+        showResults()
+        sendMB('contact-form-suggestions-shown')
+      } else {
+        hideResults()
+      }
+    } catch (e) {
+      hideResults()
+    }
+  }
+
+  inputEl.addEventListener('input', _.debounce(handleChange, 350))
+
+  // display initial results
+  handleChange()
+}