Untitled

avatar
unknown
javascript
4 years ago
15 kB
3
Indexable
/* eslint-disable react-native/no-inline-styles */
import {
  Alert,
  Dimensions,
  FlatList,
  Image,
  Modal,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  TouchableHighlight,
  TouchableOpacity,
  Pressable,
  View,
  ActivityIndicator,
} from 'react-native';
import React, {Component} from 'react';
import {goBack, navigate} from '../../../utils/NavigationService';
import AsyncStorage from '@react-native-async-storage/async-storage';

import Colors from '../../../themes/colors';
import RentPaymentItem from '../../../custom_components/RentPaymentItem';
import TopBar from '../../../custom_components/TopBar';
import {screenNames,urls} from '../../../constants';

const {width, height} = Dimensions.get('window');

const data = [
  {
    id: 1,
    name: 'fresh lot 100',
    type: 'House/Villa',
    address: 'Ahmedabad',
  },
  {
    id: 2,
    name: 'fresh lot 101',
    type: 'House/Villa',
    address: 'Ghandhinagar',
  },
  {
    id: 3,
    name: 'fresh lot 100',
    type: 'House/Villa',
    address: 'Ahmedabad',
  },
  {
    id: 4,
    name: 'fresh lot 100',
    type: 'House/Villa',
    address: 'Ahmedabad',
  },
  {
    id: 5,
    name: 'fresh lot 101',
    type: 'House/Villa',
    address: 'Ghandhinagar',
  },
  {
    id: 6,
    name: 'fresh lot 100',
    type: 'House/Villa',
    address: 'Ahmedabad',
  },
];

