Show pending state in listing page action bar

src/containers/ListingPage/ListingPage.css

@@ -66,21 +66,33 @@
 
 .ownListingText {
   @apply --marketplaceH4FontStyles;
-  margin: 16px 12px 13px 24px;
+  margin: 14px 12px 11px 24px;
+
+  @media (--viewportMedium) {
+    margin: 25px 12px 22px 24px;
+  }
+}
+
+.ownListingTextPendingApproval {
+  color: var(--attentionColor);
 }
 
 .closedListingText {
   @apply --marketplaceH4FontStyles;
-  margin: 16px 12px 13px 24px;
+  margin: 14px 12px 11px 24px;
   text-align: center;
   width: 100%;
+
+  @media (--viewportMedium) {
+    margin: 25px 12px 22px 24px;
+  }
 }
 
 .editListingLink {
   @apply --marketplaceH4FontStyles;
   flex-shrink: 0;
   margin: 0;
-  padding: 16px 24px 13px 12px;
+  padding: 14px 24px 11px 12px;
   color: var(--matterColorNegative);
 
   transition: var(--transitionStyleButton);
@@ -92,6 +104,7 @@
 
   @media (--viewportMedium) {
     margin: 0;
+    padding: 25px 24px 22px 12px;
   }
 }
 

src/containers/ListingPage/ListingPage.js

@@ -5,9 +5,10 @@ import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
+import classNames from 'classnames';
 import config from '../../config';
 import routeConfiguration from '../../routeConfiguration';
-import { propTypes } from '../../util/types';
+import { LISTING_STATE_PENDING_APPROVAL, LISTING_STATE_CLOSED, propTypes } from '../../util/types';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import { createSlug } from '../../util/urlHelpers';
 import { formatMoney } from '../../util/currency';
@@ -62,15 +63,27 @@ const priceData = (price, intl) => {
 
 export const ActionBarMaybe = props => {
   const { isOwnListing, listing, editParams } = props;
-  const isClosed = listing.attributes.closed;
+  const state = listing.attributes.state;
+  const isPendingApproval = state === LISTING_STATE_PENDING_APPROVAL;
+  const isClosed = state === LISTING_STATE_CLOSED;
 
   if (isOwnListing) {
+    let ownListingTextTranslationId = 'ListingPage.ownListing';
+
+    if (isPendingApproval) {
+      ownListingTextTranslationId = 'ListingPage.ownListingPendingApproval';
+    } else if (isClosed) {
+      ownListingTextTranslationId = 'ListingPage.ownClosedListing';
+    }
+
+    const ownListingTextClasses = classNames(css.ownListingText, {
+      [css.ownListingTextPendingApproval]: isPendingApproval,
+    });
+
     return (
       <div className={css.actionBar}>
-        <p className={css.ownListingText}>
-          <FormattedMessage
-            id={isClosed ? 'ListingPage.ownClosedListing' : 'ListingPage.ownListing'}
-          />
+        <p className={ownListingTextClasses}>
+          <FormattedMessage id={ownListingTextTranslationId} />
         </p>
         <NamedLink className={css.editListingLink} name="EditListingPage" params={editParams}>
           <EditIcon className={css.editIcon} />
@@ -86,9 +99,8 @@ export const ActionBarMaybe = props => {
         </p>
       </div>
     );
-  } else {
-    return null;
   }
+  return null;
 };
 
 const { arrayOf, bool, func, object, oneOf, shape, string } = PropTypes;

src/containers/ListingPage/ListingPage.test.js

@@ -5,7 +5,12 @@ import { types as sdkTypes } from '../../util/sdkLoader';
 import { createUser, createCurrentUser, createListing, fakeIntl } from '../../util/test-data';
 import { storableError } from '../../util/errors';
 import { renderShallow } from '../../util/test-helpers';
-import { LINE_ITEM_NIGHT } from '../../util/types';
+import {
+  LINE_ITEM_NIGHT,
+  LISTING_STATE_PENDING_APPROVAL,
+  LISTING_STATE_PUBLISHED,
+  LISTING_STATE_CLOSED,
+} from '../../util/types';
 import { addMarketplaceEntities } from '../../ducks/marketplaceData.duck';
 import { showListingRequest, showListingError, showListing } from './ListingPage.duck';
 
@@ -105,7 +110,8 @@ describe('ListingPage', () => {
     it('shows users own listing status', () => {
       const listing = createListing('listing-published', {
         closed: false,
-        state: 'published',
+        deleted: false,
+        state: LISTING_STATE_PUBLISHED,
       });
       const actionBar = shallow(<ActionBarMaybe isOwnListing listing={listing} editParams={{}} />);
       const formattedMessages = actionBar.find(FormattedMessage);
@@ -113,10 +119,23 @@ describe('ListingPage', () => {
       expect(formattedMessages.at(0).props().id).toEqual('ListingPage.ownListing');
       expect(formattedMessages.at(1).props().id).toEqual('ListingPage.editListing');
     });
+    it('shows users own pending listing status', () => {
+      const listing = createListing('listing-published', {
+        closed: false,
+        deleted: false,
+        state: LISTING_STATE_PENDING_APPROVAL,
+      });
+      const actionBar = shallow(<ActionBarMaybe isOwnListing listing={listing} editParams={{}} />);
+      const formattedMessages = actionBar.find(FormattedMessage);
+      expect(formattedMessages.length).toEqual(2);
+      expect(formattedMessages.at(0).props().id).toEqual('ListingPage.ownListingPendingApproval');
+      expect(formattedMessages.at(1).props().id).toEqual('ListingPage.editListing');
+    });
     it('shows users own closed listing status', () => {
       const listing = createListing('listing-closed', {
         closed: true,
-        state: 'published',
+        deleted: false,
+        state: LISTING_STATE_CLOSED,
       });
       const actionBar = shallow(<ActionBarMaybe isOwnListing listing={listing} editParams={{}} />);
       const formattedMessages = actionBar.find(FormattedMessage);
@@ -127,7 +146,8 @@ describe('ListingPage', () => {
     it('shows closed listing status', () => {
       const listing = createListing('listing-closed', {
         closed: true,
-        state: 'published',
+        deleted: false,
+        state: LISTING_STATE_CLOSED,
       });
       const actionBar = shallow(
         <ActionBarMaybe isOwnListing={false} listing={listing} editParams={{}} />
@@ -139,12 +159,13 @@ describe('ListingPage', () => {
     it("is missing if listing is not closed or user's own", () => {
       const listing = createListing('listing-published', {
         closed: false,
-        state: 'published',
+        deleted: false,
+        state: LISTING_STATE_PUBLISHED,
       });
       const actionBar = shallow(
         <ActionBarMaybe isOwnListing={false} listing={listing} editParams={{}} />
       );
-      expect(actionBar.equals(null)).toEqual(true);
+      expect(actionBar.node).toBeNull();
     });
   });
 });

src/translations/en.json

@@ -265,6 +265,7 @@
   "ListingPage.locationTitle": "Location",
   "ListingPage.ownClosedListing": "Your listing has been closed and can't be booked.",
   "ListingPage.ownListing": "This is your own listing.",
+  "ListingPage.ownListingPendingApproval": "This listing is pending approval.",
   "ListingPage.perUnit": "per night",
   "ListingPage.reviewsError": "Loading reviews failed.",
   "ListingPage.reviewsHeading": "Reviews ({count})",