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

25
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,6 +17,7 @@ export default async function EmptyUpcomingStaysBlock() {
const href = `/${lang}`
if (!env.NEW_STAYS_ON_MY_PAGES) {
return (
<section className={styles.container}>
<div className={styles.titleContainer}>
@@ -49,3 +54,23 @@ export default async function EmptyUpcomingStaysBlock() {
</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.findDestinationOrHotel",
defaultMessage: "Find destination or hotel",
})}
</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}>
<SectionHeader title={title} link={link} />
{initialUpcomingStays?.data.length ? (
{title && <SectionHeader heading={title} link={link} />}
<UpcomingStaysCarousel initialUpcomingStays={initialUpcomingStays} />
<SectionLink link={link} variant="mobile" />
</Section>
)
}
return (
<Section className={styles.container}>
{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,
},
})

3
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/roomsHeader.module.css
View File

@@ -26,7 +26,8 @@
@media screen and (min-width: 768px) {
.container {
grid-template-columns: 1fr auto;
grid-template-areas: "availableRoomsCount filters"
grid-template-areas:
"availableRoomsCount filters"
"noAvailabilityAlert noAvailabilityAlert";
}
}

2
packages/design-system/lib/fonts.css
View File

@@ -276,7 +276,7 @@
font-style: normal;
font-weight: 400;
font-display: block;
src: url(/_static/shared/fonts/material-symbols/rounded-1db5531f.woff2)
src: url(/_static/shared/fonts/material-symbols/rounded-1b8067b7.woff2)
format('woff2');
}

8
packages/trpc/env/server.ts vendored
View File

@@ -36,6 +36,13 @@ export const env = createEnv({
SENTRY_ENVIRONMENT: z.string().default("development"),
PUBLIC_URL: z.string().default(""),
SALESFORCE_PREFERENCE_BASE_URL: z.string(),
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: {
@@ -56,5 +63,6 @@ export const env = createEnv({
SENTRY_ENVIRONMENT: process.env.SENTRY_ENVIRONMENT,
PUBLIC_URL: process.env.NEXT_PUBLIC_PUBLIC_URL,
SALESFORCE_PREFERENCE_BASE_URL: process.env.SALESFORCE_PREFERENCE_BASE_URL,
NEW_STAYS_ON_MY_PAGES: process.env.NEW_STAYS_ON_MY_PAGES,
},
})

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

@@ -1,6 +1,7 @@
import { createCounter } from "@scandic-hotels/common/telemetry"
import { safeTry } from "@scandic-hotels/common/utils/safeTry"
import { env } from "../../../../env/server"
import { router } from "../../.."
import * as api from "../../../api"
import { Transactions } from "../../../enums/transactions"
@@ -184,6 +185,20 @@ export const userQueryRouter = router({
language
)
if (env.NEW_STAYS_ON_MY_PAGES) {
if (updatedData.length <= 1) {
// If there are 1 or fewer stays, return null since NextStay handles this
return null
}
// If there are multiple stays, filter out the first one since NextStay shows it
const filteredData = updatedData.slice(1)
return {
data: filteredData,
nextCursor,
}
}
return {
data: updatedData,
nextCursor,

12
scripts/material-symbols-update.mts
View File

@@ -133,6 +133,7 @@ const icons = [
"kayaking",
"kettle",
"keyboard_arrow_down",
"keyboard_arrow_right",
"keyboard_arrow_up",
"king_bed",
"kitchen",
@@ -237,7 +238,8 @@ const hash = createHash(icons).substring(0, 8);
async function fetchIconUrl(url: string) {
const response = await fetch(url, {
headers: {
Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
Accept:
"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
"User-Agent":
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36",
},
@@ -298,7 +300,7 @@ async function cleanFontDirs() {
await writeFile(
join(FONT_DIR, ".auto-generated"),
`Auto-generated, do not edit. Use scripts/material-symbols-update.mts to update.\nhash=${hash}\ncreated=${new Date().toISOString()}\n`,
{ encoding: "utf-8" }
{ encoding: "utf-8" },
);
}
@@ -313,11 +315,11 @@ async function updateFontCSS() {
file,
css.replace(
/url\(\/_static\/shared\/fonts\/material-symbols\/rounded[^)]+\)/,
`url(/_static/shared/fonts/material-symbols/rounded-${hash}.woff2)`
`url(/_static/shared/fonts/material-symbols/rounded-${hash}.woff2)`,
),
{
encoding: "utf-8",
}
},
);
}
@@ -337,7 +339,7 @@ async function main() {
process.exit(0);
} else {
console.error(
`Unable to find the icon font src URL in CSS response from Google Fonts at ${fontUrl}`
`Unable to find the icon font src URL in CSS response from Google Fonts at ${fontUrl}`,
);
}
}

4
shared/fonts/material-symbols/.auto-generated
View File

@@ -1,3 +1,3 @@
Auto-generated, do not edit. Use scripts/material-symbols-update.mts to update.
hash=1db5531f
created=2025-09-17T06:58:37.841Z
hash=1b8067b7
created=2025-11-11T10:02:22.385Z

BIN
shared/fonts/material-symbols/rounded-1b8067b7.woff2 Normal file
View File

Binary file not shown.

BIN
shared/fonts/material-symbols/rounded-1db5531f.woff2
View File

Binary file not shown.