From 703fbcef52e6bfa4784ead6e47ae589ba6ea6505 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Mon, 18 Dec 2017 18:37:32 +0200
Subject: [PATCH 1/8] ProfileMenu label had rounded borders.

---
 src/components/TopbarDesktop/TopbarDesktop.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css
index 11ae3248..a52f7db4 100644
--- a/src/components/TopbarDesktop/TopbarDesktop.css
+++ b/src/components/TopbarDesktop/TopbarDesktop.css
@@ -21,6 +21,7 @@
 
     &:hover {
       border-bottom: 4px solid var(--marketplaceColor);
+      border-radius: 0;
       text-decoration: none;
     }
   }

From e5fa50d017dd50b06a7f76f021f94c2294f9e0a1 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Mon, 18 Dec 2017 18:42:41 +0200
Subject: [PATCH 2/8] refactoring classnames of tx detail card

---
 src/components/TransactionPanel/TransactionPanel.css | 12 ++++++------
 src/components/TransactionPanel/TransactionPanel.js  | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/TransactionPanel/TransactionPanel.css b/src/components/TransactionPanel/TransactionPanel.css
index 350189d4..b0e144e2 100644
--- a/src/components/TransactionPanel/TransactionPanel.css
+++ b/src/components/TransactionPanel/TransactionPanel.css
@@ -152,7 +152,7 @@
   }
 }
 
