From 94cc7a2d9d24d2da4b76e0278b35f7314a99c1ad Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Tue, 14 Jan 2020 09:57:34 -0500
Subject: [PATCH] review changes

---
 ui/component/commentCreate/view.jsx |   2 +-
 ui/component/header/view.jsx        |   6 +-
 ui/component/inviteNew/view.jsx     | 121 +++++++++++++++++-----------
 ui/component/invited/view.jsx       |  91 ++++++++++++---------
 ui/component/publishForm/view.jsx   |   7 +-
 ui/component/selectChannel/view.jsx |  49 +++++++++--
 ui/modal/modalSetReferrer/view.jsx  |   3 +-
 7 files changed, 176 insertions(+), 103 deletions(-)

diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx
index 7ae9da461..5f7f6e89a 100644
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@@ -59,7 +59,7 @@ export function CommentCreate(props: Props) {
 
   return (
     <Form onSubmit={handleSubmit}>
-      <ChannelSection channel={channel} onChannelChange={handleChannelChange} includeAnonymous includeNew />
+      <ChannelSection channel={channel} onChannelChange={handleChannelChange} />
       <FormField
         disabled={channel === CHANNEL_NEW}
         type="textarea"
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index d8f26c3e9..9ab0277e1 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -183,10 +183,10 @@ const Header = (props: Props) => {
                     </MenuItem>
 
                     {/* Commented out until new invite system is implemented */}
-                    {/* <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}>
+                    <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}>
                       <Icon aria-hidden icon={ICONS.INVITE} />
-                      {__('Invite A Friend')}
-                    </MenuItem> */}
+                      {__('Invites')}
+                    </MenuItem>
 
                     {authenticated ? (
                       <MenuItem onSelect={signOut}>
diff --git a/ui/component/inviteNew/view.jsx b/ui/component/inviteNew/view.jsx
index fc4e50c9d..697f1be38 100644
--- a/ui/component/inviteNew/view.jsx
+++ b/ui/component/inviteNew/view.jsx
@@ -15,7 +15,7 @@ type Props = {
   isPending: boolean,
   referralLink: string,
   referralCode: string,
-  channels: any,
+  channels: ?Array<ChannelClaim>,
   resolvingUris: Array<string>,
   resolveUris: (Array<string>) => void,
 };
@@ -41,8 +41,9 @@ function InviteNew(props: Props) {
   function handleReferralChange(code) {
     setReferralSource(code);
     // TODO: keep track of this in an array?
-    if (code !== referralCode) {
-      analytics.apiLogPublish(channels.find(ch => ch.name === code));
+    const matchingChannel = channels && channels.find(ch => ch.name === code);
+    if (matchingChannel) {
+      analytics.apiLogPublish(matchingChannel);
     }
   }
 
@@ -55,9 +56,11 @@ function InviteNew(props: Props) {
 
   const topChannel =
     channels &&
-    channels.reduce((top, channel) =>
-      (top && top.meta && top.meta.claims_in_channel) > channel.meta.claims_in_channel ? top : channel
-    );
+    channels.reduce((top, channel) => {
+      const topClaimCount = (top && top.meta && top.meta.claims_in_channel) || 0;
+      const currentClaimCount = (channel && channel.meta && channel.meta.claims_in_channel) || 0;
+      return topClaimCount >= currentClaimCount ? top : channel;
+    });
   const referralString =
     channels && channels.length && referralSource !== referralCode
       ? lookupUrlByClaimName(referralSource, channels)
@@ -67,7 +70,7 @@ function InviteNew(props: Props) {
 
   useEffect(() => {
     // resolve once, after we have channel list
-    if (!hasResolved && !resolveStarted && channelCount) {
+    if (!hasResolved && !resolveStarted && channelCount && uris) {
       setResolveStarted(true);
       resolveUris(uris.split(','));
     }
@@ -93,47 +96,71 @@ function InviteNew(props: Props) {
   }
 
   return (
-    <Card
-      title={__('Invite a Friend')}
-      subtitle={__('When your friends start using LBRY, the network gets stronger!')}
-      actions={
-        <React.Fragment>
-          <Form onSubmit={handleSubmit}>
-            <SelectChannel
-              channel={referralSource}
-              onChannelChange={channel => handleReferralChange(channel)}
-              label={'Code or Channel'}
-              injected={[referralCode]}
-            />
-
-            <CopyableText label={__('Or share this link with your friends')} copyable={referral} />
-            <FormField
-              type="text"
-              label="Email"
-              placeholder="youremail@example.org"
-              name="email"
-              value={email}
-              error={errorMessage}
-              inputButton={<Button button="secondary" type="submit" label="Invite" disabled={isPending || !email} />}
-              onChange={event => {
-                handleEmailChanged(event);
-              }}
-            />
-            <p className="help">
-              <I18nMessage
-                tokens={{
-                  rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
-                  referral_faq_link: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />,
+    <div className={'columns'}>
+      <Card
+        title={__('Refer by Email')}
+        subtitle={__('When your friends start using LBRY, the network gets stronger!')}
+        actions={
+          <React.Fragment>
+            <Form onSubmit={handleSubmit}>
+              <FormField
+                type="text"
+                label="Email"
+                placeholder="youremail@example.org"
+                name="email"
+                value={email}
+                error={errorMessage}
+                inputButton={<Button button="secondary" type="submit" label="Invite" disabled={isPending || !email} />}
+                onChange={event => {
+                  handleEmailChanged(event);
                 }}
-              >
-                Earn %rewards_link% for inviting your friends. Read our %referral_faq_link% to learn more about
-                referrals.
-              </I18nMessage>
-            </p>
-          </Form>
-        </React.Fragment>
-      }
-    />
+              />
+              <p className="help">
+                <I18nMessage
+                  tokens={{
+                    rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
+                    referral_faq_link: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />,
+                  }}
+                >
+                  Earn %rewards_link% for inviting your friends. Read our %referral_faq_link% to learn more about
+                  referrals.
+                </I18nMessage>
+              </p>
+            </Form>
+          </React.Fragment>
+        }
+      />
+      <Card
+        title={__('Referral Codes')}
+        subtitle={__('Users!')}
+        actions={
+          <React.Fragment>
+            <Form onSubmit={handleSubmit}>
+              <SelectChannel
+                channel={referralSource}
+                onChannelChange={channel => handleReferralChange(channel)}
+                label={'Code or Channel'}
+                hideNew
+                hideAnon
+                injected={[referralCode]}
+              />
+              <CopyableText label={__('Or share this link with your friends')} copyable={referral} />
+              <p className="help">
+                <I18nMessage
+                  tokens={{
+                    rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
+                    referral_faq_link: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />,
+                  }}
+                >
+                  Earn %rewards_link% for inviting your friends. Read our %referral_faq_link% to learn more about
+                  referrals.
+                </I18nMessage>
+              </p>
+            </Form>
+          </React.Fragment>
+        }
+      />
+    </div>
   );
 }
 
diff --git a/ui/component/invited/view.jsx b/ui/component/invited/view.jsx
index d64809f84..6a5c92285 100644
--- a/ui/component/invited/view.jsx
+++ b/ui/component/invited/view.jsx
@@ -71,19 +71,23 @@ function Invited(props: Props) {
   if (referrerSetError === ERRORS.ALREADY_CLAIMED) {
     return (
       <Card
-        title={__(`Welcome!`)}
-        subtitle={referrerIsChannel ? __(`We've followed your referrer for you. Check it out!`) : __(`Congrats!`)}
-        actions={
-          <>
-            {referrerIsChannel && (
-              <div key={refUri} className="claim-preview--channel">
-                <ClaimPreview key={refUri} uri={refUri} actions={''} type={'small'} />
-              </div>
-            )}
-            <div className="card__actions">
-              <Button button="primary" label={__('Done!')} onClick={handleDone} />
+        title={__(`Whoa`)}
+        subtitle={
+          referrerIsChannel
+            ? __(`You've already claimed your referrer, but we've followed this channel for you.`)
+            : __(`You've already claimed your referrer.`)
+        }
+        body={
+          referrerIsChannel && (
+            <div className="claim-preview--channel">
+              <ClaimPreview key={refUri} uri={refUri} actions={''} type={'small'} />
             </div>
-          </>
+          )
+        }
+        actions={
+          <div className="card__actions">
+            <Button button="primary" label={__('Done!')} onClick={handleDone} />
+          </div>
         }
       />
     );
@@ -102,10 +106,10 @@ function Invited(props: Props) {
             <div className="card__actions">
               <Button
                 button="primary"
-                label={hasVerifiedEmail ? __('Verify') : __('Sign in')}
+                label={hasVerifiedEmail ? __('Verify') : __('Create Account')}
                 navigate={`/$/${PAGES.AUTH}?redirect=/$/${PAGES.REWARDS}`}
               />
-              <Button button="primary" label={__('Explore')} onClick={handleDone} />
+              <Button button="link" label={__('Explore')} onClick={handleDone} />
             </div>
           </>
         }
@@ -117,23 +121,30 @@ function Invited(props: Props) {
     return (
       <Card
         title={__(`You're invited!`)}
-        subtitle={__(`A referral reward is waiting for you. Just complete sign-in to claim it.`)}
-        actions={
-          <>
-            {referrerIsChannel && (
-              <div key={refUri} className="claim-preview--channel">
-                <ClaimPreview key={refUri} uri={refUri} actions={''} type={'small'} />
-              </div>
-            )}
-            <div className="card__actions">
-              <Button
-                button="primary"
-                label={hasVerifiedEmail ? __('Verify') : __('Sign in')}
-                navigate={`/$/${PAGES.AUTH}?redirect=/$/${PAGES.INVITE}/${referrer}`}
-              />
-              <Button button="primary" label={__('Skip')} onClick={handleDone} />
+        subtitle={
+          referrerIsChannel
+            ? __(
+                `Content freedom and and a present from %channel_name% are waiting for you. Create an account to claim it.`,
+                { channel_name: referrer }
+              )
+            : __(`Content freedom and a present are waiting for you. Create an account to claim it.`)
+        }
+        body={
+          referrerIsChannel && (
+            <div className="claim-preview--channel">
+              <ClaimPreview key={refUri} uri={refUri} actions={''} type={'small'} />
             </div>
-          </>
+          )
+        }
+        actions={
+          <div className="card__actions">
+            <Button
+              button="primary"
+              label={hasVerifiedEmail ? __('Verify') : __('Create Account')}
+              navigate={`/$/${PAGES.AUTH}?redirect=/$/${PAGES.INVITE}/${referrer}`}
+            />
+            <Button button="link" label={__('Skip')} onClick={handleDone} />
+          </div>
         }
       />
     );
@@ -143,17 +154,17 @@ function Invited(props: Props) {
     <Card
       title={__(`Welcome!`)}
       subtitle={referrerIsChannel ? __(`We've followed your referrer for you. Check it out!`) : __(`Congrats!`)}
-      actions={
-        <>
-          {referrerIsChannel && (
-            <div key={refUri} className="claim-preview--channel">
-              <ClaimPreview key={refUri} uri={refUri} actions={''} type={'small'} />
-            </div>
-          )}
-          <div className="card__actions">
-            <Button button="primary" label={__('Done!')} onClick={handleDone} />
+      body={
+        referrerIsChannel && (
+          <div className="claim-preview--channel">
+            <ClaimPreview key={refUri} uri={refUri} actions={''} type={'small'} />
           </div>
-        </>
+        )
+      }
+      actions={
+        <div className="card__actions">
+          <Button button="primary" label={__('Done!')} onClick={handleDone} />
+        </div>
       }
     />
   );
diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx
index acf1875dd..880b3eb1a 100644
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@@ -165,12 +165,7 @@ function PublishForm(props: Props) {
         <Card
           actions={
             <React.Fragment>
-              <SelectChannel
-                channel={channel}
-                onChannelChange={channel => updatePublishForm({ channel })}
-                includeAnonymous
-                includeNew
-              />
+              <SelectChannel channel={channel} onChannelChange={channel => updatePublishForm({ channel })} />
               <p className="help">
                 {__('This is a username or handle that your content can be found under.')}{' '}
                 {__('Ex. @Marvel, @TheBeatles, @BooksByJoe')}
diff --git a/ui/component/selectChannel/view.jsx b/ui/component/selectChannel/view.jsx
index de4117024..8b3d95c63 100644
--- a/ui/component/selectChannel/view.jsx
+++ b/ui/component/selectChannel/view.jsx
@@ -14,11 +14,12 @@ type Props = {
   createChannel: (string, number) => Promise<any>,
   fetchChannelListMine: () => void,
   fetchingChannels: boolean,
-  emailVerified: boolean,
-  includeAnonymous?: boolean,
+  hideNew: boolean,
+  hideAnon: boolean,
   includeNew?: boolean,
   label?: string,
   injected?: Array<string>,
+  emailVerified: boolean,
 };
 
 type State = {
@@ -73,9 +74,47 @@ class ChannelSection extends React.PureComponent<Props, State> {
 
   render() {
     const channel = this.state.addingChannel ? 'new' : this.props.channel;
-    const { fetchingChannels, channels = [], includeAnonymous, includeNew, label, injected = [] } = this.props;
+    const { fetchingChannels, channels = [], hideNew, hideAnon, label, injected = [] } = this.props;
     const { addingChannel } = this.state;
 
+    if (hideNew) {
+      return (
+        <Fragment>
+          {fetchingChannels ? (
+            <BusyIndicator message="Updating channels" />
+          ) : (
+            <>
+              <FormField
+                name="channel"
+                label={label || __('Channel')}
+                type="select"
+                onChange={this.handleChannelChange}
+                value={channel}
+              >
+                {!hideAnon && <option value={CHANNEL_ANONYMOUS}>{__('Anonymous')}</option>}
+                {channels &&
+                  channels.map(({ name, claim_id: claimId }) => (
+                    <option key={claimId} value={name}>
+                      {name}
+                    </option>
+                  ))}
+                {injected &&
+                  injected.map(item => (
+                    <option key={item} value={item}>
+                      {item}
+                    </option>
+                  ))}
+              </FormField>
+              {addingChannel && (
+                <div className="section">
+                  <ChannelCreate onSuccess={this.handleChangeToNewChannel} />
+                </div>
+              )}
+            </>
+          )}
+        </Fragment>
+      );
+    }
     return (
       <Fragment>
         {fetchingChannels ? (
@@ -90,7 +129,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
                 onChange={this.handleChannelChange}
                 value={channel}
               >
-                {includeAnonymous && <option value={CHANNEL_ANONYMOUS}>{__('Anonymous')}</option>}
+                {!hideAnon && <option value={CHANNEL_ANONYMOUS}>{__('Anonymous')}</option>}
                 {channels &&
                   channels.map(({ name, claim_id: claimId }) => (
                     <option key={claimId} value={name}>
@@ -103,7 +142,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
                       {item}
                     </option>
                   ))}
-                {includeNew && <option value={CHANNEL_NEW}>{__('New channel...')}</option>}
+                <option value={CHANNEL_NEW}>{__('New channel...')}</option>}
               </FormField>
             </div>
             {addingChannel && (
diff --git a/ui/modal/modalSetReferrer/view.jsx b/ui/modal/modalSetReferrer/view.jsx
index 078cbd61c..202d07ef7 100644
--- a/ui/modal/modalSetReferrer/view.jsx
+++ b/ui/modal/modalSetReferrer/view.jsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { FormField, Form } from 'component/common/form';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
+import HelpLink from 'component/common/help-link';
 
 type Props = {
   closeModal: () => void,
@@ -49,7 +50,7 @@ class ModalSetReferrer extends React.PureComponent<Props, State> {
         <Form onSubmit={this.handleSubmit}>
           <p>
             {__('Tell us who referred you and get a reward!')}
-            <Button button="link" href="https://lbry.com/faq/referrals" label={__('?')} />.
+            <HelpLink href="https://lbry.com/faq/referrals" />.
           </p>
           <FormField
             autoFocus