From 7d83742788154fe3d39c8937590292ce90b45669 Mon Sep 17 00:00:00 2001
From: enggar_ganteng <enggardamarsaraswata@gmail.com>
Date: Thu, 3 Jan 2019 15:29:25 +0700
Subject: [PATCH] cart belum selesai keburu pindah ke yang lain

---
 src/common/pages/App/routes.js       |   4 +-
 src/common/pages/CartDetail/index.js | 248 +++++++++++++++++++++++++++
 src/common/routes.js                 |   1 +
 3 files changed, 252 insertions(+), 1 deletion(-)
 create mode 100644 src/common/pages/CartDetail/index.js

diff --git a/src/common/pages/App/routes.js b/src/common/pages/App/routes.js
index 2b37d38..e1df443 100644
--- a/src/common/pages/App/routes.js
+++ b/src/common/pages/App/routes.js
@@ -29,7 +29,8 @@ import Tasks from './../Tasks/index';
 import HotelComponent from '../Hotel';
 import HotelSearch from './../Hotel/HotelSearch';
 import CarComponent from '../Car';
-import CarSearch from './../Car/CarSearch'
+import CarSearch from './../Car/CarSearch';
+import CartDetail from '../CartDetail/index';
 import CustomerComponent from "../Customers/index";
 import CustomerDetail from "../CustomerDetail/index";
 import WalletCostumer from '../CustomerDetail/Wallet/index';
