Merge branch 'browseProvider' into dev

# Conflicts:
#	package.json
#	src/components/Button/Button.scss
#	src/components/Footer/Footer.jsx
#	src/components/Footer/Footer.scss
#	src/components/FormField/FormField.jsx
#	src/components/Header/Header.jsx
#	src/components/MapLegends/MapLegends.jsx
#	src/containers/AppContainer.jsx
#	src/layouts/CoreLayout/CoreLayout.jsx
#	src/routes/ServiceRequest/components/ContactDetails/ContactDetails.jsx
#	src/routes/ServiceRequest/components/EstimatedAmountToPay/EstimatedAmountToPay.jsx
#	src/routes/ServiceRequest/components/ItemRequest/ItemRequest.jsx
#	src/routes/ServiceRequest/components/ProviderMap/ProviderMap.jsx
#	src/routes/ServiceRequest/components/ServiceDetail/ServiceDetail.jsx
#	src/routes/index.js
#	src/styles/img/icon-dropdown-caret-sm.png
#	src/styles/main.scss

Author: gondzo

.eslintrc

@@ -28,7 +28,6 @@
       2,
       "always"
     ],
-    arrow-body-style: [2, "as-needed"],
     "import/extensions": 0,
     "import/no-unresolved": 0,
     "import/no-named-as-default": 0,
@@ -37,8 +36,6 @@
     "react/forbid-prop-types": 0,
     "no-unused-expressions": 0,
     "jsx-a11y/anchor-has-content": 0,
-    "jsx-a11y/href-no-hash": 0,
-    "jsx-a11y/label-has-for": 0,
     "no-plusplus": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "no-use-before-define": ["error", { "functions": false, "classes": true }],

package.json

@@ -48,9 +48,11 @@
     "node-sass": "^3.7.0",
     "postcss-flexboxfixer": "0.0.5",
     "postcss-loader": "^0.13.0",
+    "rc-calendar": "^7.5.1",
     "rc-tooltip": "^3.4.2",
     "react": "^15.3.2",
     "react-breadcrumbs": "^1.5.1",
+    "react-count-down": "^1.0.3",
     "react-css-modules": "^3.7.10",
     "react-date-picker": "^5.3.28",
     "react-dom": "^15.3.2",
@@ -69,6 +71,8 @@
     "react-slick": "^0.14.5",
     "react-star-rating-component": "^1.2.2",
     "react-timeago": "^3.1.3",
+    "react-tabs": "^0.8.2",
+    "reactable": "^0.14.1",
     "redbox-react": "^1.2.10",
     "redux": "^3.0.0",
     "redux-actions": "^0.10.1",
@@ -78,6 +82,7 @@
     "redux-thunk": "^2.0.0",
     "sass-loader": "^4.0.0",
     "socket.io-client": "^1.7.1",
+    "slick-carousel": "^1.6.0",
     "style-loader": "^0.13.0",
     "superagent": "^2.3.0",
     "superagent-promise": "^1.1.0",

src/components/Accordion/Accordion.scss

@@ -11,6 +11,7 @@
   font-size: 16px;
   font-weight: bold;
   position: relative;
+  background: #fff;
 
   &:hover {
     cursor: pointer;

src/components/Button/Button.scss

@@ -21,3 +21,7 @@
   height: 38px;
   padding: 0 10px;
 }
+
+.color-black {
+  background: #4c4c4c;
+}

src/components/Checkbox/Checkbox.jsx

