fix(SW-952): New HotelCard for Map in mobile

2024-12-17 14:03:25 +01:00
parent c468669776
commit 71b11f33ac
12 changed files with 465 additions and 159 deletions
--- a/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx
+++ b/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx
@@ -0,0 +1,116 @@
+import { useIntl } from "react-intl"
+
+import { selectRate } from "@/constants/routes/hotelReservation"
+
+import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+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/NoPriceAvailableCard"
+import HotelCardDialogImage from "../HotelCardDialogImage"
+
+import styles from "../hotelCardDialog.module.css"
+
+import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
+import type { Lang } from "@/constants/languages"
+
+interface ListingHotelCardProps {
+  data: HotelPin
+  lang: Lang
+  imageError: boolean
+  setImageError: (error: boolean) => void
+}
+
+export default function ListingHotelCardDialog({
+  data,
+  lang,
+  imageError,
+  setImageError,
+}: ListingHotelCardProps) {
+  const intl = useIntl()
+  const {
+    name,
+    publicPrice,
+    memberPrice,
+    currency,
+    amenities,
+    images,
+    ratings,
+    operaId,
+  } = data
+
+  const firstImage = images[0]?.imageSizes?.small
+  const altText = images[0]?.metaData?.altText
+
+  return (
+    <div className={styles.content}>
+      <div className={styles.header}>
+        <HotelCardDialogImage
+          firstImage={firstImage}
+          altText={altText}
+          ratings={ratings || 0}
+          imageError={imageError}
+          setImageError={setImageError}
+          position="top"
+        />
+        <div className={styles.detailsContainer}>
+          <div className={styles.name}>
+            <Subtitle type="two">{name}</Subtitle>
+          </div>
+          <div className={styles.facilities}>
+            {amenities.map((facility) => {
+              const IconComponent = mapFacilityToIcon(facility.id)
+              return (
+                <div className={styles.facilitiesItem} key={facility.id}>
+                  {IconComponent && (
+                    <IconComponent width={20} height={20} color="grey80" />
+                  )}
+                  <Caption color="uiTextMediumContrast">
+                    {facility.name}
+                  </Caption>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+
+      {publicPrice || memberPrice ? (
+        <div className={styles.bottomContainer}>
+          <div className={styles.pricesContainer}>
+            <Caption color="uiTextHighContrast">
+              {intl.formatMessage({ id: "Per night from" })}
+            </Caption>
+            <div className={styles.listingPrices}>
+              {publicPrice && (
+                <Subtitle type="two">
+                  {publicPrice} {currency}
+                </Subtitle>
+              )}
+              {publicPrice && memberPrice && <Caption>/</Caption>}
+              {memberPrice && (
+                <Subtitle type="two" color="red" className={styles.memberPrice}>
+                  {memberPrice} {currency}
+                </Subtitle>
+              )}
+            </div>
+          </div>
+          <Button asChild theme="base" size="small" className={styles.button}>
+            <Link
+              href={`${selectRate(lang)}?hotel=${operaId}`}
+              color="none"
+              keepSearchParams
+            >
+              {intl.formatMessage({ id: "See rooms" })}
+            </Link>
+          </Button>
+        </div>
+      ) : (
+        <NoPriceAvailableCard />
+      )}
+    </div>
+  )
+}