Merge pull request #669 from sharetribe/pending-approval-ui

ManageListingCard pending approval state

src/components/ManageListingCard/ManageListingCard.css

@@ -256,6 +256,10 @@
   }
 }
 
+.titlePending {
+  color: var(--attentionColor);
+}
+
 .edit {
   @apply --marketplaceButtonStylesSecondary;
 
@@ -279,14 +283,16 @@
 
 .loadingOverlayWrapper,
 .errorOverlayWrapper,
-.closedOverlayWrapper {
+.closedOverlayWrapper,
+.pendingApprovalOverlayWrapper {
   /* Positioning */
   @apply --coverEverything;
 }
 
 .loadingOverlay,
 .errorOverlay,
-.closedOverlay {
+.closedOverlay,
+.pendingApprovalOverlay {
   /* Positioning */
   @apply --coverEverything;
 
@@ -297,7 +303,8 @@
 
 .loadingOverlayContent,
 .errorOverlayContent,
-.closedOverlayContent {
+.closedOverlayContent,
+.pendingApprovalOverlayContent {
   @apply --marketplaceH4FontStyles;
   color: var(--matterColor);
 
@@ -327,11 +334,21 @@
   margin-top: 90px;
 }
 
+.pendingApprovalOverlayContent {
+  justify-content: flex-start;
+  margin-top: 90px;
+}
+
 .closedMessage {
   max-width: 220px;
   text-align: center;
 }
 
+.pendingMessage {
+  max-width: 300px;
+  text-align: center;
+}
+
 .openListingButton {
   @apply --marketplaceButtonStylesPrimary;
   @apply --marketplaceH5FontStyles;

src/components/ManageListingCard/ManageListingCard.example.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
 import ManageListingCard from './ManageListingCard';
+import { LISTING_STATE_CLOSED, LISTING_STATE_PENDING_APPROVAL } from '../../util/types';
 import { createOwnListing, fakeIntl } from '../../util/test-data';
 
 const noop = () => null;
@@ -11,13 +12,47 @@ const ManageListingCardWrapper = props => (
   </div>
 );
 
-export const ManageListingCardWrapped = {
+export const Published = {
   component: ManageListingCardWrapper,
   props: {
     hasClosingError: false,
     hasOpeningError: false,
     intl: fakeIntl,
-    listing: createOwnListing('listing1'),
+    listing: createOwnListing('listing-published'),
+    isMenuOpen: false,
+    onCloseListing: noop,
+    onOpenListing: noop,
+    onToggleMenu: noop,
+    history: { push: noop },
+  },
+};
+
+export const Closed = {
+  component: ManageListingCardWrapper,
+  props: {
+    hasClosingError: false,
+    hasOpeningError: false,
+    intl: fakeIntl,
+    listing: createOwnListing('listing-closed', {
+      state: LISTING_STATE_CLOSED,
+    }),
+    isMenuOpen: false,
+    onCloseListing: noop,
+    onOpenListing: noop,
+    onToggleMenu: noop,
+    history: { push: noop },
+  },
+};
+
+export const PendingApproval = {
+  component: ManageListingCardWrapper,
+  props: {
+    hasClosingError: false,
+    hasOpeningError: false,
+    intl: fakeIntl,
+    listing: createOwnListing('listing-pending', {
+      state: LISTING_STATE_PENDING_APPROVAL,
+    }),
     isMenuOpen: false,
     onCloseListing: noop,
     onOpenListing: noop,

src/components/ManageListingCard/ManageListingCard.js

@@ -5,7 +5,7 @@ import { withRouter } from 'react-router-dom';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import routeConfiguration from '../../routeConfiguration';
-import { propTypes } from '../../util/types';
+import { LISTING_STATE_PENDING_APPROVAL, LISTING_STATE_CLOSED, propTypes } from '../../util/types';
 import { formatMoney } from '../../util/currency';
 import { ensureOwnListing } from '../../util/data';
 import { createSlug } from '../../util/urlHelpers';
@@ -73,7 +73,9 @@ export const ManageListingCardComponent = props => {
   const classes = classNames(rootClassName || css.root, className);
   const currentListing = ensureOwnListing(listing);
   const id = currentListing.id.uuid;
-  const { title = '', price, closed } = currentListing.attributes;
+  const { title = '', price, state } = currentListing.attributes;
+  const isPendingApproval = state === LISTING_STATE_PENDING_APPROVAL;
+  const isClosed = state === LISTING_STATE_CLOSED;
   const slug = createSlug(title);
   const firstImage =
     currentListing.images && currentListing.images.length > 0 ? currentListing.images[0] : null;
@@ -85,7 +87,7 @@ export const ManageListingCardComponent = props => {
   const { formattedPrice, priceTitle } = priceData(price, intl);
 
   /* eslint-disable jsx-a11y/no-static-element-interactions */
-  const closedOverlay = !closed ? null : (
+  const closedOverlay = !isClosed ? null : (
     <div
       className={css.closedOverlayWrapper}
       onClick={event => {
@@ -133,6 +135,26 @@ export const ManageListingCardComponent = props => {
       </div>
     ) : null;
 
+  const pendingApprovalOverlay = isPendingApproval ? (
+    <div
+      className={css.pendingApprovalOverlayWrapper}
+      onClick={event => {
+        event.preventDefault();
+        event.stopPropagation();
+      }}
+    >
+      <div className={css.pendingApprovalOverlay} />
+      <div className={css.pendingApprovalOverlayContent}>
+        <div className={css.pendingMessage}>
+          <FormattedMessage
+            id="ManageListingCard.pendingApproval"
+            values={{ listingTitle: title }}
+          />
+        </div>
+      </div>
+    </div>
+  ) : null;
+
   const thisInProgress = actionsInProgressListingId && actionsInProgressListingId.uuid === id;
   const loadingOrErrorOverlay = thisInProgress ? (
     <div
@@ -152,6 +174,10 @@ export const ManageListingCardComponent = props => {
   );
   /* eslint-enable jsx-a11y/no-static-element-interactions */
 
+  const titleClasses = classNames(css.title, {
+    [css.titlePending]: isPendingApproval,
+  });
+
   return (
     <NamedLink className={classes} name="ListingPage" params={{ id, slug }}>
       <div className={css.threeToTwoWrapper}>
@@ -176,7 +202,7 @@ export const ManageListingCardComponent = props => {
           <div className={css.menubarGradient} />
           <div className={css.menubar}>
             <Menu
-              className={classNames(css.menu, { [css.cardIsOpen]: !closed })}
+              className={classNames(css.menu, { [css.cardIsOpen]: !isClosed })}
               contentPlacementOffset={MENU_CONTENT_OFFSET}
               contentPosition="left"
               useArrow={false}
@@ -212,6 +238,7 @@ export const ManageListingCardComponent = props => {
           </div>
         </div>
         {closedOverlay}
+        {pendingApprovalOverlay}
         {loadingOrErrorOverlay}
       </div>
       <div className={css.info}>
@@ -224,7 +251,7 @@ export const ManageListingCardComponent = props => {
           </div>
         </div>
         <div className={css.mainInfo}>
-          <div className={css.title}>{title}</div>
+          <div className={titleClasses}>{title}</div>
         </div>
         <button
           className={css.edit}

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

@@ -116,7 +116,9 @@ exports[`ManageListingCard matches snapshot 1`] = `
       </div>
     </div>
     <div>
-      <div>
+      <div
+        className=""
+      >
         listing1 title
       </div>
     </div>

src/translations/en.json

@@ -297,6 +297,7 @@
   "ManageListingCard.closedListing": "This listing is closed and not visible on the marketplace.",
   "ManageListingCard.edit": "Edit",
   "ManageListingCard.openListing": "Open listing",
+  "ManageListingCard.pendingApproval": "{listingTitle} is pending admin approval and can't be booked.",
   "ManageListingCard.perUnit": "per night",
   "ManageListingCard.unsupportedPrice": "({currency})",
   "ManageListingCard.unsupportedPriceTitle": "Unsupported currency ({currency})",