Ivan - Update home page for user system disabled [skip ci]

client/src/app/main/main-home/main-home-page-portal.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
+import {browserHistory} from 'react-router';
+import {connect} from 'react-redux'
 
 import Widget from 'core-components/widget';
 import Card from 'core-components/card';
@@ -7,26 +9,76 @@ import i18n from 'lib-app/i18n';
 import Header from 'core-components/header';
 
 class MainHomePagePortal extends React.Component {
+    static propTypes = {
+        type: React.PropTypes.oneOf(['default', 'complete'])
+    };
+
     render() {
         return (
             <Widget className={classNames('main-home-page-portal', this.props.className)}>
                 <div className="main-home-page-portal__title">
-                    <Header title={i18n('SUPPORT_CENTER')} description={i18n('SUPPORT_CENTER_DESCRIPTION')} />
+                    <Header title={this.props.title || i18n('SUPPORT_CENTER')} description={i18n('SUPPORT_CENTER_DESCRIPTION')} />
                 </div>
                 <div className="main-home-page-portal__cards">
                     <div className="main-home-page-portal__card col-md-4">
-                        <Card title={i18n('TICKETS')} description={i18n('TICKETS_DESCRIPTION')} icon="ticket" color="red"/>
+                        <Card {...this.getTicketsCardProps()}/>
                     </div>
                     <div className="main-home-page-portal__card col-md-4">
-                        <Card title={i18n('ARTICLES')} description={i18n('ARTICLES_DESCRIPTION')} icon="book" color="blue"/>
+                        <Card {...((this.props.type === 'complete') ? this.getViewTicketCardProps() : this.getAccountCardProps())} />
                     </div>
                     <div className="main-home-page-portal__card col-md-4">
-                        <Card title={i18n('ACCOUNT')} description={i18n('ACCOUNT_DESCRIPTION')} icon="user" color="green"/>
+                        <Card {...this.getArticlesCardProps()} />
                     </div>
                 </div>
             </Widget>
         );
     }
+
+    getTicketsCardProps() {
+        return {
+            title: i18n('TICKETS'),
+            description: i18n('TICKETS_DESCRIPTION'),
+            icon: 'ticket',
+            color: 'red',
+            buttonText: (this.props.type === 'complete') ? i18n('CREATE_TICKET') : null,
+            onButtonClick: () => browserHistory.push('/create-ticket')
+        };
     }
 
-export default MainHomePagePortal;
+    getAccountCardProps() {
+        return {
+            title: i18n('ACCOUNT'),
+            description: i18n('ACCOUNT_DESCRIPTION'),
+            icon: 'user',
+            color: 'green'
+        };
+    }
+
+    getArticlesCardProps() {
+        return {
+            title: i18n('ARTICLES'),
+            description: i18n('ARTICLES_DESCRIPTION'),
+            icon: 'book',
+            color: 'blue',
+            buttonText: (this.props.type === 'complete') ? i18n('VIEW_ARTICLES') : null,
+            onButtonClick: () => browserHistory.push('/view-articles')
+        };
+    }
+
+    getViewTicketCardProps() {
+        return {
+            title: i18n('VIEW_TICKET'),
+            description: i18n('VIEW_TICKET_DESCRIPTION'),
+            icon: 'check-square-o',
+            color: 'green',
+            buttonText: (this.props.type === 'complete') ? i18n('CHECK_TICKET') : null,
+            onButtonClick: () => browserHistory.push('/check-ticket')
+        };
+    }
+}
+
+export default connect((store) => {
+    return {
+        title: store.config.title
+    };
+})(MainHomePagePortal);

client/src/app/main/main-home/main-home-page.js

@@ -1,6 +1,6 @@
 import React from 'react';
-
 import {connect} from 'react-redux'
+
 import i18n from 'lib-app/i18n';
 
 import MainHomePageLoginWidget from 'app/main/main-home/main-home-page-login-widget';
@@ -13,11 +13,9 @@ class MainHomePage extends React.Component {
         return (
             <div className="main-home-page">
                 {this.renderMessage()}
-                <div className="col-md-4">
+                {(this.props.config['user-system-enabled']) ? this.renderLoginWidget() : null}
-                    <MainHomePageLoginWidget />
+                <div className={(this.props.config['user-system-enabled']) ? 'col-md-8' : 'col-md-12'}>
-                </div>
+                    <MainHomePagePortal type={((this.props.config['user-system-enabled']) ? 'default' : 'complete')}/>
-                <div className="col-md-8">
-                    <MainHomePagePortal />
                 </div>
             </div>
         );
@@ -34,6 +32,14 @@ class MainHomePage extends React.Component {
         }
     }
 
