Add PayoutDetailsAdditionalPersons component

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 = (
+    <ExternalLink
+      href="https://support.stripe.com/questions/owners-and-directors"
+      className={css.termsLink}
+    >
+      <FormattedMessage id="PayoutDetailsForm.additionalPersonInfoLink" />
+    </ExternalLink>
+  );
+
+  const showOwnershipPercentageField = index =>
+    showOwnerField &&
+    values &&
+    values[fieldId] &&
+    values[fieldId][index] &&
+    values[fieldId][index].role &&
+    values[fieldId][index].role.find(r => r === 'owner');
+
+  return (
+    <div className={css.additionalPersonsWrapper}>
+      <FieldArray id={`${fieldId}`} name={`${fieldId}`}>
+        {({ fields }) =>
+          fields.map((name, index) => (
+            <div className={css.additionalPersonWrapper} key={name}>
+              <div
+                className={css.fieldArrayRemove}
+                onClick={() => fields.remove(index)}
+                style={{ cursor: 'pointer' }}
+              >
+                <span className={css.additionalPersonLabel}>
+                  <IconClose rootClassName={css.closeIcon} size="small" />
+                  <FormattedMessage id="PayoutDetailsForm.additionalPersonRemove" />
+                </span>
+              </div>
+              <PayoutDetailsPersonalDetails
+                intl={intl}
+                disabled={disabled}
+                values={values}
+                country={country}
+                fieldId={`${fieldId}.${index}`}
+                accountType="company"
+                sectionTitle={intl.formatMessage({ id: 'PayoutDetailsForm.additionalPersonTitle' })}
+                showEmailField={showEmailField}
+                showOrganizationTitleField={showOrganizationTitleField}
+                showOwnerField={showOwnerField}
+                showOwnershipPercentageField={!!showOwnershipPercentageField(index)}
+                showPersonalIdNumberField={showPersonalIdNumberField}
+                showPhoneNumberField={showPhoneNumberField}
+                showRoleField
+              />
+              {showPersonalAddressField ? (
+                <PayoutDetailsAddress
+                  className={css.personalAddressContainer}
+                  country={country}
+                  intl={intl}
+                  disabled={disabled}
+                  form={form}
+                  fieldId={`${fieldId}.${index}.address`}
+                />
+              ) : null}
+            </div>
+          ))
+        }
+      </FieldArray>
+
+      <React.Fragment>
+        <InlineTextButton
+          type="button"
+          rootClassName={css.fieldArrayAdd}
+          onClick={() => push(fieldId, undefined)}
+        >
+          <span className={css.additionalPersonLabel}>
+            <IconAdd rootClassName={css.addIcon} />
+            <FormattedMessage id="PayoutDetailsForm.additionalPersonLink" />
+          </span>
+        </InlineTextButton>
+        <p className={css.additionalPersonInfo}>
+          <FormattedMessage
+            id="PayoutDetailsForm.additionalPersonInfoText"
+            values={{ additionalPersonInfoLink }}
+          />
+        </p>
+      </React.Fragment>
+    </div>
+  );
+};
+
+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;

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

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