diff --git a/assets/images/emptyState/coupon.png b/assets/images/emptyState/coupon.png new file mode 100644 index 0000000..fa5cb6e Binary files /dev/null and b/assets/images/emptyState/coupon.png differ diff --git a/assets/images/login/background.jpg b/assets/images/login/background.jpg new file mode 100644 index 0000000..383f1c8 Binary files /dev/null and b/assets/images/login/background.jpg differ diff --git a/assets/images/logo-bankbtn.png b/assets/images/logo-bankbtn.png new file mode 100644 index 0000000..46c44a2 Binary files /dev/null and b/assets/images/logo-bankbtn.png differ diff --git a/package-lock.json b/package-lock.json index 400c69d..6d9ef4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "marketplace", + "name": "BTN", "version": "1.0.0", "lockfileVersion": 1, "requires": true, diff --git a/package.json b/package.json index c2f189d..6cd0f6a 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/public/index.html b/public/index.html index 333bec9..c204be0 100644 --- a/public/index.html +++ b/public/index.html @@ -2,9 +2,9 @@ - Marketplace + BTN - + +
+
+ +
+
+

{this.props.header}

+

{this.props.content}

+
+
+ + ); + } else if(type == "404"){ return(
diff --git a/src/common/pages/ForgotPassword/index.js b/src/common/pages/ForgotPassword/index.js index 08257f1..c16de43 100644 --- a/src/common/pages/ForgotPassword/index.js +++ b/src/common/pages/ForgotPassword/index.js @@ -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 (
@@ -106,7 +106,7 @@ export default class ForgotPasswordComponent extends React.Component { marginRight: "auto", marginLeft: "auto" }} zDepth={1} circle={true}> - +

Marketplace

+ }}>BTN
diff --git a/src/common/pages/Login/index.js b/src/common/pages/Login/index.js index bcfc307..dfe17ee 100644 --- a/src/common/pages/Login/index.js +++ b/src/common/pages/Login/index.js @@ -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 = [ - this.closeWarning()} - />, - ]; - - const actionsNotif = [ - , - ]; - - // 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 ( -
- - - {/*(this.settingStore.setting.name) ? this.settingStore.setting.name : ""*/'Marketplace'} - - - -
- {/* - (this.settingStore.isIconEmpty) ? -
- - - -

5 Roti dan 2 Ikan

-
- : -
- - - -

{this.settingStore.setting.name}

-
- */ - } -
- - - -

Marketplace

-
-
- - Login to Store Admin Console

}> - - +
+
+ +

Login into our System

-
- - this.handleTextFieldChange(event, 'email')} +
+
+ - this.handleTextFieldChange(event, 'password')} - onKeyPress={(ev) => { - if (ev.key === 'Enter') { - // Do code here - this.login() - } - }} /> - - - - - this.props.history.push(LINKS.FORGOT_PASSWORD)}>Forgot Password - - - this.closeWarning()} - > - {this.state.warningLoginMessage} - - -

1. You must allow notification

-
-
-

2. Reload Page

-
- -
- {/*

1. You must allow notification

- */} - + + +
+
) } diff --git a/src/common/pages/Login/style.scss b/src/common/pages/Login/style.scss index 4077e85..dc1bc01 100644 --- a/src/common/pages/Login/style.scss +++ b/src/common/pages/Login/style.scss @@ -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; - flex-direction: column; - //background-size: cover; - //position: fixed; - //height: 100%; - //width: 100%; - //top:0; - //overflow: hidden; - .logo { - width: 100%; - } + //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; - .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 { + .formContainer{ + display: flex; + flex-direction: column; + margin-top: -17.5vh; + + .logoLogin{ + width: 200px; + height: auto; + align-self: center; + } + + .textLogin{ text-align: center; - cursor: pointer; - margin-bottom: 24px; - img { - width: 40px; - margin-right: 8px; - } - span { - vertical-align: text-bottom; - font-size: 16px; - text-transform: uppercase; - display: inline-block; - } - p { - font-size: 16px; - text-transform: uppercase; + margin-top: 5vh; + margin-bottom: 6.5vh; + font-size: 1.25rem; + font-weight: lighter; + color: #555; + font-family: 'Thasadith', sans-serif; + } + .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; +} diff --git a/src/common/pages/Vouchers/index.js b/src/common/pages/Vouchers/index.js index 277da90..769fde5 100644 --- a/src/common/pages/Vouchers/index.js +++ b/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') @@ -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 (
- {/*
*/} - {/**/} - {/*
Banner 1
*/} - {/*
Banner 2
*/} - {/*
Banner 3
*/} - {/*
Banner 4
*/} - {/**/} - {/*
*/}

@@ -201,11 +197,17 @@ export default class VouchersComponent extends React.Component {

- {data.map((item, index) => { - return ( this.setState({isOpened: true, data: item})} key={index} span={6}> - - ) - })} + { + (data.length > 0) ? + data.map((item, index) => { + return ( this.setState({isOpened: true, data: item})} key={index} span={6}> + + ) + }) + : ( + + ) + } {}, onCancel = () => {}, title='Redeem your code'} = this.props; + + return ( + +
+ this.inputCode1 = e} onChange={(e) => { + this.setState({inputCode1: e.target.value}) + if(e.target.value.length === 4){ + this.inputCode2.focus(); + } + }} className={'inputCode'} placeholder="XXXX" /> +

-

+ 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" /> +

-

+ 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" /> +

-

+ this.inputCode4 = e} onChange={(e) => { + this.setState({inputCode4: e.target.value}) + if(e.target.value.length === 0){ + this.inputCode3.focus(); + } + }} className={'inputCode'} placeholder="XXXX" /> +
+ + ) + } +} diff --git a/src/common/pages/Wallet/Modal/style.scss b/src/common/pages/Wallet/Modal/style.scss new file mode 100644 index 0000000..bf2b2d1 --- /dev/null +++ b/src/common/pages/Wallet/Modal/style.scss @@ -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; + } +} diff --git a/src/common/pages/Wallet/index.js b/src/common/pages/Wallet/index.js index 99d3b7b..5471c88 100644 --- a/src/common/pages/Wallet/index.js +++ b/src/common/pages/Wallet/index.js @@ -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 = ; const points = ; @@ -207,7 +213,7 @@ export default class WalletComponent extends React.Component { className="ToolbarGroupLastButton" icon={} label="Top Up" - // onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)} + onClick={() => this.setModalTopup(true)} primary={true}/>
} @@ -283,8 +289,7 @@ export default class WalletComponent extends React.Component {
- - + this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
) } diff --git a/src/common/routes.js b/src/common/routes.js index 414f2cf..1a35055 100644 --- a/src/common/routes.js +++ b/src/common/routes.js @@ -138,10 +138,13 @@ export default class Routes extends React.Component { const PrivateRoute = ({component: Component, ...rest}) => ( this.authStore.isLoggedIn === true + render={ + (props) => true === true ? () : ( - )}/> + ) + } + /> ) return ( diff --git a/src/common/stores/appstate.js b/src/common/stores/appstate.js index d2156c5..37f1db2 100644 --- a/src/common/stores/appstate.js +++ b/src/common/stores/appstate.js @@ -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); diff --git a/src/common/stores/vouchers.js b/src/common/stores/vouchers.js new file mode 100644 index 0000000..ba63d59 --- /dev/null +++ b/src/common/stores/vouchers.js @@ -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); + } + }