Scribd
Upload
12 views5 pages

Order

This React Native code defines an OrderScreen component to display order information. It uses state to manage the cart items, customer info, and order note. It maps over example cart items to display the item details. Inputs are used to collect customer info. The total price is calculated and displayed. A checkout button is included to proceed to checkout. Styles are defined to layout and style the various elements.

Uploaded by

27-Nguyễn Thúy Hường
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views5 pages

Order

This React Native code defines an OrderScreen component to display order information. It uses state to manage the cart items, customer info, and order note. It maps over example cart items to display the item details. Inputs are used to collect customer info. The total price is calculated and displayed. A checkout button is included to proceed to checkout. Styles are defined to layout and style the various elements.

Uploaded by

27-Nguyễn Thúy Hường
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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" },
{ id: 2, title: "Book 2", price: 15.99, quantity: 1, image:
"https://example.com/book2.jpg" },
{ id: 3, title: "Book 3", price: 9.99, quantity: 3, image:
"https://example.com/book3.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
style={styles.input}
placeholder="Email"
value={customerInfo.email}
onChangeText={(text) => setCustomerInfo({ ...customerInfo, email:
text })}
/>
<TextInput
style={styles.input}
placeholder="Address"
value={customerInfo.address}
onChangeText={(text) => setCustomerInfo({ ...customerInfo,
address: text })}
/>
</View>

<View style={styles.orderNoteContainer}>
<Text style={styles.orderNoteTitle}>Order Note:</Text>
<TextInput
style={styles.input}
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: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginBottom: 16,
},
productBorder: {
borderWidth: 1,
borderColor: "#ddd", // Màu viền
flexDirection: "row",
alignItems: "center",
padding: 8,
borderRadius: 5, // Độ bo góc của khung
elevation: 2,
},
itemImage: {
width: 80,
height: 120,
},
itemDetails: {
flex: 1,
marginLeft: 12,
alignItems: "center",
},
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,
backgroundColor: "#f2f2f2",
marginBottom: 16,
},
orderNoteTitle: {
fontSize: 20,
fontWeight: "bold",
color: "teal",
},
totalPriceContainer: {
backgroundColor: "#f2f2f2",
padding: 16,
},
totalPriceText: {
fontSize: 20,
fontWeight: "bold",
},
checkoutButton: {
backgroundColor: "#00ABE0",
alignItems: "center",
padding: 16,
borderRadius: 5,
},
checkoutButtonText: {
color: "white",
fontSize: 20,
},
});

export default OrderScreen;

You might also like