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
2025-12-09 10:54:57 +00:00
parent 8764945b2f
commit f40035baa9
35 changed files with 527 additions and 272 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/index.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+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 Image from "@scandic-hotels/design-system/Image"
+import Link from "@scandic-hotels/design-system/OldDSLink"
+import Title from "@scandic-hotels/design-system/Title"
+
+import useLang from "@/hooks/useLang"
+
+import styles from "./stay.module.css"
+
+import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
+
+export default function OldStayCard({ stay }: StayCardProps) {
+  const { bookingUrl, isWebAppOrigin } = stay.attributes
+
+  const shouldLinkToMyStay = isWebAppOrigin
+
+  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 { 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")
+
+  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>
+        </div>
+      </footer>
+    </article>
+  )
+}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/stay.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/stay.module.css
@@ -0,0 +1,44 @@
+.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);
+}