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

// @flow
import * as React from 'react';
import { Form, FormField, Submit } from 'component/common/form';
import Card from 'component/common/card';

const os = require('os').type();
const countryCodes = require('country-data')
  .callingCountries.all.filter(_ => _.emoji)
  .reduce((acc, cur) => acc.concat(cur.countryCallingCodes.map(_ => ({ ...cur, countryCallingCode: _ }))), [])
  .sort((a, b) => {
    if (a.countryCallingCode < b.countryCallingCode) {
      return -1;
    }
    if (a.countryCallingCode > b.countryCallingCode) {
      return 1;
    }
    return 0;
  });

type Props = {
  addUserPhone: (string, string) => void,
  cancelButton: React.Node,
  phoneErrorMessage: ?string,
  isPending: boolean,
};

type State = {
  phone: string,
  countryCode: string,
};

class UserPhoneNew extends React.PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {
      phone: '',
      countryCode: '+1',
    };

    (this: any).formatPhone = this.formatPhone.bind(this);
    (this: any).handleSubmit = this.handleSubmit.bind(this);
    (this: any).handleSelect = this.handleSelect.bind(this);
  }

  formatPhone(value: string) {
    const { countryCode } = this.state;
    const formattedNumber = value.replace(/\D/g, '');

    if (countryCode === '+1') {
      if (!formattedNumber) {
        return '';
      } else if (formattedNumber.length < 4) {
        return formattedNumber;
      } else if (formattedNumber.length < 7) {
        return `(${formattedNumber.substring(0, 3)}) ${formattedNumber.substring(3)}`;
      }
      const fullNumber = `(${formattedNumber.substring(0, 3)}) ${formattedNumber.substring(
        3,
        6
      )}-${formattedNumber.substring(6)}`;
      return fullNumber.length <= 14 ? fullNumber : fullNumber.substring(0, 14);
    }
    return formattedNumber;
  }

  handleChanged(event: SyntheticInputEvent<*>) {
    this.setState({
      phone: this.formatPhone(event.target.value),
    });
  }

  handleSelect(event: SyntheticInputEvent<*>) {
    this.setState({ countryCode: event.target.value });
  }

  handleSubmit() {
    const { phone, countryCode } = this.state;
    this.props.addUserPhone(phone.replace(/\D/g, ''), countryCode.substring(1));
  }

  render() {
    const { cancelButton, phoneErrorMessage, isPending } = this.props;

    return (
      <Card
        title={__('Enter your phone number')}
        subtitle={__(
          'Enter your phone number and we will send you a verification code. We will not share your phone number with third parties.'
        )}
        actions={
          <Form onSubmit={this.handleSubmit}>
            <fieldset-group class="fieldset-group--smushed">
              <FormField label={__('Country')} type="select" name="country-codes" onChange={this.handleSelect}>
                {countryCodes.map((country, index) => (
                  <option key={index} value={country.countryCallingCode}>
                    {os === 'Darwin' ? country.emoji : `(${country.alpha2})`} {country.countryCallingCode}
                  </option>
                ))}
              </FormField>
              <FormField
                type="text"
                label={__('Number')}
                placeholder={this.state.countryCode === '+1' ? '(555) 555-5555' : '5555555555'}
                name="phone"
                value={this.state.phone}
                error={phoneErrorMessage}
                onChange={event => {
                  this.handleChanged(event);
                }}
              />
            </fieldset-group>
            <div className="card__actions">
              <Submit label="Submit" disabled={isPending} />
              {cancelButton}
            </div>
          </Form>
        }
      />
    );
  }
}

export default UserPhoneNew;