diff --git a/src/components/ManageListingCard/ManageListingCard.css b/src/components/ManageListingCard/ManageListingCard.css index bc7d8dfb..06dff496 100644 --- a/src/components/ManageListingCard/ManageListingCard.css +++ b/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; diff --git a/src/components/ManageListingCard/ManageListingCard.example.js b/src/components/ManageListingCard/ManageListingCard.example.js index 7999de7b..e517508d 100644 --- a/src/components/ManageListingCard/ManageListingCard.example.js +++ b/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 => ( ); -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, diff --git a/src/components/ManageListingCard/ManageListingCard.js b/src/components/ManageListingCard/ManageListingCard.js index ac5ef2b0..7cc9dfb9 100644 --- a/src/components/ManageListingCard/ManageListingCard.js +++ b/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 : (