diff --git a/src/components/StripeBankAccountToken/StripeBankAccountToken.js b/src/components/StripeBankAccountToken/StripeBankAccountToken.js index 869d9df9..3dedb07c 100644 --- a/src/components/StripeBankAccountToken/StripeBankAccountToken.js +++ b/src/components/StripeBankAccountToken/StripeBankAccountToken.js @@ -9,7 +9,7 @@ import css from './StripeBankAccountToken.css'; const DEBOUNCE_WAIT_TIME = 200; -const ErrorMessage = props =>
{props.children}
; +const ErrorMessage = props => {props.children}; ErrorMessage.propTypes = { children: PropTypes.any.isRequired }; /** diff --git a/src/containers/EditListingForm/EditListingForm.css b/src/containers/EditListingForm/EditListingForm.css index 9eb8ee48..92fdec71 100644 --- a/src/containers/EditListingForm/EditListingForm.css +++ b/src/containers/EditListingForm/EditListingForm.css @@ -40,3 +40,7 @@ composes: error; } + +.submitButton { + margin-top: 1rem; +} diff --git a/src/containers/EditListingForm/EditListingForm.js b/src/containers/EditListingForm/EditListingForm.js index 5d012dfd..16dc3871 100644 --- a/src/containers/EditListingForm/EditListingForm.js +++ b/src/containers/EditListingForm/EditListingForm.js @@ -1,9 +1,12 @@ import React, { Component, PropTypes } from 'react'; -import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import { Field, reduxForm, formValueSelector, propTypes as formPropTypes } from 'redux-form'; import { intlShape, injectIntl } from 'react-intl'; import { isEqual } from 'lodash'; import { arrayMove } from 'react-sortable-hoc'; import config from '../../config'; +import * as propTypes from '../../util/propTypes'; import { noEmptyArray, maxLength, @@ -17,6 +20,7 @@ import { LocationAutocompleteInput, Button, Input, + StripeBankAccountToken, } from '../../components'; import css from './EditListingForm.css'; @@ -111,7 +115,7 @@ RenderAddImage.propTypes = { type: string.isRequired, }; -class EditListingForm extends Component { +export class EditListingFormComponent extends Component { constructor(props) { super(props); this.handleInitialize = this.handleInitialize.bind(this); @@ -155,6 +159,7 @@ class EditListingForm extends Component { pristine, saveActionMsg = 'Save listing', submitting, + selectedPlace, } = this.props; const titleRequiredMessage = intl.formatMessage({ id: 'EditListingForm.titleRequired' }); const maxLengthMessage = intl.formatMessage( @@ -172,11 +177,17 @@ class EditListingForm extends Component { const locationNotRecognizedMessage = intl.formatMessage({ id: 'EditListingForm.locationNotRecognized', }); + const bankAccountNumberRequiredMessage = intl.formatMessage({ + id: 'EditListingForm.bankAccountNumberRequired', + }); const descriptionRequiredMessage = intl.formatMessage({ id: 'EditListingForm.descriptionRequired', }); const pricePlaceholderMessage = intl.formatMessage({ id: 'EditListingForm.pricePlaceholder' }); + const country = selectedPlace ? selectedPlace.country : null; + const currency = config.currencyConfig.currency; + return ( ); } } -EditListingForm.defaultProps = { initData: {} }; +EditListingFormComponent.defaultProps = { initData: {}, selectedPlace: null }; -EditListingForm.propTypes = { +EditListingFormComponent.propTypes = { ...formPropTypes, initData: shape({ title: string, description: string }), + selectedPlace: propTypes.place, intl: intlShape.isRequired, onImageUpload: func.isRequired, onUpdateImageOrder: func.isRequired, onSubmit: func.isRequired, }; -export default reduxForm({ form: 'EditListingForm' })(injectIntl(EditListingForm)); +const formName = 'EditListingForm'; + +// When a field depends on the value of another field, we must connect +// to the store and select the required values to inject to the +// component. +// +// See: http://redux-form.com/6.6.1/examples/selectingFormValues/ +const selector = formValueSelector(formName); +const mapStateToProps = state => { + const location = selector(state, 'location'); + return { + selectedPlace: location && location.selectedPlace ? location.selectedPlace : null, + }; +}; + +export default compose(connect(mapStateToProps), reduxForm({ form: formName }), injectIntl)( + EditListingFormComponent +); diff --git a/src/containers/EditListingForm/EditListingForm.test.js b/src/containers/EditListingForm/EditListingForm.test.js index da6a706f..7dca798e 100644 --- a/src/containers/EditListingForm/EditListingForm.test.js +++ b/src/containers/EditListingForm/EditListingForm.test.js @@ -4,13 +4,18 @@ // (react-sortable-hoc uses them) import React from 'react'; import { renderShallow } from '../../util/test-helpers'; -import EditListingForm from './EditListingForm'; +import { fakeIntl, fakeFormProps } from '../../util/test-data'; +import { EditListingFormComponent } from './EditListingForm'; + +const noop = () => null; describe('EditListingForm', () => { it('matches snapshot', () => { const tree = renderShallow( -