Dennis Hundertmark
92 lines
2.2 KiB
TypeScript
92 lines
2.2 KiB
TypeScript
import CartItem from "@/components/CartItem";
|
|
import useCartStore from "@/store/cartStore";
|
|
import { COLORS } from "@/utils/colors";
|
|
import Ionicons from "@expo/vector-icons/Ionicons";
|
|
import { useRouter } from "expo-router";
|
|
import {
|
|
Alert,
|
|
FlatList,
|
|
Platform,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
|
|
const Page = () => {
|
|
const { products, total, clearCart } = useCartStore();
|
|
const { bottom } = useSafeAreaInsets();
|
|
const router = useRouter();
|
|
|
|
const handleCheckout = () => {
|
|
if (products.length === 0) {
|
|
Alert.alert("Add some products to your cart first!");
|
|
return;
|
|
}
|
|
clearCart();
|
|
Alert.alert("Checkout successful!");
|
|
router.dismiss();
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{products.length === 0 && (
|
|
<Text style={styles.emptyText}>No products in the cart</Text>
|
|
)}
|
|
<FlatList
|
|
data={products}
|
|
contentContainerStyle={{ gap: 10 }}
|
|
renderItem={({ item }) => <CartItem item={item} />}
|
|
keyExtractor={(item) => item.id.toString()}
|
|
ListHeaderComponent={() => (
|
|
<>
|
|
{products.length && (
|
|
<Text style={styles.totalText}>Total: ${total.toFixed(2)}</Text>
|
|
)}
|
|
</>
|
|
)}
|
|
/>
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.addToCartButton,
|
|
{ paddingBottom: Platform.OS === "ios" ? bottom : 20 },
|
|
]}
|
|
onPress={handleCheckout}
|
|
>
|
|
<Ionicons name="checkmark" size={20} color="white" />
|
|
<Text style={styles.addToCartText}>Checkout</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
};
|
|
export default Page;
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#fff",
|
|
},
|
|
emptyText: {
|
|
textAlign: "center",
|
|
},
|
|
totalText: {
|
|
fontSize: 20,
|
|
fontWeight: "bold",
|
|
textAlign: "center",
|
|
padding: 10,
|
|
},
|
|
addToCartButton: {
|
|
backgroundColor: COLORS.primary,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 8,
|
|
padding: 16,
|
|
},
|
|
addToCartText: {
|
|
color: "white",
|
|
fontWeight: "600",
|
|
fontSize: 16,
|
|
},
|
|
});
|