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-06 18:45:34 +07:00
parent aa2163eac5 ac2f15f08a
commit c00f86872d
9 changed files with 121 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/common/pages/App/WalletComponent.js Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import {observer, inject} from 'mobx-react';
import {Route as RouteDOM} from "react-router-dom";
import {LINKS} from "../../routes";
import NumberFormat from "react-number-format";
@inject('appstate')
@observer
export default class WalletComponent extends React.Component {
constructor(props) {
super(props);
this.props = props;
}
render() {
return (<div className={'containerWalletBar'}>
<span style={{display: 'none'}}>{this.props.appstate.wallet.data.wallet}</span>
<div className={'containerVoucher'}>
<p className={'titleVoucher'}>Voucher</p>
<RouteDOM render={({ history}) => (
<p onClick={() => history.push(LINKS.WALLET)} className={'textVoucher'}>
<NumberFormat value={(this.props.appstate.wallet.data.wallet).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={(this.props.appstate.wallet.data.point)} displayType={'text'} thousandSeparator={true}/>
</p>
)} />
</div>
</div>);
}
}

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

@@ -44,6 +44,7 @@ import EmptyComponent from '../EmptyComponent';
import NumberFormat from 'react-number-format';
import faker from 'faker';
import { Route as RouteDOM } from 'react-router-dom'
import WalletComponent from "./WalletComponent";
faker.locale = 'id_ID';
@inject("appstate")
@@ -442,24 +443,7 @@ 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>
<WalletComponent/>
{window.location.pathname.split("/")[2] == "shop" ? (
<IconMenu

18
src/common/pages/Transaction/ItemList/index.js
View File

@@ -4,6 +4,7 @@ import {inject, observer} from "mobx-react";
import faker from "faker";
import './style.scss';
import moment from "moment";
@inject("appstate")
@observer
@@ -17,13 +18,16 @@ export default class ItemList extends React.Component {
const {
data = {
transaction_id: '',
transaction: {},
item: {},
item_sku: {},
created_at: '',
updated_at: '',
deleted_at: '',
name: '',
status: '',
price: '',
voucher_code: ``,
voucher_code: `-`,
}
} = this.props;
@@ -32,24 +36,24 @@ export default class ItemList extends React.Component {
<div className={'veryParentContainer'}>
<div className={'parentContainerLeft'}>
<div className={'headerContainer'}>
<p className={'transactionCode'}>{data.transaction_id}</p>
<p className={'transactionDate'}>{data.updated_at}</p>
<p className={'transactionCode'}>{`INV/20190101/VII/X/${data.transaction_id.split('-')[0].toUpperCase()}`}</p>
<p className={'transactionDate'}>{moment(data.updated_at).format("dddd, MMMM Do YYYY, HH:mm:ss")}</p>
</div>
<div className={'bodyContainer'}>
<p className={'nameText'}>{data.name}</p>
<p className={'nameText'}>{data.item.name + " : " + data.item_sku.name}</p>
<div className={'childContainer'}>
<p className={'childTitle'}>Price</p>
<p className={'childText'}>{(+data.price).toFixed(0)} BTN Reward</p>
<p className={'childText'}>{(+data.item_sku.price).toFixed(0)} Points</p>
</div>
<div className={'childContainer'}>
<p className={'childTitle'}>Voucher Code</p>
<p className={'childText'}>{data.voucher_code}</p>
<p className={'childText'}>{data.voucher_code || '-'}</p>
</div>
</div>
</div>
<div className={'parentContainerRight'}>
<p className={'statusTitle'}>Status</p>
<p className={'statusText'}>{data.status}</p>
<p className={'statusText'}>{data.transaction.status}</p>
<div className={'buttonContainer'}>
<Button className={'buttonSubscribe'} block={true} success>Subscribe</Button>

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

@@ -7,6 +7,7 @@ import {FlatButton} from "material-ui";
import './style.scss';
import ItemList from "./ItemList";
import moment from 'moment';
import EmptyComponent from "../EmptyComponent";
@inject("appstate")
@observer
@@ -14,6 +15,11 @@ export default class TransactionPage extends React.Component {
constructor(props){
super(props);
this.props = props;
this.purchasedVoucher = props.appstate.purchased_voucher;
}
componentDidMount() {
this.purchasedVoucher.getAll().then((res) => console.log(res, 'ini purchased voucher'))
}
render() {
@@ -84,9 +90,15 @@ export default class TransactionPage extends React.Component {
<Divider className={'dividerTop'} />
<div className={'listContainer'}>
{data.map(item => {
return <ItemList data={item}/>
})}
{
(this.purchasedVoucher.data.length > 0) ?
this.purchasedVoucher.data.map(item => {
return <ItemList data={item}/>
}) :
(
<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
)
}
</div>
</div>
</div>

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

@@ -71,8 +71,8 @@ export default class WalletComponent extends React.Component {
};
render() {
const voucher = <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
const points = <NumberFormat value={15000} displayType={'text'} thousandSeparator={true}/>;
const voucher = <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
const points = <NumberFormat value={this.props.appstate.wallet.data.point} displayType={'text'} thousandSeparator={true}/>;
const data = [
{

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

@@ -58,6 +58,8 @@ import Odoo from './odoo';
import Vouchers from './vouchers';
import {PurchasedItemStore} from "./purchased_item";
import WalletStore from "./wallet";
import {PurchasedItemVouchserStore} from "./purchased_item_voucher";
export default class AppState {
http = new Http(this.token);
@@ -117,6 +119,8 @@ export default class AppState {
tags = new Tags(this);
surf_turf = new Surf(this);
purchased_items = new PurchasedItemStore(this);
wallet = new WalletStore(this);
purchased_voucher = new PurchasedItemVouchserStore(this);
constructor(initialState) {
this.token = initialState.token;
@@ -129,6 +133,9 @@ export default class AppState {
this.user.getUserGeolocation();
}
}
if(this.token) {
this.loadDataAfterLogin();
}
}
@action
@@ -153,8 +160,13 @@ export default class AppState {
this.items.push(item);
}
@action
loadDataAfterLogin() {
this.wallet.getData();
}
@computed get userData() {
const token = localStorage.getItem('id_token');
const token = this.token;
if (!token) {
return {
user_id: '',
@@ -167,4 +179,3 @@ export default class AppState {
return tokenData;
}
}

1
src/common/stores/authenticaton.js
View File

@@ -51,6 +51,7 @@ export class Authentication {
.then(res => {
this.isLoggingIn = false;
this.context.setToken(res.token);
this.context.loadDataAfterLogin();
})
.catch(err => {
this.isLoggingIn = false;

11
src/common/stores/purchased_item_voucher.js Normal file
View File

@@ -0,0 +1,11 @@
import { BaseStore } from "./base_store";
import {observable, action} from "mobx/lib/mobx";
export class PurchasedItemVouchserStore extends BaseStore {
constructor(context) {
super(context);
this.url = "purchased_items/vouchers";
}
}

28
src/common/stores/wallet.js Normal file
View File

@@ -0,0 +1,28 @@
import { observable, action, computed } from 'mobx';
export default class WalletStore {
@observable isLoading = false;
@observable data = {
wallet: 1,
point: 1
};
constructor(context) {
this.context = context;
this.http = context.http;
}
@action
getData() {
this.isLoading = true;
return this.http.get("wallet")
.then(res => {
this.isLoading = false;
this.data = res;
return res;
})
.catch(err => {
this.isLoading = false;
throw err;
})
}
}