Add PayoutDetailsAccountOpener component

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 (
+    <div className={css.accountOpenerWrapper}>
+      <div className={css.accountOpenerInputsWrapper}>
+        <PayoutDetailsPersonalDetails
+          accountType="company"
+          country={country}
+          disabled={disabled}
+          fieldId={fieldId}
+          intl={intl}
+          showEmailField={showEmailField}
+          showOrganizationTitleField={showOrganizationTitleField}
+          showOwnerField={showOwnerField}
+          showOwnershipPercentageField={!!showOwnershipPercentageField}
+          showPersonalIdNumberField={showPersonalIdNumberField}
+          showPhoneNumberField={showPhoneNumberField}
+          sectionTitle={intl.formatMessage({ id: 'PayoutDetailsForm.accountOpenerTitle' })}
+          values={values}
+        />
+        {showPersonalAddressField ? (
+          <PayoutDetailsAddress
+            className={css.personalAddressContainer}
+            country={country}
+            disabled={disabled}
+            fieldId={`${fieldId}.address`}
+            form={form}
+            intl={intl}
+          />
+        ) : null}
+      </div>
+
+      <p className={css.accountOpenerInfo}>
+        <FormattedMessage id="PayoutDetailsForm.accountOpenerInfoText" />
+      </p>
+    </div>
+  );
+};
+
+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;

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);
-}

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