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
+                <div className={cx(styles.fakeButton, styles.disabled)}>
-                  arrow="left"
+                  <Typography variant="Body/Paragraph/mdBold">
-                  position="bottom"
+                    <span>{notEnoughPointsLabel}</span>
-                  text={notEnoughPointsLabel}
+                  </Typography>
-                >
+                </div>
-                  <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,17 +216,30 @@ export default function ListingHotelCardDialog({
                 )}
               </div>
             </div>
-            <Button asChild theme="base" size="small" className={styles.button}>
+            {hasEnoughPoints ? (
-              <Link
+              <Button
-                href={`${selectRate(lang)}?hotel=${operaId}`}
+                asChild
-                color="none"
+                theme="base"
-                keepSearchParams
+                size="small"
+                className={styles.button}
               >
-                {intl.formatMessage({
+                <Link
-                  defaultMessage: "See rooms",
+                  href={`${selectRate(lang)}?hotel=${operaId}`}
-                })}
+                  color="none"
-              </Link>
+                  keepSearchParams
-            </Button>
+                >
+                  {intl.formatMessage({
+                    defaultMessage: "See rooms",
+                  })}
+                </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,33 +229,41 @@ export default function StandaloneHotelCardDialog({
                   <HotelPointsRow pointsPerStay={redemptionPrice} />
                 )}
               </div>
-              <Button
+              {hasEnoughPoints ? (
-                asChild
+                <Button
-                theme="base"
+                  asChild
-                size="small"
+                  theme="base"
-                className={styles.button}
+                  size="small"
-                onClick={() =>
+                  className={styles.button}
-                  trackEvent({
+                  onClick={() =>
-                    event: "hotelClickMap",
+                    trackEvent({
-                    map: {
+                      event: "hotelClickMap",
-                      action: "hotel click - map",
+                      map: {
-                    },
+                        action: "hotel click - map",
-                    hotelInfo: {
+                      },
-                      hotelId: operaId,
+                      hotelInfo: {
-                    },
+                        hotelId: operaId,
-                  })
+                      },
-                }
+                    })
-              >
+                  }
-                <Link
-                  href={`${selectRate(lang)}?hotel=${operaId}`}
-                  color="none"
-                  keepSearchParams
                 >
-                  {intl.formatMessage({
+                  <Link
-                    defaultMessage: "See rooms",
+                    href={`${selectRate(lang)}?hotel=${operaId}`}
-                  })}
+                    color="none"
-                </Link>
+                    keepSearchParams
-              </Button>
+                  >
+                    {intl.formatMessage({
+                      defaultMessage: "See rooms",
+                    })}
+                  </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 {