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

32
packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css Normal file
View File

@@ -0,0 +1,32 @@
.priceCard {
padding: var(--Spacing-x-one-and-half);
background-color: var(--Base-Surface-Secondary-light-Normal);
border-radius: var(--Corner-radius-md);
margin: 0;
width: 100%;
}
.divider {
margin: var(--Spacing-x-half) 0;
}
.priceRow {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--Spacing-x-quarter) 0;
}
.price {
display: flex;
gap: var(--Spacing-x-half);
}
.voucherChqRate {
justify-content: start;
align-items: baseline;
}
.perNight {
font-weight: 400;
font-size: var(--typography-Caption-Regular-fontSize);
}

141
packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx Normal file
View File

@@ -0,0 +1,141 @@
import { cx } from 'class-variance-authority'
import { useIntl } from 'react-intl'
import Body from '@scandic-hotels/design-system/Body'
import Caption from '@scandic-hotels/design-system/Caption'
import { Divider } from '@scandic-hotels/design-system/Divider'
import Subtitle from '@scandic-hotels/design-system/Subtitle'
import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
import styles from './hotelPriceCard.module.css'
type Price = {
pricePerStay: number
pricePerNight: number
currency: string
}
export type PriceCardProps = {
productTypePrices: {
rateType: RateTypeEnum
localPrice: Price
requestedPrice?: Price
}
isMemberPrice?: boolean
className?: string
}
export function HotelPriceCard({
productTypePrices,
isMemberPrice = false,
className,
}: PriceCardProps) {
const intl = useIntl()
const isRegularOrPublicPromotionRate =
productTypePrices.rateType === RateTypeEnum.Regular ||
productTypePrices.rateType === RateTypeEnum.PublicPromotion
return (
<dl className={cx(styles.priceCard, className)}>
{isRegularOrPublicPromotionRate &&
(isMemberPrice ? (
<div className={styles.priceRow}>
<dt>
<Caption color="red">
{intl.formatMessage({
defaultMessage: 'Member price',
})}
</Caption>
</dt>
</div>
) : (
<div className={styles.priceRow}>
<dt>
<Caption color="uiTextHighContrast">
{intl.formatMessage({
defaultMessage: 'Standard price',
})}
</Caption>
</dt>
</div>
))}
<div className={styles.priceRow}>
<dt>
<Caption
type="bold"
color={isMemberPrice ? 'red' : 'uiTextHighContrast'}
>
{intl.formatMessage({
defaultMessage: 'From',
})}
</Caption>
</dt>
<dd>
<div className={styles.price}>
<Subtitle
type="two"
color={isMemberPrice ? 'red' : 'uiTextHighContrast'}
>
{productTypePrices.localPrice.pricePerNight}
</Subtitle>
<Body
color={isMemberPrice ? 'red' : 'uiTextHighContrast'}
textTransform="bold"
>
{productTypePrices.localPrice.currency}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span className={styles.perNight}>
/
{intl.formatMessage({
defaultMessage: 'night',
})}
</span>
</Body>
</div>
</dd>
</div>
{productTypePrices?.requestedPrice && (
<div className={styles.priceRow}>
<dt>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({
defaultMessage: 'Approx.',
})}
</Caption>
</dt>
<dd>
<Caption color={'uiTextMediumContrast'}>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${productTypePrices.requestedPrice.pricePerNight} `}
{productTypePrices.requestedPrice.currency}
</Caption>
</dd>
</div>
)}
{productTypePrices.localPrice.pricePerStay !==
productTypePrices.localPrice.pricePerNight &&
// Handle undefined scenarios
productTypePrices.localPrice.pricePerNight && (
<>
<Divider className={styles.divider} />
<div className={styles.priceRow}>
<dt>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({
defaultMessage: 'Total',
})}
</Caption>
</dt>
<dd>
<Caption color={'uiTextMediumContrast'}>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${productTypePrices.localPrice.pricePerStay} `}
{productTypePrices.localPrice.currency}
</Caption>
</dd>
</div>
</>
)}
</dl>
)
}