Commit 381c7b30 authored by Gijs Hendriksen's avatar Gijs Hendriksen
Browse files

Merge branch 'use-cardsection-in-pizzas' into 'master'

Replace card styling by reusable CardSection in Pizza screen

See merge request !183
parents aaa39244 4f10678f
......@@ -5,5 +5,6 @@
"The order has not yet been paid for.": "Je bestelling is nog niet betaald.",
"Changing your order": "Bestelling bewerken",
"Sorry! We couldn't load any data.": "Sorry! We konden geen gegevens laden.",
"There is currently no event for which you can order food.": "Er is geen evenement waarvoor je eten kunt bestellen."
"There is currently no event for which you can order food.": "Er is geen evenement waarvoor je eten kunt bestellen.",
"Current order": "Huidige bestelling"
}
......@@ -7,9 +7,11 @@ import styles from './style/CardSection';
const CardSection = props => (
<View style={[styles.section, props.style]}>
<Text style={styles.sectionHeader}>
{props.sectionHeader}
</Text>
{props.sectionHeader !== null && (
<Text style={styles.sectionHeader}>
{props.sectionHeader}
</Text>
)}
<View style={[styles.card, props.contentStyle]}>
{props.children}
</View>
......
......@@ -13,6 +13,7 @@ import ErrorScreen from '../../components/errorScreen/ErrorScreen';
import { retrievePizzaInfo, cancelOrder, orderPizza } from '../../../actions/pizza';
import styles from './style/Pizza';
import Colors from '../../style/Colors';
import CardSection from '../../components/cardSection/CardSection';
class Pizza extends Component {
getProductFromList = (pk, pizzaList) => {
......@@ -26,10 +27,10 @@ class Pizza extends Component {
getEventInfo = (title, subtitle) => (
<View style={styles.eventInfo}>
<Text style={styles.title}>
<Text style={styles.eventTitle}>
{this.props.t('Order pizza for {{title}}', { title })}
</Text>
<Text style={styles.subtitle}>
<Text style={styles.eventSubtitle}>
{subtitle}
</Text>
</View>
......@@ -40,7 +41,10 @@ class Pizza extends Component {
const productInfo = this.getProductFromList(order.product, pizzaList);
return (
<View
style={[styles.overview, order.paid ? styles.greenBackground : styles.redBackground]}
style={[
styles.overviewContainer,
order.paid ? styles.greenBackground : styles.redBackground,
]}
>
<Text
style={styles.overviewText}
......@@ -52,7 +56,7 @@ class Pizza extends Component {
);
}
return (
<Text style={styles.header}>
<Text style={styles.overviewNoOrder}>
{this.props.t('You did not place an order.')}
</Text>
);
......@@ -63,96 +67,84 @@ class Pizza extends Component {
const productInfo = this.getProductFromList(order.product, pizzaList);
return (
<View style={styles.section}>
<Text style={styles.header}>
Current order
</Text>
<View style={styles.card}>
<View
style={[styles.orderStatus, order.paid ? styles.paidStatus : styles.notPaidStatus]}
>
<Text style={styles.orderStatusText}>
{order.paid && this.props.t('The order has been paid for.')}
{!order.paid && this.props.t('The order has not yet been paid for.')}
</Text>
</View>
<View style={[styles.pizzaContainer, styles.orderedPizzaContainer]}>
<View style={styles.pizzaInfo}>
<Text style={styles.pizzaName}>
{productInfo.name}
</Text>
<Text style={styles.pizzaDescription}>
{productInfo.description}
</Text>
<Text style={styles.pizzaPrice}>
{productInfo.price}
</Text>
</View>
{(!order.paid && !hasEnded) && (
<TouchableHighlight
onPress={() => this.props.cancelOrder()}
style={styles.button}
underlayColor={Colors.darkMagenta}
>
<Icon
name="delete"
color={Colors.white}
size={18}
/>
</TouchableHighlight>
)}
</View>
</View>
</View>
);
}
return null;
};
getPizzaList = (pizzaList, hasOrder) => (
<View style={styles.section}>
{hasOrder && (
<Text style={styles.header}>
{this.props.t('Changing your order')}
</Text>
)}
<View style={[styles.card, styles.pizzaList]}>
{pizzaList.map(pizza => (
<CardSection sectionHeader={this.props.t('Current order')}>
<View
key={pizza.pk}
style={styles.pizzaContainer}
style={[styles.orderStatus, order.paid ? styles.paidStatus : styles.notPaidStatus]}
>
<Text style={styles.orderStatusText}>
{order.paid && this.props.t('The order has been paid for.')}
{!order.paid && this.props.t('The order has not yet been paid for.')}
</Text>
</View>
<View style={[styles.pizzaContainer, styles.orderedPizzaContainer]}>
<View style={styles.pizzaInfo}>
<Text style={styles.pizzaName}>
{pizza.name}
{productInfo.name}
</Text>
<Text style={styles.pizzaDescription}>
{pizza.description}
{productInfo.description}
</Text>
<Text style={styles.pizzaPrice}>
{pizza.price}
{productInfo.price}
</Text>
</View>
<TouchableHighlight
onPress={() => {
this.props.orderPizza(pizza.pk, hasOrder);
this.pizzaScroll.scrollTo({ x: 0, y: 0, animated: true });
}}
style={styles.button}
underlayColor={Colors.darkMagenta}
>
<Icon
name="add-shopping-cart"
color={Colors.white}
size={18}
/>
</TouchableHighlight>
{(!order.paid && !hasEnded) && (
<TouchableHighlight
onPress={() => this.props.cancelOrder()}
style={styles.button}
underlayColor={Colors.darkMagenta}
>
<Icon
name="delete"
color={Colors.white}
size={18}
/>
</TouchableHighlight>
)}
</View>
))}
</View>
</View>
</CardSection>
);
}
return null;
};
getPizzaList = (pizzaList, hasOrder) => (
<CardSection sectionHeader={hasOrder ? this.props.t('Changing your order') : null} contentStyle={styles.pizzaList}>
{pizzaList.map((pizza, i) => (
<View
key={pizza.pk}
style={i === 0 ? styles.pizzaContainer : [styles.borderTop, styles.pizzaContainer]}
>
<View style={styles.pizzaInfo}>
<Text style={styles.pizzaName}>
{pizza.name}
</Text>
<Text style={styles.pizzaDescription}>
{pizza.description}
</Text>
<Text style={styles.pizzaPrice}>
{pizza.price}
</Text>
</View>
<TouchableHighlight
onPress={() => {
this.props.orderPizza(pizza.pk, hasOrder);
this.pizzaScroll.scrollTo({ x: 0, y: 0, animated: true });
}}
style={styles.button}
underlayColor={Colors.darkMagenta}
>
<Icon
name="add-shopping-cart"
color={Colors.white}
size={18}
/>
</TouchableHighlight>
</View>
))}
</CardSection>
);
handleRefresh = () => {
......
......@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
eventInfo: {
padding: 8,
},
title: {
eventTitle: {
android: {
fontFamily: 'sans-serif-medium',
},
......@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
fontSize: 20,
marginBottom: 8,
},
subtitle: {
eventSubtitle: {
android: {
fontFamily: 'sans-serif-medium',
},
......@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
color: Colors.textColour,
fontSize: 14,
},
overview: {
overviewContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
......@@ -69,11 +69,7 @@ const styles = StyleSheet.create({
backgroundColor: Colors.lightRed,
borderColor: Colors.darkRed,
},
section: {
marginTop: 8,
marginBottom: 8,
},
header: {
overviewNoOrder: {
android: {
fontFamily: 'sans-serif-medium',
},
......@@ -83,23 +79,10 @@ const styles = StyleSheet.create({
},
color: Colors.textColour,
fontSize: 14,
paddingLeft: 10,
paddingLeft: 8,
paddingTop: 6,
paddingBottom: 6,
},
card: {
backgroundColor: Colors.white,
elevation: 2,
android: {
borderRadius: 2,
},
ios: {
borderRadius: 4,
borderColor: Colors.lightGray,
borderStyle: 'solid',
borderWidth: 0.5,
},
},
orderStatusText: {
android: {
fontFamily: 'sans-serif-medium',
......@@ -139,10 +122,10 @@ const styles = StyleSheet.create({
paddingRight: 16,
paddingTop: 8,
paddingBottom: 8,
android: {
borderBottomWidth: 1,
borderBottomColor: Colors.dividerGrey,
},
},
borderTop: {
borderTopWidth: 1,
borderTopColor: Colors.dividerGrey,
},
orderedPizzaContainer: {
paddingTop: 16,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment