Order

import React, { useState } from "react";
import { View, Text, ScrollView, TextInput, Image, StyleSheet,

TouchableOpacity } from "react-native";
import FontAwesome from "react-native-vector-icons/FontAwesome";
const OrderScreen = ({ navigation }) => {

const [cartItems, setCartItems] = useState([]);
const [customerInfo, setCustomerInfo] = useState({ name: "", email: "",
address: "" });
const [orderNote, setOrderNote] = useState("");
// Example cart items (you should replace this with your own data)
const exampleCartItems = [
{ id: 1, title: "Book 1", price: 10.99, quantity: 2, image:
"https://example.com/book1.jpg" },
];
// Calculate the total price of the order

const calculateTotalPrice = () => {
return exampleCartItems.reduce((total, item) => total + item.price *
item.quantity, 0);
};
return (
<ScrollView style={styles.container}>
<View style={styles.scrollViewContent}>
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<FontAwesome name="arrow-left" size={24} color="black"
mode="contained"/>
</TouchableOpacity>
<Text style={styles.headerText}>Thanh toán</Text>
</View>
<ScrollView contentContainerStyle={styles.cartItemsContainer}>
{exampleCartItems.map((item) => (
<View key={item.id} style={styles.cartItem}>
<View style={styles.productBorder}>
<Image source={{ uri: item.image }}
style={styles.itemImage} />
<View style={styles.itemDetails}>
<Text style={styles.itemTitle}>{item.title}</Text>
<Text style={styles.itemQuantity}>Quantity:
{item.quantity}</Text>
<Text style={styles.itemPrice}>${(item.price *
item.quantity).toFixed(2)}</Text>
</View>
</View>
</View>
))}
</ScrollView>
<View style={styles.customerInfoContainer}>
<Text style={styles.customerInfoTitle}>Customer Information:</Text>
<TextInput
style={styles.input}
placeholder="Name"
value={customerInfo.name}
onChangeText={(text) => setCustomerInfo({ ...customerInfo, name:
text })}
/>
<TextInput
placeholder="Email"
value={customerInfo.email}
onChangeText={(text) => setCustomerInfo({ ...customerInfo, email:
text })}
/>
<TextInput
placeholder="Address"
value={customerInfo.address}
onChangeText={(text) => setCustomerInfo({ ...customerInfo,
address: text })}
/>
</View>
<View style={styles.orderNoteContainer}>
<Text style={styles.orderNoteTitle}>Order Note:</Text>
<TextInput
placeholder="Add a note (optional)"
multiline
numberOfLines={4}
value={orderNote}
onChangeText={(text) => setOrderNote(text)}
/>
</View>
<View style={styles.totalPriceContainer}>
<Text style={styles.totalPriceText}>Total: $
{calculateTotalPrice().toFixed(2)}</Text>
</View>
<TouchableOpacity style={styles.checkoutButton}>
<Text style={styles.checkoutButtonText}>Proceed to Checkout</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({

container: {
flex: 1,
},
scrollViewContent: {
padding: 16,
},
header: {
flexDirection: "row",
alignItems: "center",
marginBottom: 16,
},
headerText: {
fontSize: 24,
fontWeight: "bold",
marginLeft: 16,
},
cartItemsContainer: {
marginBottom: 16,
},
cartItem: {
justifyContent: "space-between",
marginBottom: 16,
},
productBorder: {
borderWidth: 1,
borderColor: "#ddd", // Màu viền
padding: 8,
borderRadius: 5, // Độ bo góc của khung
elevation: 2,
},
itemImage: {
width: 80,
height: 120,
},
itemDetails: {
flex: 1,
marginLeft: 12,
},
itemTitle: {
fontSize: 20,
padding: 5,
},
itemQuantity: {
fontSize: 16,
},
itemPrice: {
fontSize: 18,
padding: 5,
},
customerInfoContainer: {
padding: 16,
backgroundColor: "#f2f2f2",
marginBottom: 16,
},
customerInfoTitle: {
fontSize: 20,
fontWeight: "bold",
color: "teal",
},
input: {
height: 40,
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 5,
marginTop: 8,
padding: 8,
},
orderNoteContainer: {
padding: 16,
marginBottom: 16,
},
orderNoteTitle: {
fontSize: 20,
fontWeight: "bold",
color: "teal",
},
totalPriceContainer: {
padding: 16,
},
totalPriceText: {
fontSize: 20,
fontWeight: "bold",
},
checkoutButton: {
backgroundColor: "#00ABE0",
padding: 16,
borderRadius: 5,
},
checkoutButtonText: {
color: "white",
fontSize: 20,
},
});
export default OrderScreen;

Order

Uploaded by

Copyright:

Available Formats

Order

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Order

Uploaded by

Copyright:

Available Formats

import React, { useState } from "react";

import { View, Text, ScrollView, TextInput, Image, StyleSheet,

const OrderScreen = ({ navigation }) => {

// Calculate the total price of the order

const styles = StyleSheet.create({

export default OrderScreen;

You might also like