From 86fe4e0fd1d239c21b331935d2d6e0a175bc52c8 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Wed, 29 Nov 2017 16:21:21 +0200
Subject: [PATCH 1/3] Fix titles or order and sale pages

Also unify translations.
---
 .../OrderDetailsPanel/OrderDetailsPanel.js    | 34 +++++++++++++++----
 .../OrderDetailsPanel.test.js.snap            |  7 ++--
 .../SaleDetailsPanel/SaleDetailsPanel.js      | 20 ++++++-----
 .../SaleDetailsPanel.test.js.snap             | 14 ++++----
 src/translations/en.json                      | 30 +++++++---------
 src/util/propTypes.js                         |  9 +++++
 6 files changed, 73 insertions(+), 41 deletions(-)

diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.js b/src/components/OrderDetailsPanel/OrderDetailsPanel.js
index 6d5ce15b..60bfa6cd 100644
--- a/src/components/OrderDetailsPanel/OrderDetailsPanel.js
+++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.js
@@ -56,15 +56,37 @@ const orderTitle = (transaction, listingLink, customerName) => {
       </span>
     );
   } else if (propTypes.txIsDeclined(transaction)) {
-    return <FormattedMessage id="OrderDetailsPanel.orderDeclinedTitle" values={{ listingLink }} />;
+    return (
+      <FormattedMessage
+        id="OrderDetailsPanel.orderDeclinedTitle"
+        values={{ customerName, listingLink }}
+      />
+    );
   } else if (propTypes.txIsAutodeclined(transaction)) {
     return (
-      <FormattedMessage id="OrderDetailsPanel.orderAutoDeclinedTitle" values={{ listingLink }} />
+      <FormattedMessage
+        id="OrderDetailsPanel.orderDeclinedTitle"
+        values={{ customerName, listingLink }}
+      />
     );
   } else if (propTypes.txIsCanceled(transaction)) {
-    return <FormattedMessage id="OrderDetailsPanel.orderCanceledTitle" values={{ listingLink }} />;
-  } else if (propTypes.txIsDelivered(transaction)) {
-    return <FormattedMessage id="OrderDetailsPanel.orderDeliveredTitle" values={{ listingLink }} />;
+    return (
+      <FormattedMessage
+        id="OrderDetailsPanel.orderCancelledTitle"
+        values={{ customerName, listingLink }}
+      />
+    );
+  } else if (
+    propTypes.txIsDelivered(transaction) ||
+    propTypes.txHasFirstReview(transaction) ||
+    propTypes.txIsReviewed(transaction)
+  ) {
+    return (
+      <FormattedMessage
+        id="OrderDetailsPanel.orderDeliveredTitle"
+        values={{ customerName, listingLink }}
+      />
+    );
   } else {
     return null;
   }
