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