From 69571af6f7176f8b266996d953ca4ab6e6cffbb0 Mon Sep 17 00:00:00 2001 From: Rifqy Zacky Ariadhy Date: Fri, 4 Jan 2019 23:07:36 +0700 Subject: [PATCH] update: Transaction Page --- .../pages/Transaction/ItemList/index.js | 45 ++++++----- .../pages/Transaction/ItemList/style.scss | 81 +++++++++++++++++++ src/common/pages/Transaction/index.js | 17 ++-- src/common/pages/Vouchers/index.js | 20 ++--- 4 files changed, 125 insertions(+), 38 deletions(-) diff --git a/src/common/pages/Transaction/ItemList/index.js b/src/common/pages/Transaction/ItemList/index.js index 3adecb3..115e69a 100644 --- a/src/common/pages/Transaction/ItemList/index.js +++ b/src/common/pages/Transaction/ItemList/index.js @@ -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( -
-
-

{data.transaction_id}

-

{data.updated_at}

-
-
-

{data.name}

-
-

Price

-

{data.price}

+
+
+
+

{data.transaction_id}

+

{data.updated_at}

-
-

Voucher Code

-

{data.voucher_code}

+
+

{data.name}

+
+

Price

+

{(+data.price).toFixed(0)} Points

+
+
+

Voucher Code

+

{data.voucher_code}

+
-
-
-

Status

-

{data.status}

+
+

Status

+

{data.status}

+ +
+ + +
+ + +
); diff --git a/src/common/pages/Transaction/ItemList/style.scss b/src/common/pages/Transaction/ItemList/style.scss index c26ec20..7a14356 100644 --- a/src/common/pages/Transaction/ItemList/style.scss +++ b/src/common/pages/Transaction/ItemList/style.scss @@ -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); } diff --git a/src/common/pages/Transaction/index.js b/src/common/pages/Transaction/index.js index 2b0cf6b..66e37ed 100644 --- a/src/common/pages/Transaction/index.js +++ b/src/common/pages/Transaction/index.js @@ -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', diff --git a/src/common/pages/Vouchers/index.js b/src/common/pages/Vouchers/index.js index 7d7d8fc..1974ffa 100644 --- a/src/common/pages/Vouchers/index.js +++ b/src/common/pages/Vouchers/index.js @@ -186,18 +186,14 @@ export default class VouchersComponent extends React.Component { return (
-
- -
Banner 1
-
Banner 2
-
Banner 3
-
Banner 4
- {/*
Nikmati Praktisnya Bayar Produk Digital, Cashback s.d. 350 ribu
-
Nikmati Praktisnya Bayar Produk Digital, Cashback s.d. 350 ribu
-
Nikmati Praktisnya Bayar Produk Digital, Cashback s.d. 350 ribu
-
Nikmati Praktisnya Bayar Produk Digital, Cashback s.d. 350 ribu
*/} - -
+ {/*
*/} + {/**/} + {/*
Banner 1
*/} + {/*
Banner 2
*/} + {/*
Banner 3
*/} + {/*
Banner 4
*/} + {/**/} + {/*
*/}