{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hotel-booking-reservation", "title": "Hotel Booking Reservation", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/hotel-booking-reservation/HotelBookingReservation.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Bath,\n BedDouble,\n Building2,\n Calendar,\n CalendarDays,\n Check,\n CheckCircle2,\n Coffee,\n CreditCard,\n Heart,\n Info,\n Lock,\n MapPin,\n Maximize2,\n Minus,\n Plus,\n RotateCcw,\n Share2,\n ShieldCheck,\n Star,\n Users,\n Baby,\n Waves,\n Wifi,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface HotelBookingReservationProps {\n className?: string\n roomTitle?: string\n hotelName?: string\n location?: string\n rating?: number\n reviewsCount?: number\n basePrice?: number\n initialCheckIn?: string\n initialCheckOut?: string\n initialAdults?: number\n initialChildren?: number\n initialRooms?: number\n}\n\nconst roomPhotos = [\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\nexport function HotelBookingReservation({\n className,\n roomTitle = 'Deluxe Ocean View King Suite',\n hotelName = 'The Ritz-Carlton Bal Harbour, Miami',\n location = 'Bal Harbour, Miami Beach, FL',\n rating = 5.0,\n reviewsCount = 120,\n basePrice = 485,\n initialCheckIn = '2026-08-24',\n initialCheckOut = '2026-08-29',\n initialAdults = 2,\n initialChildren = 1,\n initialRooms = 1,\n}: HotelBookingReservationProps) {\n const [checkInDate, setCheckInDate] = React.useState(initialCheckIn)\n const [checkOutDate, setCheckOutDate] = React.useState(initialCheckOut)\n const [adults, setAdults] = React.useState(initialAdults)\n const [children, setChildren] = React.useState(initialChildren)\n const [rooms, setRooms] = React.useState(initialRooms)\n const [specialRequests, setSpecialRequests] = React.useState('')\n const [isBooked, setIsBooked] = React.useState(false)\n const [isSaved, setIsSaved] = React.useState(false)\n const [activePhotoIndex, setActivePhotoIndex] = React.useState(0)\n\n // Upgrades state: Oceanfront balcony and Daily Breakfast are checked by default\n const [selectedUpgrades, setSelectedUpgrades] = React.useState(['balcony', 'breakfast'])\n const [breakfastGuests, setBreakfastGuests] = React.useState(1)\n\n function toggleUpgrade(id: string) {\n setSelectedUpgrades((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]))\n }\n\n // Date calculations\n const nights = React.useMemo(() => {\n if (!checkInDate || !checkOutDate) return 5\n const start = new Date(checkInDate).getTime()\n const end = new Date(checkOutDate).getTime()\n const diffDays = Math.round((end - start) / (1000 * 60 * 60 * 24))\n return diffDays > 0 ? diffDays : 1\n }, [checkInDate, checkOutDate])\n\n function setDuration(presetNights: number) {\n if (!checkInDate) return\n const start = new Date(checkInDate + 'T00:00:00')\n start.setDate(start.getDate() + presetNights)\n const y = start.getFullYear()\n const m = String(start.getMonth() + 1).padStart(2, '0')\n const d = String(start.getDate()).padStart(2, '0')\n setCheckOutDate(`${y}-${m}-${d}`)\n }\n\n function formatDateDisplay(dateStr: 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 const formattedRange = React.useMemo(() => {\n return `${formatDateDisplay(checkInDate)} → ${formatDateDisplay(checkOutDate)} · ${nights} ${nights === 1 ? 'Night' : 'Nights'}`\n }, [checkInDate, checkOutDate, nights])\n\n const cancellationDeadline = React.useMemo(() => {\n if (!checkInDate) return '48 hours prior to arrival'\n const start = new Date(checkInDate + 'T00:00:00')\n start.setDate(start.getDate() - 2)\n const y = start.getFullYear()\n const m = String(start.getMonth() + 1).padStart(2, '0')\n const d = String(start.getDate()).padStart(2, '0')\n return formatDateDisplay(`${y}-${m}-${d}`)\n }, [checkInDate])\n\n // Financial calculations\n const roomSubtotal = basePrice * nights * rooms\n const balconyCost = selectedUpgrades.includes('balcony') ? 50 * nights * rooms : 0\n const breakfastCost = selectedUpgrades.includes('breakfast') ? 35 * breakfastGuests * nights : 0\n const chauffeurCost = selectedUpgrades.includes('chauffeur') ? 120 : 0\n const spaCost = selectedUpgrades.includes('spa') ? 65 * adults : 0\n const selectedAddonsTotal = balconyCost + breakfastCost + chauffeurCost + spaCost\n const resortFee = 30 * nights * rooms\n const taxableSubtotal = roomSubtotal + selectedAddonsTotal + resortFee\n const estimatedTaxes = Math.round(taxableSubtotal * 0.14 * 100) / 100\n const totalStayPrice = taxableSubtotal + estimatedTaxes\n\n function formatCurrency(val: number) {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }).format(val)\n }\n\n // Stepper modifiers\n function updateAdults(delta: number) {\n setAdults((prev) => {\n const next = prev + delta\n if (next >= 1 && next <= 8) {\n if (breakfastGuests > next) {\n setBreakfastGuests(next)\n }\n return next\n }\n return prev\n })\n }\n\n function updateChildren(delta: number) {\n setChildren((prev) => {\n const next = prev + delta\n if (next >= 0 && next <= 6) return next\n return prev\n })\n }\n\n function updateRooms(delta: number) {\n setRooms((prev) => {\n const next = prev + delta\n if (next >= 1 && next <= 4) return next\n return prev\n })\n }\n\n return (\n \n {/* Confirmation Banner (Visible when booked) */}\n {isBooked && (\n
\n
\n
\n \n
\n
\n
\n

\n Reservation Confirmed · Reference #RC-884920\n

\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 {/* Room Hero Header Card */}\n \n
\n {/* Room Photo Showcase */}\n
\n
\n \n
\n
\n \n Oceanfront View\n \n \n Floor 16\n \n
\n
\n setIsSaved(!isSaved)}\n >\n \n \n \n \n \n
\n
\n {roomPhotos[activePhotoIndex]?.title}\n \n {activePhotoIndex + 1} / {roomPhotos.length}\n \n
\n
\n\n {/* Mini Thumbnail Selector */}\n
\n {roomPhotos.map((photo, idx) => (\n setActivePhotoIndex(idx)}\n >\n {photo.title}\n \n ))}\n
\n
\n\n {/* Room Meta & Overview Information */}\n
\n
\n
\n
\n \n {rating.toFixed(1)}\n \n {reviewsCount} verified guest reviews\n \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 {/* Room Key Amenities Grid */}\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 {/* Interactive 2-Column Booking Configuration & Price Breakdown Grid */}\n
\n {/* Left Column: Reservation Inputs, Guests & Upgrades */}\n
\n {/* Stay Dates Selection */}\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 {/* Date Inputs */}\n
\n
\n \n \n Check-in Date (3:00 PM)\n \n setCheckInDate(e.target.value)}\n />\n
\n\n
\n \n \n Check-out Date (12:00 PM)\n \n setCheckOutDate(e.target.value)}\n />\n
\n
\n\n {/* Stay Summary Highlight & Quick Length Presets */}\n
\n
\n Selected Stay: \n {formattedRange}\n
\n
\n Quick:\n {[3, 5, 7, 10].map((preset) => (\n setDuration(preset)}\n >\n {preset}N\n \n ))}\n
\n
\n \n \n\n {/* Guests & Rooms Steppers */}\n \n \n Guests & Rooms\n Configure the number of adults, children, and suites requested.\n \n \n {/* Adults Stepper */}\n
\n
\n
\n \n
\n
\n Adults\n

