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",