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

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