import { useState } from 'react'; import { View, Text, ScrollView, TouchableOpacity, TextInput, KeyboardAvoidingView, Platform } from 'react-native'; import { ChevronLeft, Send, Clock, ShieldCheck, CreditCard, Banknote, User, DollarSign, MapPin, FileText } from 'lucide-react-native'; export default function Transfer() { const [step, setStep] = useState(1); const [transferMethod, setTransferMethod] = useState<'moneygram' | 'bank'>('moneygram'); const [recipientDetails, setRecipientDetails] = useState({ name: '', email: '', phone: '', }); const [amount, setAmount] = useState(''); const [purpose, setPurpose] = useState(''); const [paymentMethod, setPaymentMethod] = useState('card'); const transferMethods = [ { id: 'moneygram', title: 'MoneyGram', description: 'Instant pickup at participating locations', deliveryTime: 'Within minutes', fee: '$0 - $5', icon: , }, { id: 'bank', title: 'Bank Wire', description: 'Direct deposit to recipient\'s bank account', deliveryTime: '1-3 business days', fee: '$15 - $40', icon: , }, ]; const paymentMethods = [ { id: 'card', title: 'Credit/Debit Card', icon: }, { id: 'bank', title: 'Bank Account', icon: }, ]; const purposes = [ 'Family Support', 'Gift', 'Loan Repayment', 'Business Payment', 'Other', ]; const handleNext = () => { if (step < 4) { setStep(step + 1); } }; const handleBack = () => { if (step > 1) { setStep(step - 1); } }; const handleSubmit = () => { console.log({ transferMethod, recipientDetails, amount, purpose, paymentMethod, }); // In a real app, this would trigger the transfer process alert('Transfer initiated successfully!'); setStep(1); }; return ( {/* Header */} Send Money {/* Progress Bar */} {[1, 2, 3, 4].map((num) => ( = num ? 'bg-indigo-500' : 'bg-gray-200'}`}> = num ? 'text-white' : 'text-gray-500'}`}>{num} {num < 4 && ( num ? 'bg-indigo-500' : 'bg-gray-200'}`} /> )} ))} = 1 ? 'text-indigo-500' : 'text-gray-500'}`}>Method = 2 ? 'text-indigo-500' : 'text-gray-500'}`}>Recipient = 3 ? 'text-indigo-500' : 'text-gray-500'}`}>Details = 4 ? 'text-indigo-500' : 'text-gray-500'}`}>Review {/* Step 1: Transfer Method */} {step === 1 && ( Choose Transfer Method {transferMethods.map((method) => ( setTransferMethod(method.id as 'moneygram' | 'bank')} > {method.icon} {method.title} {method.description} {method.deliveryTime} {method.fee} ))} Secure Transfers All transactions are encrypted and monitored for security. {transferMethod === 'moneygram' ? ' MoneyGram locations are available worldwide for convenient pickup.' : ' Bank wire transfers are processed through secure banking networks.'} )} {/* Step 2: Recipient Details */} {step === 2 && ( Recipient Details Recipient Information Full Name setRecipientDetails({...recipientDetails, name: text})} /> Email (Optional) setRecipientDetails({...recipientDetails, email: text})} keyboardType="email-address" /> Phone Number setRecipientDetails({...recipientDetails, phone: text})} keyboardType="phone-pad" /> Transfer Method: {transferMethod === 'moneygram' ? 'MoneyGram' : 'Bank Wire'} {transferMethod === 'moneygram' ? 'Money available for pickup within minutes' : 'Funds deposited in 1-3 business days'} )} {/* Step 3: Transfer Details */} {step === 3 && ( Transfer Details Amount $ Fee: {transferMethod === 'moneygram' ? '$0 - $5' : '$15 - $40'} Total: {amount ? `$${(parseFloat(amount) + (transferMethod === 'moneygram' ? 2.5 : 25)).toFixed(2)}` : '$0.00'} Purpose of Transfer {purposes.map((item, index) => ( setPurpose(item)} > {item} ))} Payment Method {paymentMethods.map((method) => ( setPaymentMethod(method.id)} > {method.icon} {method.title} ))} )} {/* Step 4: Review & Confirm */} {step === 4 && ( Review & Confirm Transfer Method {transferMethod === 'moneygram' ? 'MoneyGram' : 'Bank Wire'} Recipient {recipientDetails.name || 'Not specified'} Amount ${amount || '0.00'} Fee {transferMethod === 'moneygram' ? '$0 - $5' : '$15 - $40'} Purpose {purpose || 'Not specified'} Payment Method {paymentMethod === 'card' ? 'Credit/Debit Card' : 'Bank Account'} Security Verification To complete this transfer, please verify your identity using your fingerprint, face recognition, or PIN. {transferMethod === 'moneygram' ? 'Recipient will receive a notification with pickup details.' : 'Transfer will be completed within 1-3 business days.'} )} {/* Footer */} {step === 4 ? 'Confirm & Send Transfer' : 'Continue'} {step > 1 && ( Back )} ); }

React Native MoneyGram Wire Copy App Preview

Project Screens for MoneyGram Wire Copy App