From 96b1d6257e402bd5df9288a05f9e287a29cfc6d5 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 25 Dec 2018 17:12:37 -0800
Subject: [PATCH] Added: Dashboard help tip

---
 app/components/Tip.js       | 59 +++++++++++++++++++++++++++++++++++
 app/components/TipInvite.js | 62 +++++++++++++++++++++++++++++++++++++
 app/scenes/Dashboard.js     |  4 ++-
 3 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 app/components/Tip.js
 create mode 100644 app/components/TipInvite.js

diff --git a/app/components/Tip.js b/app/components/Tip.js
new file mode 100644
index 000000000..89e5d79d1
--- /dev/null
+++ b/app/components/Tip.js
@@ -0,0 +1,59 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { CloseIcon } from 'outline-icons';
+import Button from './Button';
+import Tooltip from './Tooltip';
+import Flex from 'shared/components/Flex';
+
+type Props = {
+  id: string,
+  children: React.Node,
+};
+
+type State = {
+  isHidden: boolean,
+};
+
+class Tip extends React.Component<Props, State> {
+  state = {
+    isHidden: window.localStorage.getItem(this.storageId) === 'hidden',
+  };
+
+  get storageId() {
+    return `tip-${this.props.id}`;
+  }
+
+  hide = () => {
+    window.localStorage.setItem(this.storageId, 'hidden');
+    this.setState({ isHidden: true });
+  };
+
+  render() {
+    const { children } = this.props;
+    if (this.state.isHidden) return null;
+
+    return (
+      <Wrapper align="center">
+        <span>{children}</span>
+
+        <Tooltip tooltip="Hide this message" placement="bottom">
+          <Button
+            onClick={this.hide}
+            icon={<CloseIcon type="close" size={32} color="#FFF" />}
+          />
+        </Tooltip>
+      </Wrapper>
+    );
+  }
+}
+
+const Wrapper = styled(Flex)`
+  background: ${props => props.theme.primary};
+  color: ${props => props.theme.text};
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-weight: 400;
+`;
+
+export default Tip;
diff --git a/app/components/TipInvite.js b/app/components/TipInvite.js
new file mode 100644
index 000000000..e252c698e
--- /dev/null
+++ b/app/components/TipInvite.js
@@ -0,0 +1,62 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import Tip from './Tip';
+import CopyToClipboard from './CopyToClipboard';
+import Team from '../models/Team';
+
+type Props = {
+  team: Team,
+};
+
+type State = {
+  linkCopied: boolean,
+};
+
+class TipInvite extends React.Component<Props, State> {
+  state = {
+    linkCopied: false,
+  };
+
+  handleCopy = () => {
+    this.setState({ linkCopied: true });
+  };
+
+  render() {
+    const { team } = this.props;
+
+    return (
+      <Tip id="subdomain-invite">
+        <Heading>Looking to invite your team?</Heading>
+        <Paragraph>
+          Your teammates can sign in with{' '}
+          {team.slackConnected ? 'Slack' : 'Google'} to join this knowledgebase
+          at your team’s own subdomain ({team.url.replace(/^https?:\/\//, '')})
+          –{' '}
+          <CopyToClipboard text={team.url} onCopy={this.handleCopy}>
+            <a>
+              {this.state.linkCopied
+                ? 'link copied to clipboard!'
+                : 'copy a link to share.'}
+            </a>
+          </CopyToClipboard>
+        </Paragraph>
+      </Tip>
+    );
+  }
+}
+
+const Heading = styled.h3`
+  margin: 0.25em 0 0.5em 0;
+`;
+
+const Paragraph = styled.p`
+  margin: 0.25em 0;
+
+  a {
+    color: ${props => props.theme.text};
+    text-decoration: underline;
+  }
+`;
+
+export default TipInvite;
diff --git a/app/scenes/Dashboard.js b/app/scenes/Dashboard.js
index 2e5f2cc4f..7ab1019f7 100644
--- a/app/scenes/Dashboard.js
+++ b/app/scenes/Dashboard.js
@@ -12,6 +12,7 @@ import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 import Tabs from 'components/Tabs';
 import Tab from 'components/Tab';
+import TipInvite from 'components/TipInvite';
 import PaginatedDocumentList from '../components/PaginatedDocumentList';
 
 type Props = {
@@ -23,11 +24,12 @@ type Props = {
 class Dashboard extends React.Component<Props> {
   render() {
     const { documents, auth } = this.props;
-    if (!auth.user) return null;
+    if (!auth.user || !auth.team) return null;
     const user = auth.user.id;
 
     return (
       <CenteredContent>
+        {auth.team.subdomain && <TipInvite team={auth.team} />}
         <PageTitle title="Home" />
         <h1>Home</h1>
         <Tabs>