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

Merged in fix/SW-2739-map-reward-night-not-enough-points (pull request #2435)

Browse Source 
fix(SW-2739): remove tooltip and add correct CTA on map for reward nights

* fix(SW-2739): remove tooltip and add correct CTA on map for reward nights

* fix(SW-2739): fix pr comment


Approved-by: Arvid Norlin
This commit is contained in:
Bianca Widstam
2025-06-25 13:30:43 +00:00
parent 94fc5cabb3
commit 9e3d82b62c
7 changed files with 106 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
View File

@@ -22,7 +22,6 @@ import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -245,17 +244,11 @@ function HotelCard({
</div>
) : null}
{isDisabled ? (
<Tooltip
arrow="left"
position="bottom"
text={notEnoughPointsLabel}
>
<div className={cx(styles.fakeButton, styles.disabled)}>
<Typography variant="Body/Paragraph/mdBold">
<span>{notEnoughPointsLabel}</span>
</Typography>
</div>
</Tooltip>
<div className={cx(styles.fakeButton, styles.disabled)}>
<Typography variant="Body/Paragraph/mdBold">
<span>{notEnoughPointsLabel}</span>
</Typography>
</div>
) : (
<div className={styles.fakeButton}>
<Typography variant="Body/Paragraph/mdBold">

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

@@ -54,11 +54,15 @@ export default function ListingHotelCardDialog({
redemptionPrice,
chequePrice,
voucherPrice,
hasEnoughPoints,
} = data
const firstImage = images[0]?.imageSizes?.small
const altText = images[0]?.metaData?.altText
const notEnoughPointsLabel = intl.formatMessage({
defaultMessage: "Not enough points",
})
return (
<div className={styles.container}>
<IconButton
@@ -212,17 +216,30 @@ export default function ListingHotelCardDialog({
)}
</div>
</div>
<Button asChild theme="base" size="small" className={styles.button}>
<Link
href={`${selectRate(lang)}?hotel=${operaId}`}
color="none"
keepSearchParams
{hasEnoughPoints ? (
<Button
asChild
theme="base"
size="small"
className={styles.button}
>
{intl.formatMessage({
defaultMessage: "See rooms",
})}
</Link>
</Button>
<Link
href={`${selectRate(lang)}?hotel=${operaId}`}
color="none"
keepSearchParams
>
{intl.formatMessage({
defaultMessage: "See rooms",
})}
</Link>
</Button>
) : (
<div className={styles.notEnoughPointsButton}>
<Typography variant="Body/Paragraph/mdBold">
<span>{notEnoughPointsLabel}</span>
</Typography>
</div>
)}
</div>
) : (
<NoPriceAvailableCard />

15
apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/listingHotelCardDialog.module.css
View File

@@ -74,3 +74,18 @@
top: 8px;
right: 8px;
}
.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);
}

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

@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { selectRate } from "@/constants/routes/hotelReservation"
@@ -53,10 +54,14 @@ export default function StandaloneHotelCardDialog({
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",
})
return (
<div className={styles.container}>
@@ -224,33 +229,41 @@ export default function StandaloneHotelCardDialog({
<HotelPointsRow pointsPerStay={redemptionPrice} />
)}
</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
{hasEnoughPoints ? (
<Button
asChild
theme="base"
size="small"
className={styles.button}
onClick={() =>
trackEvent({
event: "hotelClickMap",
map: {
action: "hotel click - map",
},
hotelInfo: {
hotelId: operaId,
},
})
}
>
{intl.formatMessage({
defaultMessage: "See rooms",
})}
</Link>
</Button>
<Link
href={`${selectRate(lang)}?hotel=${operaId}`}
color="none"
keepSearchParams
>
{intl.formatMessage({
defaultMessage: "See rooms",
})}
</Link>
</Button>
) : (
<div className={styles.notEnoughPointsButton}>
<Typography variant="Body/Paragraph/mdBold">
<span>{notEnoughPointsLabel}</span>
</Typography>
</div>
)}
</>
) : (
<NoPriceAvailableCard />

15
apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/standaloneHotelCardDialog.module.css
View File

@@ -65,3 +65,18 @@
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);
}

3
apps/scandic-web/components/HotelReservation/HotelCardDialogListing/utils.ts
View File

@@ -51,6 +51,9 @@ export function getHotelPins(
ratings: hotel.ratings?.tripAdvisor.rating ?? null,
operaId: hotel.operaId,
facilityIds: hotel.detailedFacilities.map((facility) => facility.id),
hasEnoughPoints: !!availability.productType?.redemptions?.some(
(r) => r.hasEnoughPoints
),
}
})
}