Merged in SW-3270-move-interactive-map-to-design-system-or-booking-flow (pull request #2681)
SW-3270 move interactive map to design system or booking flow * wip * wip * merge * wip * add support for locales in design-system * add story for HotelCard * setup alias * . * remove tracking from design-system for hotelcard * pass isUserLoggedIn * export design-system-new-deprecated.css from design-system * Add HotelMarkerByType to Storybook * Add interactive map to Storybook * fix reactintl in vitest * rename env variables * . * fix background colors * add storybook stories for <Link /> * merge * fix tracking for when clicking 'See rooms' in InteractiveMap * Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3270-move-interactive-map-to-design-system-or-booking-flow * remove deprecated comment Approved-by: Anton Gunnarsson
This commit is contained in:
Joakim Jäderberg
@@ -1,46 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
position: relative;
|
||||
min-width: 177px;
|
||||
border-radius: var(--Corner-radius-md) 0 0 var(--Corner-radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.imageContainer.top {
|
||||
width: 80px;
|
||||
min-width: 80px;
|
||||
height: 90px;
|
||||
border-radius: var(--Corner-radius-md);
|
||||
}
|
||||
|
||||
.imageContainer img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.imageContainer .tripAdvisor {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 7px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.imageContainer.top .tripAdvisor {
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import Chip from "@scandic-hotels/design-system/Chip"
|
||||
import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
|
||||
import Image from "@scandic-hotels/design-system/Image"
|
||||
|
||||
import { hotelCardDialogImageVariants } from "./variants"
|
||||
|
||||
import styles from "./hotelCardDialogImage.module.css"
|
||||
|
||||
import type { HotelCardDialogImageProps } from "@/types/components/hotelReservation/selectHotel/map"
|
||||
|
||||
export default function HotelCardDialogImage({
|
||||
firstImage,
|
||||
altText,
|
||||
rating,
|
||||
imageError,
|
||||
setImageError,
|
||||
position,
|
||||
}: HotelCardDialogImageProps) {
|
||||
const classNames = hotelCardDialogImageVariants({ position })
|
||||
|
||||
return (
|
||||
<div className={classNames}>
|
||||
{!firstImage || imageError ? (
|
||||
<div className={styles.imagePlaceholder} />
|
||||
) : (
|
||||
<Image
|
||||
src={firstImage}
|
||||
alt={altText || ""}
|
||||
fill
|
||||
onError={() => setImageError(true)}
|
||||
/>
|
||||
)}
|
||||
{rating ? (
|
||||
<div className={styles.tripAdvisor}>
|
||||
<Chip className={styles.tripAdvisor}>
|
||||
<TripadvisorIcon color="Icon/Interactive/Default" />
|
||||
{rating}
|
||||
</Chip>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
import styles from "./hotelCardDialogImage.module.css"
|
||||
|
||||
export const hotelCardDialogImageVariants = cva(styles.imageContainer, {
|
||||
variants: {
|
||||
position: {
|
||||
top: styles.top,
|
||||
left: styles.left,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
position: "top",
|
||||
},
|
||||
})
|
||||
@@ -1,10 +1,15 @@
|
||||
"use client"
|
||||
|
||||
import { useSession } from "next-auth/react"
|
||||
import { useState } from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
|
||||
import Caption from "@scandic-hotels/design-system/Caption"
|
||||
import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
|
||||
import { HotelCardDialogImage } from "@scandic-hotels/design-system/HotelCard/HotelCardDialogImage"
|
||||
import { HotelPointsRow } from "@scandic-hotels/design-system/HotelCard/HotelPointsRow"
|
||||
import { NoPriceAvailableCard } from "@scandic-hotels/design-system/HotelCard/NoPriceAvailableCard"
|
||||
import { IconButton } from "@scandic-hotels/design-system/IconButton"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import Link from "@scandic-hotels/design-system/Link"
|
||||
@@ -12,14 +17,9 @@ import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton
|
||||
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
|
||||
import useLang from "@/hooks/useLang"
|
||||
import { isValidClientSession } from "@/utils/clientSession"
|
||||
|
||||
import HotelPointsRow from "../../HotelCard/HotelPointsRow"
|
||||
import NoPriceAvailableCard from "../../HotelCard/NoPriceAvailableCard"
|
||||
import HotelCardDialogImage from "../HotelCardDialogImage"
|
||||
|
||||
import styles from "./listingHotelCardDialog.module.css"
|
||||
|
||||
import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
|
||||
@@ -81,7 +81,7 @@ export default function ListingHotelCardDialog({
|
||||
<HotelCardDialogImage
|
||||
firstImage={firstImage}
|
||||
altText={altText}
|
||||
rating={ratings}
|
||||
rating={{ tripAdvisor: ratings }}
|
||||
imageError={imageError}
|
||||
setImageError={setImageError}
|
||||
position="top"
|
||||
|
||||
@@ -1,276 +0,0 @@
|
||||
"use client"
|
||||
import { useSession } from "next-auth/react"
|
||||
import { useState } from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
import Caption from "@scandic-hotels/design-system/Caption"
|
||||
import Footnote from "@scandic-hotels/design-system/Footnote"
|
||||
import { IconButton } from "@scandic-hotels/design-system/IconButton"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import Link from "@scandic-hotels/design-system/Link"
|
||||
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
||||
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
|
||||
import useLang from "@/hooks/useLang"
|
||||
import { isValidClientSession } from "@/utils/clientSession"
|
||||
import { trackEvent } from "@/utils/tracking/base"
|
||||
|
||||
import HotelPointsRow from "../../HotelCard/HotelPointsRow"
|
||||
import NoPriceAvailableCard from "../../HotelCard/NoPriceAvailableCard"
|
||||
import HotelCardDialogImage from "../HotelCardDialogImage"
|
||||
|
||||
import styles from "./standaloneHotelCardDialog.module.css"
|
||||
|
||||
import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
|
||||
|
||||
interface StandaloneHotelCardProps {
|
||||
data: HotelPin
|
||||
handleClose: () => void
|
||||
}
|
||||
|
||||
export default function StandaloneHotelCardDialog({
|
||||
data,
|
||||
handleClose,
|
||||
}: StandaloneHotelCardProps) {
|
||||
const intl = useIntl()
|
||||
const lang = useLang()
|
||||
const [imageError, setImageError] = useState(false)
|
||||
const { data: session } = useSession()
|
||||
const isUserLoggedIn = isValidClientSession(session)
|
||||
const {
|
||||
name,
|
||||
chequePrice,
|
||||
publicPrice,
|
||||
memberPrice,
|
||||
redemptionPrice,
|
||||
voucherPrice,
|
||||
currency,
|
||||
amenities,
|
||||
images,
|
||||
ratings,
|
||||
operaId,
|
||||
hasEnoughPoints,
|
||||
} = data
|
||||
|
||||
const firstImage = images[0]?.imageSizes?.small
|
||||
const altText = images[0]?.metaData?.altText
|
||||
const notEnoughPointsLabel = intl.formatMessage({
|
||||
defaultMessage: "Not enough points",
|
||||
})
|
||||
|
||||
const shouldShowNotEnoughPoints = redemptionPrice && !hasEnoughPoints
|
||||
|
||||
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}
|
||||
rating={ratings}
|
||||
imageError={imageError}
|
||||
setImageError={setImageError}
|
||||
position="left"
|
||||
/>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.name}>
|
||||
<Body textTransform="bold">{name}</Body>
|
||||
</div>
|
||||
<div className={styles.facilities}>
|
||||
{amenities.slice(0, 3).map((facility) => {
|
||||
const Icon = (
|
||||
<FacilityToIcon id={facility.id} size={16} color="Icon/Default" />
|
||||
)
|
||||
return (
|
||||
<div className={styles.facilitiesItem} key={facility.id}>
|
||||
{Icon && Icon}
|
||||
<Footnote color="uiTextMediumContrast">
|
||||
{facility.name}
|
||||
</Footnote>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className={styles.pricesContainer}>
|
||||
{publicPrice ||
|
||||
memberPrice ||
|
||||
redemptionPrice ||
|
||||
voucherPrice ||
|
||||
chequePrice ? (
|
||||
<>
|
||||
<div className={styles.priceCard}>
|
||||
{redemptionPrice ? (
|
||||
<Caption>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Available rates",
|
||||
})}
|
||||
</Caption>
|
||||
) : (
|
||||
<Caption type="bold">
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "From",
|
||||
})}
|
||||
</Caption>
|
||||
)}
|
||||
{chequePrice && (
|
||||
<Subtitle type="two">
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{price} {currency}",
|
||||
},
|
||||
{
|
||||
price: chequePrice.numberOfCheques,
|
||||
currency: "CC",
|
||||
}
|
||||
)}
|
||||
{chequePrice.additionalPricePerStay > 0
|
||||
? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
|
||||
" + " +
|
||||
intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{price} {currency}",
|
||||
},
|
||||
{
|
||||
price: chequePrice.additionalPricePerStay,
|
||||
currency: chequePrice.currency,
|
||||
}
|
||||
)
|
||||
: null}
|
||||
<Body asChild>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
<span>
|
||||
/
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "night",
|
||||
})}
|
||||
</span>
|
||||
</Body>
|
||||
</Subtitle>
|
||||
)}
|
||||
{voucherPrice && (
|
||||
<Subtitle type="two">
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{price} {currency}",
|
||||
},
|
||||
{
|
||||
price: voucherPrice,
|
||||
currency,
|
||||
}
|
||||
)}
|
||||
<Body asChild>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
<span>
|
||||
/
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "night",
|
||||
})}
|
||||
</span>
|
||||
</Body>
|
||||
</Subtitle>
|
||||
)}
|
||||
{publicPrice && !isUserLoggedIn && (
|
||||
<Subtitle type="two">
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{price} {currency}",
|
||||
},
|
||||
{
|
||||
price: publicPrice,
|
||||
currency,
|
||||
}
|
||||
)}
|
||||
<Body asChild>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
<span>
|
||||
/
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "night",
|
||||
})}
|
||||
</span>
|
||||
</Body>
|
||||
</Subtitle>
|
||||
)}
|
||||
{memberPrice && (
|
||||
<Subtitle type="two" color="red">
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{price} {currency}",
|
||||
},
|
||||
{
|
||||
price: memberPrice,
|
||||
currency,
|
||||
}
|
||||
)}
|
||||
<Body asChild color="red">
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
<span>
|
||||
/
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "night",
|
||||
})}
|
||||
</span>
|
||||
</Body>
|
||||
</Subtitle>
|
||||
)}
|
||||
{redemptionPrice && (
|
||||
<HotelPointsRow pointsPerStay={redemptionPrice} />
|
||||
)}
|
||||
</div>
|
||||
{shouldShowNotEnoughPoints ? (
|
||||
<div className={styles.notEnoughPointsButton}>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<span>{notEnoughPointsLabel}</span>
|
||||
</Typography>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
asChild
|
||||
theme="base"
|
||||
size="small"
|
||||
className={styles.button}
|
||||
onClick={() =>
|
||||
trackEvent({
|
||||
event: "hotelClickMap",
|
||||
map: {
|
||||
action: "hotel click - map",
|
||||
},
|
||||
hotelInfo: {
|
||||
hotelId: operaId,
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<Link
|
||||
href={`${selectRate(lang)}?hotel=${operaId}`}
|
||||
color="none"
|
||||
keepSearchParams
|
||||
>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "See rooms",
|
||||
})}
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<NoPriceAvailableCard />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
.container {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: var(--Base-Surface-Primary-light-Normal);
|
||||
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
padding: var(--Space-x15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name {
|
||||
height: 48px;
|
||||
max-width: 180px;
|
||||
margin-bottom: var(--Space-x05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: var(--Space-x1);
|
||||
}
|
||||
|
||||
.facilities {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 var(--Space-x1);
|
||||
}
|
||||
|
||||
.facilitiesItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.prices {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x1);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.priceCard {
|
||||
border-radius: var(--Corner-radius-md);
|
||||
padding: var(--Space-x05) var(--Space-x1);
|
||||
background: var(--Base-Surface-Secondary-light-Normal);
|
||||
margin-top: var(--Space-x1);
|
||||
}
|
||||
|
||||
.pricesContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x1);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.content .button {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.notEnoughPointsButton {
|
||||
border-radius: var(--Corner-radius-rounded);
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--Space-x05);
|
||||
|
||||
padding: 10px var(--Space-x2);
|
||||
background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
|
||||
border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
|
||||
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
|
||||
}
|
||||
Reference in New Issue
Block a user