-.desktopAside {
+.asideDesktop {
   margin: 1px 0 0 0;
 
   @media (--viewportLarge) {
@@ -162,7 +162,7 @@
   }
 }
 
-.breakdownDesktop {
+.detailCard {
   display: none;
 
   position: sticky;
@@ -177,14 +177,14 @@
   }
 }
 
-.breakdownImageWrapper {
+.detailCardImageWrapper {
   /* Layout */
   display: block;
   width: 100%;
   position: relative;
 }
 
-.breakdownHeadings {
+.detailCardHeadings {
   display: none;
 
   @media (--viewportLarge) {
@@ -194,7 +194,7 @@
   }
 }
 
-.breakdownTitle {
+.detailCardTitle {
   margin-bottom: 10px;
 
   @media (--viewportLarge) {
@@ -203,7 +203,7 @@
   }
 }
 
-.breakdownSubtitle {
+.detailCardSubtitle {
   @apply --marketplaceH5FontStyles;
   color: var(--matterColorAnti);
 
diff --git a/src/components/TransactionPanel/TransactionPanel.js b/src/components/TransactionPanel/TransactionPanel.js
index 9a0600c9..f78499e4 100644
--- a/src/components/TransactionPanel/TransactionPanel.js
+++ b/src/components/TransactionPanel/TransactionPanel.js
@@ -279,9 +279,9 @@ export class TransactionPanelComponent extends Component {
             ) : null}
           </div>
 
-          <div className={css.desktopAside}>
-            <div className={css.breakdownDesktop}>
-              <div className={css.breakdownImageWrapper}>
+          <div className={css.asideDesktop}>
+            <div className={css.detailCard}>
+              <div className={css.detailCardImageWrapper}>
                 <div className={css.aspectWrapper}>
                   <ResponsiveImage
                     rootClassName={css.rootForImage}
@@ -301,9 +301,9 @@ export class TransactionPanelComponent extends Component {
                 </div>
               ) : null}
               {isCustomer ? (
-                <div className={css.breakdownHeadings}>
-                  <h2 className={css.breakdownTitle}>{listingTitle}</h2>
-                  <p className={css.breakdownSubtitle}>
+                <div className={css.detailCardHeadings}>
+                  <h2 className={css.detailCardTitle}>{listingTitle}</h2>
+                  <p className={css.detailCardSubtitle}>
                     <FormattedMessage
                       id="TransactionPanel.hostedBy"
                       values={{ name: authorDisplayName }}

From ad579fa3ff1fe8a1ed0d9509a9a63673b9d1cb4d Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Mon, 18 Dec 2017 18:46:45 +0200
Subject: [PATCH 3/8] Refactoring createListingLink helper function

---
 .../TransactionPanel.helpers.js               | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/TransactionPanel/TransactionPanel.helpers.js b/src/components/TransactionPanel/TransactionPanel.helpers.js
index 21abcbc8..b1319536 100644
--- a/src/components/TransactionPanel/TransactionPanel.helpers.js
+++ b/src/components/TransactionPanel/TransactionPanel.helpers.js
@@ -95,6 +95,22 @@ export const BreakdownMaybe = props => {
 // Functional component as a helper to build ActionButtons
 // Provider only when state is preauthorized
 export const ActionButtonsMaybe = props => {
+const createListingLink = (listing, label, listingPageName = 'ListingPage', className = '') => {
+  const listingLoaded = !!listing.id;
+
+  if (listingLoaded && !listing.attributes.deleted) {
+    const title = listing.attributes.title;
+    const params = { id: listing.id.uuid, slug: createSlug(title) };
+    return (
+      <NamedLink className={className} name={listingPageName} params={params}>
+        {label}
+      </NamedLink>
+    );
+  } else {
+    return <FormattedMessage id="TransactionPanel.deletedListingOrderTitle" />;
+  }
+};
+
   const {
     className,
     rootClassName,
@@ -149,19 +165,6 @@ export const ActionButtonsMaybe = props => {
   ) : null;
 };
 
-const createListingLink = (listingLoaded, title, id) => {
-  if (listingLoaded && title) {
-    const params = { id: id.uuid, slug: createSlug(title) };
-    return (
-      <NamedLink name="ListingPage" params={params}>
-        {title}
-      </NamedLink>
-    );
-  } else {
-    return <FormattedMessage id="TransactionPanel.deletedListingOrderTitle" />;
-  }
-};
-
 // Functional component as a helper to build order title
 export const OrderTitle = props => {
   const {
@@ -172,8 +175,7 @@ export const OrderTitle = props => {
     currentListing,
     listingTitle,
   } = props;
-  const listingLoaded = !!currentListing.id;
-  const listingLink = createListingLink(listingLoaded, listingTitle, currentListing.id);
+  const listingLink = createListingLink(currentListing, listingTitle);
 
   const classes = classNames(rootClassName || css.headingOrder, className);
 
@@ -283,8 +285,7 @@ export const SaleTitle = props => {
     currentListing,
     listingTitle,
   } = props;
-  const listingLoaded = !!currentListing.id;
-  const listingLink = createListingLink(listingLoaded, listingTitle, currentListing.id);
+  const listingLink = createListingLink(currentListing, listingTitle);
 
   const classes = classNames(rootClassName || css.headingSale, className);
 

From 9700d538a9bc2ca5c9c92aee58d4a75a2b20d954 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Mon, 18 Dec 2017 18:49:50 +0200
Subject: [PATCH 4/8] Add OrderActionButtonMaybe functional component

---
 .../TransactionPanel/TransactionPanel.css      |  6 ++++++
 .../TransactionPanel.helpers.js                | 18 +++++++++++++++---
 src/translations/en.json                       |  1 +
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/TransactionPanel/TransactionPanel.css b/src/components/TransactionPanel/TransactionPanel.css
index b0e144e2..b7848b4e 100644
--- a/src/components/TransactionPanel/TransactionPanel.css
+++ b/src/components/TransactionPanel/TransactionPanel.css
@@ -300,6 +300,12 @@
   }
 }
 
+.requestToBookButton {
+  @apply --marketplaceButtonStylesPrimary;
+
+  text-decoration: none;
+}
+
 .actionButtons {
   /* Position action button row above the footer */
   z-index: 9;
diff --git a/src/components/TransactionPanel/TransactionPanel.helpers.js b/src/components/TransactionPanel/TransactionPanel.helpers.js
index b1319536..3482f557 100644
--- a/src/components/TransactionPanel/TransactionPanel.helpers.js
+++ b/src/components/TransactionPanel/TransactionPanel.helpers.js
@@ -92,9 +92,6 @@ export const BreakdownMaybe = props => {
   ) : null;
 };
 
-// Functional component as a helper to build ActionButtons
-// Provider only when state is preauthorized
-export const ActionButtonsMaybe = props => {
 const createListingLink = (listing, label, listingPageName = 'ListingPage', className = '') => {
   const listingLoaded = !!listing.id;
 
@@ -111,6 +108,21 @@ const createListingLink = (listing, label, listingPageName = 'ListingPage', clas
   }
 };
 
+// Functional component as a helper to build ActionButtons for
+// provider when state is preauthorized
+export const OrderActionButtonMaybe = props => {
+  const { className, rootClassName, canShowButtons, listing } = props;
+
+  const title = <FormattedMessage id="TransactionPanel.requestToBook" />;
+  const listingLink = createListingLink(listing, title, 'ListingPageBook', css.requestToBookButton);
+  const classes = classNames(rootClassName || css.actionButtons, className);
+
+  return canShowButtons ? <div className={classes}>{listingLink}</div> : null;
+};
+
+// Functional component as a helper to build ActionButtons for
+// provider when state is preauthorized
+export const SaleActionButtonsMaybe = props => {
   const {
     className,
     rootClassName,
diff --git a/src/translations/en.json b/src/translations/en.json
index b8664881..b4e3e850 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -620,6 +620,7 @@
   "TransactionPanel.orderPreauthorizedInfo": "{providerName} has been notified about the booking request. Sit back and relax.",
   "TransactionPanel.orderPreauthorizedSubtitle": "You have requested to book {listingLink}.",
   "TransactionPanel.orderPreauthorizedTitle": "Great success, {customerName}!",
+  "TransactionPanel.requestToBook": "Request to book",
   "TransactionPanel.saleAcceptedTitle": "You accepted a request from {customerName} to book {listingLink}.",
   "TransactionPanel.saleCancelledTitle": "The booking from {customerName} for {listingLink} has been cancelled.",
   "TransactionPanel.saleDeclinedTitle": "The request from {customerName} to book {listingLink} has been declined.",

From c9403df341480a70076ac327d9a71267e6b00a28 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Mon, 18 Dec 2017 19:04:03 +0200
Subject: [PATCH 5/8] SaleActionButtonsMaybe or OrderActionButtonMaybe used
 when necessary.

---
 .../TransactionPanel/TransactionPanel.css     |  1 +
 .../TransactionPanel/TransactionPanel.js      | 49 ++++++++++++-------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/components/TransactionPanel/TransactionPanel.css b/src/components/TransactionPanel/TransactionPanel.css
index b7848b4e..d7600c8c 100644
--- a/src/components/TransactionPanel/TransactionPanel.css
+++ b/src/components/TransactionPanel/TransactionPanel.css
@@ -191,6 +191,7 @@
     display: block;
     margin-left: 48px;
     margin-right: 48px;
+    margin-bottom: 37px;
   }
 }
 
diff --git a/src/components/TransactionPanel/TransactionPanel.js b/src/components/TransactionPanel/TransactionPanel.js
index f78499e4..9244be3f 100644
--- a/src/components/TransactionPanel/TransactionPanel.js
+++ b/src/components/TransactionPanel/TransactionPanel.js
@@ -10,9 +10,10 @@ import { SendMessageForm } from '../../containers';
 
 // These are internal components that make this file more readable.
 import {
-  ActionButtonsMaybe,
   BreakdownMaybe,
   FeedSection,
+  OrderActionButtonMaybe,
+  SaleActionButtonsMaybe,
   TransactionPageTitle,
   TransactionPageMessage,
   displayNames,
@@ -138,8 +139,12 @@ export class TransactionPanelComponent extends Component {
     const listingDeleted = listingLoaded && currentListing.attributes.deleted;
     const customerLoaded = !!currentCustomer.id;
     const isCustomerBanned = customerLoaded && currentCustomer.attributes.banned;
-    const canShowButtons =
+    const canShowSaleButtons =
       isProvider && propTypes.txIsPreauthorized(currentTransaction) && !isCustomerBanned;
+    const isProviderLoaded = !!currentProvider.id;
+    const isProviderBanned = isProviderLoaded && currentProvider.attributes.banned;
+    const canShowBookButton =
+      isCustomer && propTypes.txIsEnquired(currentTransaction) && !isProviderBanned;
 
     const bannedUserDisplayName = intl.formatMessage({
       id: 'TransactionPanel.bannedUserDisplayName',
@@ -166,19 +171,27 @@ export class TransactionPanelComponent extends Component {
       [css.actionButtonsWithFormFocused]: this.state.sendMessageFormFocused,
     });
 
-    const actionButtons = (
-      <ActionButtonsMaybe
-        rootClassName={actionButtonClasses}
-        canShowButtons={canShowButtons}
-        transaction={currentTransaction}
-        acceptInProgress={acceptInProgress}
-        declineInProgress={declineInProgress}
-        acceptSaleError={acceptSaleError}
-        declineSaleError={declineSaleError}
-        onAcceptSale={onAcceptSale}
-        onDeclineSale={onDeclineSale}
-      />
-    );
+    const canShowActionButtons = canShowBookButton || canShowSaleButtons;
+    const actionButtons =
+      canShowActionButtons && canShowSaleButtons ? (
+        <SaleActionButtonsMaybe
+          rootClassName={actionButtonClasses}
+          canShowButtons={canShowSaleButtons}
+          transaction={currentTransaction}
+          acceptInProgress={acceptInProgress}
+          declineInProgress={declineInProgress}
+          acceptSaleError={acceptSaleError}
+          declineSaleError={declineSaleError}
+          onAcceptSale={onAcceptSale}
+          onDeclineSale={onDeclineSale}
+        />
+      ) : (
+        <OrderActionButtonMaybe
+          rootClassName={actionButtonClasses}
+          canShowButtons={canShowBookButton}
+          listing={currentListing}
+        />
+      );
 
     const sendMessagePlaceholder = intl.formatMessage(
       { id: 'TransactionPanel.sendMessagePlaceholder' },
@@ -186,7 +199,7 @@ export class TransactionPanelComponent extends Component {
     );
 
     const sendMessageFormClasses = classNames(css.sendMessageForm, {
-      [css.sendMessageFormFixed]: !canShowButtons || this.state.sendMessageFormFocused,
+      [css.sendMessageFormFixed]: !canShowActionButtons || this.state.sendMessageFormFocused,
       [css.sendMessageFormFocusedInMobileSafari]:
         this.isMobSaf && this.state.sendMessageFormFocused,
     });
@@ -274,7 +287,7 @@ export class TransactionPanelComponent extends Component {
               onBlur={this.onSendMessageFormBlur}
               onSubmit={this.onMessageSubmit}
             />
-            {isProvider && canShowButtons ? (
+            {canShowActionButtons ? (
               <div className={css.mobileActionButtons}>{actionButtons}</div>
             ) : null}
           </div>
@@ -312,7 +325,7 @@ export class TransactionPanelComponent extends Component {
                 </div>
               ) : null}
               <BreakdownMaybe transaction={currentTransaction} transactionRole={transactionRole} />
-              {isProvider && canShowButtons ? (
+              {canShowActionButtons ? (
                 <div className={css.desktopActionButtons}>{actionButtons}</div>
               ) : null}
             </div>

From 48cd287bc5c0bc966039c9eabbbf09f8ab3e70fd Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Mon, 18 Dec 2017 19:04:32 +0200
Subject: [PATCH 6/8] Add enquiry title

---
 .../TransactionPanel.helpers.js               | 21 +++++++++++++++++--
 src/translations/en.json                      |  2 ++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/TransactionPanel/TransactionPanel.helpers.js b/src/components/TransactionPanel/TransactionPanel.helpers.js
index 3482f557..30ece11e 100644
--- a/src/components/TransactionPanel/TransactionPanel.helpers.js
+++ b/src/components/TransactionPanel/TransactionPanel.helpers.js
@@ -191,7 +191,15 @@ export const OrderTitle = props => {
 
   const classes = classNames(rootClassName || css.headingOrder, className);
 
-  if (propTypes.txIsPreauthorized(transaction)) {
+  if (propTypes.txIsEnquired(transaction)) {
+    return (
+      <h1 className={classes}>
+        <span className={css.mainTitle}>
+          <FormattedMessage id="TransactionPanel.orderEnquiredTitle" values={{ listingLink }} />
+        </span>
+      </h1>
+    );
+  } else if (propTypes.txIsPreauthorized(transaction)) {
     return (
       <h1 className={classes}>
         <span className={css.mainTitle}>
@@ -301,7 +309,16 @@ export const SaleTitle = props => {
 
   const classes = classNames(rootClassName || css.headingSale, className);
 
-  if (propTypes.txIsPreauthorized(transaction)) {
+  if (propTypes.txIsEnquired(transaction)) {
+    return (
+      <h1 className={classes}>
+        <FormattedMessage
+          id="TransactionPanel.saleEnquiredTitle"
+          values={{ customerName, listingLink }}
+        />
+      </h1>
+    );
+  } else if (propTypes.txIsPreauthorized(transaction)) {
     return (
       <h1 className={classes}>
         <FormattedMessage
diff --git a/src/translations/en.json b/src/translations/en.json
index b4e3e850..f982a702 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -617,6 +617,7 @@
   "TransactionPanel.orderCancelledTitle": "{customerName}, your booking for {listingLink} has been cancelled.",
   "TransactionPanel.orderDeclinedTitle": "{customerName}, your booking for {listingLink} has been declined.",
   "TransactionPanel.orderDeliveredTitle": "{customerName}, your booking for {listingLink} has been completed.",
+  "TransactionPanel.orderEnquiredTitle": "You enquired about {listingLink}",
   "TransactionPanel.orderPreauthorizedInfo": "{providerName} has been notified about the booking request. Sit back and relax.",
   "TransactionPanel.orderPreauthorizedSubtitle": "You have requested to book {listingLink}.",
   "TransactionPanel.orderPreauthorizedTitle": "Great success, {customerName}!",
@@ -625,6 +626,7 @@
   "TransactionPanel.saleCancelledTitle": "The booking from {customerName} for {listingLink} has been cancelled.",
   "TransactionPanel.saleDeclinedTitle": "The request from {customerName} to book {listingLink} has been declined.",
   "TransactionPanel.saleDeliveredTitle": "The booking from {customerName} for {listingLink} has been completed.",
+  "TransactionPanel.saleEnquiredTitle": "{customerName} enquired about {listingLink}",
   "TransactionPanel.saleRequestedInfo": "{customerName} is waiting for your response.",
   "TransactionPanel.saleRequestedTitle": "{customerName} has requested to book {listingLink}.",
   "TransactionPanel.sendMessagePlaceholder": "Send a message to {name}…",

From faaba6e509088e7c03ceac0839bf0b0131edb04b Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Mon, 18 Dec 2017 19:09:30 +0200
Subject: [PATCH 7/8] fix: title was included already to BreakdownMaybe

---
 .../TransactionPanel/TransactionPanel.js      |  3 -
 .../TransactionPanel.test.js.snap             | 72 -------------------
 2 files changed, 75 deletions(-)

diff --git a/src/components/TransactionPanel/TransactionPanel.js b/src/components/TransactionPanel/TransactionPanel.js
index 9244be3f..a240fb4c 100644
--- a/src/components/TransactionPanel/TransactionPanel.js
+++ b/src/components/TransactionPanel/TransactionPanel.js
@@ -257,9 +257,6 @@ export class TransactionPanelComponent extends Component {
             />
 
             <div className={css.breakdownMobile}>
-              <h3 className={css.bookingBreakdownTitle}>
-                <FormattedMessage id="TransactionPanel.bookingBreakdownTitle" />
-              </h3>
               <BreakdownMaybe transaction={currentTransaction} transactionRole={transactionRole} />
             </div>
 
diff --git a/src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap b/src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap
index 790a8a41..f0829ead 100644
--- a/src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap
+++ b/src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap
@@ -322,12 +322,6 @@ exports[`TransactionPanel - Order accepted matches snapshot 1`] = `
         }
       />
       <div>
-        <h3>
-          <FormattedMessage
-            id="TransactionPanel.bookingBreakdownTitle"
-            values={Object {}}
-          />
-        </h3>
         <Component
           transaction={
             Object {
@@ -1147,12 +1141,6 @@ exports[`TransactionPanel - Order autodeclined matches snapshot 1`] = `
         }
       />
       <div>
-        <h3>
-          <FormattedMessage
-            id="TransactionPanel.bookingBreakdownTitle"
-            values={Object {}}
-          />
-        </h3>
         <Component
           transaction={
             Object {
@@ -1972,12 +1960,6 @@ exports[`TransactionPanel - Order canceled matches snapshot 1`] = `
         }
       />
       <div>
-        <h3>
-          <FormattedMessage
-            id="TransactionPanel.bookingBreakdownTitle"
-            values={Object {}}
-          />
-        </h3>
         <Component
           transaction={
             Object {
@@ -2797,12 +2779,6 @@ exports[`TransactionPanel - Order declined matches snapshot 1`] = `
         }
       />
       <div>
-        <h3>
-          <FormattedMessage
-            id="TransactionPanel.bookingBreakdownTitle"
-            values={Object {}}
-          />
-        </h3>
         <Component
           transaction={
             Object {
@@ -3622,12 +3598,6 @@ exports[`TransactionPanel - Order delivered matches snapshot 1`] = `
         }
       />
       <div>
-        <h3>
-          <FormattedMessage
-            id="TransactionPanel.bookingBreakdownTitle"
-            values={Object {}}
-          />
-        </h3>
         <Component
           transaction={
             Object {
@@ -4447,12 +4417,6 @@ exports[`TransactionPanel - Order preauthorized matches snapshot 1`] = `
         }
       />
       <div>
-        <h3>
-          <FormattedMessage
-            id="TransactionPanel.bookingBreakdownTitle"
-            values={Object {}}
-          />
-        </h3>
         <Component
           transaction={
             Object {
@@ -5241,12 +5205,6 @@ exports[`TransactionPanel - Sale accepted matches snapshot 1`] = `
         }
       />
       <div>
-        <h3>
-          <FormattedMessage
-            id="TransactionPanel.bookingBreakdownTitle"
-            values={Object {}}
-          />
-        </h3>
         <Component
           transaction={
             Object {
@@ -5998,12 +5956,6 @@ exports[`TransactionPanel - Sale autodeclined matches snapshot 1`] = `
         }
       />
       <div>
-        <h3>
-          <FormattedMessage
-            id="TransactionPanel.bookingBreakdownTitle"
-            values={Object {}}
-          />
-        </h3>
         <Component
           transaction={
             Object {
@@ -6755,12 +6707,6 @@ exports[`TransactionPanel - Sale canceled matches snapshot 1`] = `
         }
       />
       <div>
-        <h3>
-          <FormattedMessage
-            id="TransactionPanel.bookingBreakdownTitle"
-            values={Object {}}
-          />
-        </h3>
         <Component
           transaction={
             Object {
@@ -7512,12 +7458,6 @@ exports[`TransactionPanel - Sale declined matches snapshot 1`] = `
         }
       />
       <div>
-        <h3>
-          <FormattedMessage
-            id="TransactionPanel.bookingBreakdownTitle"
-            values={Object {}}
-          />
-        </h3>
         <Component
           transaction={
             Object {
@@ -8269,12 +8209,6 @@ exports[`TransactionPanel - Sale delivered matches snapshot 1`] = `
         }
       />
       <div>
-        <h3>
-          <FormattedMessage
-            id="TransactionPanel.bookingBreakdownTitle"
-            values={Object {}}
-          />
-        </h3>
         <Component
           transaction={
             Object {
@@ -9026,12 +8960,6 @@ exports[`TransactionPanel - Sale preauthorized matches snapshot 1`] = `
         }
       />
       <div>
-        <h3>
-          <FormattedMessage
-            id="TransactionPanel.bookingBreakdownTitle"
-            values={Object {}}
-          />
-        </h3>
         <Component
           transaction={
             Object {

From 269ec36b0eba529cff93e14dc479f87fe628e0e7 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Tue, 19 Dec 2017 14:30:11 +0200
Subject: [PATCH 8/8] Review change

---
 src/components/TransactionPanel/TransactionPanel.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/TransactionPanel/TransactionPanel.js b/src/components/TransactionPanel/TransactionPanel.js
index a240fb4c..00d39a96 100644
--- a/src/components/TransactionPanel/TransactionPanel.js
+++ b/src/components/TransactionPanel/TransactionPanel.js
@@ -172,8 +172,10 @@ export class TransactionPanelComponent extends Component {
     });
 
     const canShowActionButtons = canShowBookButton || canShowSaleButtons;
-    const actionButtons =
-      canShowActionButtons && canShowSaleButtons ? (
+
+    let actionButtons = null;
+    if (canShowSaleButtons) {
+      actionButtons = (
         <SaleActionButtonsMaybe
           rootClassName={actionButtonClasses}
           canShowButtons={canShowSaleButtons}
@@ -185,13 +187,16 @@ export class TransactionPanelComponent extends Component {
           onAcceptSale={onAcceptSale}
           onDeclineSale={onDeclineSale}
         />
-      ) : (
+      );
+    } else if (canShowBookButton) {
+      actionButtons = (
         <OrderActionButtonMaybe
           rootClassName={actionButtonClasses}
           canShowButtons={canShowBookButton}
           listing={currentListing}
         />
       );
+    }
 
     const sendMessagePlaceholder = intl.formatMessage(
       { id: 'TransactionPanel.sendMessagePlaceholder' },