Ages 13 and above

\n
\n
\n
\n updateAdults(-1)}\n >\n \n \n {adults}\n = 8}\n aria-label=\"Increase adults\"\n onClick={() => updateAdults(1)}\n >\n \n \n
\n
\n\n {/* Children Stepper */}\n
\n
\n
\n \n
\n
\n Children\n

Ages 0 to 12 years

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

Max 4 guests per suite

\n
\n
\n
\n updateRooms(-1)}\n >\n \n \n {rooms}\n = 4}\n aria-label=\"Increase rooms\"\n onClick={() => updateRooms(1)}\n >\n \n \n
\n
\n \n \n\n {/* Room Upgrades & Add-ons */}\n \n \n
\n
\n Room Upgrades & Exclusive Services\n \n Tailor your stay with luxury amenities and curated hotel enhancements.\n \n
\n \n {selectedUpgrades.length} Selected\n \n
\n \n \n {/* Upgrade 1: Oceanfront Balcony */}\n toggleUpgrade('balcony')}\n onKeyDown={(e) => {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault()\n toggleUpgrade('balcony')\n }\n }}\n >\n
\n \n
\n
\n Oceanfront High-Floor Balcony\n \n +$50 / night\n \n
\n

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

\n
\n
\n
\n \n +{formatCurrency(50 * nights * rooms)}\n \n for {nights} nights\n
\n
\n\n {/* Upgrade 2: Gourmet Breakfast */}\n toggleUpgrade('breakfast')}\n onKeyDown={(e) => {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault()\n toggleUpgrade('breakfast')\n }\n }}\n >\n
\n \n
\n
\n Daily Gourmet Breakfast\n \n +$35 / person / day\n \n
\n

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

