Get Reservation Preview

const ReservationClaimPreview = ({ externalId }) => {
  const [reservation, setReservation] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const fetchReservation = async () => {
      try {
        const data = await getReservationPreview(externalId);
        setReservation(data);
      } catch (error) {
        console.error('Failed to fetch reservation:', error);
      } finally {
        setLoading(false);
      }
    };
    
    fetchReservation();
  }, [externalId]);
  
  if (loading) return <div>Loading reservation...</div>;
  if (!reservation) return <div>Reservation not found</div>;
  
  return (
    <div className="reservation-preview">
      <div className="property-info">
        <img 
          src={reservation.property.media[0]?.thumbnailUrl} 
          alt={reservation.property.name}
        />
        <h2>{reservation.property.name}</h2>
        <p>{reservation.property.address.city}, {reservation.property.address.state}</p>
      </div>
      
      <div className="guest-info">
        <h3>Welcome, {reservation.guest.firstName}!</h3>
        {reservation.isClaimed ? (
          <p>This reservation has already been claimed.</p>
        ) : (
          <div>
            <p>Earn {reservation.totalAwardedPoints.toLocaleString()} points for this stay!</p>
            <button onClick={() => claimReservation(externalId)}>
              Claim Reservation
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

const formatPointsEarned = (points) => {
  if (points === 0) return 'No points available';
  if (points < 1000) return `${points} points`;
  if (points < 10000) return `${(points / 1000).toFixed(1)}K points`;
  return `${Math.round(points / 1000)}K points`;
};

const PointsEarnedBadge = ({ points, isClaimed }) => {
  const formattedPoints = formatPointsEarned(points);
  
  return (
    <div className={`points-badge ${isClaimed ? 'claimed' : 'available'}`}>
      <span className="points-amount">{formattedPoints}</span>
      <span className="points-status">
        {isClaimed ? 'Earned' : 'Available to Earn'}
      </span>
    </div>
  );
};

const PropertyLocation = ({ property }) => {
  const { address, brand } = property;
  
  const openInMaps = () => {
    const url = `https://maps.google.com/?q=${address.latitude},${address.longitude}`;
    window.open(url, '_blank');
  };
  
  return (
    <div className="property-location">
      <div className="brand-info">
        <img src={brand.logo} alt={brand.name} className="brand-logo" />
        <span className="brand-name">{brand.name}</span>
      </div>
      
      <div className="location-info">
        <span className="location">{address.city}, {address.state}</span>
        <button onClick={openInMaps} className="map-link">
          View on Map
        </button>
      </div>
      
      {property.allianceMember && (
        <span className="alliance-badge">Journey Alliance Member</span>
      )}
    </div>
  );
};

const fetchWithRetry = async (url, options = {}, maxRetries = 3) => {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url, options);
      
      if (response.status === 429) {
        // Rate limited, wait and retry
        const delay = Math.pow(2, attempt) * 1000; // Exponential backoff
        await new Promise(resolve => setTimeout(resolve, delay));
        continue;
      }
      
      return response;
    } catch (error) {
      if (attempt === maxRetries) throw error;
      
      // Wait before retry
      const delay = Math.pow(2, attempt) * 1000;
      await new Promise(resolve => setTimeout(resolve, delay));
    }
  }
};