Skip to content

Commit

Permalink
Added checkout page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ATF19
ATF19 committed Aug 23, 2017
1 parent ba64fcb commit fbb3446
Show file tree
Hide file tree
Showing 7 changed files with 155 additions and 31 deletions.
12 changes: 9 additions & 3 deletions src/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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(
<Root>
<Router>
<Scene key="root">
<Scene initial={true} key="home" component={Home} hideNavBar />
<Scene initial key="home" component={Home} hideNavBar />
<Scene key="search" component={Search} modal hideNavBar />
<Scene key="cart" component={Cart} modal hideNavBar />
<Scene key="wishlist" component={WishList} modal hideNavBar />
Expand All @@ -42,6 +47,7 @@ export default class Main extends Component {
<Scene key="imageGallery" component={ImageGallery} modal hideNavBar />
<Scene key="login" component={Login} hideNavBar />
<Scene key="signup" component={Signup} hideNavBar />
<Scene key="checkout" component={Checkout} hideNavBar />
</Scene>
</Router>
</Root>
Expand Down
7 changes: 6 additions & 1 deletion src/component/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default class Navbar extends Component {
noShadow={true}
>
{this.props.left ? this.props.left : <Left style={{flex: 1}} />}
<Body style={{flex:1, justifyContent: 'center', alignItems: 'center' }}>
<Body style={styles.body}>
<Title style={styles.title}>{this.props.title}</Title>
</Body>
{this.props.right ? this.props.right : <Right style={{flex: 1}} />}
Expand All @@ -33,6 +33,11 @@ export default class Navbar extends Component {
}

const styles={
body: {
flex:1,
justifyContent: 'center',
alignItems: 'center'
},
title: {
fontFamily: 'Roboto',
fontWeight: '100'
Expand Down
6 changes: 4 additions & 2 deletions src/component/Product.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ export default class product extends Component {
<Col style={this.props.isRight ? style.leftMargin : style.rightMargin}>
<Card transparent>
<CardItem cardBody>
<Button transparent style={{flex: 1, height: 250, paddingLeft: 4, paddingRight: 4}} onPress={() => this.pressed()}>
<Image source={{uri: this.props.product.image}} style={{height: 250, width: null, flex: 1}}/>
<Button transparent style={style.button} onPress={() => this.pressed()}>
<Image source={{uri: this.props.product.image}} style={style.image}/>
<View style={style.border} />
</Button>
</CardItem>
Expand Down Expand Up @@ -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,
Expand Down
17 changes: 0 additions & 17 deletions src/page/Buy.js
View file

This file was deleted.

2 changes: 1 addition & 1 deletion src/page/Cart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export default class Cart extends Component {
}

checkout() {
alert('checkout');
Actions.checkout({cartItems: this.state.cartItems});
}

itemClicked(item) {
Expand Down
140 changes: 135 additions & 5 deletions src/page/Checkout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 = (
Expand All @@ -38,16 +60,124 @@ export default class Checkout extends Component {
return(
<Container style={{backgroundColor: '#fdfdfd'}}>
<Navbar left={left} right={right} title="CHECKOUT" />
<Content>
<Text>Checkout</Text>
<Content padder>
<TouchableHighlight onPress={() => Actions.login()}>
<View style={{flex: 1, alignItems: 'center', backgroundColor: '#6fafc4', paddingTop: 20, paddingBottom: 20}}>
<Icon name="ios-warning" style={{color: 'rgba(253, 253, 253, 0.9)', marginRight: 20, position: 'absolute', left: 11, top: 15, borderRightWidth: 1, borderColor: 'rgba(253, 253, 253, 0.2)', paddingRight: 10}}/>
<Text style={{color: '#fdfdfd'}}>Returning customer ? click here to login</Text>
</View>
</TouchableHighlight>
<View>
<Text style={{marginTop: 15, fontSize: 18}}>Shipping information</Text>
<Item regular style={{marginTop: 7}}>
<Input placeholder='Name' onChangeText={(text) => this.setState({name: text})} placeholderTextColor="#687373" />
</Item>
<Item regular style={{marginTop: 7}}>
<Input placeholder='Email' onChangeText={(text) => this.setState({email: text})} placeholderTextColor="#687373" />
</Item>
<Item regular style={{marginTop: 7}}>
<Input placeholder='Phone' onChangeText={(text) => this.setState({phone: text})} placeholderTextColor="#687373" />
</Item>
<Item regular style={{marginTop: 7}}>
<Input placeholder='Country' onChangeText={(text) => this.setState({country: text})} placeholderTextColor="#687373" />
</Item>
<Item regular style={{marginTop: 7}}>
<Input placeholder='Address' onChangeText={(text) => this.setState({address: text})} placeholderTextColor="#687373" />
</Item>
<Item regular style={{marginTop: 7}}>
<Input placeholder='City' onChangeText={(text) => this.setState({city: text})} placeholderTextColor="#687373" />
</Item>
<Item regular style={{marginTop: 7}}>
<Input placeholder='Postcode' onChangeText={(text) => this.setState({postcode: text})} placeholderTextColor="#687373" />
</Item>
<Item regular style={{marginTop: 7}}>
<Input placeholder='Note' onChangeText={(text) => this.setState({note: text})} placeholderTextColor="#687373" />
</Item>
</View>
<Text style={{marginTop: 15, fontSize: 18}}>Your order</Text>
<View style={styles.invoice}>
<List>
{this.renderItems()}
</List>
<View style={styles.line} />
<Grid style={{paddingLeft: 10, paddingRight: 10, marginTop: 7}}>
<Col>
<Text style={{fontSize: 18, fontStyle: 'italic'}}>Total</Text>
</Col>
<Col>
<Text style={{textAlign: 'right', fontSize: 18, fontWeight: 'bold'}}>{this.state.total+"$"}</Text>
</Col>
</Grid>
</View>
<View>
<Text style={{marginTop: 15, marginBottom: 7, fontSize: 18}}>Payement method</Text>
<ListItem style={{borderWidth: 1, borderColor: 'rgba(149, 165, 166, 0.3)', paddingLeft: 10, marginLeft: 0}}>
<Text>Pay with card</Text>
<FAIcon name="cc-mastercard" size={20} color="#c0392b" style={{marginLeft: 7}} />
<FAIcon name="cc-visa" size={20} color="#2980b9" style={{marginLeft: 2}} />
<Right>
<Radio selected={this.state.card} onPress={() => this.setState({card: true, paypal: false})} />
</Right>
</ListItem>
<ListItem style={{borderWidth: 1, borderColor: 'rgba(149, 165, 166, 0.3)', paddingLeft: 10, marginLeft: 0, borderTopWidth: 0}}>
<Text>Pay with Paypal</Text>
<FAIcon name="cc-paypal" size={20} color="#34495e" style={{marginLeft: 7}} />
<Right>
<Radio selected={this.state.paypal} onPress={() => this.setState({card: false, paypal: true})} />
</Right>
</ListItem>
</View>
<View style={{marginTop: 10, marginBottom: 10, paddingBottom: 7}}>
<Button onPress={() => this.checkout()} style={{backgroundColor: Colors.navbarBackgroundColor}} block iconLeft>
<Icon name='ios-card' />
<Text style={{color: '#fdfdfd'}}>Proceed to payement</Text>
</Button>
</View>
</Content>
</Container>
);
}

signup() {
alert("Checkout"):
renderItems() {
let items = [];
this.state.cartItems.map((item, i) => {
items.push(
<ListItem
key={i}
style={{marginLeft: 0}}
>
<Body style={{paddingLeft: 10}}>
<Text style={{fontSize: 18}}>
{item.quantity > 1 ? item.quantity+"x " : null}
{item.title}
</Text>
<Text style={{fontSize: 14 ,fontStyle: 'italic'}}>Color: {item.color}</Text>
<Text style={{fontSize: 14 ,fontStyle: 'italic'}}>Size: {item.size}</Text>
</Body>
<Right>
<Text style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>{item.price}</Text>
</Right>
</ListItem>
);
});
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'
}
};
2 changes: 0 additions & 2 deletions src/page/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -48,7 +47,6 @@ export default class Login extends Component {
<Navbar left={left} right={right} title="LOGIN" />
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingLeft: 50, paddingRight: 50}}>
<View style={{marginBottom: 35, width: '100%'}}>
<Image source={require('../component/logo.png')} style={{width: 40, height: 40, marginBottom: 7}}/>
<Text style={{fontSize: 24, fontWeight: 'bold', textAlign: 'left', width: '100%', color: Colors.navbarBackgroundColor}}>Welcome back, </Text>
<Text style={{fontSize: 18, textAlign: 'left', width: '100%', color: '#687373'}}>Login to continue </Text>
</View>
Expand Down

0 comments on commit fbb3446

Please sign in to comment.