Show BookingPanel on tx page

Show the BookingPanel component on the tx page when the transaction has
been started with an enquiry.

src/components/TransactionPanel/TransactionPanel.css

@@ -404,3 +404,7 @@
     top: 151px;
   }
 }
+
+.bookingPanel {
+  margin: 16px 48px 48px 48px;
+}

src/components/TransactionPanel/TransactionPanel.helpers.js

@@ -18,6 +18,7 @@ import { createSlug, stringify } from '../../util/urlHelpers';
 import {
   ActivityFeed,
   BookingBreakdown,
+  BookingPanel,
   ExternalLink,
   NamedLink,
   PrimaryButton,
@@ -151,16 +152,57 @@ const createListingLink = (listing, label, searchParams = {}, className = '') =>
   }
 };
 
-// Functional component as a helper to build ActionButtons for
-// provider when state is preauthorized
-export const OrderActionButtonMaybe = props => {
-  const { className, rootClassName, canShowButtons, listing } = props;
+// Functional component as a helper to build detail card headings
+export const DetailCardHeadingsMaybe = props => {
+  const { authorDisplayName, transaction, transactionRole, listing, listingTitle } = props;
 
-  const title = <FormattedMessage id="TransactionPanel.requestToBook" />;
-  const listingLink = createListingLink(listing, title, { book: true }, css.requestToBookButton);
-  const classes = classNames(rootClassName || css.actionButtons, className);
+  const isCustomer = transactionRole === 'customer';
+  const canShowDetailCardHeadings = isCustomer && !txIsEnquired(transaction);
 
-  return canShowButtons ? <div className={classes}>{listingLink}</div> : null;
+  return canShowDetailCardHeadings ? (
+    <div className={css.detailCardHeadings}>
+      <h2 className={css.detailCardTitle}>{listingTitle}</h2>
+      <p className={css.detailCardSubtitle}>
+        <FormattedMessage id="TransactionPanel.hostedBy" values={{ name: authorDisplayName }} />
+      </p>
+      <AddressLinkMaybe
+        transaction={transaction}
+        transactionRole={transactionRole}
+        currentListing={listing}
+      />
+    </div>
+  ) : null;
+};
+
+// Functional component as a helper to build a BookingPanel
+export const BookingPanelMaybe = props => {
+  const {
+    authorDisplayName,
+    transaction,
+    transactionRole,
+    listing,
+    listingTitle,
+    provider,
+  } = props;
+
+  const isProviderLoaded = !!provider.id;
+  const isProviderBanned = isProviderLoaded && provider.attributes.banned;
+  const isCustomer = transactionRole === 'customer';
+  const canShowBookingPanel = isCustomer && txIsEnquired(transaction) && !isProviderBanned;
+
+  return canShowBookingPanel ? (
+    <BookingPanel
+      className={css.bookingPanel}
+      listing={listing}
+      isOwnListing={false}
+      handleBookingSubmit={() => console.log('submit')}
+      richTitle={listingTitle}
+      authorDisplayName={authorDisplayName}
+      onManageDisableScrolling={() => null}
+      timeSlots={null}
+      fetchTimeSlotsError={null}
+    />
+  ) : null;
 };
 
 // Functional component as a helper to build ActionButtons for

src/components/TransactionPanel/TransactionPanel.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
-import { txIsEnquired, txIsRequested, propTypes } from '../../util/types';
+import { txIsRequested, propTypes } from '../../util/types';
 import { ensureListing, ensureTransaction, ensureUser } from '../../util/data';
 import { isMobileSafari } from '../../util/userAgent';
 import { AvatarMedium, AvatarLarge, ResponsiveImage, ReviewModal } from '../../components';
@@ -11,9 +11,10 @@ import { SendMessageForm } from '../../forms';
 // These are internal components that make this file more readable.
 import {
   AddressLinkMaybe,
+  BookingPanelMaybe,
   BreakdownMaybe,
+  DetailCardHeadingsMaybe,
   FeedSection,
-  OrderActionButtonMaybe,
   SaleActionButtonsMaybe,
   TransactionPageTitle,
   TransactionPageMessage,
@@ -142,9 +143,6 @@ export class TransactionPanelComponent extends Component {
     const customerLoaded = !!currentCustomer.id;
     const isCustomerBanned = customerLoaded && currentCustomer.attributes.banned;
     const canShowSaleButtons = isProvider && txIsRequested(currentTransaction) && !isCustomerBanned;
-    const isProviderLoaded = !!currentProvider.id;
-    const isProviderBanned = isProviderLoaded && currentProvider.attributes.banned;
-    const canShowBookButton = isCustomer && txIsEnquired(currentTransaction) && !isProviderBanned;
 
     const bannedUserDisplayName = intl.formatMessage({
       id: 'TransactionPanel.bannedUserDisplayName',
@@ -168,7 +166,7 @@ export class TransactionPanelComponent extends Component {
       currentListing.images && currentListing.images.length > 0 ? currentListing.images[0] : null;
 
     const actionButtonClasses = classNames(css.actionButtons);
-    const canShowActionButtons = canShowBookButton || canShowSaleButtons;
+    const canShowActionButtons = canShowSaleButtons;
 
     let actionButtons = null;
     if (canShowSaleButtons) {
@@ -185,14 +183,6 @@ export class TransactionPanelComponent extends Component {
           onDeclineSale={onDeclineSale}
         />
       );
-    } else if (canShowBookButton) {
-      actionButtons = (
-        <OrderActionButtonMaybe
-          rootClassName={actionButtonClasses}
-          canShowButtons={canShowBookButton}
-          listing={currentListing}
-        />
-      );
     }
 
     const sendMessagePlaceholder = intl.formatMessage(
@@ -306,23 +296,24 @@ export class TransactionPanelComponent extends Component {
                   <AvatarMedium user={currentProvider} />
                 </div>
               ) : null}
-              {isCustomer ? (
-                <div className={css.detailCardHeadings}>
-                  <h2 className={css.detailCardTitle}>{listingTitle}</h2>
-                  <p className={css.detailCardSubtitle}>
-                    <FormattedMessage
-                      id="TransactionPanel.hostedBy"
-                      values={{ name: authorDisplayName }}
-                    />
-                  </p>
-                  <AddressLinkMaybe
-                    transaction={currentTransaction}
-                    transactionRole={transactionRole}
-                    currentListing={currentListing}
-                  />
-                </div>
-              )}
+
+              <DetailCardHeadingsMaybe
+                authorDisplayName={authorDisplayName}
+                transaction={currentTransaction}
+                transactionRole={transactionRole}
+                listing={currentListing}
+                listingTitle={listingTitle}
+              />
+              <BookingPanelMaybe
+                authorDisplayName={authorDisplayName}
+                transaction={currentTransaction}
+                transactionRole={transactionRole}
+                listing={currentListing}
+                listingTitle={listingTitle}
+                provider={currentProvider}
+              />
               <BreakdownMaybe transaction={currentTransaction} transactionRole={transactionRole} />
+
               {canShowActionButtons ? (
                 <div className={css.desktopActionButtons}>{actionButtons}</div>
               ) : null}