@hotelcard/ui 0.0.53 → 0.0.55

package/README.md

@@ -111,6 +111,16 @@ The package includes built-in translations for `de`, `en`, `fr`, and `it` locale
 | `Pin` | Location pin marker |
 | `EmptyState` | Generic empty state with icon, title, description, and optional action button |
 
+### Booking Components
+
+| Component | Description |
+|-----------|-------------|
+| `FeaturedBookingCard` | Large booking card with image, hotel info, contacts, message accordion, and details |
+| `CompactBookingCard` | Compact booking card with thumbnail, status badge, price, and book again |
+| `BookingCardDetails` | Expandable accordion with check-in/out, guests, room, price breakdown |
+| `FeaturedBookingCardSkeleton` | Loading skeleton for FeaturedBookingCard |
+| `CompactBookingCardSkeleton` | Loading skeleton for CompactBookingCard |
+
 ### Search Components
 
 | Component | Description |
@@ -314,6 +324,105 @@ import { HotelCardSkeleton } from '@hotelcard/ui';
 )}
 ```
 
+### FeaturedBookingCard
+
+Large card for the soonest upcoming booking, with hotel image, countdown badge, contact info, message accordion, and expandable details:
+
+```tsx
+import { FeaturedBookingCard, type Booking } from '@hotelcard/ui';
+
+const booking: Booking = {
+  id: 1,
+  confirmationNumber: 'HC-12345',
+  status: 'confirmed',
+  hotel: {
+    id: 42,
+    name: 'Grand Hotel Belvedere',
+    slug: 'grand-hotel-belvedere',
+    address: 'Höheweg 37',
+    city: 'Interlaken',
+    postalCode: '3800',
+    country: 'Switzerland',
+    phone: '+41 33 888 99 00',
+    email: 'info@grandhotel.ch',
+    imageUrl: '/hotel-image.jpg',
+    checkInTime: '15:00',
+    checkOutTime: '11:00',
+  },
+  checkIn: '2026-03-14',
+  checkOut: '2026-03-16',
+  roomName: 'Deluxe Suite',
+  guests: 2,
+  adults: 2,
+  children: 0,
+  hasBreakfast: true,
+  breakfastInfo: 'Buffet breakfast included',
+  originalPrice: 400,
+  discountedPrice: 200,
+  totalPrice: 200,
+  savings: 200,
+  currency: 'CHF',
+  cancellationPolicy: 'Free cancellation until 48h before check-in',
+  isCancellable: true,
+  hotelMessage: 'Welcome! We look forward to your stay.',
+  bookedAt: '2026-01-10',
+};
+
+<FeaturedBookingCard
+  booking={booking}
+  onCancelBooking={() => showCancelDialog()}
+  onAddToCalendar={() => addToCalendar(booking)}
+/>
+```
+
+### CompactBookingCard
+
+Compact card for past/cancelled bookings with thumbnail, status badge, and price:
+
+```tsx
+import { CompactBookingCard } from '@hotelcard/ui';
+
+<CompactBookingCard
+  booking={booking}
+  showBookAgain={true}
+  onBookAgain={() => navigate(`/hotel/${booking.hotel.slug}`)}
+  onAddToCalendar={() => addToCalendar(booking)}
+/>
+```
+
+Navigation is handled via the `onBookAgain` callback prop — the component does not handle routing internally.
+
+### BookingCardDetails
+
+Standalone expandable accordion for booking details (used internally by both card types, but can be used independently):
+
+```tsx
+import { BookingCardDetails } from '@hotelcard/ui';
+
+<BookingCardDetails
+  booking={booking}
+  onCancelBooking={() => showCancelDialog()}
+/>
+```
+
+### Booking Card Skeletons
+
+Loading placeholders matching the card layouts:
+
+```tsx
+import { FeaturedBookingCardSkeleton, CompactBookingCardSkeleton } from '@hotelcard/ui';
+
+{isLoading ? (
+  <>
+    <FeaturedBookingCardSkeleton />
+    <CompactBookingCardSkeleton />
+    <CompactBookingCardSkeleton />
+  </>
+) : (
+  // ... render actual cards
+)}
+```
+
 ### EmptyState
 
 Generic empty state component for no results, no bookings, no favourites, etc.
@@ -810,9 +919,15 @@ import type {
   Locale,
   TranslationKeys,
 
+  // Booking Component Props
+  FeaturedBookingCardProps,
+  CompactBookingCardProps,
+  BookingCardDetailsProps,
+
   // Data Types
   Hotel,
   Booking,
+  BookingHotel,
   User,
   Address,
   Membership,