unioil-loyalty-rn-app/app/screens/account/activate/pin.js

import * as React from 'react';
import { 
  TouchableOpacity, 
  Platform, 
  View, 
  Text, 
  Image, 
  Alert, 
  Modal 
} from 'react-native';
import { 
  Container, 
  FormControl, 
  Stack, 
  Input 
} from 'native-base';
import { connect } from "react-redux";
import CustomHeader from '../../../components/header.js';
import Assets from '../../../components/assets.manager.js';
import Theme from '../../../components/theme.style.js';
import Elements from '../../../components/elements.js';
import IconX from '../../../components/icons.js';
import REQUEST from '../../../components/api/';
import CustomSafeArea from '../../../components/safeArea.component.js';

const styles = {
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: '#00000090',
    padding: 30
  },
  bottomView: {
    flex: 1,
    justifyContent: "flex-end",
    alignItems: "center",
    backgroundColor: '#00000090',
    padding: 0
  },
  modalView: {
    backgroundColor: '#fff',
    padding: 20
  },
  modalTitle: {
    padding: 5,
    fontSize: 18,
    fontWeight: 'bold'
  },
  modalText: {
    padding: 5,
    fontSize: 16,
    color: 'gray',
    marginTop: 10
  }
}

class ApplyCardDetails extends React.Component {

  constructor(props) {
    super(props)
    this.card = props.route.params || {}
  }

  state = {
    loading: false,
    modalvisible: false,
    pin: null,
    valid: false
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  proceed = () => {
    this.props.navigation.navigate("AccountEnrollForm", {
      card_number: this.card.card_number,
      pin: this.state.pin,
      callback: this.card.callback,
      type: this.props.route.params.type
    })
  }

  onNext = async () => {
    this.setState({ loading: true })
    let body = {
      card_number: this.card.card_number,
      pin: parseInt(this.state.pin)
    }
    
    await REQUEST("send_card_pin", "post", {}, {}, body, (res) => {
      this.setState({ loading: false })
      if(res.status == 0) {
        Platform.OS == 'ios' ? setTimeout(() => {
          Alert.alert("Error", res.message)
        }, 300) : Alert.alert("Error", res.message)
      } else {
        this.proceed()
      }
    }, (error) => {
      console.log(error)
      this.setState({ loading: false })
    })

  }

  render() {
    return (
      <CustomSafeArea>
        <Elements.loader visible={this.state.loading} />
        <CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />      
        <Container style={{padding: 30}}>
          <View style={{flex: 0, justifyContent: 'center', alignItems: 'center', marginTop: '15%'}}>
            <Text style={{fontFamily: "Arial", fontSize: 22, fontWeight: "bold", marginBottom: 15, color: this.props.app_theme?.theme.colors.text}}>Enter Your Pin</Text>
            <Text style={{fontFamily: "Arial", fontSize: 15, textAlign: 'center', width: '80%', color: this.props.app_theme?.theme.colors.text}}>Please see the PIN at the back of your card&nbsp;             
              <IconX.AntDesign name="infocirlce" size={15} color="gray" onPress={() => this.setState({ modalvisible: true })} />
            </Text>
          </View>
          <FormControl style={{marginTop: '20%', marginBottom: '5%'}}>
            <Stack>
              <FormControl.Label style={{fontSize: 15, color: this.props.app_theme?.theme.colors.text}}>PIN Code</FormControl.Label>
              <Input style={{ color: this.props.app_theme?.theme.colors.text }} keyboardType="number-pad" maxLength={8} onChangeText={(val) => this.setState({ pin: val, valid: val.length == 8 ? true : false })} />
            </Stack>
          </FormControl>
          <TouchableOpacity disabled={!this.state.valid} onPress={() => this.onNext() } style={{backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + 15, borderRadius: 5}}>
            <Text style={{textAlign: 'center', color: "#fff", fontSize: 18, padding: 15}}>Submit</Text>
          </TouchableOpacity>
          <Modal
            animationType="none"
            transparent={true}
            visible={this.state.modalvisible}>
            <TouchableOpacity activeOpacity={1} onPress={() => this.setState({ modalvisible: false })} style={{...styles.centeredView, borderRadius: 12}}>
              <TouchableOpacity activeOpacity={1} style={{...styles.modalView, backgroundColor: '00000090', padding: 0, borderRadius: 12}}>
                <Image source={Assets.guidecard} style={{width: Theme.screen.w - 40, height: Theme.screen.h / 3, resizeMode: 'stretch', borderRadius: 12}} />
              </TouchableOpacity>
            </TouchableOpacity>
          </Modal>
        </Container>      
      </CustomSafeArea>
    );
  }
}

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

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