export default class MoveOutScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      GridListItems: [
        {key: 'Living Hall'},
        {key: 'Kitchen'},
        {key: 'Bathroom 1'},
        {key: 'Bedroom 1'},
        {key: 'Bathroom 2'},
        {key: 'Bedroom 2'},
        {key: 'Bathroom 3'},
        {key: 'Bedroom 3'},
      ],
      modalVisible: false,
      propertyName: '',
      invitationId: '',
      values: [],
      loading: true,
    };
  }

  onPress() {}

  async componentDidMount() {
    // console.log('data from previous', this.props.route.params.propertyId);
    this.setState({loading: true});
    const token = `Bearer ${await AsyncStorage.getItem('token')}`;
    const userid = await AsyncStorage.getItem('userid');

    const popid = this.props.route.params.propertyId;
    console.log('user id value', popid);
    const res = await fetch(
      `${urls.baseUrl}getPropertyByUserId?userId=${userid}&invitation=true`,
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: token,
          referrer:'https://easerent.com'
        },
      },
    ).catch(err => console.error(err));

    const resdata = await res.json();
    this.setState({invitationId: resdata.data.moPUI[popid].invitationId});
    console.log('mopui', resdata.data.moPUI);

    const response = await fetch(
      `${urls.baseUrl}propertyDetailsDesc/get/${popid}`,
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: token,
          referrer:'https://easerent.com'
        },
      },
    ).catch(err => console.error(err));

    const responsedata = await response.json();

    console.log(responsedata.data.PropertyDetailsDesc, ' values of properties');
    this.setState({values: responsedata.data.PropertyDetailsDesc});

    this.setState({propertyName: this.props.route.params.propertyName});
    this.setState({loading: false});
    const summary = await fetch(
      `${urls.baseUrl}getMoveInSummaryByMoveInDetailsId/${popid}`,
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: token,
          referrer:'https://easerent.com'
        },
      },
    ).catch(err => console.error(err));

    const summarydata = await summary.json();
  }

  onDetail = data => {
    navigate(screenNames.PaymentHistoryScreen);
  };

  GetGridViewItem(item, value) {
    navigate(screenNames.MoveOutLiving, {
      item: item,
      value: value,
      PropertyName: this.state.propertyName,
      invite: this.state.invitationId,
    });
  }

  Submitdata = async () => {
    const valueid = await AsyncStorage.getItem('moveinDetailid');
    const token = `Bearer ${await AsyncStorage.getItem('token')}`;

    if (valueid === null) {
      alert('Fill the details');
    } else {
      const response = await fetch(
        `${urls.baseUrl}startMoveOut/${this.state.invitationId}/2444`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: token,
            referrer:'https://easerent.com'
          },
        },
      ).catch(err => console.error(err));

      const json = await response.json();

      console.log(
        'invitation moveIn id',
        json.data.MoveOutDetails.moveOutDetailsId,
      );
      navigate('MoveInSummary', {
        name: this.state.propertyName,
        type: this.props.route.params.propertyType,
        moveoutid: json.data.MoveOutDetails.moveOutDetailsId,
        token: token,
      });
    }
  };

  setModalVisible = visible => {
    this.setState({modalVisible: visible});
  };

  render() {
    const {modalVisible} = this.state;
    return (
      <SafeAreaView
        style={{
          flex: 1,
          width: Dimensions.get('window').width,
          backgroundColor: Colors.background,
        }}>
        <View style={{flex: 1, backgroundColor: 'white'}}>
          <TopBar
            onBackButtonClick={() => {
              goBack();
            }}
            topBarTextTitle={'Move out'}
            showDrawer={false}
          />
          <Modal
            style={{
              width: '100%',
              height: '100%',
              position: 'absolute',
              top: 0,
              left: 0,
            }}
            animationType="slide"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => {
              goBack();
            }}>
            <View
              style={{
                backgroundColor: '#000',
                opacity: 0.7,
                position: 'absolute',
                width: width,
                height: height,
              }}></View>
            <View style={{flexDirection: 'column', alignItems: 'center'}}>
              <View
                style={{
                  backgroundColor: 'white',
                  flex: 1,
                  marginStart: 20,
                  marginEnd: 20,
                }}>
                <View
                  style={{
                    backgroundColor: '#ffffff',
                    // margin: 50,
                    marginTop: '50%',
                    borderRadius: 30,

                    // width: '90%',
                    marginHorizontal: 20,
                    height: 250,
                    shadowColor: '#000',
                    shadowOffset: {width: 1, height: 1},
                    shadowOpacity: 0.4,
                    shadowRadius: 3,
                    elevation: 5,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <View>
                    <Text style={styles.textTop}>
                      Let's get your Tenant Moved-In.
                    </Text>
                  </View>

                  <Text style={styles.text}>
                    Make sure they inspact entire house and capture any
                    issues/concerns.
                  </Text>

                  <TouchableOpacity
                    style={styles.buttonModal}
                    onPress={() => !modalVisible()}>
                    <Text
                      style={{
                        color: 'white',
                        fontFamily: 'Montserrat-Regular',
                        fontWeight: '700',
                      }}>
                      Start Move-In
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </Modal>
          <View
            style={{
              //   marginBottom: 10,
              backgroundColor: 'white',
              elevation: 15,
              shadowOffset: {width: 5, height: 5},
              shadowOpacity: 0.8,
              shadowRadius: 10,
              //   elevation: 10,
              height: 150,
            }}>
            <View style={{flexDirection: 'row'}}>
              <View
                style={{
                  marginTop: 10,
                }}>
                {this.props.route.params.coverImage === null ? (
                  <Image
                    source={require('../../../assets/house_villa_one.png')}
                    // source={{uri: 'https://picsum.photos/200/300'}}
                    style={{
                      height: 120,
                      width: 120,
                      borderRadius: 10,
                      marginStart: 10,
                    }}
                  />
                ) : (
                  <Image
                    source={{uri: this.props.route.params.coverImage}}
                    // source={{uri: 'https://picsum.photos/200/300'}}
                    style={{
                      height: 120,
                      width: 120,
                      borderRadius: 10,
                      marginStart: 10,
                    }}
                  />
                )}
              </View>
              <View
                style={{
                  flex: 6,
                  marginHorizontal: 20,
                  justifyContent: 'center',
                }}>
                <View style={{marginHorizontal: 10}}>
                  <Text
                    style={{
                      fontSize: 15,
                      marginVertical: 2,
                      fontWeight: 'bold',
                    }}>
                    {this.state.propertyName}
                  </Text>
                  <Text
                    style={{
                      fontSize: 15,
                      marginVertical: 2,
                      fontWeight: 'bold',
                    }}>
                    {this.props.route.params.propertyType}
                  </Text>
                  <Text
                    style={{
                      fontSize: 12,
                      marginVertical: 2,
                      fontWeight: 'bold',
                    }}>
                    {this.props.route.params.addressLine1 +
                      ', ' +
                      this.props.route.params.addressLine2 +
                      ', '}
                  </Text>
                  <Text
                    style={{
                      fontSize: 12,
                      marginVertical: 2,
                      fontWeight: 'bold',
                    }}>
                    {this.props.route.params.city +
                      ', ' +
                      this.props.route.params.state +
                      ',' +
                      this.props.route.params.pincode}
                  </Text>
                </View>
              </View>
            </View>
          </View>

          <Text
            style={{
              marginTop: 10,
              marginStart: 20,
              color: '#EF983A',
              fontSize: 16,
              fontWeight: 'bold',
            }}>
            Move-out
          </Text>

          <View style={{}}>
            <Image
              style={{
                alignSelf: 'center',
                height: Dimensions.get('window').height * 0.07,
                width: Dimensions.get('window').width * 0.9,
              }}
              source={require('../../../assets/moveout1.png')}
              resizeMode="stretch"
            />
          </View>

          {this.state.loading ? (
            <ActivityIndicator size="large" color="red" />
          ) : (
            <FlatList
              data={this.state.values}
              numColumns={2}
              renderItem={({item}) => (
                <View style={styles.box}>
                  <Pressable
                    style={styles.GridViewContainer}
                    onPress={this.GetGridViewItem.bind(
                      this,
                      item.description,
                      item.propertyDetailsDescId,
                    )}>
                    <Image
                      source={require('../../../assets/living_hall.png')}
                      style={{
                        height: 40,
                        width: 40,
                        marginTop: 15,
                        textAlignVertical: 'center',
                        bottom: 0,
                        tintColor: 'black',
                      }}
                      // resizeMode="cover"
                    />

                    <Text> {item.description}</Text>
                  </Pressable>
                </View>
              )}
            />
          )}

          <View style={{marginVertical: 20}} />

          <TouchableOpacity
            style={[styles.buttonContainer, styles.signupButton]}
            onPress={this.Submitdata}>
            <Text
              style={{
                fontSize: 16,

                color: 'white',
                fontWeight: 'bold',
              }}>
              {'Submit'}
            </Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  contentContainer: {
    paddingBottom: 6,
  },
  signupButton: {
    backgroundColor: '#357C52',
  },
  buttonContainer: {
    width: 150,
    borderRadius: 30,
    position: 'absolute',
    height: 45,
    bottom: 10,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    // backgroundColor: '#e5e5e5',
  },
  headerText: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    fontWeight: 'bold',
  },
  GridViewContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 110,
    width: 150,
    backgroundColor: 'white',
    borderRadius: 15,
    shadowColor: '#000',
    shadowOffset: {width: 5, height: 5},
    shadowOpacity: 0.8,
    shadowRadius: 10,
    elevation: 10,
  },
  box: {
    padding: 10,
    paddingStart: 20,
    paddingEnd: 20,
  },
  GridViewTextLayout: {
    flex: 1,
    fontFamily: 'Montserrat-Regular',
    fontSize: 16,
    textAlignVertical: 'bottom',
    justifyContent: 'flex-end',
    color: 'black',
    padding: 10,
  },
  textTop: {
    color: 'black',
    fontWeight: '700',
    fontSize: 16,
    justifyContent: 'center',
    fontFamily: 'Montserrat-Bold',
    alignContent: 'center',
    alignSelf: 'center',
  },
  text: {
    color: 'black',
    // fontWeight: 'bold',
    fontSize: 14,
    marginTop: 30,
    marginHorizontal: 30,
    justifyContent: 'center',
    fontFamily: 'Montserrat-Regular',
    alignContent: 'center',
    alignSelf: 'center',
    textAlign: 'center',
  },
  buttonModal: {
    width: '50%',
    borderRadius: 30,
    height: 40,
    marginTop: 30,
    marginBottom: 20,
    backgroundColor: '#357C52',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
  },
});
Editor is loading...