LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

rework welcome flow and copy again

Browse source
This commit is contained in:
Jeremy Kauffman 2017-07-27 21:13:12 -04:00
parent 152da72fc9
commit 687321d91b
11 changed files with 103 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
ui/js/component/app/index.js
View file

@ -9,28 +9,15 @@ import {
} from "actions/app";
import { doUpdateBalance } from "actions/wallet";
import { selectWelcomeModalAcknowledged } from "selectors/app";
import rewards from "rewards";
import {
selectFetchingRewards,
makeSelectHasClaimedReward,
} from "selectors/rewards";
import { selectUser } from "selectors/user";
import App from "./view";
import * as modals from "constants/modal_types";
const select = (state, props) => {
const selectHasClaimed = makeSelectHasClaimedReward();
return {
modal: selectCurrentModal(state),
isWelcomeAcknowledged: selectWelcomeModalAcknowledged(state),
isFetchingRewards: selectFetchingRewards(state),
isWelcomeRewardClaimed: selectHasClaimed(state, {
reward_type: rewards.TYPE_NEW_USER,
}),
user: selectUser(state),
};
};
const select = (state, props) => ({
modal: selectCurrentModal(state),
isWelcomeAcknowledged: selectWelcomeModalAcknowledged(state),
user: selectUser(state),
});
const perform = dispatch => ({
alertError: errorList => dispatch(doAlertError(errorList)),

11
ui/js/component/app/view.jsx
View file

@ -38,18 +38,13 @@ class App extends React.PureComponent {
}
showWelcome(props) {
const {
isFetchingRewards,
isWelcomeAcknowledged,
isWelcomeRewardClaimed,
openWelcomeModal,
user,
} = props;
const { isWelcomeAcknowledged, openWelcomeModal, user } = props;
if (
!isWelcomeAcknowledged &&
user &&
(isFetchingRewards === false && isWelcomeRewardClaimed === false)
!user.is_reward_approved &&
!user.is_identity_verified
) {
openWelcomeModal();
}

1
ui/js/component/cardVerify/view.jsx
View file

@ -167,6 +167,7 @@ class CardVerify extends React.Component {
<Link
button="primary"
label={this.props.label}
icon="icon-lock"
disabled={
this.props.disabled || this.state.open || this.hasPendingClick
}

13
ui/js/component/modalFirstReward/view.jsx
View file

@ -15,20 +15,19 @@ class ModalFirstReward extends React.PureComponent {
onConfirmed={closeModal}
>
<section>
<h3 className="modal__header">{__("About Your Reward")}</h3>
<h3 className="modal__header">{__("Your First Reward")}</h3>
<p>
{__("You earned a reward of")}
{" "}<CreditAmount amount={reward.reward_amount} label={false} />
{" "}{__("LBRY credits, or")} <em>{__("LBC")}</em>.
{__("You just earned your first reward of")}
{" "}<CreditAmount amount={reward.reward_amount} />.
</p>
<p>
{__(
"This reward will show in your Wallet momentarily, shown in the top right, probably while you are reading this message."
"This reward will show in your Wallet in the top right momentarily (if it hasn't already)."
)}
</p>
<p>
{__(
"LBC is used to compensate creators, to publish, and to have say in how the network works."
"These credits are used to compensate creators, to publish your own content, and to have say in how the network works."
)}
</p>
<p>
@ -38,7 +37,7 @@ class ModalFirstReward extends React.PureComponent {
</p>
<p>
{__(
"Finally, pleaseh know that LBRY is an early beta and that it earns the name."
"Finally, please know that LBRY is an early beta and that it earns the name."
)}
</p>
</section>

4
ui/js/component/modalWelcome/index.js
View file

@ -7,6 +7,7 @@ import { selectUserIsRewardApproved } from "selectors/user";
import {
makeSelectHasClaimedReward,
makeSelectRewardByType,
selectTotalRewardValue,
} from "selectors/rewards";
import ModalWelcome from "./view";
@ -17,6 +18,7 @@ const select = (state, props) => {
return {
isRewardApproved: selectUserIsRewardApproved(state),
reward: selectReward(state, { reward_type: rewards.TYPE_NEW_USER }),
totalRewardValue: selectTotalRewardValue(state),
};
};
@ -29,7 +31,7 @@ const perform = dispatch => () => {
return {
verifyAccount: () => {
closeModal();
dispatch(doAuthNavigate("/rewards"));
dispatch(doAuthNavigate("/discover"));
},
closeModal: closeModal,
};

95
ui/js/component/modalWelcome/view.jsx
View file

@ -5,44 +5,77 @@ import Link from "component/link";
import RewardLink from "component/rewardLink";
class ModalWelcome extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
isFirstScreen: true,
};
}
render() {
const { closeModal, isRewardApproved, reward, verifyAccount } = this.props;
const { closeModal, totalRewardValue, verifyAccount } = this.props;
const totalRewardRounded = Math.round(totalRewardValue / 10) * 10;
return (
<Modal type="custom" isOpen={true} contentLabel="Welcome to LBRY">
<section>
<h3 className="modal__header">{__("Welcome to LBRY.")}</h3>
<p>
{__(
"Using LBRY is like dating a centaur. Totally normal up top, and"
)}
{" "}<em>{__("way different")}</em> {__("underneath.")}
</p>
<p>{__("Up top, LBRY is similar to popular media sites.")}</p>
<p>
{__(
"Below, LBRY is controlled by users -- you -- via blockchain and decentralization."
)}
</p>
<p>
{__("Please have")} {" "}
{reward &&
<CreditAmount amount={parseFloat(reward.reward_amount)} />}
{!reward && <span className="credit-amount">{__("??")}</span>}
{" "} {__("as a thank you for building content freedom.")}
</p>
<div className="text-center">
{isRewardApproved &&
<RewardLink reward_type="new_user" button="primary" />}
{!isRewardApproved &&
{this.state.isFirstScreen &&
<section>
<h3 className="modal__header">{__("Welcome to LBRY")}</h3>
<p>
{__(
"Using LBRY is like dating a centaur. Totally normal up top, and"
)}
{" "}<em>{__("way different")}</em> {__("underneath.")}
</p>
<p>{__("Up top, LBRY is similar to popular media sites.")}</p>
<p>
{__(
"Below, LBRY is controlled by users -- you -- via blockchain and decentralization."
)}
</p>
<div className="modal__buttons">
<Link
button="primary"
onClick={() => {
this.setState({ isFirstScreen: false });
}}
label={__("Continue")}
/>
</div>
</section>}
{!this.state.isFirstScreen &&
<section>
<h3 className="modal__header">{__("Claim Your Credits")}</h3>
<p>
The LBRY network is controlled and powered by credits called{" "}
<em>LBC</em>, a blockchain asset.
</p>
<p>
{__("New patrons receive ")} {" "}
{totalRewardValue
? <CreditAmount amount={totalRewardRounded} />
: <span className="credit-amount">{__("credits")}</span>}
{" "} {__("in rewards for usage and influence of the network.")}
</p>
<p>
{__(
"You'll also earn weekly bonuses for checking out the greatest new stuff."
)}
</p>
<div className="modal__buttons">
<Link
button="primary"
onClick={verifyAccount}
label={__("Get Welcome Credits")}
/>}
<Link button="alt" onClick={closeModal} label={__("Skip")} />
</div>
</section>
label={__("You Had Me At Free LBC")}
/>
<Link
button="alt"
onClick={closeModal}
label={__("I Burn Money")}
/>
</div>
</section>}
</Modal>
);
}

4
ui/js/component/userEmailVerify/view.jsx
View file

@ -44,9 +44,9 @@ class UserEmailVerify extends React.PureComponent {
{/* render help separately so it always shows */}
<div className="form-field__helper">
<p>
{__("Check your email for a verification code. Email")}{" "}
{__("Email")}{" "}
<Link href="mailto:help@lbry.io" label="help@lbry.io" />{" "}
{__("if you did not receive or are having trouble with your code.")}
{__("if you encounter any trouble with your code.")}
</p>
</div>
<div className="form-row-submit form-row-submit--with-footer">

18
ui/js/component/userVerify/view.jsx
View file

@ -25,14 +25,16 @@ class UserVerify extends React.PureComponent {
const { errorMessage, isPending, reward } = this.props;
return (
<div>
{(!reward || !reward.transaction_id) &&
<p>
Please link a credit card to confirm your identity and receive{" "}
{reward
? <CreditAmount amount={parseFloat(reward.reward_amount)} />
: <span>your reward</span>}
</p>}
<p>{__("This is to prevent abuse. You will not be charged.")}</p>
<p>
{__(
"To ensure you are a real and unique person, you must link a valid credit or debit card."
)}
</p>
<p>
{__(
"A small authorization, but no actual charge, will be run on this card."
)}
</p>
{errorMessage && <p className="form-field__error">{errorMessage}</p>}
<CardVerify
label={__("Link Card and Finish")}

2
ui/js/page/auth/view.jsx
View file

@ -76,7 +76,7 @@ export class AuthPage extends React.PureComponent {
<div className="card__content">
<div className="help">
{__(
"This information is disclosed only to LBRY, Inc. and not to the LBRY network. It is optional and only collected to provide communication and prevent abuse. You may use LBRY without providing this information."
"This information is disclosed only to LBRY, Inc. and not to the LBRY network. It is only required to earn LBRY rewards."
)}
</div>
</div>

6
ui/js/selectors/rewards.js
View file

@ -23,6 +23,12 @@ export const selectFetchingRewards = createSelector(
state => !!state.fetching
);
export const selectTotalRewardValue = createSelector(selectRewards, rewards =>
rewards.reduce((sum, reward) => {
return sum + reward.reward_amount;
}, 0)
);
export const selectHasClaimedReward = (state, props) => {
const reward = selectRewardsByType(state)[props.reward_type];
return reward && reward.transaction_id !== "";

4
ui/scss/component/_modal.scss
View file

@ -34,7 +34,7 @@
}
.modal__header {
margin-bottom: 5px;
margin-bottom: $spacing-vertical * 2/3;
text-align: center;
}
@ -42,7 +42,7 @@
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 15px;
margin-top: $spacing-vertical * 2/3;
}
.modal__button {