You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
619 lines
16 KiB
619 lines
16 KiB
import React, { useEffect, useState } from "react"; |
|
import { |
|
View, |
|
Text, |
|
Image, |
|
StyleSheet, |
|
TouchableOpacity, |
|
ScrollView, |
|
} from "react-native"; |
|
import BackIcon from "../components/BackIcon"; |
|
import fontSize from "../utils/fontsizeUtils"; |
|
import CircleOutlineIcon from "../components/CircleOutlineIcon"; |
|
import { getCartList, GetCartList } from "../services/api/cart"; |
|
import widthUtils from "../utils/widthUtils"; |
|
export const CartScreen = () => { |
|
const [cartList, setCartList] = useState<GetCartList[]>([]); |
|
const getCart = async () => { |
|
const res = await getCartList(); |
|
console.log(res); |
|
|
|
setCartList(res.items); |
|
}; |
|
useEffect(() => { |
|
getCart(); |
|
}, []); |
|
return ( |
|
<View style={styles.shoppingCartLayout}> |
|
<ScrollView |
|
style={styles.scrollContainer} |
|
contentContainerStyle={styles.scrollContentContainer} |
|
> |
|
<View style={styles.productListingContainer}> |
|
<View style={styles.shoppingCartSection}> |
|
<View style={styles.productCardContainer7}> |
|
<View style={styles.svgContainer}> |
|
{/* Replace SVG with actual icon component or image */} |
|
<BackIcon size={fontSize(18)} /> |
|
</View> |
|
<Text style={styles.shoppingCartTitle}>Panier (5)</Text> |
|
</View> |
|
{cartList.map((item) => ( |
|
<View style={styles.productCardListing}> |
|
<View style={styles.productCardContainer5}> |
|
<View style={styles.svgContainer1}> |
|
<CircleOutlineIcon size={fontSize(24)} /> |
|
</View> |
|
<Image |
|
source={{ uri: item.product_image }} |
|
style={styles.imageThumbnail} |
|
/> |
|
<View style={styles.productInfoContainer2}> |
|
<Text style={styles.casualTextSnippet}>{item.subject}</Text> |
|
<Text style={styles.productDetailsTextStyle1}> |
|
Commande min. : {item.quantity}pièces |
|
</Text> |
|
</View> |
|
</View> |
|
<View |
|
style={[ |
|
styles.productCardContainer5, |
|
styles.productCardContainer4, |
|
]} |
|
> |
|
<View style={styles.svgContainer1}> |
|
{/* Replace SVG with actual icon component or image */} |
|
<CircleOutlineIcon size={fontSize(24)} /> |
|
{/* <Image source={require('./assets/selected_icon.png')} style={{width: 24, height: 24}} /> */} |
|
</View> |
|
<Image |
|
source={require("../../assets/img/image_deaefcca.png")} |
|
style={styles.productImageDisplayStyle} |
|
/> |
|
<View style={styles.productCardWidget1}> |
|
<View style={styles.productCardContainer3}> |
|
<View style={styles.productInfoContainer}> |
|
<Text style={styles.productCodeLabel}>3072</Text> |
|
<Text style={styles.productDetailsTextStyle}>FCFA</Text> |
|
</View> |
|
<View style={styles.productInfoContainer1}> |
|
<View style={styles.priceInfoContainer1}> |
|
<Text style={styles.discountPriceLabel}>3500FCFA</Text> |
|
</View> |
|
<View style={styles.discountInfoContainer1}> |
|
<Text style={styles.discountPercentageTextStyle}> |
|
-5% |
|
</Text> |
|
<View style={styles.svgContainer2}></View> |
|
</View> |
|
</View> |
|
<View style={styles.orderQuantityContainer}> |
|
<View style={styles.svgContainer4}> |
|
<Text>-</Text> |
|
</View> |
|
<View style={styles.quantityLabelContainer}> |
|
<Text>2</Text> |
|
</View> |
|
</View> |
|
<View style={styles.svgContainer4}> |
|
<Text>+</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
<Image |
|
source={require("../../assets/img/image_3eeae4b8.png")} |
|
style={styles.flexDivider} |
|
/> |
|
</View> |
|
))} |
|
|
|
{/* 商品 */} |
|
|
|
|
|
</View> |
|
</View> |
|
|
|
{/* Divider */} |
|
|
|
{/* Coffee Cup Product */} |
|
|
|
{/* More product sections... */} |
|
</ScrollView> |
|
|
|
{/* Fixed Bottom Section */} |
|
<View style={styles.fixedBottomContainer}> |
|
{/* Order Summary */} |
|
<View style={styles.orderSummaryHeader}> |
|
<View style={styles.svgContainer6}> |
|
<Image |
|
source={require("../../assets/img/Vector.png")} |
|
style={{ width: 18, height: 18, tintColor: "#FF5100" }} |
|
/> |
|
</View> |
|
|
|
<Text style={styles.orderQuantityInfo}> |
|
<Text>Quantité minimale de commande </Text> |
|
<Text style={styles.tiltWarpText}>50,000FCFA</Text> |
|
</Text> |
|
</View> |
|
|
|
<View style={styles.flexboxContainerWithButton}> |
|
<View style={styles.productInfoContainer}> |
|
<View style={styles.svgContainer1}> |
|
<CircleOutlineIcon size={fontSize(24)} /> |
|
</View> |
|
<Text style={styles.headerTitle}>Tout</Text> |
|
</View> |
|
|
|
<View style={styles.productInfoContainer}> |
|
<View style={styles.productInfoContainer}> |
|
<Text style={styles.highlightedText1}>24928</Text> |
|
<Text style={styles.priceLabel}>FCFA</Text> |
|
</View> |
|
<TouchableOpacity style={styles.submitButtonStyle}> |
|
<Text style={{ color: "white", fontSize: fontSize(18), fontWeight: "700" }}> |
|
Submit |
|
</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
shoppingCartLayout: { |
|
flex: 1, |
|
backgroundColor: "white", |
|
}, |
|
scrollContainer: { |
|
flex: 1, |
|
}, |
|
scrollContentContainer: { |
|
paddingBottom: widthUtils(100,100).height, |
|
}, |
|
productListingContainer: { |
|
paddingTop: 3, |
|
paddingLeft: 16, |
|
paddingRight: 16, |
|
}, |
|
|
|
shoppingCartSection: { |
|
marginTop: 14, |
|
}, |
|
productCardContainer7: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
svgContainer: { |
|
width: widthUtils(18, 18).width, |
|
height: widthUtils(18, 18).height, |
|
}, |
|
shoppingCartTitle: { |
|
marginLeft: 8, |
|
fontSize: fontSize(24) , |
|
fontFamily: "Segoe UI", |
|
fontWeight: "600", |
|
color: "black", |
|
}, |
|
productCardListing: { |
|
width: "100%", |
|
paddingRight: 4, |
|
paddingLeft: 4, |
|
marginTop: 16, |
|
}, |
|
productCardContainer5: { |
|
flexDirection: "row", |
|
gap: 10, |
|
alignItems: "center", |
|
}, |
|
svgContainer1: { |
|
width: widthUtils(24, 24).width, |
|
height: widthUtils(24, 24).height, |
|
}, |
|
imageThumbnail: { |
|
width: widthUtils(50, 50).width, |
|
height: widthUtils(50, 50).height, |
|
borderRadius: 5, |
|
}, |
|
productInfoContainer2: { |
|
flex: 1, |
|
maxWidth: 288, |
|
}, |
|
casualTextSnippet: { |
|
width: "100%", |
|
fontSize: fontSize(16), |
|
lineHeight: fontSize(18), |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
textAlign: "left", |
|
}, |
|
productDetailsTextStyle1: { |
|
marginTop: 5, |
|
fontSize: fontSize(12), |
|
fontFamily: "Segoe UI", |
|
color: "#747474", |
|
}, |
|
productCardContainer6: { |
|
width: "100%", |
|
marginTop: 11, |
|
}, |
|
productCardContainer4: { |
|
marginTop: 12, |
|
marginBottom: 12, |
|
}, |
|
productImageDisplayStyle: { |
|
width: widthUtils(80, 80).width, |
|
height: widthUtils(80, 80).height, |
|
borderRadius: 5, |
|
}, |
|
productCardWidget1: { |
|
paddingBottom: 5, |
|
}, |
|
productVariantButton: { |
|
width: widthUtils(24, 80).width, |
|
height: widthUtils(24, 80).height, |
|
fontSize: fontSize(16), |
|
fontFamily: "Segoe UI", |
|
color: "#747474", |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 12, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
productCardContainer3: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginTop: 18, |
|
}, |
|
productInfoContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
productCodeLabel: { |
|
fontSize: fontSize(20), |
|
lineHeight: 22, |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "#FF5100", |
|
}, |
|
productDetailsTextStyle: { |
|
fontSize: fontSize(11), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "#FF5100", |
|
lineHeight: fontSize(13), |
|
marginLeft: 3, |
|
}, |
|
productInfoContainer1: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginLeft: 3.75, |
|
}, |
|
priceInfoContainer1: { |
|
paddingTop: 10, |
|
paddingBottom: 5, |
|
}, |
|
discountPriceLabel: { |
|
fontSize: fontSize(12), |
|
fontFamily: "PingFang SC", |
|
fontWeight: "600", |
|
color: "#9a9a9a", |
|
}, |
|
borderBoxDivider: { |
|
width: "100%", |
|
marginTop: -4.75, |
|
borderTopWidth: 1, |
|
borderTopColor: "#9a9a9a", |
|
}, |
|
discountInfoContainer1: { |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
marginLeft: 3.25, |
|
}, |
|
discountPercentageTextStyle: { |
|
fontSize: fontSize(11), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "900", |
|
fontStyle: "italic", |
|
color: "#4e2000", |
|
}, |
|
svgContainer2: { |
|
width: widthUtils(32, 32).width, |
|
height: widthUtils(32, 32).height, |
|
marginTop: -26, |
|
}, |
|
orderQuantityContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginLeft: 9, |
|
}, |
|
borderBoxDivider1: { |
|
width: widthUtils(9, 9).width, |
|
borderTopWidth: 1, |
|
borderTopColor: "black", |
|
}, |
|
svgContainer3: { |
|
width: widthUtils(12, 12).width, |
|
height: widthUtils(12, 12).height, |
|
}, |
|
quantityLabelContainer: { |
|
height: widthUtils(24, 24).height, |
|
paddingHorizontal: 15, |
|
marginLeft: 7, |
|
fontSize: fontSize(14), |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 5, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
svgContainer4: { |
|
marginLeft: 8, |
|
}, |
|
flexDivider: { |
|
height: widthUtils(8, 8).height, |
|
width: "120%", |
|
marginLeft: -20, |
|
}, |
|
productCardContainer2: { |
|
padding: 12, |
|
paddingLeft: 20, |
|
paddingRight: 20, |
|
paddingBottom: 16, |
|
}, |
|
coffeeCupImage: { |
|
width: widthUtils(50, 50).width, |
|
height: widthUtils(50, 50).height, |
|
borderRadius: 5, |
|
marginLeft: 7, |
|
}, |
|
coffeeCupDetailsContainer: { |
|
marginLeft: 14, |
|
}, |
|
coffeeCupDescriptionTextStyle: { |
|
fontSize: fontSize(16), |
|
lineHeight: fontSize(18), |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
textAlign: "left", |
|
}, |
|
productInfoTextStyle: { |
|
marginTop: 3, |
|
fontSize: fontSize(12), |
|
fontFamily: "Segoe UI", |
|
color: "#747474", |
|
}, |
|
productCardWidget: { |
|
flexDirection: "row", |
|
gap: 10, |
|
alignItems: "flex-start", |
|
marginTop: 8, |
|
}, |
|
svgContainer5: { |
|
width: widthUtils(24, 24).width, |
|
height: widthUtils(24, 24).height, |
|
alignSelf: "center", |
|
}, |
|
productCard: { |
|
paddingBottom: 7, |
|
}, |
|
productCardButton: { |
|
width: widthUtils(24,110).width, |
|
height: widthUtils(24,110).height, |
|
minWidth: widthUtils(24,110).width, |
|
fontSize: fontSize(16), |
|
fontFamily: "Segoe UI", |
|
color: "#747474", |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 12, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
productCardDetails: { |
|
flexDirection: "row", |
|
alignItems: "flex-end", |
|
marginTop: 16, |
|
}, |
|
priceInfoContainer: { |
|
flexDirection: "row", |
|
alignItems: "flex-end", |
|
}, |
|
orangeHighlightedText: { |
|
fontSize: fontSize(20), |
|
lineHeight: fontSize(22), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "#FF5100", |
|
}, |
|
highlightedText: { |
|
fontSize: fontSize(11), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "#FF5100", |
|
marginLeft: -1, |
|
}, |
|
priceTag: { |
|
width: widthUtils(23,62).width, |
|
height: widthUtils(23,62).height, |
|
marginLeft: 4.75, |
|
}, |
|
discountInfoContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginLeft: 3, |
|
}, |
|
centerContentSvg: { |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
}, |
|
emphasizedPercentageText: { |
|
fontSize: fontSize(11), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "900", |
|
fontStyle: "italic", |
|
color: "#4e2000", |
|
}, |
|
horizontalTextContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginLeft: 14.5, |
|
}, |
|
numericBadge: { |
|
height: widthUtils(24, 24).height, |
|
paddingHorizontal: 15, |
|
marginLeft: 7.5, |
|
fontSize: fontSize(14), |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 5, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
productCardContainer: { |
|
padding: 17, |
|
paddingLeft: 20, |
|
paddingRight: 20, |
|
paddingBottom: 14, |
|
}, |
|
textInfoStyle: { |
|
marginTop: 2, |
|
fontSize: fontSize(12), |
|
fontFamily: "Segoe UI", |
|
color: "#747474", |
|
}, |
|
productCardContainer1: { |
|
height: widthUtils(80, 80).height, |
|
justifyContent: "center", |
|
}, |
|
productDescriptionStyle: { |
|
paddingRight: 13, |
|
paddingBottom: 4, |
|
paddingLeft: 13, |
|
fontSize: fontSize(13), |
|
lineHeight: 15, |
|
fontFamily: "Segoe UI", |
|
color: "#747474", |
|
textAlign: "left", |
|
backgroundColor: "#f4f4f4", |
|
borderRadius: 18, |
|
}, |
|
productPriceDiscountBadge: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginTop: 4, |
|
}, |
|
priceContainer: { |
|
flexDirection: "row", |
|
alignItems: "stretch", |
|
height: widthUtils(24, 24).height, |
|
}, |
|
verticalPriceContainer: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "center", |
|
marginLeft: 3.75, |
|
}, |
|
priceLabel1: { |
|
fontSize: fontSize(12), |
|
fontFamily: "PingFang SC", |
|
fontWeight: "600", |
|
color: "#9a9a9a", |
|
alignSelf: "center", |
|
}, |
|
priceDivider: { |
|
marginTop: -4.75, |
|
borderTopWidth: 1, |
|
borderTopColor: "#9a9a9a", |
|
}, |
|
discountInfoContainer2: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
marginLeft: 3.25, |
|
}, |
|
orderSummaryHeader: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
height: widthUtils(33, 33).height, |
|
paddingRight: 20, |
|
paddingLeft: 20, |
|
backgroundColor: |
|
"linear-gradient(90deg, rgba(255, 231, 213, 1) 0%, rgba(255, 218, 218, 1) 98.56%)", |
|
borderRadius: 10, |
|
borderBottomLeftRadius: 0, |
|
borderBottomRightRadius: 0, |
|
}, |
|
svgContainer6: { |
|
width: widthUtils(18, 18).width, |
|
height: widthUtils(18, 18).height, |
|
}, |
|
orderQuantityInfo: { |
|
marginLeft: 7, |
|
fontSize: fontSize(14), |
|
fontFamily: "Segoe UI", |
|
color: "black", |
|
}, |
|
tiltWarpText: { |
|
fontSize: fontSize(14), |
|
fontFamily: "Tilt Warp", |
|
}, |
|
flexboxContainerWithButton: { |
|
flexDirection: "row", |
|
gap: 8, |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
height: widthUtils(70, 70).height, |
|
paddingRight: 20, |
|
paddingLeft: 20, |
|
}, |
|
headerTitle: { |
|
marginLeft: 7, |
|
fontSize: fontSize(14), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "600", |
|
color: "black", |
|
}, |
|
highlightedText1: { |
|
fontSize: fontSize(24), |
|
lineHeight: fontSize(22), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "black", |
|
}, |
|
priceLabel: { |
|
fontSize: fontSize(11), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "black", |
|
lineHeight: fontSize(13), |
|
marginTop:fontSize(-8) |
|
}, |
|
submitButtonStyle: { |
|
width: widthUtils(50,160).width, |
|
height: widthUtils(50,160).height, |
|
minWidth: widthUtils(50,160).width, |
|
marginLeft: 11.5, |
|
fontSize: fontSize(18), |
|
lineHeight: fontSize(22), |
|
fontFamily: "Segoe UI", |
|
fontWeight: "700", |
|
color: "white", |
|
backgroundColor: "#FF5100", |
|
borderRadius: 30, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
fixedBottomContainer: { |
|
position: "absolute", |
|
bottom: 0, |
|
left: 0, |
|
right: 0, |
|
backgroundColor: "white", |
|
}, |
|
});
|
|
|