@@ -73,7 +95,7 @@ const orderTitle = (transaction, listingLink, customerName) => {
 const orderMessage = (transaction, providerName) => {
   if (propTypes.txIsPreauthorized(transaction)) {
     return (
-      <FormattedMessage id="OrderDetailsPanel.orderPreauthorizedStatus" values={{ providerName }} />
+      <FormattedMessage id="OrderDetailsPanel.orderPreauthorizedInfo" values={{ providerName }} />
     );
   }
   return null;
diff --git a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap b/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
index 71cf60de..2ea42eee 100644
--- a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
+++ b/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
@@ -700,9 +700,10 @@ exports[`OrderDetailsPanel autodeclined matches snapshot 1`] = `
       </div>
       <h1>
         <FormattedMessage
-          id="OrderDetailsPanel.orderAutoDeclinedTitle"
+          id="OrderDetailsPanel.orderDeclinedTitle"
           values={
             Object {
+              "customerName": "customer display name",
               "listingLink": <NamedLink
                 name="ListingPage"
                 params={
@@ -1985,6 +1986,7 @@ exports[`OrderDetailsPanel declined matches snapshot 1`] = `
           id="OrderDetailsPanel.orderDeclinedTitle"
           values={
             Object {
+              "customerName": "customer display name",
               "listingLink": <NamedLink
                 name="ListingPage"
                 params={
@@ -2620,6 +2622,7 @@ exports[`OrderDetailsPanel delivered matches snapshot 1`] = `
           id="OrderDetailsPanel.orderDeliveredTitle"
           values={
             Object {
+              "customerName": "customer display name",
               "listingLink": <NamedLink
                 name="ListingPage"
                 params={
@@ -3284,7 +3287,7 @@ exports[`OrderDetailsPanel preauthorized matches snapshot 1`] = `
       </h1>
       <p>
         <FormattedMessage
-          id="OrderDetailsPanel.orderPreauthorizedStatus"
+          id="OrderDetailsPanel.orderPreauthorizedInfo"
           values={
             Object {
               "providerName": "provider display name",
diff --git a/src/components/SaleDetailsPanel/SaleDetailsPanel.js b/src/components/SaleDetailsPanel/SaleDetailsPanel.js
index 8b29437b..b4d00cf7 100644
--- a/src/components/SaleDetailsPanel/SaleDetailsPanel.js
+++ b/src/components/SaleDetailsPanel/SaleDetailsPanel.js
@@ -37,42 +37,46 @@ const saleTitle = (transaction, listingLink, customerName) => {
   if (propTypes.txIsPreauthorized(transaction)) {
     return (
       <FormattedMessage
-        id="SaleDetailsPanel.listingRequestedTitle"
+        id="SaleDetailsPanel.saleRequestedTitle"
         values={{ customerName, listingLink }}
       />
     );
   } else if (propTypes.txIsAccepted(transaction)) {
     return (
       <FormattedMessage
-        id="SaleDetailsPanel.listingAcceptedTitle"
+        id="SaleDetailsPanel.saleAcceptedTitle"
         values={{ customerName, listingLink }}
       />
     );
   } else if (propTypes.txIsDeclined(transaction)) {
     return (
       <FormattedMessage
-        id="SaleDetailsPanel.listingDeclinedTitle"
+        id="SaleDetailsPanel.saleDeclinedTitle"
         values={{ customerName, listingLink }}
       />
     );
   } else if (propTypes.txIsAutodeclined(transaction)) {
     return (
       <FormattedMessage
-        id="SaleDetailsPanel.listingDeclinedTitle"
+        id="SaleDetailsPanel.saleDeclinedTitle"
         values={{ customerName, listingLink }}
       />
     );
   } else if (propTypes.txIsCanceled(transaction)) {
     return (
       <FormattedMessage
-        id="SaleDetailsPanel.listingCanceledTitle"
+        id="SaleDetailsPanel.saleCancelledTitle"
         values={{ customerName, listingLink }}
       />
     );
-  } else if (propTypes.txIsDelivered(transaction)) {
+  } else if (
+    propTypes.txIsDelivered(transaction) ||
+    propTypes.txHasFirstReview(transaction) ||
+    propTypes.txIsReviewed(transaction)
+  ) {
     return (
       <FormattedMessage
-        id="SaleDetailsPanel.listingDeliveredTitle"
+        id="SaleDetailsPanel.saleDeliveredTitle"
         values={{ customerName, listingLink }}
       />
     );
@@ -83,7 +87,7 @@ const saleTitle = (transaction, listingLink, customerName) => {
 
 const saleInfoText = (transaction, customerName) => {
   if (propTypes.txIsPreauthorized(transaction)) {
-    return <FormattedMessage id="SaleDetailsPanel.saleRequestedStatus" values={{ customerName }} />;
+    return <FormattedMessage id="SaleDetailsPanel.saleRequestedInfo" values={{ customerName }} />;
   }
   return null;
 };
diff --git a/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap b/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap
index 020ddbac..ca5ad0fa 100644
--- a/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap
+++ b/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap
@@ -70,7 +70,7 @@ exports[`SaleDetailsPanel accepted matches snapshot 1`] = `
       </div>
       <h1>
         <FormattedMessage
-          id="SaleDetailsPanel.listingAcceptedTitle"
+          id="SaleDetailsPanel.saleAcceptedTitle"
           values={
             Object {
               "customerName": "customer1 display name",
@@ -657,7 +657,7 @@ exports[`SaleDetailsPanel autodeclined matches snapshot 1`] = `
       </div>
       <h1>
         <FormattedMessage
-          id="SaleDetailsPanel.listingDeclinedTitle"
+          id="SaleDetailsPanel.saleDeclinedTitle"
           values={
             Object {
               "customerName": "customer1 display name",
@@ -1244,7 +1244,7 @@ exports[`SaleDetailsPanel canceled matches snapshot 1`] = `
       </div>
       <h1>
         <FormattedMessage
-          id="SaleDetailsPanel.listingAcceptedTitle"
+          id="SaleDetailsPanel.saleAcceptedTitle"
           values={
             Object {
               "customerName": "customer1 display name",
@@ -1831,7 +1831,7 @@ exports[`SaleDetailsPanel declined matches snapshot 1`] = `
       </div>
       <h1>
         <FormattedMessage
-          id="SaleDetailsPanel.listingDeclinedTitle"
+          id="SaleDetailsPanel.saleDeclinedTitle"
           values={
             Object {
               "customerName": "customer1 display name",
@@ -2418,7 +2418,7 @@ exports[`SaleDetailsPanel delivered matches snapshot 1`] = `
       </div>
       <h1>
         <FormattedMessage
-          id="SaleDetailsPanel.listingDeliveredTitle"
+          id="SaleDetailsPanel.saleDeliveredTitle"
           values={
             Object {
               "customerName": "customer1 display name",
@@ -3005,7 +3005,7 @@ exports[`SaleDetailsPanel preauthorized matches snapshot 1`] = `
       </div>
       <h1>
         <FormattedMessage
-          id="SaleDetailsPanel.listingRequestedTitle"
+          id="SaleDetailsPanel.saleRequestedTitle"
           values={
             Object {
               "customerName": "customer1 display name",
@@ -3026,7 +3026,7 @@ exports[`SaleDetailsPanel preauthorized matches snapshot 1`] = `
       </h1>
       <p>
         <FormattedMessage
-          id="SaleDetailsPanel.saleRequestedStatus"
+          id="SaleDetailsPanel.saleRequestedInfo"
           values={
             Object {
               "customerName": "customer1 display name",
diff --git a/src/translations/en.json b/src/translations/en.json
index f3d08fa3..6fb9d372 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -279,14 +279,13 @@
   "OrderDetailsPanel.initialMessageFailed": "Whoops, failed to send message from checkout.",
   "OrderDetailsPanel.messageDeletedListing": "However, the listing is deleted and cannot be viewed anymore.",
   "OrderDetailsPanel.messageLoadingFailed": "Something went wrong when loading messages. Please refresh the page and try again.",
-  "OrderDetailsPanel.orderAcceptedSubtitle": "You have booked {listingLink}",
+  "OrderDetailsPanel.orderAcceptedSubtitle": "Your booking for {listingLink} has been accepted.",
   "OrderDetailsPanel.orderAcceptedTitle": "Woohoo {customerName}!",
-  "OrderDetailsPanel.orderAutoDeclinedTitle": "You requested to book {listingLink}",
-  "OrderDetailsPanel.orderCanceledTitle": "You booked {listingLink}",
-  "OrderDetailsPanel.orderDeclinedTitle": "You requested to book {listingLink}",
-  "OrderDetailsPanel.orderDeliveredTitle": "The booking period has ended",
-  "OrderDetailsPanel.orderPreauthorizedStatus": "{providerName} has been notified about the booking request. Sit back and relax.",
-  "OrderDetailsPanel.orderPreauthorizedSubtitle": "You have requested to book {listingLink}",
+  "OrderDetailsPanel.orderCancelledTitle": "{customerName}, your booking for {listingLink} has been cancelled.",
+  "OrderDetailsPanel.orderDeclinedTitle": "{customerName}, your booking for {listingLink} has been declined.",
+  "OrderDetailsPanel.orderDeliveredTitle": "{customerName}, your booking for {listingLink} has been completed.",
+  "OrderDetailsPanel.orderPreauthorizedInfo": "{providerName} has been notified about the booking request. Sit back and relax.",
+  "OrderDetailsPanel.orderPreauthorizedSubtitle": "You have requested to book {listingLink}.",
   "OrderDetailsPanel.orderPreauthorizedTitle": "Great success, {customerName}!",
   "OrderDetailsPanel.sendMessagePlaceholder": "Send a message to {name}…",
   "OrderPage.fetchOrderFailed": "Fetching order data failed.",
@@ -443,18 +442,13 @@
   "SaleDetailsPanel.bookingBreakdownTitle": "Booking breakdown",
   "SaleDetailsPanel.customerBannedStatus": "The user made the request, but was later banned.",
   "SaleDetailsPanel.declineSaleFailed": "Oops, declining failed. Please try again.",
-  "SaleDetailsPanel.listingAcceptedTitle": "Woohoo! You accepted a request from {customerName} for {listingLink}",
-  "SaleDetailsPanel.listingCanceledTitle": "{customerName} booked {listingLink}",
-  "SaleDetailsPanel.listingDeclinedTitle": "{customerName} requested to book {listingLink}",
-  "SaleDetailsPanel.listingDeliveredTitle": "{customerName} booked {listingLink}",
-  "SaleDetailsPanel.listingRequestedTitle": "{customerName} has requested to book {listingLink}",
   "SaleDetailsPanel.messageLoadingFailed": "Something went wrong when loading messages. Please refresh the page and try again.",
-  "SaleDetailsPanel.saleAcceptedStatus": "You accepted the request on {formattedDate}.",
-  "SaleDetailsPanel.saleAutoDeclinedStatus": "You did not react to the request on time. The request expired on {formattedDate}.",
-  "SaleDetailsPanel.saleCanceledStatus": "The request was cancelled on {formattedDate}.",
-  "SaleDetailsPanel.saleDeclinedStatus": "You declined the request on {formattedDate}.",
-  "SaleDetailsPanel.saleDeliveredStatus": "You delivered the order on {formattedDate}.",
-  "SaleDetailsPanel.saleRequestedStatus": "{customerName} is waiting for your response.",
+  "SaleDetailsPanel.saleAcceptedTitle": "You accepted a request from {customerName} to book {listingLink}.",
+  "SaleDetailsPanel.saleCancelledTitle": "The booking from {customerName} for {listingLink} has been cancelled.",
+  "SaleDetailsPanel.saleDeclinedTitle": "The request from {customerName} to book {listingLink} has been declined.",
+  "SaleDetailsPanel.saleDeliveredTitle": "The booking from {customerName} for {listingLink} has been completed.",
+  "SaleDetailsPanel.saleRequestedInfo": "{customerName} is waiting for your response.",
+  "SaleDetailsPanel.saleRequestedTitle": "{customerName} has requested to book {listingLink}.",
   "SaleDetailsPanel.sendMessagePlaceholder": "Send a message to {name}…",
   "SalePage.acceptButton": "Accept",
   "SalePage.declineButton": "Decline",
diff --git a/src/util/propTypes.js b/src/util/propTypes.js
index 12e3cb4c..b05bd26a 100644
--- a/src/util/propTypes.js
+++ b/src/util/propTypes.js
@@ -218,12 +218,21 @@ export const txIsCanceled = tx => txLastTransition(tx) === TX_TRANSITION_CANCEL;
 
 export const txIsDelivered = tx => txLastTransition(tx) === TX_TRANSITION_MARK_DELIVERED;
 
+export const txHasFirstReview = tx => firstReviewTransitions.includes(txLastTransition(tx));
+
+export const txIsReviewed = tx => areReviewsCompleted(txLastTransition(tx));
+
 export const txTransition = shape({
   at: instanceOf(Date).isRequired,
   by: oneOf(TX_TRANSITION_ACTORS).isRequired,
   transition: oneOf(TX_TRANSITIONS).isRequired,
 });
 
+const firstReviewTransitions = [
+  TX_TRANSITION_REVIEW_BY_PROVIDER_FIRST,
+  TX_TRANSITION_REVIEW_BY_CUSTOMER_FIRST,
+];
+
 // Check if tx transition is followed by a state where
 // reviews are completed
 export const areReviewsCompleted = transition => {

From f4014828911831f70c8db7549d08557d9b12c9b8 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Wed, 29 Nov 2017 16:28:38 +0200
Subject: [PATCH 2/3] Fix booking states in inbox

---
 src/containers/InboxPage/InboxPage.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/containers/InboxPage/InboxPage.js b/src/containers/InboxPage/InboxPage.js
index 30bd6757..e44cf712 100644
--- a/src/containers/InboxPage/InboxPage.js
+++ b/src/containers/InboxPage/InboxPage.js
@@ -73,7 +73,11 @@ const txState = (intl, tx, isOrder) => {
         id: 'InboxPage.stateCanceled',
       }),
     };
-  } else if (propTypes.txIsDelivered(tx)) {
+  } else if (
+    propTypes.txIsDelivered(tx) ||
+    propTypes.txHasFirstReview(tx) ||
+    propTypes.txIsReviewed(tx)
+  ) {
     return {
       nameClassName: css.nameDelivered,
       bookingClassName: css.bookingDelivered,

From 8ab778bf25ccd331458215471d8b8128122d31e4 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Thu, 30 Nov 2017 11:13:01 +0200
Subject: [PATCH 3/3] Fix baseline alignment for order and sale pages

---
 src/components/BookingBreakdown/BookingBreakdown.css |  4 ++--
 .../OrderDetailsPanel/OrderDetailsPanel.css          | 12 ++++--------
 src/components/SaleDetailsPanel/SaleDetailsPanel.css |  8 ++------
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/components/BookingBreakdown/BookingBreakdown.css b/src/components/BookingBreakdown/BookingBreakdown.css
index c314132d..33e6fbc3 100644
--- a/src/components/BookingBreakdown/BookingBreakdown.css
+++ b/src/components/BookingBreakdown/BookingBreakdown.css
@@ -44,7 +44,7 @@
 
   @media (--viewportMedium) {
     font-weight: 700;
-    margin: -1px 0 0 10px;
+    margin: 0 0 0 10px;
   }
 }
 
@@ -79,6 +79,6 @@
   margin: 0 0 0 10px;
 
   @media (--viewportMedium) {
-    margin: 0 0 0 10px;
+    margin: 2px 0 0 10px;
   }
 }
diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.css b/src/components/OrderDetailsPanel/OrderDetailsPanel.css
index a0b877a1..8b7e84a2 100644
--- a/src/components/OrderDetailsPanel/OrderDetailsPanel.css
+++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.css
@@ -102,7 +102,7 @@
 
   @media (--viewportLarge) {
     max-width: 100%;
-    margin: 175px 0 0 0;
+    margin: 177px 0 0 0;
   }
 }
 
@@ -176,7 +176,7 @@
   margin: 1px 0 0 0;
 
   @media (--viewportLarge) {
-    margin-top: 121px;
+    margin-top: 123px;
     margin-left: 0;
     margin-right: 0;
   }
@@ -263,11 +263,7 @@
 }
 
 .feed {
-  margin-top: 17px;
-
-  @media (--viewportMedium) {
-    margin-top: 19px;
-  }
+  margin-top: 20px;
 }
 
 .sendMessageForm {
@@ -277,7 +273,7 @@
   box-shadow: var(--boxShadowBottomForm);
 
   @media (--viewportLarge) {
-    margin-top: 47px;
+    margin-top: 46px;
     position: relative;
     box-shadow: none;
   }
diff --git a/src/components/SaleDetailsPanel/SaleDetailsPanel.css b/src/components/SaleDetailsPanel/SaleDetailsPanel.css
index 5c4f1ee7..976e62cc 100644
--- a/src/components/SaleDetailsPanel/SaleDetailsPanel.css
+++ b/src/components/SaleDetailsPanel/SaleDetailsPanel.css
@@ -171,7 +171,7 @@
 
   @media (--viewportLarge) {
     display: block;
-    margin: 119px 0 0 0;
+    margin: 120px 0 0 0;
   }
 }
 
@@ -237,11 +237,7 @@
 }
 
 .feed {
-  margin-top: 17px;
-
-  @media (--viewportMedium) {
-    margin-top: 20px;
-  }
+  margin-top: 20px;
 }
 
 .sendMessageForm {