diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
index ba0c19e47..3bc43fb66 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
@@ -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({
) : null}
{isDisabled ? (
-
-
-
- {notEnoughPointsLabel}
-
-
-
+
+
+ {notEnoughPointsLabel}
+
+
) : (
diff --git a/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx
index 1b67d6bfd..7c314a1d3 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx
@@ -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 (
-
+
+ {intl.formatMessage({
+ defaultMessage: "See rooms",
+ })}
+
+
+ ) : (
+
+
+ {notEnoughPointsLabel}
+
+
+ )}
) : (
diff --git a/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/listingHotelCardDialog.module.css b/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/listingHotelCardDialog.module.css
index 2c6acc251..c37bfa2ea 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/listingHotelCardDialog.module.css
+++ b/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/listingHotelCardDialog.module.css
@@ -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);
+}
diff --git a/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx
index 46b3db235..2ef8441fa 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx
@@ -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 (
@@ -224,33 +229,41 @@ export default function StandaloneHotelCardDialog({
)}
-
+
+ {intl.formatMessage({
+ defaultMessage: "See rooms",
+ })}
+
+
+ ) : (
+
+
+ {notEnoughPointsLabel}
+
+
+ )}
>
) : (
diff --git a/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/standaloneHotelCardDialog.module.css b/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/standaloneHotelCardDialog.module.css
index d5419bd13..1af47b3ea 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/standaloneHotelCardDialog.module.css
+++ b/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/standaloneHotelCardDialog.module.css
@@ -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);
+}
diff --git a/apps/scandic-web/components/HotelReservation/HotelCardDialogListing/utils.ts b/apps/scandic-web/components/HotelReservation/HotelCardDialogListing/utils.ts
index c97a605fc..5cb1e2768 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCardDialogListing/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/HotelCardDialogListing/utils.ts
@@ -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
+ ),
}
})
}
diff --git a/apps/scandic-web/types/components/hotelReservation/selectHotel/map.ts b/apps/scandic-web/types/components/hotelReservation/selectHotel/map.ts
index 469c10dd6..918ab3724 100644
--- a/apps/scandic-web/types/components/hotelReservation/selectHotel/map.ts
+++ b/apps/scandic-web/types/components/hotelReservation/selectHotel/map.ts
@@ -46,6 +46,7 @@ export type HotelPin = {
ratings: number | null
operaId: string
facilityIds: number[]
+ hasEnoughPoints: boolean
}
export interface HotelListingMapContentProps {