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

Merged in fix/SW-2165-map-navigate-hotel-card (pull request #2246)

Browse Source 
fix(SW-2165): map navigate on enter press 

* fix(SW-2165): navigate on enter press and refactor

* fix(SW-2165): responsive design

* fix(SW-2165): replace spacing variables

* fix(SW-2165): resolve pr comment

* fix(SW-2165): remove isOpen, hide/show logic already handled

* fix(SW-2165): remove dialog

* fix(SW-2165): use buttonicon

* fix(SW-2165): do not focus on close button without tab

* fix(SW-2165): remove unneccessary css


Approved-by: Christian Andolf
This commit is contained in:
Bianca Widstam
2025-06-02 11:10:27 +00:00
parent 6df8c75d2d
commit 47abd7d5ef
11 changed files with 382 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx
View File

@@ -1,7 +1,11 @@
"use client"
import { useSession } from "next-auth/react"
import { useState } from "react"
import { useIntl } from "react-intl"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { selectRate } from "@/constants/routes/hotelReservation"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
@@ -11,6 +15,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { isValidClientSession } from "@/utils/clientSession"
import { trackEvent } from "@/utils/tracking/base"
@@ -18,25 +23,22 @@ import HotelPointsRow from "../../HotelCard/HotelPointsRow"
import NoPriceAvailableCard from "../../HotelCard/NoPriceAvailableCard"
import HotelCardDialogImage from "../HotelCardDialogImage"
import styles from "../hotelCardDialog.module.css"
import styles from "./standaloneHotelCardDialog.module.css"
import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
import type { Lang } from "@/constants/languages"
interface StandaloneHotelCardProps {
data: HotelPin
lang: Lang
imageError: boolean
setImageError: (error: boolean) => void
handleClose: () => void
}
export default function StandaloneHotelCardDialog({
data,
lang,
imageError,
setImageError,
handleClose,
}: StandaloneHotelCardProps) {
const intl = useIntl()
const lang = useLang()
const [imageError, setImageError] = useState(false)
const { data: session } = useSession()
const isUserLoggedIn = isValidClientSession(session)
const {
@@ -57,7 +59,18 @@ export default function StandaloneHotelCardDialog({
const altText = images[0]?.metaData?.altText
return (
<>
<div className={styles.container}>
<IconButton
theme="Black"
style="Muted"
className={styles.closeButton}
onPress={handleClose}
aria-label={intl.formatMessage({
defaultMessage: "Close",
})}
>
<MaterialIcon icon="close" size={22} color="CurrentColor" />
</IconButton>
<HotelCardDialogImage
firstImage={firstImage}
altText={altText}
@@ -67,10 +80,8 @@ export default function StandaloneHotelCardDialog({
position="left"
/>
<div className={styles.content}>
<div className={styles.header}>
<div className={styles.name}>
<Body textTransform="bold">{name}</Body>
</div>
<div className={styles.name}>
<Body textTransform="bold">{name}</Body>
</div>
<div className={styles.facilities}>
{amenities.slice(0, 3).map((facility) => {
@@ -246,6 +257,6 @@ export default function StandaloneHotelCardDialog({
)}
</div>
</div>
</>
</div>
)
}