diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsCompany.js b/src/forms/PayoutDetailsForm/PayoutDetailsCompany.js new file mode 100644 index 00000000..e0f5385d --- /dev/null +++ b/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 ( +
+

+ +

+ + + + + + + {showPhoneNumberField ? ( + + ) : null} +
+ ); +}; + +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; diff --git a/src/translations/en.json b/src/translations/en.json index 5a1c0d87..6bea06f7 100644 --- a/src/translations/en.json +++ b/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",