From 6843d5ca07c28ce4a0228894c4819d9764b0d8f8 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 1 Oct 2019 13:50:34 -0400
Subject: [PATCH] fix: deal with youtube channels that are queued to sync but
 haven't started yet

---
 src/ui/component/header/view.jsx              |  6 ++
 src/ui/component/userSignIn/view.jsx          | 21 ++++--
 .../component/youtubeTransferStatus/view.jsx  | 52 +++++++++++---
 .../component/youtubeTransferWelcome/index.js | 25 -------
 .../component/youtubeTransferWelcome/view.jsx | 72 -------------------
 src/ui/page/channels/view.jsx                 |  2 +-
 src/ui/scss/component/_card.scss              |  5 ++
 src/ui/scss/component/_main.scss              |  4 ++
 src/ui/scss/component/section.scss            |  2 +-
 static/app-strings.json                       | 24 ++++++-
 10 files changed, 98 insertions(+), 115 deletions(-)
 delete mode 100644 src/ui/component/youtubeTransferWelcome/index.js
 delete mode 100644 src/ui/component/youtubeTransferWelcome/view.jsx

diff --git a/src/ui/component/header/view.jsx b/src/ui/component/header/view.jsx
index af57ab392..cada976a8 100644
--- a/src/ui/component/header/view.jsx
+++ b/src/ui/component/header/view.jsx
@@ -71,6 +71,12 @@ const Header = (props: Props) => {
             icon={ICONS.LBRY}
             navigate="/"
           />
+          <Button
+            className="header__navigation-item header__navigation-item--lbry"
+            label={__('auth')}
+            icon={ICONS.LBRY}
+            navigate="/$/signin"
+          />
 
           {/* @if TARGET='app' */}
           {!minimal && (
diff --git a/src/ui/component/userSignIn/view.jsx b/src/ui/component/userSignIn/view.jsx
index a422f2709..a029d43fd 100644
--- a/src/ui/component/userSignIn/view.jsx
+++ b/src/ui/component/userSignIn/view.jsx
@@ -8,9 +8,10 @@ import { DEFAULT_BID_FOR_FIRST_CHANNEL } from 'component/userFirstChannel/view';
 import { rewards as REWARDS, YOUTUBE_STATUSES } from 'lbryinc';
 import UserVerify from 'component/userVerify';
 import Spinner from 'component/spinner';
-import YoutubeTransferWelcome from 'component/youtubeTransferWelcome';
+import YoutubeTransferStatus from 'component/youtubeTransferStatus';
 import SyncPassword from 'component/syncPassword';
 import useFetched from 'effects/use-fetched';
+import Confetti from 'react-confetti';
 
 type Props = {
   user: ?User,
@@ -59,9 +60,12 @@ function UserSignIn(props: Props) {
   const channelCount = channels ? channels.length : 0;
   const hasClaimedEmailAward = claimedRewards.some(reward => reward.reward_type === REWARDS.TYPE_CONFIRM_EMAIL);
   const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
-  const hasTransferrableYoutubeChannels = hasYoutubeChannels && youtubeChannels.some(channel => channel.transferable);
-  const hasPendingYoutubeTransfer =
-    hasYoutubeChannels && youtubeChannels.some(channel => channel.transfer_state === YOUTUBE_STATUSES.PENDING_TRANSFER);
+  // const hasTransferrableYoutubeChannels = hasYoutubeChannels && youtubeChannels.some(channel => channel.transferable);
+  // const hasPendingYoutubeTransfer =
+  //   hasYoutubeChannels && youtubeChannels.some(channel => channel.transfer_state === YOUTUBE_STATUSES.PENDING_TRANSFER);
+  const isYoutubeTransferComplete =
+    hasYoutubeChannels &&
+    youtubeChannels.every(channel => channel.transfer_state === YOUTUBE_STATUSES.COMPLETED_TRANSFER);
 
   // Complexity warning
   // We can't just check if we are currently fetching something
@@ -81,8 +85,7 @@ function UserSignIn(props: Props) {
   const showSyncPassword = syncEnabled && getSyncError && !hasSynced;
   const showChannelCreation =
     hasVerifiedEmail && balance && balance > DEFAULT_BID_FOR_FIRST_CHANNEL && channelCount === 0 && !hasYoutubeChannels;
-  const showYoutubeTransfer =
-    hasVerifiedEmail && hasYoutubeChannels && (hasTransferrableYoutubeChannels || hasPendingYoutubeTransfer);
+  const showYoutubeTransfer = hasVerifiedEmail && hasYoutubeChannels && !isYoutubeTransferComplete;
   const showLoadingSpinner =
     canHijackSignInFlowWithSpinner && (isCurrentlyFetchingSomething || isWaitingForSomethingToFinish);
 
@@ -109,7 +112,11 @@ function UserSignIn(props: Props) {
     showSyncPassword && <SyncPassword />,
     showChannelCreation && <UserFirstChannel />,
     // @if TARGET='app'
-    showYoutubeTransfer && <YoutubeTransferWelcome />,
+    showYoutubeTransfer && (
+      <div>
+        <YoutubeTransferStatus /> <Confetti recycle={false} style={{ position: 'fixed' }} />
+      </div>
+    ),
     // @endif
     showLoadingSpinner && (
       <div className="main--empty">
diff --git a/src/ui/component/youtubeTransferStatus/view.jsx b/src/ui/component/youtubeTransferStatus/view.jsx
index 421eba975..3d46ab64a 100644
--- a/src/ui/component/youtubeTransferStatus/view.jsx
+++ b/src/ui/component/youtubeTransferStatus/view.jsx
@@ -1,10 +1,14 @@
 // @flow
+import * as PAGES from 'constants/pages';
 import * as React from 'react';
 import Button from 'component/button';
 import ClaimPreview from 'component/claimPreview';
 import Card from 'component/common/card';
 import { YOUTUBE_STATUSES } from 'lbryinc';
 import { buildURI } from 'lbry-redux';
+import I18nMessage from 'component/i18nMessage';
+
+const STATUS_URL = 'https://lbry.com/youtube/status/';
 
 type Props = {
   youtubeChannels: Array<any>,
@@ -13,6 +17,7 @@ type Props = {
   updateUser: () => void,
   checkYoutubeTransfer: () => void,
   videosImported: ?Array<number>, // [currentAmountImported, totalAmountToImport]
+  hideChannelLink: boolean,
 };
 
 export default function YoutubeTransferStatus(props: Props) {
@@ -23,13 +28,15 @@ export default function YoutubeTransferStatus(props: Props) {
     videosImported,
     checkYoutubeTransfer,
     updateUser,
+    hideChannelLink = false,
   } = props;
   const hasChannels = youtubeChannels && youtubeChannels.length;
-
   const transferEnabled = youtubeChannels.some(status => status.transferable);
   const hasPendingTransfers = youtubeChannels.some(
     status => status.transfer_state === YOUTUBE_STATUSES.PENDING_TRANSFER
   );
+  const isYoutubeTransferComplete =
+    hasChannels && youtubeChannels.every(channel => channel.transfer_state === YOUTUBE_STATUSES.COMPLETED_TRANSFER);
 
   let total;
   let complete;
@@ -72,26 +79,49 @@ export default function YoutubeTransferStatus(props: Props) {
 
   return (
     hasChannels &&
-    (hasPendingTransfers || transferEnabled) && (
+    !isYoutubeTransferComplete && (
       <div>
         <Card
           title={youtubeChannels.length > 1 ? __('Your YouTube Channels') : __('Your YouTube Channel')}
           subtitle={
             <span>
-              {hasPendingTransfers
-                ? __('Your videos are currently being transferred. There is nothing else for you to do.')
-                : __('Your videos are ready to be transferred.')}
+              {hasPendingTransfers &&
+                __('Your videos are currently being transferred. There is nothing else for you to do.')}
+              {transferEnabled && !hasPendingTransfers && __('Your videos are ready to be transferred.')}
+              {!transferEnabled && !hasPendingTransfers && __('Please check back later.')}
             </span>
           }
           body={
             <section>
               {youtubeChannels.map((channel, index) => {
-                const { lbry_channel_name: channelName, channel_claim_id: claimId } = channel;
+                const {
+                  lbry_channel_name: channelName,
+                  channel_claim_id: claimId,
+                  status_token: statusToken,
+                } = channel;
                 const url = buildURI({ channelName, channelClaimId: claimId });
                 const transferState = getMessage(channel);
                 return (
                   <div key={url} className="card--inline">
-                    <ClaimPreview uri={url} actions={<span className="help">{transferState}</span>} properties={''} />
+                    {claimId ? (
+                      <ClaimPreview
+                        uri={url}
+                        actions={<span className="help">{transferState}</span>}
+                        properties={false}
+                      />
+                    ) : (
+                      <p className="section--padded">
+                        <I18nMessage
+                          tokens={{
+                            statusLink: <Button button="link" href={STATUS_URL + statusToken} label={__('here')} />,
+                            channelName,
+                          }}
+                        >
+                          %channelName% is not ready to be transferred. You can check the status %statusLink% or check
+                          back later.
+                        </I18nMessage>
+                      </p>
+                    )}
                   </div>
                 );
               })}
@@ -101,7 +131,7 @@ export default function YoutubeTransferStatus(props: Props) {
             </section>
           }
           actions={
-            transferEnabled && (
+            transferEnabled ? (
               <div className="card__actions">
                 <Button
                   button="primary"
@@ -111,6 +141,12 @@ export default function YoutubeTransferStatus(props: Props) {
                 />
                 <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/youtube#transfer" />
               </div>
+            ) : !hideChannelLink ? (
+              <div className="card__actions">
+                <Button button="primary" navigate={`/$/${PAGES.CHANNELS}`} label={__('View Your Channels')} />
+              </div>
+            ) : (
+              false
             )
           }
         />
diff --git a/src/ui/component/youtubeTransferWelcome/index.js b/src/ui/component/youtubeTransferWelcome/index.js
deleted file mode 100644
index c61bb8514..000000000
--- a/src/ui/component/youtubeTransferWelcome/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  selectYoutubeChannels,
-  selectYouTubeImportPending,
-  selectUserIsPending,
-  doClaimYoutubeChannels,
-  doUserFetch,
-} from 'lbryinc';
-import YoutubeChannelList from './view';
-
-const select = state => ({
-  youtubeChannels: selectYoutubeChannels(state),
-  youtubeImportPending: selectYouTubeImportPending(state),
-  userFetchPending: selectUserIsPending(state),
-});
-
-const perform = dispatch => ({
-  claimChannels: () => dispatch(doClaimYoutubeChannels()),
-  updateUser: () => dispatch(doUserFetch()),
-});
-
-export default connect(
-  select,
-  perform
-)(YoutubeChannelList);
diff --git a/src/ui/component/youtubeTransferWelcome/view.jsx b/src/ui/component/youtubeTransferWelcome/view.jsx
deleted file mode 100644
index 6a7692e60..000000000
--- a/src/ui/component/youtubeTransferWelcome/view.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// @flow
-import * as PAGES from 'constants/pages';
-import React from 'react';
-import classnames from 'classnames';
-import ClaimPreview from 'component/claimPreview';
-import Button from 'component/button';
-import Confetti from 'react-confetti';
-import { YOUTUBE_STATUSES } from 'lbryinc';
-
-type Props = {
-  youtubeChannels: Array<{ lbry_channel_name: string, channel_claim_id: string, transfer_state: string }>,
-  claimChannels: () => void,
-};
-
-export default function UserYoutubeTransfer(props: Props) {
-  const { youtubeChannels, claimChannels } = props;
-  const hasYoutubeChannels = youtubeChannels && youtubeChannels.length;
-  const hasPendingYoutubeTransfer =
-    hasYoutubeChannels && youtubeChannels.some(channel => channel.transfer_state === YOUTUBE_STATUSES.PENDING_TRANSFER);
-
-  return (
-    <div>
-      <div className="section__header">
-        {!hasPendingYoutubeTransfer ? (
-          <React.Fragment>
-            <h1 className="section__title--large">{__('Welcome back!')}</h1>
-            <p className="section__subtitle">{__('Your channel is ready to be sent over.')}</p>
-          </React.Fragment>
-        ) : (
-          <React.Fragment>
-            <h1 className="section__title--large">{__('Good To Go!')}</h1>
-            <p className="section__subtitle">
-              {__('You now control your channel and your videos are being transferred to your account.')}
-            </p>
-          </React.Fragment>
-        )}
-      </div>
-
-      <section className="section">
-        {youtubeChannels.map(({ lbry_channel_name: channelName, channel_claim_id: claimId }) => (
-          <div key={channelName} className={classnames('card--inline')}>
-            <ClaimPreview disabled onClick={() => {}} actions={false} uri={`lbry://${channelName}#${claimId}`} />
-          </div>
-        ))}
-      </section>
-
-      {hasPendingYoutubeTransfer ? (
-        <section className="section">
-          <h1 className="section__title">{__('Transfer In Progress...')}</h1>
-          <p className="section__subtitle">{__('You can now publish and comment using your official channel.')}</p>
-
-          <div className="card__actions">
-            <Button
-              button="primary"
-              label={youtubeChannels.length > 1 ? __('View Your Channels') : __('View Your Channel')}
-              navigate={`/$/${PAGES.CHANNELS}`}
-            />
-          </div>
-        </section>
-      ) : (
-        <section className="section">
-          <h1 className="section__title">{__('Begin Transfer')}</h1>
-          <div className="section__actions">
-            <Button button="primary" label={__('Transfer')} onClick={claimChannels} />
-          </div>
-        </section>
-      )}
-
-      {hasPendingYoutubeTransfer && <Confetti recycle={false} style={{ position: 'fixed' }} />}
-    </div>
-  );
-}
diff --git a/src/ui/page/channels/view.jsx b/src/ui/page/channels/view.jsx
index c27ebfc0e..cf5e05748 100644
--- a/src/ui/page/channels/view.jsx
+++ b/src/ui/page/channels/view.jsx
@@ -23,7 +23,7 @@ export default function ChannelsPage(props: Props) {
   return (
     <Page>
       {/* @if TARGET='app' */}
-      {hasYoutubeChannels && <YoutubeTransferStatus />}
+      {hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
       {/* @endif */}
 
       {channels && channels.length ? (
diff --git a/src/ui/scss/component/_card.scss b/src/ui/scss/component/_card.scss
index 0eb742ed2..384fb0d6d 100644
--- a/src/ui/scss/component/_card.scss
+++ b/src/ui/scss/component/_card.scss
@@ -40,6 +40,11 @@
 .card--inline {
   border: 1px solid $lbry-gray-1;
   border-radius: var(--card-radius);
+  margin-bottom: var(--spacing-medium);
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 
   [data-mode='dark'] & {
     border-color: var(--dm-color-03);
diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss
index c4b2f9b12..85f999ecd 100644
--- a/src/ui/scss/component/_main.scss
+++ b/src/ui/scss/component/_main.scss
@@ -74,6 +74,10 @@
   align-items: flex-start;
   max-width: 40rem;
   text-align: left;
+
+  & > * {
+    width: 100%;
+  }
 }
 
 .main--full-width {
diff --git a/src/ui/scss/component/section.scss b/src/ui/scss/component/section.scss
index da895cea0..a1ab8abfb 100644
--- a/src/ui/scss/component/section.scss
+++ b/src/ui/scss/component/section.scss
@@ -7,7 +7,7 @@
 }
 
 .section--padded {
-  padding: var(--spacing-large);
+  padding: var(--spacing-medium);
 }
 
 .section--small {
diff --git a/static/app-strings.json b/static/app-strings.json
index e3c4aefa8..e4968bddb 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -746,5 +746,27 @@
   "Transfer in progress": "Transfer in progress",
   "%complete% / %total% videos transferred": "%complete% / %total% videos transferred",
   "Available Rewards": "Available Rewards",
-  "You have %credit_amount% in unclaimed rewards.": "You have %credit_amount% in unclaimed rewards."
+  "You have %credit_amount% in unclaimed rewards.": "You have %credit_amount% in unclaimed rewards.",
+  "No Channels Created Yet": "No Channels Created Yet",
+  "Create A Channel": "Create A Channel",
+  "Something about it not being here": "Something about it not being here",
+  "%channelName% is not ready to be transferred. Please check back later.": "%channelName% is not ready to be transferred. Please check back later.",
+  "Here": "Here",
+  "'%channelName% is not ready to be transferred. You can check the status %link% or check back later.": "'%channelName% is not ready to be transferred. You can check the status %link% or check back later.",
+  "%channelName% is not ready to be transferred. You can check the status %link% or check back later.": "%channelName% is not ready to be transferred. You can check the status %link% or check back later.",
+  "here": "here",
+  "Live help is available most hours in the %channel% channel of our Discord chat room. Or you can always email us at help@lbry.com.": "Live help is available most hours in the %channel% channel of our Discord chat room. Or you can always email us at help@lbry.com.",
+  "Your LBRY credits are controllable by you and only you, via a wallet file stored locally on your computer.": "Your LBRY credits are controllable by you and only you, via a wallet file stored locally on your computer.",
+  "However, it is easy to back up manually. To backup your wallet, make a copy of the folder listed below:": "However, it is easy to back up manually. To backup your wallet, make a copy of the folder listed below:",
+  "Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place. For more details on backing up and best practices %helpLink%.": "Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place. For more details on backing up and best practices %helpLink%.",
+  "%channelName% is not ready to be transferred. You can check the status %statusLink% or check back later.": "%channelName% is not ready to be transferred. You can check the status %statusLink% or check back later.",
+  "Your videos are ready to be transferred.": "Your videos are ready to be transferred.",
+  "Ready to transfer": "Ready to transfer",
+  "Claim Channels": "Claim Channels",
+  "Please check back later": "Please check back later",
+  "Your YouTube Channel": "Your YouTube Channel",
+  "Claim Channel": "Claim Channel",
+  "auth": "auth",
+  "Your videos are currently being transferred. .": "Your videos are currently being transferred. .",
+  "Please check back later.": "Please check back later."
 }
\ No newline at end of file