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

Merged in feat/BOOK-426-add-campaign-tag-select-hotel (pull request #3023)

Browse Source 
Feat/BOOK-426 add campaign tag select hotel

* feat(BOOK-426): introduce campaign tag on select hotel card

* feat(BOOK-426): remove redundant tags

* feat(BOOK-426): fix comments, change to typography

* feat(BOOK-426): fix comments, update to cx


Approved-by: Erik Tiekstra
Approved-by: Matilda Landström
This commit is contained in:
Bianca Widstam
2025-10-29 14:10:12 +00:00
parent 5e81ec0eaf
commit ed833e714b
5 changed files with 153 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx
View File

@@ -1,12 +1,9 @@
import { cx } from 'class-variance-authority'
import { useIntl } from 'react-intl'
import Body from '../../Body'
import Caption from '../../Caption'
import { Divider } from '../../Divider'
import Subtitle from '../../Subtitle'
import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
import { Typography } from '../../Typography'
import styles from './hotelPriceCard.module.css'
type Price = {
@@ -23,12 +20,14 @@ export type PriceCardProps = {
}
isMemberPrice?: boolean
className?: string
isCampaign?: boolean
}
export function HotelPriceCard({
productTypePrices,
isMemberPrice = false,
className,
isCampaign = false,
}: PriceCardProps) {
const intl = useIntl()
const isRegularOrPublicPromotionRate =
@@ -41,79 +40,111 @@ export function HotelPriceCard({
(isMemberPrice ? (
<div className={styles.priceRow}>
<dt>
<Caption color="red">
{intl.formatMessage({
id: 'booking.memberPrice',
defaultMessage: 'Member price',
})}
</Caption>
<Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.redColor}
>
<p>
{intl.formatMessage({
id: 'booking.memberPrice',
defaultMessage: 'Member price',
})}
</p>
</Typography>
</dt>
</div>
) : (
<div className={styles.priceRow}>
<dt>
<Caption color="uiTextHighContrast">
{intl.formatMessage({
id: 'booking.standardPrice',
defaultMessage: 'Standard price',
})}
</Caption>
<Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.defaultColor}
>
<p>
{intl.formatMessage({
id: 'booking.standardPrice',
defaultMessage: 'Standard price',
})}
</p>
</Typography>
</dt>
</div>
))}
<div className={styles.priceRow}>
<dt>
<Caption
type="bold"
color={isMemberPrice ? 'red' : 'uiTextHighContrast'}
<Typography
variant="Body/Supporting text (caption)/smBold"
className={isMemberPrice ? styles.redColor : styles.defaultColor}
>
{intl.formatMessage({
id: 'common.from',
defaultMessage: 'From',
})}
</Caption>
<p>
{intl.formatMessage({
id: 'common.from',
defaultMessage: 'From',
})}
</p>
</Typography>
</dt>
<dd>
<div className={styles.price}>
<Subtitle
type="two"
color={isMemberPrice ? 'red' : 'uiTextHighContrast'}
<Typography
variant="Title/Subtitle/md"
className={
isMemberPrice || isCampaign
? styles.redColor
: styles.defaultColor
}
>
{productTypePrices.localPrice.pricePerNight}
</Subtitle>
<Body
color={isMemberPrice ? 'red' : 'uiTextHighContrast'}
textTransform="bold"
<p> {productTypePrices.localPrice.pricePerNight}</p>
</Typography>
<Typography
variant="Body/Paragraph/mdBold"
className={
isMemberPrice || isCampaign
? styles.redColor
: styles.defaultColor
}
>
{productTypePrices.localPrice.currency}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span className={styles.perNight}>
/
{intl.formatMessage({
id: 'common.night',
defaultMessage: 'night',
})}
</span>
</Body>
<p>
{productTypePrices.localPrice.currency}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span className={styles.perNight}>
/
{intl.formatMessage({
id: 'common.night',
defaultMessage: 'night',
})}
</span>
</p>
</Typography>
</div>
</dd>
</div>
{productTypePrices?.requestedPrice && (
<div className={styles.priceRow}>
<dt>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({
id: 'booking.approx',
defaultMessage: 'Approx.',
})}
</Caption>
<Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.secondaryColor}
>
<p>
{intl.formatMessage({
id: 'booking.approx',
defaultMessage: 'Approx.',
})}
</p>
</Typography>
</dt>
<dd>
<Caption color={'uiTextMediumContrast'}>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${productTypePrices.requestedPrice.pricePerNight} `}
{productTypePrices.requestedPrice.currency}
</Caption>
<Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.secondaryColor}
>
<p>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${productTypePrices.requestedPrice.pricePerNight} `}
{productTypePrices.requestedPrice.currency}
</p>
</Typography>
</dd>
</div>
)}
@@ -125,19 +156,29 @@ export function HotelPriceCard({
<Divider className={styles.divider} />
<div className={styles.priceRow}>
<dt>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({
id: 'common.total',
defaultMessage: 'Total',
})}
</Caption>
<Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.secondaryColor}
>
<p>
{intl.formatMessage({
id: 'common.total',
defaultMessage: 'Total',
})}
</p>
</Typography>
</dt>
<dd>
<Caption color={'uiTextMediumContrast'}>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${productTypePrices.localPrice.pricePerStay} `}
{productTypePrices.localPrice.currency}
</Caption>
<Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.secondaryColor}
>
<p>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${productTypePrices.localPrice.pricePerStay} `}
{productTypePrices.localPrice.currency}
</p>
</Typography>
</dd>
</div>
</>