diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsAdditionalPersons.js b/src/forms/PayoutDetailsForm/PayoutDetailsAdditionalPersons.js
new file mode 100644
index 00000000..37661cb4
--- /dev/null
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsAdditionalPersons.js
@@ -0,0 +1,144 @@
+import React from 'react';
+import { bool, func, object, string } from 'prop-types';
+import { FormattedMessage, intlShape } from 'react-intl';
+import { FieldArray } from 'react-final-form-arrays';
+import { ExternalLink, IconAdd, IconClose, InlineTextButton } from '../../components';
+
+import PayoutDetailsAddress from './PayoutDetailsAddress';
+import PayoutDetailsPersonalDetails from './PayoutDetailsPersonalDetails';
+
+import css from './PayoutDetailsForm.css';
+
+const PayoutDetailsAdditionalPersons = props => {
+ const {
+ fieldId,
+ country,
+ disabled,
+ form,
+ intl,
+ push,
+ showEmailField,
+ showOrganizationTitleField,
+ showOwnerField,
+ showPersonalAddressField,
+ showPersonalIdNumberField,
+ showPhoneNumberField,
+ values,
+ } = props;
+
+ const additionalPersonInfoLink = (
+
+
+
+ );
+
+ const showOwnershipPercentageField = index =>
+ showOwnerField &&
+ values &&
+ values[fieldId] &&
+ values[fieldId][index] &&
+ values[fieldId][index].role &&
+ values[fieldId][index].role.find(r => r === 'owner');
+
+ return (
+
+
+ {({ fields }) =>
+ fields.map((name, index) => (
+
+
fields.remove(index)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {showPersonalAddressField ? (
+
+ ) : null}
+
+ ))
+ }
+
+
+
+ push(fieldId, undefined)}
+ >
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+PayoutDetailsAdditionalPersons.defaultProps = {
+ disabled: false,
+ showEmailField: false,
+ showOrganizationTitleField: false,
+ showOwnerField: false,
+ showPersonalAddressField: false,
+ showPersonalIdNumberField: false,
+ showPhoneNumberField: false,
+ values: null,
+};
+
+PayoutDetailsAdditionalPersons.propTypes = {
+ country: string.isRequired,
+ fieldId: string.isRequired,
+ form: object.isRequired,
+ push: func.isRequired,
+ disabled: bool,
+ showEmailField: bool,
+ showOrganizationTitleField: bool,
+ showOwnerField: bool,
+ showPersonalAddressField: bool,
+ showPersonalIdNumberField: bool,
+ showPhoneNumberField: bool,
+ values: object,
+
+ // from parent
+ intl: intlShape.isRequired,
+};
+
+export default PayoutDetailsAdditionalPersons;
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsForm.css b/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
index a6d24f04..71e965e3 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
@@ -197,3 +197,34 @@
}
}
+/* Company owners and directors */
+.additionalPersonsWrapper {
+ margin-bottom: 35px;
+
+ @media (--viewportMedium) {
+ margin-bottom: 56px;
+ }
+}
+.additionalPersonWrapper .sectionContainer {
+ margin-bottom: 24px;
+}
+
+.additionalPersonLabel {
+ display: inline-block;
+}
+
+.additionalPersonInfo {
+ @apply --marketplaceH5FontStyles;
+ color: var(--matterColorAnti);
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 5px;
+ padding-bottom: 1px;
+
+ @media (--viewportMedium) {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 6px;
+ padding-bottom: 2px;
+ }
+}
diff --git a/src/translations/en.json b/src/translations/en.json
index 4f769454..79232780 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -458,6 +458,11 @@
"PayoutDetailsForm.accountOpenerInfoText": "Account opener needs to be an individual with authorization to sign on behalf of the organization.",
"PayoutDetailsForm.accountOpenerTitle": "Account opener",
"PayoutDetailsForm.accountTypeTitle": "Account type",
+ "PayoutDetailsForm.additionalPersonInfoLink": "Stripe support.",
+ "PayoutDetailsForm.additionalPersonInfoText": "Stripe requires information of every person that owns at least 25% of the company or exercise significant control over your company. For more information, see {additionalPersonInfoLink}",
+ "PayoutDetailsForm.additionalPersonLink": "Add owners and directors",
+ "PayoutDetailsForm.additionalPersonRemove": "Remove person",
+ "PayoutDetailsForm.additionalPersonTitle": "Owner or director",
"PayoutDetailsForm.addressTitle": "Address",
"PayoutDetailsForm.bankDetails": "Bank details",
"PayoutDetailsForm.birthdayDatePlaceholder": "dd",