Merge remote-tracking branch 'origin/split-pricing' into split-pricing

Author: bsears90

package.json

@@ -7,7 +7,8 @@
     "build": "./node_modules/.bin/webpack",
     "dev-client": "./node_modules/.bin/webpack-dev-server --port 3002 --content-base public/",
     "fullStart": "./node_modules/.bin/webpack && node ./bin/start",
-    "debug": "node $NODE_DEBUG_OPTION ./bin/start"
+    "debug": "node $NODE_DEBUG_OPTION ./bin/start",
+    "test": "jest"
   },
   "repository": {
     "type": "git",
@@ -113,10 +114,12 @@
   },
   "devDependencies": {
     "babel-plugin-transform-async-to-generator": "^6.24.1",
+    "jest": "^22.4.2",
     "react-hot-loader": "^3.0.0-beta.7",
+    "servicebot-client": "^1.0.3",
     "supertest": "^3.0.0",
     "tape": "^4.8.0",
-    "uglifyjs-webpack-plugin": "^1.0.1",
+    "uglifyjs-webpack-plugin": "^1.2.4",
     "webpack-dev-server": "^1.14.1"
   }
 }

views/components/elements/dashboard/css/style.css

@@ -26,4 +26,30 @@
     font-size: 2em;
     font-weight: 100;
     padding: 20px 0px;
+}
+
+.offerings-widgets{
+    background: white;
+    margin: 15px 0;
+    border-radius: 5px;
+}
+
+.offerings-widget {
+    padding: 5px 15px;
+    text-align: center;
+}
+
+.offerings-widget.master {
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    background: #000000;
+    color: white;
+    text-align: left;
+}
+
+.customer-chart-widget{
+    background: #ffffff;
+    padding: 5px;
+    border-radius: 5px;
+    margin: 5px 10px;
 }

views/components/elements/dashboard/dashboard-chart.jsx

@@ -160,4 +160,76 @@ class ServiceStatusChart extends React.Component {
 
 }
 
