import { useIntl } from "react-intl" import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow" import { ChevronRightSmallIcon } from "@/components/Icons" import Modal from "@/components/Modal" import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard" import Button from "@/components/TempDesignSystem/Button" import Body from "@/components/TempDesignSystem/Text/Body" import styles from "./ancillaryGridModal.module.css" import type { Ancillary, AncillaryGridModalProps, } from "@/types/components/myPages/myStay/ancillaries" export default function AncillaryGridModal({ ancillaries, selectedCategory, setSelectedCategory, handleCardClick, }: AncillaryGridModalProps) { const intl = useIntl() const { isGridOpen, setGridIsOpen, setOpenedFrom } = useAddAncillaryStore() const handleClick = (ancillary: Ancillary["ancillaryContent"][number]) => { handleCardClick(ancillary) setOpenedFrom("grid") setGridIsOpen(false) } return (

setGridIsOpen(!isGridOpen)} title={intl.formatMessage({ id: "Upgrade your stay" })} >

{ancillaries.map((category) => ( ))}

{ancillaries .find((category) => category.categoryName === selectedCategory) ?.ancillaryContent.map(({ description, ...ancillary }) => (

handleClick({ description, ...ancillary })} >

))}

) }