@defra/flood-webchat 0.0.1-alpha.3 → 0.0.1-alpha.4

package/src/client/lib/skiplink.js

@@ -0,0 +1,27 @@
+import nunjucks from './nunjucks.js'
+
+class Skiplink {
+  constructor () {
+    this.target = document.querySelector('a[data-module="govuk-skip-link"]')
+    this.skiplink = null
+  }
+
+  toggle (hasSkip) {
+    const target = this.target
+    const skiplink = this.skiplink
+    if (!target) {
+      return
+    }
+
+    if (hasSkip && !skiplink) {
+      // Add skiplink
+      target.insertAdjacentHTML('afterend', nunjucks.render('skiplink.html'))
+      this.skiplink = target.nextElementSibling
+    } else if (skiplink && !hasSkip) {
+      // Remove skiplink
+      this.skiplink.remove()
+    }
+  }
+}
+
+export default Skiplink

package/src/client/lib/state.js

@@ -0,0 +1,82 @@
+import Utils from './utils.js'
+
+class State {
+  constructor (openChat, closeChat) {
+    const threadId = window.localStorage.getItem('THREAD_ID')
+    const isBack = window.sessionStorage.getItem('IS_BACK') === 'true'
+    const isOpen = window.location.hash === '#webchat'
+    const view = threadId ? 'OPEN' : null
+
+    // Settings
+    const settings = window.localStorage.getItem('SETTINGS')
+    const hasAudio = settings ? settings.split(',')[0] : true
+    const isScroll = settings ? settings.split(',')[1] : true
+
+    // Public properties
+    this.threadId = threadId
+    this.availability = null
+    this.status = null
+    this.view = view
+    this.assignee = null
+    this.unseen = 0
+    this.isAuthorised = false
+    this.hasAudio = hasAudio
+    this.isScroll = isScroll
+    this.isMobile = true
+    this.isBack = isBack
+    this.isOpen = isOpen
+    this.messages = []
+    this.name = null
+    this.question = null
+
+    // Private methods (callbacks)
+    this._openChat = openChat
+    this._closeChat = closeChat
+
+    // Help with browser back behaviour
+    if (window.history.length <= 1) {
+      this._isBack = false
+      window.sessionStorage.removeItem('IS_BACK')
+    }
+
+    // We need to toggle some attributes depending on screen size
+    Utils.listenForDevice('mobile', (isMobile) => { this.isMobile = isMobile })
+
+    // Events
+    window.addEventListener('popstate', this._popstate.bind(this))
+  }
+
+  _popstate (e) {
+    if (window.location.hash === '#webchat') {
+      this._openChat(e)
+    } else {
+      this._closeChat(e)
+    }
+  }
+
+  replaceState () {
+    this.isOpen = false
+    const url = window.location.href.split('#')[0]
+    window.history.replaceState(null, null, url)
+  }
+
+  pushState () {
+    this._isOpen = true
+    this._isBack = true
+    const url = `${window.location.href.split('#')[0]}#webchat`
+    window.history.pushState({ view: 'webchat', isBack: true }, '', url)
+    window.sessionStorage.setItem('IS_BACK', true)
+  }
+
+  back () {
+    const offsetY = window.scrollY
+    window.history.back()
+    if (!this._isMobile) {
+      window.addEventListener('scroll', e => {
+        window.scrollTo(0, offsetY)
+      }, { once: true })
+    }
+  }
+}
+
+export default State

package/src/client/lib/transcript.js

@@ -0,0 +1,34 @@
+'use strict'
+
+class Transcript {
+  constructor (messages) {
+    const text = this._buildString(messages)
+    this.data = `data:text/plain;charset=utf-8,${encodeURIComponent(text)}`
+  }
+
+  _buildString (messages) {
+    const dateNow = this._formatDate(new Date())
+    let string = `Floodline webchat transcript at ${dateNow}\n\n`
+    for (let i = 0; i < messages.length; i++) {
+      const author = messages[i].direction === 'inbound' ? messages[i].user : `${messages[i].assignee} (Floodline adviser)`
+      const date = this._formatDate(messages[i].createdAt)
+      string += `${author} at ${date}\n${messages[i].text}\n\n`
+    }
+    string = string.replace(/<a\b[^>]*>/i, '').replace(/<\/a>/i, '')
+    return string
+  }
+
+  _formatDate (datetime) {
+    let hours = datetime.getHours()
+    let minutes = datetime.getMinutes()
+    minutes = `${minutes < 10 ? '0' : ''}${minutes}`
+    const ampm = hours >= 12 ? 'pm' : 'am'
+    hours %= 12
+    hours = hours || 12
+    const time = `${hours}:${minutes}${ampm}`
+    const date = datetime.toLocaleString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })
+    return `${time}, ${date}`
+  }
+}
+
+export default Transcript

package/src/client/lib/utils.js

