update: Voucher and Points info at navbar

src/common/pages/App/index.js

@@ -360,10 +360,12 @@ export default class App extends React.Component {
                 {/* <ToolbarTitle className="show-on-small marketplace-toolbarTitle" style={{color: '#424770'}}
                           text={"Store Admin"}/> */}
 
-            <img style={{width: 150, height: 50}} src={'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png'} />
+                <img style={{width: 150, height: 50}}
+                     src={'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png'}/>
 
                 <ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>
-            <IconButton className="hide-on-small-only" style={{marginRight: 10}} onClick={() => this.toggleDrawer()}>
+                <IconButton className="hide-on-small-only" style={{marginRight: 10}}
+                            onClick={() => this.toggleDrawer()}>
                   <IconMenus/>
                 </IconButton>
                 {/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
@@ -435,6 +437,21 @@ export default class App extends React.Component {
 
               </ToolbarGroup>
               <ToolbarGroup>
+                <div className={'containerWalletBar'}>
+                  <div className={'containerVoucher'}>
+                    <p className={'titleVoucher'}>Voucher</p>
+                    <p className={'textVoucher'}>
+                      <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
+                    </p>
+                  </div>
+                  <div className={'containerPoints'}>
+                    <p className={'titlePoints'}>Points</p>
+                    <p className={'textPoints'}>
+                      <NumberFormat value={(15000)} displayType={'text'} thousandSeparator={true}/>
+                    </p>
+                  </div>
+                </div>
+
                 <IconMenu
                   anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
                   targetOrigin={{vertical: 'top', horizontal: 'right'}}
@@ -496,7 +513,8 @@ export default class App extends React.Component {
                                 secondaryText={
                                   <div>
                                     <p>
-                                <span style={{color: darkBlack}}>{item.notification.description.substr(0,40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
+                                      <span
+                                        style={{color: darkBlack}}>{item.notification.description.substr(0, 40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
                                     </p>
                                     <p style={{fontSize: 10, color: black}}>{moment(item.created_at).fromNow()}</p>
                                   </div>
@@ -505,7 +523,8 @@ export default class App extends React.Component {
                               />
                             </Link>
                           );
-                  }) :  <EmptyComponent width="" image="default4" type="empty" header="" content="No notification yet! "/>
+                        }) : <EmptyComponent width="" image="default4" type="empty" header=""
+                                             content="No notification yet! "/>
                     }
                     <Link to={`${LINKS.CART_DETAIL}`}>
                       <ListItem
@@ -580,7 +599,8 @@ export default class App extends React.Component {
                                 secondaryText={
                                   <div>
                                     <p>
-                                <span style={{color: darkBlack}}>{item.notification.description.substr(0,40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
+                                      <span
+                                        style={{color: darkBlack}}>{item.notification.description.substr(0, 40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
                                     </p>
                                     <p style={{fontSize: 10, color: black}}>{moment(item.created_at).fromNow()}</p>
                                   </div>
@@ -589,7 +609,8 @@ export default class App extends React.Component {
                               />
                             </Link>
                           );
-                  }) :  <EmptyComponent width="" image="default4" type="empty" header="" content="No notification yet! "/>
+                        }) : <EmptyComponent width="" image="default4" type="empty" header=""
+                                             content="No notification yet! "/>
                     }
                     <Link to={`${LINKS.CART_DETAIL}`}>
                       <ListItem
@@ -607,7 +628,8 @@ export default class App extends React.Component {
                   anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
                   targetOrigin={{vertical: 'top', horizontal: 'right'}}
                   iconButtonElement={
-                <IconButton style={{width: 'auto', height: 'auto'}} iconStyle={{width: 35, height: 'auto',borderRadius: '45%'}}>
+                    <IconButton style={{width: 'auto', height: 'auto'}}
+                                iconStyle={{width: 35, height: 'auto', borderRadius: '45%'}}>
                       {!!this.profileStore.userProfile.photo ?
                         <img src={this.http.appendImagePath(this.profileStore.userProfile.photo)}/> : <IconUserCircle/>
                       }
@@ -618,8 +640,10 @@ export default class App extends React.Component {
                   <ListItem
                     style={{padding: '0px 16px 0px', fontSize: 14}}
                     disabled={true}
-                primaryText={<span style={{fontWeight: 500}}>{this.authStore.userProfile.username || 'Username'}</span>}
+                    primaryText={<span
-                secondaryText={<p style={{fontWeight: 400}}>{_.capitalize(this.authStore.userProfile.role) || 'role'}</p>}
+                      style={{fontWeight: 500}}>{this.authStore.userProfile.username || 'Username'}</span>}
+                    secondaryText={<p
+                      style={{fontWeight: 400}}>{_.capitalize(this.authStore.userProfile.role) || 'role'}</p>}
                   />
                 </List>
                   <Divider/>

src/common/pages/App/style.scss

@@ -1,4 +1,43 @@
 .app-container {
+
+  .containerWalletBar{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 11vw;
+    height: 70px;
+    align-items: center;
+    margin-right: 15px;
+
+    .containerVoucher{
+
+      .titleVoucher{
+        margin-bottom: 0px;
+        font-size: 0.65rem;
+      }
+
+      .textVoucher{
+        margin-bottom: 0px;
+        font-weight: 600;
+        color: #424770;
+      }
+    }
+
+    .containerPoints{
+
+      .titlePoints{
+        margin-bottom: 0px;
+        font-size: 0.65rem;
+      }
+
+      .textPoints{
+        margin-bottom: 0px;
+        font-weight: 600;
+        color: #424770;
+      }
+    }
+  }
+
   .mainContent {
     width: calc(100vw - 14vw);
     margin-left: 2.5vw;