SaleDetailsPanel updated + some formatting in BookingInfo

src/components/BookingInfo/BookingInfo.js

@@ -13,7 +13,16 @@ import { types } from '../../util/sdkLoader';
 import css from './BookingInfo.css';
 
 const BookingInfoComponent = props => {
-  const { bookingStart, bookingEnd, className, commission, intl, subtotalPrice, totalPrice, unitPrice } = props;
+  const {
+    bookingStart,
+    bookingEnd,
+    className,
+    commission,
+    intl,
+    subtotalPrice,
+    totalPrice,
+    unitPrice,
+  } = props;
 
   const hasSelectedNights = bookingStart && bookingEnd;
 
@@ -22,17 +31,21 @@ const BookingInfoComponent = props => {
     return <div className={classNames(css.container, className)} />;
   }
 
-  const bookingPeriod = <FormattedMessage
-    id="BookingInfo.bookingPeriod"
-    values={{
-      bookingStart: intl.formatDate(bookingStart),
-      bookingEnd: intl.formatDate(bookingEnd),
-    }}
-  />;
+  const bookingPeriod = (
+    <FormattedMessage
+      id="BookingInfo.bookingPeriod"
+      values={{
+        bookingStart: intl.formatDate(bookingStart),
+        bookingEnd: intl.formatDate(bookingEnd),
+      }}
+    />
+  );
 
   // diff gives night count between dates
   const nightCount = moment(bookingEnd).diff(moment(bookingStart), 'days');
-  const nightCountMessage = <FormattedMessage id="BookingInfo.nightCount" values={{ count: nightCount }} />;
+  const nightCountMessage = (
+    <FormattedMessage id="BookingInfo.nightCount" values={{ count: nightCount }} />
+  );
 
   const currencyConfig = config.currencyConfig;
   const subUnitDivisor = currencyConfig.subUnitDivisor;
@@ -79,7 +92,7 @@ const BookingInfoComponent = props => {
   const commisionInfo = commission
     ? <div className={css.row}>
         <div className={css.commissionLabel}>
-          <FormattedMessage id="BookingInfo.commission" />
+          <FormattedMessage id="BookingInfo.commission" values={{ marketplace: 'Saunatime' }} />
         </div>
         <div className={css.commission}>
           {formattedCommission}

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

@@ -157,7 +157,7 @@ exports[`BookingInfo provider transaction data matches snapshot 1`] = `
     <div
       className={undefined}>
       <span>
-        Charged commission:
+        Saunatime fee:
       </span>
     </div>
     <div

src/components/SaleDetailsPanel/SaleDetailsPanel.css

@@ -5,8 +5,13 @@
   padding: 3rem 2rem;
 }
 
-.title,
+.title {
+  text-align: center;
+}
+
 .message {
+  display: flex;
+  flex-direction: column;
   text-align: center;
 }
 

src/components/SaleDetailsPanel/SaleDetailsPanel.js

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedDate, FormattedMessage } from 'react-intl';
 import * as propTypes from '../../util/propTypes';
 import { types } from '../../util/sdkLoader';
 import { createSlug } from '../../util/urlHelpers';
@@ -8,7 +8,16 @@ import { Avatar, BookingInfo, NamedLink } from '../../components';
 import css from './SaleDetailsPanel.css';
 
 const SaleDetailsPanel = props => {
-  const { className, subtotalPrice, saleState, booking, listing, customer, commission } = props;
+  const {
+    className,
+    subtotalPrice,
+    saleState,
+    booking,
+    lastTransitionedAt,
+    listing,
+    customer,
+    commission,
+  } = props;
   const { firstName, lastName } = customer.attributes.profile;
   const customerName = firstName ? `${firstName} ${lastName}` : '';
 
@@ -19,19 +28,6 @@ const SaleDetailsPanel = props => {
     </NamedLink>
   );
 
-  const title = saleState === propTypes.TX_STATE_PREAUTHORIZED
-    ? <FormattedMessage
-        id="SaleDetailsPanel.listingTitle"
-        values={{ customerName: customerName, title: listingLink }}
-      />
-    : null;
-
-  const message = saleState === propTypes.TX_STATE_PREAUTHORIZED
-    ? <div className={css.message}>
-        <FormattedMessage id="SaleDetailsPanel.saleStatusMessage" values={{ customerName }} />
-      </div>
-    : null;
-
   // TODO We can't use price from listing, since that might have changed.
   // When API includes unit price and possible additional fees, we need to change this.
   const unitPrice = listing.attributes.price;
@@ -47,14 +43,54 @@ const SaleDetailsPanel = props => {
       />
     : <p className={css.error}>{'priceRequiredMessage'}</p>;
 
+  // saleState affects to both title and message section
+  let stateMsgData = {};
+  switch (saleState) {
+    case propTypes.TX_STATE_PREAUTHORIZED:
+      stateMsgData = {
+        title: (
+          <FormattedMessage
+            id="SaleDetailsPanel.listingRequestedTitle"
+            values={{ customerName: customerName, title: listingLink }}
+          />
+        ),
+        message: (
+          <div className={css.message}>
+            <FormattedMessage id="SaleDetailsPanel.saleRequestedStatus" values={{ customerName }} />
+          </div>
+        ),
+      };
+      break;
+    case propTypes.TX_STATE_ACCEPTED:
+      stateMsgData = {
+        title: (
+          <FormattedMessage
+            id="SaleDetailsPanel.listingAcceptedTitle"
+            values={{ customerName: customerName, title: listingLink }}
+          />
+        ),
+        message: (
+          <div className={css.message}>
+            <FormattedMessage id="SaleDetailsPanel.saleAcceptedStatus" />
+            <FormattedDate value={lastTransitionedAt} year="numeric" month="short" day="numeric" />
+          </div>
+        ),
+      };
+      break;
+    default:
+      stateMsgData = { title: null, message: null };
+  }
+
   return (
     <div className={className}>
       <div className={css.messagesContainer}>
         <div className={css.avatarWrapper}>
           <Avatar name={customerName} />
         </div>
-        <h1 className={css.title}>{title}</h1>
-        {message}
+        <h1 className={css.title}>
+          {stateMsgData.title}
+        </h1>
+        {stateMsgData.message}
       </div>
       {bookingInfo}
     </div>
@@ -70,6 +106,7 @@ SaleDetailsPanel.propTypes = {
   subtotalPrice: instanceOf(types.Money).isRequired,
   commission: instanceOf(types.Money).isRequired,
   saleState: string.isRequired,
+  lastTransitionedAt: instanceOf(Date).isRequired,
   booking: propTypes.booking.isRequired,
   listing: propTypes.listing.isRequired,
   customer: propTypes.user.isRequired,

src/components/SaleDetailsPanel/SaleDetailsPanel.test.js

@@ -11,6 +11,7 @@ describe('SaleDetailsPanel', () => {
       commission: new Money(1650, 'USD'),
       subtotalPrice: new Money(16500, 'USD'),
       saleState: 'state/preauthorized',
+      lastTransitionedAt: new Date(Date.UTC(2017, 5, 10)),
       booking: createBooking(
         'booking1',
         new Date(Date.UTC(2017, 5, 10)),

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

@@ -9,7 +9,7 @@ exports[`SaleDetailsPanel matches snapshot 1`] = `
     </div>
     <h1>
       <FormattedMessage
-        id="SaleDetailsPanel.listingTitle"
+        id="SaleDetailsPanel.listingRequestedTitle"
         values={
           Object {
             "customerName": "customer1 first name customer1 last name",
@@ -28,7 +28,7 @@ exports[`SaleDetailsPanel matches snapshot 1`] = `
     </h1>
     <div>
       <FormattedMessage
-        id="SaleDetailsPanel.saleStatusMessage"
+        id="SaleDetailsPanel.saleRequestedStatus"
         values={
           Object {
             "customerName": "customer1 first name customer1 last name",

src/translations/en.json

@@ -12,7 +12,7 @@
   "BookingDatesForm.youWontBeChargedInfo": "You won't be charged yet",
   "BookingInfo.bookingPeriod": "{bookingStart} - {bookingEnd}",
   "BookingInfo.bookingPeriodLabel": "Booking period:",
-  "BookingInfo.commission": "Charged commission:",
+  "BookingInfo.commission": "{marketplace} fee:",
   "BookingInfo.nightCount": "{count, number} {count, plural, one {night} other {nights}}",
   "BookingInfo.pricePerDay":"Price per night:",
   "BookingInfo.subtotal": "Subtotal:",
@@ -64,8 +64,10 @@
   "PageLayout.logoutFailed": "Logout failed. Please try again.",
   "PaginationLinks.previous": "Previous page",
   "PaginationLinks.next": "Next page",
-  "SaleDetailsPanel.listingTitle": "{customerName} has requested to book {title}.",
-  "SaleDetailsPanel.saleStatusMessage": "{customerName} is waiting for your response.",
+  "SaleDetailsPanel.listingAcceptedTitle": "{customerName} has booked {title}.",
+  "SaleDetailsPanel.listingRequestedTitle": "{customerName} has requested to book {title}.",
+  "SaleDetailsPanel.saleAcceptedStatus": "You accepted the booking.",
+  "SaleDetailsPanel.saleRequestedStatus": "{customerName} is waiting for your response.",
   "SalePage.acceptButton": "Accept",
   "SalePage.loadingData": "Loading sale data.",
   "SalePage.title": "Sale details for ${title}.",