{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "hotel-booking-reservation", "title": "Hotel Booking Reservation", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/hotel-booking-reservation/hotel-booking-reservation.component.ts", "content": "// Edit this file to change the room, photos, upgrades and copy. State is local -- wire\n// `book()` to your own reservation API.\nimport { Component, Input, OnInit, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n Baby,\n Bath,\n BedDouble,\n Building2,\n Calendar,\n CalendarDays,\n Check,\n CircleCheck,\n Coffee,\n CreditCard,\n Heart,\n Info,\n Lock,\n LucideAngularModule,\n MapPin,\n Maximize2,\n Minus,\n Plus,\n RotateCcw,\n Share2,\n ShieldCheck,\n Star,\n Users,\n Waves,\n Wifi,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type HotelBookingUpgrade = 'balcony' | 'breakfast' | 'chauffeur' | 'spa'\n\nexport interface HotelBookingPhoto {\n url: string\n title: string\n}\n\nconst roomPhotos: HotelBookingPhoto[] = [\n {\n url: 'https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=1200&auto=format&fit=crop&q=80',\n title: 'King Master Suite & Ocean Balcony',\n },\n {\n url: 'https://images.unsplash.com/photo-1571896349842-33c89424de2d?w=800&auto=format&fit=crop&q=80',\n title: 'Atlantic Ocean Sunrise Balcony',\n },\n {\n url: 'https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=800&auto=format&fit=crop&q=80',\n title: 'Italian Marble Spa Bathroom',\n },\n {\n url: 'https://images.unsplash.com/photo-1540541338287-41700207dee6?w=800&auto=format&fit=crop&q=80',\n title: 'Private Beach Club & Ocean Cabanas',\n },\n]\n\nconst currency = new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n})\n\nfunction toIsoDate(date: Date): string {\n const y = date.getFullYear()\n const m = String(date.getMonth() + 1).padStart(2, '0')\n const d = String(date.getDate()).padStart(2, '0')\n return `${y}-${m}-${d}`\n}\n\n/**\n * HotelBookingReservation -- the React block, 1:1: a room hero (photo gallery with thumbnails,\n * rating, amenities, member rate), stay-date inputs with quick length presets, guest / room\n * steppers, toggleable upgrade rows, a special-requests input, and a sticky price breakdown\n * whose totals follow every change. Reserving shows a confirmation banner above the hero.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-hotel-booking-reservation, [ui-hotel-booking-reservation]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCardDescriptionComponent,\n UiCardContentComponent,\n UiCardFooterComponent,\n UiCheckboxComponent,\n UiInputComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n @if (isBooked()) {\n \n
\n \n \n
\n
\n
\n

Reservation Confirmed · Reference #RC-884920

\n \n Guaranteed Direct\n \n
\n

\n A confirmation voucher and check-in barcode have been sent to your registered email. No cancellation\n penalty applies before {{ cancellationDeadline }}.\n

\n
\n
\n \n
\n }\n\n \n \n
\n \n
\n
\n \n
\n
\n \n Oceanfront View\n \n \n Floor 16\n \n
\n
\n \n \n \n \n \n \n
\n
\n {{ activePhoto.title }}\n {{ activePhotoIndex() + 1 }} / {{ photos.length }}\n
\n
\n\n \n
\n @for (photo of photos; track $index) {\n \n \n \n }\n
\n
\n\n \n
\n
\n
\n
\n \n {{ rating.toFixed(1) }}\n {{ reviewsCount }} verified guest reviews\n
\n \n Official Best Rate Guarantee\n \n
\n\n
\n

{{ roomTitle }}

\n
\n \n {{ hotelName }}\n
\n
\n \n {{ location }}\n
\n
\n\n

\n Expansive oceanfront sanctuary featuring custom King pillowtop bedding, floor-to-ceiling glass doors\n opening onto an oversized private balcony with sweeping Atlantic panoramas, freestanding soaking tub,\n and bespoke in-room dining.\n

\n\n \n
\n
\n \n 680 sq ft / 63 m²\n
\n
\n \n 1 King Bed\n
\n
\n \n Ocean Balcony\n
\n
\n \n Marble Soaking Tub\n
\n
\n \n Fast Fiber WiFi\n
\n
\n \n Nespresso Machine\n
\n
\n
\n\n \n
\n \n Direct Member Rate\n \n
\n \n {{ formatCurrency(basePrice) }}\n \n / night\n $560.00\n
\n
\n \n Save 13% Direct\n \n
\n \n \n \n\n \n
\n \n
\n \n \n \n
\n
\n Stay Dates & Duration\n \n Select your check-in and check-out dates to calculate live availability.\n \n
\n \n \n {{ nights }} {{ nights === 1 ? 'Night' : 'Nights' }}\n \n
\n \n \n \n
\n
\n \n \n
\n\n
\n \n \n
\n
\n\n \n \n
\n Selected Stay: \n {{ formattedRange }}\n
\n
\n Quick:\n @for (preset of presets; track preset) {\n \n {{ preset }}N\n \n }\n
\n
\n \n \n\n \n \n \n Guests & Rooms\n Configure the number of adults, children, and suites requested.\n \n \n \n
\n
\n \n \n
\n
\n Adults\n

