Integrate into embed stream

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

@@ -9,7 +9,6 @@ import Stream from '../containers/Stream';
 import Count from 'coral-plugin-comment-count/CommentCount';
 import UserBox from 'coral-sign-in/components/UserBox';
 import ProfileContainer from 'coral-settings/containers/ProfileContainer';
-import RestrictedContent from 'coral-framework/components/RestrictedContent';
 import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
 
 export default class Embed extends React.Component {
@@ -68,10 +67,8 @@ export default class Embed extends React.Component {
             <ProfileContainer />
           </TabContent>
           <TabContent show={activeTab === 'config'}>
-            <RestrictedContent restricted={!loggedIn}>
-              { loggedIn ? userBox : null }
-              <ConfigureStreamContainer />
-            </RestrictedContent>
+            { loggedIn ? userBox : null }
+            <ConfigureStreamContainer />
           </TabContent>
         </div>
       </div>

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

@@ -9,8 +9,8 @@ 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 ChangeUsernameContainer
   from 'coral-sign-in/containers/ChangeUsernameContainer';
 
@@ -49,6 +49,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 &&
@@ -72,32 +73,35 @@ 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>
+                  In accordance with &lt;organization name&gt;'s Community Guidlines,
+                  you have been temporarily suspended. You can rejoin the conversation
+                  with  our community in x hours.
+                </RestrictedMessageBox>
+              }
+              {banned &&
+                <SuspendedAccount
+                  canEditName={user && user.canEditName}
+                  editName={editName}
+                />
+              }
+              {loggedIn && !banned &&
+                <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 &&

client/coral-embed-stream/src/components/SuspendAccount.css

@@ -1,8 +1,3 @@
-.message {
-  background: #D8D8D8;
-  padding: 25px;
-}
-
 .editNameInput {
   margin-top: 10px;
   margin-bottom: 10px;

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

@@ -2,9 +2,10 @@ import React, {Component, PropTypes} from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations.json';
 const lang = new I18n(translations);
-import styles from './RestrictedContent.css';
+import styles from './SuspendAccount.css';
 import {Button} from 'coral-ui';
-import validate from '../helpers/validate';
+import validate from 'coral-framework/helpers/validate';
+import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';
 
 class SuspendedAccount extends Component {
 
@@ -38,7 +39,7 @@ class SuspendedAccount extends Component {
     const {canEditName} = this.props;
     const {username, alert} = this.state;
 
-    return <div className={styles.message}>
+    return <RestrictedMessageBox>
       <span>{
           canEditName ?
           lang.t('editName.msg')
@@ -72,7 +73,7 @@ class SuspendedAccount extends Component {
           </Button>
         </div> : null
       }
-    </div>;
+    </RestrictedMessageBox>;
   }
 }
 

client/coral-framework/components/RestrictedContent.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import styles from './RestrictedContent.css';
 
+import RestrictedMessageBox from './RestrictedMessageBox';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations.json';
 const lang = new I18n(translations);
 
 export default ({children, restricted, message = lang.t('contentNotAvailable'), restrictedComp}) => {
   if (restricted) {
-    return restrictedComp ? restrictedComp : messageBox(message);
+    return restrictedComp ? restrictedComp : <RestrictedMessageBox message={message} />;
   } else {
     return (
       <div>
@@ -17,4 +17,3 @@ export default ({children, restricted, message = lang.t('contentNotAvailable'),
   }
 };
 
-const messageBox = (message) => <div className={styles.message}>{message}</div>;

client/coral-framework/components/RestrictedMessageBox.css

@@ -0,0 +1,5 @@
+.message {
+  background: #D8D8D8;
+  padding: 25px;
+}
+

client/coral-framework/components/RestrictedMessageBox.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import styles from './RestrictedMessageBox.css';
+
+export default ({children}) => <div className={styles.message}>{children}</div>;

models/user.js

@@ -221,7 +221,7 @@ UserSchema.method('can', function(...actions) {
     throw new Error(`invalid actions: ${actions}`);
   }
 
-  if (this.status === 'BANNED') {
+  if (this.status === 'BANNED' || this.suspension.until && this.suspension.until > new Date()) {
     return false;
   }