Handle banned customer in Sale page

src/components/SaleDetailsPanel/SaleDetailsPanel.js

@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react';
-import { FormattedDate, FormattedMessage } from 'react-intl';
+import { injectIntl, intlShape, FormattedDate, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
 import { createSlug } from '../../util/urlHelpers';
-import { ensureListing, ensureTransaction, ensureUser } from '../../util/data';
+import { ensureListing, ensureTransaction, ensureUser, userDisplayName } from '../../util/data';
 import {
   AvatarLarge,
   AvatarMedium,
@@ -99,7 +99,7 @@ const saleMessage = (saleState, customerName, lastTransitionedAt, lastTransition
   }
 };
 
-const SaleDetailsPanel = props => {
+export const SaleDetailsPanelComponent = props => {
   const {
     rootClassName,
     className,
@@ -107,12 +107,19 @@ const SaleDetailsPanel = props => {
     onAcceptSale,
     onRejectSale,
     acceptOrRejectInProgress,
+    intl,
   } = props;
   const currentTransaction = ensureTransaction(transaction);
   const currentListing = ensureListing(currentTransaction.listing);
   const currentCustomer = ensureUser(currentTransaction.customer);
+  const customerLoaded = !!currentCustomer.id;
+  const isCustomerBanned = customerLoaded && currentCustomer.attributes.banned;
 
-  const customerDisplayName = currentCustomer.attributes.profile.displayName;
+  const bannedUserDisplayName = intl.formatMessage({
+    id: 'SaleDetailsPanel.bannedUserDisplayName',
+  });
+
+  const customerDisplayName = userDisplayName(currentCustomer, bannedUserDisplayName);
   const transactionState = currentTransaction.attributes.state;
   const lastTransitionedAt = currentTransaction.attributes.lastTransitionedAt;
   const lastTransition = currentTransaction.attributes.lastTransition;
@@ -132,12 +139,11 @@ const SaleDetailsPanel = props => {
   const bookingInfo = breakdown(currentTransaction);
 
   const title = saleTitle(transactionState, listingLink, customerDisplayName, lastTransition);
-  const message = saleMessage(
-    transactionState,
-    customerDisplayName,
-    lastTransitionedAt,
-    lastTransition
-  );
+  const message = isCustomerBanned
+    ? intl.formatMessage({
+        id: 'SaleDetailsPanel.customerBannedStatus',
+      })
+    : saleMessage(transactionState, customerDisplayName, lastTransitionedAt, lastTransition);
 
   const listingTitle = currentListing.attributes.title;
   const firstImage = currentListing.images && currentListing.images.length > 0
@@ -146,7 +152,8 @@ const SaleDetailsPanel = props => {
 
   const isPreauthorizedState = currentTransaction.attributes.state ===
     propTypes.TX_STATE_PREAUTHORIZED;
-  const actionButtons = isPreauthorizedState
+  const canShowButtons = isPreauthorizedState && !isCustomerBanned;
+  const actionButtons = canShowButtons
     ? <div className={css.actionButtons}>
         <SecondaryButton
           className={css.rejectButton}
@@ -224,7 +231,7 @@ const SaleDetailsPanel = props => {
   );
 };
 
-SaleDetailsPanel.defaultProps = {
+SaleDetailsPanelComponent.defaultProps = {
   rootClassName: null,
   className: null,
   lastTransition: null,
@@ -232,13 +239,18 @@ SaleDetailsPanel.defaultProps = {
 
 const { string, func, bool } = PropTypes;
 
-SaleDetailsPanel.propTypes = {
+SaleDetailsPanelComponent.propTypes = {
   rootClassName: string,
   className: string,
   transaction: propTypes.transaction.isRequired,
   onAcceptSale: func.isRequired,
   onRejectSale: func.isRequired,
   acceptOrRejectInProgress: bool.isRequired,
+
+  // from injectIntl
+  intl: intlShape.isRequired,
 };
 
+const SaleDetailsPanel = injectIntl(SaleDetailsPanelComponent);
+
 export default SaleDetailsPanel;

src/components/SaleDetailsPanel/SaleDetailsPanel.test.js

@@ -3,8 +3,9 @@ import { shallow } from 'enzyme';
 import { types } from '../../util/sdkLoader';
 import { createTransaction, createBooking, createListing, createUser } from '../../util/test-data';
 import { renderShallow } from '../../util/test-helpers';
+import { fakeIntl } from '../../util/test-data';
 import { BookingBreakdown } from '../../components';
-import SaleDetailsPanel from './SaleDetailsPanel.js';
+import { SaleDetailsPanelComponent } from './SaleDetailsPanel.js';
 
 const noop = () => null;
 
@@ -29,8 +30,9 @@ describe('SaleDetailsPanel', () => {
       onAcceptSale: noop,
       onRejectSale: noop,
       acceptOrRejectInProgress: false,
+      intl: fakeIntl,
     };
-    const tree = renderShallow(<SaleDetailsPanel {...props} />);
+    const tree = renderShallow(<SaleDetailsPanelComponent {...props} />);
     expect(tree).toMatchSnapshot();
   });
   it('renders correct total price', () => {
@@ -53,8 +55,9 @@ describe('SaleDetailsPanel', () => {
       onAcceptSale: noop,
       onRejectSale: noop,
       acceptOrRejectInProgress: false,
+      intl: fakeIntl,
     };
-    const panel = shallow(<SaleDetailsPanel {...props} />);
+    const panel = shallow(<SaleDetailsPanelComponent {...props} />);
     const breakdownProps = panel.find(BookingBreakdown).props();
 
     // Total price for the provider should be transaction total minus the commission.

src/containers/SalePage/__snapshots__/SalePage.test.js.snap

@@ -44,13 +44,11 @@ exports[`SalePage matches snapshot 1`] = `
     sendVerificationEmailError={null}
     sendVerificationEmailInProgress={false} />
   <div>
-    <SaleDetailsPanel
+    <InjectIntl(Component)
       acceptOrRejectInProgress={false}
       className="undefined"
-      lastTransition={null}
       onAcceptSale={[Function]}
       onRejectSale={[Function]}
-      rootClassName={null}
       transaction={
         Object {
           "attributes": Object {

src/translations/en.json

@@ -318,7 +318,9 @@
   "ProfileSettingsForm.yourProfilePicture": "Your profile picture",
   "ProfileSettingsPage.title": "Profile settings",
   "ResponsiveImage.noImage": "No image",
+  "SaleDetailsPanel.bannedUserDisplayName": "Banned user",
   "SaleDetailsPanel.bookingBreakdownTitle": "Booking breakdown",
+  "SaleDetailsPanel.customerBannedStatus": "The user made the request, but was later banned. You cannot accept or reject the request.",
   "SaleDetailsPanel.listingAcceptedTitle": "Woohoo! You accepted a request from {customerName} for {listingLink}",
   "SaleDetailsPanel.listingDeliveredTitle": "{customerName} booked {listingLink}",
   "SaleDetailsPanel.listingRejectedTitle": "{customerName} requested to book {listingLink}",