Untitled
unknown
plain_text
a year ago
16 kB
1
Indexable
Never
import React, { Component, useState, useEffect, useContext } from "react"; import { StyleSheet, View, Image, ImageBackground, Text, KeyboardAvoidingView, Platform, ActivityIndicator, BackHandler } from "react-native"; import ButtonRecargarValores from "../components/ButtonRecargarValores"; import MaterialDisabledTextbox from "../components/MaterialDisabledTextbox"; import CupertinoButtonSuccess from "../components/CupertinoButtonSuccess"; import * as SecureStore from "expo-secure-store"; import { postMovimiento } from "../../service/MovimientosService.js"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; import AwesomeAlert from "react-native-awesome-alerts"; import CheckoutScreen from "./Prueba copy"; import { strings } from "../../service/Translation"; import * as Animatable from 'react-native-animatable'; import { AppContext, AppContextProvider } from "./AppContext"; function RecargarSaldo(props) { const [selected, setSelected] = useState(null); const [monto, setMonto] = useState(null); const { aliveAlert, setIsLoading, isLoading } = useContext(AppContext) useEffect(() => { const backAction = () => { props.navigation.navigate('HomePage') } const backHandler = BackHandler.addEventListener( 'hardwareBackPress', backAction, ); return () => backHandler.remove(); }, []); const [alert, setAlert] = useState({ text: "", type: null, show: false, title: "", cancelButton: false, confirmButton: true, cargando: false, }); const showAlert = () => { setAlert({ ...alert, show: true, }); }; const hideAlert = () => { setAlert({ ...alert, show: false, }); }; const clickValorFijo = (val) => { if (val != selected) { setSelected(val); setMonto(null); } else { setSelected(null); } }; useEffect(() => {}, []); const recargar = async () => { setIsLoading(true); // let carga = null // SecureStore.getItemAsync('id_user').then((idUser) => { // SecureStore.getItemAsync('idTelefono').then((idTelefono) => { // if (selected != null) { // if (props.navigation.state.params?.comingFrom == 'transferir') { // carga = { // userId: idUser, // telefonoId: idTelefono, // cantidadCarga: selected, // telefono: { // numero: props.navigation.state.params?.numero // } // } // } // else { // carga = { // userId: idUser, // telefonoId: idTelefono, // cantidadCarga: selected // } // } // } // else { // if (monto != null) { // if (props.navigation.state.params?.comingFrom == 'transferir') { // carga = { // userId: idUser, // telefonoId: idTelefono, // cantidadCarga: monto, // telefono: { // numero: props.navigation.state.params?.numero // } // } // } // else { // carga = { // userId: idUser, // telefonoId: idTelefono, // cantidadCarga: monto // } // } // } // } // if (carga != null) { // postMovimiento(carga, props.navigation.state.params?.comingFrom == 'transferir').then((res) => { // if (res.code == "200") { // setIsLoading(false); // setAlert({ // ...alert, // title: 'Correcto!', // text: props.navigation.state.params?.comingFrom == 'transferir' ? 'Se ha transferido saldo correctamente' : 'Se ha cargado saldo correctamente', // confirmButton: true, // cargando: false, // show: true // }) // } else { // setIsLoading(false); // if (res.data == "SALDO_INSUFICIENTE") { // setAlert({ // ...alert, // title: 'Saldo insuficiente!', // text: 'Monto ingresado mayor al saldo disponible', // confirmButton: true, // cargando: false, // show: true // }) // } // if (res.data == "MINIMO") { // setIsLoading(false); // setAlert({ // ...alert, // title: 'Error', // text: strings.ErrorSaldoMinimoTransferencia, // confirmButton: true, // cargando: false, // show: true // }) // } // if(res.data != "MINIMO" && res.data != "SALDO_INSUFICIENTE") { // setIsLoading(false); // setAlert({ // ...alert, // title: 'Incorrecto!', // text: 'Ha ocurrido un error al cargar el saldo', // confirmButton: true, // cargando: false, // show: true // }) // } // } // }) // } // }).catch(() => { // hideAlert() // setIsLoading(false); // }) // }).catch(() => { // hideAlert() // setIsLoading(false); // }) }; return ( <KeyboardAwareScrollView> <View style={styles.container}> <View style={styles.loadingContainer}> </View> <View style={styles.image2Stack}> <ImageBackground source={require("../assets/images/backgrounds-0322.png")} resizeMode="cover" style={styles.image2} imageStyle={styles.image2_imageStyle} overlayColor={"rgba(0, 0, 0, 0.5)"} overlayBackgroundColor="rgba(0, 0, 0, 0.5)" > <View style={styles.imageTelefonoContainer}> <Image source={ props.navigation.state.params?.comingFrom == "transferir" ? require("../assets/images/fdasdas.png") : require("../assets/images/6579030_and_computers_hardware_heart_iphone_icon_(1)1.png") } resizeMode="cover" style={styles.imageTelefono} ></Image> </View> <View style={styles.tituloContainer}> <Text style={styles.recargarSaldo}> {props.navigation.state.params?.comingFrom == "transferir" ? strings.transferirTitulo : strings.recargarTitulo} </Text> </View> <View style={styles.rowButtons}> <ButtonRecargarValores style={ selected == 400 ? styles.buttonSelected : styles.materialButtonLight7 } value={400} click={(val) => { clickValorFijo(val); }} selected={selected == 400} ></ButtonRecargarValores> <ButtonRecargarValores style={ selected == 500 ? styles.buttonSelected : styles.materialButtonLight7 } value={500} click={(val) => { clickValorFijo(val); }} selected={selected == 500} ></ButtonRecargarValores> </View> <View style={styles.rowButtons}> <ButtonRecargarValores style={ selected == 600 ? styles.buttonSelected : styles.materialButtonLight7 } value={600} click={(val) => { clickValorFijo(val); }} selected={selected == 600} ></ButtonRecargarValores> <ButtonRecargarValores style={ selected == 700 ? styles.buttonSelected : styles.materialButtonLight7 } value={700} click={(val) => { clickValorFijo(val); }} selected={selected == 700} ></ButtonRecargarValores> </View> <View style={styles.rowButtons}> <ButtonRecargarValores style={ selected == 800 ? styles.buttonSelected : styles.materialButtonLight7 } value={800} click={(val) => { clickValorFijo(val); }} selected={selected == 800} ></ButtonRecargarValores> <ButtonRecargarValores style={ selected == 900 ? styles.buttonSelected : styles.materialButtonLight7 } value={900} click={(val) => { clickValorFijo(val); }} selected={selected == 900} ></ButtonRecargarValores> </View> <View style={styles.rowButtons}> <ButtonRecargarValores style={ selected == 1000 ? styles.buttonSelected : styles.materialButtonLight7 } value={1000} click={(val) => { clickValorFijo(val); }} selected={selected == 1000} ></ButtonRecargarValores> <ButtonRecargarValores style={ selected == 1100 ? styles.buttonSelected : styles.materialButtonLight7 } value={1100} click={(val) => { clickValorFijo(val); }} selected={selected == 1100} ></ButtonRecargarValores> </View> <View style={styles.otroMontoContainer}> <Text style={styles.ingresarOtroMonto}>{strings.otroMonto}</Text> </View> <View style={styles.itemsContainer}> <MaterialDisabledTextbox style={styles.materialDisabledTextbox1} value={monto} pass={false} change={(val) => { setMonto(val); setSelected(null); }} type={"numeric"} ></MaterialDisabledTextbox> </View> <View style={styles.buttonContainer}> {props.navigation.state.params?.comingFrom == "transferir" ? ( <CupertinoButtonSuccess style={[styles.cupertinoButtonSuccess1, isLoading || !monto ? styles.disabled : styles.cupertinoButtonSuccess1]} click={recargar} disabled={isLoading ? true : monto == null} text={ props.navigation.state.params?.comingFrom == "transferir" ? strings.transferir : strings.recargar } ></CupertinoButtonSuccess> ) : (selected != null || monto != null) && props.navigation.state.params?.comingFrom != "transferir" ? ( <CheckoutScreen style={styles.cupertinoButtonSuccess1} click={recargar} text={ props.navigation.state.params?.comingFrom == "transferir" ? strings.transferir : strings.recargar } disabled={isLoading} amount={selected != null ? selected : monto} ></CheckoutScreen> ) : ( <View style={styles.recargarDeshabilitado}> <Text style={styles.recargarDeshabilitadoText}> {props.navigation.state.params?.comingFrom == "transferir" ? strings.transferir : strings.recargar} </Text> </View> )} </View> </ImageBackground> </View> </View> <AwesomeAlert show={alert.show} showProgress={alert.cargando} title={alert.title == "" ? null : alert.title} message={alert.text == "" ? null : alert.text} showConfirmButton={alert.confirmButton} confirmText="Ok" confirmButtonColor="#DD6B55" closeOnTouchOutside={false} closeOnHardwareBackPress={false} onConfirmPressed={() => { hideAlert(); }} /> </KeyboardAwareScrollView> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignContent: "center", }, image2: { flex: 1, }, image2Stack: { flex: 1, height: 800, }, imageTelefonoContainer: { flex: 2, justifyContent: "center", alignContent: "center", }, tituloContainer: { flex: 1, alignContent: "center", }, itemsContainer: { flex: 1, alignContent: "center", }, otroMontoContainer: { flex: 0.7, justifyContent: "flex-end", alignContent: "center", }, rowButtons: { flex: 1, flexDirection: "row", justifyContent: "center", alignContent: "center", }, imageTelefono: { height: "50%", width: "20%", alignSelf: "center", }, recargarSaldo: { fontFamily: "roboto-900", color: "rgba(255,255,255,1)", fontSize: 20, alignSelf: "center", }, ingresarOtroMonto: { fontFamily: "roboto-500", textAlign: "center", fontSize: 17, alignSelf: "center", }, materialDisabledTextbox1: { marginHorizontal: "5%", }, buttonContainer: { flex: 1.5, alignContent: "center", }, cupertinoButtonSuccess1: { paddingVertical: "4%", marginHorizontal: "30%", }, materialButtonLight7: { borderRadius: 13, shadowColor: "rgba(0,0,0,1)", shadowOffset: { width: 3, height: 3, }, elevation: 5, shadowOpacity: 0.3, shadowRadius: 0, backgroundColor: "#fff", margin: "4%", }, buttonSelected: { borderRadius: 13, shadowColor: "rgba(0,0,0,1)", shadowOffset: { width: 3, height: 3, }, elevation: 5, shadowOpacity: 0.3, shadowRadius: 0, backgroundColor: "rgba(67,67,164,1)", margin: "4%", color: "#ffffff", }, recargarDeshabilitado: { paddingVertical: "4%", marginHorizontal: "30%", backgroundColor: "#c3c3c3", borderRadius: 5, }, recargarDeshabilitadoText: { fontFamily: "roboto-500", color: "#9c9c9c", fontSize: 17, alignSelf: "center", }, loadingContainer: { position: 'absolute', bottom: 0, left: 2, flexDirection: 'row', alignItems: 'center', backgroundColor: '#8383D1', borderRadius: 8, padding: 6, size:7 }, loadingIndicator: { marginRight: 10, }, loadingText: { fontSize: 12, fontWeight:'500' }, disabled: { backgroundColor: "#ccc", }, }); export default RecargarSaldo;