import * as React from "react"; import { StyleSheet, Button, View, SafeAreaView, Text } from "react-native"; import * as WebBrowser from "expo-web-browser"; import { connect } from "react-redux"; import { Picker } from "@react-native-community/picker"; import { Linking } from "expo"; import Constants from "expo-constants"; import { errorAlert } from "../util/Alerts"; import { initiatePayment, clearError } from "../store/PaymentSlice"; export function IDealScreen({ navigation, payment, initiatePayment, clearError, }) { const [issuer, setIssuer] = React.useState(""); const [validIssuer, setValidIssuer] = React.useState(false); const [startPayment, setStartPayment] = React.useState(false); // react to change in error React.useEffect(() => { errorAlert(payment.error); clearError(); }, [payment.error]); // react to change in payment response React.useEffect(() => { const { paymentRes } = payment; async function performAction() { if (paymentRes && validIssuer && startPayment) { try { addLinkingListener(); await WebBrowser.openBrowserAsync(paymentRes.redirect.url); // https://github.com/expo/expo/issues/5555 if (Constants.platform.ios) { removeLinkingListener(); } } catch (err) { errorAlert(err.message); } } } performAction(); }, [payment.paymentRes]); const handleRedirect = (event) => { if (Constants.platform.ios) { WebBrowser.dismissBrowser(); } else { removeLinkingListener(); } let data = Linking.parse(event.url); if (data.queryParams && data.queryParams.type === "complete") { navigation.navigate("Result", { params: data.queryParams }); } else { errorAlert("Payment not complete"); console.log(data); } }; const addLinkingListener = () => { Linking.addEventListener("url", handleRedirect); }; const removeLinkingListener = () => { Linking.removeEventListener("url", handleRedirect); }; const validateIssuer = (txt) => { setIssuer(txt.replace(/\s/g, "")); // do any needed validation setValidIssuer(!!txt); }; const handlePayment = () => { initiatePayment({ paymentMethod: { type: "ideal", issuer, }, }); setStartPayment(true); }; const getBanks = () => { let items = []; if (payment.paymentMethodInUse && payment.paymentMethodInUse[0]) { const select = payment.paymentMethodInUse[0].details.filter( (it) => it.type === "select" ); items = select.length > 0 ? select[0].items : []; } return items; }; return ( <SafeAreaView style={styles.container}> <View style={styles.cardItemContainer}> <Text style={!validIssuer && styles.invalidTxt}>Select Bank</Text> <Picker selectedValue={issuer} style={[styles.txtField, !validIssuer && styles.invalidField]} onValueChange={validateIssuer} > <Picker.Item label="" value="" /> {getBanks().map((it) => ( <Picker.Item label={it.name} value={it.id} key={it.id} /> ))} </Picker> </View> <View style={styles.payButtonContainer}> <Button onPress={handlePayment} title="Pay now" color="#0ABF53" disabled={!validIssuer} accessibilityLabel="Checkout and Pay" /> </View> </SafeAreaView> ); } const mapStateToProps = (state) => ({ payment: state.payment, }); const mapDispatchToProps = { initiatePayment, clearError, }; export default connect(mapStateToProps, mapDispatchToProps)(IDealScreen); const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fafafa", }, invalidTxt: { color: "red", }, invalidField: { color: "red", }, txtField: { height: 50, borderColor: "grey", color: "black", borderWidth: 1, padding: 10, }, cardItemContainer: { marginLeft: 30, marginRight: 30, marginTop: 15, marginBottom: 15, }, payButtonContainer: { margin: 30, }, });