@defra/flood-webchat 0.0.1-beta.26 → 0.0.1-beta.28

package/src/client/scss/_tools.scss

@@ -0,0 +1,33 @@
+// Check there is ot already similar functinality in GOV.UK Frontend
+
+@mixin defra-visually-hidden() {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    -webkit-clip-path: inset(50%);
+    clip-path: inset(50%);
+    border: 0;
+    white-space: nowrap;
+}
+
+// Map specific mixins
+@mixin focus($glow: 8px, $strong: 5px, $background: 2px, $inset: 0) {
+    position:absolute;
+    content:'';
+    left: 5px;
+    right: 5px;
+    top: 5px;
+    bottom: 5px;
+    box-shadow:
+        0 0 0 $background #ffffff,
+        inset 0 0 0 $inset govuk-colour('black'),
+        0 0 0 $strong govuk-colour('black'),
+        0 0 0 $glow $govuk-focus-colour;
+    outline: 3px solid transparent;
+    pointer-events: none;
+    z-index: 99;
+}

package/src/client/scss/_utilities.scss

@@ -0,0 +1,25 @@
+.wc-u-html {
+    @include mq ($until: tablet) {
+        height: 100vh;
+        overflow: hidden;
+    }
+}
+
+.wc-u-body {
+    @include mq ($until: tablet) {
+        position: fixed;
+        overflow: hidden;
+        top:0;
+        right:0;
+        bottom:0;
+        left:0;
+    }
+}
+
+.wc-u-hidden {
+    visibility: hidden;
+}
+
+.wc-u-scroll-padding {
+    scroll-padding-bottom: calc(2rem + 20px);
+}

package/src/client/store/AppProvider.jsx

@@ -51,6 +51,18 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
     dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
   }
 
+  const onMatchMedia = e => {
+    dispatch({ type: 'TOGGLE_IS_MOBILE', payload: e.matches })
+  }
+
+  const onKeydown = () => {
+    dispatch({ type: 'TOGGLE_IS_KEYBOARD', payload: true })
+  }
+
+  const onPointerdown = () => {
+    dispatch({ type: 'TOGGLE_IS_KEYBOARD', payload: false })
+  }
+
   useEffect(() => {
     sdk.onChatEvent(ChatEvent.LIVECHAT_RECOVERED, onLiveChatRecovered)
     sdk.onChatEvent(ChatEvent.MESSAGE_CREATED, onMessageCreated)
@@ -58,6 +70,16 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
     sdk.onChatEvent(ChatEvent.AGENT_TYPING_ENDED, onAgentTypingEnded)
     sdk.onChatEvent(ChatEvent.ASSIGNED_AGENT_CHANGED, onAssignedAgentChanged)
     sdk.onChatEvent(ChatEvent.CONTACT_STATUS_CHANGED, onContactStatusChanged)
+    // We need to know if it is a mobile and if it is a keyboard interaction
+    window.matchMedia('(max-width: 640px)').addEventListener('change', onMatchMedia)
+    window.addEventListener('keydown', onKeydown)
+    window.addEventListener('pointerdown', onPointerdown)
+    // Tidying up
+    return () => {
+      window.removeEventListener('change', onMatchMedia)
+      window.removeEventListener('keydown', onKeydown)
+      window.removeEventListener('pointerdown', onPointerdown)
+    }
   }, [sdk])
 
   /**
@@ -69,20 +91,33 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
     setCustomerId(window.localStorage.getItem(CUSTOMER_ID_STORAGE_KEY))
     setThreadId(window.localStorage.getItem(THREAD_ID_STORAGE_KEY))
     setSettings(JSON.parse(window.localStorage.getItem(SETTINGS_STORAGE_KEY)) || state.settings)
+  }, [])
 
+  /**
+   * Set browser history on start chat click
+   */
+  useEffect(() => {
     if (window.location.hash === '#webchat') {
       setChatVisibility(true)
     }
+
+    const onBrowserNavigation = window.addEventListener('popstate', () => {
+      if (window.location.hash === '#webchat') {
+        setChatVisibility(true)
+      } else {
+        setChatVisibility(false)
+      }
+    })
+
+    return () => {
+      window.removeEventListener('popstate', onBrowserNavigation)
+    }
   }, [])
 
   /**
    * State update functions
    */
   const setChatVisibility = payload => {
-    if (!payload) {
-      window.location.hash = ''
-    }
-
     dispatch({ type: 'SET_CHAT_VISIBILITY', payload })
   }
 

package/src/client/store/actions-map.js

@@ -103,6 +103,20 @@ const setUnseenCount = (state, payload) => {
   }
 }
 
+const toggleIsMobile = (state, payload) => {
+  return {
+    ...state,
+    isMobile: payload
+  }
+}
+
+const toggleIsKeyboard = (state, payload) => {
+  return {
+    ...state,
+    isKeyboard: payload
+  }
+}
+
 export const actionsMap = {
   SET_CHAT_VISIBILITY: setChatVisibility,
   SET_AVAILABILITY: setAvailability,
@@ -115,5 +129,7 @@ export const actionsMap = {
   SET_AGENT: setAgent,
   SET_AGENT_TYPING: setAgentIsTyping,
   SET_AGENT_STATUS: setAgentStatus,
-  SET_UNSEEN_COUNT: setUnseenCount
+  SET_UNSEEN_COUNT: setUnseenCount,
+  TOGGLE_IS_MOBILE: toggleIsMobile,
+  TOGGLE_IS_KEYBOARD: toggleIsKeyboard
 }

package/src/client/store/reducer.js

@@ -11,6 +11,8 @@ export const initialState = {
   agentStatus: null,
   isAgentTyping: false,
   isChatOpen: false,
+  isMobile: window.matchMedia('(max-width: 640px)').matches,
+  isKeyboard: false,
   settings: { audio: true, scroll: true }
 }