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/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%,

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

@@ -1,234 +0,0 @@
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 type { IntlShape, MessageDescriptor } from "react-intl"
const mockIntl = {
formatMessage: (
descriptor: MessageDescriptor,
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`,
"nextStay.inXMonths": `In {months} month{months, plural, =1 {} other {s}}`,
}
let message: string =
messages[descriptor.id as string] ||
(typeof descriptor.defaultMessage === "string"
? descriptor.defaultMessage
: "") ||
""
if (values) {
Object.entries(values).forEach(([key, value]) => {
message = message.replace(`{${key}}`, String(value))
})
if (values.months === 1) {
message = message.replace("{months, plural, =1 {} other {s}}", "")
} else {
message = message.replace("{months, plural, =1 {} other {s}}", "s")
}
}
return message
},
} as IntlShape
describe("getDaysUntilText", () => {
const lang = Lang.en
describe("past dates", () => {
it("should return formatted date for past check-in dates", () => {
const yesterday = dt().subtract(1, "day").format("YYYY-MM-DD")
const result = getDaysUntilText(yesterday, lang, mockIntl)
expect(result).toContain(dt(yesterday).format("D MMM YYYY"))
})
it("should handle dates from several days ago", () => {
const pastDate = dt().subtract(10, "days").format("YYYY-MM-DD")
const result = getDaysUntilText(pastDate, lang, mockIntl)
expect(result).toContain(dt(pastDate).format("D MMM YYYY"))
})
it("should handle dates from months ago", () => {
const pastDate = dt().subtract(2, "months").format("YYYY-MM-DD")
const result = getDaysUntilText(pastDate, lang, mockIntl)
expect(result).toContain(dt(pastDate).format("D MMM YYYY"))
})
})
describe("same day check-in", () => {
it("should return 'Today' for today's check-in", () => {
const today = dt().format("YYYY-MM-DD")
const result = getDaysUntilText(today, lang, mockIntl)
expect(result).toBe("Today")
})
it("should return 'Today' regardless of time of day", () => {
// Testing with different times but same date
const todayMorning = dt().hour(8).format("YYYY-MM-DD")
const todayEvening = dt().hour(20).format("YYYY-MM-DD")
expect(getDaysUntilText(todayMorning, lang, mockIntl)).toBe("Today")
expect(getDaysUntilText(todayEvening, lang, mockIntl)).toBe("Today")
})
})
describe("tomorrow check-in", () => {
it("should return 'Tomorrow' for next day check-in", () => {
const tomorrow = dt().add(1, "day").format("YYYY-MM-DD")
const result = getDaysUntilText(tomorrow, lang, mockIntl)
expect(result).toBe("Tomorrow")
})
})
describe("days until check-in (2-30 days)", () => {
it("should return 'In X days' for 2 days", () => {
const futureDate = dt().add(2, "days").format("YYYY-MM-DD")
const result = getDaysUntilText(futureDate, lang, mockIntl)
expect(result).toBe("In 2 days")
})
it("should return 'In X days' for 15 days", () => {
const futureDate = dt().add(15, "days").format("YYYY-MM-DD")
const result = getDaysUntilText(futureDate, lang, mockIntl)
expect(result).toBe("In 15 days")
})
it("should return 'In X days' for exactly 30 days (boundary)", () => {
const futureDate = dt().add(30, "days").format("YYYY-MM-DD")
const result = getDaysUntilText(futureDate, lang, mockIntl)
expect(result).toBe("In 30 days")
})
it("should handle the full range from 2 to 30 days", () => {
for (let days = 2; days <= 30; days++) {
const futureDate = dt().add(days, "days").format("YYYY-MM-DD")
const result = getDaysUntilText(futureDate, lang, mockIntl)
expect(result).toBe(`In ${days} days`)
}
})
})
describe("months until check-in (beyond 30 days)", () => {
it("should return 'In 1 month' for 31 days", () => {
const futureDate = dt().add(31, "days").format("YYYY-MM-DD")
const result = getDaysUntilText(futureDate, lang, mockIntl)
expect(result).toBe("In 1 month")
})
it("should return 'In 2 months' for dates 2 months away", () => {
const futureDate = dt().add(2, "months").format("YYYY-MM-DD")
const result = getDaysUntilText(futureDate, lang, mockIntl)
expect(result).toBe("In 2 months")
})
it("should use proper month calculation for 3 months", () => {
const futureDate = dt().add(3, "months").format("YYYY-MM-DD")
const result = getDaysUntilText(futureDate, lang, mockIntl)
expect(result).toBe("In 3 months")
})
it("should handle dates far in the future (6 months)", () => {
const futureDate = dt().add(6, "months").format("YYYY-MM-DD")
const result = getDaysUntilText(futureDate, lang, mockIntl)
expect(result).toBe("In 6 months")
})
it("should handle dates far in the future (1 year)", () => {
const futureDate = dt().add(1, "year").format("YYYY-MM-DD")
const result = getDaysUntilText(futureDate, lang, mockIntl)
expect(result).toBe("In 12 months")
})
})
describe("edge cases", () => {
it("should handle dates with different time components consistently", () => {
// Dates with times should be normalized to start of day
const dateWithTime1 = dt()
.add(5, "days")
.hour(3)
.minute(30)
.format("YYYY-MM-DD HH:mm")
const dateWithTime2 = dt()
.add(5, "days")
.hour(22)
.minute(45)
.format("YYYY-MM-DD HH:mm")
const result1 = getDaysUntilText(dateWithTime1, lang, mockIntl)
const result2 = getDaysUntilText(dateWithTime2, lang, mockIntl)
expect(result1).toBe("In 5 days")
expect(result2).toBe("In 5 days")
})
it("should respect locale parameter", () => {
const futureDate = dt().add(5, "days").format("YYYY-MM-DD")
// Test with different locales
const resultEN = getDaysUntilText(futureDate, Lang.en, mockIntl)
const resultSV = getDaysUntilText(futureDate, Lang.sv, mockIntl)
// Both should work without errors
expect(resultEN).toBe("In 5 days")
expect(resultSV).toBe("In 5 days")
})
it("should handle ISO date strings with timezone", () => {
const isoDate = dt().add(7, "days").toISOString()
const result = getDaysUntilText(isoDate, lang, mockIntl)
expect(result).toBe("In 7 days")
})
})
describe("boundary transitions", () => {
it("should transition correctly from days to months at 31 days", () => {
const date30 = dt().add(30, "days").format("YYYY-MM-DD")
const date31 = dt().add(31, "days").format("YYYY-MM-DD")
expect(getDaysUntilText(date30, lang, mockIntl)).toBe("In 30 days")
expect(getDaysUntilText(date31, lang, mockIntl)).toBe("In 1 month")
})
it("should transition correctly from tomorrow to 2 days", () => {
const date1 = dt().add(1, "day").format("YYYY-MM-DD")
const date2 = dt().add(2, "days").format("YYYY-MM-DD")
expect(getDaysUntilText(date1, lang, mockIntl)).toBe("Tomorrow")
expect(getDaysUntilText(date2, lang, mockIntl)).toBe("In 2 days")
})
it("should transition correctly from today to tomorrow", () => {
const date0 = dt().format("YYYY-MM-DD")
const date1 = dt().add(1, "day").format("YYYY-MM-DD")
expect(getDaysUntilText(date0, lang, mockIntl)).toBe("Today")
expect(getDaysUntilText(date1, lang, mockIntl)).toBe("Tomorrow")
})
})
})

65
apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/utils.ts
View File

@@ -1,65 +0,0 @@
import { dt } from "@scandic-hotels/common/dt"
import type { Lang } from "@scandic-hotels/common/constants/language"
import type { IntlShape } from "react-intl"
export function getDaysUntilText(
checkinDate: string,
lang: Lang,
intl: IntlShape
): string {
const checkInDateTime = dt(checkinDate).locale(lang).startOf("day")
const now = dt().locale(lang).startOf("day")
const daysUntil = checkInDateTime.diff(now, "days")
// 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"),
}
)
}
if (daysUntil === 0) {
return intl.formatMessage({
id: "nextStay.today",
defaultMessage: "Today",
})
}
if (daysUntil === 1) {
return intl.formatMessage({
id: "nextStay.tomorrow",
defaultMessage: "Tomorrow",
})
}
if (daysUntil > 1 && daysUntil <= 30) {
return intl.formatMessage(
{
id: "nextStay.inXDays",
defaultMessage: "In {days} days",
},
{
days: daysUntil,
}
)
}
// Use proper month calculation for dates beyond 30 days
const monthsUntil = checkInDateTime.diff(now, "months")
return intl.formatMessage(
{
id: "nextStay.inXMonths",
defaultMessage: "In {months} month{months, plural, =1 {} other {s}}",
},
{
months: monthsUntil,
}
)
}