Merged in fix/SW-948-map-no-availability (pull request #961)

Fix/SW-948 map no availability * fix(SW-948): add no availability message on hotel map * fix(SW-948): add placeholder image for map Approved-by: Niclas Edenvin
2024-11-22 11:13:30 +00:00
parent 04fd4b163f
commit c345600d78
8 changed files with 107 additions and 48 deletions
--- a/components/HotelReservation/HotelCard/HotelPriceList/NoPriceAvailableCard/index.tsx
+++ b/components/HotelReservation/HotelCard/HotelPriceList/NoPriceAvailableCard/index.tsx
@@ -0,0 +1,24 @@
+import { useIntl } from "react-intl"
+
+import { ErrorCircleIcon } from "@/components/Icons"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "../hotelPriceList.module.css"
+
+export default function NoPriceAvailableCard() {
+  const intl = useIntl()
+  return (
+    <div className={styles.priceCard}>
+      <div className={styles.noRooms}>
+        <div>
+          <ErrorCircleIcon color="red" />
+        </div>
+        <Body>
+          {intl.formatMessage({
+            id: "There are no rooms available that match your request.",
+          })}
+        </Body>
+      </div>
+    </div>
+  )
+}
--- a/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css
+++ b/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css
@@ -40,6 +40,6 @@

@media screen and (min-width: 1367px) {
  .prices {
-    max-width: 260px;
+    width: 260px;
  }
 }
--- a/components/HotelReservation/HotelCard/HotelPriceList/index.tsx
+++ b/components/HotelReservation/HotelCard/HotelPriceList/index.tsx
@@ -10,6 +10,7 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"

 import HotelPriceCard from "./HotelPriceCard"
+import NoPriceAvailableCard from "./NoPriceAvailableCard"

 import styles from "./hotelPriceList.module.css"

@@ -48,18 +49,7 @@ export default function HotelPriceList({
          </Button>
        </>
      ) : (
-        <div className={styles.priceCard}>
-          <div className={styles.noRooms}>
-            <div>
-              <ErrorCircleIcon color="red" />
-            </div>
-            <Body>
-              {intl.formatMessage({
-                id: "There are no rooms available that match your request.",
-              })}
-            </Body>
-          </div>
-        </div>
+        <NoPriceAvailableCard />
      )}
    </div>
  )
--- a/components/HotelReservation/HotelCard/hotelCard.module.css
+++ b/components/HotelReservation/HotelCard/hotelCard.module.css
@@ -122,11 +122,6 @@
    margin-bottom: var(--Spacing-x-one-and-half);
  }

-  .pageListing .prices {
-    align-items: center;
-    width: 260px;
-  }
-
  .pageListing .button {
    width: 100%;
  }
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -3,11 +3,10 @@ import { useParams } from "next/dist/client/components/navigation"
 import { useIntl } from "react-intl"

 import { Lang } from "@/constants/languages"
-import { selectHotelMap, selectRate } from "@/constants/routes/hotelReservation"
+import { selectHotelMap } from "@/constants/routes/hotelReservation"

 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
-import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
--- a/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
+++ b/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
@@ -48,7 +48,7 @@

 .content {
  width: 100%;
-  min-width: 201px;
+  min-width: 220px;
  padding: var(--Spacing-x-one-and-half);
  gap: var(--Spacing-x1);
  display: flex;
@@ -67,12 +67,32 @@
  gap: var(--Spacing-x-half);
 }

