Add enquiry form in a modal to listing page

src/containers/EnquiryForm/EnquiryForm.css

@@ -1,8 +1,6 @@
 @import '../../marketplace.css';
 
 .root {
-  display: flex;
-  flex-direction: column;
 }
 
 .icon {
@@ -25,8 +23,3 @@
     margin: 22px 0 24px 0;
   }
 }
-
-.submitButton {
-  /* Push to bottom of the flex container */
-  margin-top: auto;
-}

src/containers/EnquiryForm/EnquiryForm.js

@@ -13,6 +13,7 @@ const EnquiryFormComponent = props => {
   const {
     rootClassName,
     className,
+    submitButtonWrapperClassName,
     form,
     handleSubmit,
     submitting,
@@ -40,7 +41,6 @@ const EnquiryFormComponent = props => {
   const messageRequired = validators.required(messageRequiredMessage);
 
   const classes = classNames(rootClassName || css.root, className);
-
   const submitInProgress = submitting || inProgress;
   const submitDisabled = submitInProgress;
 
@@ -59,14 +59,11 @@ const EnquiryFormComponent = props => {
         placeholder={messagePlaceholder}
         validate={[messageRequired]}
       />
-      <PrimaryButton
-        className={css.submitButton}
-        type="submit"
-        inProgress={submitInProgress}
-        disabled={submitDisabled}
-      >
-        <FormattedMessage id="EnquiryForm.submitButtonText" />
-      </PrimaryButton>
+      <div className={submitButtonWrapperClassName}>
+        <PrimaryButton type="submit" inProgress={submitInProgress} disabled={submitDisabled}>
+          <FormattedMessage id="EnquiryForm.submitButtonText" />
+        </PrimaryButton>
+      </div>
     </Form>
   );
 };
@@ -74,6 +71,7 @@ const EnquiryFormComponent = props => {
 EnquiryFormComponent.defaultProps = {
   rootClassName: null,
   className: null,
+  submitButtonWrapperClassName: null,
   inProgress: false,
 };
 
@@ -81,6 +79,7 @@ EnquiryFormComponent.propTypes = {
   ...formPropTypes,
   rootClassName: string,
   className: string,
+  submitButtonWrapperClassName: string,
 
   inProgress: bool,
 

src/containers/ListingPage/ListingPage.css

@@ -323,6 +323,22 @@
   color: var(--matterColor);
 }
 
+.contactWrapper {
+  display: none;
+
+  @media (--viewportMedium) {
+    display: inline;
+  }
+}
+
+.separator {
+  margin: 0 10px;
+}
+
+.contactLink {
+  @apply --marketplaceH4FontStyles;
+}
+
 .descriptionContainer {
   padding: 0 24px;
   margin-bottom: 35px;
@@ -435,6 +451,38 @@
   }
 }
 
+.enquiryModalContent {
+  flex-grow: 1;
+  display: flex;
+}
+
+.enquiryForm {
+  flex-grow: 1;
+  margin-top: 70px;
+
+  @media (--viewportMedium) {
+    display: flex;
+    flex-direction: column;
+    min-height: 400px;
+    margin: 0;
+  }
+}
+
+.enquirySubmitButtonWrapper {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 24px;
+  background-color: var(--matterColorLight);
+
+  @media (--viewportMedium) {
+    position: static;
+    padding: 0;
+    margin-top: auto;
+  }
+}
+
 .editProfileLink {
   @apply --marketplaceH4FontStyles;
   position: absolute;

src/containers/ListingPage/ListingPage.js

@@ -27,6 +27,7 @@ import {
   NamedRedirect,
   Modal,
   ImageCarousel,
+  InlineTextButton,
   LayoutSingleColumn,
   LayoutWrapperTopbar,
   LayoutWrapperMain,
@@ -35,7 +36,7 @@ import {
   UserCard,
   Reviews,
 } from '../../components';
-import { BookingDatesForm, TopbarContainer } from '../../containers';
+import { BookingDatesForm, TopbarContainer, EnquiryForm } from '../../containers';
 
 import { loadData } from './ListingPage.duck';
 import EditIcon from './EditIcon';
@@ -139,6 +140,7 @@ export class ListingPageComponent extends Component {
     this.state = {
       pageClassNames: [],
       imageCarouselOpen: false,
+      enquiryModalOpen: false,
     };
 
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -278,6 +280,8 @@ export class ListingPageComponent extends Component {
 
     const currentAuthor = authorAvailable ? currentListing.author : null;
     const ensuredAuthor = ensureUser(currentAuthor);
+
+    // TODO: use helper to handle banned
     const authorDisplayName = ensuredAuthor.attributes.profile.displayName;
 
     // TODO location address is currently serialized inside address field (API will change later)
@@ -380,8 +384,11 @@ export class ListingPageComponent extends Component {
     );
 
     const handleContactUser = user => {
-      // TODO: this
-      console.log('contact user:', user);
+      this.setState({ enquiryModalOpen: true });
+    };
+    const handleSubmitEnquiryMessage = values => {
+      const { message } = values;
+      console.log('TODO: send enquiry message:', message);
     };
 
     const reviewsError = (
@@ -473,6 +480,12 @@ export class ListingPageComponent extends Component {
                       <h1 className={css.title}>{title}</h1>
                       <div className={css.author}>
                         <FormattedMessage id="ListingPage.hostedBy" values={{ name: hostLink }} />
+                        <span className={css.contactWrapper}>
+                          <span className={css.separator}>•</span>
+                          <InlineTextButton className={css.contactLink} onClick={handleContactUser}>
+                            <FormattedMessage id="ListingPage.contactUser" />
+                          </InlineTextButton>
+                        </span>
                       </div>
                     </div>
                   </div>
@@ -510,6 +523,21 @@ export class ListingPageComponent extends Component {
                       currentUser={currentUser}
                       onContactUser={handleContactUser}
                     />
+                    <Modal
+                      id="ListingPage.enquiry"
+                      contentClassName={css.enquiryModalContent}
+                      isOpen={this.state.enquiryModalOpen}
+                      onClose={() => this.setState({ enquiryModalOpen: false })}
+                      onManageDisableScrolling={onManageDisableScrolling}
+                    >
+                      <EnquiryForm
+                        className={css.enquiryForm}
+                        submitButtonWrapperClassName={css.enquirySubmitButtonWrapper}
+                        listingTitle={title}
+                        authorDisplayName={authorDisplayName}
+                        onSubmit={handleSubmitEnquiryMessage}
+                      />
+                    </Modal>
                   </div>
                 </div>
 

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

@@ -207,6 +207,19 @@ exports[`ListingPage matches snapshot 1`] = `
                       }
                     }
                   />
+                  <span>
+                    <span>
+                      •
+                    </span>
+                    <InlineTextButton
+                      onClick={[Function]}
+                    >
+                      <FormattedMessage
+                        id="ListingPage.contactUser"
+                        values={Object {}}
+                      />
+                    </InlineTextButton>
+                  </span>
                 </div>
               </div>
             </div>
@@ -307,6 +320,18 @@ exports[`ListingPage matches snapshot 1`] = `
                   }
                 }
               />
+              <InjectIntl(ModalComponent)
+                id="ListingPage.enquiry"
+                isOpen={false}
+                onClose={[Function]}
+                onManageDisableScrolling={[Function]}
+              >
+                <ReduxForm
+                  authorDisplayName="user-1 display name"
+                  listingTitle="listing1 title"
+                  onSubmit={[Function]}
+                />
+              </InjectIntl(ModalComponent)>
             </div>
           </div>
           <withViewport(ModalInMobileComponent)

src/translations/en.json

@@ -231,6 +231,7 @@
   "ListingPage.bookingTitle": "Book {title}",
   "ListingPage.closedListing": "This listing has been closed and can't be booked.",
   "ListingPage.closedListingButtonText": "Sorry, this listing has been closed.",
+  "ListingPage.contactUser": "Contact",
   "ListingPage.ctaButtonMessage": "Request to book",
   "ListingPage.descriptionTitle": "About this sauna",
   "ListingPage.editListing": "Edit listing",