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

// @flow
import { SITE_NAME } from 'config';
import * as ICONS from 'constants/icons';
import React, { Fragment } from 'react';
import Button from 'component/button';
import CardVerify from 'component/cardVerify';
import { Lbryio } from 'lbryinc';
import Card from 'component/common/card';
import I18nMessage from 'component/i18nMessage';

type Props = {
  errorMessage: ?string,
  isPending: boolean,
  verifyUserIdentity: string => void,
  verifyPhone: () => void,
  fetchUser: () => void,
  skipLink?: string,
  onSkip: () => void,
};

class UserVerify extends React.PureComponent<Props> {
  constructor() {
    super();

    (this: any).onToken = this.onToken.bind(this);
  }

  onToken(data: { id: string }) {
    this.props.verifyUserIdentity(data.id);
  }

  render() {
    const { errorMessage, isPending, verifyPhone, fetchUser, onSkip } = this.props;
    const skipButtonProps = {
      onClick: onSkip,
    };

    return (
      <div className="main__auth-content">
        <section className="section__header">
          <h1 className="section__title--large">{__('Verify to earn LBC')}</h1>
          <p>
            <I18nMessage
              tokens={{
                rewards_program: (
                  <Button button="link" label={__('other rewards')} href="https://lbry.com/faq/rewards" />
                ),
                Refresh: <Button onClick={() => fetchUser()} button="link" label={__('Refresh')} />,
                Skip: <Button {...skipButtonProps} button="link" label={__('Skip')} />,
                SITE_NAME,
              }}
            >
              Verified accounts are eligible to earn LBC 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>
          </p>
          <p className="help">
            {__('This step is not mandatory and not required in order for you to use %SITE_NAME%.', { SITE_NAME })}
          </p>
        </section>

        <div className="section">
          <Card
            icon={ICONS.PHONE}
            title={__('Verify phone number')}
            subtitle={__(
              'You will receive an SMS text message confirming your phone number is valid. Does not work for Canada and possibly other regions.'
            )}
            actions={
              <Fragment>
                <Button
                  onClick={() => {
                    verifyPhone();
                  }}
                  button="primary"
                  label={__('Verify Via Text')}
                />
                <p className="help">
                  {__('Standard messaging rates apply. Having trouble?')}{' '}
                  <Button button="link" href="https://lbry.com/faq/phone" label={__('Read more')} />.
                </p>
              </Fragment>
            }
          />

          <div className="section__divider">
            <hr />
            <p>{__('OR')}</p>
          </div>

          <Card
            icon={ICONS.WALLET}
            title={__('Verify via credit card')}
            subtitle={__(
              'If you have a valid credit or debit card, you can use it to instantly prove your humanity. LBRY does not store your credit card information. There is no charge at all for this, now or in the future.'
            )}
            actions={
              <Fragment>
                {errorMessage && <p className="error__text">{errorMessage}</p>}
                <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>
            }
          />

          <div className="section__divider">
            <hr />
            <p>{__('OR')}</p>
          </div>

          <Card
            icon={ICONS.CHAT}
            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>
              </>
            }
            actions={<Button href="https://chat.lbry.com" button="primary" label={__('Join LBRY Chat')} />}
          />

          <div className="section__divider">
            <hr />
            <p>{__('OR')}</p>
          </div>

          <Card
            icon={ICONS.REMOVE}
            title={__('Skip')}
            subtitle={__("Verifying is optional. If you skip this, it just means you can't earn LBC.")}
            actions={
              <Fragment>
                <Button {...skipButtonProps} button="primary" label={__('Continue Without Verifying')} />
              </Fragment>
            }
          />
        </div>
      </div>
    );
  }
}

export default UserVerify;