lbry-desktop/ui/component/userVerify/view.jsx

165 lines
5.3 KiB
React
Raw Normal View History

// @flow
2020-08-26 22:28:33 +02:00
import { SITE_NAME } from 'config';
2019-09-26 18:07:11 +02:00
import * as ICONS from 'constants/icons';
import React, { Fragment } from 'react';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
import CardVerify from 'component/cardVerify';
2018-10-04 21:27:49 +02:00
import { Lbryio } from 'lbryinc';
2019-09-26 18:07:11 +02:00
import Card from 'component/common/card';
2020-02-13 18:51:20 +01:00
import I18nMessage from 'component/i18nMessage';
2020-09-02 22:08:37 +02:00
import LbcSymbol from 'component/common/lbc-symbol';
2017-07-16 18:29:46 +02:00
type Props = {
errorMessage: ?string,
isPending: boolean,
verifyUserIdentity: string => void,
verifyPhone: () => void,
fetchUser: () => void,
skipLink?: string,
2020-03-16 16:56:24 +01:00
onSkip: () => void,
};
2017-07-16 18:29:46 +02:00
class UserVerify extends React.PureComponent<Props> {
constructor() {
super();
2017-07-16 18:29:46 +02:00
(this: any).onToken = this.onToken.bind(this);
2017-07-16 18:29:46 +02:00
}
onToken(data: { id: string }) {
2017-07-19 01:00:13 +02:00
this.props.verifyUserIdentity(data.id);
2017-07-16 18:29:46 +02:00
}
render() {
const { errorMessage, isPending, verifyPhone, fetchUser, onSkip } = this.props;
2020-03-16 16:56:24 +01:00
const skipButtonProps = {
onClick: onSkip,
};
2017-07-16 18:29:46 +02:00
return (
<div className="main__auth-content">
2019-09-27 22:03:05 +02:00
<section className="section__header">
2020-09-02 22:08:37 +02:00
<h1 className="section__title--large">
{''}
2020-09-02 22:08:37 +02:00
<I18nMessage
tokens={{
lbc: <LbcSymbol size={48} />,
}}
>
Verify to earn %lbc%
</I18nMessage>
</h1>
2019-09-26 18:07:11 +02:00
<p>
2020-02-13 18:51:20 +01:00
<I18nMessage
tokens={{
rewards_program: (
2020-08-24 21:39:59 +02:00
<Button button="link" label={__('other rewards')} href="https://lbry.com/faq/rewards" />
2020-02-13 18:51:20 +01:00
),
Refresh: <Button onClick={() => fetchUser()} button="link" label={__('Refresh')} />,
Skip: <Button {...skipButtonProps} button="link" label={__('Skip')} />,
2020-08-26 22:28:33 +02:00
SITE_NAME,
2020-02-13 18:51:20 +01:00
}}
>
2020-09-02 22:08:37 +02:00
Verified accounts are eligible to earn LBRY Credits for views, watching and reposting content, sharing
invite links etc. Verifying also helps us keep the %SITE_NAME% community safe too! %Refresh% or %Skip%.
</I18nMessage>
2019-07-21 23:31:22 +02:00
</p>
2020-08-26 22:28:33 +02:00
<p className="help">
{__('This step is not mandatory and not required in order for you to use %SITE_NAME%.', { SITE_NAME })}
</p>
2017-08-26 05:21:26 +02:00
</section>
2019-09-26 18:07:11 +02:00
<div className="section">
<Card
icon={ICONS.PHONE}
2020-08-26 22:28:33 +02:00
title={__('Verify phone number')}
2019-09-26 18:07:11 +02:00
subtitle={__(
2020-08-26 22:28:33 +02:00
'You will receive an SMS text message confirming your phone number is valid. Does not work for Canada and possibly other regions.'
2019-09-26 18:07:11 +02:00
)}
actions={
<Fragment>
<Button
onClick={() => {
verifyPhone();
}}
button="primary"
2020-08-26 22:28:33 +02:00
label={__('Verify Via Text')}
2019-09-26 18:07:11 +02:00
/>
<p className="help">
2020-08-26 22:28:33 +02:00
{__('Standard messaging rates apply. Having trouble?')}{' '}
<Button button="link" href="https://lbry.com/faq/phone" label={__('Read more')} />.
2019-09-26 18:07:11 +02:00
</p>
</Fragment>
}
/>
2019-07-21 23:31:22 +02:00
2019-09-26 18:07:11 +02:00
<div className="section__divider">
<hr />
<p>{__('OR')}</p>
2019-07-21 23:31:22 +02:00
</div>
2019-09-26 18:07:11 +02:00
<Card
icon={ICONS.WALLET}
2020-08-26 22:28:33 +02:00
title={__('Verify via credit card')}
2020-08-27 22:48:00 +02:00
subtitle={__('Your card information will not be stored or charged, now or in the future.')}
2019-09-26 18:07:11 +02:00
actions={
<Fragment>
{errorMessage && <p className="error__text">{errorMessage}</p>}
2019-09-26 18:07:11 +02:00
<CardVerify
label={__('Verify Card')}
disabled={isPending}
token={this.onToken}
stripeKey={Lbryio.getStripeToken()}
/>
<p className="help">
{__('A $1 authorization may temporarily appear with your provider.')}{' '}
<Button button="link" href="https://lbry.com/faq/identity-requirements" label={__('Read more')} />.
</p>
</Fragment>
}
/>
2019-07-21 23:31:22 +02:00
2019-09-26 18:07:11 +02:00
<div className="section__divider">
<hr />
<p>{__('OR')}</p>
2017-08-26 05:21:26 +02:00
</div>
2019-09-26 18:07:11 +02:00
<Card
icon={ICONS.CHAT}
2020-08-26 22:28:33 +02:00
title={__('Verify via chat')}
subtitle={
<>
<p>
{__(
'A moderator can approve you within our discord server. Please review the instructions within #rewards-approval carefully.'
)}
</p>
<p>{__('You will be asked to provide proof of identity.')}</p>
</>
2019-09-26 18:07:11 +02:00
}
2020-08-26 22:28:33 +02:00
actions={<Button href="https://chat.lbry.com" button="primary" label={__('Join LBRY Chat')} />}
2019-09-26 18:07:11 +02:00
/>
2020-02-26 22:01:49 +01:00
<div className="section__divider">
<hr />
<p>{__('OR')}</p>
</div>
<Card
icon={ICONS.REMOVE}
title={__('Skip')}
2020-09-02 22:08:37 +02:00
subtitle={__("Verifying is optional. If you skip this, it just means you can't earn LBRY Credits.")}
2020-02-26 22:01:49 +01:00
actions={
<Fragment>
2020-08-26 22:28:33 +02:00
<Button {...skipButtonProps} button="primary" label={__('Continue Without Verifying')} />
2020-02-26 22:01:49 +01:00
</Fragment>
}
/>
2019-09-26 18:07:11 +02:00
</div>
</div>
2017-07-16 18:29:46 +02:00
);
}
}
export default UserVerify;