From 9c31f3e0ea2912119304ef45206fe587801aa607 Mon Sep 17 00:00:00 2001
From: Jenni Nurmi <jenni@sharetribe.com>
Date: Thu, 20 Dec 2018 16:45:35 +0200
Subject: [PATCH] Add additional owners to company account if required

---
 src/ducks/user.duck.js                        |  20 +++-
 .../PayoutDetailsForm/PayoutDetailsAddress.js |  12 +-
 .../PayoutDetailsForm/PayoutDetailsForm.css   |  53 +++++++++
 .../PayoutDetailsForm/PayoutDetailsForm.js    |   6 +-
 .../PayoutDetailsFormCompany.js               | 105 ++++++++++++++----
 .../PayoutDetailsFormIndividual.js            |   8 +-
 .../PayoutDetailsPersonalDetails.js           |  12 +-
 src/stripe-config.js                          |  16 +++
 src/translations/en.json                      |   3 +
 9 files changed, 199 insertions(+), 36 deletions(-)

diff --git a/src/ducks/user.duck.js b/src/ducks/user.duck.js
index 9e7b5ed3..0f40fbd2 100644
--- a/src/ducks/user.duck.js
+++ b/src/ducks/user.duck.js
@@ -408,6 +408,7 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) =>
     companyName,
     companyTaxId,
     personalAddress,
+    additionalOwners,
   } = payoutDetailValues;
 
   const hasProvince = address.province && !address.state;
@@ -433,6 +434,22 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) =>
     };
   }
 
+  const additionalOwnersValue = additionalOwners
+    ? additionalOwners.map(owner => {
+        return {
+          first_name: owner.firstName,
+          last_name: owner.lastName,
+          dob: owner.birthDate,
+          address: {
+            city: owner.city,
+            line1: owner.streetAddress,
+            postal_code: owner.postalCode,
+            state: hasProvince ? owner.province : owner.state ? owner.state : '',
+          },
+        };
+      })
+    : [];
+
   const idNumber =
     country === 'US' ? { ssn_last_4: personalIdNumber } : { personal_id_number: personalIdNumber };
 
@@ -447,13 +464,14 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) =>
       business_name: companyName,
       business_tax_id: companyTaxId,
       personal_address: personalAddressValue,
+      additional_owners: additionalOwnersValue,
       ...idNumber,
     },
     tos_shown_and_accepted: true,
   };
 
   let accountResponse;
