2.3.0

dist/index.html

@@ -13,20 +13,9 @@
     <script src="./chatbox.js"></script>
     <script>
       var config = {
-        matrixServerUrl: 'https://matrix.rhok.space',
-        botId: '@help-bot:rhok.space',
-        roomName: 'Support Chat',
-        termsUrl: 'https://tosdr.org/',
-        introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",
-        agreementMessage: 'Do you want to continue?',
-        confirmationMessage: 'Waiting for a facilitator to join the chat...',
-        exitMessage: 'The chat is closed. You may close this window.',
-        chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
-        anonymousDisplayName: 'Anonymous',
-        position: 'bottom right',
-        size: 'large',
-        maxWaitTime: 1000*60*3, // 3 minutes
-    }
+        settingsEndpoint: 'https://safesupport-admin.herokuapp.com/api/get-settings',
+        matrixServerUrl: 'https://matrix.safesupport.chat'
+      }
 
       EmbeddableChatbox.mount(config);
     </script>

package.json

@@ -1,8 +1,8 @@
 {
   "name": "private-safesupport-chatbox",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "description": "A secure and private embeddable chatbox that connects to Riot",
-  "main": "dist/component.js",
+  "main": "dist/chatbox.js",
   "scripts": {
     "build": "NODE_ENV=production webpack-cli --mode production",
     "build:profile": "webpack --mode production --config webpack.config.profile.js",
@@ -131,6 +131,7 @@
     "webpack-serve": "3.2.0"
   },
   "dependencies": {
+    "airtable": "^0.10.0",
     "browser-encrypt-attachment": "^0.3.0",
     "emoji-picker-react": "^3.1.3",
     "isomorphic-fetch": "^2.2.1",

public/index.html

@@ -13,20 +13,9 @@
     <script src="./chatbox.js"></script>
     <script>
       var config = {
-        matrixServerUrl: 'https://matrix.rhok.space',
-        botId: '@help-bot:rhok.space',
-        roomName: 'Support Chat',
-        termsUrl: 'https://tosdr.org/',
-        introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",
-        agreementMessage: 'Do you want to continue?',
-        confirmationMessage: 'Waiting for a facilitator to join the chat...',
-        exitMessage: 'The chat is closed. You may close this window.',
-        chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
-        anonymousDisplayName: 'Anonymous',
-        position: 'bottom right',
-        size: 'large',
-        maxWaitTime: 1000*60*3, // 3 minutes
-    }
+        settingsEndpoint: 'https://safesupport-admin.herokuapp.com/api/get-settings',
+        matrixServerUrl: 'https://matrix.safesupport.chat'
+      }
 
       EmbeddableChatbox.mount(config);
     </script>

src/components/ChatboxWithSettings.js

@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Chatbox from './chatbox';
+
+
+const ChatboxWithSettings = ({ settingsEndpoint, matrixServerUrl, ...rest }) => {
+  const [settings, setSettings] = useState({});
+  const [shifts, setShifts] = useState();
+  const [isAvailable, setAvailability] = useState(false);
+  const settingsObj = {};
+
+  const getSettings = async () => {
+    if (!settingsEndpoint) {
+      const props = {
+        ...rest,
+        enabled: true,
+        isAvailable: true,
+      };
+
+      return setSettings(props);
+    }
+
+    const url = `${settingsEndpoint}?homeserver=${encodeURIComponent(matrixServerUrl)}`;
+    const res = await fetch(url);
+    const data = await res.json();
+    const { fields, schedule = [] } = data;
+
+    setShifts(schedule);
+
+    Object.entries(fields).forEach(([k, v]) => {
+      const [scope, key] = k.split('_');
+
+      if (scope === 'web') {
+        settingsObj[key] = v;
+      }
+    });
+
+    if (!settingsObj.enabled) {
+      settingsObj.enabled = false;
+    }
+
+    return setSettings(settingsObj);
+  };
+
+  const checkSchedule = () => {
+    if (shifts.length === 0) {
+      setAvailability(true);
+    }
+
+    const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+    const now = new Date();
+    const weekday = weekdays[now.getDay()];
+    const hours = now.getHours();
+    const minutes = now.getMinutes();
+
+    shifts.map(async (shift) => {
+      const [startHours, startMinutes] = shift.start.split(':').map((t) => Number(t));
+      const [endHours, endMinutes] = shift.end.split(':').map((t) => Number(t));
+      if (
+        shift.service === 'web'
+        && shift.weekday === weekday
+        && ((startHours < hours) || (startHours === hours && startMinutes <= minutes))
+        && ((endHours > hours) || (endHours === hours && endMinutes > minutes))
+      ) {
+        setAvailability(true);
+      }
+    });
+  };
+
+  useEffect(() => {
+    getSettings();
+  }, []);
+
+  useEffect(() => {
+    if (shifts) {
+      checkSchedule();
+    }
+  }, [shifts]);
+
+  return (
+    /* eslint-disable react/jsx-props-no-spreading */
+    <Chatbox matrixServerUrl={matrixServerUrl} isAvailable={isAvailable} {...settings} {...rest} />
+  );
+};
+
+ChatboxWithSettings.propTypes = {
+  matrixServerUrl: PropTypes.string.isRequired,
+  settingsEndpoint: PropTypes.string,
+};
+
+ChatboxWithSettings.defaultProps = {
+  settingsEndpoint: null,
+};
+
+export default ChatboxWithSettings;

src/components/chatbox.jsx

@@ -34,7 +34,7 @@ const DEFAULT_INTRO_MESSAGE = "This chat application does not collect any of you
 const DEFAULT_AGREEMENT_MESSAGE = "Do you want to continue?"
 const DEFAULT_CONFIRMATION_MESSAGE = "Waiting for a facilitator to join the chat..."
 const DEFAULT_EXIT_MESSAGE = "The chat is closed. You may close this window."
-const DEFAULT_ANONYMOUS_DISPLAY_NAME="Anonymous"
+const DEFAULT_DISPLAY_NAME="Anonymous"
 const DEFAULT_CHAT_UNAVAILABLE_MESSAGE = "The chat service is not available right now. Please try again later."
 const DEFAULT_CHAT_OFFLINE_MESSAGE = "All of the chat facilitators are currently offline."
 const DEFAULT_WAIT_MESSAGE = "Please be patient, our online facilitators are currently responding to other support requests."
@@ -43,7 +43,8 @@ const DEFAULT_POSITION = 'bottom right'
 const DEFAULT_SIZE = 'large'
 const DEFAULT_MAX_WAIT_MS = 600000 // 10 minutes
 const DEFAULT_WAIT_INTERVAL_MS = 120000 // 2 minutes
-
+const DEFAULT_DOCK_LABEL = 'Start a new chat'
+const DEFAULT_ENABLED = false
 
 class ChatBox extends React.Component {
   constructor(props) {
@@ -246,7 +247,7 @@ class ChatBox extends React.Component {
     client.once('sync', async (state, prevState, data) => {
       if (state === "PREPARED") {
         this.setState({ client })
-        client.setDisplayName(this.props.anonymousDisplayName)
+        client.setDisplayName(this.props.displayName)
         this.setMatrixListeners(client)
         await this.createRoom(client)
       }
@@ -288,7 +289,7 @@ class ChatBox extends React.Component {
       if (state === "PREPARED") {
         try {
           this.setState({ client })
-          client.setDisplayName(this.props.anonymousDisplayName)
+          client.setDisplayName(this.props.displayName)
           this.setMatrixListeners(client)
           await this.createRoom(client)
           this.displayBotMessage({ body: UNENCRYPTION_NOTICE })
@@ -307,7 +308,7 @@ class ChatBox extends React.Component {
     await client.startClient()
 
     client.once('sync', async (state, prevState, data) => {
-      client.setDisplayName(this.props.anonymousDisplayName)
+      client.setDisplayName(this.props.displayName)
       this.setMatrixListeners(client)
       await this.createRoom(client)
     })
@@ -586,14 +587,14 @@ class ChatBox extends React.Component {
   }
 
   componentDidMount() {
-    document.addEventListener("keydown", this.handleKeyDown, false);
+    document.addEventListener("keydown", this.handleKeyDown, false)
     window.addEventListener('beforeunload', this.exitChat)
   }
 
   componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleKeyDown, false);
+    document.removeEventListener("keydown", this.handleKeyDown, false)
     window.removeEventListener('beforeunload', this.exitChat)
-    this.exitChat();
+    this.exitChat()
   }
 
   handleInputChange = e => {
@@ -654,6 +655,10 @@ class ChatBox extends React.Component {
   }
 
   render() {
+    if (!this.props.enabled || !this.props.isAvailable) {
+      return null
+    }
+
     const { ready, messages, messagesInFlight, inputValue, userId, roomId, typingStatus, opened, showDock, emojiSelectorOpen, isMobile, decryptionErrors } = this.state;
     const orderedMessages = Object.values(messages).sort((a,b) => a.timestamp - b.timestamp)
     const inputLabel = 'Send a message...'
@@ -756,7 +761,7 @@ class ChatBox extends React.Component {
               )}
             }
           </Transition>
-          {showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} size={this.props.size} />}
+          {showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} size={this.props.size} label={this.props.dockLabel} />}
           {showDock && roomId && <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />}
         </div>
       </div>
@@ -774,7 +779,7 @@ ChatBox.propTypes = {
   confirmationMessage: PropTypes.string,
   exitMessage: PropTypes.string,
   chatUnavailableMessage: PropTypes.string,
-  anonymousDisplayName: PropTypes.string,
+  displayName: PropTypes.string,
   waitMessage: PropTypes.string,
   chatOfflineMessage: PropTypes.string,
   isEncryptionDisabled: PropTypes.bool,
@@ -782,6 +787,8 @@ ChatBox.propTypes = {
   size: PropTypes.oneOf(['small', 'large']),
   maxWaitTime: PropTypes.number,
   waitInterval: PropTypes.number,
+  dockLabel: PropTypes.string,
+  enabled: PropTypes.bool
 }
 
 ChatBox.defaultProps = {
@@ -793,7 +800,7 @@ ChatBox.defaultProps = {
   agreementMessage: DEFAULT_AGREEMENT_MESSAGE,
   confirmationMessage: DEFAULT_CONFIRMATION_MESSAGE,
   exitMessage: DEFAULT_EXIT_MESSAGE,
-  anonymousDisplayName: DEFAULT_ANONYMOUS_DISPLAY_NAME,
+  displayName: DEFAULT_DISPLAY_NAME,
   chatUnavailableMessage: DEFAULT_CHAT_UNAVAILABLE_MESSAGE,
   waitMessage: DEFAULT_WAIT_MESSAGE,
   chatOfflineMessage: DEFAULT_CHAT_OFFLINE_MESSAGE,
@@ -802,6 +809,8 @@ ChatBox.defaultProps = {
   size: DEFAULT_SIZE,
   maxWaitTime: DEFAULT_MAX_WAIT_MS,
   waitInterval: DEFAULT_WAIT_INTERVAL_MS,
+  dockLabel: DEFAULT_DOCK_LABEL,
+  enabled: DEFAULT_ENABLED,
 }
 
 export default ChatBox;

src/components/dock.jsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from "react"
 import PropTypes from "prop-types"
 
-const Dock = ({ handleToggleOpen, size }) => {
+const Dock = ({ handleToggleOpen, size, label }) => {
   return(
     <button
       type="button"
@@ -13,11 +13,11 @@ const Dock = ({ handleToggleOpen, size }) => {
       {
         size === 'small' ?
           <div id="open-chatbox-label">
-            <span>Chat</span><span className="icon">+</span>
+            <span>{label}</span><span className="icon">+</span>
           </div>
         :
         <Fragment>
-          <div id="open-chatbox-label">Start a new chat</div>
+          <div id="open-chatbox-label">{label}</div>
           <div className="label-icon">
             <div className={`btn-icon`} aria-label={`Open support chat window`}>+</div>
           </div>

src/outputs/embeddable-chatbox.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Chatbox from '../components/chatbox';
+import ChatboxWithSettings from '../components/ChatboxWithSettings';
 import '../../vendor/cleanslate.css';
 
 export default class EmbeddableChatbox {
   static el;
 
   static mount({ parentElement = null, ...props } = {}) {
-    const component = <Chatbox {...props} />; // eslint-disable-line
+    const component = <ChatboxWithSettings {...props} />; // eslint-disable-line
+
 
     function doRender() {
       if (EmbeddableChatbox.el) {

yarn.lock

@@ -1786,6 +1786,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-13.7.0.tgz#b417deda18cf8400f278733499ad5547ed1abec4"
   integrity sha512-GnZbirvmqZUzMgkFn70c74OQpTTUcCzlhQliTzYjQMqg+hVKcDnxdL19Ne3UdYzdMA/+W3eb646FWn/ZaT1NfQ==
 
+"@types/node@^14.0.14":
+  version "14.14.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.0.tgz#f1091b6ad5de18e8e91bdbd43ec63f13de372538"
+  integrity sha512-BfbIHP9IapdupGhq/hc+jT5dyiBVZ2DdeC5WwJWQWDb0GijQlzUFAeIQn/2GtvZcd2HVUU7An8felIICFTC2qg==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
@@ -2017,6 +2022,18 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
+abort-controller@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
+  integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
+  dependencies:
+    event-target-shim "^5.0.0"
+
+abortcontroller-polyfill@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.5.0.tgz#2c562f530869abbcf88d949a2b60d1d402e87a7c"
+  integrity sha512-O6Xk757Jb4o0LMzMOMdWvxpHWrQzruYBaUruFaIOfAQRnWFxfdXYobw12jrVHGtoXk6WiiyYzc0QWN9aL62HQA==
+
 accepts@^1.3.5, accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -2084,6 +2101,17 @@ airbnb-prop-types@^2.15.0:
     prop-types-exact "^1.2.0"
     react-is "^16.9.0"
 
+airtable@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/airtable/-/airtable-0.10.0.tgz#29f7f5fb209b898b72238fe847142cf2a41210b2"
+  integrity sha512-6gBUG+z1kqvwyHYWlc+y74TfYpc18mvmNuVcefjlvd6MSgLP9Hk47ByyBS6Ke8zdSk6kBTDpdiwCjoJQUpu6yg==
+  dependencies:
+    "@types/node" "^14.0.14"
+    abort-controller "^3.0.0"
+    abortcontroller-polyfill "^1.4.0"
+    lodash "4.17.19"
+    node-fetch "^2.6.0"
+
 ajv-errors@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
@@ -4405,6 +4433,11 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
+event-target-shim@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
+  integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
+
 eventemitter3@4.0.0, eventemitter3@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
@@ -6817,6 +6850,11 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
+lodash@4.17.19:
+  version "4.17.19"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
+  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
+
 lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@~4.17.10:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
@@ -7303,6 +7341,11 @@ node-fetch@^2.3.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
   integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
 
+node-fetch@^2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 node-forge@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"