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

Merged in feat/LOY-422-new-upcoming-stays (pull request #3121)

Browse Source 
feat(LOY-422): Upcoming Stays Redesign

* feat(LOY-422): Upcoming Stays Redesign

* feat(LOY-422): Carousel next/previous arrows

* chore(LOY-422): add new material icon

* refactor(LOY-422): restructure new and old upcoming stays

* fix(LOY-422): handle less than 1 case

* chore(LOY-422): remove uneeded id

* chore(LOY-422): remove intl label for date edge case


Approved-by: Matilda Landström
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-11-13 13:05:24 +00:00
parent 66fd7696f7
commit 0b28893e71
25 changed files with 687 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/.env.local.example
View File

@@ -66,3 +66,5 @@ DTMC_ENTRA_ID_ISSUER=""
DTMC_ENTRA_ID_SECRET=""
HOTEL_BRANDING="0" # 0 - disabled, 1 - enabled
NEW_STAYS_ON_MY_PAGES="true"

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

@@ -30,3 +30,20 @@
justify-content: center;
align-items: center;
}
/* Styles for new empty upcoming stays design */
.emptyUpcomingStaysContainer {
display: flex;
padding: var(--Space-x6);
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--Space-x3);
border-radius: var(--Corner-radius-lg);
background: var(--Surface-Brand-Primary-1-Default);
}
.heading {
color: var(--Text-Heading);
text-align: center;
}

81
apps/scandic-web/components/Blocks/DynamicContent/Stays/EmptyUpcomingStays/index.tsx
View File

@@ -1,6 +1,10 @@
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/OldDSLink"
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { env } from "@/env/server"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
@@ -13,39 +17,60 @@ export default async function EmptyUpcomingStaysBlock() {
const href = `/${lang}`
return (
<section className={styles.container}>
<div className={styles.titleContainer}>
<Title
as="h4"
level="h3"
color="red"
className={styles.title}
textAlign="center"
if (!env.NEW_STAYS_ON_MY_PAGES) {
return (
<section className={styles.container}>
<div className={styles.titleContainer}>
<Title
as="h4"
level="h3"
color="red"
className={styles.title}
textAlign="center"
>
{intl.formatMessage({
id: "stays.noUpcomingStays",
defaultMessage: "You have no upcoming stays.",
})}
<span className={styles.burgundyTitle}>
{intl.formatMessage({
id: "stays.whereToGoNext",
defaultMessage: "Where should you go next?",
})}
</span>
</Title>
</div>
<Link
href={href}
className={styles.link}
color="Text/Interactive/Secondary"
>
{intl.formatMessage({
id: "stays.noUpcomingStays",
defaultMessage: "You have no upcoming stays.",
id: "stays.getInspired",
defaultMessage: "Get inspired",
})}
<span className={styles.burgundyTitle}>
{intl.formatMessage({
id: "stays.whereToGoNext",
defaultMessage: "Where should you go next?",
})}
</span>
</Title>
</div>
<Link
href={href}
className={styles.link}
color="Text/Interactive/Secondary"
>
<MaterialIcon icon="arrow_forward" color="CurrentColor" />
</Link>
</section>
)
}
return (
<section className={styles.emptyUpcomingStaysContainer}>
<Typography variant="Title/Subtitle/md">
<p className={styles.heading}>
{intl.formatMessage({
id: "stays.noUpcomingStaysAtTheMoment",
defaultMessage: "You have no upcoming stays at the moment",
})}
</p>
</Typography>
<ButtonLink href={href} variant="Tertiary" color="Primary" size="Small">
{intl.formatMessage({
id: "stays.getInspired",
defaultMessage: "Get inspired",
id: "stays.findDestinationOrHotel",
defaultMessage: "Find destination or hotel",
})}
<MaterialIcon icon="arrow_forward" color="CurrentColor" />
</Link>
</ButtonLink>
</section>
)
}

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

@@ -8,7 +8,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { getDaysUntilText } from "./utils"
import { getDaysUntilText } from "../utils/getDaysUntilText"
import styles from "./nextStay.module.css"

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

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

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

@@ -29,10 +29,7 @@
.imageOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.1) 0%,

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

@@ -1,3 +0,0 @@
.container {
display: inline-grid;
}

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

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

69
apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/CarouselCard/carouselCard.module.css Normal file
View File

@@ -0,0 +1,69 @@
.card {
display: flex;
flex-direction: column;
background: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Border-Default);
overflow: hidden;
border-radius: var(--Corner-radius-lg);
}
.imageContainer {
position: relative;
width: 100%;
aspect-ratio: 16/9;
border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
background:
linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%),
lightgray 50% / cover no-repeat,
var(--Neutral-20);
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 1;
}
.imageOverlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.2) 50%,
rgba(0, 0, 0, 0.6) 100%
);
display: flex;
flex-direction: column;
z-index: 2;
padding: var(--Space-x2);
color: var(--Text-Inverted);
place-content: center;
text-align: center;
}
.content {
display: flex;
flex-direction: column;
gap: var(--Space-x1);
padding: var(--Space-x2);
}
.infoRow {
display: flex;
justify-content: space-between;
align-items: center;
}
.infoItem {
display: flex;
align-items: center;
gap: var(--Space-x05);
}
.dateRange {
text-align: right;
}

114
apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/CarouselCard/index.tsx Normal file
View File

