137 lines
4.0 KiB
TypeScript
137 lines
4.0 KiB
TypeScript
import React from 'react';
|
||
import { CreditCard } from 'lucide-react';
|
||
|
||
interface PaymentMethodSelectorProps {
|
||
value: 'cash' | 'stripe';
|
||
onChange: (value: 'cash' | 'stripe') => void;
|
||
error?: string;
|
||
disabled?: boolean;
|
||
}
|
||
|
||
const PaymentMethodSelector: React.FC<
|
||
PaymentMethodSelectorProps
|
||
> = ({ value, onChange, error, disabled = false }) => {
|
||
return (
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-gray-900 mb-3">
|
||
Payment Method
|
||
<span className="text-red-500 ml-1">*</span>
|
||
</h3>
|
||
|
||
<div className="space-y-3">
|
||
{}
|
||
<label
|
||
className={`flex items-start p-4 border-2
|
||
rounded-lg cursor-pointer transition-all
|
||
${
|
||
value === 'cash'
|
||
? 'border-indigo-500 bg-indigo-50'
|
||
: 'border-gray-200 hover:border-indigo-300'
|
||
}
|
||
${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||
>
|
||
<input
|
||
type="radio"
|
||
name="payment_method"
|
||
value="cash"
|
||
checked={value === 'cash'}
|
||
onChange={(e) =>
|
||
onChange(e.target.value as 'cash')
|
||
}
|
||
disabled={disabled}
|
||
className="mt-1 mr-3"
|
||
/>
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<CreditCard
|
||
className="w-5 h-5 text-gray-600"
|
||
/>
|
||
<span className="font-medium text-gray-900">
|
||
Pay at Hotel
|
||
</span>
|
||
</div>
|
||
<p className="text-sm text-gray-600">
|
||
Pay directly at the hotel when checking in.
|
||
Cash and card accepted.
|
||
</p>
|
||
<div className="mt-2 text-xs text-gray-500
|
||
bg-white rounded px-2 py-1 inline-block"
|
||
>
|
||
⏱️ Payment at check-in
|
||
</div>
|
||
</div>
|
||
</label>
|
||
|
||
{}
|
||
<label
|
||
className={`flex items-start p-4 border-2
|
||
rounded-lg cursor-pointer transition-all
|
||
${
|
||
value === 'stripe'
|
||
? 'border-indigo-500 bg-indigo-50'
|
||
: 'border-gray-200 hover:border-indigo-300'
|
||
}
|
||
${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||
>
|
||
<input
|
||
type="radio"
|
||
name="payment_method"
|
||
value="stripe"
|
||
checked={value === 'stripe'}
|
||
onChange={(e) =>
|
||
onChange(e.target.value as 'stripe')
|
||
}
|
||
disabled={disabled}
|
||
className="mt-1 mr-3"
|
||
/>
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<CreditCard
|
||
className="w-5 h-5 text-indigo-600"
|
||
/>
|
||
<span className="font-medium text-gray-900">
|
||
Pay with Card (Stripe)
|
||
</span>
|
||
<span className="text-xs bg-indigo-100
|
||
text-indigo-700 px-2 py-0.5 rounded-full
|
||
font-medium"
|
||
>
|
||
Instant
|
||
</span>
|
||
</div>
|
||
<p className="text-sm text-gray-600">
|
||
Secure payment with credit or debit card.
|
||
Instant confirmation.
|
||
</p>
|
||
<div className="mt-2 text-xs text-gray-500
|
||
bg-white rounded px-2 py-1 inline-block"
|
||
>
|
||
💳 Secure card payment
|
||
</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
{error && (
|
||
<p className="text-sm text-red-600 mt-2">
|
||
{error}
|
||
</p>
|
||
)}
|
||
|
||
{}
|
||
<div className="mt-4 p-3 bg-blue-50 border
|
||
border-blue-200 rounded-lg"
|
||
>
|
||
<p className="text-xs text-blue-800">
|
||
💡 <strong>Note:</strong> {' '}
|
||
{value === 'cash'
|
||
? 'You will pay when checking in. Cash and card accepted at the hotel.'
|
||
: 'Your payment will be processed securely through Stripe.'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default PaymentMethodSelector;
|