+ {showTitle ?
{addressTitle}
: null}
+
{showAddressLine ? (
{
label={streetAddressLabel}
placeholder={streetAddressPlaceholder}
validate={streetAddressRequired}
- onUnmount={() => form.change('streetAddress', undefined)}
+ onUnmount={() => form.change(`${fieldId}.streetAddress`, undefined)}
/>
) : null}
{showPostalCode ? (
{
label={postalCodeLabel}
placeholder={postalCodePlaceholder}
validate={postalCodeRequired}
- onUnmount={() => form.change('postalCode', undefined)}
+ onUnmount={() => form.change(`${fieldId}.postalCode`, undefined)}
/>
) : null}
{showCity ? (
{
label={cityLabel}
placeholder={cityPlaceholder}
validate={cityRequired}
- onUnmount={() => form.change('city', undefined)}
+ onUnmount={() => form.change(`${fieldId}.city`, undefined)}
/>
) : null}
{showState ? (
{
label={stateLabel}
placeholder={statePlaceholder}
validate={stateRequired}
- onUnmount={() => form.change('state', undefined)}
+ onUnmount={() => form.change(`${fieldId}.state`, undefined)}
/>
) : null}
{showProvince ? (
{
PayoutDetailsAddress.defaultProps = {
country: null,
disabled: false,
+ fieldId: null,
};
PayoutDetailsAddress.propTypes = {
country: string,
disabled: bool,
form: object.isRequired,
+ fieldId: string,
+
+ // from injectIntl
+ intl: intlShape.isRequired,
};
export default PayoutDetailsAddress;
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsBankDetails.js b/src/forms/PayoutDetailsForm/PayoutDetailsBankDetails.js
new file mode 100644
index 0000000000..ee5381f60d
--- /dev/null
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsBankDetails.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { bool, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { StripeBankAccountTokenInputField } from '../../components';
+import * as validators from '../../util/validators';
+
+import { stripeCountryConfigs } from './PayoutDetailsForm';
+import css from './PayoutDetailsForm.css';
+
+const countryCurrency = countryCode => {
+ const country = stripeCountryConfigs(countryCode);
+ return country.currency;
+};
+
+const PayoutDetailsBankDetails = props => {
+ const { country, disabled, fieldId } = props;
+
+ // StripeBankAccountTokenInputField handles the error messages
+ // internally, we just have to make sure we require a valid token
+ // out of the field. Therefore the empty validation message.
+ const bankAccountRequired = validators.required(' ');
+
+ return (
+
+
+
+
+
+
+ );
+};
+PayoutDetailsBankDetails.defaultProps = {
+ country: null,
+ disabled: false,
+ fieldId: null,
+};
+
+PayoutDetailsBankDetails.propTypes = {
+ country: string,
+ disabled: bool,
+ fieldId: string,
+};
+
+export default PayoutDetailsBankDetails;
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsForm.css b/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
index 7101f65d68..3cc8235c0a 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsForm.css
@@ -1,6 +1,7 @@
@import '../../marketplace.css';
.root {
+ margin-top: 48px;
}
.disabled {
@@ -38,6 +39,20 @@
margin-bottom: 24px;
}
+.radioButtonRow {
+ display: flex;
+ justify-content: left;
+ flex-shrink: 0;
+ flex-wrap: wrap;
+ width: 100%;
+ margin-bottom: 24px;
+ white-space: nowrap;
+}
+
+.radioButtonRow > :first-child {
+ margin-right: 36px;
+}
+
.field {
width: 100%;
}
@@ -64,6 +79,10 @@
width: calc(60% - 9px);
}
+.taxId {
+ margin-top: 24px;
+}
+
.error {
@apply --marketplaceModalErrorStyles;
}
@@ -86,3 +105,60 @@
cursor: pointer;
}
}
+
+.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 2be1746402..4964c8b3a9 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsForm.js
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsForm.js
@@ -3,25 +3,17 @@ 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,
- StripeBankAccountTokenInputField,
- FieldSelect,
- FieldBirthdayInput,
- FieldTextInput,
- Form,
-} from '../../components';
-import * as validators from '../../util/validators';
+import { Button, ExternalLink, FieldRadioButton, FieldSelect, Form } from '../../components';
import { isStripeInvalidPostalCode } from '../../util/errors';
+import * as validators from '../../util/validators';
-import PayoutDetailsAddress from './PayoutDetailsAddress';
+import PayoutDetailsFormCompany from './PayoutDetailsFormCompany';
+import PayoutDetailsFormIndividual from './PayoutDetailsFormIndividual';
import css from './PayoutDetailsForm.css';
-const MIN_STRIPE_ACCOUNT_AGE = 18;
-
const supportedCountries = config.stripe.supportedCountries.map(c => c.code);
export const stripeCountryConfigs = countryCode => {
@@ -33,20 +25,17 @@ export const stripeCountryConfigs = countryCode => {
return country;
};
-const countryCurrency = countryCode => {
- const country = stripeCountryConfigs(countryCode);
- return country.currency;
-};
-
const PayoutDetailsFormComponent = props => (
{
const {
className,
createStripeAccountError,
disabled,
- form,
handleSubmit,
inProgress,
intl,
@@ -56,49 +45,14 @@ const PayoutDetailsFormComponent = props => (
submitButtonText,
values,
} = fieldRenderProps;
- const { country } = values;
- const firstNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.firstNameLabel' });
- const firstNamePlaceholder = intl.formatMessage({
- id: 'PayoutDetailsForm.firstNamePlaceholder',
- });
- const firstNameRequired = validators.required(
- intl.formatMessage({
- id: 'PayoutDetailsForm.firstNameRequired',
- })
- );
+ const { country, accountType } = values;
- const lastNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.lastNameLabel' });
- const lastNamePlaceholder = intl.formatMessage({
- id: 'PayoutDetailsForm.lastNamePlaceholder',
+ const individualAccountLabel = intl.formatMessage({
+ id: 'PayoutDetailsForm.individualAccount',
});
- const lastNameRequired = validators.required(
- intl.formatMessage({
- id: 'PayoutDetailsForm.lastNameRequired',
- })
- );
- const birthdayLabel = intl.formatMessage({ id: 'PayoutDetailsForm.birthdayLabel' });
- const birthdayLabelMonth = intl.formatMessage({
- id: 'PayoutDetailsForm.birthdayLabelMonth',
- });
- const birthdayLabelYear = intl.formatMessage({ id: 'PayoutDetailsForm.birthdayLabelYear' });
- const birthdayRequired = validators.required(
- intl.formatMessage({
- id: 'PayoutDetailsForm.birthdayRequired',
- })
- );
- const birthdayMinAge = validators.ageAtLeast(
- intl.formatMessage(
- {
- id: 'PayoutDetailsForm.birthdayMinAge',
- },
- {
- minAge: MIN_STRIPE_ACCOUNT_AGE,
- }
- ),
- MIN_STRIPE_ACCOUNT_AGE
- );
+ const companyAccountLabel = intl.formatMessage({ id: 'PayoutDetailsForm.companyAccount' });
const countryLabel = intl.formatMessage({ id: 'PayoutDetailsForm.countryLabel' });
const countryPlaceholder = intl.formatMessage({
@@ -110,59 +64,16 @@ const PayoutDetailsFormComponent = props => (
})
);
- // StripeBankAccountTokenInputField handles the error messages
- // internally, we just have to make sure we require a valid token
- // out of the field. Therefore the empty validation message.
- const bankAccountRequired = validators.required(' ');
-
- const showPersonalIdNumber =
- (country && stripeCountryConfigs(country).personalIdNumberRequired) ||
- (country && stripeCountryConfigs(country).ssnLast4Required);
-
- const personalIdNumberRequired = validators.required(
- intl.formatMessage({
- id: `PayoutDetailsForm.personalIdNumberRequired`,
- })
- );
-
- let personalIdNumberLabel = null;
- let personalIdNumberPlaceholder = null;
- let personalIdNumberValid = personalIdNumberRequired;
-
- if (country === 'US') {
- personalIdNumberLabel = intl.formatMessage({
- id: `PayoutDetailsForm.personalIdNumberLabel.US`,
- });
- personalIdNumberPlaceholder = intl.formatMessage({
- id: `PayoutDetailsForm.personalIdNumberPlaceholder.US`,
- });
-
- const validSSN = validators.validSsnLast4(
- intl.formatMessage({
- id: `PayoutDetailsForm.personalIdNumberValid`,
- })
- );
- personalIdNumberValid = validators.composeValidators(personalIdNumberRequired, validSSN);
- } else if (country === 'HK') {
- personalIdNumberLabel = intl.formatMessage({
- id: `PayoutDetailsForm.personalIdNumberLabel.HK`,
- });
- personalIdNumberPlaceholder = intl.formatMessage({
- id: `PayoutDetailsForm.personalIdNumberPlaceholder.HK`,
- });
- const validHKID = validators.validHKID(
- intl.formatMessage({
- id: `PayoutDetailsForm.personalIdNumberValid`,
- })
- );
- personalIdNumberValid = validators.composeValidators(personalIdNumberRequired, validHKID);
- }
-
const classes = classNames(css.root, className, {
[css.disabled]: disabled,
});
+
const submitInProgress = inProgress;
const submitDisabled = pristine || invalid || disabled || submitInProgress;
+ const showAsRequired = pristine;
+
+ const showIndividual = country && accountType && accountType === 'individual';
+ const showCompany = country && accountType && accountType === 'company';
let error = null;
@@ -185,130 +96,87 @@ const PayoutDetailsFormComponent = props => (
);
+
return (
);
}}
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js b/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
new file mode 100644
index 0000000000..12597d589b
--- /dev/null
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
@@ -0,0 +1,211 @@
+import React from 'react';
+import { bool, string } from 'prop-types';
+import { compose } from 'redux';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { FieldArray } from 'react-final-form-arrays';
+import { FieldTextInput, IconAdd, IconClose, InlineTextButton } from '../../components';
+import * as validators from '../../util/validators';
+
+import PayoutDetailsAddress from './PayoutDetailsAddress';
+import PayoutDetailsBankDetails from './PayoutDetailsBankDetails';
+import PayoutDetailsPersonalDetails from './PayoutDetailsPersonalDetails';
+import { stripeCountryConfigs } from './PayoutDetailsForm';
+import css from './PayoutDetailsForm.css';
+
+// 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({
+ id: 'PayoutDetailsForm.companyNamePlaceholder',
+ });
+ const companyNameRequired = validators.required(
+ intl.formatMessage({
+ id: 'PayoutDetailsForm.companyNameRequired',
+ })
+ );
+
+ const companyTaxIdLabel = intl.formatMessage({
+ id: `PayoutDetailsForm.companyTaxIdLabel.${country}`,
+ });
+ const companyTaxIdPlaceholder = intl.formatMessage(
+ {
+ id: 'PayoutDetailsForm.companyTaxIdPlaceholder',
+ },
+ {
+ idName: companyTaxIdLabel,
+ }
+ );
+ const companyTaxIdRequired = validators.required(
+ intl.formatMessage(
+ {
+ id: 'PayoutDetailsForm.companyTaxIdRequired',
+ },
+ {
+ idName: companyTaxIdLabel,
+ }
+ )
+ );
+
+ const showPersonalAddressField =
+ 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 (
+
+ {country ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {showPersonalAddressField ? (
+
+ ) : null}
+
+ {showAdditionalOwnersField ? (
+
+
+ {({ fields }) =>
+ fields.map((name, index) => (
+
+
fields.remove(index)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {showPersonalAddressField ? (
+
+ ) : null}
+
+
+ {!hasAdditionalOwners || !hasMaxNumberOfAdditionalOwners ? (
+
push('company.additionalOwners', undefined)}
+ >
+
+
+
+
+
+ ) : null}
+
+
{personalDetailsTitle}
+
+
+
+
+
+
+
+
+ {showPersonalIdNumber ? (
+
+ ) : null}
+