skip rewards validation on future sign ins if user clicks 'skip' button

This commit is contained in:
Sean Yesmunt 2020-03-10 16:42:23 -04:00 committed by Jeremy Kauffman
parent 300b0c7c95
commit 8a73cdbc0b
3 changed files with 20 additions and 11 deletions

View file

@ -62,6 +62,7 @@ function UserSignIn(props: Props) {
const shouldRedirectImmediately = urlParams.get('immediate'); const shouldRedirectImmediately = urlParams.get('immediate');
const [initialSignInStep, setInitialSignInStep] = React.useState(); const [initialSignInStep, setInitialSignInStep] = React.useState();
const [hasSeenFollowList, setHasSeenFollowList] = usePersistedState('channel-follow-intro', false); const [hasSeenFollowList, setHasSeenFollowList] = usePersistedState('channel-follow-intro', false);
const [hasSkippedRewards, setHasSkippedRewards] = usePersistedState('skip-rewards-intro', false);
const hasVerifiedEmail = user && user.has_verified_email; const hasVerifiedEmail = user && user.has_verified_email;
const rewardsApproved = user && user.is_reward_approved; const rewardsApproved = user && user.is_reward_approved;
const isIdentityVerified = user && user.is_identity_verified; const isIdentityVerified = user && user.is_identity_verified;
@ -81,7 +82,7 @@ function UserSignIn(props: Props) {
// The possible screens for the sign in flow // The possible screens for the sign in flow
const showEmail = !emailToVerify && !hasVerifiedEmail; const showEmail = !emailToVerify && !hasVerifiedEmail;
const showEmailVerification = emailToVerify && !hasVerifiedEmail; const showEmailVerification = emailToVerify && !hasVerifiedEmail;
const showUserVerification = hasVerifiedEmail && !rewardsApproved && !isIdentityVerified; const showUserVerification = hasVerifiedEmail && !rewardsApproved && !isIdentityVerified && !hasSkippedRewards;
const showSyncPassword = syncEnabled && getSyncError; const showSyncPassword = syncEnabled && getSyncError;
const showChannelCreation = const showChannelCreation =
hasVerifiedEmail && hasVerifiedEmail &&
@ -119,7 +120,7 @@ function UserSignIn(props: Props) {
const SIGN_IN_FLOW = [ const SIGN_IN_FLOW = [
showEmail && <UserEmailNew />, showEmail && <UserEmailNew />,
showEmailVerification && <UserEmailVerify />, showEmailVerification && <UserEmailVerify />,
showUserVerification && <UserVerify skipLink={redirect} />, showUserVerification && <UserVerify skipLink={redirect} onSkip={() => setHasSkippedRewards(true)} />,
showChannelCreation && <UserFirstChannel />, showChannelCreation && <UserFirstChannel />,
showFollowIntro && ( showFollowIntro && (
<UserChannelFollowIntro <UserChannelFollowIntro

View file

@ -14,6 +14,7 @@ type Props = {
verifyPhone: () => void, verifyPhone: () => void,
fetchUser: () => void, fetchUser: () => void,
skipLink?: string, skipLink?: string,
onSkip: () => void,
}; };
class UserVerify extends React.PureComponent<Props> { class UserVerify extends React.PureComponent<Props> {
@ -28,7 +29,12 @@ class UserVerify extends React.PureComponent<Props> {
} }
render() { render() {
const { errorMessage, isPending, verifyPhone, fetchUser, skipLink } = this.props; const { errorMessage, isPending, verifyPhone, fetchUser, skipLink, onSkip } = this.props;
const skipButtonProps = {
onClick: onSkip,
navigate: skipLink || '/',
};
return ( return (
<React.Fragment> <React.Fragment>
<section className="section__header"> <section className="section__header">
@ -45,7 +51,7 @@ class UserVerify extends React.PureComponent<Props> {
to be validated. to be validated.
</I18nMessage>{' '} </I18nMessage>{' '}
<Button onClick={() => fetchUser()} button="link" label={__('Refresh')} /> {'or'}{' '} <Button onClick={() => fetchUser()} button="link" label={__('Refresh')} /> {'or'}{' '}
<Button navigate={skipLink || '/'} button="link" label={__('Skip')} />. <Button {...skipButtonProps} button="link" label={__('Skip')} />.
</p> </p>
<p>{__('This step is not required to use LBRY, and not all users or regions may qualify.')}</p> <p>{__('This step is not required to use LBRY, and not all users or regions may qualify.')}</p>
</section> </section>
@ -132,7 +138,7 @@ class UserVerify extends React.PureComponent<Props> {
subtitle={__('Rewards validation is optional.')} subtitle={__('Rewards validation is optional.')}
actions={ actions={
<Fragment> <Fragment>
<Button navigate={skipLink || '/'} button="primary" label={__('Continue Without Rewards')} /> <Button {...skipButtonProps} button="primary" label={__('Continue Without Rewards')} />
</Fragment> </Fragment>
} }
/> />

View file

@ -1,4 +1,4 @@
import { useState, useEffect } from 'react'; import { useState } from 'react';
export default function usePersistedState(key, firstTimeDefault) { export default function usePersistedState(key, firstTimeDefault) {
// If no key is passed in, act as a normal `useState` // If no key is passed in, act as a normal `useState`
@ -32,11 +32,13 @@ export default function usePersistedState(key, firstTimeDefault) {
const [value, setValue] = useState(defaultValue); const [value, setValue] = useState(defaultValue);
useEffect(() => { function setValueAndLocalStorage(newValue) {
if (key && localStorageAvailable) { if (key && localStorageAvailable && value !== newValue) {
localStorage.setItem(key, typeof value === 'object' ? JSON.stringify(value) : value); localStorage.setItem(key, typeof newValue === 'object' ? JSON.stringify(newValue) : newValue);
} }
}, [key, value]);
return [value, setValue]; setValue(newValue);
}
return [value, setValueAndLocalStorage];
} }