Update from samaritans.org b0d69ee5

Author: mitch-torchbox

static_src/typescript/components/HeartBeatPoller/index.tsx

@@ -0,0 +1,116 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
+
+import type { RootState } from '../../store';
+import config from '../../config';
+
+/**
+ * Poll a callback at a given interval
+ *
+ * The interval is the time between the end of the previous callback and the
+ * start of the next callback. It does not use setInterval.
+ *
+ * */
+const usePoller = (callback: () => Promise<void>, interval: number) => {
+    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const isMounted = useRef(true);
+
+    useEffect(
+        () => () => {
+            isMounted.current = false;
+
+            // When the component unmounts, clear the timer
+            // so that it doesn't trigger the callback after unmounting
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        },
+        [],
+    );
+
+    useEffect(() => {
+        const poll = async () => {
+            await callback();
+
+            // Only set the timer if the component is still mounted
+            if (isMounted.current) {
+                timerRef.current = setTimeout(poll, interval);
+            }
+        };
+
+        poll();
+
+        return () => {
+            // If the callback or interval changes, clear the timer
+            // so that the previous timer doesn't trigger a potentially outdated
+            // callback
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, [callback, interval]);
+};
+
+type PollerProps = {
+    callback: () => Promise<void>;
+    interval: number;
+};
+
+const Poller = ({ callback, interval }: PollerProps) => {
+    usePoller(callback, interval);
+
+    return null;
+};
+
+const HeartBeatPoller = () => {
+    const {
+        screen,
+        chatEnded,
+        sessionEnded,
+        failedToReconnect,
+        amazonConnectContactId,
+    } = useSelector((state: RootState) => state.webchat);
+
+    const callback = useCallback(async () => {
+        if (!amazonConnectContactId) {
+            return;
+        }
+
+        try {
+            await fetch(config.heartbeatEndpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-api-key': config.heartbeatApiKey,
+                },
+                body: JSON.stringify({
+                    contactId: amazonConnectContactId,
+                }),
+            });
+        } catch (e) {
+            console.error('Failed to ping health check endpoint', e);
+        }
+    }, [amazonConnectContactId]);
+
+    // Ping the health check endpoint every 10 seconds
+    if (
+        // Only if the user is in the waiting or chat screen
+        ['waiting', 'chat'].includes(screen) &&
+        // Only if they have a contact ID (which means they're connected to a
+        // chat)
+        amazonConnectContactId &&
+        // Only if the chat hasn't ended yet (e.g. they're on the chat screen
+        // but the chat has ended)
+        !chatEnded &&
+        // Only if the session hasn't ended yet (e.g. they're reconnecting)
+        !sessionEnded &&
+        // Only if they haven't failed to reconnect
+        !failedToReconnect
+    ) {
+        return <Poller callback={callback} interval={10_000} />;
+    }
+
+    return null;
+};
+
+export default HeartBeatPoller;

static_src/typescript/config.ts

@@ -23,6 +23,8 @@ type Props = {
     metricsApiKey: string;
     feedbackEndpoint: string;
     feedbackApiKey: string;
+    heartbeatEndpoint: string;
+    heartbeatApiKey: string;
     assets: Assets;
     banner?: Banner;
 };
@@ -41,6 +43,8 @@ class Configuration {
         public metricsApiKey: string,
         public feedbackEndpoint: string,
         public feedbackApiKey: string,
+        public heartbeatEndpoint: string,
+        public heartbeatApiKey: string,
         public assets: Assets,
         public banner?: Banner,
     ) {}
@@ -62,6 +66,8 @@ class Configuration {
             obj.metricsApiKey,
             obj.feedbackEndpoint,
             obj.feedbackApiKey,
+            obj.heartbeatEndpoint,
+            obj.heartbeatApiKey,
             obj.assets,
             obj.banner,
         );
@@ -95,6 +101,8 @@ class Configuration {
             metricsApiKey: parsedData.metrics_api_key || '',
             feedbackEndpoint: parsedData.feedback_endpoint || '',
             feedbackApiKey: parsedData.feedback_api_key || '',
+            heartbeatEndpoint: parsedData.heartbeat_endpoint || '',
+            heartbeatApiKey: parsedData.heartbeat_api_key || '',
             assets: {
                 appIcon: parsedData.assets?.app_icon || '',
                 audioNotification: parsedData.assets?.audio_notification || '',

static_src/typescript/screens/LandingScreen.tsx

@@ -52,13 +52,24 @@ const LandingScreen = () => {
             )}
             <Room>
                 <MainPanel>
-                    <h1>Chat with us online</h1>
+                    <h1>
+                        If you are under 19 you can get support from Childline.
+                    </h1>
                     <p>
-                        Sometimes typing is easier than talking. Our trained
-                        volunteers will read your messages and respond in real
-                        time, helping you work through what&apos;s on your mind.
-                        They won&apos;t judge or tell you what to do, and you
-                        don&apos;t have to be suicidal to reach out.
+                        Childline is a free 24-hour counselling service for
+                        children and young people up to 19 years old. You can
+                        call, talk to a counsellor online, send an email or post
+                        on the message boards.
+                    </p>
+
+                    <p>
+                        <a
+                            href="https://www.childline.org.uk/get-support"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            Get support
+                        </a>
                     </p>
 
                     <h2>Enter the waiting room when you are ready</h2>

static_src/typescript/webchat.tsx

@@ -10,6 +10,8 @@ import 'react-toggle/style.css';
 import { LexWebUiProvider } from 'utils/lex-web-ui';
 import { Provider } from 'react-redux';
 import { Workbox } from 'workbox-window';
+import HeartBeatPoller from 'components/HeartBeatPoller';
+import { dataLayerPush } from 'utils/dataLayer';
 import App from './App';
 import SentryBoundary from './components/SentryBoundary';
 import './index.css';
@@ -22,13 +24,11 @@ import {
     setFailedToEstablish,
     setFailedToReconnect,
     setIsConfirmExitVisible,
-    setScreen,
     setSucceededToReconnect,
     setVolunteerJoined,
 } from './slices/webchatSlice';
 import { refreshQueueStatus } from './slices/queueSlice';
 import { ping } from './slices/networkSlice';
-import { dataLayerPush } from 'utils/dataLayer';
 
 /**
  * Render the Webchat app
@@ -48,6 +48,7 @@ const render = (Component: React.ComponentType) => {
                     queueName={config.queueName}
                     baseUrl={config.lexWebUiBaseUrl}
                 >
+                    <HeartBeatPoller />
                     <GlobalStyle />
                     <SentryBoundary>
                         <Component />