Add PayoutDetailsBusinessProfile component

src/forms/PayoutDetailsForm/PayoutDetailsBusinessProfile.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { bool, string } from 'prop-types';
+import { intlShape } from 'react-intl';
+import * as validators from '../../util/validators';
+import { FieldSelect, FieldTextInput } from '../../components';
+
+import merchantCategoryCodesUS from './merchantCategoryCodesUS';
+import css from './PayoutDetailsForm.css';
+
+const PayoutDetailsBusinessProfile = props => {
+  const { fieldId, disabled, intl, showBusinessURLField, showMCCForUSField } = props;
+
+  const isBusinessProfileNeeded = showBusinessURLField || showMCCForUSField;
+  const mccLabel = intl.formatMessage({ id: 'PayoutDetailsForm.businessMCCForUSLabel' });
+  const mccPlaceholder = intl.formatMessage({
+    id: 'PayoutDetailsForm.businessMCCForUSPlaceholder',
+  });
+  const mccRequired = validators.required(
+    intl.formatMessage({ id: 'PayoutDetailsForm.businessMCCForUSRequired' })
+  );
+
+  const businessUrlLabel = intl.formatMessage({ id: 'PayoutDetailsForm.businessURLLabel' });
+  const businessUrlPlaceholder = intl.formatMessage({
+    id: 'PayoutDetailsForm.businessURLPlaceholder',
+  });
+
+  const businessUrlRequired = validators.validBusinessURL(
+    intl.formatMessage({ id: 'PayoutDetailsForm.businessURLRequired' })
+  );
+
+  return isBusinessProfileNeeded ? (
+    <React.Fragment>
+      {showMCCForUSField ? (
+        <FieldSelect
+          id={`${fieldId}.mcc`}
+          name={`${fieldId}.mcc`}
+          className={css.selectMCC}
+          autoComplete="mcc"
+          disabled={disabled}
+          label={mccLabel}
+          validate={mccRequired}
+        >
+          <option disabled value="">
+            {mccPlaceholder}
+          </option>
+          {merchantCategoryCodesUS.map(merchantCategory => (
+            <option key={merchantCategory.category} value={merchantCategory.mcc}>
+              {merchantCategory.label}
+            </option>
+          ))}
+        </FieldSelect>
+      ) : null}
+
+      {showBusinessURLField ? (
+        <FieldTextInput
+          id={`${fieldId}.url`}
+          name={`${fieldId}.url`}
+          className={css.textInputRow}
+          autoComplete="url"
+          disabled={disabled}
+          label={businessUrlLabel}
+          placeholder={businessUrlPlaceholder}
+          type="text"
+          validate={businessUrlRequired}
+        />
+      ) : null}
+    </React.Fragment>
+  ) : null;
+};
+
+PayoutDetailsBusinessProfile.defaultProps = {
+  fieldId: null,
+  disabled: false,
+  showBusinessURLField: false,
+  showMCCForUSField: false,
+};
+
+PayoutDetailsBusinessProfile.propTypes = {
+  fieldId: string,
+  disabled: bool,
+  showBusinessURLField: bool,
+  showMCCForUSField: bool,
+
+  // from injectIntl
+  intl: intlShape.isRequired,
+};
+
+export default PayoutDetailsBusinessProfile;

src/translations/en.json

@@ -466,6 +466,12 @@
   "PayoutDetailsForm.birthdayMonthPlaceholder": "mm",
   "PayoutDetailsForm.birthdayRequired": "Birthday is required and must be a valid date.",
   "PayoutDetailsForm.birthdayYearPlaceholder": "yyyy",
+  "PayoutDetailsForm.businessMCCForUSLabel": "Merchant Category Code (MCC)",
+  "PayoutDetailsForm.businessMCCForUSPlaceholder": "Select MCC",
+  "PayoutDetailsForm.businessMCCForUSRequired": "This field is required",
+  "PayoutDetailsForm.businessURLLabel": "Business URL",
+  "PayoutDetailsForm.businessURLPlaceholder": "The business’s publicly available website.",
+  "PayoutDetailsForm.businessURLRequired": "Valid business URL is required.",
   "PayoutDetailsForm.canadianProvinceLabel": "Province",
   "PayoutDetailsForm.canadianProvinceNames.AB": "Alberta",
   "PayoutDetailsForm.canadianProvinceNames.BC": "British Columbia",
@@ -551,12 +557,12 @@
   "PayoutDetailsForm.missingStripeKey": "Stripe publishable key has not been configured to this marketplace. Unfortunately, you can't save your payout preferences yet.",
   "PayoutDetailsForm.personalDetailsAdditionalOwnerTitle": "Additional owner details",
   "PayoutDetailsForm.personalDetailsTitle": "Personal details",
-  "PayoutDetailsForm.personalIdNumberTitle": "Personal id number",
   "PayoutDetailsForm.personalIdNumberLabel.HK": "Hong Kong Identity Card Number (HKID)",
   "PayoutDetailsForm.personalIdNumberLabel.US": "Last 4 digits of social security number (SSN)",
   "PayoutDetailsForm.personalIdNumberPlaceholder.HK": "XY123456",
   "PayoutDetailsForm.personalIdNumberPlaceholder.US": "1234",
   "PayoutDetailsForm.personalIdNumberRequired": "This field is required",
+  "PayoutDetailsForm.personalIdNumberTitle": "Personal id number",
   "PayoutDetailsForm.personalIdNumberValid": "Invalid value",
   "PayoutDetailsForm.postalCodeLabel": "Postal code",
   "PayoutDetailsForm.postalCodePlaceholder": "00100",