From e5301dec04652e3cb7d2357aadd08860ad09eb9b Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 17 Nov 2020 14:10:14 -0500
Subject: [PATCH] move nudge to FileReactions and add src param to sign up
 redirects

---
 ui/component/button/view.jsx             | 11 ++++-
 ui/component/claimSupportButton/index.js |  2 -
 ui/component/claimSupportButton/view.jsx | 51 +++++-------------------
 ui/component/fileReactions/view.jsx      | 15 ++++++-
 ui/component/nudgeFloating/index.js      |  9 +++++
 ui/component/nudgeFloating/view.jsx      | 43 ++++++++++++++++++++
 ui/component/sideNavigation/view.jsx     |  2 +-
 ui/scss/component/_nudge.scss            |  2 +-
 8 files changed, 88 insertions(+), 47 deletions(-)
 create mode 100644 ui/component/nudgeFloating/index.js
 create mode 100644 ui/component/nudgeFloating/view.jsx

diff --git a/ui/component/button/view.jsx b/ui/component/button/view.jsx
index bce180c10..119e83fdf 100644
--- a/ui/component/button/view.jsx
+++ b/ui/component/button/view.jsx
@@ -27,6 +27,7 @@ type Props = {
   iconColor?: string,
   activeClass?: string,
   innerRef: ?any,
+  authSrc?: string,
   // Events
   onClick: ?(any) => any,
   onMouseEnter: ?(any) => any,
@@ -50,6 +51,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
     label,
     largestLabel,
     icon,
+
     // This should rarely be used. Regular buttons should just use `icon`
     // `iconRight` is used for the header (home) button with the LBRY icon and external links that are displayed inline
     iconRight,
@@ -67,6 +69,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
     myref,
     dispatch, // <button> doesn't know what to do with dispatch
     pathname,
+    authSrc,
     ...otherProps
   } = props;
 
