merge master

client/coral-embed-stream/src/components/Stream.js

@@ -9,10 +9,16 @@ import {ModerationLink} from 'coral-plugin-moderation';
 import CommentBox from 'coral-plugin-commentbox/CommentBox';
 import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
-import SuspendedAccount from 'coral-framework/components/SuspendedAccount';
-import RestrictedContent from 'coral-framework/components/RestrictedContent';
+import SuspendedAccount from './SuspendedAccount';
+import RestrictedMessageBox
+  from 'coral-framework/components/RestrictedMessageBox';
+import {can} from 'coral-framework/services/perms';
 import ChangeUsernameContainer
   from 'coral-sign-in/containers/ChangeUsernameContainer';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-framework/translations';
+
+const lang = new I18n(translations);
 
 class Stream extends React.Component {
   setActiveReplyBox = (reactKey) => {
@@ -25,7 +31,7 @@ class Stream extends React.Component {
 
   render() {
     const {
-      root: {asset, asset: {comments}, comment, myIgnoredUsers},
+      root: {asset, asset: {comments}, comment, me},
       postComment,
       addNotification,
       postFlag,
@@ -37,7 +43,7 @@ class Stream extends React.Component {
       removeTag,
       pluginProps,
       ignoreUser,
-      auth: {loggedIn, isAdmin, user},
+      auth: {loggedIn, user},
       commentCountCache,
       editName
     } = this.props;
@@ -49,6 +55,7 @@ class Stream extends React.Component {
       : comment;
 
     const banned = user && user.status === 'BANNED';
+    const temporarilySuspended = user && user.suspension.until && new Date(user.suspension.until) > new Date();
 
     const hasOlderComments = !!(asset &&
       asset.lastComment &&
@@ -58,8 +65,9 @@ class Stream extends React.Component {
     const firstCommentDate = asset.comments[0]
       ? asset.comments[0].created_at
       : new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString();
-    const commentIsIgnored = (comment) =>
-      myIgnoredUsers && myIgnoredUsers.includes(comment.user.id);
+    const commentIsIgnored = (comment) => {
+      return me && me.ignoredUsers && me.ignoredUsers.find((u) => u.id === comment.user.id);
+    };
     return (
       <div id="stream">
         {open
@@ -72,32 +80,38 @@ class Stream extends React.Component {
                 content={asset.settings.questionBoxContent}
                 enable={asset.settings.questionBoxEnable}
               />
-              <RestrictedContent
-                restricted={banned}
-                restrictedComp={
-                  <SuspendedAccount
-                    canEditName={user && user.canEditName}
-                    editName={editName}
+              {!banned && temporarilySuspended &&
+                <RestrictedMessageBox>
+                  {
+                    lang.t('temporarilySuspended',
+                      this.props.root.settings.organizationName,
+                      lang.timeago(user.suspension.until),
+                    )
+                  }
+                </RestrictedMessageBox>
+              }
+              {banned &&
+                <SuspendedAccount
+                  canEditName={user && user.canEditName}
+                  editName={editName}
+                />
+              }
+              {loggedIn && !banned && !temporarilySuspended &&
+                <CommentBox
+                    addNotification={this.props.addNotification}
+                    postComment={this.props.postComment}
+                    appendItemArray={this.props.appendItemArray}
+                    updateItem={this.props.updateItem}
+                    setCommentCountCache={this.props.setCommentCountCache}
+                    commentCountCache={commentCountCache}
+                    assetId={asset.id}
+                    premod={asset.settings.moderation}
+                    isReply={false}
+                    authorId={user.id}
+                    charCountEnable={asset.settings.charCountEnable}
+                    maxCharCount={asset.settings.charCount}
                   />
-                }
-              >
-                {user
-                  ? <CommentBox
-                      addNotification={this.props.addNotification}
-                      postComment={this.props.postComment}
-                      appendItemArray={this.props.appendItemArray}
-                      updateItem={this.props.updateItem}
-                      setCommentCountCache={this.props.setCommentCountCache}
-                      commentCountCache={commentCountCache}
-                      assetId={asset.id}
-                      premod={asset.settings.moderation}
-                      isReply={false}
-                      authorId={user.id}
-                      charCountEnable={asset.settings.charCountEnable}
-                      maxCharCount={asset.settings.charCount}
-                    />
-                  : null}
-              </RestrictedContent>
+              }
             </div>
           : <p>{asset.settings.closedMessage}</p>}
         {!loggedIn &&
@@ -111,7 +125,7 @@ class Stream extends React.Component {
         {loggedIn &&
           user &&
           <ChangeUsernameContainer loggedIn={loggedIn} user={user} />}
-        {loggedIn && <ModerationLink assetId={asset.id} isAdmin={isAdmin} />}
+        {loggedIn && <ModerationLink assetId={asset.id} isAdmin={can(user, 'MODERATE_COMMENTS')} />}
 
         {/* the highlightedComment is isolated after the user followed a permalink */}
         {highlightedComment
@@ -150,8 +164,8 @@ class Stream extends React.Component {
               />
               <div className="embed__stream">
                 {comments.map(
-                  (comment) =>
-                    (commentIsIgnored(comment)
+                  (comment) => {
+                    return (commentIsIgnored(comment)
                       ? <IgnoredCommentTombstone key={comment.id} />
                       : <Comment
                           data={this.props.data}
@@ -180,7 +194,9 @@ class Stream extends React.Component {
                           charCountEnable={asset.settings.charCountEnable}
                           maxCharCount={asset.settings.charCount}
                           editComment={this.props.editComment}
-                        />)
+                        />
+                    );
+                  }
                 )}
               </div>
               <LoadMore