Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
enggar_ganteng
2019-01-05 19:09:29 +07:00
parent 8a150bc8ee 1b96a3134b
commit 5eed9f9ef9
2 changed files with 357 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

577
src/common/pages/App/index.js
View File

@@ -43,6 +43,7 @@ import Alert from "../../components/Alert";
import EmptyComponent from '../EmptyComponent'; import EmptyComponent from '../EmptyComponent';
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
import faker from 'faker'; import faker from 'faker';
import { Route as RouteDOM } from 'react-router-dom'
faker.locale = 'id_ID'; faker.locale = 'id_ID';
@inject("appstate") @inject("appstate")
@@ -316,57 +317,59 @@ export default class App extends React.Component {
// const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/logo_ikan.png" : this.http.appendImagePath(this.settingStore.setting.icon); // const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/logo_ikan.png" : this.http.appendImagePath(this.settingStore.setting.icon);
const applicationIcon = "/assets/images/logo_ikan.png"; const applicationIcon = "/assets/images/logo_ikan.png";
let onNotifRowClick = (record)=>{ let onNotifRowClick = (record) => {
// if(record.notification.type == 'order_seller' && _.get(record,'notification.additional_data.user_order_store_id',false) != false){ // if(record.notification.type == 'order_seller' && _.get(record,'notification.additional_data.user_order_store_id',false) != false){
// return `${LINKS.ORDER}/${record.notification.additional_data.user_order_store_id}`; // return `${LINKS.ORDER}/${record.notification.additional_data.user_order_store_id}`;
// } // }
// else if(record.notification.type == 'order_seller' && _.get(record,'notification.additional_data.user_order_store_id',false) == false){ // else if(record.notification.type == 'order_seller' && _.get(record,'notification.additional_data.user_order_store_id',false) == false){
// return `${LINKS.ORDER}`; // return `${LINKS.ORDER}`;
// } // }
return `${LINKS.ORDER}`; return `${LINKS.ORDER}`;
} }
return ( return (
<PrintProvider> <PrintProvider>
<NoPrint> <NoPrint>
<div className="app-container"> <div className="app-container">
<Helmet> <Helmet>
<meta charSet="utf-8"/> <meta charSet="utf-8"/>
<title>Marketplace</title> <title>Marketplace</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="icon" type="image/png" href={applicationIcon} sizes="96x96"/> <link rel="icon" type="image/png" href={applicationIcon} sizes="96x96"/>
</Helmet> </Helmet>
<ButterToast trayPosition="bottom-right"/> <ButterToast trayPosition="bottom-right"/>
<Snackbar <Snackbar
open={this.globalUI.snackbarVisibility} open={this.globalUI.snackbarVisibility}
message={this.globalUI.snackbarMessage} message={this.globalUI.snackbarMessage}
autoHideDuration={3000}/> autoHideDuration={3000}/>
<Dialog <Dialog
style={{margin: 'auto'}} style={{margin: 'auto'}}
open={this.globalUI.loadingVisibility}> open={this.globalUI.loadingVisibility}>
<div style={{textAlign: 'center'}}> <div style={{textAlign: 'center'}}>
<LoadingDialog/> <LoadingDialog/>
</div> </div>
</Dialog> </Dialog>
<DepositDialog/> <DepositDialog/>
<WithdrawDialog/> <WithdrawDialog/>
<Toolbar className="toolbarAkunTiket"> <Toolbar className="toolbarAkunTiket">
<ToolbarGroup> <ToolbarGroup>
<IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus/></IconButton> <IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus/></IconButton>
{/* <ToolbarTitle className="show-on-small marketplace-toolbarTitle" style={{color: '#424770'}} {/* <ToolbarTitle className="show-on-small marketplace-toolbarTitle" style={{color: '#424770'}}
text={"Store Admin"}/> */} 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}}/> <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/>*/}
{/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed" {/*</IconButton>*/}
{/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
style={{marginRight: (window.innerWidth < 600) ? 2 : 10}} style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "clock-circle")}> onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "clock-circle")}>
<Icon type="clock-circle"/> <span className="hide-on-small-only">{moment().format('h:mm:ss A')}</span> <Icon type="clock-circle"/> <span className="hide-on-small-only">{moment().format('h:mm:ss A')}</span>
@@ -378,49 +381,49 @@ export default class App extends React.Component {
<Icon type="environment"/><span className="hide-on-small-only">{this.user.userGeolocation.ip}</span> <Icon type="environment"/><span className="hide-on-small-only">{this.user.userGeolocation.ip}</span>
</Button> */} </Button> */}
<Link onClick={this <Link onClick={this
.changeRoute .changeRoute
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
// leftIcon={<img src="/assets/images/icon/chart.png"/>} // leftIcon={<img src="/assets/images/icon/chart.png"/>}
className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
className="menuAkun">Dashboard</span></MenuItem></Link> className="menuAkun">Dashboard</span></MenuItem></Link>
<Link onClick={this <Link onClick={this
.changeRoute .changeRoute
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
// leftIcon={<img src="/assets/images/icon/flight.png"/>} // leftIcon={<img src="/assets/images/icon/flight.png"/>}
className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
className="menuAkun">Flight</span></MenuItem></Link> className="menuAkun">Flight</span></MenuItem></Link>
<Link onClick={this <Link onClick={this
.changeRoute .changeRoute
.bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem .bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem
// leftIcon={<img src="/assets/images/icon/hotel.png"/>} // leftIcon={<img src="/assets/images/icon/hotel.png"/>}
className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span
className="menuAkun">Hotel</span></MenuItem></Link> className="menuAkun">Hotel</span></MenuItem></Link>
<Link onClick={this <Link onClick={this
.changeRoute .changeRoute
.bind(this, '/app/car')} to={LINKS.CAR}><MenuItem .bind(this, '/app/car')} to={LINKS.CAR}><MenuItem
// leftIcon={<img src="/assets/images/icon/car.png"/>} // leftIcon={<img src="/assets/images/icon/car.png"/>}
className={(this.state.selectedMenu === '/app/car') ? "menuAkunItem active" : 'menuAkunItem'}><span className={(this.state.selectedMenu === '/app/car') ? "menuAkunItem active" : 'menuAkunItem'}><span
className="menuAkun">Car</span></MenuItem></Link> className="menuAkun">Car</span></MenuItem></Link>
<Link onClick={this <Link onClick={this
.changeRoute .changeRoute
.bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem .bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem
// leftIcon={<img src="/assets/images/icon/product.png"/>} // leftIcon={<img src="/assets/images/icon/product.png"/>}
className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
className="menuAkun">Shop</span></MenuItem></Link> className="menuAkun">Shop</span></MenuItem></Link>
<Link onClick={this <Link onClick={this
.changeRoute .changeRoute
.bind(this, '/app/vouchers')} to={LINKS.VOUCHERS}><MenuItem .bind(this, '/app/vouchers')} to={LINKS.VOUCHERS}><MenuItem
// leftIcon={<img src="/assets/images/icon/product.png"/>} // leftIcon={<img src="/assets/images/icon/product.png"/>}
className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
className="menuAkun">Vouchers</span></MenuItem></Link> className="menuAkun">Vouchers</span></MenuItem></Link>
{/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed" {/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
style={{marginRight: (window.innerWidth < 600) ? 2 : 10}} style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "calendar")}> onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "calendar")}>
<Icon type="calendar"/><span className="hide-on-small-only">{this.user.userGeolocation.time_zone}</span> <Icon type="calendar"/><span className="hide-on-small-only">{this.user.userGeolocation.time_zone}</span>
@@ -433,220 +436,246 @@ export default class App extends React.Component {
className="hide-on-small-only">{this.user.userGeolocation.latitude}, {this.user.userGeolocation.longitude}</span> className="hide-on-small-only">{this.user.userGeolocation.latitude}, {this.user.userGeolocation.longitude}</span>
</Button> */} </Button> */}
</ToolbarGroup> </ToolbarGroup>
<ToolbarGroup> <ToolbarGroup>
<IconMenu <div className={'containerWalletBar'}>
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}} <div className={'containerVoucher'}>
targetOrigin={{vertical: 'top', horizontal: 'right'}} <p className={'titleVoucher'}>Voucher</p>
onClick={()=>this.notificationStore.readAll()} <RouteDOM render={({ history}) => (
iconButtonElement={ <p onClick={() => history.push(LINKS.WALLET)} className={'textVoucher'}>
<div> <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
{userData.role === 'admin' ? ( </p>
<div> )} />
{this.notificationStore.unread_notif === 0 ? </div>
<IconButton className="menuAkunItem" tooltip="Notification center" <div className={'containerPoints'}>
tooltipPosition="bottom-center"> <p className={'titlePoints'}>Points</p>
<ShoppingCart/> <RouteDOM render={({ history}) => (
</IconButton> : <p onClick={() => history.push(LINKS.WALLET)} className={'textPoints'}>
<Badge <NumberFormat value={(15000)} displayType={'text'} thousandSeparator={true}/>
badgeContent={this.notificationStore.unread_notif} </p>
primary={true} )} />
badgeStyle={{top: 15, right: 12}} </div>
>
<IconButton className="menuAkunItem" tooltip="Notification center"
tooltipPosition="bottom-center">
<ShoppingCart/>
</IconButton>
</Badge>
}
</div>
) : (
<div>
{this.notificationStore.unread_notif === 0 ?
<IconButton className="menuAkunItem" tooltip="Notification center"
tooltipPosition="bottom-center">
<ShoppingCart/>
</IconButton> :
<Badge
badgeContent={this.notificationStore.unread_notif}
primary={true}
badgeStyle={{top: 15, right: 12}}
>
<IconButton className="menuAkunItem" tooltip="Notification center"
tooltipPosition="bottom-center">
<ShoppingCart/>
</IconButton>
</Badge>
}
</div>
)}
</div> </div>
}
>
<List>
{
(this.notificationStore.list.length) ?
this.notificationStore.list.slice(0, 5).map((item, index) => {
return (
<Link to={onNotifRowClick(item)}>
<ListItem
// leftAvatar={<Avatar src="images/ok-128.jpg" />}
primaryText={item.notification.title}
secondaryText={
<div>
<p>
<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>
}
secondaryTextLines={2}
/>
</Link>
);
}) : <EmptyComponent width="" image="default4" type="empty" header="" content="No notification yet! "/>
}
<Link to={`${LINKS.CART_DETAIL}`}>
<ListItem
primaryText={
<div style={{textAlign:'center'}}>
<p>View All</p>
</div>
}
/>
</Link>
</List>
</IconMenu>
<IconMenu <IconMenu
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}} anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
targetOrigin={{vertical: 'top', horizontal: 'right'}} targetOrigin={{vertical: 'top', horizontal: 'right'}}
onClick={()=>this.notificationStore.readAll()} onClick={() => this.notificationStore.readAll()}
iconButtonElement={ iconButtonElement={
<div>
{userData.role === 'admin' ? (
<div> <div>
{this.notificationStore.unread_notif === 0 ? {userData.role === 'admin' ? (
<IconButton className="menuAkunItem" tooltip="Notification center" <div>
tooltipPosition="bottom-center"> {this.notificationStore.unread_notif === 0 ?
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/> <IconButton className="menuAkunItem" tooltip="Notification center"
</IconButton> : tooltipPosition="bottom-center">
<Badge <ShoppingCart/>
badgeContent={this.notificationStore.unread_notif} </IconButton> :
primary={true} <Badge
badgeStyle={{top: 15, right: 12}} badgeContent={this.notificationStore.unread_notif}
> primary={true}
<IconButton className="menuAkunItem" tooltip="Notification center" badgeStyle={{top: 15, right: 12}}
tooltipPosition="bottom-center"> >
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/> <IconButton className="menuAkunItem" tooltip="Notification center"
</IconButton> tooltipPosition="bottom-center">
</Badge> <ShoppingCart/>
} </IconButton>
</div> </Badge>
) : (
<div>
{this.notificationStore.unread_notif === 0 ?
<IconButton className="menuAkunItem" tooltip="Notification center"
tooltipPosition="bottom-center">
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
</IconButton> :
<Badge
badgeContent={this.notificationStore.unread_notif}
primary={true}
badgeStyle={{top: 15, right: 12}}
>
<IconButton className="menuAkunItem" tooltip="Notification center"
tooltipPosition="bottom-center">
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
</IconButton>
</Badge>
}
</div>
)}
</div>
}
>
<List>
{
(this.notificationStore.list.length) ?
this.notificationStore.list.slice(0, 5).map((item, index) => {
return (
<Link to={onNotifRowClick(item)}>
<ListItem
// leftAvatar={<Avatar src="images/ok-128.jpg" />}
primaryText={item.notification.title}
secondaryText={
<div>
<p>
<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>
} }
secondaryTextLines={2}
/>
</Link>
);
}) : <EmptyComponent width="" image="default4" type="empty" header="" content="No notification yet! "/>
}
<Link to={`${LINKS.CART_DETAIL}`}>
<ListItem
primaryText={
<div style={{textAlign:'center'}}>
<p>View All</p>
</div> </div>
} ) : (
/> <div>
</Link> {this.notificationStore.unread_notif === 0 ?
</List> <IconButton className="menuAkunItem" tooltip="Notification center"
</IconMenu> tooltipPosition="bottom-center">
<ShoppingCart/>
</IconButton> :
<Badge
badgeContent={this.notificationStore.unread_notif}
primary={true}
badgeStyle={{top: 15, right: 12}}
>
<IconButton className="menuAkunItem" tooltip="Notification center"
tooltipPosition="bottom-center">
<ShoppingCart/>
</IconButton>
</Badge>
}
</div>
)}
<IconMenu </div>
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
targetOrigin={{vertical: 'top', horizontal: 'right'}}
iconButtonElement={
<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/>
} }
>
<List>
{
(this.notificationStore.list.length) ?
this.notificationStore.list.slice(0, 5).map((item, index) => {
return (
<Link to={onNotifRowClick(item)}>
<ListItem
// leftAvatar={<Avatar src="images/ok-128.jpg" />}
primaryText={item.notification.title}
secondaryText={
<div>
<p>
<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>
}
secondaryTextLines={2}
/>
</Link>
);
}) : <EmptyComponent width="" image="default4" type="empty" header=""
content="No notification yet! "/>
}
<Link to={`${LINKS.CART_DETAIL}`}>
<ListItem
primaryText={
<div style={{textAlign: 'center'}}>
<p>View All</p>
</div>
}
/>
</Link>
</List>
</IconMenu>
</IconButton> <IconMenu
} anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
><List> targetOrigin={{vertical: 'top', horizontal: 'right'}}
<ListItem onClick={() => this.notificationStore.readAll()}
style={{padding: '0px 16px 0px', fontSize: 14}} iconButtonElement={
disabled={true} <div>
primaryText={<span style={{fontWeight: 500}}>{this.authStore.userProfile.username || 'Username'}</span>} {userData.role === 'admin' ? (
secondaryText={<p style={{fontWeight: 400}}>{_.capitalize(this.authStore.userProfile.role) || 'role'}</p>} <div>
/> {this.notificationStore.unread_notif === 0 ?
</List> <IconButton className="menuAkunItem" tooltip="Notification center"
<Divider/> tooltipPosition="bottom-center">
<Link onClick={this <img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
.changeRoute </IconButton> :
.bind(this, '/app/transaction')} to={LINKS.TRANSACTION}> <MenuItem style={{fontSize: 14}} <Badge
primaryText="Transaction"/></Link> badgeContent={this.notificationStore.unread_notif}
<Link onClick={this primary={true}
.changeRoute badgeStyle={{top: 15, right: 12}}
.bind(this, '/app/profile')} to={LINKS.PROFILE}> <MenuItem style={{fontSize: 14}} >
primaryText="Profile"/></Link> <IconButton className="menuAkunItem" tooltip="Notification center"
<MenuItem onClick={this.willLogout.bind(this)} style={{fontSize: 14}} primaryText="Sign out"/> tooltipPosition="bottom-center">
</IconMenu> <img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
</ToolbarGroup> </IconButton>
</Toolbar> </Badge>
}
</div>
) : (
<div>
{this.notificationStore.unread_notif === 0 ?
<IconButton className="menuAkunItem" tooltip="Notification center"
tooltipPosition="bottom-center">
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
</IconButton> :
<Badge
badgeContent={this.notificationStore.unread_notif}
primary={true}
badgeStyle={{top: 15, right: 12}}
>
<IconButton className="menuAkunItem" tooltip="Notification center"
tooltipPosition="bottom-center">
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
</IconButton>
</Badge>
}
</div>
)}
<div className="mainContent" style={{ </div>
// paddingLeft: (window.innerWidth < 600) ? '0px' : '50px', }
// marginLeft: (window.innerWidth < 600) ? 'auto' : '50px', >
// marginRight: (window.innerWidth < 600) ? '0' : '50px', <List>
}}> {
<div className="try"/> (this.notificationStore.list.length) ?
<Route/> this.notificationStore.list.slice(0, 5).map((item, index) => {
</div> return (
<Link to={onNotifRowClick(item)}>
<ListItem
// leftAvatar={<Avatar src="images/ok-128.jpg" />}
primaryText={item.notification.title}
secondaryText={
<div>
<p>
<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>
}
secondaryTextLines={2}
/>
</Link>
);
}) : <EmptyComponent width="" image="default4" type="empty" header=""
content="No notification yet! "/>
}
<Link to={`${LINKS.CART_DETAIL}`}>
<ListItem
primaryText={
<div style={{textAlign: 'center'}}>
<p>View All</p>
</div>
}
/>
</Link>
</List>
</IconMenu>
</div> <IconMenu
</NoPrint> anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
targetOrigin={{vertical: 'top', horizontal: 'right'}}
iconButtonElement={
<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/>
}
</IconButton>
}
><List>
<ListItem
style={{padding: '0px 16px 0px', fontSize: 14}}
disabled={true}
primaryText={<span
style={{fontWeight: 500}}>{this.authStore.userProfile.username || 'Username'}</span>}
secondaryText={<p
style={{fontWeight: 400}}>{_.capitalize(this.authStore.userProfile.role) || 'role'}</p>}
/>
</List>
<Divider/>
<Link onClick={this
.changeRoute
.bind(this, '/app/transaction')} to={LINKS.TRANSACTION}> <MenuItem style={{fontSize: 14}}
primaryText="Transaction"/></Link>
<Link onClick={this
.changeRoute
.bind(this, '/app/profile')} to={LINKS.PROFILE}> <MenuItem style={{fontSize: 14}}
primaryText="Profile"/></Link>
<MenuItem onClick={this.willLogout.bind(this)} style={{fontSize: 14}} primaryText="Sign out"/>
</IconMenu>
</ToolbarGroup>
</Toolbar>
<div className="mainContent" style={{
// paddingLeft: (window.innerWidth < 600) ? '0px' : '50px',
// marginLeft: (window.innerWidth < 600) ? 'auto' : '50px',
// marginRight: (window.innerWidth < 600) ? '0' : '50px',
}}>
<div className="try"/>
<Route/>
</div>
</div>
</NoPrint>
</PrintProvider> </PrintProvider>
); );
} }

54
src/common/pages/App/style.scss
View File

@@ -1,4 +1,57 @@
.app-container { .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 { .mainContent {
width: calc(100vw - 14vw); width: calc(100vw - 14vw);
margin-left: 2.5vw; margin-left: 2.5vw;
@@ -93,6 +146,7 @@
} }
.menuAkunItem { .menuAkunItem {
padding: 0px;
transition: all 0.2s ease !important; transition: all 0.2s ease !important;
} }