diff --git a/src/containers/PayoutDetailsForm/PayoutDetailsForm.js b/src/containers/PayoutDetailsForm/PayoutDetailsForm.js
index 71b72301..f2c2559a 100644
--- a/src/containers/PayoutDetailsForm/PayoutDetailsForm.js
+++ b/src/containers/PayoutDetailsForm/PayoutDetailsForm.js
@@ -1,18 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
import { compose } from 'redux';
-import { connect } from 'react-redux';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { reduxForm, formValueSelector, propTypes as formPropTypes } from 'redux-form';
+import { Form as FinalForm } from 'react-final-form';
import classNames from 'classnames';
import config from '../../config';
import {
- Form,
Button,
StripeBankAccountTokenInputField,
- SelectField,
+ FieldSelect,
FieldBirthdayInput,
- TextInputField,
+ FieldTextInput,
+ Form,
} from '../../components';
import * as validators from '../../util/validators';
import { isStripeInvalidPostalCode } from '../../util/errors';
@@ -42,266 +41,278 @@ const countryCurrency = countryCode => {
return country.currency;
};
-const PayoutDetailsFormComponent = props => {
- const {
- className,
- country,
- createStripeAccountError,
- form,
- disabled,
- inProgress,
- ready,
- submitButtonText,
- handleSubmit,
- pristine,
- submitting,
- invalid,
- intl,
- } = props;
+const PayoutDetailsFormComponent = props => (
+ {
+ const {
+ className,
+ createStripeAccountError,
+ disabled,
+ handleSubmit,
+ inProgress,
+ intl,
+ invalid,
+ pristine,
+ ready,
+ submitButtonText,
+ submitting,
+ 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 firstNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.firstNameLabel' });
+ const firstNamePlaceholder = intl.formatMessage({
+ id: 'PayoutDetailsForm.firstNamePlaceholder',
+ });
+ const firstNameRequired = validators.required(
+ intl.formatMessage({
+ id: 'PayoutDetailsForm.firstNameRequired',
+ })
+ );
- const lastNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.lastNameLabel' });
- const lastNamePlaceholder = intl.formatMessage({ id: 'PayoutDetailsForm.lastNamePlaceholder' });
- const lastNameRequired = validators.required(
- intl.formatMessage({
- id: 'PayoutDetailsForm.lastNameRequired',
- })
- );
+ const lastNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.lastNameLabel' });
+ const lastNamePlaceholder = intl.formatMessage({
+ id: 'PayoutDetailsForm.lastNamePlaceholder',
+ });
+ const lastNameRequired = validators.required(
+ intl.formatMessage({
+ id: 'PayoutDetailsForm.lastNameRequired',
+ })
+ );
- const birthdayId = `${form}.birthday`;
- 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,
+ 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 countryLabel = intl.formatMessage({ id: 'PayoutDetailsForm.countryLabel' });
+ const countryPlaceholder = intl.formatMessage({
+ id: 'PayoutDetailsForm.countryPlaceholder',
+ });
+ const countryRequired = validators.required(
+ intl.formatMessage({
+ id: 'PayoutDetailsForm.countryRequired',
+ })
+ );
+
+ const streetAddressLabel = intl.formatMessage({
+ id: 'PayoutDetailsForm.streetAddressLabel',
+ });
+ const streetAddressPlaceholder = intl.formatMessage({
+ id: 'PayoutDetailsForm.streetAddressPlaceholder',
+ });
+ const streetAddressRequired = validators.required(
+ intl.formatMessage({
+ id: 'PayoutDetailsForm.streetAddressRequired',
+ })
+ );
+
+ const postalCodeLabel = intl.formatMessage({ id: 'PayoutDetailsForm.postalCodeLabel' });
+ const postalCodePlaceholder = intl.formatMessage({
+ id: 'PayoutDetailsForm.postalCodePlaceholder',
+ });
+ const postalCodeRequired = validators.required(
+ intl.formatMessage({
+ id: 'PayoutDetailsForm.postalCodeRequired',
+ })
+ );
+
+ const cityLabel = intl.formatMessage({ id: 'PayoutDetailsForm.cityLabel' });
+ const cityPlaceholder = intl.formatMessage({ id: 'PayoutDetailsForm.cityPlaceholder' });
+ const cityRequired = validators.required(
+ intl.formatMessage({
+ id: 'PayoutDetailsForm.cityRequired',
+ })
+ );
+
+ const showAddressFields = country && requiresAddress(country);
+
+ // 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 classes = classNames(css.root, className, {
+ [css.disabled]: disabled,
+ });
+ const submitInProgress = submitting || inProgress;
+ const submitDisabled = pristine || invalid || disabled || submitInProgress;
+
+ let error = null;
+
+ if (isStripeInvalidPostalCode(createStripeAccountError)) {
+ error = (
+
+
+
+ );
+ } else if (createStripeAccountError) {
+ error = (
+
+
+
+ );
}
- ),
- MIN_STRIPE_ACCOUNT_AGE
- );
- const countryLabel = intl.formatMessage({ id: 'PayoutDetailsForm.countryLabel' });
- const countryPlaceholder = intl.formatMessage({ id: 'PayoutDetailsForm.countryPlaceholder' });
- const countryRequired = validators.required(
- intl.formatMessage({
- id: 'PayoutDetailsForm.countryRequired',
- })
- );
+ return (
+
- );
-};
+
+
+
+
+
+
+ {supportedCountries.map(c => (
+
+ ))}
+
+ {showAddressFields ? (
+
+ ) : null}
+
+ {country ? (
+
+
+
+
+
+
+ ) : null}
+ {error}
+
+
+ );
+ }}
+ />
+);
PayoutDetailsFormComponent.defaultProps = {
className: null,
@@ -316,7 +327,6 @@ PayoutDetailsFormComponent.defaultProps = {
const { bool, object, string } = PropTypes;
PayoutDetailsFormComponent.propTypes = {
- ...formPropTypes,
className: string,
createStripeAccountError: object,
disabled: bool,
@@ -324,27 +334,10 @@ PayoutDetailsFormComponent.propTypes = {
ready: bool,
submitButtonText: string,
- // from mapStateToProps
- country: string,
-
// from injectIntl
intl: intlShape.isRequired,
};
-const formName = 'PayoutDetailsForm';
-
-const selector = formValueSelector(formName);
-const mapStateToProps = state => {
- const country = selector(state, 'country');
- return { country };
-};
-
-const formOptions = {
- form: formName,
-};
-
-const PayoutDetailsForm = compose(connect(mapStateToProps), reduxForm(formOptions), injectIntl)(
- PayoutDetailsFormComponent
-);
+const PayoutDetailsForm = compose(injectIntl)(PayoutDetailsFormComponent);
export default PayoutDetailsForm;
diff --git a/src/containers/PayoutPreferencesPage/__snapshots__/PayoutPreferencesPage.test.js.snap b/src/containers/PayoutPreferencesPage/__snapshots__/PayoutPreferencesPage.test.js.snap
index a32754b5..82a13811 100644
--- a/src/containers/PayoutPreferencesPage/__snapshots__/PayoutPreferencesPage.test.js.snap
+++ b/src/containers/PayoutPreferencesPage/__snapshots__/PayoutPreferencesPage.test.js.snap
@@ -168,7 +168,7 @@ exports[`PayoutPreferencesPage matches snapshot with Stripe not connected 1`] =
values={Object {}}
/>
-
-