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

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={styles.fakeButton}>
                   <Typography variant="Body/Paragraph/mdBold">

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,7 +216,13 @@ export default function ListingHotelCardDialog({
                 )}
               </div>
             </div>
-            <Button asChild theme="base" size="small" className={styles.button}>
+            {hasEnoughPoints ? (
+              <Button
+                asChild
+                theme="base"
+                size="small"
+                className={styles.button}
+              >
                 <Link
                   href={`${selectRate(lang)}?hotel=${operaId}`}
                   color="none"
@@ -223,6 +233,13 @@ export default function ListingHotelCardDialog({
                   })}
                 </Link>
               </Button>
+            ) : (
+              <div className={styles.notEnoughPointsButton}>
+                <Typography variant="Body/Paragraph/mdBold">
+                  <span>{notEnoughPointsLabel}</span>
+                </Typography>
+              </div>
+            )}
           </div>
         ) : (
           <NoPriceAvailableCard />

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);
+}

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,6 +229,7 @@ export default function StandaloneHotelCardDialog({
                   <HotelPointsRow pointsPerStay={redemptionPrice} />
                 )}
               </div>
+              {hasEnoughPoints ? (
                 <Button
                   asChild
                   theme="base"
@@ -251,6 +257,13 @@ export default function StandaloneHotelCardDialog({
                     })}
                   </Link>
                 </Button>
+              ) : (
+                <div className={styles.notEnoughPointsButton}>
+                  <Typography variant="Body/Paragraph/mdBold">
+                    <span>{notEnoughPointsLabel}</span>
+                  </Typography>
+                </div>
+              )}
             </>
           ) : (
             <NoPriceAvailableCard />

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);
+}

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
+      ),
     }
   })
 }

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 {