rework welcome flow and copy again
This commit is contained in:
parent
152da72fc9
commit
687321d91b
11 changed files with 103 additions and 78 deletions
|
@ -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)),
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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")}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 !== "";
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Add table
Reference in a new issue