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>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css

@@ -1,44 +0,0 @@
-.link {
-  outline: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-md);
-  overflow: hidden;
-
-  &:focus,
-  &:hover {
-    outline-offset: 0;
-    outline: 1.5px solid var(--Base-Border-Hover);
-  }
-}
-
-.stay {
-  background-color: var(--Main-Grey-White);
-}
-
-.image {
-  min-height: 220px;
-  object-fit: cover;
-  overflow: hidden;
-  width: 100%;
-}
-
-.footer {
-  color: var(--Scandic-Brand-Burgundy);
-  display: grid;
-  gap: var(--Space-x2);
-  margin-top: auto;
-  overflow: hidden;
-  padding: var(--Space-x2);
-  width: 100%;
-}
-
-.hotel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-wrap: nowrap;
-}
-
-.date {
-  align-items: center;
-  display: flex;
-  gap: var(--Space-x05);
-}

apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/stayCard.module.css

@@ -0,0 +1,92 @@
+.card {
+  border-radius: var(--Corner-radius-lg);
+  border: 1px solid var(--Border-Default);
+  background: var(--Text-Brand-OnPrimary-3-Default);
+  display: flex;
+  padding: var(--Space-x15);
+  align-items: flex-start;
+  gap: var(--Space-x15);
+  align-self: stretch;
+  height: 100%;
+}
+
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.fallback {
+  min-width: 80px;
+  min-height: 108px;
+}
+
+.image {
+  width: 80px;
+  max-width: 80px;
+  height: 108px;
+  max-height: 108px;
+  border-radius: var(--Corner-radius-md);
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.content {
+  display: grid;
+  gap: var(--Space-x1);
+}
+
+.details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x05);
+}
+
+.hotelName,
+.cityName,
+.dates {
+  color: var(--Text-Default);
+}
+
+.divider {
+  display: none;
+}
+
+.chip {
+  display: flex;
+  padding: var(--Space-x05) var(--Space-x1);
+  justify-content: center;
+  align-items: center;
+  gap: var(--Space-x05);
+  border-radius: var(--Corner-radius-sm);
+  background: var(--Surface-Secondary-Default);
+  width: fit-content;
+}
+
+.chipText {
+  color: var(--Text-Interactive-Default);
+}
+
+.dateSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x05);
+}
+
+.dates {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x05);
+}
+
+@media screen and (min-width: 1367px) {
+  .content {
+    gap: var(--Space-x15);
+  }
+  .divider {
+    display: inline-block;
+  }
+  .dateSection {
+    flex-direction: row;
+    gap: var(--Space-x2);
+  }
+}