+    renderLoginWidget() {
+        return (
+            <div className="col-md-4">
+                <MainHomePageLoginWidget />
+            </div>
+        );
+    }
+
     renderSuccess() {
         return (
             <Message title={i18n('VERIFY_SUCCESS')} type="success" className="main-home-page__message">
@@ -53,6 +59,7 @@ class MainHomePage extends React.Component {
 
 export default connect((store) => {
     return {
-        session: store.session
+        session: store.session,
+        config: store.config
     };
 })(MainHomePage);

client/src/app/main/main-layout-header.js

@@ -12,7 +12,7 @@ class MainLayoutHeader extends React.Component {
     render() {
         return (
             <div className="main-layout-header">
-                {this.renderAccessLinks()}
+                {(this.props.config['user-system-enabled']) ? this.renderAccessLinks() : null}
                 <LanguageSelector {...this.getLanguageSelectorProps()} />
             </div>
         );

client/src/core-components/button.js

@@ -17,6 +17,7 @@ class Button extends React.Component {
 
     static propTypes = {
         children: React.PropTypes.node,
+        inverted: React.PropTypes.bool,
         size: React.PropTypes.oneOf([
             'extra-small',
             'small',
@@ -70,6 +71,7 @@ class Button extends React.Component {
         let classes = {
             'button': true,
             'button_disabled': this.props.disabled,
+            'button_inverted': this.props.inverted,
 
             'button_primary': (this.props.type === 'primary'),
             'button_secondary': (this.props.type === 'secondary'),

client/src/core-components/button.scss

@@ -31,6 +31,10 @@
     &_secondary {
         background-color: $primary-green;
 
+        &:focus, &:hover {
+            background-color: lighten($primary-green, 5%);
+            outline: none;
+        }
 
         &.button_disabled,
         &.button_disabled:hover {
@@ -41,6 +45,11 @@
     &_tertiary {
         background-color: $secondary-blue;
 
+        &:focus, &:hover {
+            background-color: lighten($secondary-blue, 5%);
+            outline: none;
+        }
+
         &.button_disabled,
         &.button_disabled:hover {
             background-color: lighten($secondary-blue, 15%);
@@ -93,4 +102,26 @@
             text-decoration: underline;
         }
     }
+
+    &_inverted {
+        background-color: white;
+
+        &:focus, &:hover {
+            background-color: white;
+            opacity: 0.9;
+            outline: none;
+        }
+
+        &.button_primary {
+            color: $primary-red;
+        }
+
+        &.button_secondary {
+            color: $primary-green;
+        }
+
+        &.button_tertiary {
+            color: $secondary-blue;
+        }
+    }
 }

client/src/core-components/card.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Icon from 'core-components/icon';
+import Button from 'core-components/button';
 import classNames from 'classnames';
 
 class Card extends React.Component{
@@ -7,7 +8,9 @@ class Card extends React.Component{
         description: React.PropTypes.string,
         title: React.PropTypes.string,
         icon: React.PropTypes.string,
-        color: React.PropTypes.string
+        color: React.PropTypes.string,
+        buttonText: React.PropTypes.string,
+        onButtonClick: React.PropTypes.func
     };
     
     render() {
@@ -16,12 +19,23 @@ class Card extends React.Component{
                 <div className="card__icon"><Icon name={this.props.icon} size="5x"/></div>
                 <div className="card__title">{this.props.title}</div>
                 <div className="card__description">{this.props.description}</div>
+                {(this.props.buttonText) ? this.renderButton() : null}
+            </div>
+        );
+    }
+
+    renderButton() {
+        return (
+            <div className="card__button">
+                <Button type={this.getButtonType()} inverted onClick={this.props.onButtonClick}>
+                    {this.props.buttonText}
+                </Button>
             </div>
         );
     }
 
     getClass() {
-        var classes = {
+        let classes = {
             'card': true,
             'card_red': (this.props.color === 'red'),
             'card_blue': (this.props.color === 'blue'),
@@ -32,5 +46,15 @@ class Card extends React.Component{
 
         return classNames(classes);
     }
+
+    getButtonType() {
+        let types = {
+            'red': 'primary',
+            'green': 'secondary',
+            'blue': 'tertiary'
+        };
+
+        return types[this.props.color];
+    }
 }
 export default Card;

client/src/core-components/card.scss

@@ -5,6 +5,7 @@
     color: white;
     height: 260px;
     padding: 15px;
+    position: relative;
 
     &__title {
         font-variant: small-caps;
@@ -16,6 +17,13 @@
         font-size: $font-size--sm;
     }
 
+    &__button {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 17px;
+    }
+
     &_red {
         background-color: $primary-red;
     }

client/src/data/fixtures/system-fixtures.js

@@ -11,7 +11,7 @@ module.exports = [
                         'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS',
                         'reCaptchaPrivate': 'LALA',
                         'url': 'http://www.opensupports.com/support',
-                        'title': 'Very Cool',
+                        'title': 'OpenSupports Support Center',
                         'layout': 'Boxed',
                         'time-zone': 3,
                         'no-reply-email': 'shitr@post.com',
@@ -36,8 +36,11 @@ module.exports = [
                     status: 'success',
                     data: {
                         'language': 'en',
+                        'title': '',
+                        'layout': 'Boxed',
                         'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS',
                         'maintenance-mode': false,
+                        'user-system-enabled': false,
                         'departments': [
                             {id: 1, name: 'Sales Support', owners: 2},
                             {id: 2, name: 'Technical Issues', owners: 5},

client/src/data/languages/en.js

@@ -73,6 +73,7 @@ export default {
     'ASSIGN_TO_ME': 'Assign to me',
     'UN_ASSIGN': 'Unassign',
     'VIEW_TICKET': 'View Ticket',
+    'VIEW_TICKET_DESCRIPTION': 'Check the status of your ticket using your ticket number and email.',
     'SELECT_CUSTOM_RESPONSE': 'Select a custom response...',
     'WARNING': 'Warning',
     'INFO': 'Information',
@@ -152,6 +153,7 @@ export default {
     'ALL_NOTIFICATIONS': 'All notifications',
     'VERIFY_SUCCESS': 'User verified',
     'VERIFY_FAILED': 'Could not verify',
+    'CHECK_TICKET': 'Check Ticket',
 
     //ACTIVITIES
     'ACTIVITY_COMMENT': 'commented ticket',