-.prices {
+.priceCard {
  border-radius: var(--Corner-radius-Medium);
  padding: var(--Spacing-x-half) var(--Spacing-x1);
  background: var(--Base-Surface-Secondary-light-Normal);
+}
+
+.prices {
  display: flex;
  flex-direction: column;
+  gap: var(--Spacing-x1);
+}
+
+.imagePlaceholder {
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+  background-image: linear-gradient(45deg, #000000 25%, transparent 25%),
+    linear-gradient(-45deg, #000000 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #000000 75%),
+    linear-gradient(-45deg, transparent 75%, #000000 75%);
+  background-size: 120px 120px;
+  background-position:
+    0 0,
+    0 60px,
+    60px -60px,
+    -60px 0;
 }

 .perNight {
--- a/components/HotelReservation/HotelCardDialog/index.tsx
+++ b/components/HotelReservation/HotelCardDialog/index.tsx
@@ -1,6 +1,7 @@
 "use client"

 import { useParams } from "next/navigation"
+import { useState } from "react"
 import { useIntl } from "react-intl"

 import { Lang } from "@/constants/languages"
@@ -16,6 +17,8 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

+import NoPriceAvailableCard from "../HotelCard/HotelPriceList/NoPriceAvailableCard"
+
 import styles from "./hotelCardDialog.module.css"

 import type { HotelCardDialogProps } from "@/types/components/hotelReservation/selectHotel/map"
@@ -28,6 +31,7 @@ export default function HotelCardDialog({
  const params = useParams()
  const lang = params.lang as Lang
  const intl = useIntl()
+  const [imageError, setImageError] = useState(false)

  if (!data) {
    return null
@@ -56,7 +60,16 @@ export default function HotelCardDialog({
          height={16}
        />
        <div className={styles.imageContainer}>
-          <Image src={firstImage} alt={altText} fill />
+          {!firstImage || imageError ? (
+            <div className={styles.imagePlaceholder} />
+          ) : (
+            <Image
+              src={firstImage}
+              alt={altText}
+              fill
+              onError={() => setImageError(true)}
+            />
+          )}
          <div className={styles.tripAdvisor}>
            <Chip intent="secondary" className={styles.tripAdvisor}>
              <TripAdvisorIcon color="burgundy" />
@@ -84,32 +97,50 @@ export default function HotelCardDialog({
            })}
          </div>
          <div className={styles.prices}>
-            <Caption type="bold">{intl.formatMessage({ id: "From" })}</Caption>
-            <Subtitle type="two">
-              {publicPrice} {currency}
-              <Body asChild>
-                <span>/{intl.formatMessage({ id: "night" })}</span>
-              </Body>
-            </Subtitle>
-            {memberPrice && (
-              <Subtitle type="two" color="red" className={styles.memberPrice}>
-                {memberPrice} {currency}
-                <Body asChild color="red">
-                  <span>/{intl.formatMessage({ id: "night" })}</span>
-                </Body>
-              </Subtitle>
+            {publicPrice || memberPrice ? (
+              <>
+                <div className={styles.priceCard}>
+                  <Caption type="bold">
+                    {intl.formatMessage({ id: "From" })}
+                  </Caption>
+                  <Subtitle type="two">
+                    {publicPrice} {currency}
+                    <Body asChild>
+                      <span>/{intl.formatMessage({ id: "night" })}</span>
+                    </Body>
+                  </Subtitle>
+                  {memberPrice && (
+                    <Subtitle
+                      type="two"
+                      color="red"
+                      className={styles.memberPrice}
+                    >
+                      {memberPrice} {currency}
+                      <Body asChild color="red">
+                        <span>/{intl.formatMessage({ id: "night" })}</span>
+                      </Body>
+                    </Subtitle>
+                  )}
+                </div>
+                <Button
+                  asChild
+                  theme="base"
+                  size="small"
+                  className={styles.button}
+                >
+                  <Link
+                    href={`${selectRate(lang)}?hotel=${data.operaId}`}
+                    color="none"
+                    keepSearchParams
+                  >
+                    {intl.formatMessage({ id: "See rooms" })}
+                  </Link>
+                </Button>
+              </>
+            ) : (
+              <NoPriceAvailableCard />
            )}
          </div>
-
-          <Button asChild theme="base" size="small" className={styles.button}>
-            <Link
-              href={`${selectRate(lang)}?hotel=${data.operaId}`}
-              color="none"
-              keepSearchParams
-            >
-              {intl.formatMessage({ id: "See rooms" })}
-            </Link>
-          </Button>
        </div>
      </div>
    </dialog>
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
@@ -11,7 +11,7 @@
  left: 0;
  right: 0;
  z-index: 10;
-  height: 280px;
+  height: 100%;
  gap: var(--Spacing-x1);
 }