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

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

Browse Source
This commit is contained in:
enggar_ganteng 2019-01-06 00:37:38 +07:00
commit 75e7d19339
26 changed files with 390 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/emptyState/coupon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
assets/images/login/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
assets/images/logo-bankbtn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

2
package-lock.json generated
View File

@ -1,5 +1,5 @@
{
"name": "marketplace",
"name": "BTN",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,

4
package.json
View File

@ -1,5 +1,5 @@
{
"name": "marketplace",
"name": "BTN",
"version": "1.0.0",
"description": "Server-side rendering with mobx and react-router",
"main": "src/index.js",
@ -19,7 +19,7 @@
"author": "Asacreative",
"repository": {
"type": "git",
"url": "https://gitlab.com/asacreative/marketplace-admin.git"
"url": "https://gitlab.com/asacreative/redemption-point/new-frontend-customer-redemption-point"
},
"browserslist": [
"last 1 version",

4
public/index.html
View File

@ -2,9 +2,9 @@
<html>
<head>
<meta charset="utf-8">
<title>Marketplace</title>
<title>BTN</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="icon" type="image/png" href="/assets/images/logo_ikan.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/assets/images/logo-bankbtn.png" sizes="96x96" />
<style>
body {
visibility: hidden;

4
public/index.parcel.html
View File

@ -2,9 +2,9 @@
<html>
<head>
<meta charset="utf-8">
<title>Marketplace</title>
<title>BTN</title>
<meta id="viewport" name="viewport" content="width=1280">
<link rel="icon" type="image/png" href="/assets/images/logo_ikan.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/assets/images/logo-bankbtn.png" sizes="96x96" />
<style>
body {
visibility: hidden;

4
public/index.prod.html
View File

@ -2,9 +2,9 @@
<html>
<head>
<meta charset="utf-8">
<title>Marketplace</title>
<title>BTN</title>
<meta id="viewport" name="viewport" content="width=1280">
<link rel="icon" type="image/png" href="/assets/images/logo_ikan.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/assets/images/logo-bankbtn.png" sizes="96x96" />
<style>
body {
visibility: hidden;

4
public/index.test.html
View File

@ -2,9 +2,9 @@
<html>
<head>
<meta charset="utf-8">
<title>Marketplace</title>
<title>BTN</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="icon" type="image/png" href="/assets/images/logo_ikan.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/assets/images/logo-bankbtn.png" sizes="96x96" />
<style>
body {
visibility: hidden;

8
src/common/config/app.js
View File

@ -21,8 +21,12 @@ let type = 'akuntiket';
// apiUrl = "https://marketplace-sillyfish-staging-api.asacreative.com/v1/";
// imageUrl = "https://marketplace-sillyfish-staging-api.asacreative.com";
apiUrl = "https://marketplace-sillyfish-api.asacreative.com/v1/";
imageUrl = "https://marketplace-sillyfish-api.asacreative.com";
// apiUrl = "https://marketplace-sillyfish-api.asacreative.com/v1/";
// imageUrl = "https://marketplace-sillyfish-api.asacreative.com";
apiUrl = "https://giift-api.asacreative.com/";
imageUrl = "https://giift-api.asacreative.com";
type = 'localhost';
if(window.location.href.includes("localhost") || window.location.href.includes("marketplace-store")){
appUrl = 'http://localhost:7700'

16
src/common/pages/AcceptInvite/index.js
View File

@ -145,13 +145,13 @@ export default class AcceptInvite extends React.Component {
style={{marginRight: 10}}
/>
];
// 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 = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
const applicationIcon = "/assets/images/bankbtn.png";
return (
<div className="AcceptInvite">
<Helmet>
<meta charSet="utf-8"/>
<title>Marketplace</title>
<title>BTN</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="icon" type="image/png" href={applicationIcon} sizes="96x96"/>
</Helmet>
@ -168,7 +168,7 @@ export default class AcceptInvite extends React.Component {
marginRight: "auto",
marginLeft: "auto"
}} zDepth={1} circle={true}>
<img className="logo" src="/assets/images/logo_ikan.png"/>
<img className="logo" src="/assets/images/bankbtn.png"/>
</Paper>
<h2 style={{
color: '#275164',
@ -177,7 +177,7 @@ export default class AcceptInvite extends React.Component {
maxWidth: 500,
marginTop: 15,
marginBottom: 0
}}>Marketplace</h2>
}}>BTN</h2>
</div>
:
<div style={{textAlign: "center"}}>
@ -190,7 +190,7 @@ export default class AcceptInvite extends React.Component {
marginRight: "auto",
marginLeft: "auto"
}} zDepth={1} circle={true}>
<img className="logo" src={'/assets/images/logo_ikan.png'}/>
<img className="logo" src={'/assets/images/bankbtn.png'}/>
</Paper>
<h2 style={{
color: '#275164',
@ -211,7 +211,7 @@ export default class AcceptInvite extends React.Component {
marginRight: "auto",
marginLeft: "auto"
}} zDepth={1} circle={true}>
<img className="logo" src={'/assets/images/logo_ikan.png'}/>
<img className="logo" src={'/assets/images/bankbtn.png'}/>
</Paper>
<h2 style={{
color: '#275164',
@ -220,7 +220,7 @@ export default class AcceptInvite extends React.Component {
maxWidth: 500,
marginTop: 15,
marginBottom: 0
}}>Marketplace</h2>
}}>BTN</h2>
</div>
}
</div>

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

@ -314,8 +314,8 @@ export default class App extends React.Component {
// }
const {userData} = this.appstate;
// 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 = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
const applicationIcon = "/assets/images/bankbtn.png";
let onNotifRowClick = (record) => {
// if(record.notification.type == 'order_seller' && _.get(record,'notification.additional_data.user_order_store_id',false) != false){
@ -332,7 +332,7 @@ export default class App extends React.Component {
<div className="app-container">
<Helmet>
<meta charSet="utf-8"/>
<title>Marketplace</title>
<title>BTN</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="icon" type="image/png" href={applicationIcon} sizes="96x96"/>
</Helmet>
@ -457,52 +457,17 @@ export default class App extends React.Component {
</div>
</div>
{window.location.pathname.split("/")[2] == "shop" ? (
<IconMenu
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
targetOrigin={{vertical: 'top', horizontal: 'right'}}
onClick={() => this.notificationStore.readAll()}
iconButtonElement={
<div>
{userData.role === 'admin' ? (
<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"
<IconButton className="menuAkunItem" tooltip="Cart 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>
}
>
@ -542,6 +507,8 @@ export default class App extends React.Component {
</Link>
</List>
</IconMenu>
) : (<div/>)}
<IconMenu
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
@ -615,7 +582,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
@ -660,7 +627,11 @@ export default class App extends React.Component {
.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"/>
<Link onClick={this
.changeRoute
.bind(this, '/login')} to={LINKS.LOGIN}>
<MenuItem onClick={() => {}} style={{fontSize: 14}} primaryText="Sign out"/>
</Link>
</IconMenu>
</ToolbarGroup>
</Toolbar>

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

@ -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;
}
@ -178,7 +180,7 @@
.menuAkun {
letter-spacing: 0.03em;
margin-right: 20px;
// margin-right: 20px;
}

4
src/common/pages/ChangePassword/index.js
View File

@ -147,9 +147,9 @@ export default class ChangePassword extends React.Component {
return (
<div className="AcceptInvite">
<img className="logo" src="/assets/images/logo_ikan.png" style={{maxWidth : '200px'}}/>
<img className="logo" src="/assets/images/bankbtn.png" style={{maxWidth : '200px'}}/>
<h1 style={{color:'#275164'}}>5 Roti dan 2 Ikan</h1>
<h4 style={{color:'#55dab6'}}>Marketplace</h4>
<h4 style={{color:'#55dab6'}}>BTN</h4>
<Card style={{width:450, marginTop:'18px'}} className="cardLite">
<CardTitle className="align-center" title={<p style={{fontSize:14}}>Confirm Password</p>}>
<Divider style={{backgroundColor:'#48d8b2', width:'150px'}} className="margin-auto"/>

18
src/common/pages/EmptyComponent/index.js
View File

@ -46,6 +46,24 @@ export default class EmptyComponent extends React.Component {
</div>
</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"){

8
src/common/pages/ForgotPassword/index.js
View File

@ -83,8 +83,8 @@ export default class ForgotPasswordComponent extends React.Component {
/>
];
// 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 = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
const applicationIcon = "/assets/images/bankbtn.png";
return (
<div className="login">
<Helmet>
@ -106,7 +106,7 @@ export default class ForgotPasswordComponent extends React.Component {
marginRight: "auto",
marginLeft: "auto"
}} zDepth={1} circle={true}>
<img className="logo" src="/assets/images/logo_ikan.png"/>
<img className="logo" src="/assets/images/bankbtn.png"/>
</Paper>
<h2 style={{
color: '#275164',
@ -160,7 +160,7 @@ export default class ForgotPasswordComponent extends React.Component {
maxWidth: 500,
marginTop: 15,
marginBottom: 0
}}>Marketplace</h2>
}}>BTN</h2>
</div>
</div>
<Card style={{width: 350, marginTop: '18px'}} className="cardLite align-center">

255
src/common/pages/Login/index.js
View File

@ -1,11 +1,8 @@
import React from 'react';
import {Card, CardActions, CardText, CardTitle, Divider, Paper,RaisedButton, TextField,Dialog,FlatButton,} from 'material-ui';
import {TextField, RaisedButton} from 'material-ui';
import {inject, observer} from 'mobx-react';
import * as firebase from "firebase";
import './style.scss'
import {LINKS} from "../../routes";
import {getMobileOperatingSystem} from '../../stores/firebase';
import {Helmet} from "react-helmet";
@inject('appstate')
@ -17,256 +14,40 @@ export default class LoginComponent extends React.Component {
this.state = {
email: "",
password: "",
warningLogin : false,
warningLoginMessage : '',
notif:false,
};
this.defaultState = Object.assign({}, this.state);
this.authStore = props.appstate.auth;
this.http = props.appstate.http;
this.settingStore = props.appstate.setting;
}
componentDidMount() {
this.settingStore.getAll();
const firebase = require('firebase');
firebase.messaging().requestPermission()
.then(function () {
console.log('Notification permission granted.');
return firebase.messaging().getToken();
})
.then(currentToken => {
if (currentToken) {
console.log(currentToken, "user tokens");
localStorage.setItem('tokens', currentToken);
} else {
// Show permission request.
console.log('No Instance ID token available. Request permission to generate one.');
// Show permission UI.
}
});
}
handleTextFieldChange = (event, name) => {
this.setState({
[name]: event.target.value
});
};
login=(e)=>{
firebase.messaging().requestPermission()
.then(() => {
// alert('bisa')
// e.preventDefault();
var tokenNotif = localStorage.getItem('tokens');
this.authStore.login({
username: this.state.email,
password: this.state.password,
firebase_token: tokenNotif
})
.then(() => {
localStorage.setItem('isLoggedIn', true);
this.props.history.push(LINKS.DASHBOARD);
console.log(this.state.email + " is logging in..")
}).catch(err => {
console.log(err);
this.openWarningMessage(err.message);
});
})
.catch(error => {
this.setState({
notif:true
})
// alert('gk bisa')
})
}
openWarningMessage = (message)=>{
this.setState({
warningLoginMessage : message,
warningLogin : true
})
}
closeWarning = ()=>{
this.setState({
warningLogin : false
})
}
handleClose = ()=>{
this.setState({
notif : false
})
}
render() {
const actions = [
<RaisedButton
label={"Ok"}
primary={true}
onClick={()=>this.closeWarning()}
/>,
];
const actionsNotif = [
<RaisedButton
label="Done"
primary={true}
onClick={this.handleClose}
/>,
];
// const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/logo_ikan.png" : this.http.appendImagePath(this.settingStore.setting.icon);
const applicationIcon = "/assets/images/logo_ikan.png";
return (
<div className="login login-wrapper">
<Helmet>
<meta charSet="utf-8"/>
<title>{/*(this.settingStore.setting.name) ? this.settingStore.setting.name : ""*/'Marketplace'}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="icon" type="image/png" href={applicationIcon} sizes="96x96"/>
</Helmet>
<div style={{width: "100%"}}>
{/*
(this.settingStore.isIconEmpty) ?
<div style={{textAlign: "center"}}>
<Paper style={{
backgroundSize: "contain",
backgroundClip: "padding-box",
padding: 10,
height: 75, width: 75,
background: '#fff',
marginRight: "auto",
marginLeft: "auto"
}} zDepth={1} circle={true}>
<img className="logo" src="/assets/images/logo_ikan.png"/>
</Paper>
<h2 style={{
color: '#000',
marginRight: "auto",
marginLeft: "auto",
maxWidth: 500,
marginTop: 15,
marginBottom: 0
}}>5 Roti dan 2 Ikan</h2>
</div>
:
<div style={{textAlign: "center"}}>
<Paper style={{
backgroundSize: "contain",
backgroundClip: "padding-box",
padding: 10,
height: 75, width: 75,
background: '#fff',
marginRight: "auto",
marginLeft: "auto"
}} zDepth={1} circle={true}>
<img className="logo"
src={this.http.appendImagePath(this.settingStore.setting.icon)}/>
</Paper>
<h2 style={{
color: '#275164',
marginRight: "auto",
marginLeft: "auto",
maxWidth: 500,
marginTop: 15,
marginBottom: 0
}}>{this.settingStore.setting.name}</h2>
</div>
*/
}
<div style={{textAlign: "center"}}>
<Paper style={{
backgroundSize: "contain",
backgroundClip: "padding-box",
padding: 10,
height: 75, width: 75,
background: '#fff',
marginRight: "auto",
marginLeft: "auto"
}} zDepth={1} circle={true}>
<img className="logo" src={applicationIcon}/>
</Paper>
<h2 style={{
color: '#000',
marginRight: "auto",
marginLeft: "auto",
maxWidth: 500,
marginTop: 15,
marginBottom: 0
}}>Marketplace</h2>
</div>
</div>
<Card style={{width: 350, marginTop: '18px'}} className="cardLite align-center">
<CardTitle title={<p style={{fontSize: 14}}>Login to Store Admin Console</p>}>
<Divider style={{backgroundColor: 'rgba(171, 111, 48, 1)', width: '150px'}} className="margin-auto"/>
</CardTitle>
<div className="loginWrapper">
<div className={'formContainer'}>
<img className={'logoLogin'} src={'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png'} />
<p className={'textLogin'}>Login into our System</p>
<form>
<CardText>
<TextField
hintText="Email"
fullWidth={true}
name="email"
type="email"
value={this.state.email}
onChange={(event) => this.handleTextFieldChange(event, 'email')}
<div className={'formParent'}>
<div className={'inputContainer'}>
<input
className={'usernameForm'}
placeholder="Username"
/>
<TextField
hintText="Password"
name="password"
fullWidth={true}
<input
className={'passwordForm'}
placeholder="Password"
type="password"
value={this.state.password}
onChange={(event) => this.handleTextFieldChange(event, 'password')}
onKeyPress={(ev) => {
if (ev.key === 'Enter') {
// Do code here
this.login()
}
}}
/>
</CardText>
<CardActions>
<RaisedButton primary={true} label="Login To Your Account" onClick={this.login}/>
</CardActions>
<a style={{fontSize: 12, fontWeight: 500, display: 'block', margin: '18px 0px 30px'}}
onClick={() => this.props.history.push(LINKS.FORGOT_PASSWORD)}>Forgot Password</a>
</form>
</Card>
<Dialog
title="Error"
actions={actions}
modal={true}
open={this.state.warningLogin}
onRequestClose={() => this.closeWarning()}
>
{this.state.warningLoginMessage}
</Dialog>
<Dialog
title="Warning"
actions={actionsNotif}
open={this.state.notif}
autoScrollBodyContent={true}
modal={false}
>
<p>1. You must allow notification</p>
<div style={{textAlign:'center'}}>
<img src="/assets/images/notification.jpg" style={{height : '400px'}}/>
</div>
<p style={{marginTop:'1em'}}>2. Reload Page</p>
<div style={{textAlign:'center'}}>
<img style={{height: "400px"}} src="/assets/images/reload.jpg"/>
<button onClick={() => this.props.history.push(LINKS.DASHBOARD)} className={'buttonLogin'}>
Sign In
</button>
</div>
</div>
{/*<p>1. You must allow notification</p>
<img style={{width: "100%", height: "100%"}} src="/assets/images/notification.jpg"/>*/}
</Dialog>
</div>
)
}

135
src/common/pages/Login/style.scss
View File

@ -1,83 +1,82 @@
.login {
@import url('https://fonts.googleapis.com/css?family=Thasadith');
.loginWrapper{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
//background-color: #aaafff;
background-image: url("../../../../assets/images/login/background.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center bottom;
margin-top: -56px !important;
.formContainer{
display: flex;
flex-direction: column;
//background-size: cover;
//position: fixed;
//height: 100%;
//width: 100%;
//top:0;
//overflow: hidden;
.logo {
width: 100%;
margin-top: -17.5vh;
.logoLogin{
width: 200px;
height: auto;
align-self: center;
}
.background {
height: 100%;
overflow: hidden;
background: rgba(128, 0, 128, 0.82); /* fallback for old browsers */
background: -webkit-linear-gradient(to top, rgba(0, 204, 187, 0.86), rgba(43, 69, 230, 0.91), rgba(128, 0, 128, 0.92)); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, rgba(0, 204, 187, 0.86), rgba(43, 69, 230, 0.91), rgba(128, 0, 128, 0.92));
position: absolute;
width: 100%;
}
.ant-form-explain {
text-align: left;
}
.login-box {
position: absolute;
top: 0;
right: 0;
width: 460px;
height: 320px;
padding: 36px;
background-color: #1e2e4a;
box-shadow: 0 0 100px rgba(0, 0, 0, .08);
.header {
.textLogin{
text-align: center;
cursor: pointer;
margin-bottom: 24px;
img {
width: 40px;
margin-right: 8px;
margin-top: 5vh;
margin-bottom: 6.5vh;
font-size: 1.25rem;
font-weight: lighter;
color: #555;
font-family: 'Thasadith', sans-serif;
}
span {
vertical-align: text-bottom;
font-size: 16px;
text-transform: uppercase;
display: inline-block;
}
p {
font-size: 16px;
text-transform: uppercase;
.formParent{
display: flex;
flex-direction: row;
.inputContainer{
display: flex;
flex-direction: column;
background-color: #fff;
box-shadow: 0 14px 28px rgba(0,0,0,0.06), 0 10px 10px rgba(0,0,0,0.03);
.usernameForm{
border: 0px;
padding: 15px;
width: 20vw;
border-bottom: 1px solid #eee;
}
.passwordForm{
border: 0px;
padding: 15px;
width: 20vw;
}
}
.buttonLogin{
width: 100px;
height: 35px;
align-self: center;
margin-left: -3vw;
box-shadow: 0 14px 28px rgba(0,0,0,0.09), 0 10px 10px rgba(0,0,0,0.06) !important;
color: #fff;
border: 0px;
background-color: #6772e5;
border-radius: 2.5px;
cursor: pointer;
transition: 0.5s;
}
.buttonLogin:hover{
background-color: #424770;
}
}
}
}
//
//.login::before {
// content: "";
// position: absolute;
// z-index: -1;
// background: -webkit-gradient(linear, left top, right bottom, from(#D7BBEA), to(#65A8F1));
// background: linear-gradient(to bottom right, #D7BBEA, #65A8F1);
// top: 0;
// left: 0;
// bottom: 0;
// right: 0;
//}
//.login-wrapper {
// margin: 0 auto;
// position: relative;
// min-height: 100%;
// box-shadow: none;
// border-radius: 0;
// background-image: url('/assets/images/bg-pattern2.png');
// background-size: contain;
// background-repeat: repeat;
// background-position: 0 0;
//}
textarea:focus, input:focus{
outline: none;
}

24
src/common/pages/Vouchers/index.js
View File

@ -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')
@ -31,9 +32,12 @@ export default class VouchersComponent extends React.Component {
},
};
this.defaultState = Object.assign({}, this.state);
this.vouchersStore = props.appstate.vouchers;
}
componentDidMount() {
this.vouchersStore.getList();
console.log('res list component',this.vouchersStore.getList())
}
render() {
@ -186,14 +190,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 +197,17 @@ export default class VouchersComponent extends React.Component {
</p>
<Row gutter={10}>
{data.map((item, index) => {
{
(data.length > 0) ?
data.map((item, index) => {
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

12
src/common/pages/Vouchers/style.scss
View File

@ -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;
}
}

83
src/common/pages/Wallet/Modal/index.js Normal file
View File

@ -0,0 +1,83 @@
import React from 'react';
import {inject, observer} from 'mobx-react';
import {Link} from 'react-router';
import { Modal, Input, Alert, Select } from 'antd';
import './style.scss';
import { Route } from 'react-router-dom'
import {LINKS} from "../../../routes";
const Option = Select.Option;
@inject('appstate')
@observer
export default class ModalTopupComponent extends React.Component {
constructor(props) {
super(props);
this.props = props;
this.state = {
selectedOption: '0 Points',
inputCode1: '',
inputCode2: '',
inputCode3: '',
inputCode4: '',
};
this.defaultState = Object.assign({}, this.state);
}
componentDidMount() {}
render() {
const {data, isVisible = false, onOk = () => {}, onCancel = () => {}, title='Redeem your code'} = this.props;
return (
<Modal
title={title}
visible={isVisible}
onOk={onOk}
onCancel={onCancel}
bodyStyle={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<div className={'modalContainer'}>
<Input value={this.state.inputCode1} maxLength={4} ref={e => this.inputCode1 = e} onChange={(e) => {
this.setState({inputCode1: e.target.value})
if(e.target.value.length === 4){
this.inputCode2.focus();
}
}} className={'inputCode'} placeholder="XXXX" />
<p className={'stripeText'}>-</p>
<Input value={this.state.inputCode2} maxLength={4} ref={e => this.inputCode2 = e} onChange={(e) => {
this.setState({inputCode2: e.target.value})
if(e.target.value.length === 4){
this.inputCode3.focus();
}
if(e.target.value.length === 0){
this.inputCode1.focus();
}
}} className={'inputCode'} placeholder="XXXX" />
<p className={'stripeText'}>-</p>
<Input value={this.state.inputCode3} maxLength={4} ref={e => this.inputCode3 = e} onChange={(e) => {
this.setState({inputCode3: e.target.value})
if(e.target.value.length === 4){
this.inputCode4.focus();
}
if(e.target.value.length === 0){
this.inputCode2.focus();
}
}} className={'inputCode'} placeholder="XXXX" />
<p className={'stripeText'}>-</p>
<Input value={this.state.inputCode4} maxLength={4} ref={e => this.inputCode4 = e} onChange={(e) => {
this.setState({inputCode4: e.target.value})
if(e.target.value.length === 0){
this.inputCode3.focus();
}
}} className={'inputCode'} placeholder="XXXX" />
</div>
</Modal>
)
}
}

15
src/common/pages/Wallet/Modal/style.scss Normal file
View File

@ -0,0 +1,15 @@
.modalContainer{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.stripeText{
margin-top: 12px;
margin-left: 10px;
margin-right: 10px;
}
.inputCode{
text-align: center;
}
}

11
src/common/pages/Wallet/index.js
View File

@ -31,6 +31,7 @@ import Loader from 'react-loader-advanced';
import './style.scss';
import {DIALOG} from "../../stores/global_ui";
import faker from 'faker';
import ModalTopupComponent from "./Modal";
@inject('appstate')
@observer
@ -44,6 +45,7 @@ export default class WalletComponent extends React.Component {
slideIndex: 0,
filteredInfo: null,
sortedInfo: null,
modalTopup: false,
};
this.defaultState = Object.assign({}, this.state);
this.http = props.appstate.http;
@ -60,6 +62,10 @@ export default class WalletComponent extends React.Component {
// this.authStore.getWallet();
}
setModalTopup = (bool) => {
this.setState({modalTopup: bool});
};
render() {
const voucher = <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
const points = <NumberFormat value={15000} displayType={'text'} thousandSeparator={true}/>;
@ -207,7 +213,7 @@ export default class WalletComponent extends React.Component {
className="ToolbarGroupLastButton"
icon={<UnarchiveIcon/>}
label="Top Up"
// onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}
onClick={() => this.setModalTopup(true)}
primary={true}/>
</div>
}
@ -283,8 +289,7 @@ export default class WalletComponent extends React.Component {
</div>
</Card></div>
</div>
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
</div>
)
}

7
src/common/routes.js
View File

@ -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 (

2
src/common/stores/appstate.js
View File

@ -56,6 +56,7 @@ import {Tags} from './tags';
import Surf from './surf';
import Odoo from './odoo';
import Vouchers from './vouchers';
export default class AppState {
http = new Http(this.token);
@ -101,6 +102,7 @@ export default class AppState {
userBanks = new UserBanks(this);
stores = new Stores(this);
storeList = new StoreList(this);
vouchers = new Vouchers(this);
userAddress = new UserAddress(this);
item = new ItemStore(this);
myStore = new MyStoreStore(this);

101
src/common/stores/vouchers.js Normal file
View File

@ -0,0 +1,101 @@
import { observable, action, computed } from 'mobx';
export default class Vouchers {
@observable list = [];
@observable selected = {};
@observable istLoading = false;
@observable isSearching = false;
@observable filtered = [];
constructor(context) {
this.http = context.http;
this.context = context;
}
@action
getList(){
console.log('res');
this.isLoading = true;
return this.http.get("items")
.then(res => {
console.log(res.data,'res list')
this.list = res.data;
this.isLoading = false;
})
.catch(err => {
this.isLoading = false;
throw err;
})
}
@action
getDetail(id){
this.isLoading = true;
return this.http.get(`stores/${id}`)
.then(res => {
this.selected = res;
this.isLoading = false;
})
.catch(err => {
this.isLoading = false;
throw err;
})
}
@action
post(data){
this.isLoading = true;
return this.http.post("stores", data)
.then(res => {
this.isLoading = false;
this.getList();
return res;
})
.catch(err => {
this.isLoading = false;
throw err;
})
}
@action
put(id,data){
this.isLoading = true;
return this.http.put(`stores/${id}`, data)
.then(res => {
this.isLoading = false;
this.getList();
return res;
})
.catch(err => {
this.isLoading = false;
throw err;
})
}
@action
delete(id){
this.isLoading = true;
return this.http.delete(`stores/${id}`)
.then(res => {
this.isLoading = false;
this.getList();
return res;
})
.catch(err => {
this.isLoading = false;
throw err;
})
}
filterItems = (query) => {
return this.list.filter((el) =>
el.name.toLowerCase().indexOf(query.toLowerCase()) > -1
);
}
@action
search(text){
this.filtered = this.filterItems(text);
}
}