Add PayoutDetailsCompany component

src/forms/PayoutDetailsForm/PayoutDetailsCompany.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { bool, string } from 'prop-types';
+import { FormattedMessage, intlShape } from 'react-intl';
+import * as validators from '../../util/validators';
+import { FieldPhoneNumberInput, FieldTextInput } from '../../components';
+
+import * as normalizePhoneNumberUS from './normalizePhoneNumberUS';
+import PayoutDetailsBusinessProfile from './PayoutDetailsBusinessProfile';
+import css from './PayoutDetailsForm.css';
+
+const PayoutDetailsCompany = props => {
+  const {
+    fieldId,
+    disabled,
+    intl,
+    country,
+    showBusinessURLField,
+    showMCCForUSField,
+    showPhoneNumberField,
+  } = props;
+
+  const companyNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.companyNameLabel' });
+  const companyNamePlaceholder = intl.formatMessage({
+    id: 'PayoutDetailsForm.companyNamePlaceholder',
+  });
+  const companyNameRequired = validators.required(
+    intl.formatMessage({
+      id: 'PayoutDetailsForm.companyNameRequired',
+    })
+  );
+
+  const companyTaxIdLabel = intl.formatMessage({
+    id: `PayoutDetailsForm.companyTaxIdLabel.${country}`,
+  });
+  const companyTaxIdPlaceholder = intl.formatMessage(
+    {
+      id: 'PayoutDetailsForm.companyTaxIdPlaceholder',
+    },
+    {
+      idName: companyTaxIdLabel,
+    }
+  );
+  const companyTaxIdRequired = validators.required(
+    intl.formatMessage(
+      {
+        id: 'PayoutDetailsForm.companyTaxIdRequired',
+      },
+      {
+        idName: companyTaxIdLabel,
+      }
+    )
+  );
+
+  const phoneLabel = intl.formatMessage({ id: 'PayoutDetailsForm.companyPhoneLabel' });
+  const phonePlaceholder = intl.formatMessage({
+    id: 'PayoutDetailsForm.companyPhonePlaceholder',
+  });
+  const phoneNumberForUSRequired = validators.required(
+    intl.formatMessage({ id: 'PayoutDetailsForm.companyPhoneRequired' })
+  );
+
+  return (
+    <div className={css.sectionContainer}>
+      <h3 className={css.subTitle}>
+        <FormattedMessage id="PayoutDetailsForm.companyDetailsTitle" />
+      </h3>
+      <FieldTextInput
+        id={`${fieldId}.name`}
+        name={`${fieldId}.name`}
+        className={css.textInputRow}
+        autoComplete="organization"
+        disabled={disabled}
+        label={companyNameLabel}
+        placeholder={companyNamePlaceholder}
+        type="text"
+        validate={companyNameRequired}
+      />
+
+      <FieldTextInput
+        id={`${fieldId}.taxId`}
+        name={`${fieldId}.taxId`}
+        className={css.textInputRow}
+        autoComplete="company-tax-id"
+        disabled={disabled}
+        label={companyTaxIdLabel}
+        placeholder={companyTaxIdPlaceholder}
+        type="text"
+        validate={companyTaxIdRequired}
+      />
+
+      <PayoutDetailsBusinessProfile
+        disabled={disabled}
+        fieldId={`${fieldId}.businessProfile`}
+        showBusinessURLField={showBusinessURLField}
+        showMCCForUSField={showMCCForUSField}
+        intl={intl}
+      />
+
+      {showPhoneNumberField ? (
+        <FieldPhoneNumberInput
+          id={`${fieldId}.phone`}
+          name={`${fieldId}.phone`}
+          className={css.textInputRow}
+          autoComplete="tel-national"
+          label={phoneLabel}
+          format={normalizePhoneNumberUS.format}
+          parse={normalizePhoneNumberUS.parse}
+          placeholder={phonePlaceholder}
+          type="text"
+          validate={phoneNumberForUSRequired}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+PayoutDetailsCompany.defaultProps = {
+  fieldId: null,
+  disabled: false,
+  showBusinessURLField: false,
+  showMCCForUSField: false,
+  showPhoneNumberField: false,
+};
+
+PayoutDetailsCompany.propTypes = {
+  fieldId: string,
+  disabled: bool,
+  country: string.isRequired,
+  showBusinessURLField: bool,
+  showMCCForUSField: bool,
+  showPhoneNumberField: bool,
+
+  // from injectIntl
+  intl: intlShape.isRequired,
+};
+
+export default PayoutDetailsCompany;

src/translations/en.json

@@ -497,6 +497,9 @@
   "PayoutDetailsForm.companyNameLabel": "Company name",
   "PayoutDetailsForm.companyNamePlaceholder": "Enter company name…",
   "PayoutDetailsForm.companyNameRequired": "Company name is required",
+  "PayoutDetailsForm.companyPhoneLabel": "Phone number",
+  "PayoutDetailsForm.companyPhonePlaceholder": "202-555-0102",
+  "PayoutDetailsForm.companyPhoneRequired": "This field is required",
   "PayoutDetailsForm.companyTaxIdLabel.AT": "Firmenbuchnummer (FN)",
   "PayoutDetailsForm.companyTaxIdLabel.AU": "Company ACN/ABN - TFN",
   "PayoutDetailsForm.companyTaxIdLabel.BE": "TVA/BTW/CBE",