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

Merged in SW-3270-move-interactive-map-to-design-system-or-booking-flow (pull request #2681)

Browse Source 
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
2025-08-25 11:26:16 +00:00
parent 4f8c51298f
commit c54c1ec540
139 changed files with 2511 additions and 1557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/StandaloneHotelCardDialog.stories.tsx Normal file
View File

@@ -0,0 +1,43 @@
import type { Meta, StoryObj } from '@storybook/react-vite'
import { StandaloneHotelCardDialog } from './index'
import { fn } from 'storybook/test'
const meta: Meta<typeof StandaloneHotelCardDialog> = {
title: 'Components/StandaloneHotelCardDialog',
component: StandaloneHotelCardDialog,
argTypes: {},
}
export default meta
type Story = StoryObj<typeof StandaloneHotelCardDialog>
export const Default: Story = {
args: {
data: {
name: 'Hotel Name',
image: {
url: 'img/img2.jpg',
alt: 'Alt text',
},
coordinates: {
lat: 0,
lng: 0,
},
chequePrice: null,
publicPrice: 100,
memberPrice: 200,
redemptionPrice: null,
voucherPrice: null,
rateType: null,
currency: 'SEK',
amenities: [],
ratings: { tripAdvisor: 5 },
operaId: '123',
facilityIds: [],
hasEnoughPoints: false,
},
handleClose: fn(),
},
}

263
packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx Normal file
View File

@@ -0,0 +1,263 @@
'use client'
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 { NoPriceAvailableCard } from '../../NoPriceAvailableCard'
import { HotelCardDialogImage } from '../../HotelCardDialogImage'
import styles from './standaloneHotelCardDialog.module.css'
import { Lang } from '@scandic-hotels/common/constants/language'
import { HotelPin } from '../../../Map/types'
import { FacilityToIcon } from '@scandic-hotels/design-system/FacilityToIcon'
import { HotelPointsRow } from '../../HotelPointsRow'
interface StandaloneHotelCardProps {
data: HotelPin
lang: Lang
isUserLoggedIn: boolean
handleClose: () => void
onClick?: () => void
}
export function StandaloneHotelCardDialog({
data,
lang,
handleClose,
isUserLoggedIn,
onClick,
}: StandaloneHotelCardProps) {
const intl = useIntl()
const [imageError, setImageError] = useState(false)
const {
name,
chequePrice,
publicPrice,
memberPrice,
redemptionPrice,
voucherPrice,
currency,
amenities,
image,
ratings,
operaId,
hasEnoughPoints,
} = data
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={image?.url}
altText={image?.alt}
rating={{ tripAdvisor: ratings?.tripAdvisor ?? null }}
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}
<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={onClick}
>
<Link
href={`${selectRate(lang)}?hotel=${operaId}`}
color="none"
keepSearchParams
>
{intl.formatMessage({
defaultMessage: 'See rooms',
})}
</Link>
</Button>
)}
</>
) : (
<NoPriceAvailableCard />
)}
</div>
</div>
</div>
)
}

82
packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/standaloneHotelCardDialog.module.css Normal file
View File

@@ -0,0 +1,82 @@
.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);
}