From dfbb9ad96fd4bc755a39108eac714ab223bbf88f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 16 Nov 2017 20:16:53 +0100
Subject: [PATCH] Implement AssetStatusInfo UI

---
 .../configure/components/AssetStatusInfo.js   | 28 +++++++++++++++++++
 .../tabs/configure/components/Configure.js    | 18 ++++++++++--
 .../tabs/configure/containers/Configure.js    |  9 ++++++
 3 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js

diff --git a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
new file mode 100644
index 000000000..e20f242cc
--- /dev/null
+++ b/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;
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configure.js b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
index 610fa5fae..134923f74 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Configure.js
+++ b/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;
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
index a52b65822..11f81da20 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
+++ b/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
       }