Change breakdown texts based on tx state

src/components/BookingBreakdown/BookingBreakdown.example.js

@@ -1,10 +1,12 @@
 import Decimal from 'decimal.js';
 import { types } from '../../util/sdkLoader';
+import * as propTypes from '../../util/propTypes';
 import BookingBreakdown from './BookingBreakdown';
 
 export const Checkout = {
   component: BookingBreakdown,
   props: {
+    transactionState: propTypes.TX_STATE_PREAUTHORIZED,
     bookingStart: new Date(Date.UTC(2017, 3, 14)),
     bookingEnd: new Date(Date.UTC(2017, 3, 16)),
     userRole: 'customer',
@@ -23,6 +25,7 @@ export const Checkout = {
 export const CustomerOrder = {
   component: BookingBreakdown,
   props: {
+    transactionState: propTypes.TX_STATE_PREAUTHORIZED,
     bookingStart: new Date(Date.UTC(2017, 3, 14)),
     bookingEnd: new Date(Date.UTC(2017, 3, 16)),
     userRole: 'customer',
@@ -41,6 +44,7 @@ export const CustomerOrder = {
 export const ProviderSale = {
   component: BookingBreakdown,
   props: {
+    transactionState: propTypes.TX_STATE_PREAUTHORIZED,
     bookingStart: new Date(Date.UTC(2017, 3, 14)),
     bookingEnd: new Date(Date.UTC(2017, 3, 16)),
     userRole: 'provider',
@@ -64,6 +68,7 @@ export const ProviderSale = {
 export const ProviderSaleZeroCommission = {
   component: BookingBreakdown,
   props: {
+    transactionState: propTypes.TX_STATE_PREAUTHORIZED,
     bookingStart: new Date(Date.UTC(2017, 3, 14)),
     bookingEnd: new Date(Date.UTC(2017, 3, 16)),
     userRole: 'provider',
@@ -87,6 +92,55 @@ export const ProviderSaleZeroCommission = {
 export const ProviderSaleSingleNight = {
   component: BookingBreakdown,
   props: {
+    transactionState: propTypes.TX_STATE_PREAUTHORIZED,
+    bookingStart: new Date(Date.UTC(2017, 3, 14)),
+    bookingEnd: new Date(Date.UTC(2017, 3, 15)),
+    userRole: 'provider',
+    lineItems: [
+      {
+        code: 'line-item/night',
+        quantity: new Decimal(1),
+        unitPrice: new types.Money(4500, 'USD'),
+        lineTotal: new types.Money(4500, 'USD'),
+      },
+      {
+        code: 'line-item/provider-commission',
+        unitPrice: new types.Money(-2000, 'USD'),
+        lineTotal: new types.Money(-2000, 'USD'),
+      },
+    ],
+    payoutTotal: new types.Money(2500, 'USD'),
+  },
+};
+
+export const ProviderSaleRejected = {
+  component: BookingBreakdown,
+  props: {
+    transactionState: propTypes.TX_STATE_REJECTED,
+    bookingStart: new Date(Date.UTC(2017, 3, 14)),
+    bookingEnd: new Date(Date.UTC(2017, 3, 15)),
+    userRole: 'provider',
+    lineItems: [
+      {
+        code: 'line-item/night',
+        quantity: new Decimal(1),
+        unitPrice: new types.Money(4500, 'USD'),
+        lineTotal: new types.Money(4500, 'USD'),
+      },
+      {
+        code: 'line-item/provider-commission',
+        unitPrice: new types.Money(-2000, 'USD'),
+        lineTotal: new types.Money(-2000, 'USD'),
+      },
+    ],
+    payoutTotal: new types.Money(2500, 'USD'),
+  },
+};
+
+export const ProviderSaleDelivered = {
+  component: BookingBreakdown,
+  props: {
+    transactionState: propTypes.TX_STATE_DELIVERED,
     bookingStart: new Date(Date.UTC(2017, 3, 14)),
     bookingEnd: new Date(Date.UTC(2017, 3, 15)),
     userRole: 'provider',

src/components/BookingBreakdown/BookingBreakdown.js

@@ -16,11 +16,11 @@ export const BookingBreakdownComponent = props => {
   const {
     rootClassName,
     className,
+    transactionState,
     bookingStart,
     bookingEnd,
     payinTotal,
     payoutTotal,
-    totalLabelMessage,
     lineItems,
     userRole,
     intl,
@@ -38,7 +38,7 @@ export const BookingBreakdownComponent = props => {
 
   const dateFormatOptions = {
     weekday: 'short',
-    month: 'long',
+    month: 'short',
     day: 'numeric',
   };
   const bookingPeriod = (
@@ -102,10 +102,16 @@ export const BookingBreakdownComponent = props => {
     );
   }
 
-  const defaultTotalLabel = userRole === 'customer'
+  let providerTotalMessageId = 'BookingBreakdown.providerTotalDefault';
+  if (transactionState === propTypes.TX_STATE_DELIVERED) {
+    providerTotalMessageId = 'BookingBreakdown.providerTotalDelivered';
+  } else if (transactionState === propTypes.TX_STATE_REJECTED) {
+    providerTotalMessageId = 'BookingBreakdown.providerTotalRejected';
+  }
+
+  const totalLabel = userRole === 'customer'
     ? <FormattedMessage id="BookingBreakdown.total" />
-    : <FormattedMessage id="BookingBreakdown.providerTotal" />;
-  const totalLabel = totalLabelMessage || defaultTotalLabel;
+    : <FormattedMessage id={providerTotalMessageId} />;
 
   const totalPrice = userRole === 'customer' ? payinTotal : payoutTotal;
   const formattedTotalPrice = formatMoney(intl, totalPrice);
@@ -144,10 +150,9 @@ BookingBreakdownComponent.defaultProps = {
   className: null,
   payinTotal: null,
   payoutTotal: null,
-  totalLabelMessage: null,
 };
 
-const { arrayOf, instanceOf, node, oneOf, shape, string } = PropTypes;
+const { arrayOf, instanceOf, oneOf, shape, string } = PropTypes;
 
 const lineItem = shape({
   code: string.isRequired,
@@ -160,13 +165,13 @@ BookingBreakdownComponent.propTypes = {
   rootClassName: string,
   className: string,
 
+  transactionState: oneOf(propTypes.TX_STATES).isRequired,
   bookingStart: instanceOf(Date).isRequired,
   bookingEnd: instanceOf(Date).isRequired,
   lineItems: arrayOf(lineItem).isRequired,
   userRole: oneOf(['customer', 'provider']).isRequired,
   payinTotal: propTypes.money, // required if userRole === customer
   payoutTotal: propTypes.money, // required if userRole === provider
-  totalLabelMessage: node,
 
   // from injectIntl
   intl: intlShape.isRequired,

src/components/BookingBreakdown/BookingBreakdown.test.js

@@ -3,12 +3,14 @@ import Decimal from 'decimal.js';
 import { fakeIntl } from '../../util/test-data';
 import { renderDeep } from '../../util/test-helpers';
 import { types } from '../../util/sdkLoader';
+import * as propTypes from '../../util/propTypes';
 import { BookingBreakdownComponent } from './BookingBreakdown';
 
 describe('BookingBreakdown', () => {
   it('pretransaction data matches snapshot', () => {
     const tree = renderDeep(
       <BookingBreakdownComponent
+        transactionState={propTypes.TX_STATE_PREAUTHORIZED}
         bookingStart={new Date(Date.UTC(2017, 3, 14))}
         bookingEnd={new Date(Date.UTC(2017, 3, 16))}
         payinTotal={new types.Money(2000, 'USD')}
@@ -30,6 +32,7 @@ describe('BookingBreakdown', () => {
   it('customer transaction data matches snapshot', () => {
     const tree = renderDeep(
       <BookingBreakdownComponent
+        transactionState={propTypes.TX_STATE_PREAUTHORIZED}
         bookingStart={new Date(Date.UTC(2017, 3, 14))}
         bookingEnd={new Date(Date.UTC(2017, 3, 16))}
         userRole="customer"
@@ -51,6 +54,7 @@ describe('BookingBreakdown', () => {
   it('provider transaction data matches snapshot', () => {
     const tree = renderDeep(
       <BookingBreakdownComponent
+        transactionState={propTypes.TX_STATE_PREAUTHORIZED}
         bookingStart={new Date(Date.UTC(2017, 3, 14))}
         bookingEnd={new Date(Date.UTC(2017, 3, 16))}
         commission={new types.Money(200, 'USD')}

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

@@ -35,7 +35,7 @@ exports[`BookingBreakdown customer transaction data matches snapshot 1`] = `
       <span
         dangerouslySetInnerHTML={
           Object {
-            "__html": "&times; 2 nights",
+            "__html": "2 nights",
           }
         } />
     </span>
@@ -95,7 +95,7 @@ exports[`BookingBreakdown pretransaction data matches snapshot 1`] = `
       <span
         dangerouslySetInnerHTML={
           Object {
-            "__html": "&times; 2 nights",
+            "__html": "2 nights",
           }
         } />
     </span>
@@ -155,7 +155,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
       <span
         dangerouslySetInnerHTML={
           Object {
-            "__html": "&times; 2 nights",
+            "__html": "2 nights",
           }
         } />
     </span>
@@ -165,7 +165,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
     <span
       className={undefined}>
       <span>
-        Subtotal:
+        Subtotal
       </span>
     </span>
     <span
@@ -178,7 +178,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
     <span
       className={undefined}>
       <span>
-        Saunatime fee:
+        Saunatime fee
       </span>
     </span>
     <span
@@ -193,7 +193,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
     <div
       className={undefined}>
       <span>
-        Happy days! You just made…
+        You\'ll make
       </span>
     </div>
     <div

src/components/OrderDetailsPanel/OrderDetailsPanel.js

@@ -21,6 +21,7 @@ const breakdown = transaction => {
   }
   return (
     <BookingBreakdown
+      transactionState={tx.attributes.state}
       className={css.receipt}
       bookingStart={bookingStart}
       bookingEnd={bookingEnd}

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

@@ -124,6 +124,7 @@ exports[`OrderDetailsPanel matches snapshot 1`] = `
               "currency": "USD",
             }
           }
+          transactionState="state/preauthorized"
           userRole="customer" />
       </div>
       <div>
@@ -220,6 +221,7 @@ exports[`OrderDetailsPanel matches snapshot 1`] = `
               "currency": "USD",
             }
           }
+          transactionState="state/preauthorized"
           userRole="customer" />
       </div>
     </div>

src/components/SaleDetailsPanel/SaleDetailsPanel.js

@@ -15,7 +15,7 @@ import {
 
 import css from './SaleDetailsPanel.css';
 
-const breakdown = (transaction, totalLabelMessage) => {
+const breakdown = transaction => {
   const tx = ensureTransaction(transaction);
   const booking = ensureBooking(tx.booking);
   const bookingStart = booking.attributes.start;
@@ -27,16 +27,15 @@ const breakdown = (transaction, totalLabelMessage) => {
   if (!bookingStart || !bookingEnd || !payinTotal || !payoutTotal || !lineItems) {
     return null;
   }
-
   return (
     <BookingBreakdown
+      transactionState={tx.attributes.state}
       bookingStart={bookingStart}
       bookingEnd={bookingEnd}
       payinTotal={payinTotal}
       payoutTotal={payoutTotal}
       lineItems={lineItems}
       userRole="provider"
-      totalLabelMessage={totalLabelMessage}
     />
   );
 };
@@ -142,12 +141,7 @@ const SaleDetailsPanel = props => {
     );
   }
 
-  const wasRejected = transactionState === propTypes.TX_STATE_REJECTED;
-  const totalMessage = wasRejected
-    ? <FormattedMessage id="SaleDetailsPanel.providerRejectedTotal" />
-    : <FormattedMessage id="SaleDetailsPanel.providerTotal" />;
-
-  const bookingInfo = breakdown(currentTransaction, totalMessage);
+  const bookingInfo = breakdown(currentTransaction);
 
   const title = saleTitle(transactionState, listingLink, customerDisplayName, lastTransition);
   const message = saleMessage(

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

@@ -151,11 +151,7 @@ exports[`SaleDetailsPanel matches snapshot 1`] = `
             "currency": "USD",
           }
         }
-        totalLabelMessage={
-          <FormattedMessage
-            id="SaleDetailsPanel.providerTotal"
-            values={Object {}} />
-        }
+        transactionState="state/preauthorized"
         userRole="provider" />
     </div>
     <div>
@@ -228,11 +224,7 @@ exports[`SaleDetailsPanel matches snapshot 1`] = `
               "currency": "USD",
             }
           }
-          totalLabelMessage={
-            <FormattedMessage
-              id="SaleDetailsPanel.providerTotal"
-              values={Object {}} />
-          }
+          transactionState="state/preauthorized"
           userRole="provider" />
       </div>
     </div>

src/translations/en.json

@@ -10,11 +10,13 @@
   "AuthenticationPage.signupLinkText": "Sign up",
   "AuthenticationPage.signupPageTitle": "Sign up",
   "BookingBreakdown.bookingPeriod": "{bookingStart} – {bookingEnd}",
-  "BookingBreakdown.commission": "Saunatime fee:",
-  "BookingBreakdown.nightCount": "× {count, number} {count, plural, one {night} other {nights}}",
+  "BookingBreakdown.commission": "Saunatime fee",
+  "BookingBreakdown.nightCount": "{count, number} {count, plural, one {night} other {nights}}",
   "BookingBreakdown.pricePerNight": "Price per night",
-  "BookingBreakdown.providerTotal":"Happy days! You just made…",
-  "BookingBreakdown.subTotal": "Subtotal:",
+  "BookingBreakdown.providerTotalDefault": "You'll make",
+  "BookingBreakdown.providerTotalDelivered": "You made",
+  "BookingBreakdown.providerTotalRejected": "You would have made",
+  "BookingBreakdown.subTotal": "Subtotal",
   "BookingBreakdown.total": "Total price",
   "BookingDatesForm.bookingEndTitle": "End date",
   "BookingDatesForm.bookingStartTitle": "Start date",
@@ -245,8 +247,6 @@
   "SaleDetailsPanel.listingDeliveredTitle": "{customerName} booked {listingLink}",
   "SaleDetailsPanel.listingRejectedTitle": "{customerName} requested to book {listingLink}",
   "SaleDetailsPanel.listingRequestedTitle": "{customerName} has requested to book {listingLink}",
-  "SaleDetailsPanel.providerRejectedTotal": "You would have made:",
-  "SaleDetailsPanel.providerTotal": "Happy days! You just made…",
   "SaleDetailsPanel.saleAcceptedStatus": "You accepted the request on {formattedDate}.",
   "SaleDetailsPanel.saleAutoRejectedStatus": "You did not react to the request on time. The request expired on {formattedDate}.",
   "SaleDetailsPanel.saleDeliveredStatus": "You delivered the order on {formattedDate}.",