diff options
| -rw-r--r-- | src/screens/Auth/LoginScreen.js | 2 | ||||
| -rw-r--r-- | src/screens/Cart/CartScreen.js | 55 | ||||
| -rw-r--r-- | src/screens/Checkout/CheckoutScreen.js | 75 |
3 files changed, 119 insertions, 13 deletions
diff --git a/src/screens/Auth/LoginScreen.js b/src/screens/Auth/LoginScreen.js index c74fed4..3912e65 100644 --- a/src/screens/Auth/LoginScreen.js +++ b/src/screens/Auth/LoginScreen.js @@ -22,7 +22,7 @@ const LoginScreen = ({ navigation }) => { }; const handleTesting = () => { - console.log("Navigating to Forgot Password"); + console.log("Navigating to Testing channel"); // Navigate to the forgot password screen navigation.navigate('MallSelection'); }; diff --git a/src/screens/Cart/CartScreen.js b/src/screens/Cart/CartScreen.js index 392e665..b8ca0e4 100644 --- a/src/screens/Cart/CartScreen.js +++ b/src/screens/Cart/CartScreen.js @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { View, Text, Button } from 'react-native'; +import { View, Text, Button, StyleSheet, ScrollView } from 'react-native'; import { CartContext } from '../../context/CartContext'; const CartScreen = ({ navigation }) => { @@ -8,16 +8,57 @@ const CartScreen = ({ navigation }) => { const handleCheckout = () => navigation.navigate('Checkout'); return ( - <View> + <ScrollView contentContainerStyle={styles.container}> {cart.map((item, index) => ( - <View key={index}> - <Text>{item.name} - Quantity: {item.quantity}</Text> - <Button title="Increase Quantity" onPress={() => updateQuantity(item.id, item.quantity + 1)} /> + <View key={index} style={styles.itemContainer}> + <Text style={styles.itemText}>{item.name}</Text> + <Text style={styles.quantityText}>Quantity: {item.quantity}</Text> + <Button + title="Increase Quantity" + onPress={() => updateQuantity(item.id, item.quantity + 1)} + /> </View> ))} - <Button title="Proceed to Checkout" onPress={handleCheckout} /> - </View> + <View style={styles.checkoutButton}> + <Button title="Proceed to Checkout" onPress={handleCheckout} /> + </View> + </ScrollView> ); }; +const styles = StyleSheet.create({ + container: { + padding: 16, + backgroundColor: '#f8f9fa', + }, + itemContainer: { + backgroundColor: '#ffffff', + padding: 16, + borderRadius: 8, + marginBottom: 12, + elevation: 2, // for subtle shadow on Android + shadowColor: '#000', // for iOS shadow + shadowOpacity: 0.2, + shadowRadius: 3, + shadowOffset: { width: 1, height: 2 }, + }, + itemText: { + fontSize: 18, + fontWeight: 'bold', + color: '#333', + marginBottom: 4, + }, + quantityText: { + fontSize: 16, + color: '#666', + marginBottom: 8, + }, + checkoutButton: { + marginTop: 20, + paddingVertical: 10, + borderRadius: 8, + }, +}); + export default CartScreen; + diff --git a/src/screens/Checkout/CheckoutScreen.js b/src/screens/Checkout/CheckoutScreen.js index a8645d2..4cd8938 100644 --- a/src/screens/Checkout/CheckoutScreen.js +++ b/src/screens/Checkout/CheckoutScreen.js @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { View, Text, Button } from 'react-native'; +import { View, Text, Button, StyleSheet, ScrollView } from 'react-native'; import { CartContext } from '../../context/CartContext'; import emailService from '../../services/emailService'; @@ -13,14 +13,79 @@ const CheckoutScreen = ({ navigation }) => { navigation.navigate('Invoice'); }; + const totalAmount = cart.reduce((total, item) => total + item.price * item.quantity, 0); + return ( - <View> + <ScrollView contentContainerStyle={styles.container}> + <Text style={styles.title}>Checkout</Text> {cart.map((item, index) => ( - <Text key={index}>{item.name} - ${item.price * item.quantity}</Text> + <View key={index} style={styles.itemContainer}> + <Text style={styles.itemText}>{item.name}</Text> + <Text style={styles.priceText}>${(item.price * item.quantity).toFixed(2)}</Text> + </View> ))} - <Button title="Confirm and Pay" onPress={handlePayment} /> - </View> + <View style={styles.totalContainer}> + <Text style={styles.totalText}>Total: ${totalAmount.toFixed(2)}</Text> + </View> + <View style={styles.buttonContainer}> + <Button title="Confirm and Pay" onPress={handlePayment} /> + </View> + </ScrollView> ); }; +const styles = StyleSheet.create({ + container: { + padding: 16, + backgroundColor: '#f8f9fa', + }, + title: { + fontSize: 24, + fontWeight: 'bold', + marginBottom: 20, + textAlign: 'center', + }, + itemContainer: { + backgroundColor: '#ffffff', + padding: 16, + borderRadius: 8, + marginBottom: 12, + elevation: 2, + shadowColor: '#000', + shadowOpacity: 0.2, + shadowRadius: 3, + shadowOffset: { width: 1, height: 2 }, + }, + itemText: { + fontSize: 18, + color: '#333', + }, + priceText: { + fontSize: 16, + color: '#888', + }, + totalContainer: { + marginTop: 20, + padding: 16, + backgroundColor: '#ffffff', + borderRadius: 8, + elevation: 2, + shadowColor: '#000', + shadowOpacity: 0.2, + shadowRadius: 3, + shadowOffset: { width: 1, height: 2 }, + }, + totalText: { + fontSize: 20, + fontWeight: 'bold', + textAlign: 'center', + color: '#333', + }, + buttonContainer: { + marginTop: 20, + borderRadius: 8, + }, +}); + export default CheckoutScreen; + |