diff --git a/components/HotelReservation/HotelCard/HotelPriceList/NoPriceAvailableCard/index.tsx b/components/HotelReservation/HotelCard/HotelPriceList/NoPriceAvailableCard/index.tsx new file mode 100644 index 000000000..38a0e50b3 --- /dev/null +++ b/components/HotelReservation/HotelCard/HotelPriceList/NoPriceAvailableCard/index.tsx @@ -0,0 +1,24 @@ +import { useIntl } from "react-intl" + +import { ErrorCircleIcon } from "@/components/Icons" +import Body from "@/components/TempDesignSystem/Text/Body" + +import styles from "../hotelPriceList.module.css" + +export default function NoPriceAvailableCard() { + const intl = useIntl() + return ( +
+
+
+ +
+ + {intl.formatMessage({ + id: "There are no rooms available that match your request.", + })} + +
+
+ ) +} diff --git a/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css b/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css index fb67d45d9..23d935c27 100644 --- a/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css +++ b/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css @@ -40,6 +40,6 @@ @media screen and (min-width: 1367px) { .prices { - max-width: 260px; + width: 260px; } } diff --git a/components/HotelReservation/HotelCard/HotelPriceList/index.tsx b/components/HotelReservation/HotelCard/HotelPriceList/index.tsx index d98fdc260..c868afa5d 100644 --- a/components/HotelReservation/HotelCard/HotelPriceList/index.tsx +++ b/components/HotelReservation/HotelCard/HotelPriceList/index.tsx @@ -10,6 +10,7 @@ import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import HotelPriceCard from "./HotelPriceCard" +import NoPriceAvailableCard from "./NoPriceAvailableCard" import styles from "./hotelPriceList.module.css" @@ -48,18 +49,7 @@ export default function HotelPriceList({ ) : ( -
-
-
- -
- - {intl.formatMessage({ - id: "There are no rooms available that match your request.", - })} - -
-
+ )} ) diff --git a/components/HotelReservation/HotelCard/hotelCard.module.css b/components/HotelReservation/HotelCard/hotelCard.module.css index bfa87ea3a..089f88800 100644 --- a/components/HotelReservation/HotelCard/hotelCard.module.css +++ b/components/HotelReservation/HotelCard/hotelCard.module.css @@ -122,11 +122,6 @@ margin-bottom: var(--Spacing-x-one-and-half); } - .pageListing .prices { - align-items: center; - width: 260px; - } - .pageListing .button { width: 100%; } diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx index 1836d4130..916796229 100644 --- a/components/HotelReservation/HotelCard/index.tsx +++ b/components/HotelReservation/HotelCard/index.tsx @@ -3,11 +3,10 @@ import { useParams } from "next/dist/client/components/navigation" import { useIntl } from "react-intl" import { Lang } from "@/constants/languages" -import { selectHotelMap, selectRate } from "@/constants/routes/hotelReservation" +import { selectHotelMap } from "@/constants/routes/hotelReservation" import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data" import ImageGallery from "@/components/ImageGallery" -import Button from "@/components/TempDesignSystem/Button" import Divider from "@/components/TempDesignSystem/Divider" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" diff --git a/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css b/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css index 7a55be6ca..5c6e6d6bd 100644 --- a/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css +++ b/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css @@ -48,7 +48,7 @@ .content { width: 100%; - min-width: 201px; + min-width: 220px; padding: var(--Spacing-x-one-and-half); gap: var(--Spacing-x1); display: flex; @@ -67,12 +67,32 @@ gap: var(--Spacing-x-half); } -.prices { +.priceCard { border-radius: var(--Corner-radius-Medium); padding: var(--Spacing-x-half) var(--Spacing-x1); background: var(--Base-Surface-Secondary-light-Normal); +} + +.prices { display: flex; flex-direction: column; + gap: var(--Spacing-x1); +} + +.imagePlaceholder { + height: 100%; + width: 100%; + background-color: #fff; + background-image: linear-gradient(45deg, #000000 25%, transparent 25%), + linear-gradient(-45deg, #000000 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #000000 75%), + linear-gradient(-45deg, transparent 75%, #000000 75%); + background-size: 120px 120px; + background-position: + 0 0, + 0 60px, + 60px -60px, + -60px 0; } .perNight { diff --git a/components/HotelReservation/HotelCardDialog/index.tsx b/components/HotelReservation/HotelCardDialog/index.tsx index 32f745620..3fdcd6344 100644 --- a/components/HotelReservation/HotelCardDialog/index.tsx +++ b/components/HotelReservation/HotelCardDialog/index.tsx @@ -1,6 +1,7 @@ "use client" import { useParams } from "next/navigation" +import { useState } from "react" import { useIntl } from "react-intl" import { Lang } from "@/constants/languages" @@ -16,6 +17,8 @@ import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import NoPriceAvailableCard from "../HotelCard/HotelPriceList/NoPriceAvailableCard" + import styles from "./hotelCardDialog.module.css" import type { HotelCardDialogProps } from "@/types/components/hotelReservation/selectHotel/map" @@ -28,6 +31,7 @@ export default function HotelCardDialog({ const params = useParams() const lang = params.lang as Lang const intl = useIntl() + const [imageError, setImageError] = useState(false) if (!data) { return null @@ -56,7 +60,16 @@ export default function HotelCardDialog({ height={16} />
- {altText} + {!firstImage || imageError ? ( +
+ ) : ( + {altText} setImageError(true)} + /> + )}
@@ -84,32 +97,50 @@ export default function HotelCardDialog({ })}
- {intl.formatMessage({ id: "From" })} - - {publicPrice} {currency} - - /{intl.formatMessage({ id: "night" })} - - - {memberPrice && ( - - {memberPrice} {currency} - - /{intl.formatMessage({ id: "night" })} - - + {publicPrice || memberPrice ? ( + <> +
+ + {intl.formatMessage({ id: "From" })} + + + {publicPrice} {currency} + + /{intl.formatMessage({ id: "night" })} + + + {memberPrice && ( + + {memberPrice} {currency} + + /{intl.formatMessage({ id: "night" })} + + + )} +
+ + + ) : ( + )}
- -
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css index 962684640..5fd7e4084 100644 --- a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css +++ b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css @@ -11,7 +11,7 @@ left: 0; right: 0; z-index: 10; - height: 280px; + height: 100%; gap: var(--Spacing-x1); }