Extract booking section into separate file

src/containers/ListingPage/ListingPage.js

@@ -19,8 +19,6 @@ import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck
 import {
   AvatarLarge,
   AvatarMedium,
-  Button,
-  ModalInMobile,
   Page,
   NamedLink,
   NamedRedirect,
@@ -30,7 +28,7 @@ import {
   LayoutWrapperFooter,
   Footer,
 } from '../../components';
-import { BookingDatesForm, TopbarContainer, NotFoundPage } from '../../containers';
+import { TopbarContainer, NotFoundPage } from '../../containers';
 
 import { sendEnquiry, loadData, setInitialValues } from './ListingPage.duck';
 import SectionImages from './SectionImages';
@@ -41,10 +39,9 @@ import SectionReviews from './SectionReviews';
 import SectionHost from './SectionHost';
 import SectionRulesMaybe from './SectionRulesMaybe';
 import SectionMapMaybe from './SectionMapMaybe';
+import SectionBooking from './SectionBooking';
 import css from './ListingPage.css';
 
-// This defines when ModalInMobile shows content as Modal
-const MODAL_BREAKPOINT = 1023;
 const MIN_LENGTH_FOR_LONG_WORDS_IN_TITLE = 16;
 
 const { UUID } = sdkTypes;
@@ -332,27 +329,8 @@ export class ListingPageComponent extends Component {
     });
     const authorDisplayName = userDisplayName(ensuredAuthor, bannedUserDisplayName);
 
-    const bookBtnMessage = intl.formatMessage({ id: 'ListingPage.ctaButtonMessage' });
     const { formattedPrice, priceTitle } = priceData(price, intl);
 
-    const showClosedListingHelpText = currentListing.id && isClosed;
-    const bookingHeading = (
-      <div className={css.bookingHeading}>
-        <h2 className={css.bookingTitle}>
-          <FormattedMessage id="ListingPage.bookingTitle" values={{ title: richTitle }} />
-        </h2>
-        <div className={css.bookingHelp}>
-          <FormattedMessage
-            id={
-              showClosedListingHelpText
-                ? 'ListingPage.bookingHelpClosedListing'
-                : 'ListingPage.bookingHelp'
-            }
-          />
-        </div>
-      </div>
-    );
-
     const handleMobileBookModalClose = () => {
       closeBookModal(history, currentListing);
     };
