From cb2f8106215b2e824d3595a64468fbdc618ef50c Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Fri, 7 Apr 2017 01:21:54 +0300 Subject: [PATCH 1/6] Update BookingInfo component --- src/components/BookingInfo/BookingInfo.css | 18 +++ .../BookingInfo/BookingInfo.example.js | 8 +- src/components/BookingInfo/BookingInfo.js | 105 ++++++++++++++---- .../BookingInfo/BookingInfo.test.js | 10 +- .../__snapshots__/BookingInfo.test.js.snap | 70 ++++++++---- src/translations/en.json | 5 + 6 files changed, 166 insertions(+), 50 deletions(-) create mode 100644 src/components/BookingInfo/BookingInfo.css diff --git a/src/components/BookingInfo/BookingInfo.css b/src/components/BookingInfo/BookingInfo.css new file mode 100644 index 00000000..214777e4 --- /dev/null +++ b/src/components/BookingInfo/BookingInfo.css @@ -0,0 +1,18 @@ +.container { + display: flex; + flex-direction: column; +} + +.row { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.totalDivider { + width: 100%; +} + +.totalPrice { + font-weight: bold; +} diff --git a/src/components/BookingInfo/BookingInfo.example.js b/src/components/BookingInfo/BookingInfo.example.js index b20ac3ff..ccd2b136 100644 --- a/src/components/BookingInfo/BookingInfo.example.js +++ b/src/components/BookingInfo/BookingInfo.example.js @@ -1,12 +1,12 @@ /* eslint-disable import/prefer-default-export */ +import { types } from '../../util/sdkLoader'; import BookingInfo from './BookingInfo'; export const Empty = { component: BookingInfo, props: { - pricePerDay: '55\u20AC', - bookingPeriod: 'Jan 2nd - Jan 4th', - bookingDuration: '3 days', - total: '165\u20AC', + unitPrice: new types.Money(10, 'USD'), + bookingStart: new Date('Fri, 14 Apr 2017 GMT'), + bookingEnd: new Date('Sun, 16 Apr 2017 GMT'), }, }; diff --git a/src/components/BookingInfo/BookingInfo.js b/src/components/BookingInfo/BookingInfo.js index 1fec2bc1..cea4167b 100644 --- a/src/components/BookingInfo/BookingInfo.js +++ b/src/components/BookingInfo/BookingInfo.js @@ -1,32 +1,93 @@ +/** + * This component will show the booking info and calculated total price. + * I.e. dates and other details related to payment decision in receipt format. + */ import React, { PropTypes } from 'react'; +import { FormattedMessage, intlShape, injectIntl } from 'react-intl'; +import Decimal from 'decimal.js'; +import moment from 'moment'; +import classNames from 'classnames'; +import config from '../../config'; +import { convertMoneyToNumber } from '../../util/currency'; +import { types } from '../../util/sdkLoader'; +import css from './BookingInfo.css'; + +const BookingInfoComponent = props => { + const { bookingStart, bookingEnd, className, intl, unitPrice } = props; + + const hasSelectedDays = bookingStart && bookingEnd; + const bookingPeriod = hasSelectedDays + ? + : ''; + const dayCount = hasSelectedDays + ? moment(bookingEnd).diff(moment(bookingStart), 'days') + 1 + : null; + const dayCountMessage = dayCount + ? + : null; + + const priceAsNumber = convertMoneyToNumber(unitPrice, config.currencyConfig.subUnitDivisor); + const formattedPrice = intl.formatNumber(priceAsNumber, config.currencyConfig); + const totalPriceAsNumber = hasSelectedDays + ? new Decimal(priceAsNumber).times(dayCount).toNumber() + : null; + const formattedTotalPrice = hasSelectedDays + ? intl.formatNumber(totalPriceAsNumber, config.currencyConfig) + : null; -const BookingInfo = props => { - const { pricePerDay, bookingPeriod, bookingDuration, total } = props; return ( -
-
- Price per day: -
-
{pricePerDay}
-
- Booking period: -
-
{`${bookingPeriod}, ${bookingDuration}`}
-
- Total -
-
{total}
-
+
+
+
+ +
+
+ {formattedPrice} +
+
+
+
+ +
+ {bookingPeriod} +
+
+ {dayCountMessage} +
+
+
+
+
+ +
+
+ {formattedTotalPrice} +
+
+
); }; -const { string } = PropTypes; +BookingInfoComponent.defaultProps = { bookingStart: null, bookingEnd: null, className: '' }; -BookingInfo.propTypes = { - pricePerDay: string.isRequired, - bookingPeriod: string.isRequired, - bookingDuration: string.isRequired, - total: string.isRequired, +const { instanceOf, string } = PropTypes; + +BookingInfoComponent.propTypes = { + bookingStart: instanceOf(Date), + bookingEnd: instanceOf(Date), + className: string, + intl: intlShape.isRequired, + unitPrice: instanceOf(types.Money).isRequired, }; +const BookingInfo = injectIntl(BookingInfoComponent); + +BookingInfo.displayName = 'BookingInfo'; + export default BookingInfo; diff --git a/src/components/BookingInfo/BookingInfo.test.js b/src/components/BookingInfo/BookingInfo.test.js index a5da72cc..d159d23d 100644 --- a/src/components/BookingInfo/BookingInfo.test.js +++ b/src/components/BookingInfo/BookingInfo.test.js @@ -1,15 +1,17 @@ import React from 'react'; +import { fakeIntl } from '../../util/test-data'; import { renderDeep } from '../../util/test-helpers'; +import { types } from '../../util/sdkLoader'; import BookingInfo from './BookingInfo'; describe('BookingInfo', () => { it('matches snapshot', () => { const tree = renderDeep( ); expect(tree).toMatchSnapshot(); diff --git a/src/components/BookingInfo/__snapshots__/BookingInfo.test.js.snap b/src/components/BookingInfo/__snapshots__/BookingInfo.test.js.snap index 67985c26..ff95bc37 100644 --- a/src/components/BookingInfo/__snapshots__/BookingInfo.test.js.snap +++ b/src/components/BookingInfo/__snapshots__/BookingInfo.test.js.snap @@ -1,22 +1,52 @@ exports[`BookingInfo matches snapshot 1`] = ` -
-
- Price per day: -
-
- 55\\\\u20AC -
-
- Booking period: -
-
- Jan 2nd - Jan 4th, 3 days -
-
- Total -
-
- 165\\u20AC -
-
+
+
+
+ + Price per day: + +
+
+ $10.00 +
+
+
+
+ + Booking period: + +
+ + 04/14/2017 - 04/16/2017 + +
+
+ + 3 days + +
+
+
+
+
+ + Total: + +
+
+ $30.00 +
+
+
`; diff --git a/src/translations/en.json b/src/translations/en.json index 86d853cf..5de74d5f 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1,6 +1,11 @@ { "AuthenticationPage.loginFailed": "The email and password you entered did not match our records. Please double-check and try again.", "AuthenticationPage.loginRequiredFor": "You must log in to view the page at", + "BookingInfo.bookingPeriodLabel": "Booking period:", + "BookingInfo.bookingPeriod": "{bookingStart} - {bookingEnd}", + "BookingInfo.dayCount": "{count, number} {count, plural, one {day} other {days}}", + "BookingInfo.pricePerDay":"Price per day:", + "BookingInfo.total": "Total:", "CheckoutPage.title": "Book {listingTitle}", "CheckoutPage.paymentTitle": "Payment", "CheckoutPage.paymentInfo": "You'll only be charged if your request is accepted by the provider.", From 83bb814c4c76ee3b52a8875532f3e0b0e44d6894 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Fri, 7 Apr 2017 01:37:16 +0300 Subject: [PATCH 2/6] Refactor DateInput, change moment to Date in outbound communications and allow passing isOutsideRange func. --- src/components/DateInput/DateInput.js | 13 +++++++------ src/components/index.js | 2 ++ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/DateInput/DateInput.js b/src/components/DateInput/DateInput.js index 7ec67e04..ec4bdc7b 100644 --- a/src/components/DateInput/DateInput.js +++ b/src/components/DateInput/DateInput.js @@ -4,7 +4,6 @@ * CSS modules can't handle global styles so they are currently added separately */ import React, { PropTypes } from 'react'; -import momentPropTypes from 'react-moment-proptypes'; import moment from 'moment'; import { SingleDatePicker, isInclusivelyAfterDay } from 'react-dates'; @@ -69,7 +68,7 @@ class DateInput extends React.Component { } onDateChange(date) { - this.props.onChange(date instanceof moment ? date.clone() : null); + this.props.onChange(date instanceof moment ? date.toDate() : null); } onFocusChange({ focused }) { @@ -87,7 +86,8 @@ class DateInput extends React.Component { const { focused } = this.state; // eslint-disable-next-line no-unused-vars const { initialDate, onBlur, onChange, onFocus, value, ...datePickerProps } = this.props; - const date = value instanceof moment ? value.clone() : initialDate; + const initialMoment = initialDate ? moment(initialDate) : null; + const date = value instanceof Date ? moment(value) : initialMoment; return (
@@ -106,15 +106,16 @@ class DateInput extends React.Component { DateInput.defaultProps = defaultProps; -const { func, string } = PropTypes; +const { func, instanceOf, string } = PropTypes; DateInput.propTypes = { - initialDate: momentPropTypes.momentObj, + initialDate: instanceOf(Date), + isOutsideRange: func, onChange: func.isRequired, onBlur: func.isRequired, onFocus: func.isRequired, placeholder: string, - value: momentPropTypes.momentObj, + value: instanceOf(Date), }; export default DateInput; diff --git a/src/components/index.js b/src/components/index.js index c860eafd..61c1b777 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -2,6 +2,7 @@ import AddImages from './AddImages/AddImages'; import BookingInfo from './BookingInfo/BookingInfo'; import Button from './Button/Button'; import CurrencyInput from './CurrencyInput/CurrencyInput'; +import DateInput from './DateInput/DateInput'; import Discussion from './Discussion/Discussion'; import FilterPanel from './FilterPanel/FilterPanel'; import HeroSection from './HeroSection/HeroSection'; @@ -30,6 +31,7 @@ export { BookingInfo, Button, CurrencyInput, + DateInput, Discussion, FilterPanel, HeroSection, From fe77a2e2d2785299d5698986ae6ed89ae26d9652 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Fri, 7 Apr 2017 02:03:29 +0300 Subject: [PATCH 3/6] BookingDatesForm (shows inputs for start & end dates + booking calculations) --- .../BookingDatesForm/BookingDatesForm.css | 23 +++ .../BookingDatesForm.example.js | 13 ++ .../BookingDatesForm/BookingDatesForm.js | 149 ++++++++++++++++++ .../BookingDatesForm/BookingDatesForm.test.js | 26 +++ .../BookingDatesForm.test.js.snap | 55 +++++++ src/containers/index.js | 2 + src/examples.js | 2 + src/translations/en.json | 6 + 8 files changed, 276 insertions(+) create mode 100644 src/containers/BookingDatesForm/BookingDatesForm.css create mode 100644 src/containers/BookingDatesForm/BookingDatesForm.example.js create mode 100644 src/containers/BookingDatesForm/BookingDatesForm.js create mode 100644 src/containers/BookingDatesForm/BookingDatesForm.test.js create mode 100644 src/containers/BookingDatesForm/__snapshots__/BookingDatesForm.test.js.snap diff --git a/src/containers/BookingDatesForm/BookingDatesForm.css b/src/containers/BookingDatesForm/BookingDatesForm.css new file mode 100644 index 00000000..cb2ffee2 --- /dev/null +++ b/src/containers/BookingDatesForm/BookingDatesForm.css @@ -0,0 +1,23 @@ +.receipt { + margin-top: 1rem; + margin-bottom: 2rem; +} + +.totalDivider { + width: 100%; +} + +.totalPrice { + font-weight: bold; +} + +.error { + color: red; + margin-top: 10px; + display: inline-block; +} + +.smallPrint { + font-size: 12px; + text-align: center; +} diff --git a/src/containers/BookingDatesForm/BookingDatesForm.example.js b/src/containers/BookingDatesForm/BookingDatesForm.example.js new file mode 100644 index 00000000..a5dbbacb --- /dev/null +++ b/src/containers/BookingDatesForm/BookingDatesForm.example.js @@ -0,0 +1,13 @@ +/* eslint-disable no-console, import/prefer-default-export */ +import { types } from '../../util/sdkLoader'; +import BookingDatesForm from './BookingDatesForm'; + +export const Empty = { + component: BookingDatesForm, + props: { + onSubmit: values => { + console.log('Submit BookingDatesForm with values:', values); + }, + price: new types.Money(1099, 'USD'), + }, +}; diff --git a/src/containers/BookingDatesForm/BookingDatesForm.js b/src/containers/BookingDatesForm/BookingDatesForm.js new file mode 100644 index 00000000..cce18115 --- /dev/null +++ b/src/containers/BookingDatesForm/BookingDatesForm.js @@ -0,0 +1,149 @@ +import React, { PropTypes } from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import { Field, reduxForm, formValueSelector, propTypes as formPropTypes } from 'redux-form'; +import { FormattedMessage, intlShape, injectIntl } from 'react-intl'; +import { isInclusivelyAfterDay, isInclusivelyBeforeDay } from 'react-dates'; +import moment from 'moment'; +import { types } from '../../util/sdkLoader'; +import { required } from '../../util/validators'; +import { Button, BookingInfo, DateInput } from '../../components'; +import css from './BookingDatesForm.css'; + +const EnhancedDateInput = props => { + const { input, isOutsideRange, labelMessage, placeholder, meta } = props; + const { onBlur, onChange, onFocus, value } = input; + const { touched, error } = meta; + const maybeIsOutsideRange = isOutsideRange ? { isOutsideRange } : {}; + const inputProps = { ...maybeIsOutsideRange, onBlur, onChange, onFocus, placeholder, value }; + + return ( +
+ {labelMessage ? : null} + + {touched && error ? {error} : null} +
+ ); +}; + +EnhancedDateInput.defaultProps = { + input: null, + isOutsideRange: null, + labelMessage: null, + placeholder: 'Date', +}; + +const { bool, func, instanceOf, node, object, shape, string } = PropTypes; + +EnhancedDateInput.propTypes = { + input: object, + isOutsideRange: func, + labelMessage: node, + meta: shape({ + touched: bool, + error: string, + }).isRequired, + placeholder: string, +}; + +export const BookingDatesFormComponent = props => { + const { + bookingStart, + bookingEnd, + className, + handleSubmit, + intl, + price, + pristine, + submitting, + } = props; + const placeholderText = intl.formatMessage({ id: 'BookingDatesForm.placeholder' }); + const bookingStartLabel = ; + const bookingEndLabel = ; + const requiredMessage = intl.formatMessage({ id: 'BookingDatesForm.requiredDate' }) + + // Choose start date starting from today to booking end date (if end date has been chosen) + const isOutsideRangeStart = bookingEnd + ? { + isOutsideRange: day => + !(isInclusivelyAfterDay(day, moment()) && + isInclusivelyBeforeDay(day, moment(bookingEnd))), + } + : {}; + + // Choose end date starting from booking start date (or today if none is chosen) + const startOfBookingEndRange = bookingStart ? moment(bookingStart) : moment(); + const isOutsideRangeEnd = bookingStart + ? { isOutsideRange: day => !isInclusivelyAfterDay(day, startOfBookingEndRange) } + : {}; + + const bookingInfo = price + ? + : null; + + const notValid = !(bookingStart && bookingEnd); + + return ( +
+ + + {bookingInfo} +

+ +

+ + + ); +}; + +BookingDatesFormComponent.propTypes = { + ...formPropTypes, + intl: intlShape.isRequired, + price: instanceOf(types.Money).isRequired, +}; + +const formName = 'bookingDates'; + +// 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 bookingStart = selector(state, 'bookingStart'); + const bookingEnd = selector(state, 'bookingEnd'); + return { bookingStart, bookingEnd }; +}; + +const BookingDatesForm = compose( + connect(mapStateToProps), + reduxForm({ form: formName }), + injectIntl +)(BookingDatesFormComponent); +BookingDatesForm.displayName = 'BookingDatesForm'; + +export default BookingDatesForm; diff --git a/src/containers/BookingDatesForm/BookingDatesForm.test.js b/src/containers/BookingDatesForm/BookingDatesForm.test.js new file mode 100644 index 00000000..6363f049 --- /dev/null +++ b/src/containers/BookingDatesForm/BookingDatesForm.test.js @@ -0,0 +1,26 @@ +// TODO: renderdeep doesn't work due to +// "Invariant Violation: getNodeFromInstance: Invalid argument." +// refs and findDOMNode are not supported by react-test-renderer +// (react-sortable-hoc uses them) +import React from 'react'; +import { types } from '../../util/sdkLoader'; +import { renderShallow } from '../../util/test-helpers'; +import { fakeIntl, fakeFormProps } from '../../util/test-data'; +import { BookingDatesFormComponent } from './BookingDatesForm'; + +const noop = () => null; + +describe('EditListingForm', () => { + it('matches snapshot', () => { + const tree = renderShallow( + v} + price={new types.Money(1099, 'USD')} + /> + ); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/containers/BookingDatesForm/__snapshots__/BookingDatesForm.test.js.snap b/src/containers/BookingDatesForm/__snapshots__/BookingDatesForm.test.js.snap new file mode 100644 index 00000000..2ce9a1df --- /dev/null +++ b/src/containers/BookingDatesForm/__snapshots__/BookingDatesForm.test.js.snap @@ -0,0 +1,55 @@ +exports[`EditListingForm matches snapshot 1`] = ` +
+ + } + name="bookingStart" + placeholder="BookingDatesForm.placeholder" + validate={ + Array [ + [Function], + ] + } /> + + } + name="bookingEnd" + placeholder="BookingDatesForm.placeholder" + validate={ + Array [ + [Function], + ] + } /> + +

+ +

+ + +`; diff --git a/src/containers/index.js b/src/containers/index.js index 161f4fde..aa3a25f5 100644 --- a/src/containers/index.js +++ b/src/containers/index.js @@ -1,4 +1,5 @@ import AuthenticationPage from './AuthenticationPage/AuthenticationPage'; +import BookingDatesForm from './BookingDatesForm/BookingDatesForm'; import ChangeAccountPasswordForm from './ChangeAccountPasswordForm/ChangeAccountPasswordForm'; import ChangePasswordForm from './ChangePasswordForm/ChangePasswordForm'; import CheckoutPage from './CheckoutPage/CheckoutPage'; @@ -29,6 +30,7 @@ import Topbar from './Topbar/Topbar'; export { AuthenticationPage, + BookingDatesForm, ChangeAccountPasswordForm, ChangePasswordForm, CheckoutPage, diff --git a/src/examples.js b/src/examples.js index b9047959..c4919747 100644 --- a/src/examples.js +++ b/src/examples.js @@ -13,6 +13,7 @@ import * as StripeBankAccountToken from './components/StripeBankAccountToken/StripeBankAccountToken.example'; // containers +import * as BookingDatesForm from './containers/BookingDatesForm/BookingDatesForm.example'; import * as ChangeAccountPasswordForm from './containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example'; import * as ChangePasswordForm from './containers/ChangePasswordForm/ChangePasswordForm.example'; @@ -26,6 +27,7 @@ import * as StripePaymentForm from './containers/StripePaymentForm/StripePayment export { AddImages, + BookingDatesForm, BookingInfo, ChangeAccountPasswordForm, ChangePasswordForm, diff --git a/src/translations/en.json b/src/translations/en.json index 5de74d5f..e5cf6b35 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1,6 +1,12 @@ { "AuthenticationPage.loginFailed": "The email and password you entered did not match our records. Please double-check and try again.", "AuthenticationPage.loginRequiredFor": "You must log in to view the page at", + "BookingDatesForm.bookingEndTitle": "End date", + "BookingDatesForm.bookingStartTitle": "Start date", + "BookingDatesForm.placeholder": "mm/dd/yyyy", + "BookingDatesForm.requiredDate": "Oops, make sure your date is correct!", + "BookingDatesForm.requestToBook": "Request to book", + "BookingDatesForm.youWontBeChargedInfo": "You won't be charged yet", "BookingInfo.bookingPeriodLabel": "Booking period:", "BookingInfo.bookingPeriod": "{bookingStart} - {bookingEnd}", "BookingInfo.dayCount": "{count, number} {count, plural, one {day} other {days}}", From 878bb9266fec9dfcc8d3a28822cd6e55d8c505fe Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Fri, 7 Apr 2017 02:42:50 +0300 Subject: [PATCH 4/6] Add BookingDatesForm to ListingPage --- src/containers/ListingPage/ListingPage.css | 6 +++++- src/containers/ListingPage/ListingPage.js | 18 ++++++++++++++-- .../ListingPage/ListingPage.test.js | 21 ++++++++++++------- .../__snapshots__/ListingPage.test.js.snap | 11 +++++++--- 4 files changed, 42 insertions(+), 14 deletions(-) diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index fa6e4aaa..3eea1da6 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/src/containers/ListingPage/ListingPage.css @@ -67,7 +67,11 @@ background-color: #eee; } -.openDatePickerForm { +.bookingForm { + margin: 0 1rem; +} + +.openBookingForm { position: fixed; bottom: 0; left: 0; diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index 9843212c..12494fbe 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -6,6 +6,7 @@ import config from '../../config'; import { types } from '../../util/sdkLoader'; import { convertMoneyToNumber } from '../../util/currency'; import { Button, Map, ModalInMobile, PageLayout } from '../../components'; +import { BookingDatesForm } from '../../containers'; import { getListingsById } from '../../ducks/sdk.duck'; import { showListing } from './ListingPage.duck'; import css from './ListingPage.css'; @@ -39,9 +40,22 @@ export class ListingPageComponent extends Component { isBookingModalOpenOnMobile: tab && tab === 'book', pageClassNames: '', }; + + this.onSubmit = this.onSubmit.bind(this); this.togglePageClassNames = this.togglePageClassNames.bind(this); } + onSubmit(values) { + const { marketplaceData, params } = this.props; + const id = new UUID(params.id); + const listingsById = getListingsById(marketplaceData, [id]); + const currentListing = listingsById.length > 0 ? listingsById[0] : null; + + this.setState({ isBookingModalOpenOnMobile: false }); + // eslint-disable-next-line no-console + console.log('Submitting with bookedDates', values, ' and listing price', currentListing.attributes.price); + } + togglePageClassNames(className, addClass = true) { this.setState(prevState => { const prevPageClassNames = prevState.pageClassNames.split(' '); @@ -116,10 +130,10 @@ export class ListingPageComponent extends Component { title={bookBtnMessage} togglePageClassNames={this.togglePageClassNames} > - ModalInMobile content + {map ?
{map}
: null} -
+
diff --git a/src/containers/ListingPage/ListingPage.test.js b/src/containers/ListingPage/ListingPage.test.js index 8c76c2b1..b0ed9c03 100644 --- a/src/containers/ListingPage/ListingPage.test.js +++ b/src/containers/ListingPage/ListingPage.test.js @@ -11,14 +11,19 @@ const { UUID } = types; describe('ListingPage', () => { it('matches snapshot', () => { const marketplaceData = { entities: { listing: { listing1: createListing('listing1') } } }; - const tree = renderShallow( - l} - /> - ); + const props = { + flattenedRoutes: [], + location: { search: '' }, + history: { + push: () => console.log('HistoryPush called'), + }, + params: { slug: 'listing1-title', id: 'listing1' }, + marketplaceData, + intl: fakeIntl, + onLoadListing: () => {}, + }; + + const tree = renderShallow(); expect(tree).toMatchSnapshot(); }); diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap index 762e291e..c6acbc7c 100644 --- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap +++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap @@ -24,9 +24,14 @@ exports[`ListingPage matches snapshot 1`] = ` showAsModalMaxWidth={2500} title="ListingPage.ctaButtonMessage" togglePageClassNames={[Function]}> - - ModalInMobile content - +
Date: Fri, 7 Apr 2017 03:00:04 +0300 Subject: [PATCH 5/6] Remove old usages of BookingInfo (old wireframes have wrong data) --- src/components/DateInput/DateInput.js | 2 +- .../DateInput/__snapshots__/DateInput.test.js.snap | 2 +- src/components/OrderDetailsPanel/OrderDetailsPanel.js | 6 ++---- .../__snapshots__/OrderDetailsPanel.test.js.snap | 5 ----- src/containers/OrderPage/OrderPage.js | 6 ------ .../OrderPage/__snapshots__/OrderPage.test.js.snap | 8 -------- 6 files changed, 4 insertions(+), 25 deletions(-) diff --git a/src/components/DateInput/DateInput.js b/src/components/DateInput/DateInput.js index ec4bdc7b..df73c4ee 100644 --- a/src/components/DateInput/DateInput.js +++ b/src/components/DateInput/DateInput.js @@ -19,7 +19,7 @@ const defaultProps = { id: 'date', placeholder: 'Date', disabled: false, - required: true, + required: false, screenReaderInputMessage: '', showClearDate: false, diff --git a/src/components/DateInput/__snapshots__/DateInput.test.js.snap b/src/components/DateInput/__snapshots__/DateInput.test.js.snap index 35012ac8..85b5e879 100644 --- a/src/components/DateInput/__snapshots__/DateInput.test.js.snap +++ b/src/components/DateInput/__snapshots__/DateInput.test.js.snap @@ -20,7 +20,7 @@ exports[`DateInput matches snapshot 1`] = ` onKeyDown={[Function]} placeholder="Date" readOnly={false} - required={true} + required={false} type="text" value="" /> diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.js b/src/components/OrderDetailsPanel/OrderDetailsPanel.js index 8c1fcdde..1823babb 100644 --- a/src/components/OrderDetailsPanel/OrderDetailsPanel.js +++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.js @@ -1,5 +1,5 @@ import React, { PropTypes } from 'react'; -import { BookingInfo, NamedLink } from '../../components'; +import { NamedLink } from '../../components'; import css from './OrderDetailsPanel.css'; @@ -24,14 +24,13 @@ ContactInfo.propTypes = { }; const OrderDetailsPanel = props => { - const { className, orderId, title, imageUrl, info, contact, confirmationCode } = props; + const { className, orderId, title, imageUrl, contact, confirmationCode } = props; return (
{title}

{title}

Confirmation code {confirmationCode}

-

Cancel booking

You have a new message! @@ -47,7 +46,6 @@ OrderDetailsPanel.propTypes = { orderId: oneOfType([string, number]).isRequired, title: string.isRequired, imageUrl: string.isRequired, - info: object.isRequired, contact: object.isRequired, confirmationCode: string.isRequired, }; diff --git a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap b/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap index 46780dd4..ccbf920c 100644 --- a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap +++ b/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap @@ -20,11 +20,6 @@ exports[`OrderDetailsPanel matches snapshot 1`] = ` Confirmation code some-test-confirmation-code

-

Cancel booking

diff --git a/src/containers/OrderPage/OrderPage.js b/src/containers/OrderPage/OrderPage.js index 198aa5a5..36123ff0 100644 --- a/src/containers/OrderPage/OrderPage.js +++ b/src/containers/OrderPage/OrderPage.js @@ -14,12 +14,6 @@ const OrderPage = props => { title, orderId, imageUrl: 'http://placehold.it/750x470', - info: { - pricePerDay: '55\u20AC', - bookingPeriod: 'Jan 2nd - Jan 4th', - bookingDuration: '3 days', - total: '165\u20AC', - }, contact: { addressLine1: '350 5th Avenue', addressLine2: 'New York, NY 10118', diff --git a/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap b/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap index fb8c4b88..2c05edda 100644 --- a/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap +++ b/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap @@ -35,14 +35,6 @@ exports[`OrderPage matches snapshot 1`] = ` } } imageUrl="http://placehold.it/750x470" - info={ - Object { - "bookingDuration": "3 days", - "bookingPeriod": "Jan 2nd - Jan 4th", - "pricePerDay": "55€", - "total": "165€", - } - } orderId={1234} title="Banyan Studios" /> Date: Fri, 7 Apr 2017 16:20:31 +0300 Subject: [PATCH 6/6] Refactoring after review comments. --- .../BookingInfo/BookingInfo.example.js | 1 - src/components/BookingInfo/BookingInfo.js | 12 ++-- .../__snapshots__/BookingInfo.test.js.snap | 4 +- .../CurrencyInput/CurrencyInput.example.js | 1 - src/components/DateInput/DateInput.example.js | 2 +- src/components/DateInput/DateInput.js | 62 +++++++++++++++---- .../__snapshots__/DateInput.test.js.snap | 14 +++-- .../ListingCard/ListingCard.example.js | 2 +- .../ModalInMobile/ModalInMobile.example.js | 2 +- src/components/NamedLink/NamedLink.example.js | 2 +- .../BookingDatesForm.example.js | 2 +- .../BookingDatesForm/BookingDatesForm.js | 18 +++--- .../BookingDatesForm/BookingDatesForm.test.js | 6 +- .../BookingDatesForm.test.js.snap | 14 +---- .../ChangeAccountPasswordForm.example.js | 2 +- .../ChangePasswordForm.example.js | 2 +- .../EditListingForm.example.js | 2 +- .../HeroSearchForm/HeroSearchForm.example.js | 2 +- src/containers/ListingPage/ListingPage.js | 2 +- src/containers/LoginForm/LoginForm.example.js | 2 +- .../PasswordForgottenForm.example.js | 2 +- .../SignUpForm/SignUpForm.example.js | 2 +- src/translations/en.json | 6 +- src/util/sagaHelpers.js | 3 - 24 files changed, 96 insertions(+), 71 deletions(-) diff --git a/src/components/BookingInfo/BookingInfo.example.js b/src/components/BookingInfo/BookingInfo.example.js index ccd2b136..9797d6ca 100644 --- a/src/components/BookingInfo/BookingInfo.example.js +++ b/src/components/BookingInfo/BookingInfo.example.js @@ -1,4 +1,3 @@ -/* eslint-disable import/prefer-default-export */ import { types } from '../../util/sdkLoader'; import BookingInfo from './BookingInfo'; diff --git a/src/components/BookingInfo/BookingInfo.js b/src/components/BookingInfo/BookingInfo.js index cea4167b..9cb8124b 100644 --- a/src/components/BookingInfo/BookingInfo.js +++ b/src/components/BookingInfo/BookingInfo.js @@ -25,17 +25,15 @@ const BookingInfoComponent = props => { }} /> : ''; - const dayCount = hasSelectedDays - ? moment(bookingEnd).diff(moment(bookingStart), 'days') + 1 - : null; - const dayCountMessage = dayCount - ? + const nightCount = hasSelectedDays ? moment(bookingEnd).diff(moment(bookingStart), 'days') : null; + const nightCountMessage = nightCount + ? : null; const priceAsNumber = convertMoneyToNumber(unitPrice, config.currencyConfig.subUnitDivisor); const formattedPrice = intl.formatNumber(priceAsNumber, config.currencyConfig); const totalPriceAsNumber = hasSelectedDays - ? new Decimal(priceAsNumber).times(dayCount).toNumber() + ? new Decimal(priceAsNumber).times(nightCount).toNumber() : null; const formattedTotalPrice = hasSelectedDays ? intl.formatNumber(totalPriceAsNumber, config.currencyConfig) @@ -58,7 +56,7 @@ const BookingInfoComponent = props => { {bookingPeriod}
- {dayCountMessage} + {nightCountMessage}
diff --git a/src/components/BookingInfo/__snapshots__/BookingInfo.test.js.snap b/src/components/BookingInfo/__snapshots__/BookingInfo.test.js.snap index ff95bc37..fa377ead 100644 --- a/src/components/BookingInfo/__snapshots__/BookingInfo.test.js.snap +++ b/src/components/BookingInfo/__snapshots__/BookingInfo.test.js.snap @@ -29,7 +29,7 @@ exports[`BookingInfo matches snapshot 1`] = `
- 3 days + 2 days
@@ -45,7 +45,7 @@ exports[`BookingInfo matches snapshot 1`] = `
- $30.00 + $20.00
diff --git a/src/components/CurrencyInput/CurrencyInput.example.js b/src/components/CurrencyInput/CurrencyInput.example.js index f21bb246..fc3a89db 100644 --- a/src/components/CurrencyInput/CurrencyInput.example.js +++ b/src/components/CurrencyInput/CurrencyInput.example.js @@ -1,4 +1,3 @@ -/* eslint-disable import/prefer-default-export */ import React, { PropTypes } from 'react'; import { IntlProvider, addLocaleData } from 'react-intl'; import en from 'react-intl/locale-data/en'; diff --git a/src/components/DateInput/DateInput.example.js b/src/components/DateInput/DateInput.example.js index df9ede29..716cf63b 100644 --- a/src/components/DateInput/DateInput.example.js +++ b/src/components/DateInput/DateInput.example.js @@ -1,4 +1,4 @@ -/* eslint-disable import/prefer-default-export, no-console */ +/* eslint-disable no-console */ import React, { PropTypes } from 'react'; import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form'; import moment from 'moment'; diff --git a/src/components/DateInput/DateInput.js b/src/components/DateInput/DateInput.js index df73c4ee..01dac82f 100644 --- a/src/components/DateInput/DateInput.js +++ b/src/components/DateInput/DateInput.js @@ -3,9 +3,10 @@ * Styles for SingleDatePicker can be found from 'public/reactDates.css'. * CSS modules can't handle global styles so they are currently added separately */ -import React, { PropTypes } from 'react'; -import moment from 'moment'; +import React, { Component, PropTypes } from 'react'; +import { intlShape, injectIntl } from 'react-intl'; import { SingleDatePicker, isInclusivelyAfterDay } from 'react-dates'; +import moment from 'moment'; const HORIZONTAL_ORIENTATION = 'horizontal'; const ANCHOR_LEFT = 'left'; @@ -17,10 +18,10 @@ const defaultProps = { // input related props id: 'date', - placeholder: 'Date', + placeholder: null, // Handled inside component disabled: false, required: false, - screenReaderInputMessage: '', + screenReaderInputMessage: null, // Handled inside component showClearDate: false, // calendar presentation and interaction related props @@ -51,12 +52,12 @@ const defaultProps = { displayFormat: () => moment.localeData().longDateFormat('L'), monthFormat: 'MMMM YYYY', phrases: { - closeDatePicker: 'Close', - clearDate: 'Clear Date', + closeDatePicker: null, // Handled inside component + clearDate: null, // Handled inside component }, }; -class DateInput extends React.Component { +class DateInputComponent extends Component { constructor(props) { super(props); this.state = { @@ -84,11 +85,35 @@ class DateInput extends React.Component { render() { const { focused } = this.state; - // eslint-disable-next-line no-unused-vars - const { initialDate, onBlur, onChange, onFocus, value, ...datePickerProps } = this.props; + /* eslint-disable no-unused-vars */ + const { + initialDate, + intl, + placeholder, + onBlur, + onChange, + onFocus, + phrases, + screenReaderInputMessage, + value, + ...datePickerProps + } = this.props; + /* eslint-enable no-unused-vars */ + const initialMoment = initialDate ? moment(initialDate) : null; const date = value instanceof Date ? moment(value) : initialMoment; + const placeholderText = placeholder || + intl.formatMessage({ id: 'DateInput.defaultPlaceholder' }); + const screenReaderInputText = screenReaderInputMessage || + intl.formatMessage({ id: 'DateInput.screenReaderInputMessage' }); + const closeDatePickerText = phrases.closeDatePicker + ? phrases.closeDatePicker + : intl.formatMessage({ id: 'DateInput.closeDatePicker' }); + const clearDateText = phrases.clearDate + ? phrases.clearDate + : intl.formatMessage({ id: 'DateInput.clearDate' }); + return (
); } } -DateInput.defaultProps = defaultProps; +DateInputComponent.defaultProps = defaultProps; -const { func, instanceOf, string } = PropTypes; +const { func, instanceOf, shape, string } = PropTypes; -DateInput.propTypes = { +DateInputComponent.propTypes = { initialDate: instanceOf(Date), + intl: intlShape.isRequired, isOutsideRange: func, onChange: func.isRequired, onBlur: func.isRequired, onFocus: func.isRequired, + phrases: shape({ + closeDatePicker: string, + clearDate: string, + }), placeholder: string, + screenReaderInputMessage: string, value: instanceOf(Date), }; +const DateInput = injectIntl(DateInputComponent); + +DateInput.displayName = 'DateInput'; + export default DateInput; diff --git a/src/components/DateInput/__snapshots__/DateInput.test.js.snap b/src/components/DateInput/__snapshots__/DateInput.test.js.snap index 85b5e879..ca1778b2 100644 --- a/src/components/DateInput/__snapshots__/DateInput.test.js.snap +++ b/src/components/DateInput/__snapshots__/DateInput.test.js.snap @@ -8,8 +8,8 @@ exports[`DateInput matches snapshot 1`] = `
- +

+ Date input +

- Date + Date input
diff --git a/src/components/ListingCard/ListingCard.example.js b/src/components/ListingCard/ListingCard.example.js index 9b739502..17511ed2 100644 --- a/src/components/ListingCard/ListingCard.example.js +++ b/src/components/ListingCard/ListingCard.example.js @@ -1,4 +1,4 @@ -/* eslint-disable no-console, import/prefer-default-export */ +/* eslint-disable no-console */ import React from 'react'; import ListingCard from './ListingCard'; import { createUser, createListing, currencyConfig, fakeIntl } from '../../util/test-data'; diff --git a/src/components/ModalInMobile/ModalInMobile.example.js b/src/components/ModalInMobile/ModalInMobile.example.js index b19caba4..f70d36c5 100644 --- a/src/components/ModalInMobile/ModalInMobile.example.js +++ b/src/components/ModalInMobile/ModalInMobile.example.js @@ -1,4 +1,4 @@ -/* eslint-disable no-console, import/prefer-default-export */ +/* eslint-disable no-console */ import React, { Component } from 'react'; import { Button } from '../../components'; import ModalInMobile from './ModalInMobile'; diff --git a/src/components/NamedLink/NamedLink.example.js b/src/components/NamedLink/NamedLink.example.js index afc54921..87d4816a 100644 --- a/src/components/NamedLink/NamedLink.example.js +++ b/src/components/NamedLink/NamedLink.example.js @@ -1,4 +1,4 @@ -/* eslint-disable no-console, import/prefer-default-export */ +/* eslint-disable no-console */ import NamedLink from './NamedLink'; export const NamedLinkToSearchPage = { diff --git a/src/containers/BookingDatesForm/BookingDatesForm.example.js b/src/containers/BookingDatesForm/BookingDatesForm.example.js index a5dbbacb..c1558b77 100644 --- a/src/containers/BookingDatesForm/BookingDatesForm.example.js +++ b/src/containers/BookingDatesForm/BookingDatesForm.example.js @@ -1,4 +1,4 @@ -/* eslint-disable no-console, import/prefer-default-export */ +/* eslint-disable no-console */ import { types } from '../../util/sdkLoader'; import BookingDatesForm from './BookingDatesForm'; diff --git a/src/containers/BookingDatesForm/BookingDatesForm.js b/src/containers/BookingDatesForm/BookingDatesForm.js index cce18115..5ce80c37 100644 --- a/src/containers/BookingDatesForm/BookingDatesForm.js +++ b/src/containers/BookingDatesForm/BookingDatesForm.js @@ -58,11 +58,11 @@ export const BookingDatesFormComponent = props => { submitting, } = props; const placeholderText = intl.formatMessage({ id: 'BookingDatesForm.placeholder' }); - const bookingStartLabel = ; - const bookingEndLabel = ; - const requiredMessage = intl.formatMessage({ id: 'BookingDatesForm.requiredDate' }) + const bookingStartLabel = intl.formatMessage({ id: 'BookingDatesForm.bookingStartTitle'}); + const bookingEndLabel = intl.formatMessage({ id: 'BookingDatesForm.bookingEndTitle'}); + const requiredMessage = intl.formatMessage({ id: 'BookingDatesForm.requiredDate' }); - // Choose start date starting from today to booking end date (if end date has been chosen) + // A day is outside range if it is between today and booking end date (if end date has been chosen) const isOutsideRangeStart = bookingEnd ? { isOutsideRange: day => @@ -71,7 +71,7 @@ export const BookingDatesFormComponent = props => { } : {}; - // Choose end date starting from booking start date (or today if none is chosen) + // A day is outside range if it is after booking start date (or today if none is chosen) const startOfBookingEndRange = bookingStart ? moment(bookingStart) : moment(); const isOutsideRangeEnd = bookingStart ? { isOutsideRange: day => !isInclusivelyAfterDay(day, startOfBookingEndRange) } @@ -86,7 +86,7 @@ export const BookingDatesFormComponent = props => { /> : null; - const notValid = !(bookingStart && bookingEnd); + const invalid = !(bookingStart && bookingEnd); return (
@@ -112,7 +112,7 @@ export const BookingDatesFormComponent = props => {

-
@@ -134,9 +134,7 @@ const formName = 'bookingDates'; // See: http://redux-form.com/6.6.1/examples/selectingFormValues/ const selector = formValueSelector(formName); const mapStateToProps = state => { - const bookingStart = selector(state, 'bookingStart'); - const bookingEnd = selector(state, 'bookingEnd'); - return { bookingStart, bookingEnd }; + return selector(state, 'bookingStart', 'bookingEnd'); }; const BookingDatesForm = compose( diff --git a/src/containers/BookingDatesForm/BookingDatesForm.test.js b/src/containers/BookingDatesForm/BookingDatesForm.test.js index 6363f049..72ba4fc0 100644 --- a/src/containers/BookingDatesForm/BookingDatesForm.test.js +++ b/src/containers/BookingDatesForm/BookingDatesForm.test.js @@ -1,7 +1,3 @@ -// TODO: renderdeep doesn't work due to -// "Invariant Violation: getNodeFromInstance: Invalid argument." -// refs and findDOMNode are not supported by react-test-renderer -// (react-sortable-hoc uses them) import React from 'react'; import { types } from '../../util/sdkLoader'; import { renderShallow } from '../../util/test-helpers'; @@ -10,7 +6,7 @@ import { BookingDatesFormComponent } from './BookingDatesForm'; const noop = () => null; -describe('EditListingForm', () => { +describe('BookingDatesForm', () => { it('matches snapshot', () => { const tree = renderShallow( - } + labelMessage="BookingDatesForm.bookingStartTitle" name="bookingStart" placeholder="BookingDatesForm.placeholder" validate={ @@ -19,11 +15,7 @@ exports[`EditListingForm matches snapshot 1`] = ` - } + labelMessage="BookingDatesForm.bookingEndTitle" name="bookingEnd" placeholder="BookingDatesForm.placeholder" validate={ diff --git a/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example.js b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example.js index 5e480a54..513d1ea8 100644 --- a/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example.js +++ b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example.js @@ -1,4 +1,4 @@ -/* eslint-disable no-console, import/prefer-default-export */ +/* eslint-disable no-console */ import ChangeAccountPasswordForm from './ChangeAccountPasswordForm'; export const Empty = { diff --git a/src/containers/ChangePasswordForm/ChangePasswordForm.example.js b/src/containers/ChangePasswordForm/ChangePasswordForm.example.js index dbbc6b91..c7dd7703 100644 --- a/src/containers/ChangePasswordForm/ChangePasswordForm.example.js +++ b/src/containers/ChangePasswordForm/ChangePasswordForm.example.js @@ -1,4 +1,4 @@ -/* eslint-disable no-console, import/prefer-default-export */ +/* eslint-disable no-console */ import ChangePasswordForm from './ChangePasswordForm'; export const Empty = { diff --git a/src/containers/EditListingForm/EditListingForm.example.js b/src/containers/EditListingForm/EditListingForm.example.js index ad22e0a7..c73352d6 100644 --- a/src/containers/EditListingForm/EditListingForm.example.js +++ b/src/containers/EditListingForm/EditListingForm.example.js @@ -1,4 +1,4 @@ -/* eslint-disable no-console, import/prefer-default-export */ +/* eslint-disable no-console */ import EditListingForm from './EditListingForm'; export const Empty = { diff --git a/src/containers/HeroSearchForm/HeroSearchForm.example.js b/src/containers/HeroSearchForm/HeroSearchForm.example.js index 6f763010..623faf7c 100644 --- a/src/containers/HeroSearchForm/HeroSearchForm.example.js +++ b/src/containers/HeroSearchForm/HeroSearchForm.example.js @@ -1,4 +1,4 @@ -/* eslint-disable no-console, import/prefer-default-export */ +/* eslint-disable no-console */ import HeroSearchForm from './HeroSearchForm'; export const Empty = { diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index 12494fbe..31ec6806 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -53,7 +53,7 @@ export class ListingPageComponent extends Component { this.setState({ isBookingModalOpenOnMobile: false }); // eslint-disable-next-line no-console - console.log('Submitting with bookedDates', values, ' and listing price', currentListing.attributes.price); + console.log('Submitting: bookedDates', values, 'and price', currentListing.attributes.price); } togglePageClassNames(className, addClass = true) { diff --git a/src/containers/LoginForm/LoginForm.example.js b/src/containers/LoginForm/LoginForm.example.js index 922121e5..ef07e4a8 100644 --- a/src/containers/LoginForm/LoginForm.example.js +++ b/src/containers/LoginForm/LoginForm.example.js @@ -1,4 +1,4 @@ -/* eslint-disable no-console, import/prefer-default-export */ +/* eslint-disable no-console */ import LoginForm from './LoginForm'; export const Empty = { diff --git a/src/containers/PasswordForgottenForm/PasswordForgottenForm.example.js b/src/containers/PasswordForgottenForm/PasswordForgottenForm.example.js index 0312b51b..d2ea39ea 100644 --- a/src/containers/PasswordForgottenForm/PasswordForgottenForm.example.js +++ b/src/containers/PasswordForgottenForm/PasswordForgottenForm.example.js @@ -1,4 +1,4 @@ -/* eslint-disable no-console, import/prefer-default-export */ +/* eslint-disable no-console */ import PasswordForgottenForm from './PasswordForgottenForm'; export const Empty = { diff --git a/src/containers/SignUpForm/SignUpForm.example.js b/src/containers/SignUpForm/SignUpForm.example.js index aeac9bdc..04f3954b 100644 --- a/src/containers/SignUpForm/SignUpForm.example.js +++ b/src/containers/SignUpForm/SignUpForm.example.js @@ -1,4 +1,4 @@ -/* eslint-disable no-console, import/prefer-default-export */ +/* eslint-disable no-console */ import SignUpForm from './SignUpForm'; export const Empty = { diff --git a/src/translations/en.json b/src/translations/en.json index e5cf6b35..0d173557 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -9,11 +9,15 @@ "BookingDatesForm.youWontBeChargedInfo": "You won't be charged yet", "BookingInfo.bookingPeriodLabel": "Booking period:", "BookingInfo.bookingPeriod": "{bookingStart} - {bookingEnd}", - "BookingInfo.dayCount": "{count, number} {count, plural, one {day} other {days}}", + "BookingInfo.nightCount": "{count, number} {count, plural, one {day} other {days}}", "BookingInfo.pricePerDay":"Price per day:", "BookingInfo.total": "Total:", "CheckoutPage.title": "Book {listingTitle}", "CheckoutPage.paymentTitle": "Payment", + "DateInput.clearDate": "Clear Date", + "DateInput.closeDatePicker": "Close", + "DateInput.defaultPlaceholder": "Date input", + "DateInput.screenReaderInputMessage": "Date input", "CheckoutPage.paymentInfo": "You'll only be charged if your request is accepted by the provider.", "EditListingForm.bankAccountNumberRequired": "You need to add a bank account number.", "EditListingForm.descriptionRequired": "You need to add a description.", diff --git a/src/util/sagaHelpers.js b/src/util/sagaHelpers.js index 2a1a7129..82e7e999 100644 --- a/src/util/sagaHelpers.js +++ b/src/util/sagaHelpers.js @@ -1,5 +1,3 @@ -/* eslint-disable import/prefer-default-export */ - // async actions use request - success / failure pattern const REQUEST = 'REQUEST'; const SUCCESS = 'SUCCESS'; @@ -15,4 +13,3 @@ export const createRequestTypes = base => }, {} ); -/* eslint-enable import/prefer-default-export */