Obanana_test/app/components/profile/my_purchases/CompletedCard.jsx

import React from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";

const CompletedCard = ({ cart }) => {
  // Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z"
  const deliveryDate = new Date(cart.deliveryDate);
  const month = deliveryDate.toLocaleString("en-US", { month: "short" });
  const day = deliveryDate.getDate();
  const options = {
    year: "numeric",
    month: "short",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  };
  const time = deliveryDate.toLocaleString("en-US", {
    timeZone: "Asia/Manila",
    ...options,
  });

  // Format the day with leading zeros if needed (e.g., "01" instead of "1")
  const formattedDay = day < 10 ? `0${day}` : day;

  // Create the final formatted date string "Sept. 25"
  const philippinesTime = `${month}. ${formattedDay} `;

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>{cart.shopname}</Text>
        <Text style={styles.headerStatusText}>{cart.status}</Text>
      </View>
      <View style={styles.wrapper}>
        <View style={styles.prodwrapper}>
          <View style={styles.imgWrap}>
            <Image
              style={{ width: 50, height: 50, resizeMode: "cover" }}
              source={{ uri: cart?.products[0]?.img }}
            />
          </View>
          <View style={styles.details}>
            <Text style={styles.text} numberOfLines={2}>
              {cart?.products[0]?.name}
            </Text>
            <Text style={styles.text1} numberOfLines={2}>
              Variant: pink
            </Text>
            <View style={styles.rateCon}>
              {cart?.products[0]?.price ? (
                <>
                  <View style={styles.priceCon}>
                    <Text
                      style={
                        cart?.products[0]?.promo
                          ? styles.textPricePromo
                          : styles.textPrice
                      }
                    >
                      ₱{cart?.products[0]?.price}
                    </Text>
                    {cart?.products[0]?.promo ? (
                      <Text style={styles.textPrice}>
                        {" "}
                        {cart?.products[0]?.price -
                          cart?.products[0]?.price * 0.3}{" "}
                        <Text style={{ fontWeight: "400" }}>
                          (-{cart?.products[0]?.promo}%)
                        </Text>
                      </Text>
                    ) : null}
                  </View>
                </>
              ) : (
                <Text>No price </Text>
              )}
              <Text style={styles.text1} numberOfLines={2}>
                Quantity: 2
              </Text>
            </View>
          </View>
        </View>
        <View style={styles.totalCon}>
          <View style={styles.total}></View>
          <View style={styles.total}>
            <Text style={styles.totalText}>Total: </Text>
            <Text style={styles.textPrice}> ₱180.00 </Text>
          </View>
        </View>
      </View>
      <View style={styles.cStatus}>
        <Text style={styles.textStatusHeader}> Status: </Text>

        <Text style={styles.textStatus}> {cart?.currentStatus}</Text>
      </View>
      <View style={styles.footer}>
        <Text style={styles.footerDate}> {time} </Text>

        <TouchableOpacity style={styles.rateBtn}>
          <Text style={styles.rateText}> Rate It </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    // width: "95%",
    margin: 5,
    borderRadius: 10,
    borderColor: "#dddd",
    borderWidth: 1,
    overflow: "hidden",
    // flexDirection: "row",
    // padding: 10,
    backgroundColor: "#ffffff",
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    width: "100%",
    top: 0,
    padding: 10,
  },
  headerText: {
    fontSize: 14,
    fontWeight: "600",
  },
  headerStatusText: {
    fontSize: 14,
    fontWeight: "600",
    textTransform: "uppercase",
    color: "#ffaa00",
  },
  footer: {
    // position: "absolute",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    bottom: 0,
    width: "100%",
  },
  imgWrap: {
    padding: 10,
  },
  wrapper: {
    margin: 10,
    marginBottom: 10,
  },
  prodwrapper: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    borderWidth: 1,
    overflow: "hidden",
    borderColor: "#dddd",
    borderRadius: 10,
    padding: 10,
  },
  priceCon: {
    flexDirection: "row",
    paddingVertical: 10,
  },
  textPrice: {
    fontSize: 14,
    fontWeight: "600",
    textTransform: "capitalize",
    color: "#ffaa00",
  },
  textPricePromo: {
    fontSize: 14,
    fontWeight: "600",
    textTransform: "capitalize",
    textDecorationLine: "line-through",
    color: "#ffaa00",
  },
  details: {
    width: "80%",
  },
  text: {
    fontSize: 13,
  },
  text1: {
    fontSize: 10,
    color: "#b4b4b4",
  },
  totalCon: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-end",
    position: "relative",
    // right: 0,
    paddingTop: 10,
  },
  total: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-end",
    width: "35%",
    position: "relative",
    right: 0,
  },
  totalText: {
    textAlign: "right",
  },
  cStatus: {
    backgroundColor: "#7EFFBA",
    // height: 40,
    padding: 10,
    flexDirection: "row",
    // justifyContent: "space-between",
    alignItems: "flex-end",
  },
  textStatusHeader: {
    fontSize: 12,
    fontWeight: "600",
    color: "#007938",
  },
  textStatus: {
    fontSize: 14,
    fontWeight: "400",
    color: "#007938",
  },
  rateBtn: {
    borderWidth: 2,
    overflow: "hidden",
    borderColor: "#ffaa00",
    borderRadius: 10,
    padding: 5,
    paddingHorizontal: 15,
    margin: 10,
    marginRight: 20,
  },
  rateText: {
    fontWeight: "600",
    color: "#ff3c00",
  },
  footerDate: {
    fontSize: 11,
    paddingLeft: 15,
    color: "#747474",
  },
});

export default CompletedCard;