From fbb3446c206348fba8fef11497f00dc983b95481 Mon Sep 17 00:00:00 2001 From: ATF19 Date: Wed, 23 Aug 2017 21:31:56 +0100 Subject: [PATCH] Added checkout page --- src/Main.js | 12 +++- src/component/Navbar.js | 7 +- src/component/Product.js | 6 +- src/page/Buy.js | 17 ----- src/page/Cart.js | 2 +- src/page/Checkout.js | 140 +++++++++++++++++++++++++++++++++++++-- src/page/Login.js | 2 - 7 files changed, 155 insertions(+), 31 deletions(-) delete mode 100644 src/page/Buy.js diff --git a/src/Main.js b/src/Main.js index 271cf5b..f43c447 100644 --- a/src/Main.js +++ b/src/Main.js @@ -5,8 +5,9 @@ // React native and others libraries imports import React, { Component } from 'react'; +import { BackHandler } from 'react-native'; import { Root } from 'native-base'; -import { Scene, Router } from 'react-native-router-flux'; +import { Scene, Router, Actions } from 'react-native-router-flux'; // Our custom files and classes import @@ -22,15 +23,19 @@ import Product from './page/Product'; import ImageGallery from './page/ImageGallery'; import Login from './page/Login'; import Signup from './page/Signup'; - +import Checkout from './page/Checkout'; export default class Main extends Component { + componentWillMount = () => { + BackHandler.addEventListener('hardwareBackPress', () => Actions.pop()); + }; + render() { return( - + @@ -42,6 +47,7 @@ export default class Main extends Component { + diff --git a/src/component/Navbar.js b/src/component/Navbar.js index ca7f0f1..d2f246a 100644 --- a/src/component/Navbar.js +++ b/src/component/Navbar.js @@ -23,7 +23,7 @@ export default class Navbar extends Component { noShadow={true} > {this.props.left ? this.props.left : } - + {this.props.title} {this.props.right ? this.props.right : } @@ -33,6 +33,11 @@ export default class Navbar extends Component { } const styles={ + body: { + flex:1, + justifyContent: 'center', + alignItems: 'center' + }, title: { fontFamily: 'Roboto', fontWeight: '100' diff --git a/src/component/Product.js b/src/component/Product.js index 52441d6..90c1bc6 100644 --- a/src/component/Product.js +++ b/src/component/Product.js @@ -18,8 +18,8 @@ export default class product extends Component { - @@ -52,6 +52,8 @@ export default class product extends Component { } const style = { + button: {flex: 1, height: 250, paddingLeft: 4, paddingRight: 4}, + image: {height: 250, width: null, flex: 1}, leftMargin: { marginLeft: 7, marginRight: 0, diff --git a/src/page/Buy.js b/src/page/Buy.js deleted file mode 100644 index aa8c181..0000000 --- a/src/page/Buy.js +++ /dev/null @@ -1,17 +0,0 @@ -/** -* This is the Main file -**/ - -// React native and others libraries imports -import React, { Component } from 'react'; - -// Our custom files and classes import - - -export default class Buy extends Component { - render() { - return( - - ); - } -} diff --git a/src/page/Cart.js b/src/page/Cart.js index 39756b5..4927ff5 100644 --- a/src/page/Cart.js +++ b/src/page/Cart.js @@ -137,7 +137,7 @@ export default class Cart extends Component { } checkout() { - alert('checkout'); + Actions.checkout({cartItems: this.state.cartItems}); } itemClicked(item) { diff --git a/src/page/Checkout.js b/src/page/Checkout.js index 203127a..5dd2e06 100644 --- a/src/page/Checkout.js +++ b/src/page/Checkout.js @@ -4,7 +4,9 @@ // React native and others libraries imports import React, { Component } from 'react'; -import { Container, Content, Left, Right, Button, Icon } from 'native-base'; +import { TouchableHighlight, AsyncStorage } from 'react-native'; +import { Container, Content, View, Grid, Col, Left, Right, Button, Icon, List, ListItem, Body, Radio, Input, Item } from 'native-base'; +import FAIcon from 'react-native-vector-icons/FontAwesome'; import { Actions } from 'react-native-router-flux'; // Our custom files and classes import @@ -16,9 +18,29 @@ export default class Checkout extends Component { constructor(props) { super(props); this.state = { + cartItems: [], + total: 0, + card: true, + paypal: false, + name: '', + email: '', + phone: '', + country: '', + address: '', + city: '', + postcode: '', + note: '' }; } + componentWillMount() { + this.setState({cartItems: this.props.cartItems}); + this.props.cartItems.map((item) => { + var total = 0; + total += parseFloat(item.price) * parseInt(item.quantity); + this.setState({total: total}); + }); + } render() { var left = ( @@ -38,16 +60,124 @@ export default class Checkout extends Component { return( - - Checkout + + Actions.login()}> + + + Returning customer ? click here to login + + + + Shipping information + + this.setState({name: text})} placeholderTextColor="#687373" /> + + + this.setState({email: text})} placeholderTextColor="#687373" /> + + + this.setState({phone: text})} placeholderTextColor="#687373" /> + + + this.setState({country: text})} placeholderTextColor="#687373" /> + + + this.setState({address: text})} placeholderTextColor="#687373" /> + + + this.setState({city: text})} placeholderTextColor="#687373" /> + + + this.setState({postcode: text})} placeholderTextColor="#687373" /> + + + this.setState({note: text})} placeholderTextColor="#687373" /> + + + Your order + + + {this.renderItems()} + + + + + Total + + + {this.state.total+"$"} + + + + + Payement method + + Pay with card + + + + this.setState({card: true, paypal: false})} /> + + + + Pay with Paypal + + + this.setState({card: false, paypal: true})} /> + + + + + + ); } - signup() { - alert("Checkout"): + renderItems() { + let items = []; + this.state.cartItems.map((item, i) => { + items.push( + + + + {item.quantity > 1 ? item.quantity+"x " : null} + {item.title} + + Color: {item.color} + Size: {item.size} + + + {item.price} + + + ); + }); + return items; } + checkout() { + console.log(this.state); + alert("Check the log"); + } } + +const styles = { + invoice: { + paddingLeft: 20, + paddingRight: 20 + }, + line: { + width: '100%', + height: 1, + backgroundColor: '#bdc3c7' + } +}; diff --git a/src/page/Login.js b/src/page/Login.js index fcda8c6..c225a74 100644 --- a/src/page/Login.js +++ b/src/page/Login.js @@ -4,7 +4,6 @@ // React native and others libraries imports import React, { Component } from 'react'; -import { Image } from 'react-native'; import { Container, View, Left, Right, Button, Icon, Item, Input } from 'native-base'; import { Actions } from 'react-native-router-flux'; @@ -48,7 +47,6 @@ export default class Login extends Component { - Welcome back, Login to continue