71 lines
2.3 KiB
JavaScript
71 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import {Card, Button, Alert} from 'antd';
|
|
import {inject, observer} from "mobx-react";
|
|
import faker from "faker";
|
|
|
|
import './style.scss';
|
|
import moment from "moment";
|
|
|
|
@inject("appstate")
|
|
@observer
|
|
export default class ItemList extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
data = {
|
|
transaction_id: '',
|
|
transaction: {},
|
|
item: {},
|
|
item_sku: {},
|
|
created_at: '',
|
|
updated_at: '',
|
|
deleted_at: '',
|
|
name: '',
|
|
status: '',
|
|
price: '',
|
|
voucher_code: `-`,
|
|
}
|
|
} = this.props;
|
|
|
|
return(
|
|
<Card className={'cardContainer'}>
|
|
<div className={'veryParentContainer'}>
|
|
<div className={'parentContainerLeft'}>
|
|
<div className={'headerContainer'}>
|
|
<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.item.name}</p>
|
|
<div className={'childContainer'}>
|
|
<p className={'childTitle'}>Price</p>
|
|
{/*<p className={'childText'}>{(+data.price).toFixed(0)} Points</p>*/}
|
|
<p className={'childText'}>{data.price} Points</p>
|
|
</div>
|
|
<div className={'childContainer'}>
|
|
<p className={'childTitle'}>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.transaction.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>
|
|
);
|
|
}
|
|
}
|