@@ -0,0 +1,190 @@
+import Config from './config.js'
+import nunjucks from './nunjucks.js'
+
+const env = nunjucks
+
+class Utils {
+  static addOrUpdateParameter (uri, key, value) {
+    // Temporariliy remove fragment
+    const i = uri.indexOf('#')
+    const hash = i === -1 ? '' : uri.substr(i)
+    uri = i === -1 ? uri : uri.substr(0, i)
+    const re = new RegExp('([?&])' + key + '=[^&#]*', 'i')
+    // Delete parameter and value
+    if (!value || value === '') {
+      uri = uri.replace(re, '')
+    } else if (re.test(uri)) {
+      // Replace parameter value
+      uri = uri.replace(re, '$1' + key + '=' + value)
+      // Add parameter and value
+    } else {
+      const separator = /\?/.test(uri) ? '&' : '?'
+      uri = uri + separator + key + '=' + value
+    }
+    return uri + hash
+  }
+
+  static getParameterByName (name) {
+    const v = window.location.search.match(new RegExp('(?:[?&]' + name + '=)([^&]+)'))
+    return v ? v[1] : null
+  }
+
+  static listenForDevice (device, callback) {
+    const mQ = window.matchMedia(`(max-width: ${Config.getBreakpoint(device)})`)
+    if (window.matchMedia.addEventListener) {
+      mQ.addEventListener('change', e => { callback(e.matches) })
+    } else {
+      mQ.addListener(e => { callback(e.matches) })
+    }
+    callback(mQ.matches)
+  }
+
+  static formatDate (value) {
+    const now = new Date().getTime()
+    const startOfDay = now - (now % 86400000)
+    const isToday = value.getTime() >= startOfDay
+    let hours = value.getHours()
+    let minutes = value.getMinutes()
+    minutes = `${minutes < 10 ? '0' : ''}${minutes}`
+    const ampm = hours >= 12 ? 'pm' : 'am'
+    hours %= 12
+    hours = hours || 12
+    const time = `${hours}:${minutes}${ampm}`
+    const date = value.toLocaleString('en-GB', { day: 'numeric', month: 'short' })
+    return isToday ? time : `${time}, ${date}`
+  }
+
+  static parseMessage (input) {
+    let text = input
+
+    // Convert line breaks
+    text = text.trim().replace(/(\r\n|\r|\n){2,}/g, '$1\n').replace(/\r\n|\r|\n/g, '<br>')
+
+    // Convert links
+    const linksFound = text.match(/(?:www|https?)[^\s]+/g)
+    const aLink = []
+    if (linksFound != null) {
+      for (let i = 0; i < linksFound.length; i++) {
+        const href = linksFound[i]
+        const anchor = linksFound[i].replace(/#webchat|https?:\/\//gi, '')
+        aLink.push(`<a href="${href}">${anchor}</a>`)
+        text = text.split(linksFound[i]).join(aLink[i])
+      }
+    }
+
+    return text
+  }
+
+  static sortMessages (messages) {
+    return messages.sort((a, b) => {
+      return a.createdAt - b.createdAt
+    })
+  }
+
+  static addMessagesHtml (messages) {
+    const m = messages
+    for (let i = 0; i < m.length; i++) {
+      const isGroupStart = i === 0 || (i > 0 && m[i].direction !== m[i - 1].direction)
+      const isGroupEnd = (i === m.length - 1) || (i < (m.length - 1) && m[i].direction !== m[i + 1].direction)
+      m[i].isGroupStart = isGroupStart
+      m[i].isGroupEnd = isGroupEnd
+      const html = env.render('message.html', { model: m[i] })
+      m[i].html = html
+    }
+    return m
+  }
+
+  static setCountdown (element, callback) {
+    let second = Config.countdown
+    const interval = setInterval(() => {
+      second--
+      if (element) {
+        element.innerHTML = `${second} seconds`
+      }
+      if (second <= 0) {
+        clearInterval(interval)
+        callback()
+      }
+    }, 1000)
+    return interval
+  }
+
+  static toggleLabel (label, key, textbox) {
+    const chars = /^[a-zA-Z0-9- !'^+%&/()=?_\-~`;#$½{[\]}\\|<>@,]+$/i // /^[a-z\d -]+$/i
+    const hasValue = textbox.value.length > 0
+    const isValidChar = key && key.length === 1 && chars.test(key)
+    const isHidden = hasValue || (!hasValue && isValidChar)
+    label.classList.toggle('wc-message__label--hidden', isHidden)
+  }
+
+  static submit (e, textbox) {
+    const form = textbox.closest('form')
+    const isEnterSubmit = textbox.hasAttribute('data-wc-enter-submit')
+    if (e.key !== 'Enter' || !isEnterSubmit || e.altKey || e.shiftKey) {
+      return
+    }
+    form.dispatchEvent(new Event('submit'))
+  }
+
+  static suppressEnter (e, textbox) {
+    const isEnterSubmit = textbox.hasAttribute('data-wc-enter-submit')
+    const hasValue = textbox.value.length > 0
+    if (e.key === 'Enter' && (!hasValue || (isEnterSubmit && !e.altKey && !e.shiftKey))) {
+      e.preventDefault()
+    }
+  }
+
+  static autosize (textbox) {
+    const offset = textbox.offsetHeight - textbox.clientHeight
+    textbox.addEventListener('input', e => {
+      e.target.style.height = 'auto'
+      e.target.style.height = e.target.scrollHeight + offset + 'px'
+    })
+  }
+
+  static async poll ({ fn, validate, interval, maxAttempts }) {
+    let attempts = 0
+
+    const executePoll = async (resolve, reject) => {
+      const result = await fn()
+      attempts++
+
+      if (interval <= 0) {
+        return
+      }
+
+      if (validate && validate(result)) {
+        return resolve(result)
+      } else if (maxAttempts && attempts === maxAttempts) {
+        return reject(new Error('Exceeded max attempts'))
+      } else {
+        setTimeout(executePoll, interval, resolve, reject)
+      }
+    }
+
+    return new Promise(executePoll)
+  }
+
+  static async getAvailability (endpoint) {
+    try {
+      const response = await fetch(endpoint)
+      const data = await response.json()
+      return data.availability
+    } catch (err) {
+      console.log('getAvailability', err)
+      return 'UNAVAILABLE'
+    }
+  }
+
+  static getDuration (seconds) {
+    let duration = seconds
+    if (seconds <= 60) {
+      duration = `${seconds} seconds`
+    } else {
+      duration = `${Math.floor(seconds / 60)} minutes`
+    }
+    return duration
+  }
+}
+
+export default Utils