@@ -172,13 +175,19 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
   }
 
   if (requiresAuth && !emailVerified) {
+    let redirectUrl = `/$/${PAGES.AUTH}?redirect=${pathname}`;
+
+    if (authSrc) {
+      redirectUrl += `&src=${authSrc}`;
+    }
+
     return (
       <NavLink
         exact
         onClick={e => {
           e.stopPropagation();
         }}
-        to={`/$/${PAGES.AUTH}?redirect=${pathname}`}
+        to={redirectUrl}
         title={title || defaultTooltip}
         disabled={disabled}
         className={combinedClassName}
diff --git a/ui/component/claimSupportButton/index.js b/ui/component/claimSupportButton/index.js
index e4209e596..9ac2d5c55 100644
--- a/ui/component/claimSupportButton/index.js
+++ b/ui/component/claimSupportButton/index.js
@@ -1,13 +1,11 @@
 import { connect } from 'react-redux';
 import { doOpenModal } from 'redux/actions/app';
-import { selectUser } from 'redux/selectors/user';
 import { makeSelectTagInClaimOrChannelForUri } from 'lbry-redux';
 import ClaimSupportButton from './view';
 
 const DISABLE_SUPPORT_TAG = 'disable-support';
 const select = (state, props) => ({
   disableSupport: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_SUPPORT_TAG)(state),
-  user: selectUser(state),
 });
 
 export default connect(select, {
diff --git a/ui/component/claimSupportButton/view.jsx b/ui/component/claimSupportButton/view.jsx
index 75405e88f..b30982410 100644
--- a/ui/component/claimSupportButton/view.jsx
+++ b/ui/component/claimSupportButton/view.jsx
@@ -4,60 +4,31 @@ import * as ICONS from 'constants/icons';
 import React from 'react';
 import classnames from 'classnames';
 import Button from 'component/button';
-import usePersistedState from 'effects/use-persisted-state';
 
 type Props = {
   uri: string,
   doOpenModal: (string, {}) => void,
   fileAction?: boolean,
   disableSupport: boolean,
-  user: ?User,
 };
 
 export default function ClaimSupportButton(props: Props) {
-  const { doOpenModal, uri, fileAction, disableSupport, user } = props;
-  const [showNudge, setShowNudge] = React.useState(false);
-  const [nudgeAcknowledged, setNudgeAcknowledged] = usePersistedState('nudge:support-acknowledge', false);
-  const emailVerified = user && user.has_verified_email;
-
-  React.useEffect(() => {
-    if (!emailVerified && !nudgeAcknowledged && fileAction) {
-      setShowNudge(true);
-    }
-  }, [emailVerified, nudgeAcknowledged, fileAction]);
+  const { doOpenModal, uri, fileAction, disableSupport } = props;
 
   if (disableSupport) {
     return null;
   }
 
   return (
-    <>
-      <Button
-        button={fileAction ? undefined : 'alt'}
-        className={classnames({ 'button--file-action': fileAction, 'button--highlighted': showNudge })}
-        icon={ICONS.LBC}
-        iconSize={fileAction ? 22 : undefined}
-        label={__('Support --[button to support a claim]--')}
-        requiresAuth={IS_WEB}
-        title={__('Support this claim')}
-        onClick={() => doOpenModal(MODALS.SEND_TIP, { uri, isSupport: true })}
-      />
-      {showNudge && (
-        <div className="nudge">
-          <div className="nudge__wrapper">
-            <span className="nudge__text">{__('Create an account to support this creator!')}</span>
-            <Button
-              className="nudge__close"
-              button="close"
-              icon={ICONS.REMOVE}
-              onClick={() => {
-                setNudgeAcknowledged(true);
-                setShowNudge(false);
-              }}
-            />
-          </div>
-        </div>
-      )}
-    </>
+    <Button
+      button={fileAction ? undefined : 'alt'}
+      className={classnames({ 'button--file-action': fileAction })}
+      icon={ICONS.LBC}
+      iconSize={fileAction ? 22 : undefined}
+      label={__('Support --[button to support a claim]--')}
+      requiresAuth={IS_WEB}
+      title={__('Support this claim')}
+      onClick={() => doOpenModal(MODALS.SEND_TIP, { uri, isSupport: true })}
+    />
   );
 }
diff --git a/ui/component/fileReactions/view.jsx b/ui/component/fileReactions/view.jsx
index 4a8877c29..9c196f1fe 100644
--- a/ui/component/fileReactions/view.jsx
+++ b/ui/component/fileReactions/view.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 import classnames from 'classnames';
 import Button from 'component/button';
 import { formatNumberWithCommas } from 'util/number';
+import NudgeFloating from 'component/nudgeFloating';
 
 type Props = {
   claim: StreamClaim,
@@ -19,6 +20,7 @@ type Props = {
 function FileReactions(props: Props) {
   const { claim, uri, doFetchReactions, doReactionLike, doReactionDislike, likeCount, dislikeCount } = props;
   const claimId = claim && claim.claim_id;
+  const channel = claim && claim.signing_channel && claim.signing_channel.name;
 
   React.useEffect(() => {
     if (claimId) {
@@ -28,9 +30,17 @@ function FileReactions(props: Props) {
 
   return (
     <>
+      {channel && (
+        <NudgeFloating
+          name="nudge:support-acknowledge"
+          text={__('Let %channel% know you enjoyed this!', { channel })}
+        />
+      )}
+
       <Button
         title={__('I like this')}
-        requiresAuth
+        requiresAuth={IS_WEB}
+        authSrc="filereaction_like"
         className={classnames('button--file-action')}
         label={formatNumberWithCommas(likeCount)}
         iconSize={18}
@@ -38,7 +48,8 @@ function FileReactions(props: Props) {
         onClick={() => doReactionLike(uri)}
       />
       <Button
-        requiresAuth
+        requiresAuth={IS_WEB}
+        authSrc={'filereaction_dislike'}
         title={__('I dislike this')}
         className={classnames('button--file-action')}
         label={formatNumberWithCommas(dislikeCount)}
diff --git a/ui/component/nudgeFloating/index.js b/ui/component/nudgeFloating/index.js
new file mode 100644
index 000000000..513df76b9
--- /dev/null
+++ b/ui/component/nudgeFloating/index.js
@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { selectUser } from 'redux/selectors/user';
+import NudgeFloating from './view';
+
+const select = state => ({
+  user: selectUser(state),
+});
+
+export default connect(select)(NudgeFloating);
diff --git a/ui/component/nudgeFloating/view.jsx b/ui/component/nudgeFloating/view.jsx
new file mode 100644
index 000000000..3811badec
--- /dev/null
+++ b/ui/component/nudgeFloating/view.jsx
@@ -0,0 +1,43 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import React from 'react';
+import usePersistedState from 'effects/use-persisted-state';
+import Button from 'component/button';
+
+type Props = {
+  user: ?User,
+  name: string,
+  text: string,
+};
+
+export default function NudgeFloating(props: Props) {
+  const { user, name, text } = props;
+  const [showNudge, setShowNudge] = React.useState(false);
+  const [nudgeAcknowledged, setNudgeAcknowledged] = usePersistedState(name, false);
+  const emailVerified = user && user.has_verified_email;
+
+  React.useEffect(() => {
+    if (!emailVerified && !nudgeAcknowledged) {
+      setShowNudge(true);
+    }
+  }, [emailVerified, nudgeAcknowledged]);
+
+  return (
+    showNudge && (
+      <div className="nudge">
+        <div className="nudge__wrapper">
+          <span className="nudge__text">{text}</span>
+          <Button
+            className="nudge__close"
+            button="close"
+            icon={ICONS.REMOVE}
+            onClick={() => {
+              setNudgeAcknowledged(true);
+              setShowNudge(false);
+            }}
+          />
+        </div>
+      </div>
+    )
+  );
+}
diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx
index 9e257a7e7..871d512d4 100644
--- a/ui/component/sideNavigation/view.jsx
+++ b/ui/component/sideNavigation/view.jsx
@@ -288,7 +288,7 @@ function SideNavigation(props: Props) {
           Sign up to earn %lbc% for you and your favorite creators.
         </I18nMessage>
       </span>
-      <Button button="secondary" label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} />
+      <Button button="secondary" label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}?src=sidenav_nudge`} />
     </div>
   );
 
diff --git a/ui/scss/component/_nudge.scss b/ui/scss/component/_nudge.scss
index b03f6edc8..551b1adde 100644
--- a/ui/scss/component/_nudge.scss
+++ b/ui/scss/component/_nudge.scss
@@ -27,7 +27,7 @@
     height: 1rem;
     width: 1rem;
     top: -0.5rem;
-    left: 3rem;
+    left: 1rem;
     transform: rotate(45deg);
     background-color: var(--color-secondary);
   }