Merged in LOY-493/Sidepeek-upcoming-stays (pull request #3315)

LOY-493/Sidepeek upcoming stays

* chore(LOY-493): Add icon to next stay card cta

* chore(LOY-493): better folder org for stays

* chore(LOY-494): more folder reorg

* feat(LOY-493): Implement Sidepeek for Upcoming Stays


Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx

@@ -1,22 +1,23 @@
 "use client"
 
+import Link from "next/link"
+import { useIntl } from "react-intl"
+
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/OldDSLink"
-import Title from "@scandic-hotels/design-system/Title"
+import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
+import { getTimeAgoText } from "@/utils/getTimeAgoText"
 
-import styles from "./stay.module.css"
+import styles from "./stayCard.module.css"
 
 import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 
-export default function StayCard({ stay }: StayCardProps) {
-  const { bookingUrl, isWebAppOrigin } = stay.attributes
-
-  const shouldLinkToMyStay = isWebAppOrigin
+export function StayCard({ stay }: StayCardProps) {
+  const { bookingUrl, isWebAppOrigin: shouldLinkToMyStay } = stay.attributes
 
   if (!shouldLinkToMyStay) {
     return <CardContent stay={stay} />
@@ -31,6 +32,7 @@ export default function StayCard({ stay }: StayCardProps) {
 
 function CardContent({ stay }: StayCardProps) {
   const lang = useLang()
+  const intl = useIntl()
 
   const { checkinDate, checkoutDate, hotelInformation } = stay.attributes
 
@@ -41,37 +43,65 @@ function CardContent({ stay }: StayCardProps) {
   const departDate = depart.format("DD MMM YYYY")
   const departDateTime = depart.format("YYYY-MM-DD")
 
+  const timeAgoText = getTimeAgoText(checkoutDate, intl)
+
   return (
-    <article className={styles.stay}>
-      <Image
-        className={styles.image}
-        alt={
-          hotelInformation.hotelContent.images.altText ||
-          hotelInformation.hotelContent.images.altText_En
-        }
-        src={hotelInformation.hotelContent.images.src}
-        width={420}
-        height={240}
-      />
-      <footer className={styles.footer}>
-        <Title as="h4" className={styles.hotel} level="h3">
-          {hotelInformation.hotelName}
-        </Title>
-        <div className={styles.date}>
-          <MaterialIcon
-            icon="calendar_month"
-            color="Icon/Interactive/Default"
-          />
-          <Caption asChild>
-            <time dateTime={arrivalDateTime}>{arrivalDate}</time>
-          </Caption>
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {" - "}
-          <Caption asChild>
-            <time dateTime={departDateTime}>{departDate}</time>
-          </Caption>
+    <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>
-      </footer>
+
+        <Divider className={styles.divider} color="Border/Divider/Subtle" />
+
+        <div className={styles.dateSection}>
+          {timeAgoText ? (
+            <div className={styles.chip}>
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <span className={styles.chipText}>{timeAgoText}</span>
+              </Typography>
+            </div>
+          ) : null}
+          <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>
   )
 }