-  
+
   return stripe
     .createToken('account', params)
     .then(response => {
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsAddress.js b/src/forms/PayoutDetailsForm/PayoutDetailsAddress.js
index 7ed94678..bda6342f 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsAddress.js
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsAddress.js
@@ -24,16 +24,20 @@ const CANADIAN_PROVINCES = [
 ];
 
 const PayoutDetailsAddress = props => {
-  const { country, intl, disabled, form, fieldId } = props;
+  const { className, country, intl, disabled, form, fieldId } = props;
   const countryConfig = country ? stripeCountryConfigs(country).addressConfig : null;
 
   const isRequired = (countryConfig, field) => {
     return countryConfig[field];
   };
 
+  const showTitle =
+    fieldId === 'company.address' ||
+    fieldId === 'individual' ||
+    fieldId === 'company.personalAddress';
   const addressTitle = intl.formatMessage({
     id:
-      fieldId === 'company'
+      fieldId === 'company.address'
         ? 'PayoutDetailsForm.companyAddressTitle'
         : 'PayoutDetailsForm.streetAddressLabel',
   });
@@ -97,8 +101,8 @@ const PayoutDetailsAddress = props => {
   );
 
   return (
-    <div className={css.sectionContainer}>
-      <h3 className={css.subTitle}>{addressTitle}</h3>
+    <div className={className ? className : css.sectionContainer}>
+      {showTitle ? <h3 className={css.subTitle}>{addressTitle}</h3> : null}
 
       {showAddressLine ? (
         <FieldTextInput
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsForm.css b/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
index bcc1d572..3cc8235c 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
@@ -109,3 +109,56 @@
 .bankDetailsStripeField p {
   @apply --marketplaceH4FontStyles;
 }
+
+.personalAddressContainer {
+  margin-bottom: 28px;
+}
+
+.fieldArrayAdd {
+  @apply --marketplaceLinkStyles;
+  @apply --marketplaceSearchFilterSublabelFontStyles;
+  font-weight: var(--fontWeightMedium);
+  margin-bottom: 2px;
+}
+
+.fieldArrayRemove {
+  @apply --marketplaceH5FontStyles;
+  color: var(--matterColorAnti);
+  float: right;
+  line-height: 20px;
+
+  &:hover {
+    color: var(--matterColor);
+  }
+}
+
+.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;
+}
+
+.addIcon {
+  margin-right: 7px;
+  display: inline-block;
+  height: 18px;
+  padding-top: 1px;
+}
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsForm.js b/src/forms/PayoutDetailsForm/PayoutDetailsForm.js
index 8633e0f2..4964c8b3 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsForm.js
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsForm.js
@@ -3,6 +3,7 @@ import { bool, object, string } from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Form as FinalForm } from 'react-final-form';
+import arrayMutators from 'final-form-arrays';
 import classNames from 'classnames';
 import config from '../../config';
 import { Button, ExternalLink, FieldRadioButton, FieldSelect, Form } from '../../components';
@@ -27,6 +28,9 @@ export const stripeCountryConfigs = countryCode => {
 const PayoutDetailsFormComponent = props => (
   <FinalForm
     {...props}
+    mutators={{
+      ...arrayMutators,
+    }}
     render={fieldRenderProps => {
       const {
         className,
@@ -93,8 +97,6 @@ const PayoutDetailsFormComponent = props => (
         </ExternalLink>
       );
 
-      console.log('Values', JSON.stringify(values, null, ' '));
-
       return (
         <Form className={classes} onSubmit={handleSubmit}>
           <div className={css.sectionContainer}>
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js b/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
index bf9edf76..12597d58 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
@@ -1,8 +1,9 @@
 import React from 'react';
-import { bool, object, string } from 'prop-types';
+import { bool, string } from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { FieldTextInput } from '../../components';
+import { FieldArray } from 'react-final-form-arrays';
+import { FieldTextInput, IconAdd, IconClose, InlineTextButton } from '../../components';
 import * as validators from '../../util/validators';
 
 import PayoutDetailsAddress from './PayoutDetailsAddress';
@@ -11,8 +12,21 @@ import PayoutDetailsPersonalDetails from './PayoutDetailsPersonalDetails';
 import { stripeCountryConfigs } from './PayoutDetailsForm';
 import css from './PayoutDetailsForm.css';
 
-const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps, country }) => {
-  const { disabled, form, intl, values } = fieldRenderProps;
+// In EU, there can be a maximum of 4 additional owners
+const MAX_NUMBER_OF_ADDITIONAL_OWNERS = 4;
+
+const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
+  const {
+    id,
+    disabled,
+    form,
+    intl,
+    values,
+    form: {
+      mutators: { push },
+    },
+  } = fieldRenderProps;
+  const { country } = values;
 
   const companyNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.companyNameLabel' });
   const companyNamePlaceholder = intl.formatMessage({
@@ -51,6 +65,15 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps, country }) => {
     stripeCountryConfigs(country).companyConfig &&
     stripeCountryConfigs(country).companyConfig.personalAddress;
 
+  const showAdditionalOwnersField =
+    country &&
+    stripeCountryConfigs(country).companyConfig &&
+    stripeCountryConfigs(country).companyConfig.additionalOwners;
+
+  const hasAdditionalOwners = values.company && values.company.additionalOwners;
+  const hasMaxNumberOfAdditionalOwners =
+    hasAdditionalOwners &&
+    values.company.additionalOwners.length >= MAX_NUMBER_OF_ADDITIONAL_OWNERS;
   return (
     <React.Fragment>
       {country ? (
@@ -100,8 +123,10 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps, country }) => {
             country={country}
             fieldId="company"
           />
+
           {showPersonalAddressField ? (
             <PayoutDetailsAddress
+              className={css.personalAddressContainer}
               country={country}
               intl={intl}
               disabled={disabled}
@@ -109,6 +134,59 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps, country }) => {
               fieldId="company.personalAddress"
             />
           ) : null}
+
+          {showAdditionalOwnersField ? (
+            <div className={css.additionalOwnerWrapper}>
+              <FieldArray id={id} name={'company.additionalOwners'}>
+                {({ fields }) =>
+                  fields.map((name, index) => (
+                    <div className={css.additionalOwnerWrapper} key={name}>
+                      <div
+                        className={css.fieldArrayRemove}
+                        onClick={() => fields.remove(index)}
+                        style={{ cursor: 'pointer' }}
+                      >
+                        <span className={css.additionalOwnerLabel}>
+                          <IconClose rootClassName={css.closeIcon} size="small" />
+                          <FormattedMessage id="PayoutDetailsForm.additionalOwnerRemove" />
+                        </span>
+                      </div>
+                      <PayoutDetailsPersonalDetails
+                        intl={intl}
+                        disabled={disabled}
+                        values={values}
+                        country={country}
+                        fieldId={`company.additionalOwners.${index}`}
+                      />
+                      {showPersonalAddressField ? (
+                        <PayoutDetailsAddress
+                          className={css.personalAddressContainer}
+                          country={country}
+                          intl={intl}
+                          disabled={disabled}
+                          form={form}
+                          fieldId={`company.additionalOwners.${index}`}
+                        />
+                      ) : null}
+                    </div>
+                  ))
+                }
+              </FieldArray>
+
+              {!hasAdditionalOwners || !hasMaxNumberOfAdditionalOwners ? (
+                <InlineTextButton
+                  type="button"
+                  className={css.fieldArrayAdd}
+                  onClick={() => push('company.additionalOwners', undefined)}
+                >
+                  <span className={css.additionalOwnerLabel}>
+                    <IconAdd rootClassName={css.addIcon} />
+                    <FormattedMessage id="PayoutDetailsForm.additionalOwnerLabel" />
+                  </span>
+                </InlineTextButton>
+              ) : null}
+            </div>
+          ) : null}
         </React.Fragment>
       ) : null}
     </React.Fragment>
@@ -116,28 +194,13 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps, country }) => {
 };
 
 PayoutDetailsFormCompanyComponent.defaultProps = {
-  className: null,
-  country: null,
-  createStripeAccountError: null,
+  id: null,
   disabled: false,
-<<<<<<< HEAD
-  inProgress: false,
-  ready: false,
-  submitButtonText: null,
-=======
->>>>>>> 70cd0720... Merge to add personal address
 };
 
 PayoutDetailsFormCompanyComponent.propTypes = {
-  className: string,
-  createStripeAccountError: object,
+  id: string,
   disabled: bool,
-<<<<<<< HEAD
-  inProgress: bool,
-  ready: bool,
-  submitButtonText: string,
-=======
->>>>>>> 70cd0720... Merge to add personal address
 
   // from injectIntl
   intl: intlShape.isRequired,
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsFormIndividual.js b/src/forms/PayoutDetailsForm/PayoutDetailsFormIndividual.js
index 8ac9473d..55ffe0c9 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsFormIndividual.js
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsFormIndividual.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { bool, object } from 'prop-types';
+import { bool } from 'prop-types';
 import { compose } from 'redux';
 import { injectIntl, intlShape } from 'react-intl';
 
@@ -18,15 +18,16 @@ const PayoutDetailsFormIndividualComponent = ({ fieldRenderProps }) => {
         disabled={disabled}
         values={values}
         country={country}
+        fieldId="individual"
       />
       <PayoutDetailsAddress
         country={country}
         intl={intl}
         disabled={disabled}
         form={form}
-        fieldId="individual"
+        fieldId="individual.address"
       />
-      <PayoutDetailsBankDetails country={country} disabled={disabled} />
+      <PayoutDetailsBankDetails country={country} disabled={disabled} fieldId="individual" />
     </React.Fragment>
   );
 };
@@ -37,7 +38,6 @@ PayoutDetailsFormIndividualComponent.defaultProps = {
 
 PayoutDetailsFormIndividualComponent.propTypes = {
   disabled: bool,
-  form: object.isRequired,
 
   // from injectIntl
   intl: intlShape.isRequired,
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsPersonalDetails.js b/src/forms/PayoutDetailsForm/PayoutDetailsPersonalDetails.js
index 6cad411c..3b4e7026 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsPersonalDetails.js
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsPersonalDetails.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { bool, string } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import { FieldBirthdayInput, FieldTextInput } from '../../components';
 import * as validators from '../../util/validators';
 import { intlShape } from 'react-intl';
@@ -13,6 +12,13 @@ const MIN_STRIPE_ACCOUNT_AGE = 18;
 const PayoutDetailsPersonalDetails = props => {
   const { intl, disabled, values, country, fieldId } = props;
 
+  const personalDetailsTitle = intl.formatMessage({
+    id:
+      fieldId === 'company' || fieldId === 'individual'
+        ? 'PayoutDetailsForm.personalDetailsTitle'
+        : 'PayoutDetailsForm.personalDetailsAdditionalOwnerTitle',
+  });
+
   const firstNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.firstNameLabel' });
   const firstNamePlaceholder = intl.formatMessage({
     id: 'PayoutDetailsForm.firstNamePlaceholder',
@@ -100,9 +106,7 @@ const PayoutDetailsPersonalDetails = props => {
 
   return (
     <div className={css.sectionContainer}>
-      <h3 className={css.subTitle}>
-        <FormattedMessage id="PayoutDetailsForm.personalDetailsTitle" />
-      </h3>
+      <h3 className={css.subTitle}>{personalDetailsTitle}</h3>
       <div className={css.formRow}>
         <FieldTextInput
           id={`${fieldId}.firstName`}
diff --git a/src/stripe-config.js b/src/stripe-config.js
index 23068b25..611d9bba 100644
--- a/src/stripe-config.js
+++ b/src/stripe-config.js
@@ -40,6 +40,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -56,6 +57,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -88,6 +90,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -104,6 +107,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -120,6 +124,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -136,6 +141,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -170,6 +176,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -186,6 +193,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -202,6 +210,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -218,6 +227,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -247,6 +257,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -263,6 +274,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -279,6 +291,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -295,6 +308,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -311,6 +325,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
@@ -328,6 +343,7 @@ export const stripeSupportedCountries = [
     },
     companyConfig: {
       personalAddress: true,
+      additionalOwners: true,
     },
   },
   {
diff --git a/src/translations/en.json b/src/translations/en.json
index eebac309..c948ddfa 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -453,6 +453,8 @@
   "PasswordResetPage.resetFailed": "Reset failed. Please try again.",
   "PasswordResetPage.title": "Reset password",
   "PayoutDetailsForm.accountTypeTitle": "Account type",
+  "PayoutDetailsForm.additionalOwnerLabel": "Add additional owner",
+  "PayoutDetailsForm.additionalOwnerRemove": "Remove additional owner",
   "PayoutDetailsForm.addressTitle": "Address",
   "PayoutDetailsForm.bankDetails": "Bank details",
   "PayoutDetailsForm.birthdayDatePlaceholder": "dd",
@@ -545,6 +547,7 @@
   "PayoutDetailsForm.lastNameLabel": "Last name",
   "PayoutDetailsForm.lastNamePlaceholder": "Doe",
   "PayoutDetailsForm.lastNameRequired": "This field is required",
+  "PayoutDetailsForm.personalDetailsAdditionalOwnerTitle": "Additional owner details",
   "PayoutDetailsForm.personalDetailsTitle": "Personal details",
   "PayoutDetailsForm.personalIdNumberTitle": "Personal id number",
   "PayoutDetailsForm.personalIdNumberLabel.HK": "Hong Kong Identity Card Number (HKID)",