From e9700f24af0ee702390b3ff98c0475de95d0a5a4 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 5 Dec 2019 00:24:54 -0500
Subject: [PATCH] add youtube welcome message

---
 ui/component/app/view.jsx             |  7 +++++++
 ui/component/youtubeWelcome/index.js  | 10 ++++++++++
 ui/component/youtubeWelcome/view.jsx  | 24 ++++++++++++++++++++++++
 ui/constants/modal_types.js           |  1 +
 ui/modal/modalRouter/view.jsx         |  3 +++
 ui/modal/modalYoutubeWelcome/index.js | 14 ++++++++++++++
 ui/modal/modalYoutubeWelcome/view.jsx | 27 +++++++++++++++++++++++++++
 7 files changed, 86 insertions(+)
 create mode 100644 ui/component/youtubeWelcome/index.js
 create mode 100644 ui/component/youtubeWelcome/view.jsx
 create mode 100644 ui/modal/modalYoutubeWelcome/index.js
 create mode 100644 ui/modal/modalYoutubeWelcome/view.jsx

diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx
index e7c286e67..a8343348e 100644
--- a/ui/component/app/view.jsx
+++ b/ui/component/app/view.jsx
@@ -15,6 +15,9 @@ import FileViewer from 'component/fileViewer';
 import { withRouter } from 'react-router';
 import usePrevious from 'effects/use-previous';
 import Button from 'component/button';
+// @if TARGET='web'
+import YoutubeWelcome from 'component/youtubeWelcome';
+// @endif
 
 export const MAIN_WRAPPER_CLASS = 'main-wrapper';
 // @if TARGET='app'
@@ -194,6 +197,10 @@ function App(props: Props) {
       <ModalRouter />
       <FileViewer pageUri={uri} />
 
+      {/* @if TARGET='web' */}
+      <YoutubeWelcome />
+      {/* @endif */}
+
       {/* @if TARGET='app' */}
       {showUpgradeButton && (
         <div className="snack-bar--upgrade">
diff --git a/ui/component/youtubeWelcome/index.js b/ui/component/youtubeWelcome/index.js
new file mode 100644
index 000000000..f05d0ad7f
--- /dev/null
+++ b/ui/component/youtubeWelcome/index.js
@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { doOpenModal } from 'redux/actions/app';
+import YoutubeWelcome from './view';
+
+export default connect(
+  null,
+  {
+    doOpenModal,
+  }
+)(YoutubeWelcome);
diff --git a/ui/component/youtubeWelcome/view.jsx b/ui/component/youtubeWelcome/view.jsx
new file mode 100644
index 000000000..e149d6719
--- /dev/null
+++ b/ui/component/youtubeWelcome/view.jsx
@@ -0,0 +1,24 @@
+// @flow
+import * as MODALS from 'constants/modal_types';
+import React from 'react';
+import usePersistedState from 'effects/use-persisted-state';
+
+type Props = { doOpenModal: string => void };
+
+const YoutubeWelcome = (props: Props) => {
+  const { doOpenModal } = props;
+  const [hasBeenShownIntro, setHasBeenShownIntro] = usePersistedState('youtube-welcome', false);
+  const isYouTubeReferrer = document.referrer.includes('youtube.com');
+  const shouldShowWelcome = !hasBeenShownIntro && isYouTubeReferrer;
+
+  React.useEffect(() => {
+    if (shouldShowWelcome) {
+      doOpenModal(MODALS.YOUTUBE_WELCOME);
+      setHasBeenShownIntro(true);
+    }
+  }, [shouldShowWelcome, setHasBeenShownIntro, doOpenModal]);
+
+  return null;
+};
+
+export default YoutubeWelcome;
diff --git a/ui/constants/modal_types.js b/ui/constants/modal_types.js
index 9c63b9957..a082e000f 100644
--- a/ui/constants/modal_types.js
+++ b/ui/constants/modal_types.js
@@ -31,3 +31,4 @@ export const WALLET_SYNC = 'wallet_sync';
 export const WALLET_PASSWORD_UNSAVE = 'wallet_password_unsave';
 export const WALLET_SEND = 'wallet_send';
 export const WALLET_RECEIVE = 'wallet_receive';
+export const YOUTUBE_WELCOME = 'youtube_welcome';
diff --git a/ui/modal/modalRouter/view.jsx b/ui/modal/modalRouter/view.jsx
index 0016b72b4..8f7a7a748 100644
--- a/ui/modal/modalRouter/view.jsx
+++ b/ui/modal/modalRouter/view.jsx
@@ -29,6 +29,7 @@ import ModalPasswordUnsave from 'modal/modalPasswordUnsave';
 import ModalCommentAcknowledgement from 'modal/modalCommentAcknowledgement';
 import ModalWalletSend from 'modal/modalWalletSend';
 import ModalWalletReceive from 'modal/modalWalletReceive';
+import ModalYoutubeWelcome from 'modal/modalYoutubeWelcome';
 
 type Props = {
   modal: { id: string, modalProps: {} },
@@ -105,6 +106,8 @@ function ModalRouter(props: Props) {
       return <ModalWalletSend {...modalProps} />;
     case MODALS.WALLET_RECEIVE:
       return <ModalWalletReceive {...modalProps} />;
+    case MODALS.YOUTUBE_WELCOME:
+      return <ModalYoutubeWelcome />;
     default:
       return null;
   }
diff --git a/ui/modal/modalYoutubeWelcome/index.js b/ui/modal/modalYoutubeWelcome/index.js
new file mode 100644
index 000000000..fe7889090
--- /dev/null
+++ b/ui/modal/modalYoutubeWelcome/index.js
@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
+import WalletSend from './view';
+
+const select = state => ({});
+
+const perform = {
+  doHideModal,
+};
+
+export default connect(
+  select,
+  perform
+)(WalletSend);
diff --git a/ui/modal/modalYoutubeWelcome/view.jsx b/ui/modal/modalYoutubeWelcome/view.jsx
new file mode 100644
index 000000000..4898b2b7c
--- /dev/null
+++ b/ui/modal/modalYoutubeWelcome/view.jsx
@@ -0,0 +1,27 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import Card from 'component/common/card';
+import Confetti from 'react-confetti';
+import Button from 'component/button';
+
+type Props = { doHideModal: () => void };
+
+const YoutubeWelcome = (props: Props) => {
+  const { doHideModal } = props;
+
+  return (
+    <Modal isOpen type="card" onAborted={doHideModal}>
+      <Confetti recycle={false} style={{ position: 'fixed' }} numberOfPieces={100} />
+      <Card
+        title={__('Welcome To The Promise Land')}
+        subtitle={__(
+          'Looks like you are coming from YouTube, some funny pun or something that introduces them to LBRY.'
+        )}
+        actions={<Button button="primary" label={__('Get To The Goods')} onClick={doHideModal} />}
+      />
+    </Modal>
+  );
+};
+
+export default YoutubeWelcome;