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/StandaloneHotelCardDialog/index.tsx
+++ b/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx
@@ -0,0 +1,132 @@
+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 Footnote from "@/components/TempDesignSystem/Text/Footnote"
+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 StandaloneHotelCardProps {
+  data: HotelPin
+  lang: Lang
+  imageError: boolean
+  setImageError: (error: boolean) => void
+}
+
+export default function StandaloneHotelCardDialog({
+  data,
+  lang,
+  imageError,
+  setImageError,
+}: StandaloneHotelCardProps) {
+  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 (
+    <>
+      <HotelCardDialogImage
+        firstImage={firstImage}
+        altText={altText}
+        ratings={ratings || 0}
+        imageError={imageError}
+        setImageError={setImageError}
+        position="left"
+      />
+      <div className={styles.content}>
+        <div className={styles.header}>
+          <div className={styles.detailsContainer}>
+            <div className={styles.name}>
+              <Body textTransform="bold">{name}</Body>
+            </div>
+          </div>
+        </div>
+        <div className={styles.facilities}>
+          {amenities.slice(0, 3).map((facility) => {
+            const IconComponent = mapFacilityToIcon(facility.id)
+            return (
+              <div className={styles.facilitiesItem} key={facility.id}>
+                {IconComponent && (
+                  <IconComponent width={16} height={16} color="grey80" />
+                )}
+                <Footnote color="uiTextMediumContrast">
+                  {facility.name}
+                </Footnote>
+              </div>
+            )
+          })}
+        </div>
+        <div className={styles.pricesContainer}>
+          {publicPrice || memberPrice ? (
+            <>
+              <div className={styles.priceCard}>
+                <Caption type="bold">
+                  {intl.formatMessage({ id: "From" })}
+                </Caption>
+                {publicPrice && (
+                  <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=${operaId}`}
+                  color="none"
+                  keepSearchParams
+                >
+                  {intl.formatMessage({ id: "See rooms" })}
+                </Link>
+              </Button>
+            </>
+          ) : (
+            <NoPriceAvailableCard />
+          )}
+        </div>
+      </div>
+    </>
+  )
+}