<commit_before>// @flow
import React, { Component } from 'react';
import { FormattedMessage } from 'react-intl';
import isEmpty from 'lodash/isEmpty';
import find from 'lodash/find';
import classnames from 'classnames';
import FieldShape from '../../components/FieldShape/FieldShape';
import type { Country, CountryPhoneCode, Target, FormType, Errors } from '../../containers/CallToolView/CallToolView';
import type { Field } from '../../components/FieldShape/FieldShape';

type OwnProps = {
  allowManualTargetSelection: boolean;
  targetByCountryEnabled: boolean;
  restrictToSingleCountry: boolean;
  countries: Country[];
  targets: Target[];
  countriesPhoneCodes: CountryPhoneCode[];
  selectedTarget: Target;
  form: FormType;
  errors: Errors;
  onCountryCodeChange: (string) => void;
  onMemberPhoneNumberChange: (string) => void;
  onMemberPhoneCountryCodeChange: (string) => void;
  onTargetSelected: (id: string) => void;
  onSubmit: (any) => void;
  loading: boolean;
}

const memberPhoneNumberField:Field = {
  data_type: 'phone',
  name: 'call_tool[member_phone_number]',
  label: <FormattedMessage id='call_tool.form.phone_number' />,
  default_value: '',
  required: true,
  disabled: false
};

const memberPhoneCountryCodeField:Field = {
  data_type: 'phone',
  name: 'call_tool[member_phone_number]',
  label: <FormattedMessage id='call_tool.form.phone_country_code' />,
  default_value: '',
  required: true,
  disabled: false
};

const countryCodeField:Field = {
  data_type: 'select',
  name: 'call_tool[country_code]',
  label: <FormattedMessage id='call_tool.form.country' />,
  default_value: null,
  required: true,
  disabled: false,
  choices: []
};

const targetField: Field = {
  data_type: 'select',
  name: 'call_tool[target]',
  label: <FormattedMessage id="call_tool.manual_target_selection" />,
  default_value: null,
  required: true,
  disabled: false,
  choices: []
};

class Form extends Component {
  props: OwnProps;
  fields: { [key: string]: Field };

  constructor(props: OwnProps) {
    super(props);

    this.fields = {
      memberPhoneNumberField: memberPhoneNumberField,
      memberPhoneCountryCodeField: memberPhoneCountryCodeField,
      countryCodeField: { ...countryCodeField, choices: this.countryCodeOptions() },
    };
  }

  componentWillReceiveProps(newProps: OwnProps) {
    console.log('new props: ', newProps);
    if (this.fields) {
      this.fields.targets = { ...targetField, choices: this.targetOptions(newProps.targets) };
    }
  }

  countryCodeOptions() {
    return this.props.countries.map((country) => {
      return { value: country.code, label: country.name };
    });
  }

  targetField(targets: Target[]) {
    return {
      data_type: 'select',
      name: 'call_tool[target]',
      label: <FormattedMessage id="call_tool.you_will_be_calling" />,
      default_value: null,
      required: true,
      disabled: false,
      choices: this.targetOptions(targets),
    };
  }

  targetOptions(targets: Target[]) {
    return targets.map((target: Target) => ({
      value: target.id,
      label: (
        <div>
          <p style={{fontSize: '90%'}}>
            <strong>{target.name}</strong>
            {' '}
            <span style={{fontSize: '70%'}}>{target.title}</span>
            {' '}
            {target.postalCode && <span style={{fontSize: '70%'}}>({target.postalCode})</span>}
          </p>
        </div>
      ),
    }));
  }

  phoneNumberCountryName() {
    const strippedCountryCode = this.props.form.memberPhoneCountryCode.replace('+', '');<commit_msg>Move state to start<commit_after>// @flow
import React, { Component } from 'react';
import { FormattedMessage } from 'react-intl';
import isEmpty from 'lodash/isEmpty';
import find from 'lodash/find';
import classnames from 'classnames';
import FieldShape from '../../components/FieldShape/FieldShape';
import type { Country, CountryPhoneCode, Target, FormType, Errors } from '../../containers/CallToolView/CallToolView';
import type { Field } from '../../components/FieldShape/FieldShape';

type OwnProps = {
  allowManualTargetSelection: boolean;
  targetByCountryEnabled: boolean;
  restrictToSingleCountry: boolean;
  countries: Country[];
  targets: Target[];
  countriesPhoneCodes: CountryPhoneCode[];
  selectedTarget: Target;
  form: FormType;
  errors: Errors;
  onCountryCodeChange: (string) => void;
  onMemberPhoneNumberChange: (string) => void;
  onMemberPhoneCountryCodeChange: (string) => void;
  onTargetSelected: (id: string) => void;
  onSubmit: (any) => void;
  loading: boolean;
}

const memberPhoneNumberField:Field = {
  data_type: 'phone',
  name: 'call_tool[member_phone_number]',
  label: <FormattedMessage id='call_tool.form.phone_number' />,
  default_value: '',
  required: true,
  disabled: false
};

const memberPhoneCountryCodeField:Field = {
  data_type: 'phone',
  name: 'call_tool[member_phone_number]',
  label: <FormattedMessage id='call_tool.form.phone_country_code' />,
  default_value: '',
  required: true,
  disabled: false
};

const countryCodeField:Field = {
  data_type: 'select',
  name: 'call_tool[country_code]',
  label: <FormattedMessage id='call_tool.form.country' />,
  default_value: null,
  required: true,
  disabled: false,
  choices: []
};

const targetField: Field = {
  data_type: 'select',
  name: 'call_tool[target]',
  label: <FormattedMessage id="call_tool.manual_target_selection" />,
  default_value: null,
  required: true,
  disabled: false,
  choices: []
};

class Form extends Component {
  props: OwnProps;
  fields: { [key: string]: Field };

  constructor(props: OwnProps) {
    super(props);

    this.fields = {
      memberPhoneNumberField: memberPhoneNumberField,
      memberPhoneCountryCodeField: memberPhoneCountryCodeField,
      countryCodeField: { ...countryCodeField, choices: this.countryCodeOptions() },
    };
  }

  componentWillReceiveProps(newProps: OwnProps) {
    console.log('new props: ', newProps);
    if (this.fields) {
      this.fields.targets = { ...targetField, choices: this.targetOptions(newProps.targets) };
    }
  }

  countryCodeOptions() {
    return this.props.countries.map((country) => {
      return { value: country.code, label: country.name };
    });
  }

  targetField(targets: Target[]) {
    return {
      data_type: 'select',
      name: 'call_tool[target]',
      label: <FormattedMessage id="call_tool.you_will_be_calling" />,
      default_value: null,
      required: true,
      disabled: false,
      choices: this.targetOptions(targets),
    };
  }

  targetOptions(targets: Target[]) {
    return targets.map((target: Target) => ({
      value: target.id,
      label: (
        <div>
          <p style={{fontSize: '90%'}}>
            {target.postalCode && <span>({target.postalCode})</span>}
            {' - '}
            <strong>{target.name}</strong>
            {' '}
            <span style={{fontSize: '70%'}}>{target.title}</span>
          </p>
        </div>
      ),
    }));
  }

  phoneNumberCountryName() {
    const strippedCountryCode = this.props.form.memberPhoneCountryCode.replace('+', '');
{'fraction_non_alphanumeric': 0.1449111925570905, 'fraction_numerical': 0.00140964195094446, 'mean_word_length': 3.774562584118439, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, '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': '5923442', 'n_tokens_mistral': 2216, 'n_tokens_neox': 2211, 'n_words': 451}