update to python fastpi

Frontend/src/components/common/PaymentMethodSelector.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { CreditCard, Building2 } from 'lucide-react';
+
+interface PaymentMethodSelectorProps {
+  value: 'cash' | 'bank_transfer';
+  onChange: (value: 'cash' | 'bank_transfer') => 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">
+        {/* Cash Payment */}
+        <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>
+
+        {/* Bank Transfer */}
+        <label
+          className={`flex items-start p-4 border-2 
+            rounded-lg cursor-pointer transition-all
+            ${
+              value === 'bank_transfer'
+                ? '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="bank_transfer"
+            checked={value === 'bank_transfer'}
+            onChange={(e) =>
+              onChange(e.target.value as 'bank_transfer')
+            }
+            disabled={disabled}
+            className="mt-1 mr-3"
+          />
+          <div className="flex-1">
+            <div className="flex items-center gap-2 mb-1">
+              <Building2 
+                className="w-5 h-5 text-gray-600" 
+              />
+              <span className="font-medium text-gray-900">
+                Bank Transfer
+              </span>
+              <span className="text-xs bg-green-100 
+                text-green-700 px-2 py-0.5 rounded-full 
+                font-medium"
+              >
+                Recommended
+              </span>
+            </div>
+            <p className="text-sm text-gray-600">
+              Transfer via QR code or account number. 
+              Quick confirmation within 24 hours.
+            </p>
+            <div className="mt-2 text-xs text-gray-500 
+              bg-white rounded px-2 py-1 inline-block"
+            >
+              💳 Confirmation after booking
+            </div>
+          </div>
+        </label>
+      </div>
+
+      {error && (
+        <p className="text-sm text-red-600 mt-2">
+          {error}
+        </p>
+      )}
+
+      {/* Additional Info */}
+      <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> You will not be 
+          charged immediately. {' '}
+          {value === 'cash'
+            ? 'Payment when checking in.'
+            : 'Transfer after booking confirmation.'}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default PaymentMethodSelector;