@@ -5,7 +5,7 @@ import styles from './Checkbox.scss';
 
 const Checkbox = ({ children, className, id, ...props }) => (
   <div styleName="checkbox" className={className}>
-    <input id={id} type="checkbox" {..._.pick(props, 'checked', 'onChange')} />
+    <input id={id} type="checkbox" {..._.pick(props, 'checked', 'onChange', 'defaultChecked')} />
     <label htmlFor={id}>
       <span /> {children}
     </label>

src/components/CountdownTimer/Countdown.jsx

@@ -0,0 +1,43 @@
+import React, { Component, PropTypes} from 'react';
+import DateBetween from './DateBetween';
+
+/**
+ * Count down module
+ * A simple count down component.
+**/
+export default class Countdown extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { remaining: null };
+  }
+
+  componentDidMount() {
+    this.tick();
+    this.interval = setInterval(this.tick.bind(this), 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  tick() {
+    const startDate = new Date();
+    const endDate = new Date(this.props.options.endDate);
+    const remaining = DateBetween(startDate, endDate);
+    this.setState({remaining });
+  }
+
+  render() {
+    return (
+      <div className="react-count-down">
+        <span className="date"> {this.state.remaining}</span>
+        <span className="prefix"> {this.props.options.prefix}</span>
+      </div>
+    );
+  }
+}
+
+Countdown.propTypes = {
+  options: PropTypes.object.isRequired,
+};

src/components/CountdownTimer/CountdownTimer.jsx

@@ -0,0 +1,22 @@
+
+import React, { Component } from 'react';
+import CSSModules from 'react-css-modules';
+import Countdown from './Countdown';
+
+import styles from './CountdownTimer.scss';
+
+class CountdownTimer extends Component {
+  componentDidMount() {
+
+  }
+  render() {
+    const OPTIONS = { endDate: '12/20/2016 12:12 AM', prefix: '' };
+
+    return (
+      <div>
+        <Countdown options={OPTIONS} />
+      </div>
+    );
+  }
+}
+export default CSSModules(CountdownTimer, styles);

src/components/CountdownTimer/CountdownTimer.scss

@@ -0,0 +1,19 @@
+.button {
+  padding: 13px 10px;
+  min-width: 115px;
+  color: white;
+  border: none;
+  font-weight: bold;
+}
+
+.color-gray {
+  background: #4c4c4c;
+}
+
+.color-blue {
+  background: #315b95;
+}
+
+.color-black {
+  background: #4c4c4c;
+}

src/components/CountdownTimer/DateBetween.js

@@ -0,0 +1,32 @@
+function DateBetween(startDate, endDate) {
+  const second = 1000;
+  const minute = second * 60;
+  const hour = minute * 60;
+  const day = hour * 24;
+  const distance = endDate - startDate;
+
+  if (distance < 0) {
+    return 'counter expired';
+  }
+
+  function pad(num, size) {
+    let s = String(num);
+    while (s.length < (size || 2)) { s = `0${s}`; }
+    return s;
+  }
+
+  const hours = Math.floor((distance % day) / hour);
+  pad(hours);
+  const minutes = Math.floor((distance % hour) / minute);
+  pad(minutes);
+  const seconds = Math.floor((distance % minute) / second);
+  pad(seconds);
+
+  let between = `${hours}:`;
+  between += `${minutes}:`;
+  between += seconds;
+
+  return between;
+}
+
+module.exports = DateBetween;

src/components/CountdownTimer/index.js

@@ -0,0 +1,3 @@
+import CountdownTimer from './CountdownTimer';
+
+export default CountdownTimer;

src/components/Footer/Footer.jsx

@@ -14,4 +14,6 @@ export const Footer = () => (
   </div>
 );
 
+
 export default CSSModules(Footer, styles);
+

src/components/FormField/FormField.jsx

@@ -3,9 +3,9 @@ import CSSModules from 'react-css-modules';
 import cn from 'classnames';
 import styles from './FormField.scss';
 
-export const FormField = ({ label, error, touched, children }) => (
-  <div styleName={cn('form-field', { error: error && touched })}>
-    <div styleName="label">{label || <span>&nbsp;</span>}</div>
+export const FormField = ({label, error, touched, children, className}) => (
+  <div styleName={cn('form-field', {error: error && touched})} className={cn({customField: className}, {error: error && touched})}>
+    {label && <div styleName="label">{label || <span>&nbsp;</span>}</div>}
     {children}
     {error && touched && <div styleName="error-message">{error}</div>}
   </div>
@@ -15,6 +15,7 @@ FormField.propTypes = {
   label: PropTypes.any,
   error: PropTypes.string,
   touched: PropTypes.bool,
+  className: PropTypes.string,
   children: PropTypes.any.isRequired,
 };
 

src/components/FormField/FormField.scss

@@ -2,6 +2,16 @@
   width: 100%;
   margin: 15px 0 0px;
 }
+:global {
+	.customField {
+	  margin: 0;
+	  &.error {
+	  	> div:first-child {
+	    	border: 1px solid red;
+	    }
+	  }
+	}
+}
 
 .label {
   margin-bottom: 15px;

src/components/Header/Header.jsx

@@ -33,9 +33,9 @@ export const Header = ({location, selectedCategory, categories, user, notificati
               <ul>
                 <li className={currentRoute === 'Dashboard' ? 'active' : null}><Link to="/dashboard">Dashboard</Link></li>
                 <li className={currentRoute === 'Requests' ? 'active' : null}><Link to="/my-request">Requests</Link></li>
-                <li className={currentRoute === 'MyDrones' ? 'active' : null}>My Drones</li>
-                <li className={currentRoute === 'MyServices' ? 'active' : null}>My Services</li>
-                <li className={currentRoute === 'Analytics' ? 'active' : null}>Analytics</li>
+                <li className={currentRoute === 'My Drones' ? 'active' : null}><Link to="/my-drone" activeClassName="active">My Drones</Link></li>
+                <li className={currentRoute === 'My Services' ? 'active' : null}><Link to="/my-services" activeClassName="active">My Services</Link></li>
+                <li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
                 <li className={currentRoute === 'DroneMap' ? 'active' : null}><Link to="/drones-map">Drone Traffic</Link></li>
                 <li className={currentRoute === 'MissionPlanner' ? 'active' : null}><Link to="/mission-planner">MissionPlanner</Link></li>
               </ul>
@@ -46,13 +46,22 @@ export const Header = ({location, selectedCategory, categories, user, notificati
       <li styleName="notifications">
         {notifications.length > 0 && <span styleName="counter">{notifications.length}</span>}
       </li>
-      <li>
-        <Dropdown title={selectedCategory}>
-          <ul>
-            {categories.map((item, i) => <li key={i}><a href="javascript:">{item.name}</a></li>)}
-          </ul>
-        </Dropdown>
-      </li>
+      {(() => {
+        const currentRoute = routes[routes.length - 1].name;
+        if (currentRoute === 'ServiceRequest') {
+          return (
+            <li>
+              <Dropdown title={selectedCategory}>
+                <ul>
+                  {categories.map((item, i) => <li key={i}><a href="javascript:">{item.name}</a></li>)}
+                </ul>
+              </Dropdown>
+            </li>
+          );
+        }
+        return (<span />);
+      })()
+      }
       <li styleName="user">
         <Dropdown title={<span>Welcome,<br />{user.name}e</span>}>
           <ul>

src/components/Header/Header.scss

@@ -55,7 +55,18 @@
           flex: 1;
 
           > a {
+            font-size: 14px;
             color: #fff;
+            height: 60px;
+            display: -ms-flexbox;
+            display: flex;
+            -ms-flex-align: center;
+            align-items: center;
+            padding: 8px 8px 0;
+            border-bottom: 8px solid transparent;
+            &:hover, &:focus {
+              border-bottom: 8px solid #315b95;
+            }
           }
 
         } 

src/components/MapLegends/MapLegends.jsx

@@ -2,7 +2,12 @@ import React, { PropTypes } from 'react';
 import CSSModules from 'react-css-modules';
 import styles from './MapLegends.scss';
 
-export const MapLegends = ({ distance }) => (
+
+/*
+* MapLegends
+*/
+
+export const MapLegends = ({distance}) => (
   <div styleName="map-legends">
     <div styleName="location">
       <i styleName="icon-drone" />

src/components/TextareaField/TextareaField.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import _ from 'lodash';
+import styles from './TextareaField.scss';
+
+export const TextareaField = (props) => (
+  <div styleName="text-field">
+    <textarea {..._.pick(props, 'type', 'value', 'onChange')} />
+  </div>
+);
+
+TextareaField.defaultProps = {
+  type: 'text',
+};
+
+export default CSSModules(TextareaField, styles);

src/components/TextareaField/TextareaField.scss

@@ -0,0 +1,14 @@
+.text-field {
+  width: 100%;
+  border: 1px solid #ebebeb;
+  
+  textarea {
+    width: 100%;
+    padding: 10px;
+    resize: none;
+    background: white;
+    color: black;
+    border: none;
+    min-height: 265px;
+  }
+}

src/components/TextareaField/index.js

@@ -0,0 +1,3 @@
+import TextareaField from './TextareaField';
+
+export default TextareaField;

src/containers/HeaderContainer.js

@@ -3,4 +3,4 @@ import { connect } from 'react-redux';
 
 const mapState = (state) => state.global;
 
-export default connect(mapState)(Header);
+export default connect(mapState, {})(Header);

src/containers/HeaderContainer2.js

@@ -0,0 +1,6 @@
+import Header2 from 'components/Header2';
+import { connect } from 'react-redux';
+
+const mapState = (state) => state.global;
+
+export default connect(mapState, {})(Header2);

src/layouts/CoreLayout/CoreLayout.jsx

@@ -1,16 +1,18 @@
 import React, { PropTypes } from 'react';
 import CSSModules from 'react-css-modules';
-import Breadcrumbs from 'react-breadcrumbs';
 import HeaderContainer from 'containers/HeaderContainer';
+import Breadcrumbs from 'react-breadcrumbs';
 import Footer from 'components/Footer';
 import styles from './CoreLayout.scss';
 
 export const CoreLayout = ({children, routes, params}) => (
   <div styleName="core-layout">
     <HeaderContainer routes={routes} />
+
     <div className="breadcrumb-container">
       <Breadcrumbs routes={routes} params={params} excludes={['CoreLayout', 'ServiceRequest']} />
     </div>
+
     <div styleName="content">
       {children}
     </div>