import React, {useState, useEffect} from 'react'; import { View, Text, StyleSheet, FlatList, Dimensions, TouchableOpacity, Alert, KeyboardAvoidingView, TouchableWithoutFeedback, Keyboard, Platform, } from 'react-native'; import {connect} from 'react-redux'; import R from '../../assets/R'; import HeaderBack from '../../components/Header/HeaderBack'; import I18n from '../../helper/i18/i18n'; import Item from './Item'; import {getFontXD, WIDTHXD, checkFormatArray} from '../../Config/Functions'; import TextField from '../../components/Input/TextField'; import PickerItem from '../../components/Picker/PickerItem'; import { deleteMethodBank, addMethodBank, updateMethodBank, } from '../../apis/Functions/Widthdraw'; import {showLoading, hideLoading} from '../../actions/loadingAction'; import {useNavigation} from '@react-navigation/native'; import BankInfor from '../../components/BankInfor'; import AppText from '../../components/AppText'; import {TYPE} from '../../components/DropdownAlert'; const {width} = Dimensions.get('window'); const MethodPayDetail = (props) => { const [data, setData] = useState([]); const {params} = props.route; const [disable, setDisable] = useState(true); const navigate = useNavigation(); const [branch_name, setBankName] = useState(params.branch_name); const [account_name, setAccountName] = useState(params.account_name); const [account_no, setAccountNo] = useState(params.account_no); const onUpdate = async () => { const titles = [ I18n.t('Branch').toLowerCase(), I18n.t('OwnerAccount2').toLowerCase(), I18n.t('AccountNumber').toLowerCase(), ]; const index = checkFormatArray([branch_name, account_name, account_no]); if (index === true) { if ( branch_name != params.branch_name || account_name != params.account_name || account_no != params.account_no ) { props.showLoading(); const res = await updateMethodBank({ platform: Platform.OS, id: params.id, branch_name, account_name, account_no, }); props.hideLoading(); if (res.data.code == 200) { showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message); navigate.goBack(); } else { showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message); } } else { showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('NothingChange')); } } else { showAlert( TYPE.WARN, I18n.t('Notification'), I18n.t('Please_fill_in') + titles[index], ); } }; const onRemove = async () => { props.showLoading(); const res = await deleteMethodBank({ platform: Platform.OS, id: params.id, }); props.hideLoading(); if (res.data.code == 200) { showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message); navigate.goBack(); } else { showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message); } }; return ( <KeyboardAvoidingView behavior={Platform.Os === 'ios' ? 'padding' : 'height'} style={{flex: 1}} keyboardVerticalOffset={-50}> <TouchableWithoutFeedback onPress={Keyboard.dismiss}> <View style={{flex: 1}}> <HeaderBack title={'DetailMethod'} /> <View style={{flex: 1}}> <View style={styles.container}> <BankInfor linkImg={params.bank.logo} title={I18n.t('SelectBank')} value={params.bank.name} /> <TextField onChangeText={(val) => setBankName(val)} title={I18n.t('Branch')} value={branch_name} /> <TextField onChangeText={(val) => setAccountName(val)} title={I18n.t('OwnerAccountName')} value={account_name} /> <TextField onChangeText={(val) => setAccountNo(val)} title={I18n.t('AccountNumber')} isNumber={true} value={account_no} /> </View> </View> <View style={styles.footer}> <TouchableOpacity onPress={onUpdate} style={styles.btnLeft}> <AppText style={styles.txtAdd} i18nKey={'Update'} /> </TouchableOpacity> <TouchableOpacity onPress={() => { Alert.alert( `${I18n.t('Notification')}!`, I18n.t('DeletePaymentMethodConfirm'), [ { text: I18n.t('Forbidden'), style: 'cancel', }, {text: I18n.t('Ok'), onPress: () => onRemove()}, ], ); }} style={styles.btnRight}> <AppText style={styles.txtAdd} i18nKey={'Delete'} /> </TouchableOpacity> </View> </View> </TouchableWithoutFeedback> </KeyboardAvoidingView> ); }; const styles = StyleSheet.create({ container: { paddingHorizontal: 20, paddingTop: 10, }, footer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10, paddingHorizontal: 20, }, btnLeft: { width: 150, height: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: R.colors.main, borderRadius: 5, }, btnRight: { width: 150, height: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: R.colors.main, borderRadius: 5, }, txtAdd: { color: R.colors.white, fontSize: getFontXD(46), textTransform: 'uppercase', fontWeight: 'bold', }, txtTitle: { fontSize: getFontXD(42), color: R.colors.color777, marginBottom: 5, }, }); const mapStateToProps = (state) => { return { user: state.userReducer, }; }; export default connect(mapStateToProps, { showLoading, hideLoading, })(MethodPayDetail);