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/Previous/Card/card.module.css

@@ -1,92 +0,0 @@
-.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);
-  }
-}

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

@@ -1,105 +0,0 @@
-"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>
-  )
-}

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

@@ -2,10 +2,10 @@
 
 import { useState } from "react"
 
-import ListContainer from "../ListContainer"
-import { Card } from "./Card"
-import { INITIAL_STAYS_FETCH_LIMIT } from "./data"
-import { PreviousStaysSidePeek } from "./PreviousStaysSidePeek"
+import ListContainer from "../../ListContainer"
+import { StayCard } from "../../StayCard"
+import { INITIAL_STAYS_FETCH_LIMIT } from "../data"
+import { PreviousStaysSidePeek } from "../SidePeek"
 import { SeeAllCard } from "./SeeAllCard"
 
 import styles from "./cards.module.css"
@@ -25,7 +25,7 @@ export function Cards({ initialPreviousStays }: PreviousStaysClientProps) {
     <ListContainer>
       <div className={styles.grid}>
         {visibleStays.map((stay) => (
-          <Card key={stay.attributes.confirmationNumber} stay={stay} />
+          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
         ))}
         {hasMoreStays && <SeeAllCard onPress={() => setIsSidePeekOpen(true)} />}
       </div>

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/OldClient.tsx

@@ -7,8 +7,8 @@ import Grids from "@/components/TempDesignSystem/Grids"
 import useLang from "@/hooks/useLang"
 
 import ListContainer from "../ListContainer"
+import OldStayCard from "../OldStayCard"
 import ShowMoreButton from "../ShowMoreButton"
-import StayCard from "../StayCard"
 
 import type {
   PreviousStaysClientProps,
@@ -54,7 +54,7 @@ export function ClientPreviousStays({
     <ListContainer>
       <Grids.Stackable>
         {stays.map((stay) => (
-          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
+          <OldStayCard key={stay.attributes.confirmationNumber} stay={stay} />
         ))}
       </Grids.Stackable>
       {hasNextPage ? (

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

@@ -12,8 +12,8 @@ import { trpc } from "@scandic-hotels/trpc/client"
 import useLang from "@/hooks/useLang"
 
 import ShowMoreButton from "../../ShowMoreButton"
-import { Card } from "../Card"
-import { groupStaysByYear } from "../utils/groupStaysByYear"
+import { StayCard } from "../../StayCard"
+import { groupStaysByYear } from "../../utils/groupStaysByYear"
 
 import styles from "./previousStaysSidePeek.module.css"
 
@@ -85,7 +85,7 @@ export function PreviousStaysSidePeek({
                 </div>
                 <div className={styles.staysList}>
                   {stays.map((stay) => (
-                    <Card
+                    <StayCard
                       key={stay.attributes.confirmationNumber}
                       stay={stay}
                     />

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

@@ -7,8 +7,8 @@ import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
 import { Cards } from "./Cards"
-import { ClientPreviousStays } from "./Client"
 import { INITIAL_STAYS_FETCH_LIMIT } from "./data"
+import { ClientPreviousStays } from "./OldClient"
 
 import styles from "./previous.module.css"
 

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/utils/groupStaysByYear.ts

@@ -1,29 +0,0 @@
-import { dt } from "@scandic-hotels/common/dt"
-
-import type { Stay } from "@scandic-hotels/trpc/routers/user/output"
-
-export interface StaysByYear {
-  year: number
-  stays: Stay[]
-}
-
-/**
- * Groups stays by year based on checkinDate.
- * @returns an array sorted by year in descending order (most recent first).
- */
-export function groupStaysByYear(stays: Stay[]): StaysByYear[] {
-  const groupedMap = new Map<number, Stay[]>()
-
-  for (const stay of stays) {
-    const year = dt(stay.attributes.checkinDate).year()
-
-    if (!groupedMap.has(year)) {
-      groupedMap.set(year, [])
-    }
-    groupedMap.get(year)!.push(stay)
-  }
-
-  return Array.from(groupedMap.entries())
-    .sort(([yearA], [yearB]) => yearB - yearA)
-    .map(([year, stays]) => ({ year, stays }))
-}