Merged in feat/LOY-428-previous-stay-redesign (pull request #3142)

Feat(LOY-428): Previous Stays Redesign * feat(LOY-428): Previous stays WIP * fix(LOY-428): fix alignment issue * fix(LOY-428): css fixes & imagefallback prop value * fix(LOY-428): use css vars * fix(LOY-428): add unit test for relative time text * chore(LOY-428): remove else if conditions * fix(LOY-428): named exports & remove duplicate width/height setting * fix(LOY-428): better formatting of upcoming stays months text * fix(LOY-428): fewer typography wrappers Approved-by: Matilda Landström
2025-11-19 12:08:34 +00:00
parent db30588f63
commit ac5fdc64a9
10 changed files with 591 additions and 12 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Card/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Card/index.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import Link from "next/link"
+import { useIntl } from "react-intl"
+
+import { dt } from "@scandic-hotels/common/dt"
+import { Divider } from "@scandic-hotels/design-system/Divider"
+import Image from "@scandic-hotels/design-system/Image"
+import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import useLang from "@/hooks/useLang"
+import { getRelativePastTime } from "@/utils/getRelativePastTime"
+
+import styles from "./card.module.css"
+
+import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
+
+export function Card({ stay }: StayCardProps) {
+  const { bookingUrl, isWebAppOrigin: shouldLinkToMyStay } = stay.attributes
+
+  if (!shouldLinkToMyStay) {
+    return <CardContent stay={stay} />
+  }
+
+  return (
+    <Link href={bookingUrl} className={styles.link}>
+      <CardContent stay={stay} />
+    </Link>
+  )
+}
+
+function CardContent({ stay }: StayCardProps) {
+  const lang = useLang()
+  const intl = useIntl()
+
+  const { checkinDate, checkoutDate, hotelInformation } = stay.attributes
+
+  const arrival = dt(checkinDate).locale(lang)
+  const arrivalDate = arrival.format("DD MMM")
+  const arrivalDateTime = arrival.format("YYYY-MM-DD")
+  const depart = dt(checkoutDate).locale(lang)
+  const departDate = depart.format("DD MMM YYYY")
+  const departDateTime = depart.format("YYYY-MM-DD")
+
+  const relativeTime = getRelativePastTime(checkoutDate, intl)
+
+  return (
+    <article className={styles.card}>
+      {hotelInformation.hotelContent.images.src ? (
+        <Image
+          className={styles.image}
+          alt={
+            hotelInformation.hotelContent.images.altText ||
+            hotelInformation.hotelContent.images.altText_En
+          }
+          src={hotelInformation.hotelContent.images.src}
+          width={80}
+          height={108}
+        />
+      ) : (
+        <ImageFallback
+          className={styles.fallback}
+          height="108px"
+          width="80px"
+        />
+      )}
+      <div className={styles.content}>
+        <div className={styles.details}>
+          <Typography variant="Title/Subtitle/md">
+            <h4 className={styles.hotelName}>{hotelInformation.hotelName}</h4>
+          </Typography>
+
+          {hotelInformation.cityName && (
+            <Typography variant="Body/Supporting text (caption)/smRegular">
+              <p className={styles.cityName}>{hotelInformation.cityName}</p>
+            </Typography>
+          )}
+        </div>
+
+        <Divider className={styles.divider} color="Border/Divider/Subtle" />
+
+        <div className={styles.dateSection}>
+          <div className={styles.chip}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <span className={styles.chipText}>{relativeTime}</span>
+            </Typography>
+          </div>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <div className={styles.dates}>
+              <time className={styles.dateText} dateTime={arrivalDateTime}>
+                {arrivalDate}
+              </time>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              <span className={styles.dateText}>→</span>
+              <time className={styles.dateText} dateTime={departDateTime}>
+                {departDate}
+              </time>
+            </div>
+          </Typography>
+        </div>
+      </div>
+    </article>
+  )
+}