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

update: Transaction Page

Browse Source
This commit is contained in:
Rifqy Zacky Ariadhy
2019-01-04 23:07:36 +07:00
parent 6abf942ded
commit 69571af6f7
4 changed files with 125 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import React from 'react';
import {Card} from 'antd';
import {Card, Button, Alert} from 'antd';
import {inject, observer} from "mobx-react";
import faker from "faker";
@@ -29,26 +29,35 @@ export default class ItemList extends React.Component {
return(
<Card className={'cardContainer'}>
<div className={'parentContainerLeft'}>
<div className={'headerContainer'}>
<p className={'transactionCode'}>{data.transaction_id}</p>
<p className={'transactionDate'}>{data.updated_at}</p>
</div>
<div className={'bodyContainer'}>
<p className={'nameText'}>{data.name}</p>
<div className={'childContainer'}>
<p className={'childTitle'}>Price</p>
<p className={'childText'}>{data.price}</p>
<div className={'veryParentContainer'}>
<div className={'parentContainerLeft'}>
<div className={'headerContainer'}>
<p className={'transactionCode'}>{data.transaction_id}</p>
<p className={'transactionDate'}>{data.updated_at}</p>
</div>
<div className={'childContainer'}>
<p className={'childTitle'}>Voucher Code</p>
<p className={'childText'}>{data.voucher_code}</p>
<div className={'bodyContainer'}>
<p className={'nameText'}>{data.name}</p>
<div className={'childContainer'}>
<p className={'childTitle'}>Price</p>
<p className={'childText'}>{(+data.price).toFixed(0)} Points</p>
</div>
<div className={'childContainer'}>
<p className={'childTitle'}>Voucher Code</p>
<p className={'childText'}>{data.voucher_code}</p>
</div>
</div>
</div>
</div>
<div className={'parentContainerRight'}>
<p className={'statusTitle'}>Status</p>
<p className={'statusText'}>{data.status}</p>
<div className={'parentContainerRight'}>
<p className={'statusTitle'}>Status</p>
<p className={'statusText'}>{data.status}</p>
<div className={'buttonContainer'}>
<Button className={'buttonSubscribe'} block={true} success>Subscribe</Button>
<Button className={'buttonMore'} block={true} success>Buy More</Button>
</div>
<Alert style={{marginTop: '20px'}} message="Those Voucher Code has been sent to your email" type="info" />
</div>
</div>
</Card>
);

81
src/common/pages/Transaction/ItemList/style.scss
View File

@@ -1,3 +1,84 @@
.cardContainer{
margin-bottom: 15px;
animation-duration: 2s;
.veryParentContainer{
display: flex;
flex-direction: row;
justify-content: space-between;
.parentContainerLeft{
flex: 0.65;
.headerContainer{
.transactionCode{
color: #9ca0ff;
margin-bottom: 0px;
}
.transactionDate{
color: #aaa;
font-size: 0.75rem;
}
}
.bodyContainer{
.nameText{
font-weight: 700;
}
.childContainer{
.childTitle{
margin-bottom: 0px;
font-size: 0.65rem;
}
.childText{
font-weight: 500;
}
}
}
}
.parentContainerRight{
flex: 0.35;
.statusTitle{
font-size: 0.7rem;
margin-bottom: 0px;
}
.statusText{
color: #6772e5;
font-size: 1.15rem;
}
.buttonContainer{
display: flex;
justify-content: space-around;
.buttonSubscribe{
background-color: #42b549;
color: #fff;
margin-right: 7.5px;
}
.buttonMore{
margin-left: 7.5px;
background-color: #ff5722;
color: #fff;
}
}
}
}
}
.cardContainer:hover{
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

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

@@ -6,6 +6,7 @@ import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import {FlatButton} from "material-ui";
import './style.scss';
import ItemList from "./ItemList";
import moment from 'moment';
@inject("appstate")
@observer
@@ -19,8 +20,8 @@ export default class TransactionPage extends React.Component {
const data = [
{
transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
created_at: faker.date.past().toString(),
updated_at: faker.date.past().toString(),
created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
deleted_at: null,
name: faker.commerce.productName(),
status: 'Transaction Success',
@@ -29,8 +30,8 @@ export default class TransactionPage extends React.Component {
},
{
transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
created_at: faker.date.past().toString(),
updated_at: faker.date.past().toString(),
created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
deleted_at: null,
name: faker.commerce.productName(),
status: 'Transaction Success',
@@ -39,8 +40,8 @@ export default class TransactionPage extends React.Component {
},
{
transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
created_at: faker.date.past().toString(),
updated_at: faker.date.past().toString(),
created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
deleted_at: null,
name: faker.commerce.productName(),
status: 'Transaction Success',
@@ -49,8 +50,8 @@ export default class TransactionPage extends React.Component {
},
{
transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
created_at: faker.date.past().toString(),
updated_at: faker.date.past().toString(),
created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
deleted_at: null,
name: faker.commerce.productName(),
status: 'Transaction Success',

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

@@ -186,18 +186,14 @@ 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>
{/* <div><img alt="Nikmati Praktisnya Bayar Produk Digital, Cashback s.d. 350 ribu" class="_3NAr8" src="https://ecs7.tokopedia.net/img/banner/2018/12/18/41966928/41966928_03c39a82-9ec8-45c3-8184-2d1a0fd810cd.jpg" /></div>
<div><img alt="Nikmati Praktisnya Bayar Produk Digital, Cashback s.d. 350 ribu" class="_3NAr8" src="https://ecs7.tokopedia.net/img/banner/2018/12/18/41966928/41966928_03c39a82-9ec8-45c3-8184-2d1a0fd810cd.jpg" /></div>
<div><img alt="Nikmati Praktisnya Bayar Produk Digital, Cashback s.d. 350 ribu" class="_3NAr8" src="https://ecs7.tokopedia.net/img/banner/2018/12/18/41966928/41966928_03c39a82-9ec8-45c3-8184-2d1a0fd810cd.jpg" /></div>
<div><img alt="Nikmati Praktisnya Bayar Produk Digital, Cashback s.d. 350 ribu" class="_3NAr8" src="https://ecs7.tokopedia.net/img/banner/2018/12/18/41966928/41966928_03c39a82-9ec8-45c3-8184-2d1a0fd810cd.jpg" /></div> */}
</Carousel>
</div>
{/*<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'}>