Enable requesting to book straight from enquiry

CHANGELOG.md

@@ -18,6 +18,8 @@ way to update this template, but currently, we follow a pattern:
   [#985](https://github.com/sharetribe/flex-template-web/pull/985)
 - [remove] Remove the default built-in email templates. Built-in email templates can be edited in
   Console. [#983](https://github.com/sharetribe/flex-template-web/pull/983)
+- [add] Enable booking a listing straight from an enquiry
+  [#976](https://github.com/sharetribe/flex-template-web/pull/976)
 - [change] Extract SectionBooking to a distinct component from ListingPage.
   [#969](https://github.com/sharetribe/flex-template-web/pull/969)
 

src/components/BookingPanel/BookingPanel.example.js

@@ -9,7 +9,7 @@ export const Default = {
   props: {
     className: css.example,
     listing: createListing('listing_1'),
-    handleBookingSubmit: values => console.log('Submit:', values),
+    onSubmit: values => console.log('Submit:', values),
     title: <span>Booking title</span>,
     subTitle: 'Hosted by Author N',
     authorDisplayName: 'Author Name',
@@ -22,7 +22,7 @@ export const WithClosedListing = {
   props: {
     className: css.example,
     listing: createListing('listing_1', { state: LISTING_STATE_CLOSED }),
-    handleBookingSubmit: values => console.log('Submit:', values),
+    onSubmit: values => console.log('Submit:', values),
     title: <span>Booking title</span>,
     subTitle: 'Hosted by Author N',
     authorDisplayName: 'Author Name',

src/components/BookingPanel/BookingPanel.js

@@ -55,7 +55,7 @@ const BookingPanel = props => {
     listing,
     isOwnListing,
     unitType,
-    handleBookingSubmit,
+    onSubmit,
     title,
     subTitle,
     authorDisplayName,
@@ -116,7 +116,7 @@ const BookingPanel = props => {
             className={css.bookingForm}
             submitButtonWrapperClassName={css.bookingDatesSubmitButtonWrapper}
             unitType={unitType}
-            onSubmit={handleBookingSubmit}
+            onSubmit={onSubmit}
             price={price}
             isOwnListing={isOwnListing}
             timeSlots={timeSlots}
@@ -167,7 +167,7 @@ BookingPanel.propTypes = {
   listing: propTypes.listing.isRequired,
   isOwnListing: bool,
   unitType: propTypes.bookingUnitType,
-  handleBookingSubmit: func.isRequired,
+  onSubmit: func.isRequired,
   title: oneOfType([node, string]).isRequired,
   subTitle: oneOfType([node, string]),
   authorDisplayName: string.isRequired,

src/components/TransactionPanel/TransactionPanel.css

@@ -73,9 +73,11 @@
 }
 
 .avatarWrapperCustomerDesktop {
+  display: none;
   composes: avatarWrapperMobile;
 
   @media (--viewportLarge) {
+    display: block;
     margin-left: 48px;
   }
 }
@@ -171,25 +173,27 @@
 }
 
 .detailCard {
-  display: none;
-
-  position: sticky;
-  top: -200px; /* This is a hack to showcase how the component would look when the image isn't sticky */
-  width: 409px;
-  background-color: var(--matterColorLight);
-  border: 1px solid var(--matterColorNegative);
-  border-radius: 2px;
-
   @media (--viewportLarge) {
-    display: block;
+    position: sticky;
+    top: -200px; /* This is a hack to showcase how the component would look when the image isn't sticky */
+    width: 409px;
+    background-color: var(--matterColorLight);
+    border: 1px solid var(--matterColorNegative);
+    border-radius: 2px;
+    z-index: 1;
   }
 }
 
 .detailCardImageWrapper {
+  display: none;
+
   /* Layout */
-  display: block;
   width: 100%;
   position: relative;
+
+  @media (--viewportLarge) {
+    display: block;
+  }
 }
 
 .detailCardHeadings {
@@ -202,10 +206,6 @@
     margin-bottom: 37px;
   }
 }
-.detailCardHeadingsProvider {
-  composes: detailCardHeadings;
-  margin-top: 24px;
-}
 
 .detailCardTitle {
   margin-bottom: 10px;
@@ -218,13 +218,12 @@
 
 .detailCardSubtitle {
   @apply --marketplaceH5FontStyles;
-  color: var(--matterColorAnti);
 
   margin-top: 0;
   margin-bottom: 0;
 
   @media (--viewportLarge) {
-    margin-top: 1px;
+    margin-top: 9px;
     margin-bottom: 0;
   }
 }
@@ -250,6 +249,14 @@
   }
 }
 
+.breakdownContainer {
+  display: none;
+
+  @media (--viewportLarge) {
+    display: block;
+  }
+}
+
 .breakdown {
   margin: 14px 24px 0 24px;
 
@@ -408,3 +415,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,
@@ -89,7 +90,6 @@ export const FeedSection = props => {
 export const AddressLinkMaybe = props => {
   const { transaction, transactionRole, currentListing } = props;
 
-  const isProvider = transactionRole === 'provider';
   const isCustomer = transactionRole === 'customer';
   const txIsAcceptedForCustomer = isCustomer && txHasBeenAccepted(transaction);
 
@@ -106,7 +106,7 @@ export const AddressLinkMaybe = props => {
   const fullAddress =
     typeof building === 'string' && building.length > 0 ? `${building}, ${address}` : address;
 
-  return (isProvider || txIsAcceptedForCustomer) && hrefToGoogleMaps ? (
+  return txIsAcceptedForCustomer && hrefToGoogleMaps ? (
     <p className={css.address}>
       <ExternalLink href={hrefToGoogleMaps}>{fullAddress}</ExternalLink>
     </p>
@@ -115,17 +115,19 @@ export const AddressLinkMaybe = props => {
 
 // Functional component as a helper to build BookingBreakdown
 export const BreakdownMaybe = props => {
-  const { className, rootClassName, transaction, transactionRole } = props;
+  const { className, rootClassName, breakdownClassName, transaction, transactionRole } = props;
   const loaded = transaction && transaction.id && transaction.booking && transaction.booking.id;
 
-  const classes = classNames(rootClassName || css.breakdown, className);
+  const classes = classNames(rootClassName || className);
+  const breakdownClasses = classNames(css.breakdown, breakdownClassName);
+
   return loaded ? (
-    <div>
+    <div className={classes}>
       <h3 className={css.bookingBreakdownTitle}>
         <FormattedMessage id="TransactionPanel.bookingBreakdownTitle" />
       </h3>
       <BookingBreakdown
-        className={classes}
+        className={breakdownClasses}
         userRole={transactionRole}
         unitType={config.bookingUnitType}
         transaction={transaction}
@@ -152,16 +154,62 @@ 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 { transaction, transactionRole, listing, listingTitle, subTitle } = 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 canShowDetailCardHeadings ? (
+    <div className={css.detailCardHeadings}>
+      <h2 className={css.detailCardTitle}>{listingTitle}</h2>
+      <p className={css.detailCardSubtitle}>{subTitle}</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,
+    subTitle,
+    provider,
+    onSubmit,
+    onManageDisableScrolling,
+    timeSlots,
+    fetchTimeSlotsError,
+  } = props;
 
-  return canShowButtons ? <div className={classes}>{listingLink}</div> : null;
+  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}
+      isOwnListing={false}
+      listing={listing}
+      handleBookingSubmit={() => console.log('submit')}
+      title={listingTitle}
+      subTitle={subTitle}
+      authorDisplayName={authorDisplayName}
+      onSubmit={onSubmit}
+      onManageDisableScrolling={onManageDisableScrolling}
+      timeSlots={timeSlots}
+      fetchTimeSlotsError={fetchTimeSlotsError}
+    />
+  ) : null;
 };
 
 // Functional component as a helper to build ActionButtons for