Add personal address to company account if required

This commit is contained in:
Jenni Nurmi 2018-12-19 16:56:56 +02:00
parent 1ba857c3ce
commit 6319c77731
8 changed files with 187 additions and 74 deletions

View file

@ -389,32 +389,50 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) =>
dispatch(stripeAccountCreateRequest());
const { accountType, country } = payoutDetails;
let payoutDetailValues;
if (accountType === 'company') {
payoutDetailValues = payoutDetails['company'];
} else if (accountType === 'individual') {
payoutDetailValues = payoutDetails['individual'];
}
const {
firstName,
lastName,
birthDate,
country,
streetAddress,
postalCode,
city,
state,
province,
address,
bankAccountToken,
personalIdNumber,
accountType,
companyName,
companyTaxId,
} = payoutDetails;
personalAddress,
} = payoutDetailValues;
const hasProvince = province && !state;
const hasProvince = address.province && !address.state;
const address = {
city,
line1: streetAddress,
postal_code: postalCode,
state: hasProvince ? province : state,
const addressValue = {
city: address.city,
line1: address.streetAddress,
postal_code: address.postalCode,
state: hasProvince ? address.province : address.state ? address.state : '',
};
let personalAddressValue;
if (personalAddress) {
personalAddressValue = {
city: personalAddress.city,
line1: personalAddress.streetAddress,
postal_code: personalAddress.postalCode,
state: hasProvince
? personalAddress.province
: personalAddress.state
? personalAddress.state
: '',
};
}
const idNumber =
country === 'US' ? { ssn_last_4: personalIdNumber } : { personal_id_number: personalIdNumber };
@ -423,18 +441,19 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) =>
legal_entity: {
first_name: firstName,
last_name: lastName,
address: omitBy(address, isUndefined),
address: omitBy(addressValue, isUndefined),
dob: birthDate,
type: accountType,
business_name: companyName,
business_tax_id: companyTaxId,
personal_address: personalAddressValue,
...idNumber,
},
tos_shown_and_accepted: true,
};
let accountResponse;
return stripe
.createToken('account', params)
.then(response => {

View file

@ -2,6 +2,7 @@ import React from 'react';
import { bool, object, string } from 'prop-types';
import { FieldSelect, FieldTextInput } from '../../components';
import * as validators from '../../util/validators';
import { intlShape } from 'react-intl';
import { stripeCountryConfigs } from './PayoutDetailsForm';
import css from './PayoutDetailsForm.css';
@ -23,7 +24,7 @@ const CANADIAN_PROVINCES = [
];
const PayoutDetailsAddress = props => {
const { country, intl, disabled, form, companyAddress } = props;
const { country, intl, disabled, form, fieldId } = props;
const countryConfig = country ? stripeCountryConfigs(country).addressConfig : null;
const isRequired = (countryConfig, field) => {
@ -31,9 +32,10 @@ const PayoutDetailsAddress = props => {
};
const addressTitle = intl.formatMessage({
id: companyAddress
? 'PayoutDetailsForm.companyAddressTitle'
: 'PayoutDetailsForm.streetAddressLabel',
id:
fieldId === 'company'
? 'PayoutDetailsForm.companyAddressTitle'
: 'PayoutDetailsForm.streetAddressLabel',
});
const showAddressLine = country && isRequired(countryConfig, 'addressLine');
@ -100,8 +102,8 @@ const PayoutDetailsAddress = props => {
{showAddressLine ? (
<FieldTextInput
id="streetAddress"
name="streetAddress"
id={`${fieldId}.streetAddress`}
name={`${fieldId}.streetAddress`}
disabled={disabled}
className={css.field}
type="text"
@ -109,14 +111,14 @@ const PayoutDetailsAddress = props => {
label={streetAddressLabel}
placeholder={streetAddressPlaceholder}
validate={streetAddressRequired}
onUnmount={() => form.change('streetAddress', undefined)}
onUnmount={() => form.change(`${fieldId}.streetAddress`, undefined)}
/>
) : null}
<div className={css.formRow}>
{showPostalCode ? (
<FieldTextInput
id="postalCode"
name="postalCode"
id={`${fieldId}.postalCode`}
name={`${fieldId}.postalCode`}
disabled={disabled}
className={css.postalCode}
type="text"
@ -124,13 +126,13 @@ const PayoutDetailsAddress = props => {
label={postalCodeLabel}
placeholder={postalCodePlaceholder}
validate={postalCodeRequired}
onUnmount={() => form.change('postalCode', undefined)}
onUnmount={() => form.change(`${fieldId}.postalCode`, undefined)}
/>
) : null}
{showCity ? (
<FieldTextInput
id="city"
name="city"
id={`${fieldId}.city`}
name={`${fieldId}.city`}
disabled={disabled}
className={css.city}
type="text"
@ -138,14 +140,14 @@ const PayoutDetailsAddress = props => {
label={cityLabel}
placeholder={cityPlaceholder}
validate={cityRequired}
onUnmount={() => form.change('city', undefined)}
onUnmount={() => form.change(`${fieldId}.city`, undefined)}
/>
) : null}
</div>
{showState ? (
<FieldTextInput
id="state"
name="state"
id={`${fieldId}.state`}
name={`${fieldId}.state`}
disabled={disabled}
className={css.state}
type="text"
@ -153,14 +155,14 @@ const PayoutDetailsAddress = props => {
label={stateLabel}
placeholder={statePlaceholder}
validate={stateRequired}
onUnmount={() => form.change('state', undefined)}
onUnmount={() => form.change(`${fieldId}.state`, undefined)}
/>
) : null}
{showProvince ? (
<FieldSelect
id="province"
name="province"
id={`${fieldId}.province`}
name={`${fieldId}.province`}
disabled={disabled}
className={css.selectCountry}
autoComplete="province"
@ -183,12 +185,17 @@ const PayoutDetailsAddress = props => {
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;

View file

@ -13,7 +13,7 @@ const countryCurrency = countryCode => {
};
const PayoutDetailsBankDetails = props => {
const { country, disabled } = props;
const { country, disabled, fieldId } = props;
// StripeBankAccountTokenInputField handles the error messages
// internally, we just have to make sure we require a valid token
@ -28,7 +28,7 @@ const PayoutDetailsBankDetails = props => {
<StripeBankAccountTokenInputField
className={css.bankDetailsStripeField}
disabled={disabled}
name="bankAccountToken"
name={`${fieldId}.bankAccountToken`}
formName="PayoutDetailsForm"
country={country}
currency={countryCurrency(country)}

View file

@ -93,6 +93,8 @@ const PayoutDetailsFormComponent = props => (
</ExternalLink>
);
console.log('Values', JSON.stringify(values, null, ' '));
return (
<Form className={classes} onSubmit={handleSubmit}>
<div className={css.sectionContainer}>
@ -142,9 +144,12 @@ const PayoutDetailsFormComponent = props => (
</div>
{showIndividual ? (
<PayoutDetailsFormIndividual fieldRenderProps={fieldRenderProps} />
<PayoutDetailsFormIndividual
fieldRenderProps={fieldRenderProps}
country={country}
/>
) : showCompany ? (
<PayoutDetailsFormCompany fieldRenderProps={fieldRenderProps} />
<PayoutDetailsFormCompany fieldRenderProps={fieldRenderProps} country={country} />
) : null}
{error}

View file

@ -8,11 +8,11 @@ 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';
const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps, country }) => {
const { disabled, form, intl, values } = fieldRenderProps;
const { country } = values;
const companyNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.companyNameLabel' });
const companyNamePlaceholder = intl.formatMessage({
@ -46,6 +46,11 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
)
);
const showPersonalAddressField =
country &&
stripeCountryConfigs(country).companyConfig &&
stripeCountryConfigs(country).companyConfig.personalAddress;
return (
<React.Fragment>
{country ? (
@ -53,29 +58,29 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
<div className={css.sectionContainer}>
<h3 className={css.subTitle}>
<FormattedMessage id="PayoutDetailsForm.companyDetailsTitle" />
</h3>
<FieldTextInput
id="companyName"
name="companyName"
disabled={disabled}
type="text"
autoComplete="company-name"
label={companyNameLabel}
placeholder={companyNamePlaceholder}
validate={companyNameRequired}
/>
</h3>
<FieldTextInput
id="company.companyName"
name="company.companyName"
disabled={disabled}
type="text"
autoComplete="company-name"
label={companyNameLabel}
placeholder={companyNamePlaceholder}
validate={companyNameRequired}
/>
<FieldTextInput
id="companyTaxId"
name="companyTaxId"
className={css.taxId}
disabled={disabled}
type="text"
autoComplete="company-tax-id"
label={companyTaxIdLabel}
placeholder={companyTaxIdPlaceholder}
validate={companyTaxIdRequired}
/>
<FieldTextInput
id="company.companyTaxId"
name="company.companyTaxId"
className={css.taxId}
disabled={disabled}
type="text"
autoComplete="company-tax-id"
label={companyTaxIdLabel}
placeholder={companyTaxIdPlaceholder}
validate={companyTaxIdRequired}
/>
</div>
<PayoutDetailsAddress
@ -83,17 +88,27 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
intl={intl}
disabled={disabled}
form={form}
companyAddress
fieldId="company.address"
/>
<PayoutDetailsBankDetails country={country} disabled={disabled} />
<PayoutDetailsBankDetails country={country} disabled={disabled} fieldId="company" />
<PayoutDetailsPersonalDetails
intl={intl}
disabled={disabled}
values={values}
country={country}
fieldId="company"
/>
{showPersonalAddressField ? (
<PayoutDetailsAddress
country={country}
intl={intl}
disabled={disabled}
form={form}
fieldId="company.personalAddress"
/>
) : null}
</React.Fragment>
) : null}
</React.Fragment>
@ -105,18 +120,24 @@ PayoutDetailsFormCompanyComponent.defaultProps = {
country: null,
createStripeAccountError: null,
disabled: false,
<<<<<<< HEAD
inProgress: false,
ready: false,
submitButtonText: null,
=======
>>>>>>> 70cd0720... Merge to add personal address
};
PayoutDetailsFormCompanyComponent.propTypes = {
className: string,
createStripeAccountError: object,
disabled: bool,
<<<<<<< HEAD
inProgress: bool,
ready: bool,
submitButtonText: string,
=======
>>>>>>> 70cd0720... Merge to add personal address
// from injectIntl
intl: intlShape.isRequired,

View file

@ -19,7 +19,13 @@ const PayoutDetailsFormIndividualComponent = ({ fieldRenderProps }) => {
values={values}
country={country}
/>
<PayoutDetailsAddress country={country} intl={intl} disabled={disabled} form={form} />
<PayoutDetailsAddress
country={country}
intl={intl}
disabled={disabled}
form={form}
fieldId="individual"
/>
<PayoutDetailsBankDetails country={country} disabled={disabled} />
</React.Fragment>
);

View file

@ -3,6 +3,7 @@ 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';
import { stripeCountryConfigs } from './PayoutDetailsForm';
import css from './PayoutDetailsForm.css';
@ -10,7 +11,7 @@ import css from './PayoutDetailsForm.css';
const MIN_STRIPE_ACCOUNT_AGE = 18;
const PayoutDetailsPersonalDetails = props => {
const { intl, disabled, values, country } = props;
const { intl, disabled, values, country, fieldId } = props;
const firstNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.firstNameLabel' });
const firstNamePlaceholder = intl.formatMessage({
@ -104,8 +105,8 @@ const PayoutDetailsPersonalDetails = props => {
</h3>
<div className={css.formRow}>
<FieldTextInput
id="fname"
name="fname"
id={`${fieldId}.firstName`}
name={`${fieldId}.firstName`}
disabled={disabled}
className={css.firstName}
type="text"
@ -115,8 +116,8 @@ const PayoutDetailsPersonalDetails = props => {
validate={firstNameRequired}
/>
<FieldTextInput
id="lname"
name="lname"
id={`${fieldId}.lastName`}
name={`${fieldId}.lastName`}
disabled={disabled}
className={css.lastName}
type="text"
@ -128,8 +129,8 @@ const PayoutDetailsPersonalDetails = props => {
</div>
<div className={css.formRow}>
<FieldBirthdayInput
id="birthDate"
name="birthDate"
id={`${fieldId}.birthDate`}
name={`${fieldId}.birthDate`}
disabled={disabled}
className={css.field}
label={birthdayLabel}
@ -143,8 +144,8 @@ const PayoutDetailsPersonalDetails = props => {
{showPersonalIdNumber ? (
<FieldTextInput
id="personalIdNumber"
name="personalIdNumber"
id={`${fieldId}.personalIdNumber`}
name={`${fieldId}.personalIdNumber`}
disabled={disabled}
className={css.personalIdNumber}
type="text"
@ -159,11 +160,14 @@ const PayoutDetailsPersonalDetails = props => {
PayoutDetailsPersonalDetails.defaultProps = {
country: null,
disabled: false,
fieldId: null,
};
PayoutDetailsPersonalDetails.propTypes = {
country: string,
disabled: bool,
fieldId: string,
intl: intlShape.isRequired,
};
export default PayoutDetailsPersonalDetails;

View file

@ -38,6 +38,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// Belgium
@ -51,6 +54,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// Canada
@ -80,6 +86,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// Finland
@ -93,6 +102,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// France
@ -106,6 +118,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// Germany
@ -119,6 +134,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// Hong Kong
@ -134,6 +152,9 @@ export const stripeSupportedCountries = [
accountNumber: true,
},
personalIdNumberRequired: true,
companyConfig: {
personalAddress: true,
},
},
{
// Ireland
@ -147,6 +168,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// Italy
@ -160,6 +184,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// Luxembourg
@ -173,6 +200,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// Netherlands
@ -186,6 +216,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// New Zealand
@ -212,6 +245,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// Portugal
@ -225,6 +261,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// Spain
@ -238,6 +277,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// Sweden
@ -251,6 +293,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// Switzerland
@ -264,6 +309,9 @@ export const stripeSupportedCountries = [
accountConfig: {
iban: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// United Kingdom
@ -278,6 +326,9 @@ export const stripeSupportedCountries = [
sortCode: true,
accountNumber: true,
},
companyConfig: {
personalAddress: true,
},
},
{
// United States