import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, Alert, ActivityIndicator } from 'react-native';
import { monieswitchAPI } from '../services/api';
const PaymentLinkForm = () => {
const [formData, setFormData] = useState({
amount: '',
currency: 'NGN',
description: '',
email: '',
});
const [loading, setLoading] = useState(false);
const handleInputChange = (field, value) => {
setFormData(prev => ({ ...prev, [field]: value }));
};
const createPaymentLink = async () => {
if (!formData.amount || !formData.email) {
Alert.alert('Error', 'Please fill in amount and email');
return;
}
try {
setLoading(true);
const paymentData = {
amount: parseInt(formData.amount),
currency: formData.currency,
description: formData.description || 'Mobile payment',
email: formData.email,
};
const response = await monieswitchAPI.createPaymentLink(paymentData);
Alert.alert(
'Success',
`Payment link created! URL: ${response.payment_url}`,
[{ text: 'OK' }]
);
// Reset form
setFormData({ amount: '', currency: 'NGN', description: '', email: '' });
} catch (error) {
Alert.alert('Error', error.message);
} finally {
setLoading(false);
}
};
return (
<View style={{ padding: 20 }}>
<Text style={{ fontSize: 18, marginBottom: 20 }}>Create Payment Link</Text>
<TextInput
placeholder="Amount (e.g., 5000)"
value={formData.amount}
onChangeText={(value) => handleInputChange('amount', value)}
keyboardType="numeric"
style={{ borderWidth: 1, padding: 10, marginBottom: 10, borderRadius: 5 }}
/>
<TextInput
placeholder="Currency (e.g., NGN)"
value={formData.currency}
onChangeText={(value) => handleInputChange('currency', value)}
style={{ borderWidth: 1, padding: 10, marginBottom: 10, borderRadius: 5 }}
/>
<TextInput
placeholder="Description (optional)"
value={formData.description}
onChangeText={(value) => handleInputChange('description', value)}
style={{ borderWidth: 1, padding: 10, marginBottom: 10, borderRadius: 5 }}
/>
<TextInput
placeholder="Customer Email"
value={formData.email}
onChangeText={(value) => handleInputChange('email', value)}
keyboardType="email-address"
style={{ borderWidth: 1, padding: 10, marginBottom: 20, borderRadius: 5 }}
/>
<TouchableOpacity
onPress={createPaymentLink}
disabled={loading}
style={{
backgroundColor: loading ? '#ccc' : '#007AFF',
padding: 15,
borderRadius: 5,
alignItems: 'center'
}}
>
{loading ? (
<ActivityIndicator color="white" />
) : (
<Text style={{ color: 'white', fontSize: 16 }}>Create Payment Link</Text>
)}
</TouchableOpacity>
</View>
);
};
export default PaymentLinkForm;