Ages 13 and above

\n
\n
\n
\n \n \n \n {{ adults() }}\n = 8\"\n aria-label=\"Increase adults\"\n (click)=\"updateAdults(1)\"\n >\n \n \n
\n
\n\n \n
\n
\n \n \n
\n
\n Children\n

Ages 0 to 12 years

\n
\n
\n
\n \n \n \n {{ children() }}\n = 6\"\n aria-label=\"Increase children\"\n (click)=\"updateChildren(1)\"\n >\n \n \n
\n \n\n \n
\n
\n \n \n
\n
\n Suites / Rooms\n

Max 4 guests per suite

\n
\n
\n
\n \n \n \n {{ rooms() }}\n = 4\"\n aria-label=\"Increase rooms\"\n (click)=\"updateRooms(1)\"\n >\n \n \n
\n \n \n \n\n \n \n \n
\n
\n Room Upgrades & Exclusive Services\n \n Tailor your stay with luxury amenities and curated hotel enhancements.\n \n
\n {{ selectedUpgrades().length }} Selected\n
\n \n \n \n \n
\n \n
\n
\n Oceanfront High-Floor Balcony\n +$50 / night\n
\n

\n Guaranteed unobstructed 180° Atlantic Ocean sunrise view on floors 15+ with premium teak deck\n loungers.\n

\n
\n
\n
\n +{{ formatCurrency(50 * nights * rooms()) }}\n for {{ nights }} nights\n
\n \n\n \n \n
\n \n
\n
\n Daily Gourmet Breakfast\n +$35 / person / day\n
\n

\n Artisanal morning buffet at Artisan Beach House or private veranda in-room breakfast with fresh\n juices.\n

\n \n @if (has('breakfast')) {\n
\n Breakfast plan for:\n
\n @for (count of breakfastOptions; track count) {\n \n {{ count }} {{ count === 1 ? 'Guest' : 'Guests' }}\n \n }\n
\n
\n }\n
\n
\n
\n +{{ formatCurrency(35 * breakfastGuests() * nights) }}\n {{ breakfastGuests() }} {{ breakfastGuests() === 1 ? 'guest' : 'guests' }} · {{ nights }}d\n
\n \n\n \n \n
\n \n
\n
\n Private Airport Luxury Chauffeur\n +$120 one-time\n
\n

\n Curbside meet-and-greet with dedicated Cadillac Escalade or Mercedes S-Class transfer from MIA or\n FLL.\n

\n
\n
\n
\n +$120.00\n flat one-time\n
\n \n \n \n\n \n \n \n Special Requests & Arrival Notes\n \n Let us know if you are celebrating a special occasion or require early check-in.\n \n \n \n \n \n \n \n\n \n
\n \n \n
\n \n Stay Price Breakdown\n \n \n \n Instant Confirmation\n \n
\n\n
\n
Total Stay Price (USD)
\n
\n \n {{ formatCurrency(totalStayPrice) }}\n \n
\n

\n Total for {{ nights }} nights · {{ rooms() }} suite ·\n {{ adults() + children() }} guests\n

\n
\n \n\n \n \n\n \n
\n \n
\n Room subtotal ({{ formatCurrency(basePrice) }} × {{ nights }} {{ nights === 1 ? 'night' : 'nights'\n }}{{ rooms() > 1 ? ' × ' + rooms() + ' rooms' : '' }})\n {{ formatCurrency(roomSubtotal) }}\n
\n\n \n
\n
\n Selected Add-ons ({{ selectedUpgrades().length }} active)\n \n {{ formatCurrency(selectedAddonsTotal) }}\n \n
\n\n \n @if (selectedUpgrades().length > 0) {\n
\n @if (has('balcony')) {\n
\n • Oceanfront Balcony ({{ formatCurrency(50) }} × {{ nights }}n)\n {{\n formatCurrency(balconyCost)\n }}\n
\n }\n @if (has('breakfast')) {\n
\n • Gourmet Breakfast ({{ formatCurrency(35) }} × {{ breakfastGuests() }}g ×\n {{ nights }}d)\n {{\n formatCurrency(breakfastCost)\n }}\n
\n }\n @if (has('chauffeur')) {\n
\n • Luxury Airport Chauffeur (one-time)\n {{\n formatCurrency(chauffeurCost)\n }}\n
\n }\n @if (has('spa')) {\n
\n • Thermal Spa Pass ({{ formatCurrency(65) }} × {{ adults() }} guests)\n {{ formatCurrency(spaCost) }}\n
\n }\n
\n }\n
\n\n \n
\n
\n Resort & Hospitality Fee\n \n
\n {{ formatCurrency(resortFee) }}\n
\n
\n $30.00 / night · Beach loungers, high-speed WiFi, welcome champagne\n
\n\n \n
\n Estimated Taxes & Tourism Surcharge (14%)\n {{ formatCurrency(estimatedTaxes) }}\n
\n
\n\n \n\n \n
\n
\n \n \n Free cancellation until 48 hours before check-in\n \n
\n

