update: Transaction Page

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(
       <Card className={'cardContainer'}>
-        <div className={'parentContainerLeft'}>
+        <div className={'veryParentContainer'}>
-          <div className={'headerContainer'}>
+          <div className={'parentContainerLeft'}>
-            <p className={'transactionCode'}>{data.transaction_id}</p>
+            <div className={'headerContainer'}>
-            <p className={'transactionDate'}>{data.updated_at}</p>
+              <p className={'transactionCode'}>{data.transaction_id}</p>
-          </div>
+              <p className={'transactionDate'}>{data.updated_at}</p>
-          <div className={'bodyContainer'}>
-            <p className={'nameText'}>{data.name}</p>
-            <div className={'childContainer'}>
-              <p className={'childTitle'}>Price</p>
-              <p className={'childText'}>{data.price}</p>
             </div>
-            <div className={'childContainer'}>
+            <div className={'bodyContainer'}>
-              <p className={'childTitle'}>Voucher Code</p>
+              <p className={'nameText'}>{data.name}</p>
-              <p className={'childText'}>{data.voucher_code}</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'}>
-        <div className={'parentContainerRight'}>
+            <p className={'statusTitle'}>Status</p>
-          <p className={'statusTitle'}>Status</p>
+            <p className={'statusText'}>{data.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>
     );

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);
 }

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(),
+        created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
-        updated_at: faker.date.past().toString(),
+        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(),
+        created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
-        updated_at: faker.date.past().toString(),
+        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(),
+        created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
-        updated_at: faker.date.past().toString(),
+        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(),
+        created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
-        updated_at: faker.date.past().toString(),
+        updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
         deleted_at: null,
         name: faker.commerce.productName(),
         status: 'Transaction Success',

src/common/pages/Vouchers/index.js

@@ -186,18 +186,14 @@ export default class VouchersComponent extends React.Component {
 
     return (
       <div className="voucher">
-        <div className="row">
+        {/*<div className="row">*/}
-        <Carousel autoplay>
+        {/*<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 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 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 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 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>
+        {/*</Carousel>*/}
-          <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>*/}
-          <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">
           <div className="col l12 m12 s12 padding">
             <p className={'pageTitle'}>