feat/SW-843-UI-hotel-card-select-hotel (pull request #887)

Approved-by: Pontus Dreij
Approved-by: Niclas Edenvin

components/HotelReservation/HotelCard/index.tsx

@@ -6,17 +6,18 @@ import { Lang } from "@/constants/languages"
 import { selectHotelMap } from "@/constants/routes/hotelReservation"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons"
-import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
 import ImageGallery from "@/components/ImageGallery"
 import Button from "@/components/TempDesignSystem/Button"
-import Chip from "@/components/TempDesignSystem/Chip"
+import Divider from "@/components/TempDesignSystem/Divider"
 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 Title from "@/components/TempDesignSystem/Text/Title"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import ReadMore from "../ReadMore"
+import TripAdvisorChip from "../TripAdvisorChip"
+import HotelLogo from "./HotelLogo"
+import HotelPriceList from "./HotelPriceList"
 import { hotelCardVariants } from "./variants"
 
 import styles from "./hotelCard.module.css"
@@ -61,100 +62,97 @@ export default function HotelCard({
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <section className={styles.imageContainer}>
-        <ImageGallery
-          title={hotelData.name}
-          images={hotelData.galleryImages}
-          fill
-        />
-        <div className={styles.tripAdvisor}>
-          <Chip intent="primary" className={styles.tripAdvisor}>
-            <TripAdvisorIcon color="white" />
-            {hotelData.ratings?.tripAdvisor.rating}
-          </Chip>
+      <div>
+        <div className={styles.imageContainer}>
+          <ImageGallery
+            title={hotelData.name}
+            images={hotelData.galleryImages}
+            fill
+          />
+          {hotelData.ratings?.tripAdvisor && (
+            <TripAdvisorChip rating={hotelData.ratings.tripAdvisor.rating} />
+          )}
         </div>
-      </section>
-      <section className={styles.hotelInformation}>
-        <ScandicLogoIcon color="red" />
-        <Title as="h4" textTransform="capitalize">
-          {hotelData.name}
-        </Title>
-        <Footnote color="uiTextMediumContrast" className={styles.address}>
-          {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
-        </Footnote>
-        <Link
-          className={styles.addressMobile}
-          href={`${selectHotelMap[lang]}?selectedHotel=${hotelData.name}`}
-          keepSearchParams
-          variant="underscored"
-        >
-          <Footnote color="burgundy">
-            {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
-          </Footnote>
-        </Link>
-        <Footnote color="uiTextMediumContrast">
-          {`${hotelData.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
-        </Footnote>
-      </section>
-      <section className={styles.hotel}>
-        <div className={styles.facilities}>
-          {amenities.map((facility) => {
-            const IconComponent = mapFacilityToIcon(facility.id)
-            return (
-              <div className={styles.facilitiesItem} key={facility.id}>
-                {IconComponent && <IconComponent color="grey80" />}
-                <Caption color="textMediumContrast">{facility.name}</Caption>
+      </div>
+      <div className={styles.hotelContent}>
+        <section className={styles.hotelInformation}>
+          <div className={styles.titleContainer}>
+            <HotelLogo
+              hotelId={hotel.hotelData.operaId}
+              hotelType={hotel.hotelData.hotelType}
+            />
+            <Subtitle textTransform="capitalize" color="uiTextHighContrast">
+              {hotelData.name}
+            </Subtitle>
+            <div className={styles.addressContainer}>
+              <address className={styles.address}>
+                <Caption color="uiTextPlaceholder">
+                  {hotelData.address.streetAddress}, {hotelData.address.city}
+                </Caption>
+              </address>
+              <Link
+                className={styles.addressMobile}
+                href={`${selectHotelMap[lang]}?selectedHotel=${hotelData.name}`}
+                keepSearchParams
+              >
+                <Caption color="baseTextMediumContrast" type="underline">
+                  {hotelData.address.streetAddress}, {hotelData.address.city}
+                </Caption>
+              </Link>
+              <div>
+                <Divider variant="vertical" color="subtle" />
               </div>
-            )
-          })}
-        </div>
-        <ReadMore
-          label={intl.formatMessage({ id: "See hotel details" })}
-          hotelId={hotelData.operaId}
-          hotel={hotelData}
-          showCTA={true}
-        />
-      </section>
-      <section className={styles.prices}>
-        <div>
-          <Chip intent="primary" className={styles.public}>
-            <PriceTagIcon color="white" width={15} height={15} />
-            {intl.formatMessage({ id: "Public price from" })}
-          </Chip>
-          <Caption color="textMediumContrast">
-            {price?.regularAmount} {price?.currency} /
-            {intl.formatMessage({ id: "night" })}
-          </Caption>
-          <Footnote color="uiTextMediumContrast">approx 280 eur</Footnote>
-        </div>
-        <div>
-          <Chip intent="primary" className={styles.member}>
-            <PriceTagIcon color="white" width={15} height={15} />
-            {intl.formatMessage({ id: "Member price from" })}
-          </Chip>
-          <Caption color="textMediumContrast">
-            {price?.memberAmount} {price?.currency} /
-            {intl.formatMessage({ id: "night" })}
-          </Caption>
-          <Footnote color="uiTextMediumContrast">approx 280 eur</Footnote>
-        </div>
-        <Button
-          asChild
-          theme="base"
-          intent="tertiary"
-          size="small"
-          className={styles.button}
-        >
-          {/* TODO: Localize link and also use correct search params */}
-          <Link
-            href={`/en/hotelreservation/select-rate?hotel=${hotelData.operaId}`}
-            color="none"
-            keepSearchParams
+              <Caption color="uiTextPlaceholder">
+                {intl.formatMessage(
+                  { id: "Distance to city centre" },
+                  { number: hotelData.location.distanceToCentre }
+                )}
+              </Caption>
+            </div>
+          </div>
+          <Body className={styles.hotelDescription}>
+            {hotelData.hotelContent.texts.descriptions.short}
+          </Body>
+          <div className={styles.facilities}>
+            {amenities.map((facility) => {
+              const IconComponent = mapFacilityToIcon(facility.id)
+              return (
+                <div className={styles.facilitiesItem} key={facility.id}>
+                  {IconComponent && <IconComponent color="grey80" />}
+                  <Caption color="uiTextMediumContrast">
+                    {facility.name}
+                  </Caption>
+                </div>
+              )
+            })}
+          </div>
+          <ReadMore
+            label={intl.formatMessage({ id: "About the hotel" })}
+            hotelId={hotelData.operaId}
+            hotel={hotelData}
+            showCTA={true}
+          />
+        </section>
+        <div className={styles.prices}>
+          <HotelPriceList price={price} />
+          <Button
+            asChild
+            theme="base"
+            intent="primary"
+            size="small"
+            className={styles.button}
           >
-            {intl.formatMessage({ id: "See rooms" })}
-          </Link>
-        </Button>
-      </section>
+            {/* TODO: Localize link and also use correct search params */}
+            <Link
+              href={`/en/hotelreservation/select-rate?hotel=${hotelData.operaId}`}
+              color="none"
+              keepSearchParams
+            >
+              {intl.formatMessage({ id: "See rooms" })}
+            </Link>
+          </Button>
+        </div>
+      </div>
     </article>
   )
 }