@@ -0,0 +1,114 @@
"use client"
import { useIntl } from "react-intl"
import { dt } from "@scandic-hotels/common/dt"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { Divider } from "@scandic-hotels/design-system/Divider"
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 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"
interface CarouselCardProps {
stay: Stay
}
export default function CarouselCard({ stay }: CarouselCardProps) {
const intl = useIntl()
const lang = useLang()
const { attributes } = stay
const {
checkinDate,
checkoutDate,
hotelInformation,
isWebAppOrigin,
bookingUrl,
} = attributes
const daysUntilText = getDaysUntilText(checkinDate, lang, intl)
return (
<article className={styles.card}>
<div className={styles.imageContainer}>
<Image
className={styles.image}
alt={
hotelInformation.hotelContent.images.altText ||
hotelInformation.hotelContent.images.altText_En ||
hotelInformation.hotelName
}
src={hotelInformation.hotelContent.images.src}
width={400}
height={300}
priority
/>
<div className={styles.imageOverlay}>
<Typography variant="Title/Overline/sm">
<span>{daysUntilText}</span>
</Typography>
<Typography variant="Title/md">
<span>{hotelInformation.hotelName}</span>
</Typography>
{hotelInformation.cityName && (
<Typography variant="Title/Overline/sm">
<span>{hotelInformation.cityName}</span>
</Typography>
)}
</div>
</div>
<div className={styles.content}>
<div className={styles.infoRow}>
<Typography variant="Body/Paragraph/mdRegular">
<span className={styles.infoItem}>
<MaterialIcon icon="calendar_month" color="Icon/Default" />
{intl.formatMessage({
id: "common.dates",
defaultMessage: "Dates",
})}
</span>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<span className={styles.dateRange}>
<time>{dt(checkinDate).locale(lang).format("D MMM")}</time>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{" → "}
<time>{dt(checkoutDate).locale(lang).format("D MMM, YYYY")}</time>
</span>
</Typography>
</div>
{isWebAppOrigin && (
<>
<Divider variant="horizontal" color="Border/Divider/Default" />
<ButtonLink
variant="Text"
color="Primary"
size="Small"
href={bookingUrl}
>
{intl.formatMessage({
id: "nextStay.seeDetailsAndExtras",
defaultMessage: "See details & extras",
})}
<MaterialIcon
icon="keyboard_arrow_right"
color="CurrentColor"
size={20}
/>
</ButtonLink>
</>
)}
</div>
</article>
)
}

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

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

@@ -1,10 +1,12 @@
import { env } from "@/env/server"
import { serverClient } from "@/lib/trpc/server"
import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header/Deprecated"
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 styles from "./upcoming.module.css"
@@ -20,10 +22,25 @@ export default async function UpcomingStays({
limit: 6,
})
const hasStays =
initialUpcomingStays?.data && initialUpcomingStays.data.length > 0
if (env.NEW_STAYS_ON_MY_PAGES) {
if (!hasStays) return null
return (
<Section className={styles.container}>
{title && <SectionHeader heading={title} link={link} />}
<UpcomingStaysCarousel initialUpcomingStays={initialUpcomingStays} />
<SectionLink link={link} variant="mobile" />
</Section>
)
}
return (
<Section className={styles.container}>
<SectionHeader title={title} link={link} />
{initialUpcomingStays?.data.length ? (
{title && <SectionHeader heading={title} link={link} />}
{hasStays ? (
<ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
) : (
<EmptyUpcomingStaysBlock />

11
apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/upcoming.module.css Normal file
View File

@@ -0,0 +1,11 @@
.container {
display: inline-grid;
}
.carousel {
width: 100%;
}
.carousel .navigationButton {
top: 40%;
}

3
apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/utils.test.ts → apps/scandic-web/components/Blocks/DynamicContent/Stays/utils/getDaysUntilText.test.ts
View File

@@ -3,7 +3,7 @@ import { describe, expect, it } from "vitest"
import { Lang } from "@scandic-hotels/common/constants/language"
import { dt } from "@scandic-hotels/common/dt"
import { getDaysUntilText } from "./utils"
import { getDaysUntilText } from "./getDaysUntilText"
import type { IntlShape, MessageDescriptor } from "react-intl"
@@ -13,7 +13,6 @@ const mockIntl = {
values?: Record<string, string | number | boolean | Date>
) => {
const messages: Record<string, string> = {
"nextStay.past": `{date}`,
"nextStay.today": "Today",
"nextStay.tomorrow": "Tomorrow",
"nextStay.inXDays": `In {days} days`,

10
apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/utils.ts → apps/scandic-web/components/Blocks/DynamicContent/Stays/utils/getDaysUntilText.ts
View File

@@ -14,15 +14,7 @@ export function getDaysUntilText(
// Handle past dates edge case.
if (daysUntil < 0) {
return intl.formatMessage(
{
id: "nextStay.past",
defaultMessage: "{date} ",
},
{
date: dt(checkinDate).locale(lang).format("D MMM YYYY"),
}
)
return dt(checkinDate).locale(lang).format("D MMM YYYY")
}
if (daysUntil === 0) {

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/Upcoming"
import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/UpcomingStays"
import { SJWidget } from "@/components/SJWidget"
import JobylonFeed from "./JobylonFeed"

8
apps/scandic-web/env/server.ts vendored
View File

@@ -136,6 +136,13 @@ export const env = createEnv({
.string()
.optional()
.transform((s) => s?.split(",") || []),
NEW_STAYS_ON_MY_PAGES: z
.string()
// only allow "true" or "false"
.refine((s) => s === "true" || s === "false")
// transform to boolean
.transform((s) => s === "true")
.default("false"),
},
emptyStringAsUndefined: true,
runtimeEnv: {
@@ -213,6 +220,7 @@ export const env = createEnv({
DTMC_ENTRA_ID_SECRET: process.env.DTMC_ENTRA_ID_SECRET,
HOTEL_BRANDING: process.env.HOTEL_BRANDING,
CHATBOT_LIVE_LANGS: process.env.CHATBOT_LIVE_LANGS,
NEW_STAYS_ON_MY_PAGES: process.env.NEW_STAYS_ON_MY_PAGES,
},
})