Implement AssetStatusInfo UI

client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Button} from 'coral-ui';
+import PropTypes from 'prop-types';
+import t, {timeago} from 'coral-framework/services/i18n';
+
+const AssetStatusInfo = ({isClosed, closedAt, onClose, onOpen}) => (
+  <div>
+    <h3>{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
+    {(!isClosed && closedAt) ? <p>{t('configure.comment_stream_will_close')} {timeago(closedAt)}.</p> : ''}
+    <div className="close-comments-intro-wrapper">
+      <p>
+        {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')}
+      </p>
+      <Button onClick={!isClosed ? onClose : onOpen}>
+        {!isClosed ? t('configure.close_stream') : t('configure.open_stream')}
+      </Button>
+    </div>
+  </div>
+);
+
+AssetStatusInfo.propTypes = {
+  isClosed: PropTypes.bool.isRequired,
+  closedAt: PropTypes.object.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onOpen: PropTypes.func.isRequired,
+};
+
+export default AssetStatusInfo;

client/coral-embed-stream/src/tabs/configure/components/Configure.js

@@ -1,10 +1,24 @@
 import React from 'react';
+import AssetStatusInfo from './AssetStatusInfo';
+import PropTypes from 'prop-types';
 
 class Configure extends React.Component {
   render() {
-    console.log(this.props);
-    return <div>Configure</div>;
+    return (
+      <div className='talk-embed-stream-configuration-container'>
+        <hr />
+        <AssetStatusInfo
+          isClosed={this.props.isClosed}
+          closedAt={this.props.closedAt}
+        />
+      </div>
+    );
   }
 }
 
+Configure.propTypes = {
+  isClosed: PropTypes.bool,
+  closedAt: PropTypes.object,
+};
+
 export default Configure;

client/coral-embed-stream/src/tabs/configure/containers/Configure.js

@@ -2,15 +2,22 @@ import React from 'react';
 import {gql, compose} from 'react-apollo';
 import {withFragments} from 'coral-framework/hocs';
 import Configure from '../components/Configure';
+import PropTypes from 'prop-types';
 
 class ConfigureContainer extends React.Component {
   render() {
     return <Configure
       settings={this.props.asset.settings}
+      isClosed={this.props.asset.isClosed}
+      closedAt={this.props.asset.closedAt}
     />;
   }
 }
 
+ConfigureContainer.propTypes = {
+  asset: PropTypes.object,
+};
+
 const withConfigureFragments = withFragments({
   root: gql`
     fragment CoralEmbedStream_Configure_root on RootQuery {
@@ -19,6 +26,8 @@ const withConfigureFragments = withFragments({
   `,
   asset: gql`
     fragment CoralEmbedStream_Configure_asset on Asset {
+      closedAt
+      isClosed
       settings {
         moderation
       }