"use client" import { useWatch } from "react-hook-form" import { useIntl } from "react-intl" import { dt } from "@/lib/dt" import { EditIcon, SearchIcon } from "@/components/Icons" import SkeletonShimmer from "@/components/SkeletonShimmer" import Divider from "@/components/TempDesignSystem/Divider" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import useLang from "@/hooks/useLang" import isValidJson from "@/utils/isValidJson" import styles from "./button.module.css" import type { BookingWidgetSchema, BookingWidgetToggleButtonProps, } from "@/types/components/bookingWidget" import type { Location } from "@/types/trpc/routers/hotel/locations" export default function MobileToggleButton({ openMobileSearch, }: BookingWidgetToggleButtonProps) { const intl = useIntl() const lang = useLang() const d = useWatch({ name: "date" }) const location = useWatch({ name: "location" }) const rooms: BookingWidgetSchema["rooms"] = useWatch({ name: "rooms" }) const parsedLocation: Location | null = location && isValidJson(location) ? JSON.parse(decodeURIComponent(location)) : null const selectedFromDate = dt(d.fromDate).locale(lang).format("D MMM") const selectedToDate = dt(d.toDate).locale(lang).format("D MMM") const locationAndDateIsSet = parsedLocation && d const totalNights = dt(d.toDate).diff(dt(d.fromDate), "days") const totalRooms = rooms.length const totalAdults = rooms.reduce((acc, room) => { if (room.adults) { acc = acc + room.adults } return acc }, 0) const totalChildren = rooms.reduce((acc, room) => { if (room.childrenInRoom) { acc = acc + room.childrenInRoom.length } return acc }, 0) const totalNightsMsg = intl.formatMessage( { id: "{totalNights, plural, one {# night} other {# nights}}" }, { totalNights } ) const totalAdultsMsg = intl.formatMessage( { id: "{totalAdults, plural, one {# adult} other {# adults}}" }, { totalAdults } ) const totalChildrenMsg = intl.formatMessage( { id: "{totalChildren, plural, one {# child} other {# children}}" }, { totalChildren } ) const totalRoomsMsg = intl.formatMessage( { id: "{totalRooms, plural, one {# room} other {# rooms}}" }, { totalRooms } ) const totalDetails = [totalAdultsMsg] if (totalChildren > 0) { totalDetails.push(totalChildrenMsg) } totalDetails.push(totalRoomsMsg) return (
{!locationAndDateIsSet && ( <>
{intl.formatMessage({ id: "Where to?" })} {parsedLocation ? parsedLocation.name : intl.formatMessage({ id: "Destination" })}
{totalNightsMsg} {intl.formatMessage( { id: "{selectedFromDate} - {selectedToDate}" }, { selectedFromDate, selectedToDate, } )}
)} {locationAndDateIsSet && ( <>
{parsedLocation?.name} {intl.formatMessage( { id: "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}", }, { selectedFromDate, selectedToDate, totalNights: totalNightsMsg, details: totalDetails.join(", "), } )}
)}
) } export function MobileToggleButtonSkeleton() { const intl = useIntl() return (
{intl.formatMessage({ id: "Where to?" })}
{intl.formatMessage( { id: "{totalNights, plural, one {# night} other {# nights}}" }, { totalNights: 0 } )}
) }