Obanana_test/app/pages/checkout/CheckOut.jsx

import { faAngleRight, faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation, useRoute } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TextInput,
  Image,
} from "react-native";

const CheckOut = () => {
  //NOTE !!!! must pass the update product details to the shipping option and payment method page!!!! to prevent  error

  const [message, setmessage] = useState("");
  const [shippingMethod, setshippingMethod] = useState(
    "select shipping method"
  );
  const [paymentMethod, setpaymentMethod] = useState("select shipping method");
  const [recipientDetails, setrecipientDetails] = useState([]);

  const navigation = useNavigation();
  const route = useRoute();
  const { product, shipMethod, payMethod, address } = route.params;
  useEffect(() => {
    setshippingMethod(shipMethod ?? "select shipping method");
  }, [shipMethod]);
  useEffect(() => {
    setpaymentMethod(payMethod ?? "select payment method");
  }, [payMethod]);
  useEffect(() => {
    setrecipientDetails(address ?? null);
  }, [address]);
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => navigation.navigate("Home")}
          style={styles.backIcon}
        >
          <FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
        </TouchableOpacity>
        <Text style={styles.headerText}>CheckOut</Text>
      </View>
      <View style={styles.wrapper}>
        <View style={styles.content}>
          <View style={styles.subContent1}>
            <Text style={styles.subContentText}>
              <Text style={styles.subContentTexthead}>{product.shopId}</Text>
            </Text>
            <View style={styles.card}>
              <View style={styles.imgWrap}>
                <Image
                  style={{ width: 50, height: 50, resizeMode: "cover" }}
                  source={{ uri: product.img }}
                />
              </View>
              <View style={styles.wrapper}>
                <View style={styles.details}>
                  <Text style={styles.text} numberOfLines={2}>
                    {product.name}
                  </Text>

                  <View style={styles.rateCon}>
                    {product.price ? (
                      <>
                        <View style={styles.priceCon}>
                          <Text
                            style={
                              product.promo
                                ? styles.textPricePromo
                                : styles.textPrice
                            }
                          >
                            ₱{product.price}
                          </Text>
                          {product.promo ? (
                            <Text style={styles.textPrice}>
                              {" "}
                              {product.price - product.price * 0.3}{" "}
                              <Text style={{ fontWeight: "400" }}>
                                (-{product.promo}%)
                              </Text>
                            </Text>
                          ) : null}
                        </View>
                      </>
                    ) : (
                      <Text>No price </Text>
                    )}
                      <Text style={styles.qty}>2 qty </Text>

                  </View>
                </View>
              </View>
            </View>
          </View>
          <TouchableOpacity
            style={styles.subContent}
            onPress={() =>
              navigation.navigate("AddressSelection", {
                product,
                shipMethod: shippingMethod,
                payMethod: paymentMethod,
                address: recipientDetails,
              })
            }
          >
            <Text style={styles.subContentText}>DELIVERY ADDRESS</Text>
            <View style={styles.add}>
              <Text style={styles.addText} numberOfLines={4}>
                {recipientDetails !== null
                  ? `${recipientDetails.recipient}, ${recipientDetails.number} ${recipientDetails.address}`
                  : "select address"}
              </Text>
            </View>
            <FontAwesomeIcon icon={faAngleRight} color={"#ffaa00"} size={16} />
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.subContent}
            onPress={() =>
              navigation.navigate("ShippingOption", {
                product,
                shipMethod: shippingMethod,
                payMethod: paymentMethod,
                address: recipientDetails,
              })
            }
          >
            <Text style={styles.subContentText}>SHIPPING OPTION</Text>
            <View style={styles.wallet}>
              <Text style={styles.addText}>{shippingMethod}</Text>
            </View>
            <FontAwesomeIcon icon={faAngleRight} color={"#ffaa00"} size={16} />
          </TouchableOpacity>
          <View style={styles.subContent}>
            <Text style={styles.subContentText}>MESSAGE</Text>
            <TextInput
              style={styles.input}
              onChangeText={() => setmessage()}
              value={message}
              numberOfLines={2}
              placeholder="write a message"
            />
          </View>
          <TouchableOpacity style={styles.subContent}>
            <Text style={styles.subContentText}>ORDER TOTAL</Text>
            <Text style={styles.addText}>₱{product.price}</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.subContent}
            onPress={() =>
              navigation.navigate("Paymentoption", {
                product,
                shipMethod: shippingMethod,
                payMethod: paymentMethod,
                address: recipientDetails,
              })
            }
          >
            <Text style={styles.subContentText}>PAYMENT OPTION</Text>
            <View style={styles.wallet}>
              <Text style={styles.addText}>{paymentMethod}</Text>
            </View>
            <FontAwesomeIcon icon={faAngleRight} color={"#ffaa00"} size={16} />
          </TouchableOpacity>
          <View style={styles.subContent1}>
            <Text style={styles.subContentText}>PAYMENT DETAILS</Text>
            <View style={styles.payCon}>
              <View style={styles.subContent2}>
                <Text style={styles.subContentText2}>
                  Merchandise Sub Total:
                </Text>
                <Text style={styles.subContentTexthead}>₱{product.price}</Text>
              </View>

              <View style={styles.subContent2}>
                <Text style={styles.subContentText2}>Shipping:</Text>
                <Text style={styles.subContentTexthead}>₱50</Text>
              </View>

              <View style={styles.subContent2}>
                <Text style={styles.subContentText2}>Total: </Text>
                <Text style={styles.subContentTexthead}>
                  ₱{product.price + 50}
                </Text>
              </View>
            </View>
          </View>
        </View>
      </View>
      <View style={styles.footer}>
        <TouchableOpacity
          style={styles.footerBtn}
          onPress={() => navigation.navigate("Home")}
        >
          <Text style={styles.footerBtnText}>Order Now</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    height: "100%",
  },
  header: {
    alignItems: "center",
    width: "100%",
    top: 0,
    paddingLeft: 15,
    flexDirection: "row",
    borderColor: "#ddd",
    paddingBottom: 15,
    borderBottomWidth: 1,
  },
  headerText: {
    fontSize: 16,
    fontWeight: "600",
    marginLeft: 25,
  },
  add: {
    width: "50%",
  },
  input: {
    width: "60%",
  },
  wallet: {
    // width: '50%'
  },
  footer: {
    position: "absolute",
    bottom: 0,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 10,
  },
  footerBtn: {
    backgroundColor: "#ff5e00",
    width: "90%",
    paddingVertical: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  footerBtnText: {
    color: "#fff",
    fontSize: 16,
  },
  wrapper: {
    // height: "85%",

    width: "100%",
    height: "100%",
  },
  content: {
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  subContent: {
    width: "98%",
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
    padding: 10,
    // height: 60,
    borderColor: "#f0f0f0dd",
    borderWidth: 1,
  },
  subContent1: {
    width: "98%",
    justifyContent: "center",
    // flexDirection: "row",
    // alignItems: "center",
    padding: 15,
    // height: 60,
    borderColor: "#f0f0f0dd",
    borderWidth: 1,
  },
  subContent2: {
    width: "98%",
    justifyContent: "space-between",
    flexDirection: "row",
    // alignItems: "center",
    padding: 10,
    // height: 60,
    borderColor: "#f0f0f0dd",
    // borderWidth: 1,
  },
  subContentText: {
    fontWeight: "600",
    color: "#494949",
  },
  subContentText2: {
    width: "90%",
    flexDirection: "row",
    justifyContent: "space-between",
    // backgroundColor: "#b8141433",
  },
  subContentTexthead: {
    fontWeight: "600",
    color: "#000000",
  },
  addText: {
    color: "#5f5f5f",
    textAlign:'left'
  },
  imgWrap: {
    padding: 10,
  },
  card: {
    height: 80,
    flexDirection: "row",
    // justifyContent: "center",
    alignItems: "center",
    borderColor: "#f0f0f0dd",
    borderWidth: 1,
    padding: 10,
    marginTop: 10,
  },
  payCon: {
    width: "80%",
  },
  priceCon: {
    flexDirection: "row",
    paddingVertical: 10,
  },
  rateCon:{
    width:'75%',
    flexDirection: "row",
    justifyContent:'space-between',
    alignItems: "center",
  },
  qty:{
    fontSize: 14,
    color: "#5f5f5f",
  },
  textPrice: {
    fontSize: 14,
    fontWeight: "600",
    textTransform: "capitalize",
    color: "#ffaa00",
  },
  textPricePromo: {
    fontSize: 14,
    fontWeight: "600",
    textTransform: "capitalize",
    textDecorationLine: "line-through",
    color: "#ffaa00",
  },
  details: {
    // width: "50%",
  },
  text: {
    fontSize: 14,
    fontWeight:'500',
    width:'75%'
  },
});

export default CheckOut;