scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-948-map-no-availability (pull request #961)

Browse Source 
Fix/SW-948 map no availability

* fix(SW-948): add no availability message on hotel map

* fix(SW-948): add placeholder image for map


Approved-by: Niclas Edenvin
This commit is contained in:
Bianca Widstam
2024-11-22 11:13:30 +00:00
parent 04fd4b163f
commit c345600d78
8 changed files with 107 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/HotelReservation/HotelCard/HotelPriceList/NoPriceAvailableCard/index.tsx Normal file
View File

@@ -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 (
<div className={styles.priceCard}>
<div className={styles.noRooms}>
<div>
<ErrorCircleIcon color="red" />
</div>
<Body>
{intl.formatMessage({
id: "There are no rooms available that match your request.",
})}
</Body>
</div>
</div>
)
}

2
components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css
View File

@@ -40,6 +40,6 @@
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.prices { .prices {
max-width: 260px; width: 260px;
} }
} }

14
components/HotelReservation/HotelCard/HotelPriceList/index.tsx
View File

@@ -10,6 +10,7 @@ import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import HotelPriceCard from "./HotelPriceCard" import HotelPriceCard from "./HotelPriceCard"
import NoPriceAvailableCard from "./NoPriceAvailableCard"
import styles from "./hotelPriceList.module.css" import styles from "./hotelPriceList.module.css"
@@ -48,18 +49,7 @@ export default function HotelPriceList({
</Button> </Button>
</> </>
) : ( ) : (
<div className={styles.priceCard}> <NoPriceAvailableCard />
<div className={styles.noRooms}>
<div>
<ErrorCircleIcon color="red" />
</div>
<Body>
{intl.formatMessage({
id: "There are no rooms available that match your request.",
})}
</Body>
</div>
</div>
)} )}
</div> </div>
) )

5
components/HotelReservation/HotelCard/hotelCard.module.css
View File

@@ -122,11 +122,6 @@
margin-bottom: var(--Spacing-x-one-and-half); margin-bottom: var(--Spacing-x-one-and-half);
} }
.pageListing .prices {
align-items: center;
width: 260px;
}
.pageListing .button { .pageListing .button {
width: 100%; width: 100%;
} }

3
components/HotelReservation/HotelCard/index.tsx
View File

@@ -3,11 +3,10 @@ import { useParams } from "next/dist/client/components/navigation"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { Lang } from "@/constants/languages" 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 { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery" import ImageGallery from "@/components/ImageGallery"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider" import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"

24
components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
View File

@@ -48,7 +48,7 @@
.content { .content {
width: 100%; width: 100%;
min-width: 201px; min-width: 220px;
padding: var(--Spacing-x-one-and-half); padding: var(--Spacing-x-one-and-half);
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
display: flex; display: flex;
@@ -67,12 +67,32 @@
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
} }
.prices { .priceCard {
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
padding: var(--Spacing-x-half) var(--Spacing-x1); padding: var(--Spacing-x-half) var(--Spacing-x1);
background: var(--Base-Surface-Secondary-light-Normal); background: var(--Base-Surface-Secondary-light-Normal);
}
.prices {
display: flex; display: flex;
flex-direction: column; 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 { .perNight {

81
components/HotelReservation/HotelCardDialog/index.tsx
View File

@@ -1,6 +1,7 @@
"use client" "use client"
import { useParams } from "next/navigation" import { useParams } from "next/navigation"
import { useState } from "react"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { Lang } from "@/constants/languages" import { Lang } from "@/constants/languages"
@@ -16,6 +17,8 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import NoPriceAvailableCard from "../HotelCard/HotelPriceList/NoPriceAvailableCard"
import styles from "./hotelCardDialog.module.css" import styles from "./hotelCardDialog.module.css"
import type { HotelCardDialogProps } from "@/types/components/hotelReservation/selectHotel/map" import type { HotelCardDialogProps } from "@/types/components/hotelReservation/selectHotel/map"
@@ -28,6 +31,7 @@ export default function HotelCardDialog({
const params = useParams() const params = useParams()
const lang = params.lang as Lang const lang = params.lang as Lang
const intl = useIntl() const intl = useIntl()
const [imageError, setImageError] = useState(false)
if (!data) { if (!data) {
return null return null
@@ -56,7 +60,16 @@ export default function HotelCardDialog({
height={16} height={16}
/> />
<div className={styles.imageContainer}> <div className={styles.imageContainer}>
<Image src={firstImage} alt={altText} fill /> {!firstImage || imageError ? (
<div className={styles.imagePlaceholder} />
) : (
<Image
src={firstImage}
alt={altText}
fill
onError={() => setImageError(true)}
/>
)}
<div className={styles.tripAdvisor}> <div className={styles.tripAdvisor}>
<Chip intent="secondary" className={styles.tripAdvisor}> <Chip intent="secondary" className={styles.tripAdvisor}>
<TripAdvisorIcon color="burgundy" /> <TripAdvisorIcon color="burgundy" />
@@ -84,32 +97,50 @@ export default function HotelCardDialog({
})} })}
</div> </div>
<div className={styles.prices}> <div className={styles.prices}>
<Caption type="bold">{intl.formatMessage({ id: "From" })}</Caption> {publicPrice || memberPrice ? (
<Subtitle type="two"> <>
{publicPrice} {currency} <div className={styles.priceCard}>
<Body asChild> <Caption type="bold">
<span>/{intl.formatMessage({ id: "night" })}</span> {intl.formatMessage({ id: "From" })}
</Body> </Caption>
</Subtitle> <Subtitle type="two">
{memberPrice && ( {publicPrice} {currency}
<Subtitle type="two" color="red" className={styles.memberPrice}> <Body asChild>
{memberPrice} {currency} <span>/{intl.formatMessage({ id: "night" })}</span>
<Body asChild color="red"> </Body>
<span>/{intl.formatMessage({ id: "night" })}</span> </Subtitle>
</Body> {memberPrice && (
</Subtitle> <Subtitle
type="two"
color="red"
className={styles.memberPrice}
>
{memberPrice} {currency}
<Body asChild color="red">
<span>/{intl.formatMessage({ id: "night" })}</span>
</Body>
</Subtitle>
)}
</div>
<Button
asChild
theme="base"
size="small"
className={styles.button}
>
<Link
href={`${selectRate(lang)}?hotel=${data.operaId}`}
color="none"
keepSearchParams
>
{intl.formatMessage({ id: "See rooms" })}
</Link>
</Button>
</>
) : (
<NoPriceAvailableCard />
)} )}
</div> </div>
<Button asChild theme="base" size="small" className={styles.button}>
<Link
href={`${selectRate(lang)}?hotel=${data.operaId}`}
color="none"
keepSearchParams
>
{intl.formatMessage({ id: "See rooms" })}
</Link>
</Button>
</div> </div>
</div> </div>
</dialog> </dialog>

2
components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
View File

@@ -11,7 +11,7 @@
left: 0; left: 0;
right: 0; right: 0;
z-index: 10; z-index: 10;
height: 280px; height: 100%;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
} }