Merge branch 'master' of gitlab.com:asacreative/redemption-point/new-frontend-customer-redemption-point

src/common/pages/App/index.js

@@ -43,6 +43,7 @@ import Alert from "../../components/Alert";
 import EmptyComponent from '../EmptyComponent';
 import NumberFormat from 'react-number-format';
 import faker from 'faker';
+import { Route as RouteDOM } from 'react-router-dom'
 
 faker.locale = 'id_ID';
 @inject("appstate")
@@ -360,12 +361,14 @@ 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}}*/}
-              <IconMenus/>
+                            {/*onClick={() => this.toggleDrawer()}>*/}
-            </IconButton>
+                  {/*<IconMenus/>*/}
+                {/*</IconButton>*/}
                 {/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
                     style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
                     onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "clock-circle")}>
@@ -435,6 +438,25 @@ export default class App extends React.Component {
 
               </ToolbarGroup>
               <ToolbarGroup>
+                <div className={'containerWalletBar'}>
+                  <div className={'containerVoucher'}>
+                    <p className={'titleVoucher'}>Voucher</p>
+                    <RouteDOM render={({ history}) => (
+                      <p onClick={() => history.push(LINKS.WALLET)} className={'textVoucher'}>
+                        <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
+                      </p>
+                    )} />
+                  </div>
+                  <div className={'containerPoints'}>
+                    <p className={'titlePoints'}>Points</p>
+                    <RouteDOM render={({ history}) => (
+                      <p onClick={() => history.push(LINKS.WALLET)} 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 +518,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 +528,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 +604,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 +614,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 +633,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 +645,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,57 @@
 .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;
+        transition: transform 200ms linear;
+        cursor: pointer;
+      }
+
+      .textVoucher:hover{
+        transform: translateY(-2px);
+        color: #6772e5;
+      }
+    }
+
+    .containerPoints{
+
+      .titlePoints{
+        margin-bottom: 0px;
+        font-size: 0.65rem;
+      }
+
+      .textPoints{
+        margin-bottom: 0px;
+        font-weight: 600;
+        color: #424770;
+        transition: transform 200ms linear;
+        cursor: pointer;
+      }
+
+      .textPoints:hover{
+        transform: translateY(-2px);
+        color: #6772e5;
+      }
+    }
+  }
+
   .mainContent {
     width: calc(100vw - 14vw);
     margin-left: 2.5vw;
@@ -93,6 +146,7 @@
   }
 
   .menuAkunItem {
+    padding: 0px;
     transition: all 0.2s ease !important;
   }