diff --git a/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js b/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js index 972b15b2..93eff0ff 100644 --- a/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js +++ b/src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js @@ -134,7 +134,7 @@ class TokenInputFieldComponent extends Component { }; // Include input values with correct stripe keys - const inputValueObj = mapInputsToStripeAccountKeys(country, inputsNeeded, values); + const inputValueObj = mapInputsToStripeAccountKeys(country, values); accountData = { ...accountData, ...inputValueObj }; // https://stripe.com/docs/stripe-js/reference#collecting-bank-account-details diff --git a/src/config.js b/src/config.js index 725b72da..e224fdc4 100644 --- a/src/config.js +++ b/src/config.js @@ -90,7 +90,12 @@ const stripeSupportedCountries = [ // Australia code: 'AU', currency: 'AUD', - payoutAddressRequired: false, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + state: true, + }, accountConfig: { bsb: true, accountNumber: true, @@ -100,7 +105,11 @@ const stripeSupportedCountries = [ // Austria code: 'AT', currency: 'EUR', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { iban: true, }, @@ -109,7 +118,11 @@ const stripeSupportedCountries = [ // Belgium code: 'BE', currency: 'EUR', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { iban: true, }, @@ -118,7 +131,11 @@ const stripeSupportedCountries = [ // Denmark code: 'DK', currency: 'DKK', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { iban: true, }, @@ -127,7 +144,11 @@ const stripeSupportedCountries = [ // Finland code: 'FI', currency: 'EUR', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { iban: true, }, @@ -136,7 +157,11 @@ const stripeSupportedCountries = [ // France code: 'FR', currency: 'EUR', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { iban: true, }, @@ -145,7 +170,11 @@ const stripeSupportedCountries = [ // Germany code: 'DE', currency: 'EUR', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { iban: true, }, @@ -154,7 +183,11 @@ const stripeSupportedCountries = [ // Ireland code: 'IE', currency: 'EUR', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { iban: true, }, @@ -163,7 +196,11 @@ const stripeSupportedCountries = [ // Italy code: 'IT', currency: 'EUR', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { iban: true, }, @@ -172,7 +209,11 @@ const stripeSupportedCountries = [ // Luxembourg code: 'LU', currency: 'EUR', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { iban: true, }, @@ -181,7 +222,11 @@ const stripeSupportedCountries = [ // Netherlands code: 'NL', currency: 'EUR', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { iban: true, }, @@ -190,7 +235,11 @@ const stripeSupportedCountries = [ // Portugal code: 'PT', currency: 'EUR', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { iban: true, }, @@ -199,7 +248,11 @@ const stripeSupportedCountries = [ // Spain code: 'ES', currency: 'EUR', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { iban: true, }, @@ -208,7 +261,11 @@ const stripeSupportedCountries = [ // Sweden code: 'SE', currency: 'SEK', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { iban: true, }, @@ -217,7 +274,11 @@ const stripeSupportedCountries = [ // United Kingdom code: 'GB', currency: 'GBP', - payoutAddressRequired: true, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + }, accountConfig: { sortCode: true, accountNumber: true, @@ -227,7 +288,12 @@ const stripeSupportedCountries = [ // United States code: 'US', currency: 'USD', - payoutAddressRequired: false, + addressConfig: { + addressLine: true, + city: true, + postalCode: true, + state: true, + }, accountConfig: { routingNumber: true, accountNumber: true, diff --git a/src/ducks/user.duck.js b/src/ducks/user.duck.js index 7dbe3691..ec765155 100644 --- a/src/ducks/user.duck.js +++ b/src/ducks/user.duck.js @@ -397,6 +397,7 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) => streetAddress, postalCode, city, + state, bankAccountToken, } = payoutDetails; diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsAddress.js b/src/forms/PayoutDetailsForm/PayoutDetailsAddress.js new file mode 100644 index 00000000..b0990d08 --- /dev/null +++ b/src/forms/PayoutDetailsForm/PayoutDetailsAddress.js @@ -0,0 +1,137 @@ +import React from 'react'; +import { bool, object, string } from 'prop-types'; +import { FieldTextInput } from '../../components'; +import * as validators from '../../util/validators'; + +import { stripeCountryConfigs } from './PayoutDetailsForm'; +import css from './PayoutDetailsForm.css'; + +const PayoutDetailsAddress = props => { + const { country, intl, disabled, form } = props; + const countryConfig = country ? stripeCountryConfigs(country).addressConfig : null; + + const isRequired = (countryConfig, field) => { + return countryConfig[field]; + }; + + const showAddressLine = country && isRequired(countryConfig, 'addressLine'); + + const streetAddressLabel = intl.formatMessage({ + id: 'PayoutDetailsForm.streetAddressLabel', + }); + const streetAddressPlaceholder = intl.formatMessage({ + id: 'PayoutDetailsForm.streetAddressPlaceholder', + }); + const streetAddressRequired = validators.required( + intl.formatMessage({ + id: 'PayoutDetailsForm.streetAddressRequired', + }) + ); + + const showPostalCode = country && isRequired(countryConfig, 'postalCode'); + + const postalCodeLabel = intl.formatMessage({ id: 'PayoutDetailsForm.postalCodeLabel' }); + const postalCodePlaceholder = intl.formatMessage({ + id: 'PayoutDetailsForm.postalCodePlaceholder', + }); + const postalCodeRequired = validators.required( + intl.formatMessage({ + id: 'PayoutDetailsForm.postalCodeRequired', + }) + ); + + const showCity = country && isRequired(countryConfig, 'city'); + + const cityLabel = intl.formatMessage({ id: 'PayoutDetailsForm.cityLabel' }); + const cityPlaceholder = intl.formatMessage({ id: 'PayoutDetailsForm.cityPlaceholder' }); + const cityRequired = validators.required( + intl.formatMessage({ + id: 'PayoutDetailsForm.cityRequired', + }) + ); + + const showState = country && isRequired(countryConfig, 'state'); + + const stateLabel = intl.formatMessage({ id: 'PayoutDetailsForm.stateLabel' }); + const statePlaceholder = intl.formatMessage({ id: 'PayoutDetailsForm.statePlaceholder' }); + const stateRequired = validators.required( + intl.formatMessage({ + id: 'PayoutDetailsForm.stateRequired', + }) + ); + + return ( +