unioil-loyalty-rn-app/app/screens/login/enroll.js

import * as React from 'react';
import { useState } from 'react';
import { 
  StyleSheet, 
  TouchableOpacity, 
  View, 
  Text, 
  Image, 
  Alert, 
  Platform 
} from 'react-native';
import { Container } from 'native-base';
import NetInfo from "@react-native-community/netinfo";
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 REQUEST from '../../components/api/';
import CustomInput from '../../components/custominput';
import CustomSafeArea from '../../components/safeArea.component.js';

export default function ActivateAccountCard(navigation) {

  const [loading, setloading] = useState(false);
  const [cardnumber, setcardnumber] = useState("");
  const [valid, setvalid] = useState(false);

  const setCardNumber = (cn) => {
    console.log(cn.length, cn)
    setvalid(cn.length == 16 ? true : false)
  }

  const handleRedirect = (res, uuid, SESSION) => {
    Alert.alert(
      'Error',
      "\n"+res.message+'\n',
      [{
        text: 'No',
        style: 'cancel',
      },
        {
          text: 'YES', onPress: async () => {
            if(SESSION.token){
              DB.logout(function(res){
                console.log("LOGOUT RESULT", res)
                if(res.status == 1){
                  navigation.navigation.navigate("LoginBirthday", {
                    cardnumber: cardnumber,
                    deviceUUID: uuid,
                    screen: "Account"
                  })
                }
              }, function(error){
                console.log(error)
              })
            }else{
              navigation.navigation.navigate("LoginBirthday", {
                cardnumber: cardnumber,
                deviceUUID: uuid,
                screen: "Login"
              })
            }                
          }
        },
      ],
      {cancelable: true}
    );
  }

  const Submit = async () => {
    setloading(true)
    let uuid = await DB.get("deviceUUID")
    let SESSION = await DB.session()
    await REQUEST("card_validation_enroll", "post", {}, {}, {
      card_number: cardnumber,
      deviceUUID: uuid
    }, function(res){
      setloading(false)
      if(res.status == 0 && res.data.code == 2){
        // Platform.OS == 'ios' ? setTimeout(() => {
        //   Alert.alert("Error", "\n" + res.message)
        // }, 300) :
        // Alert.alert("Error", "\n" + res.message)
        navigation.navigation.navigate('')
      }else if(res.status == 0 && res.data.code == 4){
        Platform.OS == 'ios' ? setTimeout(() => {
          handleRedirect(res, uuid, SESSION)
        }, 300) :
        handleRedirect(res, uuid, SESSION)       
      }
      else{
        //PROCEED NOW!!!!
      }
      console.log(res)
    }, function(error){
      console.log(error)
      setloading(false)
    })
  }

  const onSubmit = () => {
    if(valid) Submit()
    // if(valid) alert("Card number is " + cardnumber)
  }

  return (
    <CustomSafeArea>
      <Elements.loader visible={loading} />
      <CustomHeader title="" navigation={navigation} main={false} backscreen={navigation.route.params ? navigation.route.params.screen : "Account"} back={true} />
      <Container style={{flex: 1}}>
        <View style={{flex: 1}}> 
          <View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
            <Image source={Assets.logo.unioil} style={{width: '100%', height: '85%',  resizeMode: 'contain'}} />
          </View>
          <View style={{flex: 1, alignItems: 'center'}}>
            <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: Theme.colors.textPrimary}}>Enroll Card</Text>
            <Text style={{alignSelf: 'center', marginTop: 5, color: Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
              Have a new card?
            </Text>
            <Text style={{alignSelf: 'center', marginTop: 1, color: Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
              Please enter your card number.
            </Text>
            <View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}> 
              
              {/* <CustomInput 
                onChangeText={(val) => {setvalid(false)}}
                onDone={async (cn) => {
                  await setcardnumber(cn)
                  await setCardNumber(cn)
                }} 
              /> */}
              <CustomInput 
                onChangeText={(val) => {
                  setcardnumber(val)
                  setvalid(val.length == 16 ? true : false)
                }}
              />

            </View>
            
            <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 10}}>
              <TouchableOpacity onPress={() => {
                NetInfo.fetch().then(state => {
                  console.log("Connection type", state.type);
                  console.log("Is connected?", state.isConnected);
                  if(state.isConnected){
                    onSubmit()
                  }else{
                    Elements.nointernet2(navigation)
                  }
                })
              }} disabled={!valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 80, paddingBottom: 15, borderRadius: 10, backgroundColor: valid ? Theme.colors.primary : Theme.colors.primary + "15"}}>
                <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Next</Text>
              </TouchableOpacity>
            </View>
        
          </View>
        </View>
      </Container>

    </CustomSafeArea>
  );
}

const styles = StyleSheet.create({
  input: {
    flex: 1, padding: 0, margin: 5, fontSize: 18, textAlign: 'center', borderBottomColor: Theme.colors.accent, borderBottomWidth: 1.5
  }
});