scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-12-09 10:54:57 +00:00
parent 8764945b2f
commit f40035baa9
35 changed files with 527 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/NextStayContent.tsx
View File

@@ -139,11 +139,17 @@ export default async function NextStayContent({
color="Inverted"
size="Medium"
href={bookingUrl}
className={styles.cta}
>
{intl.formatMessage({
id: "nextStay.seeDetailsAndExtras",
defaultMessage: "See details & extras",
})}
<MaterialIcon
icon="keyboard_arrow_right"
color="CurrentColor"
size={24}
/>
</ButtonLink>
</div>
) : null}

4
apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/index.tsx
View File

@@ -5,7 +5,7 @@ import { Section } from "@/components/Section"
import { SectionHeader } from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
import EmptyUpcomingStays from "../Upcoming/EmptyUpcomingStays"
import NextStayContent from "./NextStayContent"
import styles from "./nextStay.module.css"
@@ -17,7 +17,7 @@ export default async function NextStay({ title, link }: NextStayProps) {
const nextStay = await caller.user.stays.next()
if (!nextStay) {
return env.NEW_STAYS_ON_MY_PAGES ? <EmptyUpcomingStaysBlock /> : null
return env.NEW_STAYS_ON_MY_PAGES ? <EmptyUpcomingStays /> : null
}
return (

4
apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/nextStay.module.css
View File

@@ -119,6 +119,10 @@
grid-area: actions;
}
.cta {
width: 100%;
}
@media (min-width: 768px) {
.nextStayCard {
max-width: 100%;

77
apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/index.tsx Normal file
View File

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

0
apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css → apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/stay.module.css
View File

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

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

0
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/SeeAllCard/index.tsx → apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards/SeeAllCard/index.tsx
View File

0
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/SeeAllCard/seeAllCard.module.css → apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards/SeeAllCard/seeAllCard.module.css
View File

0
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/cards.module.css → apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards/cards.module.css
View File

10
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards.tsx → apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards/index.tsx
View File

@@ -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>

4
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx → apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/OldClient.tsx
View File

@@ -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 ? (

6
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/PreviousStaysSidePeek/index.tsx → apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/SidePeek/index.tsx
View File

@@ -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}
/>

0
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/PreviousStaysSidePeek/previousStaysSidePeek.module.css → apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/SidePeek/previousStaysSidePeek.module.css
View File

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

@@ -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"

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

@@ -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,8 +43,11 @@ 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}>
<article className={styles.card}>
{hotelInformation.hotelContent.images.src ? (
<Image
className={styles.image}
alt={
@@ -50,28 +55,53 @@ function CardContent({ stay }: StayCardProps) {
hotelInformation.hotelContent.images.altText_En
}
src={hotelInformation.hotelContent.images.src}
width={420}
height={240}
width={80}
height={108}
/>
<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"
) : (
<ImageFallback
className={styles.fallback}
height="108px"
width="80px"
/>
<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 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}>
{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>
</footer>
</article>
)
}

0
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Card/card.module.css → apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/stayCard.module.css
View File

0
apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/CarouselCard/carouselCard.module.css → apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/CarouselCard/carouselCard.module.css
View File

3
apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/CarouselCard/index.tsx → apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/CarouselCard/index.tsx
View File

@@ -9,10 +9,9 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getDaysUntilText } from "@/components/Blocks/DynamicContent/Stays/utils/getDaysUntilText"
import useLang from "@/hooks/useLang"
import { getDaysUntilText } from "../../utils/getDaysUntilText"
import styles from "./carouselCard.module.css"
import type { Stay } from "@scandic-hotels/trpc/routers/user/output"

30
apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/SeeAllCard/index.tsx Normal file
View File

@@ -0,0 +1,30 @@
"use client"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import styles from "./seeAllCard.module.css"
interface SeeAllCardProps {
onPress: () => void
}
export function SeeAllCard({ onPress }: SeeAllCardProps) {
const intl = useIntl()
return (
<div className={styles.card}>
<Button
variant="Secondary"
size="Medium"
typography="Body/Paragraph/mdBold"
onPress={onPress}
>
{intl.formatMessage({ id: "common.seeAll", defaultMessage: "See all" })}
<MaterialIcon icon="chevron_right" color="CurrentColor" />
</Button>
</div>
)
}

11
apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/SeeAllCard/seeAllCard.module.css Normal file
View File

@@ -0,0 +1,11 @@
.card {
display: flex;
flex-direction: column;
background: var(--Surface-Secondary-Default);
border: 1px solid var(--Border-Default);
overflow: hidden;
border-radius: var(--Corner-radius-lg);
align-items: center;
justify-content: center;
height: 100%;
}

89
apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/index.tsx Normal file
View File

@@ -0,0 +1,89 @@
"use client"
import { useState } from "react"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { trpc } from "@scandic-hotels/trpc/client"
import { Carousel } from "@/components/Carousel"
import useLang from "@/hooks/useLang"
import { UpcomingStaysSidePeek } from "../SidePeek"
import CarouselCard from "./CarouselCard"
import { SeeAllCard } from "./SeeAllCard"
import styles from "../upcoming.module.css"
import type {
UpcomingStaysClientProps,
UpcomingStaysNonNullResponseObject,
} from "@/types/components/myPages/stays/upcoming"
const MAX_VISIBLE_STAYS = 5
export default function UpcomingStaysCarousel({
initialUpcomingStays,
}: UpcomingStaysClientProps) {
const lang = useLang()
const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
const { data, isLoading } = trpc.user.stays.upcoming.useInfiniteQuery(
{
limit: 6,
lang,
},
{
getNextPageParam: (lastPage) => {
return lastPage?.nextCursor
},
initialData: {
pageParams: [undefined, 1],
pages: [initialUpcomingStays],
},
}
)
if (isLoading) {
return <LoadingSpinner />
}
const stays = data.pages
.filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
.flatMap((page) => page.data)
if (!stays.length) {
return null
}
const visibleStays = stays.slice(0, MAX_VISIBLE_STAYS)
const hasMoreStays = stays.length >= MAX_VISIBLE_STAYS
return (
<>
<Carousel className={styles.carousel}>
<Carousel.Content>
{visibleStays.map((stay) => (
<Carousel.Item
key={stay.attributes.confirmationNumber}
className={styles.carouselItem}
>
<CarouselCard stay={stay} />
</Carousel.Item>
))}
{hasMoreStays && (
<Carousel.Item className={styles.carouselItem}>
<SeeAllCard onPress={() => setIsSidePeekOpen(true)} />
</Carousel.Item>
)}
</Carousel.Content>
<Carousel.Previous className={styles.navigationButton} />
<Carousel.Next className={styles.navigationButton} />
<Carousel.Dots />
</Carousel>
<UpcomingStaysSidePeek
isOpen={isSidePeekOpen}
onClose={() => setIsSidePeekOpen(false)}
/>
</>
)
}

0
apps/scandic-web/components/Blocks/DynamicContent/Stays/EmptyUpcomingStays/emptyUpcomingStays.module.css → apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
View File

2
apps/scandic-web/components/Blocks/DynamicContent/Stays/EmptyUpcomingStays/index.tsx → apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
View File

@@ -11,7 +11,7 @@ import { getLang } from "@/i18n/serverContext"
import styles from "./emptyUpcomingStays.module.css"
export default async function EmptyUpcomingStaysBlock() {
export default async function EmptyUpcomingStays() {
const intl = await getIntl()
const lang = await getLang()

4
apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/Client.tsx → apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/OldClient.tsx
View File

@@ -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 {
UpcomingStaysClientProps,
@@ -54,7 +54,7 @@ export default function ClientUpcomingStays({
<ListContainer>
<Grids.Stackable>
{stays.map((stay) => (
<StayCard key={stay.attributes.confirmationNumber} stay={stay} />
<OldStayCard key={stay.attributes.confirmationNumber} stay={stay} />
))}
</Grids.Stackable>
{hasNextPage ? (

118
apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/SidePeek/index.tsx Normal file
View File

@@ -0,0 +1,118 @@
"use client"
import { useIntl } from "react-intl"
import { useSidePeekScrollToTop } from "@scandic-hotels/common/hooks/useSidePeekScrollToTop"
import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"
import useLang from "@/hooks/useLang"
import ShowMoreButton from "../../ShowMoreButton"
import { StayCard } from "../../StayCard"
import { groupStaysByYear } from "../../utils/groupStaysByYear"
import styles from "./upcomingStaysSidePeek.module.css"
import type { UpcomingStaysNonNullResponseObject } from "@/types/components/myPages/stays/upcoming"
interface UpcomingStaysSidePeekProps {
isOpen: boolean
onClose: () => void
}
export function UpcomingStaysSidePeek({
isOpen,
onClose,
}: UpcomingStaysSidePeekProps) {
const intl = useIntl()
const lang = useLang()
const { scrollContainerRef, showBackToTop, scrollToTop } =
useSidePeekScrollToTop()
const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
trpc.user.stays.upcoming.useInfiniteQuery(
{
limit: 10,
lang,
includeFirstStay: true,
},
{
getNextPageParam: (lastPage) => {
return lastPage?.nextCursor
},
enabled: isOpen,
}
)
function loadMoreData() {
if (hasNextPage) {
fetchNextPage()
}
}
const stays = data?.pages
.filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
.flatMap((page) => page.data)
const staysByYear = stays ? groupStaysByYear(stays, "asc") : []
return (
<SidePeekSelfControlled
title={intl.formatMessage({
id: "stays.upcoming.title",
defaultMessage: "Upcoming stays",
})}
isOpen={isOpen}
onClose={onClose}
>
<div ref={scrollContainerRef} className={styles.content}>
{isLoading ? (
<div className={styles.loadingContainer}>
<LoadingSpinner />
</div>
) : (
<>
{staysByYear.map(({ year, stays }) => (
<section key={year} className={styles.yearSection}>
<div className={styles.yearHeader}>
<Typography variant="Title/Overline/sm">
<span className={styles.yearText}>{year}</span>
</Typography>
</div>
<div className={styles.staysList}>
{stays.map((stay) => (
<StayCard
key={stay.attributes.confirmationNumber}
stay={stay}
/>
))}
</div>
</section>
))}
{hasNextPage && (
<ShowMoreButton
disabled={isFetching}
loadMoreData={loadMoreData}
/>
)}
</>
)}
{showBackToTop && !isLoading && (
<BackToTopButton
label={intl.formatMessage({
id: "common.backToTop",
defaultMessage: "Back to top",
})}
onPress={scrollToTop}
position="right"
/>
)}
</div>
</SidePeekSelfControlled>
)
}

35
apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/SidePeek/upcomingStaysSidePeek.module.css Normal file
View File

@@ -0,0 +1,35 @@
.content {
display: flex;
flex-direction: column;
gap: var(--Space-x3);
position: relative;
}
.loadingContainer {
display: flex;
justify-content: center;
align-items: center;
padding: var(--Space-x4);
}
.yearSection {
display: flex;
flex-direction: column;
gap: var(--Space-x2);
}
.yearHeader {
background: var(--Surface-Primary-Hover-Accent);
padding: var(--Space-x1) var(--Space-x2);
border-radius: var(--Corner-radius-sm);
}
.yearText {
color: var(--Text-Heading);
}
.staysList {
display: flex;
flex-direction: column;
gap: var(--Space-x2);
}

6
apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/index.tsx → apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/index.tsx
View File

@@ -5,9 +5,9 @@ import { Section } from "@/components/Section"
import { SectionHeader } from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
import UpcomingStaysCarousel from "./Carousel"
import ClientUpcomingStays from "./Client"
import EmptyUpcomingStays from "./EmptyUpcomingStays"
import ClientUpcomingStays from "./OldClient"
import styles from "./upcoming.module.css"
@@ -43,7 +43,7 @@ export default async function UpcomingStays({
{hasStays ? (
<ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
) : (
<EmptyUpcomingStaysBlock />
<EmptyUpcomingStays />
)}
<SectionLink link={link} variant="mobile" />
</Section>

0
apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/upcoming.module.css → apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/upcoming.module.css
View File

67
apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/Carousel.tsx
View File

@@ -1,67 +0,0 @@
"use client"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { trpc } from "@scandic-hotels/trpc/client"
import { Carousel } from "@/components/Carousel"
import useLang from "@/hooks/useLang"
import CarouselCard from "./CarouselCard"
import styles from "./upcoming.module.css"
import type {
UpcomingStaysClientProps,
UpcomingStaysNonNullResponseObject,
} from "@/types/components/myPages/stays/upcoming"
export default function UpcomingStaysCarousel({
initialUpcomingStays,
}: UpcomingStaysClientProps) {
const lang = useLang()
const { data, isLoading } = trpc.user.stays.upcoming.useInfiniteQuery(
{
limit: 6,
lang,
},
{
getNextPageParam: (lastPage) => {
return lastPage?.nextCursor
},
initialData: {
pageParams: [undefined, 1],
pages: [initialUpcomingStays],
},
}
)
if (isLoading) {
return <LoadingSpinner />
}
const stays = data.pages
.filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
.flatMap((page) => page.data)
if (!stays.length) {
return null
}
return (
<Carousel className={styles.carousel}>
<Carousel.Content>
{stays.map((stay) => (
<Carousel.Item
key={stay.attributes.confirmationNumber}
className={styles.carouselItem}
>
<CarouselCard stay={stay} />
</Carousel.Item>
))}
</Carousel.Content>
<Carousel.Previous className={styles.navigationButton} />
<Carousel.Next className={styles.navigationButton} />
<Carousel.Dots />
</Carousel>
)
}

15
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/utils/groupStaysByYear.ts → apps/scandic-web/components/Blocks/DynamicContent/Stays/utils/groupStaysByYear.ts
View File

@@ -7,11 +7,18 @@ export interface StaysByYear {
stays: Stay[]
}
type SortOrder = "asc" | "desc"
/**
* Groups stays by year based on checkinDate.
* @returns an array sorted by year in descending order (most recent first).
* @param stays - Array of stays to group
* @param sortOrder - Sort order for years: "desc" (most recent first) or "asc" (earliest first). Defaults to "desc".
* @returns an array sorted by year in the specified order.
*/
export function groupStaysByYear(stays: Stay[]): StaysByYear[] {
export function groupStaysByYear(
stays: Stay[],
sortOrder: SortOrder = "desc"
): StaysByYear[] {
const groupedMap = new Map<number, Stay[]>()
for (const stay of stays) {
@@ -24,6 +31,8 @@ export function groupStaysByYear(stays: Stay[]): StaysByYear[] {
}
return Array.from(groupedMap.entries())
.sort(([yearA], [yearB]) => yearB - yearA)
.sort(([yearA], [yearB]) =>
sortOrder === "asc" ? yearA - yearB : yearB - yearA
)
.map(([year, stays]) => ({ year, stays }))
}

2
apps/scandic-web/components/Blocks/DynamicContent/index.tsx
View File

@@ -21,7 +21,7 @@ import SASTierComparisonBlock from "@/components/Blocks/DynamicContent/SASTierCo
import SignupFormWrapper from "@/components/Blocks/DynamicContent/SignupFormWrapper"
import NextStay from "@/components/Blocks/DynamicContent/Stays/NextStay"
import PreviousStays from "@/components/Blocks/DynamicContent/Stays/Previous"
import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/UpcomingStays"
import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming"
import { ProfilingConsentBanner } from "@/components/MyPages/ProfilingConsent/Banner"
import { SJWidget } from "@/components/SJWidget"

70
apps/scandic-web/utils/getRelativePastTime.test.ts → apps/scandic-web/utils/getTimeAgoText.test.ts
View File

@@ -2,7 +2,7 @@ import { describe, expect, it } from "vitest"
import { dt } from "@scandic-hotels/common/dt"
import { getRelativePastTime } from "./getRelativePastTime"
import { getTimeAgoText } from "./getTimeAgoText"
import type { IntlShape, MessageDescriptor } from "react-intl"
@@ -53,32 +53,32 @@ const mockIntl = {
},
} as IntlShape
describe("getRelativePastTime", () => {
describe("getTimeAgoText", () => {
describe("days ago (1-30 days)", () => {
it("should return '1 day ago' for yesterday", () => {
const yesterday = dt().subtract(1, "day").format("YYYY-MM-DD")
const result = getRelativePastTime(yesterday, mockIntl)
const result = getTimeAgoText(yesterday, mockIntl)
expect(result).toBe("1 day ago")
})
it("should return '2 days ago' for 2 days ago", () => {
const twoDaysAgo = dt().subtract(2, "days").format("YYYY-MM-DD")
const result = getRelativePastTime(twoDaysAgo, mockIntl)
const result = getTimeAgoText(twoDaysAgo, mockIntl)
expect(result).toBe("2 days ago")
})
it("should return '15 days ago' for 15 days ago", () => {
const fifteenDaysAgo = dt().subtract(15, "days").format("YYYY-MM-DD")
const result = getRelativePastTime(fifteenDaysAgo, mockIntl)
const result = getTimeAgoText(fifteenDaysAgo, mockIntl)
expect(result).toBe("15 days ago")
})
it("should return '30 days ago' for exactly 30 days ago (boundary)", () => {
const thirtyDaysAgo = dt().subtract(30, "days").format("YYYY-MM-DD")
const result = getRelativePastTime(thirtyDaysAgo, mockIntl)
const result = getTimeAgoText(thirtyDaysAgo, mockIntl)
expect(result).toBe("30 days ago")
})
@@ -86,7 +86,7 @@ describe("getRelativePastTime", () => {
it("should handle the full range from 1 to 30 days ago", () => {
for (let days = 1; days <= 30; days++) {
const pastDate = dt().subtract(days, "days").format("YYYY-MM-DD")
const result = getRelativePastTime(pastDate, mockIntl)
const result = getTimeAgoText(pastDate, mockIntl)
if (days === 1) {
expect(result).toBe("1 day ago")
@@ -100,42 +100,42 @@ describe("getRelativePastTime", () => {
describe("months ago (31-364 days)", () => {
it("should return '1 month ago' for 31 days ago", () => {
const thirtyOneDaysAgo = dt().subtract(31, "days").format("YYYY-MM-DD")
const result = getRelativePastTime(thirtyOneDaysAgo, mockIntl)
const result = getTimeAgoText(thirtyOneDaysAgo, mockIntl)
expect(result).toBe("1 month ago")
})
it("should return '1 month ago' for 45 days ago", () => {
const fortyFiveDaysAgo = dt().subtract(45, "days").format("YYYY-MM-DD")
const result = getRelativePastTime(fortyFiveDaysAgo, mockIntl)
const result = getTimeAgoText(fortyFiveDaysAgo, mockIntl)
expect(result).toBe("1 month ago")
})
it("should return '2 months ago' for 60 days ago", () => {
const sixtyDaysAgo = dt().subtract(60, "days").format("YYYY-MM-DD")
const result = getRelativePastTime(sixtyDaysAgo, mockIntl)
const result = getTimeAgoText(sixtyDaysAgo, mockIntl)
expect(result).toBe("2 months ago")
})
it("should return '6 months ago' for 180 days ago", () => {
const sixMonthsAgo = dt().subtract(180, "days").format("YYYY-MM-DD")
const result = getRelativePastTime(sixMonthsAgo, mockIntl)
const result = getTimeAgoText(sixMonthsAgo, mockIntl)
expect(result).toBe("6 months ago")
})
it("should return '11 months ago' for 330 days ago", () => {
const elevenMonthsAgo = dt().subtract(330, "days").format("YYYY-MM-DD")
const result = getRelativePastTime(elevenMonthsAgo, mockIntl)
const result = getTimeAgoText(elevenMonthsAgo, mockIntl)
expect(result).toBe("11 months ago")
})
it("should return '12 months ago' for 364 days ago (boundary)", () => {
const twelveMonthsAgo = dt().subtract(364, "days").format("YYYY-MM-DD")
const result = getRelativePastTime(twelveMonthsAgo, mockIntl)
const result = getTimeAgoText(twelveMonthsAgo, mockIntl)
expect(result).toBe("12 months ago")
})
@@ -144,28 +144,28 @@ describe("getRelativePastTime", () => {
describe("years ago (365+ days)", () => {
it("should return '1 year ago' for exactly 365 days ago", () => {
const oneYearAgo = dt().subtract(365, "days").format("YYYY-MM-DD")
const result = getRelativePastTime(oneYearAgo, mockIntl)
const result = getTimeAgoText(oneYearAgo, mockIntl)
expect(result).toBe("1 year ago")
})
it("should return '1 year ago' for 400 days ago", () => {
const fourHundredDaysAgo = dt().subtract(400, "days").format("YYYY-MM-DD")
const result = getRelativePastTime(fourHundredDaysAgo, mockIntl)
const result = getTimeAgoText(fourHundredDaysAgo, mockIntl)
expect(result).toBe("1 year ago")
})
it("should return '2 years ago' for 730 days ago", () => {
const twoYearsAgo = dt().subtract(730, "days").format("YYYY-MM-DD")
const result = getRelativePastTime(twoYearsAgo, mockIntl)
const result = getTimeAgoText(twoYearsAgo, mockIntl)
expect(result).toBe("2 years ago")
})
it("should return '5 years ago' for 5 years ago", () => {
const fiveYearsAgo = dt().subtract(5, "years").format("YYYY-MM-DD")
const result = getRelativePastTime(fiveYearsAgo, mockIntl)
const result = getTimeAgoText(fiveYearsAgo, mockIntl)
expect(result).toBe("5 years ago")
})
@@ -184,8 +184,8 @@ describe("getRelativePastTime", () => {
.startOf("day")
.format("YYYY-MM-DD HH:mm")
const result1 = getRelativePastTime(dateWithTime1, mockIntl)
const result2 = getRelativePastTime(dateWithTime2, mockIntl)
const result1 = getTimeAgoText(dateWithTime1, mockIntl)
const result2 = getTimeAgoText(dateWithTime2, mockIntl)
expect(result1).toBe("5 days ago")
expect(result2).toBe("5 days ago")
@@ -193,18 +193,24 @@ describe("getRelativePastTime", () => {
it("should handle ISO date strings with timezone", () => {
const isoDate = dt().subtract(7, "days").toISOString()
const result = getRelativePastTime(isoDate, mockIntl)
const result = getTimeAgoText(isoDate, mockIntl)
expect(result).toBe("7 days ago")
})
it("should handle future dates (should return 0 days ago for same day)", () => {
// The function doesn't handle negative days specially - it just uses the diff calculation
// For future dates on the same day, diff will be 0
const futureDate = dt().add(1, "day").startOf("day").format("YYYY-MM-DD")
const result = getRelativePastTime(futureDate, mockIntl)
it("should return empty string for future dates", () => {
// Add 2 days to ensure it's definitely in the future regardless of time of day
const futureDate = dt().add(2, "days").format("YYYY-MM-DD")
const result = getTimeAgoText(futureDate, mockIntl)
expect(result).toBe("0 days ago")
expect(result).toBe("")
})
it("should return empty string for dates far in the future", () => {
const farFutureDate = dt().add(1, "year").format("YYYY-MM-DD")
const result = getTimeAgoText(farFutureDate, mockIntl)
expect(result).toBe("")
})
})
@@ -213,24 +219,24 @@ describe("getRelativePastTime", () => {
const date30 = dt().subtract(30, "days").format("YYYY-MM-DD")
const date31 = dt().subtract(31, "days").format("YYYY-MM-DD")
expect(getRelativePastTime(date30, mockIntl)).toBe("30 days ago")
expect(getRelativePastTime(date31, mockIntl)).toBe("1 month ago")
expect(getTimeAgoText(date30, mockIntl)).toBe("30 days ago")
expect(getTimeAgoText(date31, mockIntl)).toBe("1 month ago")
})
it("should transition correctly from months to years at 365 days", () => {
const date364 = dt().subtract(364, "days").format("YYYY-MM-DD")
const date365 = dt().subtract(365, "days").format("YYYY-MM-DD")
expect(getRelativePastTime(date364, mockIntl)).toBe("12 months ago")
expect(getRelativePastTime(date365, mockIntl)).toBe("1 year ago")
expect(getTimeAgoText(date364, mockIntl)).toBe("12 months ago")
expect(getTimeAgoText(date365, mockIntl)).toBe("1 year ago")
})
it("should handle the transition from 1 day to multiple days", () => {
const date1 = dt().subtract(1, "day").format("YYYY-MM-DD")
const date2 = dt().subtract(2, "days").format("YYYY-MM-DD")
expect(getRelativePastTime(date1, mockIntl)).toBe("1 day ago")
expect(getRelativePastTime(date2, mockIntl)).toBe("2 days ago")
expect(getTimeAgoText(date1, mockIntl)).toBe("1 day ago")
expect(getTimeAgoText(date2, mockIntl)).toBe("2 days ago")
})
})
})

12
apps/scandic-web/utils/getRelativePastTime.ts → apps/scandic-web/utils/getTimeAgoText.ts
View File

@@ -9,15 +9,19 @@ import type { IntlShape } from "react-intl"
* - 1-30 days: "1 day ago", "15 days ago", "30 days ago"
* - 31-364 days: "1 month ago", "6 months ago", "12 months ago"
* - 365+ days: "1 year ago", "2 years ago", "5 years ago"
* - Returns empty string for future dates.
*
*/
export function getRelativePastTime(
checkoutDate: string,
intl: IntlShape
): string {
export function getTimeAgoText(checkoutDate: string, intl: IntlShape): string {
const now = dt()
const checkout = dt(checkoutDate)
const daysDiff = now.diff(checkout, "days")
// Return empty string for future dates
if (daysDiff < 0) {
return ""
}
if (daysDiff <= 30) {
// 1-30 days
return intl.formatMessage(

1
packages/trpc/lib/routers/user/input.ts
View File

@@ -14,6 +14,7 @@ export const staysInput = z
.transform((num) => (num ? String(num) : undefined)),
limit: z.number().min(0).default(6),
lang: z.nativeEnum(Lang).optional(),
includeFirstStay: z.boolean().optional(),
})
.default({})

10
packages/trpc/lib/routers/user/query/index.ts
View File

@@ -163,7 +163,7 @@ export const userQueryRouter = router({
upcoming: languageProtectedProcedure
.input(staysInput)
.query(async ({ ctx, input }) => {
const { limit, cursor, lang } = input
const { limit, cursor, lang, includeFirstStay } = input
const language = lang || ctx.lang
const data = await getUpcomingStays(
@@ -186,6 +186,14 @@ export const userQueryRouter = router({
)
if (env.NEW_STAYS_ON_MY_PAGES) {
// When includeFirstStay is true (used by SidePeek), return all stays
if (includeFirstStay) {
return {
data: updatedData,
nextCursor,
}
}
if (updatedData.length <= 1) {
// If there are 1 or fewer stays, return null since NextStay handles this
return null