empty state dan navbar

src/common/pages/App/index.js

@@ -466,7 +466,7 @@ export default class App extends React.Component {
                       {userData.role === 'admin' ? (
                         <div>
                           {this.notificationStore.unread_notif === 0 ?
-                            <IconButton className="menuAkunItem" tooltip="Notification center"
+                            <IconButton className="menuAkunItem" tooltip="Cart center"
                                         tooltipPosition="bottom-center">
                               <ShoppingCart/>
                             </IconButton> :
@@ -475,7 +475,7 @@ export default class App extends React.Component {
                               primary={true}
                               badgeStyle={{top: 15, right: 12}}
                             >
-                              <IconButton className="menuAkunItem" tooltip="Notification center"
+                              <IconButton className="menuAkunItem" tooltip="Cart center"
                                           tooltipPosition="bottom-center">
                                 <ShoppingCart/>
                               </IconButton>
@@ -485,7 +485,7 @@ export default class App extends React.Component {
                       ) : (
                         <div>
                           {this.notificationStore.unread_notif === 0 ?
-                            <IconButton className="menuAkunItem" tooltip="Notification center"
+                            <IconButton className="menuAkunItem" tooltip="Cart center"
                                         tooltipPosition="bottom-center">
                               <ShoppingCart/>
                             </IconButton> :
@@ -494,7 +494,7 @@ export default class App extends React.Component {
                               primary={true}
                               badgeStyle={{top: 15, right: 12}}
                             >
-                              <IconButton className="menuAkunItem" tooltip="Notification center"
+                              <IconButton className="menuAkunItem" tooltip="Cart center"
                                           tooltipPosition="bottom-center">
                                 <ShoppingCart/>
                               </IconButton>
@@ -615,7 +615,7 @@ export default class App extends React.Component {
                             </Link>
                           );
                         }) : <EmptyComponent width="" image="default4" type="empty" header=""
-                                             content="No notification yet! "/>
+                                             content="No item yet! "/>
                     }
                     <Link to={`${LINKS.CART_DETAIL}`}>
                       <ListItem

src/common/pages/App/style.scss

@@ -4,12 +4,14 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    width: 11vw;
+    // width: 11vw;
     height: 70px;
     align-items: center;
     margin-right: 15px;
 
     .containerVoucher{
+      margin-left: 16px;
+      margin-right: 16px;
 
       .titleVoucher{
         margin-bottom: 0px;
@@ -124,7 +126,7 @@
     font-size: 13px !important;
     font-weight: 500 !important;
     color: #424770 !important;
-    margin-left: -20px !important;
+    // margin-left: -20px !important;
     transition: all 0.2s ease;
   }
 
@@ -146,7 +148,7 @@
   }
 
   .menuAkunItem {
-    padding: 0px;
+    padding: 0px 16px;
     transition: all 0.2s ease !important;
   }
 

src/common/pages/EmptyComponent/index.js

@@ -47,7 +47,25 @@ export default class EmptyComponent extends React.Component {
           </div>
         </div>
       );
-    }
+		}
+		else if(type == "default4"){
+	  	return(
+	  		<div style={{textAlign: 'center', padding: '20px'}}>
+	  			<style>
+					@import url('https://fonts.googleapis.com/css?family=Raleway');
+				</style>
+	  			<div className="row">
+	  				<div className="col m12">
+	  					<img src="../../../../assets/images/emptyState/coupon.png" width="200px" height="200px"/>
+	  				</div>
+	  				<div className="col m12">
+	  					<h1>{this.props.header}</h1>
+	  					<h3 style={{marginTop: '10px', color: '#808080', fontFamily: 'Raleway, sans-serif'}}>{this.props.content}</h3>
+	  				</div>
+	  			</div>
+	  		</div>
+	  	);
+  	}
   	else if(type == "404"){
 	  	return(
 	  		<div style={{textAlign: 'center', padding: '20px'}}>

src/common/pages/Vouchers/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import {inject, observer} from 'mobx-react';
 import {Link} from 'react-router';
-import {Affix, Card, Slider, Select, Col, Row, Carousel } from 'antd';
+import {Affix, Card, Slider, Select, Col, Row } from 'antd';
 import {Tab, Tabs} from 'material-ui';
 import './style.scss';
 import {ItemCard} from "./ItemCard";
 import ModalVouchersComponent from "./Modal";
+import EmptyComponent from '../EmptyComponent';
 
 const Option = Select.Option;
 @inject('appstate')
@@ -186,14 +187,6 @@ export default class VouchersComponent extends React.Component {
 
     return (
       <div className="voucher">
-        {/*<div className="row">*/}
-        {/*<Carousel autoplay>*/}
-        {/*<div style={{width:960,height:239}}><img alt="Banner 1" style={{width:'100%',height:'100%'}} src="https://ecs7.tokopedia.net/img/banner/2018/12/18/41966928/41966928_03c39a82-9ec8-45c3-8184-2d1a0fd810cd.jpg" /></div>*/}
-        {/*<div style={{width:960,height:239}}><img alt="Banner 2" style={{width:'100%',height:'100%'}} src="https://ecs7.tokopedia.net/img/banner/2019/1/4/42484317/42484317_e6f6cdf6-90a4-4c21-86fe-c7910982a8e9.jpg" /></div>*/}
-        {/*<div style={{width:960,height:239}}><img alt="Banner 3" style={{width:'100%',height:'100%'}} src="https://ecs7.tokopedia.net/img/banner/2019/1/4/42484317/42484317_e6f6cdf6-90a4-4c21-86fe-c7910982a8e9.jpg" /></div>*/}
-        {/*<div style={{width:960,height:239}}><img alt="Banner 4" style={{width:'100%',height:'100%'}} src="https://ecs7.tokopedia.net/img/banner/2019/1/4/42484317/42484317_e6f6cdf6-90a4-4c21-86fe-c7910982a8e9.jpg" /></div>*/}
-        {/*</Carousel>*/}
-        {/*</div>*/}
         <div className="row">
           <div className="col l12 m12 s12 padding">
             <p className={'pageTitle'}>
@@ -201,11 +194,17 @@ export default class VouchersComponent extends React.Component {
             </p>
 
             <Row gutter={10}>
-              {data.map((item, index) => {
+              {
-                return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
+                (data.length > 0) ?
-                  <ItemCard data={item}/>
+                data.map((item, index) => {
-                </Col>)
+                  return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
-              })}
+                    <ItemCard data={item}/>
+                  </Col>)
+                })
+                : (
+                  <EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
+                )
+              }
             </Row>
 
             <ModalVouchersComponent

src/common/pages/Vouchers/style.scss

@@ -30,16 +30,4 @@
     margin-bottom: -10px;
   }
 
-  .ant-carousel .slick-slide {
-    text-align: center;
-    height: 160px;
-    line-height: 160px;
-    background: #364d79;
-    overflow: hidden;
-  }
-  
-  .ant-carousel .slick-slide h3 {
-    color: #fff;
-  }
-
 }

src/common/routes.js

@@ -138,10 +138,13 @@ export default class Routes extends React.Component {
     const PrivateRoute = ({component: Component, ...rest}) => (
       <Route
         {...rest}
-        render={(props) => this.authStore.isLoggedIn === true
+        render={
+          (props) => true === true
           ? (<Component {...props}/>)
           : (<Redirect to={{pathname : LINKS.LOGIN}}/>
-          )}/>
+          )
+        }
+          />
     )
 
     return (