Untitled

// Customizable Area Start
import React from "react";

import {
  View,
  Text,
  StyleSheet,
  Image,
  FlatList,
  Dimensions,
} from "react-native";
import moment from "moment";
import { colors } from "../../utilities/src/Colors";
const { primaryColor, shadowColor, darkBlue, deepGrey, white } = colors();

// Merge Engine - import assets - Start
// Merge Engine - import assets - End

// Merge Engine - Artboard Dimension  - Start
// Merge Engine - Artboard Dimension  - End

import ReservationsController from "./ReservationsController";
import { house } from "./assets";
import Loader from "../../../components/src/Loader";
import Scale from "../../../components/src/Scale";
import { TouchableOpacity } from "react-native-gesture-handler";

export default class ReservationHistory extends ReservationsController {
  async componentDidMount() {
    this.historyData();
  }

  renderItem = ({ item, index }: { item: any; index: number }) => {
    if (item.hasOwnProperty("date")) {
      return (
        <View style={styles.dateView}>
          <Text style={styles.date}>{item.date}</Text>
        </View>
      );
    } else {
      return (
        <View>
          <View style={styles.dataView}>
            <View style={styles.trip}>
              <Image
                source={
                  item.attributes && item.attributes.images
                    ? { uri: item.attributes.images[0].url }
                    : house
                }
                style={styles.house}
              />
              <View style={styles.details}>
                <Text style={styles.dateRange}>
                  {moment(item.attributes && item.attributes.start_time).format(
                    "MMM DD"
                  )}{" "}
                  -{" "}
                  {moment(item.attributes && item.attributes.end_time).format(
                    "MMM DD"
                  )}
                </Text>
                <Text style={styles.name}>
                  {item.attributes && item.attributes.catalogue_name}
                </Text>
                <Text style={styles.address}>
                  {item.attributes.address[0]?.address},{" "}
                  {item.attributes.address[0]?.city}
                </Text>
              </View>
            </View>
            <View style={styles.bottomButton}>
              <TouchableOpacity style={styles.issue}>
                <Text style={styles.tripStart}>Report an Issue</Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => {
                  this.navigateTo("AddReview", {
                    id: item.attributes.catalogue_id.toString(),
                  });
                }}
                style={[styles.issue, { backgroundColor: darkBlue }]}
              >
                <Text style={[styles.tripStart, { color: "#FFFFFF" }]}>
                  Leave a Review
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      );
    }
  };

  showList = () => {
    return (
      <View style={styles.flatListView}>
        <FlatList
          testID="Flatlist-id2"
          style={styles.outerView}
          data={this.state.historyData}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => String(index)}
        />
      </View>
    );
  };

  renderList = () => {
    return this.state.emptyList ? (
      <Text style={styles.empty}>No Trip History</Text>
    ) : (
      this.showList()
    );
  };

  render() {
    // Merge Engine - render - Start
    return (
      <>
        {this.state.isLoading ? (
          <View style={styles.loader}>
            <Loader loading={this.state.isLoading} />
          </View>
        ) : (
          this.renderList()
        )}
      </>
    );
    // Merge Engine - render - End
  }
}

const styles = StyleSheet.create({
  issue: {
    paddingHorizontal: '6%',
    width:'100%',
    height: 40,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: darkBlue,
    justifyContent: "center",
    alignItems: "center",
  },
  border: {
    width: 320,
    height: 1.5,
    backgroundColor: "#E7E7E7",
    marginTop: 10,
  },
  details: { marginLeft: 10 },
  dateRange: {
    fontSize: Scale(16),
    fontWeight: "600",
    color: darkBlue,
    fontFamily: "Plus Jakarta Sans",
  },
  name: {
    fontSize: Scale(16),
    fontWeight: "600",
    fontFamily: "Plus Jakarta Sans",
    color: primaryColor,
    marginTop: Scale(5),
  },
  address: {
    fontSize: 12,
    fontWeight: "500",
    maxWidth: 183,
    color: deepGrey,
    marginTop: Scale(5),
  },
  house: {
    width: 150,
    height: 79,
    borderRadius: 12,
  },
  tripStart: {
    fontSize: 16,
    fontWeight: "500",
    color: darkBlue,
  },
  outerView: { paddingTop: 30 },
  tick: {
    width: 20,
    height: 20,
    borderRadius: 10,
  },
  cardView: {
    paddingBottom: Scale(22),
  },
  date: {
    fontSize: Scale(16),
    fontWeight: "600",
    color: primaryColor,
    fontFamily: "Plus Jakarta Sans",
    marginBottom: Scale(2),
  },
  trip: {
    flexDirection: "row",
  },
  bottomButton: {
    justifyContent: "space-between",
    marginTop: Scale(14),
    flexDirection: 'row',
    alignItems: 'center',
  },
  date2: {
    fontSize: 16,
    fontWeight: "600",
    color: darkBlue,
  },
  dataView: {
    paddingLeft: 6,
    paddingRight: 8,
    marginTop: 10,
    borderRadius: 12,
    borderWidth: 1.9,
    borderColor: shadowColor,
    shadowColor: deepGrey,
    shadowOffset: {
      width: 0,
      height: 5,
    },
    shadowOpacity: 0.15,
    shadowRadius: 2,
    elevation: 7,
    backgroundColor: white,
    paddingTop: Scale(10),
    paddingBottom: Scale(12),
  },
  upcomingView: {
    justifyContent: "center",
    alignItems: "center",
  },
  circle: {
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: darkBlue,
    marginTop: 2,
  },
  hostText: {
    fontSize: 14,
    fontWeight: "600",
    color: "#B0B0B0",
  },
  notification: {
    width: 28,
    height: 28,
  },
  reservationText: {
    fontWeight: "700",
    fontSize: 18,
    color: "#23395D",
  },
  reservation2: {
    justifyContent: "space-between",
    paddingHorizontal: 10,
    flexDirection: "row",
    marginTop: 30,
  },
  reservation: {
    justifyContent: "space-between",
    paddingHorizontal: 6,
    flexDirection: "row",
    marginTop: 26,
  },
  container: {
    flex: 1,
    padding: 16,
    marginLeft: "auto",
    marginRight: "auto",
    width: "100%",
    backgroundColor: "#ffffffff",
    maxWidth: 650,
  },
  empty: {
    justifyContent: "center",
    alignItems: "center",
    color: primaryColor,
    textAlign: "center",
    marginTop: Dimensions.get("window").height * 0.4,
  },
  loader: {
    marginTop: Scale(20),
  },
  dateView: {
    marginTop: Scale(25),
  },
  flatListView: {
    marginTop: Scale(-35),
  },
});

// Customizable Area End