Add BookingDatesForm to ListingPage

src/containers/ListingPage/ListingPage.css

@@ -67,7 +67,11 @@
   background-color: #eee;
 }
 
-.openDatePickerForm {
+.bookingForm {
+  margin: 0 1rem;
+}
+
+.openBookingForm {
   position: fixed;
   bottom: 0;
   left: 0;

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}
           >
-            <span>ModalInMobile content</span>
+            <BookingDatesForm className={css.bookingForm} onSubmit={this.onSubmit} price={price} />
           </ModalInMobile>
           {map ? <div className={css.map}>{map}</div> : null}
-          <div className={css.openDatePickerForm}>
+          <div className={css.openBookingForm}>
             <Button onClick={() => this.setState({ isBookingModalOpenOnMobile: true })}>
               {bookBtnMessage}
             </Button>

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(
-      <ListingPageComponent
-        params={{ slug: 'listing1-title', id: 'listing1' }}
-        marketplaceData={marketplaceData}
-        intl={fakeIntl}
-        onLoadListing={l => 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(<ListingPageComponent {...props} />);
     expect(tree).toMatchSnapshot();
   });
 

src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap

@@ -24,9 +24,14 @@ exports[`ListingPage matches snapshot 1`] = `
       showAsModalMaxWidth={2500}
       title="ListingPage.ctaButtonMessage"
       togglePageClassNames={[Function]}>
-      <span>
-        ModalInMobile content
-      </span>
+      <BookingDatesForm
+        onSubmit={[Function]}
+        price={
+          Money {
+            "amount": 5500,
+            "currency": "USD",
+          }
+        } />
     </InjectIntl(ModalInMobileComponent)>
     <div>
       <Map