unioil-loyalty-rn-app/app/components/header.js

import * as React from 'react';
import { Text, View, Image, TouchableOpacity, ImageBackground, Platform } from 'react-native';
import { connect } from "react-redux";
import Icon from './icons.js';
import Theme from './theme.style.js';
import Assets from './assets.manager.js';
import DB from './storage/';

const styles = {
  borderedButton: {
    padding: 5,
    borderColor: '#fff',
    borderRadius: 5,
    borderWidth: 2,
    height: 45,
    width: 130,
    margin: 5,
    justifyContent: 'center'
  },
  textBig: {

  }
}

class CustomHeader extends React.Component {

  constructor(props) {
    super(props)
    this.navigation = props.navigation.navigation || props.navigation
    this.profile = null
    this.btnstyle = { marginLeft: 10 }
    this.openDrawer = () => { this.navigation.openDrawer() }
    this.BackToHome = () => { this.navigation.navigate(props.backscreen || "MenuTab") }
  }

  state = {
    profile: (this.props.userinfo != undefined) ? this.props.userinfo : {},
    guest: false
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {

  }

  init = async () => {
    let stored = await DB.profile()
    let isGuest = await DB.get("is_guest")
    this.setState({ profile: this.props.userinfo, guest: isGuest })
    if(this.props.userinfo == undefined) {
      this.setState({ profile: stored, guest: isGuest })
    }
  }

  navigate = (screen, onBackPress) => {
    this.props.navigation.navigate('MyProfile', {
      tab: screen == "mycard" ? 1 : 2,
      onBackPress: onBackPress
    });
  }

  getName = (p) => {
    let data = p?.data || this.state.profile?.data
    return data ? data : {firstname: '', middlename: '', lastname: ''}
  }

  getCard = (p) => {
    let data = p?.data || this.state.profile?.data
    return data ? data.card_number : ""
  }

  getPoints = (p) => {
    let data = p?.data || this.state.profile?.data
    return data ? data.points : "0.00"
  }

  getPhoto = (p) => {
    let data = p?.data || this.state.profile?.data
    return data ? data.photo == '' ? Assets.logo.profileHolder : {uri: data.photo} : Assets.logo.profileHolder
  }

  getCardBackground = (p) => {
    let data = p?.data || this.state.profile?.data
    return data ? data.card_bg_image == '' ? Assets.cards.classic : {uri: data.card_bg_image} : Assets.cards.classic
  }

  renderButtonLeft() {
    if(this.props.menu) {
      return (
        <TouchableOpacity style={this.btnstyle} onPress={this.openDrawer}>
          <Icon.Feather name="menu" size={25} style={{color: "#FFF"}} />
        </TouchableOpacity>
      )
    } else {
      return (
        <TouchableOpacity style={this.btnstyle} onPress={this.props.onBackPress ? this.props.onBackPress : this.BackToHome}>
          <Icon.AntDesign name={this.props.back ? "arrowleft" : "close"} size={20} style={{color: "#FFF"}} />
        </TouchableOpacity>
      )
    }
  }

  renderButtonRight() {
    if(!this.props.renderIQAir) return null;
    if(!this.state.guest) {
      return (
        <TouchableOpacity style={{top: -2}} onPress={() => this.props.navigation.navigate("IQAir")}>
          <Image style={{height: 25, width: 25}} source={require("../assets/iqair-button.png")} />
        </TouchableOpacity>
      )
    }
  }

  renderBanner() {
    return (
      <View>
        <View style={{flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}>
          <View style={[{flex:1, justifyContent: 'center'}, this.props.customLeftContainerStyle ]}>
            {this.renderButtonLeft()}
          </View>
          <View style={{flex:3, justifyContent: 'center'}}>
            <Text style={{fontWeight: this.props.boldTitle ? "bold" : "normal", textAlign:'center', fontSize: 17, color: '#fff'}}>{this.props.title || this.props.customTitle}</Text>
          </View>
          <View style={{flex:1, justifyContent: 'center'}}>
            {this.props.rightMenu || null}
          </View>
        </View>
      </View>
    )
  }

  render() {
    if(!this.props.banner) return this.renderBanner()
    this.profile = this.props.userinfo
    return (
      <View>
        <View style={{flexDirection: 'row', height: Theme.screen.w * .8, padding: 0, opacity: 0.8}}>
          <ImageBackground
          source={this.getCardBackground(this.profile ? this.profile : {})} 
          style={{
            height: '100%',
            width: '100%',
          }}>
          <View style={{width: '100%', paddingTop: 15, height: Theme.screen.w * .8, backgroundColor: 'rgba(0,0,0,0.5)', flexDirection: 'row'}}>
            <View style={{flex: .1}}>
              {this.renderButtonLeft()}
            </View>

            <View style={{flex: 1}}>
              <View style={{flex:1,  justifyContent: 'flex-start', alignItems: 'center', width: '100%'}}>
                <View style={{  width: 78, height: 78, borderRadius: 40, borderColor: '#fff', zIndex: 1, borderWidth: 3}}>
                  {
                    !this.state.guest ? <Image source={this.getPhoto(this.profile ? this.profile : {})} style={{ borderRadius: 40, resizeMode: "cover", alignSelf: "center", width: '100%', height: '100%', borderColor: '#fff'}} />
                    : <Image source={Assets.logo.profileHolder} style={{ borderRadius: 40, resizeMode: "cover", alignSelf: "center", width: '100%', height: '100%', borderColor: '#fff'}} />
                  }
                </View>
                <View style={{flex: 1, width: '100%', alignItems: 'center'}}>
                  <Text style={{fontSize: 15, fontWeight: 'bold', color: '#fff', marginTop: 15}}>
                    {
                      !this.state.guest ? Theme.formatter.NAME(this.getName(this.profile ? this.profile : {}))
                      : 'Guest'
                    }
                  </Text>
                  <Text style={{fontSize: 25, fontWeight: 'bold', color: '#fff'}}>
                    {
                      !this.state.guest ? Theme.formatter.CN(this.getCard(this.profile ? this.profile : {}))
                      : ''
                    }
                  </Text>
                  <Text style={{fontSize: 15, color: '#fff', marginBottom: 10}}>
                    Points: &nbsp;
                    <Text style={{fontWeight: 'bold'}}>
                      {
                        !this.state.guest ? Theme.formatter.CRNCY(this.getPoints(this.profile ? this.profile : {}))
                        : '0.00'
                      }
                    </Text>
                  </Text>
                </View>
                <View style={{flex: 1, flexDirection: 'row', marginTop: 30}}>
                    <TouchableOpacity disabled={this.state.guest} onPress={() => this.navigate("transactions", this.state.reload || null)} style={styles.borderedButton}>
                    <Text style={{color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : '#fff', alignSelf:'center'}}>My Transactions</Text>
                  </TouchableOpacity>
                  <TouchableOpacity disabled={this.state.guest} onPress={() => this.navigate("mycard", this.state.reload || null)} style={styles.borderedButton}>
                    <Text style={{color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : '#fff', alignSelf:'center'}}>My Card</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>

            <View style={{flex: .1, paddingRight: 5}}>
              {this.renderButtonRight()}
            </View>
          </View>
        </ImageBackground>
        </View>
      </View>
    )
  }
}

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

export default connect(mapStateToProps, null)(CustomHeader)