Merge pull request #855 from sharetribe/banned-user-reviews

Banned user reviews

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
 

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 {

src/components/IconBannedUser/IconBannedUser.js

@@ -13,8 +13,14 @@ const IconBannedUser = props => {
       viewBox="0 0 40 40"
       xmlns="http://www.w3.org/2000/svg"
     >
+      <defs>
+        <linearGradient id="background" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" className={css.backgroundLight} />
+          <stop offset="100%" className={css.backgroundDark} />
+        </linearGradient>
+      </defs>
       <g fill="none" fillRule="evenodd">
-        <circle className={css.backgroundFill} cx="20" cy="20" r="20" />
+        <circle fill="url(#background)" cx="20" cy="20" r="20" />
         <circle className={css.foregroundStroke} strokeWidth="3" cx="20" cy="20" r="13" />
         <path className={css.foregroundFill} d="M28.34 9.04l2.12 2.12-19.8 19.8-2.12-2.12z" />
       </g>

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 }) }
+      ),
+    ],
+  },
+};

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 => {
         />
         <p className={css.reviewContent}>{review.attributes.content}</p>
         <p className={css.reviewInfo}>
-          {review.author.attributes.profile.displayName}
+          {authorDisplayName(review, intl)}
           <span className={css.separator}>•</span>
           {dateString}
           <span className={css.desktopSeparator}>•</span>

src/marketplace.css

@@ -53,6 +53,8 @@
   --successColorDark: #239954;
   --failColor: #ff0000;
   --attentionColor: #ffaa00;
+  --bannedColorLight: var(--marketplaceColorLight);
+  --bannedColorDark: var(--marketplaceColor);
 
   --matterColorDark: #000000;
   --matterColor: #4a4a4a;

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",