Lookup Reservation

const ReservationLookupForm = ({ onSuccess }) => {
  const [formData, setFormData] = useState({
    confirmationCode: '',
    reservationId: '',
    checkOutDate: '',
    lastName: ''
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    
    try {
      // Ensure at least one identifier is provided
      if (!formData.confirmationCode && !formData.reservationId) {
        throw new Error('Please provide either a confirmation code or reservation ID');
      }
      
      const result = await lookupReservation({
        confirmationCode: formData.confirmationCode || undefined,
        reservationId: formData.reservationId || undefined,
        checkOutDate: formData.checkOutDate,
        lastName: formData.lastName.trim()
      });
      
      onSuccess(result.externalReservationId);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <form onSubmit={handleSubmit} className="reservation-lookup">
      <div className="form-group">
        <label>Confirmation Code</label>
        <input
          type="text"
          value={formData.confirmationCode}
          onChange={(e) => setFormData(prev => ({
            ...prev, 
            confirmationCode: e.target.value.toUpperCase()
          }))}
          placeholder="ABC123DEF"
          maxLength={100}
        />
      </div>
      
      <div className="form-divider">OR</div>
      
      <div className="form-group">
        <label>Reservation ID</label>
        <input
          type="text"
          value={formData.reservationId}
          onChange={(e) => setFormData(prev => ({
            ...prev, 
            reservationId: e.target.value
          }))}
          placeholder="RES-2026-001234"
          maxLength={100}
        />
      </div>
      
      <div className="form-group">
        <label>Check-out Date *</label>
        <input
          type="date"
          value={formData.checkOutDate}
          onChange={(e) => setFormData(prev => ({
            ...prev, 
            checkOutDate: e.target.value
          }))}
          required
        />
      </div>
      
      <div className="form-group">
        <label>Last Name *</label>
        <input
          type="text"
          value={formData.lastName}
          onChange={(e) => setFormData(prev => ({
            ...prev, 
            lastName: e.target.value
          }))}
          placeholder="Johnson"
          maxLength={200}
          required
        />
      </div>
      
      {error && (
        <div className="error-message">{error}</div>
      )}
      
      <button type="submit" disabled={loading}>
        {loading ? 'Looking up...' : 'Find Reservation'}
      </button>
    </form>
  );
};

const ReservationClaimFlow = () => {
  const [step, setStep] = useState('lookup'); // 'lookup', 'preview', 'claim'
  const [externalId, setExternalId] = useState(null);
  const [reservation, setReservation] = useState(null);
  
  const handleLookupSuccess = async (foundExternalId) => {
    setExternalId(foundExternalId);
    
    // Fetch reservation preview
    try {
      const preview = await getReservationPreview(foundExternalId);
      setReservation(preview);
      setStep('preview');
    } catch (error) {
      console.error('Failed to load reservation preview:', error);
    }
  };
  
  const handleClaimReservation = () => {
    // Redirect to authentication/claim flow
    window.location.href = `/claim/${externalId}`;
  };
  
  return (
    <div className="reservation-flow">
      {step === 'lookup' && (
        <ReservationLookupForm onSuccess={handleLookupSuccess} />
      )}
      
      {step === 'preview' && reservation && (
        <div className="reservation-preview">
          <h2>Reservation Found!</h2>
          <div className="property-info">
            <h3>{reservation.property.name}</h3>
            <p>{reservation.property.address.city}, {reservation.property.address.state}</p>
          </div>
          
          <div className="guest-info">
            <h4>Guest: {reservation.guest.firstName}</h4>
            <p>Points to earn: {reservation.totalAwardedPoints.toLocaleString()}</p>
          </div>
          
          {reservation.isClaimed ? (
            <p>This reservation has already been claimed.</p>
          ) : (
            <button onClick={handleClaimReservation}>
              Claim Reservation & Earn Points
            </button>
          )}
          
          <button onClick={() => setStep('lookup')}>
            Look up different reservation
          </button>
        </div>
      )}
    </div>
  );
};

const validateLookupForm = (formData) => {
  const errors = [];
  
  // Check for at least one identifier
  if (!formData.confirmationCode && !formData.reservationId) {
    errors.push('Please provide either a confirmation code or reservation ID');
  }
  
  // Validate date format
  const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
  if (!dateRegex.test(formData.checkOutDate)) {
    errors.push('Check-out date must be in YYYY-MM-DD format');
  }
  
  // Validate date is not in future (reasonable booking window)
  const checkOutDate = new Date(formData.checkOutDate);
  const maxFutureDate = new Date();
  maxFutureDate.setFullYear(maxFutureDate.getFullYear() + 2);
  
  if (checkOutDate > maxFutureDate) {
    errors.push('Check-out date seems too far in the future');
  }
  
  // Validate last name
  if (!formData.lastName.trim()) {
    errors.push('Last name is required');
  }
  
  if (formData.lastName.length > 200) {
    errors.push('Last name is too long');
  }
  
  return errors;
};

const troubleshootingMessages = {
  notFound: {
    title: "Reservation not found",
    suggestions: [
      "Double-check your confirmation code or reservation ID",
      "Verify the check-out date is correct",
      "Ensure the last name matches the reservation exactly",
      "Try using the other identifier (confirmation code vs reservation ID)",
      "Recent bookings may take up to 24 hours to sync"
    ]
  },
  validation: {
    title: "Invalid information provided",
    suggestions: [
      "Use YYYY-MM-DD format for dates (e.g., 2026-06-03)",
      "Provide either confirmation code OR reservation ID",
      "Enter the full last name as shown on the reservation"
    ]
  }
};