water-sys/app/screens/CartScreen.tsx

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",
  },
});