skip rewards validation on future sign ins if user clicks 'skip' button
This commit is contained in:
parent
300b0c7c95
commit
8a73cdbc0b
3 changed files with 20 additions and 11 deletions
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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];
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue