rework welcome flow and copy again

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
ui
js
component
app
cardVerify
modalFirstReward
modalWelcome
userEmailVerify
userVerify
page/auth
selectors
scss/component

View file

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

View file

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

View file

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

View file

@ -15,20 +15,19 @@ class ModalFirstReward extends React.PureComponent {
onConfirmed={closeModal} onConfirmed={closeModal}
> >
<section> <section>
<h3 className="modal__header">{__("About Your Reward")}</h3> <h3 className="modal__header">{__("Your First Reward")}</h3>
<p> <p>
{__("You earned a reward of")} {__("You just earned your first reward of")}
{" "}<CreditAmount amount={reward.reward_amount} label={false} /> {" "}<CreditAmount amount={reward.reward_amount} />.
{" "}{__("LBRY credits, or")} <em>{__("LBC")}</em>.
</p> </p>
<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>
<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>
<p> <p>
@ -38,7 +37,7 @@ class ModalFirstReward extends React.PureComponent {
</p> </p>
<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> </p>
</section> </section>

View file

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

View file

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

View file

@ -44,9 +44,9 @@ class UserEmailVerify extends React.PureComponent {
{/* render help separately so it always shows */} {/* render help separately so it always shows */}
<div className="form-field__helper"> <div className="form-field__helper">
<p> <p>
{__("Check your email for a verification code. Email")}{" "} {__("Email")}{" "}
<Link href="mailto:help@lbry.io" label="help@lbry.io" />{" "} <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> </p>
</div> </div>
<div className="form-row-submit form-row-submit--with-footer"> <div className="form-row-submit form-row-submit--with-footer">

View file

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

View file

@ -76,7 +76,7 @@ export class AuthPage extends React.PureComponent {
<div className="card__content"> <div className="card__content">
<div className="help"> <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>
</div> </div>

View file

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

View file

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