<commit_before>import React from 'react';
import { Form, FormRow, Submit } from 'component/form.js';
import FormField from 'component/formField';

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;
  });

class UserPhoneNew extends React.PureComponent {
  constructor(props) {
    super(props);

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

    this.formatPhone = this.formatPhone.bind(this);
  }

  formatPhone(value) {
    const { country_code } = this.state;
    value = value.replace(/\D/g, '');
    if (country_code === '+1') {
      if (!value) {
        return '';
      } else if (value.length < 4) {
        return value;
      } else if (value.length < 7) {
        return `(${value.substring(0, 3)}) ${value.substring(3)}`;
      }
      const fullNumber = `(${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring(
        6
      )}`;
      return fullNumber.length <= 14 ? fullNumber : fullNumber.substring(0, 14);
    }
    return value;
  }

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

  handleSelect(event) {
    this.setState({ country_code: event.target.value });
  }

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

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

    return (
      <div>
        <p>
          {__(
            'Enter your phone number and we will send you a verification code. We will not share your phone number with third parties.'
          )}
        </p>
        <Form onSubmit={this.handleSubmit.bind(this)}>
          <div className="form-row-phone">
            <FormField type="select" onChange={this.handleSelect.bind(this)}>
              {countryCodes.map((country, index) => (
                <option key={index} value={country.countryCallingCode}>
                  {country.emoji} {country.countryCallingCode}
                </option>
              ))}
            </FormField>
            <FormRow
              type="text"
              placeholder={this.state.country_code === '+1' ? '(555) 555-5555' : '5555555555'}
              name="phone"
              value={this.state.phone}
              errorMessage={phoneErrorMessage}
              onChange={event => {
                this.handleChanged(event);
              }}
            /><commit_msg>Removed emojis on Windows and Linux<commit_after>import React from 'react';
import { Form, FormRow, Submit } from 'component/form.js';
import FormField from 'component/formField';

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;
  });

class UserPhoneNew extends React.PureComponent {
  constructor(props) {
    super(props);

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

    this.formatPhone = this.formatPhone.bind(this);
  }

  formatPhone(value) {
    const { country_code } = this.state;
    value = value.replace(/\D/g, '');
    if (country_code === '+1') {
      if (!value) {
        return '';
      } else if (value.length < 4) {
        return value;
      } else if (value.length < 7) {
        return `(${value.substring(0, 3)}) ${value.substring(3)}`;
      }
      const fullNumber = `(${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring(
        6
      )}`;
      return fullNumber.length <= 14 ? fullNumber : fullNumber.substring(0, 14);
    }
    return value;
  }

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

  handleSelect(event) {
    this.setState({ country_code: event.target.value });
  }

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

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

    return (
      <div>
        <p>
          {__(
            'Enter your phone number and we will send you a verification code. We will not share your phone number with third parties.'
          )}
        </p>
        <Form onSubmit={this.handleSubmit.bind(this)}>
          <div className="form-row-phone">
            <FormField type="select" onChange={this.handleSelect.bind(this)}>
              {countryCodes.map((country, index) => (
                <option key={index} value={country.countryCallingCode}>
                  {os === 'Darwin' ? country.emoji : `(${country.alpha2})`}{' '}
                  {country.countryCallingCode}
                </option>
              ))}
            </FormField>
            <FormRow
              type="text"
              placeholder={this.state.country_code === '+1' ? '(555) 555-5555' : '5555555555'}
              name="phone"
              value={this.state.phone}
              errorMessage={phoneErrorMessage}
              onChange={event => {
                this.handleChanged(event);
              }}
            />
{'fraction_non_alphanumeric': 0.1518324607329843, 'fraction_numerical': 0.014834205933682374, 'mean_word_length': 2.203465623253214, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6029181', 'n_tokens_mistral': 1817, 'n_tokens_neox': 1742, 'n_words': 345}