import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { CreditCard, DollarSign, AlertTriangle, Building } from 'lucide-react';
const RentPaymentPortal = () => {
const [formData, setFormData] = useState({
paymentMethod: '',
amount: '500.00',
// Credit Card Fields
cardNumber: '',
expiryDate: '',
cvv: '',
cardZip: '',
billingAddress: '',
billingCity: '',
billingState: '',
phone: '',
// Bank Fields
accountNumber: '',
routingNumber: '',
});
const [showConfirmation, setShowConfirmation] = useState(false);
const [errors, setErrors] = useState({});
const mockTenantData = {
name: "Jane Smith",
unit: "Apt 304",
propertyName: "Maple Grove Apartments",
balance: 500.00,
dueDate: "2025-03-01",
lastPayment: "2025-02-01"
};
const handleInputChange = (e) => {
let { name, value } = e.target;
// Format specific fields
if (name === 'cardNumber') {
value = formatCardNumber(value);
} else if (name === 'phone') {
value = formatPhoneNumber(value);
}
setFormData(prev => ({ ...prev, [name]: value }));
};
const formatCardNumber = (value) => {
return value.replace(/\D/g, '').replace(/(.{4})/g, '$1 ').trim().substring(0, 19);
};
const formatPhoneNumber = (value) => {
const cleaned = value.replace(/\D/g, '');
const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
if (match) {
return '(' + match[1] + ') ' + match[2] + '-' + match[3];
}
return value;
};
const validateForm = () => {
let newErrors = {};
if (!formData.paymentMethod) newErrors.paymentMethod = "Please select a payment method.";
if (!formData.amount || isNaN(formData.amount) || Number(formData.amount) <= 0) {
newErrors.amount = "Enter a valid payment amount.";
}
if (formData.paymentMethod === 'card') {
if (!/^\d{4} \d{4} \d{4} \d{4}$/.test(formData.cardNumber)) {
newErrors.cardNumber = "Enter a valid 16-digit card number.";
}
if (!/^\d{2}\/\d{2}$/.test(formData.expiryDate)) {
newErrors.expiryDate = "Enter a valid expiry date (MM/YY).";
}
if (!/^\d{3,4}$/.test(formData.cvv)) {
newErrors.cvv = "Enter a valid CVV.";
}
if (!/^\d{5}(-\d{4})?$/.test(formData.cardZip)) {
newErrors.cardZip = "Enter a valid ZIP code.";
}
if (!formData.billingAddress) {
newErrors.billingAddress = "Enter your billing address.";
}
if (!formData.billingCity) {
newErrors.billingCity = "Enter your city.";
}
if (!formData.billingState) {
newErrors.billingState = "Enter your state.";
}
if (!/^\(\d{3}\) \d{3}-\d{4}$/.test(formData.phone)) {
newErrors.phone = "Enter a valid phone number.";
}
}
if (formData.paymentMethod === 'bank') {
if (!/^\d{8,16}$/.test(formData.accountNumber)) {
newErrors.accountNumber = "Enter a valid account number (8-16 digits).";
}
if (!/^\d{9}$/.test(formData.routingNumber)) {
newErrors.routingNumber = "Enter a valid 9-digit routing number.";
}
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handlePaymentSubmit = (e) => {
e.preventDefault();
if (validateForm()) {
setShowConfirmation(true);
}
};
const inputClassName = "block w-full rounded-md border-yellow-700 bg-black text-yellow-700 shadow-sm focus:border-yellow-700 focus:ring-yellow-700";
const labelClassName = "block text-sm font-medium text-yellow-700 mb-2";
return (
This is a training portal for educational purposes only. No real payments will be processed.
);
};
export default RentPaymentPortal;
| LEADright - We Coach and Train Leaders and Learners for Excellence! |
|
