Untitled
unknown
plain_text
2 years ago
16 kB
1
Indexable
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;