feat/SW-451-ui-hotel-card (pull request #700)

Feat/SW-451 ui hotel card * feat(SW-451): initial design * feat(SW-451): add gallery icon and responsive design for mobile * feat(SW-451): refactor name, add routing to sidepeek * feat(SW-451): add updated design * feat(SW-451): add tripadvisor chip * feat(SW-451): fix gallery icon * feat(SW-451): fix additional falsy value check * feat(SW-451): fix import type * feat(SW-451): remove galleryIcon until image data exists * feat(SW-451): fix css styling * feat(SW-451): add new design for mobile * feat(SW-451): add translation * feat(SW-451): change css to mobile first * feat(SW-451): change div to article Approved-by: Matilda Landström
2024-10-22 06:18:40 +00:00
parent b5cb8fe080
commit ea3b86c33e
7 changed files with 231 additions and 7 deletions
--- a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
+++ b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
@@ -0,0 +1,97 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
+import Image from "@/components/Image"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import ReadMore from "../../ReadMore"
+
+import styles from "./hotelInfoCard.module.css"
+
+import type { HotelInfoCardProps } from "@/types/components/hotelReservation/selectRate/hotelInfoCardProps"
+
+export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
+  const hotelAttributes = hotelData?.data.attributes
+  const intl = useIntl()
+
+  const sortedFacilities = hotelAttributes?.detailedFacilities
+    .sort((a, b) => b.sortOrder - a.sortOrder)
+    .slice(0, 5)
+
+  return (
+    <article className={styles.container}>
+      {hotelAttributes && (
+        <section className={styles.wrapper}>
+          <div className={styles.imageWrapper}>
+            <Image
+              src={hotelAttributes.hotelContent.images.imageSizes.medium}
+              alt={hotelAttributes.hotelContent.images.metaData.altText}
+              className={styles.image}
+              fill
+            />
+            {hotelAttributes.ratings?.tripAdvisor && (
+              <div className={styles.tripAdvisor}>
+                <TripAdvisorIcon color="burgundy" />
+                <Caption color="burgundy">
+                  {hotelAttributes.ratings.tripAdvisor.rating}
+                </Caption>
+              </div>
+            )}
+            {/* TODO: gallery icon and image carousel */}
+          </div>
+          <div className={styles.hotelContent}>
+            <div className={styles.hotelInformation}>
+              <Title
+                level="h3"
+                textTransform="uppercase"
+                className={styles.title}
+              >
+                {hotelAttributes.name}
+              </Title>
+              <Caption color="uiTextMediumContrast">
+                {`${hotelAttributes.address.streetAddress}, ${hotelAttributes.address.city} ∙ ${hotelAttributes.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
+              </Caption>
+              <Body color="uiTextHighContrast" className={styles.body}>
+                {hotelAttributes.hotelContent.texts.descriptions.medium}
+              </Body>
+            </div>
+            <Divider color="subtle" variant="vertical" />
+            <div className={styles.facilities}>
+              <div className={styles.facilityList}>
+                <Body textTransform="bold" className={styles.facilityTitle}>
+                  {intl.formatMessage({ id: "At the hotel" })}
+                </Body>
+                {sortedFacilities?.map((facility) => {
+                  const IconComponent = mapFacilityToIcon(facility.name)
+                  return (
+                    <div className={styles.facilitiesItem} key={facility.id}>
+                      {IconComponent && (
+                        <IconComponent
+                          className={styles.facilitiesIcon}
+                          color="grey80"
+                        />
+                      )}
+                      <Caption className={styles.facilityName}>
+                        {facility.name}
+                      </Caption>
+                    </div>
+                  )
+                })}
+              </div>
+              <ReadMore
+                label={intl.formatMessage({ id: "Show all amenities" })}
+                hotelId={hotelAttributes.operaId}
+                hotel={hotelAttributes}
+              />
+            </div>
+          </div>
+        </section>
+      )}
+    </article>
+  )
+}