@@ -498,60 +476,22 @@ export class ListingPageComponent extends Component {
                     onManageDisableScrolling={onManageDisableScrolling}
                   />
                 </div>
-
-                <ModalInMobile
-                  className={css.modalInMobile}
-                  containerClassName={css.modalContainer}
-                  id="BookingDatesFormInModal"
-                  isModalOpenOnMobile={isBook}
-                  onClose={handleMobileBookModalClose}
-                  showAsModalMaxWidth={MODAL_BREAKPOINT}
+                <SectionBooking
+                  listing={currentListing}
+                  isOwnListing={isOwnListing}
+                  isClosed={isClosed}
+                  isBook={isBook}
+                  unitType={unitType}
+                  price={price}
+                  formattedPrice={formattedPrice}
+                  priceTitle={priceTitle}
+                  handleBookingSubmit={handleBookingSubmit}
+                  richTitle={richTitle}
+                  authorDisplayName={authorDisplayName}
+                  handleBookButtonClick={handleBookButtonClick}
+                  handleMobileBookModalClose={handleMobileBookModalClose}
                   onManageDisableScrolling={onManageDisableScrolling}
-                >
-                  <div className={css.modalHeading}>
-                    <h1 className={css.title}>{richTitle}</h1>
-                    <div className={css.author}>
-                      <span className={css.authorName}>
-                        <FormattedMessage
-                          id="ListingPage.hostedBy"
-                          values={{ name: authorDisplayName }}
-                        />
-                      </span>
-                    </div>
-                  </div>
-
-                  {bookingHeading}
-                  {!isClosed ? (
-                    <BookingDatesForm
-                      className={css.bookingForm}
-                      submitButtonWrapperClassName={css.bookingDatesSubmitButtonWrapper}
-                      unitType={unitType}
-                      onSubmit={handleBookingSubmit}
-                      price={price}
-                      isOwnListing={isOwnListing}
-                    />
-                  ) : null}
-                </ModalInMobile>
-                <div className={css.openBookingForm}>
-                  <div className={css.priceContainer}>
-                    <div className={css.priceValue} title={priceTitle}>
-                      {formattedPrice}
-                    </div>
-                    <div className={css.perUnit}>
-                      <FormattedMessage id="ListingPage.perUnit" />
-                    </div>
-                  </div>
-
-                  {!isClosed ? (
-                    <Button rootClassName={css.bookButton} onClick={handleBookButtonClick}>
-                      {bookBtnMessage}
-                    </Button>
-                  ) : (
-                    <div className={css.closedListingButton}>
-                      <FormattedMessage id="ListingPage.closedListingButtonText" />
-                    </div>
-                  )}
-                </div>
+                />
               </div>
             </div>
           </LayoutWrapperMain>

src/containers/ListingPage/SectionBooking.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { ModalInMobile, Button } from '../../components';
+import { BookingDatesForm } from '../../containers';
+
+import css from './ListingPage.css';
+
+// This defines when ModalInMobile shows content as Modal
+const MODAL_BREAKPOINT = 1023;
+
+const SectionBooking = props => {
+  const {
+    listing,
+    isOwnListing,
+    isClosed,
+    isBook,
+    unitType,
+    price,
+    formattedPrice,
+    priceTitle,
+    handleBookingSubmit,
+    richTitle,
+    authorDisplayName,
+    handleBookButtonClick,
+    handleMobileBookModalClose,
+    onManageDisableScrolling,
+  } = props;
+  const showClosedListingHelpText = listing.id && isClosed;
+  return (
+    <div>
+      <ModalInMobile
+        className={css.modalInMobile}
+        containerClassName={css.modalContainer}
+        id="BookingDatesFormInModal"
+        isModalOpenOnMobile={isBook}
+        onClose={handleMobileBookModalClose}
+        showAsModalMaxWidth={MODAL_BREAKPOINT}
+        onManageDisableScrolling={onManageDisableScrolling}
+      >
+        <div className={css.modalHeading}>
+          <h1 className={css.title}>{richTitle}</h1>
+          <div className={css.author}>
+            <span className={css.authorName}>
+              <FormattedMessage id="ListingPage.hostedBy" values={{ name: authorDisplayName }} />
+            </span>
+          </div>
+        </div>
+
+        <div className={css.bookingHeading}>
+          <h2 className={css.bookingTitle}>
+            <FormattedMessage id="ListingPage.bookingTitle" values={{ title: richTitle }} />
+          </h2>
+          <div className={css.bookingHelp}>
+            <FormattedMessage
+              id={
+                showClosedListingHelpText
+                  ? 'ListingPage.bookingHelpClosedListing'
+                  : 'ListingPage.bookingHelp'
+              }
+            />
+          </div>
+        </div>
+        {!isClosed ? (
+          <BookingDatesForm
+            className={css.bookingForm}
+            submitButtonWrapperClassName={css.bookingDatesSubmitButtonWrapper}
+            unitType={unitType}
+            onSubmit={handleBookingSubmit}
+            price={price}
+            isOwnListing={isOwnListing}
+          />
+        ) : null}
+      </ModalInMobile>
+      <div className={css.openBookingForm}>
+        <div className={css.priceContainer}>
+          <div className={css.priceValue} title={priceTitle}>
+            {formattedPrice}
+          </div>
+          <div className={css.perUnit}>
+            <FormattedMessage id="ListingPage.perUnit" />
+          </div>
+        </div>
+
+        {!isClosed ? (
+          <Button rootClassName={css.bookButton} onClick={handleBookButtonClick}>
+            <FormattedMessage id="ListingPage.ctaButtonMessage" />
+          </Button>
+        ) : (
+          <div className={css.closedListingButton}>
+            <FormattedMessage id="ListingPage.closedListingButtonText" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SectionBooking;

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

@@ -328,95 +328,71 @@ exports[`ListingPage matches snapshot 1`] = `
               title="listing1 title"
             />
           </div>
-          <withViewport(ModalInMobileComponent)
-            id="BookingDatesFormInModal"
-            isModalOpenOnMobile={false}
-            onClose={[Function]}
-            onManageDisableScrolling={[Function]}
-            showAsModalMaxWidth={1023}
-          >
-            <div>
-              <h1>
-                <span>
-                  listing1
-                   
-                  title
-                </span>
-              </h1>
-              <div>
-                <span>
-                  <FormattedMessage
-                    id="ListingPage.hostedBy"
-                    values={
-                      Object {
-                        "name": "user-1 display name",
-                      }
-                    }
-                  />
-                </span>
-              </div>
-            </div>
-            <div>
-              <h2>
-                <FormattedMessage
-                  id="ListingPage.bookingTitle"
-                  values={
-                    Object {
-                      "title": <span>
-                        
-                        listing1
-                         
-                        title
-                        
-                    </span>,
-                    }
-                  }
-                />
-              </h2>
-              <div>
-                <FormattedMessage
-                  id="ListingPage.bookingHelp"
-                  values={Object {}}
-                />
-              </div>
-            </div>
-            <BookingDatesForm
-              isOwnListing={false}
-              onSubmit={[Function]}
-              price={
-                Money {
-                  "amount": 5500,
-                  "currency": "USD",
-                }
+          <SectionBooking
+            authorDisplayName="user-1 display name"
+            formattedPrice={55}
+            handleBookButtonClick={[Function]}
+            handleBookingSubmit={[Function]}
+            handleMobileBookModalClose={[Function]}
+            isBook={false}
+            isClosed={false}
+            isOwnListing={false}
+            listing={
+              Object {
+                "attributes": Object {
+                  "deleted": false,
+                  "description": "listing1 description",
+                  "geolocation": LatLng {
+                    "lat": 40,
+                    "lng": 60,
+                  },
+                  "price": Money {
+                    "amount": 5500,
+                    "currency": "USD",
+                  },
+                  "publicData": Object {},
+                  "state": "published",
+                  "title": "listing1 title",
+                },
+                "author": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user-1 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user-1",
+                  },
+                  "type": "user",
+                },
+                "id": UUID {
+                  "uuid": "listing1",
+                },
+                "images": Array [],
+                "type": "listing",
               }
-              unitType="line-item/night"
-            />
-          </withViewport(ModalInMobileComponent)>
-          <div>
-            <div>
-              <div
-                title={55}
-              >
-                55
-              </div>
-              <div>
-                <FormattedMessage
-                  id="ListingPage.perUnit"
-                  values={Object {}}
-                />
-              </div>
-            </div>
-            <Button
-              className={null}
-              disabled={false}
-              inProgress={false}
-              onClick={[Function]}
-              ready={false}
-              rootClassName={null}
-            >
-              ListingPage.ctaButtonMessage
-            </Button>
-          </div>
+            }
+            onManageDisableScrolling={[Function]}
+            price={
+              Money {
+                "amount": 5500,
+                "currency": "USD",
+              }
+            }
+            priceTitle={55}
+            richTitle={
+              <span>
+                
+                listing1
+                 
+                title
+                
+              </span>
+            }
+            unitType="line-item/night"
+          />
         </div>
       </div>
     </LayoutWrapperMain>