Order page title and message for different tx states

src/components/OrderDetailsPanel/OrderDetailsPanel.css

@@ -4,6 +4,10 @@
   margin: 35px 24px 0 24px;
 }
 
+.mainTitle {
+  display: block;
+}
+
 .messagesContainer {
   display: flex;
   flex-direction: column;
@@ -14,6 +18,10 @@
   margin: 24px 24px 0 24px;
 }
 
+.transitionDate {
+  white-space: nowrap;
+}
+
 .bookingBreakdownTitle {
   margin: 47px 24px 0 24px;
   color: var(--matterColorAnti);

src/components/OrderDetailsPanel/OrderDetailsPanel.js

@@ -3,7 +3,7 @@ import { FormattedDate, FormattedMessage } from 'react-intl';
 import * as propTypes from '../../util/propTypes';
 import { createSlug } from '../../util/urlHelpers';
 import { types } from '../../util/sdkLoader';
-import { Avatar, BookingInfo, NamedLink } from '../../components';
+import { BookingInfo, NamedLink } from '../../components';
 
 import css from './OrderDetailsPanel.css';
 
@@ -14,6 +14,85 @@ const formatName = (user, defaultName) => {
   return defaultName;
 };
 
+const orderTitle = (orderState, listingLink, customerName) => {
+  switch (orderState) {
+    case propTypes.TX_STATE_PREAUTHORIZED:
+      return (
+        <span>
+          <span className={css.mainTitle}>
+            <FormattedMessage
+              id="OrderDetailsPanel.orderPreauthorizedTitle"
+              values={{ customerName }}
+            />
+          </span>
+          <FormattedMessage
+            id="OrderDetailsPanel.orderPreauthorizedSubtitle"
+            values={{ listingLink }}
+          />
+        </span>
+      );
+    case propTypes.TX_STATE_ACCEPTED:
+      return (
+        <span>
+          <span className={css.mainTitle}>
+            <FormattedMessage id="OrderDetailsPanel.orderAcceptedTitle" values={{ customerName }} />
+          </span>
+          <FormattedMessage id="OrderDetailsPanel.orderAcceptedSubtitle" values={{ listingLink }} />
+        </span>
+      );
+    case propTypes.TX_STATE_REJECTED:
+      return (
+        <FormattedMessage id="OrderDetailsPanel.orderRejectedTitle" values={{ listingLink }} />
+      );
+    case propTypes.TX_STATE_DELIVERED:
+      return (
+        <FormattedMessage id="OrderDetailsPanel.orderDeliveredTitle" values={{ listingLink }} />
+      );
+    default:
+      return null;
+  }
+};
+
+const orderMessage = (orderState, listingTitle, providerName, lastTransitionedAt) => {
+  const transitionDate = (
+    <span className={css.transitionDate}>
+      <FormattedDate value={lastTransitionedAt} year="numeric" month="short" day="numeric" />
+    </span>
+  );
+  switch (orderState) {
+    case propTypes.TX_STATE_PREAUTHORIZED:
+      return (
+        <FormattedMessage
+          id="OrderDetailsPanel.orderPreauthorizedStatus"
+          values={{ providerName }}
+        />
+      );
+    case propTypes.TX_STATE_ACCEPTED:
+      return (
+        <FormattedMessage
+          id="OrderDetailsPanel.orderAcceptedStatus"
+          values={{ providerName, transitionDate }}
+        />
+      );
+    case propTypes.TX_STATE_REJECTED:
+      return (
+        <FormattedMessage
+          id="OrderDetailsPanel.orderRejectedStatus"
+          values={{ providerName, transitionDate }}
+        />
+      );
+    case propTypes.TX_STATE_DELIVERED:
+      return (
+        <FormattedMessage
+          id="OrderDetailsPanel.orderDeliveredStatus"
+          values={{ providerName, transitionDate }}
+        />
+      );
+    default:
+      return null;
+  }
+};
+
 const OrderDetailsPanel = props => {
   const {
     className,
@@ -50,92 +129,14 @@ const OrderDetailsPanel = props => {
     : <p className={css.error}>{'priceRequiredMessage'}</p>;
 
   // orderState affects to both title and message section
-  let stateMsgData = {};
-  switch (orderState) {
-    case propTypes.TX_STATE_PREAUTHORIZED:
-      stateMsgData = {
-        title: (
-          <FormattedMessage
-            id="OrderDetailsPanel.orderRequestedTitle"
-            values={{ customerName, listingTitle: listingLink }}
-          />
-        ),
-        message: (
-          <div className={css.messagesContainer}>
-            <FormattedMessage
-              id="OrderDetailsPanel.orderRequestedStatus"
-              values={{ providerName }}
-            />
-          </div>
-        ),
-      };
-      break;
-    case propTypes.TX_STATE_ACCEPTED:
-      stateMsgData = {
-        title: (
-          <FormattedMessage
-            id="OrderDetailsPanel.orderAcceptedTitle"
-            values={{ title: listingLink }}
-          />
-        ),
-        message: (
-          <div className={css.messagesContainer}>
-            <FormattedMessage
-              id="OrderDetailsPanel.orderAcceptedStatus"
-              values={{ providerName }}
-            />
-            <FormattedDate value={lastTransitionedAt} year="numeric" month="short" day="numeric" />
-          </div>
-        ),
-      };
-      break;
-    case propTypes.TX_STATE_REJECTED:
-      stateMsgData = {
-        title: (
-          <FormattedMessage
-            id="OrderDetailsPanel.orderRejectedTitle"
-            values={{ title: listingLink }}
-          />
-        ),
-        message: (
-          <div className={css.messagesContainer}>
-            <FormattedMessage
-              id="OrderDetailsPanel.orderRejectedStatus"
-              values={{ providerName }}
-            />
-            <FormattedDate value={lastTransitionedAt} year="numeric" month="short" day="numeric" />
-          </div>
-        ),
-      };
-      break;
-    case propTypes.TX_STATE_DELIVERED:
-      stateMsgData = {
-        title: (
-          <FormattedMessage
-            id="OrderDetailsPanel.orderDeliveredTitle"
-            values={{ title: listingLink }}
-          />
-        ),
-        message: (
-          <div className={css.messagesContainer}>
-            <FormattedMessage
-              id="OrderDetailsPanel.orderDeliveredStatus"
-              values={{ providerName }}
-            />
-            <FormattedDate value={lastTransitionedAt} year="numeric" month="short" day="numeric" />
-          </div>
-        ),
-      };
-      break;
-    default:
-      stateMsgData = { title: null, message: null };
-  }
+  const title = orderTitle(orderState, listingLink, customerName);
+  const message = orderMessage(orderState, listingLink, providerName, lastTransitionedAt);
 
   return (
     <div className={className}>
-      <h1 className={css.title}>{stateMsgData.title}</h1>
+      <h1 className={css.title}>{title}</h1>
       <div className={css.message}>
-        {stateMsgData.message}
+        {message}
       </div>
       <h3 className={css.bookingBreakdownTitle}>
         <FormattedMessage id="OrderDetailsPanel.bookingBreakdownTitle" />

src/components/OrderDetailsPanel/OrderDetailsPanel.test.js

@@ -19,6 +19,7 @@ describe('OrderDetailsPanel', () => {
       ),
       listing: createListing('listing1'),
       provider: createUser('provider'),
+      customer: createUser('customer'),
     };
     const tree = renderShallow(<OrderDetailsPanel {...props} />);
     expect(tree).toMatchSnapshot();

src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap

@@ -2,34 +2,42 @@ exports[`OrderDetailsPanel matches snapshot 1`] = `
 <div
   className={null}>
   <h1>
-    <FormattedMessage
-      id="OrderDetailsPanel.orderRequestedTitle"
-      values={
-        Object {
-          "customerName": "",
-          "listingTitle": <withFlattenedRoutes(withRouter(NamedLink))
-            name="ListingPage"
-            params={
-                Object {
-                    "id": "listing1",
-                    "slug": "listing1-title",
-                  }
-            }>
-            listing1 title
-        </withFlattenedRoutes(withRouter(NamedLink))>,
-        }
-      } />
-  </h1>
-  <div>
-    <div>
+    <span>
+      <span>
+        <FormattedMessage
+          id="OrderDetailsPanel.orderPreauthorizedTitle"
+          values={
+            Object {
+              "customerName": "customer first name",
+            }
+          } />
+      </span>
       <FormattedMessage
-        id="OrderDetailsPanel.orderRequestedStatus"
+        id="OrderDetailsPanel.orderPreauthorizedSubtitle"
         values={
           Object {
-            "providerName": "provider first name",
+            "listingLink": <withFlattenedRoutes(withRouter(NamedLink))
+              name="ListingPage"
+              params={
+                  Object {
+                      "id": "listing1",
+                      "slug": "listing1-title",
+                    }
+              }>
+              listing1 title
+          </withFlattenedRoutes(withRouter(NamedLink))>,
           }
         } />
-    </div>
+    </span>
+  </h1>
+  <div>
+    <FormattedMessage
+      id="OrderDetailsPanel.orderPreauthorizedStatus"
+      values={
+        Object {
+          "providerName": "provider first name",
+        }
+      } />
   </div>
   <h3>
     <FormattedMessage

src/translations/en.json

@@ -84,15 +84,17 @@
   "LoginForm.passwordRequired": "This field is required",
   "Modal.close": "CLOSE",
   "Modal.closeModal": "Close modal",
-  "OrderDetailsPanel.orderAcceptedStatus": "{providerName} accepted the booking.",
-  "OrderDetailsPanel.orderAcceptedTitle": "You have booked {title}.",
-  "OrderDetailsPanel.orderDeliveredStatus": "{providerName} delivered the order.",
-  "OrderDetailsPanel.orderDeliveredTitle": "You booked {title}.",
-  "OrderDetailsPanel.orderRejectedStatus": "{providerName} rejected the booking.",
-  "OrderDetailsPanel.orderRejectedTitle": "You requested to book {title}.",
-  "OrderDetailsPanel.orderRequestedStatus": "{providerName} has been notified about the booking request, so sit back and relax.",
-  "OrderDetailsPanel.orderRequestedTitle": "Great success, {customerName}! You have requested to book {listingTitle}",
   "OrderDetailsPanel.bookingBreakdownTitle": "Booking breakdown",
+  "OrderDetailsPanel.orderAcceptedStatus": "{providerName} accepted the booking on {transitionDate}.",
+  "OrderDetailsPanel.orderAcceptedSubtitle": "You have booked {listingLink}",
+  "OrderDetailsPanel.orderAcceptedTitle": "Woohoo {customerName}!",
+  "OrderDetailsPanel.orderDeliveredStatus": "{providerName} delivered the order on {transitionDate}.",
+  "OrderDetailsPanel.orderDeliveredTitle": "You booked {listingLink}",
+  "OrderDetailsPanel.orderPreauthorizedStatus": "{providerName} has been notified about the booking request, so sit back and relax.",
+  "OrderDetailsPanel.orderPreauthorizedSubtitle": "You have requested to book {listingLink}",
+  "OrderDetailsPanel.orderPreauthorizedTitle": "Great success, {customerName}!",
+  "OrderDetailsPanel.orderRejectedStatus": "Unfortunately {providerName} declined the booking on {transitionDate}.",
+  "OrderDetailsPanel.orderRejectedTitle": "You requested to book {listingLink}",
   "OrderPage.fetchOrderFailed": "Fetching order data failed.",
   "OrderPage.loadingData": "Loading order data.",
   "OrderPage.title": "Order details: {listingTitle}",