payment vouchers page

src/common/pages/App/routes.js

@@ -13,6 +13,7 @@ import ItemsComponent from '../Items/index';
 import VouchersComponent from '../Vouchers/index';
 import VerifyVouchers from '../Vouchers/Verify';
 import CheckoutVouchers from '../Vouchers/Checkout';
+import PaymentVouchers from '../Vouchers/Payment';
 import FormItems from "../Items/FormItems/FormItems";
 import FormItemAdmin from "../Items/FormItems/FormItemAdmin";
 import FormPromotion from "../Items/FormItems/FormPromotion";
@@ -87,6 +88,7 @@ export default class ComponentName extends React.Component {
         <Route exact component={VouchersComponent} path={LINKS.VOUCHERS}/>
         <Route exact component={VerifyVouchers} path={LINKS.VERIFY_VOUCHERS}/>
         <Route exact component={CheckoutVouchers} path={LINKS.CHECKOUT_VOUCHERS}/>
+        <Route exact component={PaymentVouchers} path={LINKS.PAYMENT_VOUCHERS}/>
         <Route exact component={FormItems} path={LINKS.FORM_ITEMS}/>
         <Route exact component={FormItems} path={LINKS.FORM_ITEMS_EDIT}/>
         <Route exact component={UploadItems} path={LINKS.FORM_UPLOAD}/>

src/common/pages/Items/All/index.js

@@ -516,7 +516,7 @@ export default class All extends React.Component {
 
         <InfiniteScroll pageStart={0} loadMore={this.loadMore} hasMore={true}>
         <Row className="row rowItem" gutter={8}>
-          {(this.userData.role === 'store' && this.userData.entity_permission.can_store_change_item) ?
+          {/* {(this.userData.role === 'store' && this.userData.entity_permission.can_store_change_item) ?
           <Col className="gutter-row col animated fadeIn" span={4}>
             <Link to={`${LINKS.FORM_ITEMS}`} style={{color: '#424770'}}>
               <div className="flex add-new"
@@ -552,7 +552,7 @@ export default class All extends React.Component {
                 </div>
               </Link>
             </Col> : ""
-          }
+          } */}
 
           {data.map(item => {
             return (<Col key={item.id} className="gutter-row col" span={6} style={{marginBottom: 20}}>

src/common/pages/Vouchers/Checkout/index.js

@@ -11,8 +11,8 @@ import Loader from 'react-loader-advanced';
 import {DIALOG} from "../../../stores/global_ui";
 import EmptyComponent from '../../EmptyComponent';
 import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
-import Search from 'material-ui/svg-icons/action/search';
+import {LINKS} from "../../../routes";
-import Timer from 'react-compound-timer';
+import {Route} from "react-router-dom";
 
 @inject('appstate')
 @observer
@@ -52,7 +52,7 @@ export default class CheckoutVouchers extends React.Component {
                 />
                 <Divider style={{ marginBottom: 20, marginTop: 20, marginLeft:20 }} />
                     <Card title={<div style={{display:'flex',justifyContent:'center'}}>
-                                <h2 style={{color:'grey'}}>
+                                <h2 style={{fontSize:20}}>
                                     Detail Pembelian
                                 </h2>
                             </div>}>
@@ -66,18 +66,18 @@ export default class CheckoutVouchers extends React.Component {
                             <div style={{alignItems:'center'}}>
                                 <div className="row">
                                     <div className="col s12 m6 6">
-                                        <h3>Jenis Layanan</h3>
+                                        <h3>Jenis Layanan :</h3>
                                     </div>
                                     <div className="col s12 m6 6">
-                                        <h3 style={{color:'grey'}}> : KFC Rp.50.000,00</h3>
+                                        <h3 style={{color:''}}>KFC Rp.50.000,00</h3>
                                     </div>
                                 </div>
                                 <div className="row">
                                     <div className="col s12 m6 6">
-                                        <h3>Point</h3>
+                                        <h3>Point :</h3>
                                     </div>
                                     <div className="col s12 m6 6">
-                                        <h3 style={{color:'grey'}}> : 150,000</h3>
+                                        <h3 style={{color:'#FF6F00'}}>50 Points</h3>
                                     </div>
                                 </div>
                             </div>
@@ -89,19 +89,19 @@ export default class CheckoutVouchers extends React.Component {
                     <Card >
                         <div className="row">
                             <div style={{display:'flex',justifyContent:'space-between'}}>
-                                <h3 style={{color:'grey'}}>Poin</h3>
+                                <h3 style={{color:''}}>Point</h3>
-                                <h3 style={{color:'grey'}}>150,000</h3>
+                                <h3 style={{color:'#FF6F00'}}>11,570 Points</h3>
                             </div>
                         </div>
                         <Divider />
                         <div className="row">
                             <div style={{display:'flex',justifyContent:'space-between'}}>
-                                <h3>Total Pembayaran Poin</h3>
+                                <h3>Total Pembayaran Point</h3>
-                                <h3 style={{color:'#FF6F00'}}>150,000</h3>
+                                <h3 style={{color:'#FF6F00'}}>50 Points</h3>
                             </div>
                         </div>
                         <div className="row">
-                            <Button type="primary" block>Lanjut</Button>
+                            <Button type="primary" block onClick={() => this.props.history.push(LINKS.PAYMENT_VOUCHERS)}>Lanjut</Button>
                         </div>
                     </Card>
                 </div>

src/common/pages/Vouchers/Payment/index.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {
+    FlatButton
+} from 'material-ui';
+import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox ,Divider, DatePicker, Alert, Input ,Avatar, Collapse, notification } from 'antd';
+import {startCase} from 'lodash';
+import LoadingDialog from "../../LoadingDialog";
+import Loader from 'react-loader-advanced';
+// import './style.scss';
+import {DIALOG} from "../../../stores/global_ui";
+import EmptyComponent from '../../EmptyComponent';
+import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
+import {LINKS} from "../../../routes";
+
+const Panel = Collapse.Panel;
+
+@inject('appstate')
+@observer
+export default class PaymentVouchers extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      value: 1,
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+    this.authStore = props.appstate.auth;
+    this.globalUI = props.appstate.globalUI;
+  }
+
+  componentDidMount() {
+
+  }
+
+  render() {
+    const openNotificationWithIcon = (type) => {
+        notification[type]({
+          message: 'Success',
+          description: 'Selamat anda telah mendapatkan vouchers sebesar KFC Rp. 50,000',
+          placement:'topRight',
+          duration: 5,
+        });
+      };
+
+    return (
+    <div className="wallet containerMiddle">
+        <div className="row">
+            <div className="col s0 m2 l2" />
+            <div className="col s12 m8 l8">
+                <div className="row">
+                <FlatButton
+                    className="headerMenu"
+                    hoverColor="#f1f5f9"
+                    style={{ background: '#ffffff00' }}
+                    onClick={() => this.props.history.goBack()}
+                    label="Back"
+                    primary={true}
+                    icon={<NavigationArrowBack />}
+                />
+                <Divider style={{ marginBottom: 20, marginTop: 20, marginLeft:20 }} />
+                </div>
+                <div className="row">
+                <Collapse bordered={true}>
+                    <Panel style={{backgroundColor:'white'}} showArrow={false} header={
+                            <div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}>
+                                <h3 style={{color:'#FF6F00'}}>
+                                50 Points
+                                </h3>
+                                <h3 style={{color:'#6772e5'}}>
+                                    Detail  Tagihan
+                                </h3>
+                            </div>
+                        } key="1">
+                        <Row>
+                            <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
+                                <p>KFC - Rp. 50,000</p>
+                                <p>50 Points</p>
+                            </div>
+                        </Row>
+                        <Row>
+                            <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
+                                <p>1 x Rp. 50 Points</p>
+                                <p>50 Points</p>
+                            </div>
+                        </Row>
+                        <Divider dashed={true} />
+                        <Row>
+                            <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
+                                <p>Tagihan</p>
+                                <p>50 Points</p>
+                            </div>
+                        </Row>
+                    </Panel>
+                </Collapse>
+                </div>
+                <div className="row">
+                    <Card  title={<div style={{display:'flex',justifyContent:'space-between'}}>
+                                <div>
+                                <h3 style={{fontSize:20}}>
+                                    Points BTN
+                                </h3>
+                                </div>
+                                <div>
+                                    <img  style={{width:120, height:40}} src="http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png" />
+                                </div>
+                            </div>}>
+                            <div className="row">
+                            <Alert message="Pastikan data anda sudah terverivikasi dan vouchers anda yang pilih sudah benar sebelum melakukan transaksi" type="warning" />
+                            </div>
+                            <div>
+                                <ul>
+                                    <li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
+                                    <li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
+                                </ul>
+                            </div>
+                    </Card>
+                </div>
+                <div className="row">
+                <Button type="primary" block onClick={() => {
+                    this.props.history.push(LINKS.VOUCHERS)
+                    openNotificationWithIcon('success')
+                    }}>Bayar</Button>
+                </div>
+            </div>
+            <div className="col s0 m2 l2" />
+        </div>
+    </div>
+    )
+  }
+}

src/common/routes.js

@@ -113,6 +113,7 @@ export const LINKS = {
   VOUCHERS: '/app/vouchers',
   VERIFY_VOUCHERS: '/app/vouchers/verify',
   CHECKOUT_VOUCHERS: '/app/vouchers/checkout',
+  PAYMENT_VOUCHERS: '/app/vouchers/payment',
   CART_DETAIL: '/app/cart',
 };