diff --git a/CHANGELOG.md b/CHANGELOG.md index a8b24e05..670643ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,8 @@ way to update this template, but currently, we follow a pattern: * [change] Logo customization refactored to be easier. Check CheckoutPage, TopbarDesktop and Footer after update. [#854](https://github.com/sharetribe/flex-template-web/pull/854) +* [fix] Fix showing reviews from banned users. + [#855](https://github.com/sharetribe/flex-template-web/pull/855) ## v1.0.0 diff --git a/src/components/IconBannedUser/IconBannedUser.css b/src/components/IconBannedUser/IconBannedUser.css index b1e946e1..b63749a9 100644 --- a/src/components/IconBannedUser/IconBannedUser.css +++ b/src/components/IconBannedUser/IconBannedUser.css @@ -1,7 +1,11 @@ @import '../../marketplace.css'; -.backgroundFill { - fill: var(--failColor); +.backgroundLight { + stop-color: var(--bannedColorLight); +} + +.backgroundDark { + stop-color: var(--bannedColorDark); } .foregroundFill { diff --git a/src/components/IconBannedUser/IconBannedUser.js b/src/components/IconBannedUser/IconBannedUser.js index dc932c6d..55dd6ee1 100644 --- a/src/components/IconBannedUser/IconBannedUser.js +++ b/src/components/IconBannedUser/IconBannedUser.js @@ -13,8 +13,14 @@ const IconBannedUser = props => { viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" > + + + + + + - + diff --git a/src/components/Reviews/Reviews.example.js b/src/components/Reviews/Reviews.example.js index 9a6f739a..aedd5610 100644 --- a/src/components/Reviews/Reviews.example.js +++ b/src/components/Reviews/Reviews.example.js @@ -18,3 +18,16 @@ export const WithThreeReviews = { ], }, }; + +export const WithBannedUser = { + component: Reviews, + props: { + reviews: [ + createReview( + 'review_1', + { rating: 1 }, + { author: createUser('author_1', { banned: true, profile: null }) } + ), + ], + }, +}; diff --git a/src/components/Reviews/Reviews.js b/src/components/Reviews/Reviews.js index 79572233..8e8e40b9 100644 --- a/src/components/Reviews/Reviews.js +++ b/src/components/Reviews/Reviews.js @@ -7,6 +7,12 @@ import { propTypes } from '../../util/types'; import css from './Reviews.css'; +const authorDisplayName = (review, intl) => { + return review.author.attributes.banned + ? intl.formatMessage({ id: 'Reviews.bannedUserDisplayName' }) + : review.author.attributes.profile.displayName; +}; + const Review = props => { const { review, intl } = props; @@ -24,7 +30,7 @@ const Review = props => { />

{review.attributes.content}

- {review.author.attributes.profile.displayName} + {authorDisplayName(review, intl)} {dateString} diff --git a/src/marketplace.css b/src/marketplace.css index b238c708..7984fa50 100644 --- a/src/marketplace.css +++ b/src/marketplace.css @@ -53,6 +53,8 @@ --successColorDark: #239954; --failColor: #ff0000; --attentionColor: #ffaa00; + --bannedColorLight: var(--marketplaceColorLight); + --bannedColorDark: var(--marketplaceColor); --matterColorDark: #000000; --matterColor: #4a4a4a; diff --git a/src/translations/en.json b/src/translations/en.json index acfecdaa..06b662aa 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -523,6 +523,7 @@ "ReviewModal.description": "Reviews are an important part of the Saunatime community. Please share what went well and what could have been improved.", "ReviewModal.later": "Later", "ReviewModal.title": "Leave a review for {revieweeName}", + "Reviews.bannedUserDisplayName": "Banned user", "SearchFilters.amenitiesLabel": "Amenities", "SearchFilters.categoryLabel": "Category", "SearchFilters.filtersButtonLabel": "Filters",