@@ -78,6 +79,7 @@ export default class ComponentName extends React.Component {
         <Route exact component={HotelComponent} path={LINKS.HOTEL}/>
         <Route exact component={HotelSearch} path={LINKS.HOTEL_SEARCH}/>
         <Route exact component={CarComponent} path={LINKS.CAR}/>
+        <Route exact component={CartDetail} path={LINKS.CART_DETAIL}/>
         <Route exact component={CarSearch} path={LINKS.CAR_SEARCH}/>
         <Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
         <Route exact component={VouchersComponent} path={LINKS.VOUCHERS}/>
diff --git a/src/common/pages/CartDetail/index.js b/src/common/pages/CartDetail/index.js
new file mode 100644
index 0000000..655c751
--- /dev/null
+++ b/src/common/pages/CartDetail/index.js
@@ -0,0 +1,248 @@
+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, TimePicker, List } 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 DeleteIcon from 'material-ui/svg-icons/action/delete';
+import Search from 'material-ui/svg-icons/action/search';
+
+const format = 'HH:mm';
+
+
+
+@inject('appstate')
+@observer
+export default class CartDetail extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      value: 1,
+      valueMinimal: 0,
+      valueMaximal: 0,
+      changeSearch:false,
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+    this.authStore = props.appstate.auth;
+    this.globalUI = props.appstate.globalUI;
+  }
+
+  componentDidMount() {
+
+  }
+
+  handleChangeMinimal = (valueMinimal) => {
+    this.setState({ valueMinimal });
+  };
+
+  handleChangeMaximal = (valueMaximal) => {
+    this.setState({ valueMaximal });
+  };
+
+  handleBlur = () => {
+    console.log('blur');
+  }
+
+  handleFocus = () => {
+    console.log('focus');
+  }
+
+  handleChangeSearch = () => {
+    this.setState({
+        changeSearch : true
+    })
+  }
+
+  handleChangeSearchFalse = () => {
+    this.setState({
+        changeSearch : false
+    })
+  }
+
+  
+
+  render() {
+    const { valueMinimal, valueMaximal } = this.state;
+
+    const dataAgya = [
+        'Full to full gasoline',
+        '4 people',
+        '4 door',
+      ];
+
+      const dataAvanza = [
+        'Full to full gasoline',
+        '4 people',
+        '5 door',
+      ];
+
+      const dataInova = [
+        'Full to full gasoline',
+        '6 people',
+        '4 door',
+      ];
+
+    return (
+      <div className="wallet containerMiddle">
+        <div className="row">
+          <div className="col s9 m9 l9">
+            <Row>
+                <Card style={{marginRight:20,marginBottom:20}}>
+                    <Row>
+                        <div style={{display: 'flex',justifyContent:'space-between'}}>
+                            <Checkbox style={{}} value="">Pilih Semua Product</Checkbox>
+                            <Button shape="circle" icon="delete" />
+                        </div>
+                    </Row>
+                </Card>
+            </Row>
+            <Row>
+              <Card
+                title={<span><Checkbox style={{}} value="">Penjual : Xiomi shop</Checkbox></span>}
+                  style={{marginRight:20,marginBottom:20}}
+              >
+                  <Row>
+                      <Col span={8}>
+                          <img alt="example" src="https://ecs7.tokopedia.net/img/cache/700/product-1/2019/1/2/21148822/21148822_2d655fa2-894d-46cf-a63f-19a0fec0da6e_1080_1080.jpg" style={{width:'100%', height:190}} />
+                      </Col>
+                      <Col span={1} />
+                      <Col span={15}>
+                            <Row>
+                            <h2>Toyota Agya</h2>
+                            </Row>
+                            <Row style={{marginBottom:10}}>
+                            <Col span={12}>
+                          <h4 style={{color:'grey'}}><Icon type="environment" />At Airport</h4>
+                          <div style={{marginBottom:10}}>
+                              <Tag color="#f50">Air Conditional</Tag>
+                              <Tag color="#7E57C2">Mini</Tag>
+                              <Tag color="#87d068">Automatic</Tag>
+                          </div>
+                          <h2 style={{color:'#2962FF'}}>99,643 Poin</h2>
+                            </Col>
+                            <Col span={12}>
+                                <List
+                                size="small"
+                                dataSource={dataAgya}
+                                renderItem={item => (<List.Item>{item}</List.Item>)}
+                                />
+                            </Col>
+                            </Row>
+                            <Row>
+                            <Col span={24}>
+                              <Button type="primary" block style={{}}>Pesan</Button>
+                          </Col>
+                            </Row>
+                      </Col>
+                  </Row>
+              </Card>
+            </Row>
+
+            <Row>
+              <Card
+                  style={{marginRight:20,marginBottom:20}}
+              >
+                  <Row>
+                      <Col span={8}>
+                          <img alt="example" src="https://cdn.rcstatic.com/images/car_images/new_images/toyota/avanza_lrg.jpg" style={{width:'100%', height:190}} />
+                      </Col>
+                      <Col span={1} />
+                      <Col span={15}>
+                            <Row>
+                            <h2>Toyota Avanza</h2>
+                            </Row>
+                            <Row style={{marginBottom:10}}>
+                            <Col span={12}>
+                          <h4 style={{color:'grey'}}><Icon type="environment" />At Airport</h4>
+                          <div style={{marginBottom:10}}>
+                              <Tag color="#f50">Air Conditional</Tag>
+                              <Tag color="#2db7f5">Special</Tag>
+                              <Tag color="#87d068">Automatic</Tag>
+                          </div>
+                          <h2 style={{color:'#2962FF'}}>109,132 Poin</h2>
+                            </Col>
+                            <Col span={12}>
+                                <List
+                                size="small"
+                                dataSource={dataAvanza}
+                                renderItem={item => (<List.Item>{item}</List.Item>)}
+                                />
+                            </Col>
+                            </Row>
+                            <Row>
+                            <Col span={24}>
+                              <Button type="primary" block style={{}}>Pesan</Button>
+                          </Col>
+                            </Row>
+                      </Col>
+                  </Row>
+              </Card>
+          </Row>
+          <Row>
+              <Card
+                  style={{marginRight:20,marginBottom:20}}
+              >
+                  <Row>
+                      <Col span={8}>
+                          <img alt="example" src="https://cdn.rcstatic.com/images/car_images/new_images/toyota/innova_lrg.jpg" style={{width:'100%', height:190}} />
+                      </Col>
+                      <Col span={1} />
+                      <Col span={15}>
+                            <Row>
+                            <h2>Toyota Inova</h2>
+                            </Row>
+                            <Row style={{marginBottom:10}}>
+                            <Col span={12}>
+                          <h4 style={{color:'grey'}}><Icon type="environment" />At Airport</h4>
+                          <div style={{marginBottom:10}}>
+                              <Tag color="#f50">Air Conditional</Tag>
+                              <Tag color="#2db7f5">Special</Tag>
+                              <Tag color="#87d068">Automatic</Tag>
+                          </div>
+                          <h2 style={{color:'#2962FF'}}>147,091 Poin</h2>
+                            </Col>
+                            <Col span={12}>
+                                <List
+                                size="small"
+                                dataSource={dataInova}
+                                renderItem={item => (<List.Item>{item}</List.Item>)}
+                                />
+                            </Col>
+                            </Row>
+                            <Row>
+                            <Col span={24}>
+                              <Button type="primary" block style={{}}>Pesan</Button>
+                          </Col>
+                            </Row>
+                      </Col>
+                  </Row>
+              </Card>
+            </Row>
+          </div>
+          <div className="col l3 m3 s3 no-padding">
+            <Affix offsetTop={90}>
+              <Card title="Ringkasan Belanja" bordered={true} style={{ width: '100%' }}>
+                <div style={{display: 'flex',justifyContent:'space-between'}}>
+                    <p>Total Poin</p>
+                    <p>150,100 Poin</p>
+                </div>
+                <Divider />
+                <Button type="primary" block style={{}}>Check out (3)</Button>
+              </Card>
+              </Affix>
+          </div>
+        </div>
+
+
+      </div>
+    )
+  }
+}
diff --git a/src/common/routes.js b/src/common/routes.js
index b0bb2bc..8969b46 100644
--- a/src/common/routes.js
+++ b/src/common/routes.js
@@ -111,6 +111,7 @@ export const LINKS = {
   CAR:'/app/car',
   CAR_SEARCH:'/app/car/search',
   VOUCHERS: '/app/vouchers',
+  CART_DETAIL: '/app/cart',
 };
 
 @inject('appstate')