\n {/* Guest selection when active */}\n {selectedUpgrades.includes('breakfast') && (\n e.stopPropagation()}\n >\n Breakfast plan for:\n
\n {[1, 2].map((count) => (\n setBreakfastGuests(count)}\n >\n {count} {count === 1 ? 'Guest' : 'Guests'}\n \n ))}\n
\n
\n )}\n
\n
\n
\n \n +{formatCurrency(35 * breakfastGuests * nights)}\n \n \n {breakfastGuests} {breakfastGuests === 1 ? 'guest' : 'guests'} · {nights}d\n \n
\n
\n\n {/* Upgrade 3: Airport Chauffeur */}\n toggleUpgrade('chauffeur')}\n onKeyDown={(e) => {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault()\n toggleUpgrade('chauffeur')\n }\n }}\n >\n
\n \n
\n
\n Private Airport Luxury Chauffeur\n \n +$120 one-time\n \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 {/* Special Requests Card */}\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 setSpecialRequests(e.target.value)}\n placeholder=\"e.g., Honeymoon celebration, feather-free bedding, quiet high floor...\"\n maxLength={200}\n showCount\n />\n \n \n \n\n {/* Right Column: Total Price Breakdown & Checkout Card (Sticky) */}\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 {/* Itemized Pricing Breakdown */}\n
\n {/* Base Room Subtotal */}\n
\n \n Room subtotal ({formatCurrency(basePrice)} × {nights} {nights === 1 ? 'night' : 'nights'}\n {rooms > 1 ? ` × ${rooms} rooms` : ''})\n \n {formatCurrency(roomSubtotal)}\n
\n\n {/* Selected Add-ons summary / itemized */}\n
\n
\n Selected Add-ons ({selectedUpgrades.length} active)\n \n {formatCurrency(selectedAddonsTotal)}\n \n
\n\n {/* Addon sub-items */}\n {selectedUpgrades.length > 0 && (\n
\n {selectedUpgrades.includes('balcony') && (\n
\n \n • Oceanfront Balcony ({formatCurrency(50)} × {nights}n)\n \n \n {formatCurrency(balconyCost)}\n \n
\n )}\n {selectedUpgrades.includes('breakfast') && (\n
\n \n • Gourmet Breakfast ({formatCurrency(35)} × {breakfastGuests}g × {nights}d)\n \n \n {formatCurrency(breakfastCost)}\n \n
\n )}\n {selectedUpgrades.includes('chauffeur') && (\n
\n • Luxury Airport Chauffeur (one-time)\n \n {formatCurrency(chauffeurCost)}\n \n
\n )}\n {selectedUpgrades.includes('spa') && (\n
\n \n • Thermal Spa Pass ({formatCurrency(65)} × {adults} guests)\n \n {formatCurrency(spaCost)}\n
\n )}\n
\n )}\n
\n\n {/* Resort Fee */}\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 {/* Estimated Taxes */}\n
\n Estimated Taxes & Tourism Surcharge (14%)\n {formatCurrency(estimatedTaxes)}\n
\n
\n\n \n\n {/* Cancellation Policy Banner */}\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 {/* Trust Bullet Points */}\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 setIsBooked(true)}\n >\n Hold Room · Pay at Check-in\n \n

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

\n \n \n
\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/HotelBookingReservation.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/checkbox.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/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" ] }