"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 nights = dt(d.toDate).diff(dt(d.fromDate), "days") 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 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.child) { acc = acc + room.child.length } return acc }, 0) return (
{!locationAndDateIsSet && ( <>
{intl.formatMessage({ id: "Where to" })} {parsedLocation ? parsedLocation.name : intl.formatMessage({ id: "Destination" })}
{intl.formatMessage( { id: "booking.nights" }, { totalNights: nights } )} {selectedFromDate} - {selectedToDate}
)} {locationAndDateIsSet && ( <>
{parsedLocation?.name} {`${selectedFromDate} - ${selectedToDate} (${intl.formatMessage( { id: "booking.nights" }, { totalNights: nights } )}) ${intl.formatMessage({ id: "booking.adults" }, { totalAdults })}, ${ totalChildren > 0 ? intl.formatMessage( { id: "booking.children" }, { totalChildren } ) + ", " : "" }${intl.formatMessage({ id: "booking.rooms" }, { totalRooms })}`}
)}
) } export function MobileToggleButtonSkeleton() { const intl = useIntl() return (
{intl.formatMessage({ id: "Where to" })}
{intl.formatMessage({ id: "booking.nights" }, { totalNights: 0 })}
) }