unioil-loyalty-rn-app/app/screens/contact/index.js

import * as React from 'react';
import { 
  View, 
  Text, 
  Platform, 
  Linking, 
  Alert, 
  TouchableOpacity 
} from 'react-native';
import { connect } from "react-redux";
import { openComposer } from 'react-native-email-link'
import NetInfo from "../../components/netstatus";
import CustomHeader from '../../components/header.js';
import Elements from '../../components/elements.js';
import Icon from '../../components/icons.js';
import REQUEST from '../../components/api/';
import DB from '../../components/storage/index';
import CustomSafeArea from '../../components/safeArea.component';

class Contact extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    data: {},
    connected: false,
    cn: '',
  }

  componentDidMount() {
    this.initContact()
  }

  componentWillUnmount() {

  }

  initContact = () => {
    NetInfo.netstatus(isConnected => {
      if(isConnected) {
        this.init()
      } else {
        Elements.nointernet2()
      }
    })
  }

  init = async () => {
    let user_profile = await DB.profile()
    console.log(user_profile.data.card_number)
    this.setState({ connected: true, cn: user_profile.data.card_number })
    await REQUEST("contact_us", "get", {}, {}, {}, 
      async (res) => {
        if(res.status == 1 && res.data){
          this.setState({ data: res.data })
        }else{
          console.log(res.message, res.data)
        }
      }, function(error){  
        console.log(error)
    })
  }

  getData = (type) => {
    return type == "email" ? this.state.data.contact_email_address_mobile : this.state.data.contact_number_mobile
  }

  render() {
    console.log(this.state)
    if(!this.state.connected){
      return (
        <View style={{flex: 1}}>
          <CustomHeader title="Contact Us" menu={false} navigation={this.props.navigation} />
          <Elements.nointernet 
            message="No internet found. Please check your internet connection." 
            buttonText="Try Again" 
            onPress={() => this.init()}
          />
        </View>
      )
    }

    return (
      <CustomSafeArea>
        <CustomHeader title="Contact Us" menu={false} navigation={this.props.navigation} />
        <View style={{flex: 1, padding: 15}}>
          <Text style={{fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'rgba(0, 0, 0, 0.7)', marginBottom: 18}}>
            Our Unioil Customer Service team is ready to assist you if you have any questions or problems using the app.
          </Text>
          <Text style={{fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'rgba(0, 0, 0, 0.7)', marginBottom: 18}}>
            The team is available during office hours only, Mon-Fri, 8:00 AM - 5:00 PM.
          </Text>
          <Text style={{fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'rgba(0, 0, 0, 0.7)', marginBottom: 18}}>
            For immediate response, you may contact us through the following:
          </Text>
  
          <TouchableOpacity onPress={() => {
            openComposer({
              to: this.getData("email") || "loyalty@unioil.com",
              subject: `Mobile App Feedback:\nCN${this.state.cn}`,
              body: ''
            })
          }} style={{flex: 1, flexDirection: 'row',margin: 15, height: 120, padding: 5}}>
            <View style={{flex: 1, height: 25}}>
              <Icon.Entypo name="mail" size={30} style={{color: '#005598'}} />
            </View>
            <View style={{flex: 5, height: 50}}>
              <Text style={{fontSize: 16, padding: 6, fontWeight: 'bold',  fontFamily: 'Arial', color: '#005598'}}>
                {this.getData("email") || "loyalty@unioil.com"}
              </Text>
            </View>
  
          </TouchableOpacity>
  
          <TouchableOpacity onPress={() => {
            let url = Platform.OS == 'ios' ? 'telprompt:' : 'tel:'
            Linking.canOpenURL(url).then(supported => {
                if (!supported) {
                  console.log('Cant handle url')
                  alert("Call Not Supported")
                } else {
                  Alert.alert("Call Customer Service", "You will be redirected to the dialer to call Unioil Customer Service", [{
                    text: 'Cancel',
                    style: 'cancel',
                  },
                    {
                      text: 'OK', onPress: () => Linking.openURL(`${url}${this.state.data.contact_number_mobile || "0286878877"}`)
                    },
                  ],
                  {cancelable: true})
                  return true
                }
              }).catch(err => {
                console.error('An error occurred', err)
              })
          }} style={{flex: 1, flexDirection: 'row',margin: 15, padding: 5}}>
  
            <View style={{flex: 1, height: 50}}>
              <Icon.Ionicons name="md-call" size={30} style={{color: '#005598'}} />
            </View>
            <View style={{flex: 5, height: 50}}>
              <Text style={{fontSize: 16, padding: 6, fontWeight: 'bold',  fontFamily: 'Arial', color: '#005598'}}>
                {this.getData("mobile") || "0286878877"}
              </Text>
            </View>
          </TouchableOpacity>
  
          <TouchableOpacity onPress={() => {
            let url = Platform.OS == 'ios' ? 'fb://profile/140191739947' : 'fb://page/140191739947'
            Linking.canOpenURL(url).then(supported => {
                if (!supported) {
                  return Linking.openURL("https://www.facebook.com/unioil");
                } else {
                  return Linking.openURL(url)          
                }
              }).catch(err => {
                console.error('An error occurred', err)
              })
          }} style={{flex: 1, flexDirection: 'row',margin: 15, padding: 5}}>
            <View style={{flex: 1, height: 50}}>
              <Icon.Ionicons name="logo-facebook" size={30} style={{color: '#005598'}} />
            </View>
            <View style={{flex: 5, height: 50}}>
              <Text style={{fontSize: 16, padding: 6, fontWeight: 'bold',  fontFamily: 'Arial', color: '#005598'}}>
                Unioil
              </Text>
            </View>
          </TouchableOpacity>
          <View style={{flex:30}}></View>
        </View>
      </CustomSafeArea>
    );
  }
}

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

export default connect(mapStateToProps, null)(Contact);