-export {ServiceOverTimeChart, ServiceStatusChart};
+
+
+class CustomerStatusChart extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            loading: true,
+            instances: {},
+            containerWidth: this.props.containerWidth,
+            chartData: {},
+            chartOption: {}
+        };
+
+        this.fetchInstances = this.fetchInstances.bind(this);
+    }
+
+    componentDidMount(){
+        this.fetchInstances();
+    }
+
+    fetchInstances(){
+        let self = this;
+        let url = '/api/v1/service-instances';
+        Fetcher(url).then(function (response) {
+
+            if(!response.error) {
+                let statuses = _.uniq(_.map(response, (instance) => instance.status));
+                let groupByStatus = _.groupBy(response, (instance) => {
+                    return instance.status ? instance.status : other
+                });
+                let serviceCountByStatus = _.map(groupByStatus, (group)=>{return(group.length)});
+
+                let data = {
+                    labels: statuses,
+                    datasets: [{
+                        data: serviceCountByStatus,
+                        backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56", "#B388FF" ],
+                        hoverBackgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56", "#B388FF" ] }]
+                };
+                let options = {
+                    animation: {
+                        animateRotate: true,
+                        animateScale: true
+                    }
+                };
+
+                self.setState({loading: false, instances: response, chartData: data, chartOptions: options});
+            }else{
+                self.setState({loading: false});
+            }
+        })
+    }
+
+    render(){
+        if(this.state.loading){
+            return(
+                <div>
+                    <Load/>
+                </div>
+            );
+        }else{
+            return(
+                <div className={`customer-status-chart ${this.props.className}`}>
+                    <h3 className="chart-title">Customer Stats</h3>
+                    <RC2 data={this.state.chartData} options={this.state.chartOptions} type='pie'/>
+                </div>
+            );
+        }
+    }
+
+}
+
+export {ServiceOverTimeChart, ServiceStatusChart, CustomerStatusChart};

views/components/elements/dashboard/dashboard-widgets.jsx

@@ -70,13 +70,13 @@ class Widget extends React.Component {
         return (
             <div className={`dashboard-widget ${this.getCSSClass()}`} onClick={this.goTo} style={style.widgetData}>
                 <div className="widget-label" style={style.widgetLabel}>{this.state.data.label}</div>
-                {this.state.data.value && <div className="widget-data">{this.getFormatted(this.state.data.value)}<span className="sub">{this.props.postFix}</span></div>}
+                {this.state.data.value !== null && <div className="widget-data">{this.getFormatted(this.state.data.value)}<span className="sub">{this.props.postFix}</span></div>}
                 {this.state.data.list &&
-                    <div>
+                    <div className="p-t-10 p-b-10">
                         {this.state.data.list.map(listing =>
-                            <div>
-                                <span>{listing.label}</span>
-                                <span>{listing.value}</span>
+                            <div className="row p-l-20 p-r-20">
+                                <div className="col-md-10">{listing.label}</div>
+                                <div className="col-md-2 text-right">{listing.value}</div>
                             </div>
                         )}
                     </div>
@@ -115,12 +115,20 @@ class DashboardWidgets extends React.Component {
         saleStat.push({label:'Requested Sales', value:this.state.data.salesStats.overall.requested});
         saleStat.push({label:'Waiting Cancellations', value:this.state.data.salesStats.overall.waitingCancellation});
         saleStat.push({label:'Cancelled Sales', value:this.state.data.salesStats.overall.cancelled});
+
+        //Unpaid charge logic
+        let orange = false;
+        let green = true;
+        if(this.state.data.salesStats.overall.remainingCharges > 0) {
+            orange = true;
+            green = false;
+        }
         return (
             <div>
                 <div className="dashboard-widgets">
                     <Widget data={{label: 'ARR', value: this.state.data.salesStats.subscriptionStats.annual}} postFix="/yr" type="price"/>
                     <Widget data={{label: 'MRR', value: this.state.data.salesStats.subscriptionStats.month}} postFix="/mo" type="price"/>
-                    <Widget data={{label: 'Unpaid Charges', value: this.state.data.salesStats.overall.remainingCharges}} type="price"/>
+                    <Widget data={{label: 'Unpaid Charges', value: this.state.data.salesStats.overall.remainingCharges}} type="price" orange={orange} green={green}/>
                     <Widget data={{label: 'Total Transactions', value: this.state.data.totalSales}} type="price" purple={true}/>
                 </div>
                 <div className="dashboard-widgets overalls">
@@ -135,4 +143,4 @@ class DashboardWidgets extends React.Component {
 
 }
 
-export {DashboardWidgets};
+export {DashboardWidgets, Widget};

views/components/elements/dashboard/offerings-stats-widgets.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import './css/style.css';
+
+class OfferingsStatsWidgets extends React.Component {
+
+    constructor(props){
+        super(props);
+    }
+
+    render(){
+        let self = this;
+        let analytics = self.props.data;
+        return (
+            <div className="offerings-widgets row">
+                <div className="offerings-widget master col-md-2">Total Offerings: <b>{analytics.offeringStats.total}</b></div>
+                <div className="offerings-widget col-md-3">Subscriptions: <span className="status-badge green"><b>{analytics.offeringStats.totalSubscription}</b></span></div>
+                <div className="offerings-widget col-md-3">Scheduled Payments: <span className="status-badge green"><b>{analytics.offeringStats.totalSplit}</b></span></div>
+                <div className="offerings-widget col-md-2">One Times: <span className="status-badge green"><b>{analytics.offeringStats.totalOneTime}</b></span></div>
+                <div className="offerings-widget col-md-2">Quotes: <span className="status-badge green"><b>{analytics.offeringStats.totalQuote}</b></span></div>
+            </div>
+        );
+    }
+
+}
+
+export default OfferingsStatsWidgets;

views/components/elements/dashboard/overall-stats-widgets.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import './css/style.css';
+import {Widget} from "../../elements/dashboard/dashboard-widgets.jsx";
+import {CustomerStatusChart} from "../../elements/dashboard/dashboard-chart.jsx";
+
+class OverallStatsWidgets extends React.Component {
+
+
+    constructor(props){
+        super(props);
+    }
+
+    render(){
+        let self = this;
+        let analytics = self.props.data;
+        let saleStat = [];
+        saleStat.push({label:'Total Sales', value: analytics.salesStats.overall.total});
+        saleStat.push({label:'Customers who Purchased', value: analytics.salesStats.overall.customersWithOfferings});
+        saleStat.push({label:'Active Sales', value: analytics.salesStats.overall.activeSales});
+        saleStat.push({label:'Requested Sales', value: analytics.salesStats.overall.requested});
+        saleStat.push({label:'Waiting Cancellations', value: analytics.salesStats.overall.waitingCancellation});
+        saleStat.push({label:'Cancelled Sales', value: analytics.salesStats.overall.cancelled});
+        return (
+            <div className="row m-0">
+                <div className="dashboard-widgets p-0 col-md-4">
+                    <Widget data={{label: 'Sales Stat', list: saleStat}} postFix="/yr" purple={true}/>
+                </div>
+                <div className="customer-chart-widget col-md-8">
+                    <CustomerStatusChart className="dashboard-charts"/>
+                </div>
+            </div>
+        );
+    }
+
+}
+
+export default OverallStatsWidgets;

views/components/elements/forms/login.jsx

@@ -183,14 +183,16 @@ class Login extends React.Component {
                                     <button onClick={this.handleLogin} type='submit'
                                             className="btn btn-raised btn-lg btn-primary btn-block">Sign in
                                     </button>
+                                    <p className="sign-up-link">
+                                        <Link to={{pathname: "/forgot-password", state: {fromLogin: false}}}> Forgot
+                                            Password</Link>
+                                    </p>
                                     {(this.props.options && this.props.options.allow_registration.value == 'true') &&
                                     <p className="sign-up-link">Don't have an account?
                                         <span><Link to={{
                                             pathname: "/signup",
                                             state: {fromLogin: true}
-                                        }}> Sign up here</Link> or </span>
-                                        <Link to={{pathname: "/forgot-password", state: {fromLogin: false}}}> Forgot
-                                            Password</Link>
+                                        }}> Sign up here</Link></span>
                                     </p>
                                     }
                                 </form>

views/components/pages/dashboard.jsx

@@ -14,7 +14,8 @@ import SVGIcons from "../utilities/svg-icons.jsx";
 import ServiceBotTableNoData from '../elements/bootstrap-tables/servicebot-table-no-data.jsx';
 let _ = require("lodash");
 import { connect } from "react-redux";
-//import OverallStatsWidgets from '../elements/dashboard/overall-stats-widgets.jsx';
+import OfferingsStatsWidgets from '../elements/dashboard/offerings-stats-widgets.jsx';
+import OverallStatsWidgets from '../elements/dashboard/overall-stats-widgets.jsx';
 //import SubscriptionStatsWidgets from '../elements/dashboard/subscription-widgets.jsx';
 //import UnSubscriptionStatsWidgets from '../elements/dashboard/un-subscription-widgets.jsx';
 
@@ -82,7 +83,8 @@ class Dashboard extends React.Component {
                             <div>
                                 <ContentTitle title="Welcome to your dashboard"/>
                                 <DashboardWidgets data={this.state.analytics}/>
-                                {/*<OverallStatsWidgets data={this.state.analytics} />*/}
+                                <OfferingsStatsWidgets data={this.state.analytics} />
+                                <OverallStatsWidgets data={this.state.analytics} />
                                 {/*<SubscriptionStatsWidgets data={this.state.analytics} />*/}
                                 {/*<UnSubscriptionStatsWidgets data={this.state.analytics} />*/}
                                 <div className="row">