diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js b/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
index bf9edf76..12597d58 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
@@ -1,8 +1,9 @@
import React from 'react';
-import { bool, object, string } from 'prop-types';
+import { bool, string } from 'prop-types';
import { compose } from 'redux';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { FieldTextInput } from '../../components';
+import { FieldArray } from 'react-final-form-arrays';
+import { FieldTextInput, IconAdd, IconClose, InlineTextButton } from '../../components';
import * as validators from '../../util/validators';
import PayoutDetailsAddress from './PayoutDetailsAddress';
@@ -11,8 +12,21 @@ import PayoutDetailsPersonalDetails from './PayoutDetailsPersonalDetails';
import { stripeCountryConfigs } from './PayoutDetailsForm';
import css from './PayoutDetailsForm.css';
-const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps, country }) => {
- const { disabled, form, intl, values } = fieldRenderProps;
+// In EU, there can be a maximum of 4 additional owners
+const MAX_NUMBER_OF_ADDITIONAL_OWNERS = 4;
+
+const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
+ const {
+ id,
+ disabled,
+ form,
+ intl,
+ values,
+ form: {
+ mutators: { push },
+ },
+ } = fieldRenderProps;
+ const { country } = values;
const companyNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.companyNameLabel' });
const companyNamePlaceholder = intl.formatMessage({
@@ -51,6 +65,15 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps, country }) => {
stripeCountryConfigs(country).companyConfig &&
stripeCountryConfigs(country).companyConfig.personalAddress;
+ const showAdditionalOwnersField =
+ country &&
+ stripeCountryConfigs(country).companyConfig &&
+ stripeCountryConfigs(country).companyConfig.additionalOwners;
+
+ const hasAdditionalOwners = values.company && values.company.additionalOwners;
+ const hasMaxNumberOfAdditionalOwners =
+ hasAdditionalOwners &&
+ values.company.additionalOwners.length >= MAX_NUMBER_OF_ADDITIONAL_OWNERS;
return (
{country ? (
@@ -100,8 +123,10 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps, country }) => {
country={country}
fieldId="company"
/>
+
{showPersonalAddressField ? (
{
fieldId="company.personalAddress"
/>
) : null}
+
+ {showAdditionalOwnersField ? (
+
+
+ {({ fields }) =>
+ fields.map((name, index) => (
+
+
fields.remove(index)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {showPersonalAddressField ? (
+
+ ) : null}
+
+ ))
+ }
+
+
+ {!hasAdditionalOwners || !hasMaxNumberOfAdditionalOwners ? (
+
push('company.additionalOwners', undefined)}
+ >
+
+
+
+
+
+ ) : null}
+
+ ) : null}
) : null}
@@ -116,28 +194,13 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps, country }) => {
};
PayoutDetailsFormCompanyComponent.defaultProps = {
- className: null,
- country: null,
- createStripeAccountError: null,
+ id: null,
disabled: false,
-<<<<<<< HEAD
- inProgress: false,
- ready: false,
- submitButtonText: null,
-=======
->>>>>>> 70cd0720... Merge to add personal address
};
PayoutDetailsFormCompanyComponent.propTypes = {
- className: string,
- createStripeAccountError: object,
+ id: string,
disabled: bool,
-<<<<<<< HEAD
- inProgress: bool,
- ready: bool,
- submitButtonText: string,
-=======
->>>>>>> 70cd0720... Merge to add personal address
// from injectIntl
intl: intlShape.isRequired,
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsFormIndividual.js b/src/forms/PayoutDetailsForm/PayoutDetailsFormIndividual.js
index 8ac9473d..55ffe0c9 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsFormIndividual.js
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsFormIndividual.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { bool, object } from 'prop-types';
+import { bool } from 'prop-types';
import { compose } from 'redux';
import { injectIntl, intlShape } from 'react-intl';
@@ -18,15 +18,16 @@ const PayoutDetailsFormIndividualComponent = ({ fieldRenderProps }) => {
disabled={disabled}
values={values}
country={country}
+ fieldId="individual"
/>
-
+
);
};
@@ -37,7 +38,6 @@ PayoutDetailsFormIndividualComponent.defaultProps = {
PayoutDetailsFormIndividualComponent.propTypes = {
disabled: bool,
- form: object.isRequired,
// from injectIntl
intl: intlShape.isRequired,
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsPersonalDetails.js b/src/forms/PayoutDetailsForm/PayoutDetailsPersonalDetails.js
index 6cad411c..3b4e7026 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsPersonalDetails.js
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsPersonalDetails.js
@@ -1,6 +1,5 @@
import React from 'react';
import { bool, string } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
import { FieldBirthdayInput, FieldTextInput } from '../../components';
import * as validators from '../../util/validators';
import { intlShape } from 'react-intl';
@@ -13,6 +12,13 @@ const MIN_STRIPE_ACCOUNT_AGE = 18;
const PayoutDetailsPersonalDetails = props => {
const { intl, disabled, values, country, fieldId } = props;
+ const personalDetailsTitle = intl.formatMessage({
+ id:
+ fieldId === 'company' || fieldId === 'individual'
+ ? 'PayoutDetailsForm.personalDetailsTitle'
+ : 'PayoutDetailsForm.personalDetailsAdditionalOwnerTitle',
+ });
+
const firstNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.firstNameLabel' });
const firstNamePlaceholder = intl.formatMessage({
id: 'PayoutDetailsForm.firstNamePlaceholder',
@@ -100,9 +106,7 @@ const PayoutDetailsPersonalDetails = props => {
return (
-
-
-
+
{personalDetailsTitle}