tos prompt (#1313)

* tos toast

* finish ToS prompt

Co-authored-by: Colin Megill <colinmegill@gmail.com>

client/src/components/app.js

@@ -10,6 +10,7 @@ import Legend from "./continuousLegend";
 import Graph from "./graph/graph";
 import MenuBar from "./menubar";
 import Autosave from "./autosave";
+import TermsOfServicePrompt from "./termsPrompt";
 
 import actions from "../actions";
 
@@ -93,6 +94,7 @@ class App extends React.Component {
           {loading ? null : <MenuBar />}
           {loading ? null : <Graph key={graphRenderCounter} />}
           {loading ? null : <Autosave />}
+          {loading ? null : <TermsOfServicePrompt />}
           <Legend />
         </div>
       </Container>

client/src/components/framework/toasters.js

@@ -7,6 +7,11 @@ const ToastTopCenter = Toaster.create({
   position: Position.TOP
 });
 
+const ToastBottomCenter = Toaster.create({
+  className: "recipe-toaster",
+  position: Position.BOTTOM
+});
+
 /*
 A "user" error - eg, bad input
 */
@@ -46,3 +51,11 @@ export const postAsyncFailureToast = message =>
     timeout: 10000,
     intent: Intent.WARNING
   });
+
+export const termsOfServiceToast = (message, _onDismiss) =>
+  ToastBottomCenter.show({
+    message,
+    timeout: 0,
+    intent: Intent.PRIMARY,
+    onDismiss: _onDismiss
+  });

client/src/components/termsPrompt/index.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { connect } from "react-redux";
+import * as globals from "../../globals";
+import { termsOfServiceToast } from "../framework/toasters";
+
+const TosDismissedKey = "cxg.tosDismissed";
+
+function storageGet(key, defaultValue = null) {
+  try {
+    const val = window.localStorage.getItem(key);
+    if (val === null) return defaultValue;
+    return val;
+  } catch (e) {
+    return defaultValue;
+  }
+}
+
+function storageSet(key, value) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+    return;
+  }
+}
+
+@connect(state => ({
+  tosURL: state.config?.parameters?.about_legal_tos
+}))
+class TermsPrompt extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasDismissed: storageGet(TosDismissedKey, false)
+    };
+  }
+
+  componentDidMount() {
+    const { hasDismissed } = this.state;
+    const { tosURL } = this.props;
+    if (!hasDismissed && tosURL) {
+      this.popTermsToast();
+    }
+  }
+
+  onTermsToastDismissed = () => {
+    this.setState({ hasDismissed: "yes" });
+    storageSet(TosDismissedKey, "yes");
+  };
+
+  popTermsToast() {
+    const { tosURL } = this.props;
+    termsOfServiceToast(
+      <span>
+        By using our site, you are agreeing to our{" "}
+        <a
+          style={{
+            fontWeight: 700,
+            color: "white",
+            textDecoration: "underline"
+          }}
+          href={tosURL}
+          target="_blank"
+        >
+          Terms of Service
+        </a>
+      </span>,
+      this.onTermsToastDismissed
+    );
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default TermsPrompt;