diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsAccountOpener.js b/src/forms/PayoutDetailsForm/PayoutDetailsAccountOpener.js
new file mode 100644
index 00000000..98817d09
--- /dev/null
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsAccountOpener.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import { bool, object, string } from 'prop-types';
+import { FormattedMessage, intlShape } from 'react-intl';
+
+import PayoutDetailsAddress from './PayoutDetailsAddress';
+import PayoutDetailsPersonalDetails from './PayoutDetailsPersonalDetails';
+
+import css from './PayoutDetailsForm.css';
+
+const PayoutDetailsAccountOpener = props => {
+ const {
+ fieldId,
+ country,
+ disabled,
+ form,
+ intl,
+ showEmailField,
+ showOrganizationTitleField,
+ showOwnerField,
+ showPersonalAddressField,
+ showPersonalIdNumberField,
+ showPhoneNumberField,
+ values,
+ } = props;
+
+ const showOwnershipPercentageField =
+ showOwnerField &&
+ values &&
+ values[fieldId] &&
+ values[fieldId].role &&
+ values[fieldId].role.find(r => r === 'owner');
+
+ return (
+
+
+
+ {showPersonalAddressField ? (
+
+ ) : null}
+
+
+
+
+
+
+ );
+};
+
+PayoutDetailsAccountOpener.defaultProps = {
+ disabled: false,
+ showEmailField: false,
+ showOrganizationTitleField: false,
+ showOwnerField: false,
+ showPersonalAddressField: false,
+ showPersonalIdNumberField: false,
+ showPhoneNumberField: false,
+ values: null,
+};
+
+PayoutDetailsAccountOpener.propTypes = {
+ country: string.isRequired,
+ fieldId: string.isRequired,
+ form: object.isRequired,
+ disabled: bool,
+ showEmailField: bool,
+ showOrganizationTitleField: bool,
+ showOwnerField: bool,
+ showPersonalAddressField: bool,
+ showPersonalIdNumberField: bool,
+ showPhoneNumberField: bool,
+ values: object,
+
+ // from parent
+ intl: intlShape.isRequired,
+};
+
+export default PayoutDetailsAccountOpener;
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsForm.css b/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
index 67687201..a6d24f04 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
@@ -110,6 +110,10 @@
@apply --marketplaceH4FontStyles;
}
+.missingStripeKey {
+ color: var(--failColor);
+}
+
.personalAddressContainer {
margin-bottom: 28px;
}
@@ -134,25 +138,6 @@
.closeIcon {
@apply --marketplaceModalCloseIcon;
-}
-
-.additionalOwnerWrapper {
- margin-bottom: 35px;
-
- @media (--viewportMedium) {
- margin-bottom: 56px;
- }
-}
-
-.additionalOwnerWrapper .sectionContainer {
- margin-bottom: 24px;
-}
-
-.additionalOwnerLabel {
- display: inline-block;
-}
-
-.closeIcon {
margin-right: 5px;
}
@@ -163,7 +148,40 @@
padding-top: 1px;
}
-.additionalOwnerInfo {
+.roleField {
+ border: 0;
+ padding: 0;
+ margin-bottom: 24px;
+}
+
+.ownershipPercentage {
+ position: relative;
+ max-width: 90px;
+ padding-right: 24px;
+ margin-bottom: 24px;
+ white-space: nowrap;
+
+ &:after {
+ content: '%';
+ position: absolute;
+ top: 36px;
+ right: 6px;
+ }
+}
+
+/* Company account opener */
+.accountOpenerWrapper {
+ margin-bottom: 35px;
+
+ @media (--viewportMedium) {
+ margin-bottom: 56px;
+ }
+}
+.accountOpenerInputsWrapper .sectionContainer {
+ margin-bottom: 24px;
+}
+
+.accountOpenerInfo {
@apply --marketplaceH5FontStyles;
color: var(--matterColorAnti);
margin-top: 0;
@@ -179,6 +197,3 @@
}
}
-.missingStripeKey {
- color: var(--failColor);
-}
diff --git a/src/translations/en.json b/src/translations/en.json
index 9717c343..4f769454 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -455,6 +455,8 @@
"PasswordResetPage.recoveryLinkText": "password recovery page",
"PasswordResetPage.resetFailed": "Reset failed. Please try again.",
"PasswordResetPage.title": "Reset password",
+ "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.addressTitle": "Address",
"PayoutDetailsForm.bankDetails": "Bank details",