unioil-loyalty-rn-app/app/screens/myprofile/transaction/details.js

import * as React from 'react';
import { useEffect, useState } from 'react';
import { SafeAreaView, ScrollView, TouchableOpacity, Button, View, Text, Image, Alert, Linking, Platform } from 'react-native';
import { connect } from "react-redux";
import CustomHeader from '../../../components/header.js';
import Assets from '../../../components/assets.manager.js';
import Elements from '../../../components/elements.js';
import Theme from '../../../components/theme.style.js';
import Icon from '../../../components/icons.js';
import REQUEST from '../../../components/api';
import DB from '../../../components/storage';
import { openComposer } from 'react-native-email-link';
import { dateFormater } from '../../../utils/date.js';
import CustomSafeArea from '../../../components/safeArea.component.js';


class TransactionDetails extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    loading: false,
    ratesubmitted: false,
    rating: 0,
    session: '',
    transaction: [],
    umail: "",
    cn: ""
  }

  componentDidMount() {
    this.init()
  }

  init = async () => {
    this.props.route.params.data.is_feedback_disabled = false
    let session = await DB.session()
    let user_profile = await DB.profile()
    this.setState({ cn: user_profile.data.card_number, transaction: this.props.route.params.data, session: session })
  }

  renderRatings = (rating, disabled) => {
    return [1, 2, 3, 4, 5].map((rate, i) => {
      return (
        <TouchableOpacity disabled={disabled} style={{flex: 1, alignSelf: 'center', padding: 1}} activeOpacity={0.5} onPress={() => this.setState({ rating: rate })}>
          <Icon.AntDesign name={rating >= rate ? "star" : "staro"} color={rating > 0 || !this.state.ratesubmitted ? Theme.colors.yellow : Theme.colors.darkerGray} size={40} />
        </TouchableOpacity>
      )
    })
  }

  onSubmit = async () => {
    this.setState({ loading: true })
    REQUEST('transaction_rate', 'post', {
      Authorization: this.state.session.token,
      Accept: 'application/json',
      card_number: this.state.session.user.card_number
    }, {}, {
      trans_num: this.state.transaction.trans_num,
      rate: this.state.rating
    }, (result) => {
      this.setState({ loading: false, ratesubmitted: true })
      Platform.OS == 'ios' ? setTimeout(() => {
        Alert.alert(result.message, 'Rating has been submitted', [{text: "Ok", onPress: () => {
          this.props.route.params?.onBackPress()
        }}])
      }, 300) :
      Alert.alert(result.message, 'Rating has been submitted', [{text: "Ok", onPress: () => {
        this.props.route.params?.onBackPress()
      }}])
    }, (error) => {
      this.setState({ loading: false })
    })
  }

  checkPendingTransaction = () => {
    if(this.state.rating > 0) {
      Alert.alert(
        '',
        'You have an unsaved rating, are you sure you want to navigate back?',
        [
          {
            text: 'No',
            style: 'cancel',
          },
          {
            text: 'Yes',
            onPress: async () => {
              this.props.route.params?.onBackPress()
              this.props.navigation.goBack()
            },
          },
        ],
        {cancelable: true},
      );
    } else {
      this.props.route.params?.onBackPress()
      this.props.navigation.goBack()
    }
  }

  returnDate = () => {
    return dateFormater(this.state.transaction.date);
  }

  render() {
    return (
      <CustomSafeArea>
        <Elements.loaderView
          title="Validating"
          message="Please wait..."
          isDarkMode={this.props.app_theme?.theme.dark}
          backgroundColor={this.props.app_theme?.theme.colors.border}
          color={this.props.app_theme?.theme.colors.text}
          visible={this.state.loading}
        />
        <CustomHeader 
          title={this.returnDate()} 
          onBackPress={() => this.checkPendingTransaction()} 
          menu={false} 
          backscreen="MyProfile" 
          navigation={this.props.navigation} 
        />
        <View style={{flex: 1, backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
          <View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}>
            <View style={{flex: 2}}>
              <Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Sales Invoice Number</Text>
            </View>
            <View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
              <Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>{this.state.transaction.trans_num || 455826}</Text>
            </View>
          </View>
          <View style={{padding: 10, paddingLeft: 13,paddingRight: 13}}>
            <Text style={{fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text }}>{this.state.transaction.station || 'APP'}</Text>
          </View>
          <Elements.transactiontable 
            textColor={this.props.app_theme?.theme.colors.text}
            isDarkMode={this.props.app_theme?.theme.dark}
            data={this.state.transaction} />
          <View style={{alignItems: 'center'}}>
            <Text style={{padding: 20, color: Theme.colors.darkGray}}>Rate Your Experience</Text>
            <View style={{flexDirection: 'row', alignItems: 'center', width: '60%'}}>
              {this.renderRatings(this.state.rating ? this.state.rating : this.state.transaction.rating, this.state.transaction.is_feedback_disabled || this.state.transaction.is_disabled || this.state.ratesubmitted)}
            </View>
            <TouchableOpacity 
              disabled={ this.state.transaction.is_feedback_disabled || this.state.transaction.is_disabled || this.state.ratesubmitted } activeOpacity={1}
              style={{width: '90%', padding: 12, alignItems: 'center', backgroundColor: this.state.rating == 0 || this.state.ratesubmitted ? "" : Theme.colors.primary, borderColor: Theme.colors.primary, borderWidth: 2, borderRadius: 10, marginTop: 15}}
            >
              <Text style={{color: this.state.rating == 0 ? Theme.colors.primary : "#fff", fontSize: 16, fontFamily: 'Arial'}}>Submit Rating</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={async () => {
              await REQUEST("contact_us", "get", {}, {}, {}, async (res) => {
                if(res.status == 1 && res.data){
                  openComposer({
                    to: res.data.contact_email_address_mobile,
                    subject: `Mobile App Feedback:\nCN${this.state.cn}`,
                    body: ''
                  })
                } else {
                  console.log(res.message, res.data)
                }
              }
              )   
            }} style={{width: '90%', padding: 12, alignItems: 'center', marginTop: 15}}>
              <Text style={{color: Theme.colors.primary, fontSize: 16, fontFamily: 'Arial'}}>Send Feedback</Text>
            </TouchableOpacity>
          </View>
        </View>
      </CustomSafeArea>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(TransactionDetails)