\n Cancel before {{ cancellationDeadline }} for a 100%\n full refund with zero fees.\n

\n
\n\n \n
    \n
  • \n \n No upfront booking fees or surprise service surcharges\n
    • \n
  • \n \n Official Ritz-Carlton direct member rewards applied\n
    • \n
  • \n \n 256-bit encrypted secure bank checkout\n
    • \n
\n \n\n \n \n \n

\n You won't be charged yet. Final confirmation is sent instantly.\n

\n \n \n
\n \n \n `,\n})\nexport class UiHotelBookingReservationComponent implements OnInit {\n @Input('class') className?: string\n @Input() roomTitle = 'Deluxe Ocean View King Suite'\n @Input() hotelName = 'The Ritz-Carlton Bal Harbour, Miami'\n @Input() location = 'Bal Harbour, Miami Beach, FL'\n @Input() rating = 5.0\n @Input() reviewsCount = 120\n @Input() basePrice = 485\n @Input() initialCheckIn = '2026-08-24'\n @Input() initialCheckOut = '2026-08-29'\n @Input() initialAdults = 2\n @Input() initialChildren = 1\n @Input() initialRooms = 1\n\n readonly checkInDate = signal('')\n readonly checkOutDate = signal('')\n readonly adults = signal(2)\n readonly children = signal(1)\n readonly rooms = signal(1)\n readonly specialRequests = signal('')\n readonly isBooked = signal(false)\n readonly isSaved = signal(false)\n readonly activePhotoIndex = signal(0)\n\n // Upgrades state: Oceanfront balcony and Daily Breakfast are checked by default\n readonly selectedUpgrades = signal(['balcony', 'breakfast'])\n readonly breakfastGuests = signal(1)\n\n protected readonly photos = roomPhotos\n protected readonly presets = [3, 5, 7, 10]\n protected readonly breakfastOptions = [1, 2]\n\n protected readonly Baby = Baby\n protected readonly Bath = Bath\n protected readonly BedDouble = BedDouble\n protected readonly Building2 = Building2\n protected readonly Calendar = Calendar\n protected readonly CalendarDays = CalendarDays\n protected readonly Check = Check\n protected readonly CircleCheck = CircleCheck\n protected readonly Coffee = Coffee\n protected readonly CreditCard = CreditCard\n protected readonly Heart = Heart\n protected readonly Info = Info\n protected readonly Lock = Lock\n protected readonly MapPin = MapPin\n protected readonly Maximize2 = Maximize2\n protected readonly Minus = Minus\n protected readonly Plus = Plus\n protected readonly RotateCcw = RotateCcw\n protected readonly Share2 = Share2\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Star = Star\n protected readonly Users = Users\n protected readonly Waves = Waves\n protected readonly Wifi = Wifi\n\n ngOnInit(): void {\n // React seeds its useState once from the initial* props; inputs land after construction.\n this.checkInDate.set(this.initialCheckIn)\n this.checkOutDate.set(this.initialCheckOut)\n this.adults.set(this.initialAdults)\n this.children.set(this.initialChildren)\n this.rooms.set(this.initialRooms)\n }\n\n protected get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-8 p-4 sm:p-6 lg:p-8', this.className)\n }\n\n protected get activePhoto(): HotelBookingPhoto {\n return this.photos[this.activePhotoIndex()] ?? this.photos[0]!\n }\n\n has(id: HotelBookingUpgrade): boolean {\n return this.selectedUpgrades().includes(id)\n }\n\n toggleUpgrade(id: HotelBookingUpgrade): void {\n this.selectedUpgrades.update((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]))\n }\n\n onUpgradeKeydown(event: KeyboardEvent, id: HotelBookingUpgrade): void {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault()\n this.toggleUpgrade(id)\n }\n }\n\n // Date calculations\n get nights(): number {\n const checkIn = this.checkInDate()\n const checkOut = this.checkOutDate()\n if (!checkIn || !checkOut) return 5\n const start = new Date(checkIn).getTime()\n const end = new Date(checkOut).getTime()\n const diffDays = Math.round((end - start) / (1000 * 60 * 60 * 24))\n return diffDays > 0 ? diffDays : 1\n }\n\n setDuration(presetNights: number): void {\n const checkIn = this.checkInDate()\n if (!checkIn) return\n const start = new Date(checkIn + 'T00:00:00')\n start.setDate(start.getDate() + presetNights)\n this.checkOutDate.set(toIsoDate(start))\n }\n\n formatDateDisplay(dateStr: string): string {\n if (!dateStr) return ''\n const [year, month, day] = dateStr.split('-').map(Number)\n if (!year || !month || !day) return dateStr\n const date = new Date(year, month - 1, day)\n return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })\n }\n\n get formattedRange(): string {\n const nights = this.nights\n return `${this.formatDateDisplay(this.checkInDate())} → ${this.formatDateDisplay(this.checkOutDate())} · ${nights} ${nights === 1 ? 'Night' : 'Nights'}`\n }\n\n get cancellationDeadline(): string {\n const checkIn = this.checkInDate()\n if (!checkIn) return '48 hours prior to arrival'\n const start = new Date(checkIn + 'T00:00:00')\n start.setDate(start.getDate() - 2)\n return this.formatDateDisplay(toIsoDate(start))\n }\n\n // Financial calculations\n get roomSubtotal(): number {\n return this.basePrice * this.nights * this.rooms()\n }\n get balconyCost(): number {\n return this.has('balcony') ? 50 * this.nights * this.rooms() : 0\n }\n get breakfastCost(): number {\n return this.has('breakfast') ? 35 * this.breakfastGuests() * this.nights : 0\n }\n get chauffeurCost(): number {\n return this.has('chauffeur') ? 120 : 0\n }\n get spaCost(): number {\n return this.has('spa') ? 65 * this.adults() : 0\n }\n get selectedAddonsTotal(): number {\n return this.balconyCost + this.breakfastCost + this.chauffeurCost + this.spaCost\n }\n get resortFee(): number {\n return 30 * this.nights * this.rooms()\n }\n get taxableSubtotal(): number {\n return this.roomSubtotal + this.selectedAddonsTotal + this.resortFee\n }\n get estimatedTaxes(): number {\n return Math.round(this.taxableSubtotal * 0.14 * 100) / 100\n }\n get totalStayPrice(): number {\n return this.taxableSubtotal + this.estimatedTaxes\n }\n\n formatCurrency(val: number): string {\n return currency.format(val)\n }\n\n // Stepper modifiers\n updateAdults(delta: number): void {\n const next = this.adults() + delta\n if (next >= 1 && next <= 8) {\n if (this.breakfastGuests() > next) this.breakfastGuests.set(next)\n this.adults.set(next)\n }\n }\n\n updateChildren(delta: number): void {\n const next = this.children() + delta\n if (next >= 0 && next <= 6) this.children.set(next)\n }\n\n updateRooms(delta: number): void {\n const next = this.rooms() + delta\n if (next >= 1 && next <= 4) this.rooms.set(next)\n }\n\n book(): void {\n this.isBooked.set(true)\n }\n\n protected get heartClass(): string {\n return cn('size-4 transition-colors', this.isSaved() ? 'fill-destructive text-destructive' : 'text-foreground')\n }\n\n protected thumbClass(idx: number): string {\n return cn(\n 'border-border relative aspect-16/10 overflow-hidden rounded-lg border transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',\n this.activePhotoIndex() === idx ? 'ring-primary border-primary ring-2' : 'opacity-70 hover:opacity-100',\n )\n }\n\n protected presetClass(preset: number): string {\n return this.nights === preset ? 'bg-primary text-primary-foreground border-primary hover:bg-primary/90' : ''\n }\n\n protected breakfastClass(count: number): string {\n return this.breakfastGuests() === count ? 'bg-primary text-primary-foreground border-primary' : ''\n }\n\n protected upgradeClass(id: HotelBookingUpgrade): string {\n return cn(\n 'border-border focus-visible:ring-ring flex cursor-pointer items-start justify-between gap-4 rounded-xl border p-4 transition-colors select-none focus-visible:ring-2 focus-visible:outline-none',\n this.has(id)\n ? 'border-primary/40 bg-primary/5 shadow-xs'\n : 'bg-card hover:border-border/80 opacity-80 hover:opacity-100',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/hotel-booking-reservation/hotel-booking-reservation.component.ts" }, { "path": "packages/registry-angular/blocks/hotel-booking-reservation/index.ts", "content": "export {\n UiHotelBookingReservationComponent,\n type HotelBookingPhoto,\n type HotelBookingUpgrade,\n} from './hotel-booking-reservation.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/hotel-booking-reservation/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/checkbox.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Luxury hotel room booking and reservation widget with interactive date range picker, guest & room steppers, room upgrade checkboxes, live reactive pricing breakdown, and instant reservation checkout.", "categories": [ "commerce", "hospitality", "booking", "ecommerce", "app" ] }