From e998223e9a0953456f2b4a9379aa96d2582a3cea Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Thu, 25 Jan 2018 11:07:01 +0200 Subject: [PATCH] Show pending state in listing page action bar --- src/containers/ListingPage/ListingPage.css | 19 +++++++++-- src/containers/ListingPage/ListingPage.js | 28 +++++++++++----- .../ListingPage/ListingPage.test.js | 33 +++++++++++++++---- src/translations/en.json | 1 + 4 files changed, 64 insertions(+), 17 deletions(-) diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index 43af3446..246a8afb 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/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; } } diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index 50412e06..1a1b4f65 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/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 (
-

- +

+

@@ -86,9 +99,8 @@ export const ActionBarMaybe = props => {

); - } else { - return null; } + return null; }; const { arrayOf, bool, func, object, oneOf, shape, string } = PropTypes; diff --git a/src/containers/ListingPage/ListingPage.test.js b/src/containers/ListingPage/ListingPage.test.js index 5d4d241c..ce9cea5f 100644 --- a/src/containers/ListingPage/ListingPage.test.js +++ b/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(); 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(); + 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(); 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( @@ -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( ); - expect(actionBar.equals(null)).toEqual(true); + expect(actionBar.node).toBeNull(); }); }); }); diff --git a/src/translations/en.json b/src/translations/en.json index 64a31c56..3e8dafbc 100644 --- a/src/translations/en.json +++ b/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})",