From 9e3d82b62c6faeb2beea456dd227e195b9ec5b3f Mon Sep 17 00:00:00 2001
From: Bianca Widstam <bianca.widstam@scandichotels.com>
Date: Wed, 25 Jun 2025 13:30:43 +0000
Subject: [PATCH] Merged in fix/SW-2739-map-reward-night-not-enough-points
 (pull request #2435)

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
---
 .../HotelReservation/HotelCard/index.tsx      | 17 ++---
 .../ListingHotelCardDialog/index.tsx          | 39 +++++++----
 .../listingHotelCardDialog.module.css         | 15 +++++
 .../StandaloneHotelCardDialog/index.tsx       | 65 +++++++++++--------
 .../standaloneHotelCardDialog.module.css      | 15 +++++
 .../HotelCardDialogListing/utils.ts           |  3 +
 .../hotelReservation/selectHotel/map.ts       |  1 +
 7 files changed, 106 insertions(+), 49 deletions(-)

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({
                 </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">
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 (
     <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 />
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 (
     <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 />
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 {