{title}
Confirmation code {confirmationCode}
-Cancel booking
Cancel booking
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, 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..c1558b77 --- /dev/null +++ b/src/containers/BookingDatesForm/BookingDatesForm.example.js @@ -0,0 +1,13 @@ +/* eslint-disable no-console */ +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..5ce80c37 --- /dev/null +++ b/src/containers/BookingDatesForm/BookingDatesForm.js @@ -0,0 +1,147 @@ +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}
+
+ );
+};
+
+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 = intl.formatMessage({ id: 'BookingDatesForm.bookingStartTitle'});
+ const bookingEndLabel = intl.formatMessage({ id: 'BookingDatesForm.bookingEndTitle'});
+ const requiredMessage = intl.formatMessage({ id: 'BookingDatesForm.requiredDate' });
+
+ // 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 =>
+ !(isInclusivelyAfterDay(day, moment()) &&
+ isInclusivelyBeforeDay(day, moment(bookingEnd))),
+ }
+ : {};
+
+ // 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) }
+ : {};
+
+ const bookingInfo = price
+ ? {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(