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

fix: replace temp design system components with design system package in surprises

Browse Source
This commit is contained in:
Christian Andolf
2025-05-21 16:34:56 +02:00
parent dfac13f9ad
commit 76994f6e01
7 changed files with 113 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/scandic-web/components/MyPages/Surprises/Card.tsx
View File

@@ -1,7 +1,8 @@
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Image from "@/components/Image"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./surprises.module.css"
@@ -21,9 +22,9 @@ export default function Card({ title, children }: CardProps) {
})}
/>
<header>
<Title textAlign="center" level="h4">
{title}
</Title>
<Typography variant="Title/smRegular">
<h4 className={styles.title}>{title}</h4>
</Typography>
</header>
{children}

27
apps/scandic-web/components/MyPages/Surprises/Client.tsx
View File

@@ -6,6 +6,8 @@ import React, { useState } from "react"
import { Dialog, Modal, ModalOverlay } from "react-aria-components"
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { benefits } from "@/constants/routes/myPages"
import {
benefits as webviewBenefits,
@@ -15,7 +17,6 @@ import { customerService } from "@/constants/webHrefs"
import { trpc } from "@/lib/trpc/client"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang"
@@ -186,17 +187,19 @@ export default function SurprisesNotification({
}}
>
{showSurprises && totalSurprises > 1 && (
<Caption type="label" uppercase>
{intl.formatMessage(
{
defaultMessage: "{amount} out of {total}",
},
{
amount: selectedSurprise + 1,
total: totalSurprises,
}
)}
</Caption>
<Typography variant="Tag/sm">
<p>
{intl.formatMessage(
{
defaultMessage: "{amount} out of {total}",
},
{
amount: selectedSurprise + 1,
total: totalSurprises,
}
)}
</p>
</Typography>
)}
</Header>

77
apps/scandic-web/components/MyPages/Surprises/Initial.tsx
View File

@@ -1,11 +1,12 @@
import { useIntl } from "react-intl"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { Button } from "@scandic-hotels/design-system/Button"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Card from "./Card"
import styles from "./surprises.module.css"
import type { InitialProps } from "@/types/components/blocks/surprises"
export default function Initial({ totalSurprises, onOpen }: InitialProps) {
@@ -17,43 +18,47 @@ export default function Initial({ totalSurprises, onOpen }: InitialProps) {
defaultMessage: "Surprise!",
})}
>
<Body textAlign="center">
{totalSurprises > 1 ? (
<>
{intl.formatMessage(
{
defaultMessage:
"You have <b>{amount}</b> gifts waiting for you!",
},
{
amount: totalSurprises,
b: (str) => <b>{str}</b>,
}
)}
<br />
{intl.formatMessage({
defaultMessage: "Hurry up and use them before they expire!",
})}
</>
) : (
intl.formatMessage({
defaultMessage: "We have a special gift waiting for you!",
})
)}
</Body>
<Caption>
{intl.formatMessage({
defaultMessage: "You'll find all your gifts in 'My benefits'",
})}
</Caption>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.textCenter}>
{totalSurprises > 1 ? (
<>
{intl.formatMessage(
{
defaultMessage:
"You have <b>{amount}</b> gifts waiting for you!",
},
{
amount: totalSurprises,
b: (str) => <b>{str}</b>,
}
)}
<br />
{intl.formatMessage({
defaultMessage: "Hurry up and use them before they expire!",
})}
</>
) : (
intl.formatMessage({
defaultMessage: "We have a special gift waiting for you!",
})
)}
</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{intl.formatMessage({
defaultMessage: "You'll find all your gifts in 'My benefits'",
})}
</p>
</Typography>
<Button
intent="primary"
variant="Primary"
onPress={onOpen}
size="medium"
theme="base"
fullWidth
size="Medium"
autoFocus
typography="Body/Paragraph/mdBold"
className={styles.widthFull}
>
{intl.formatMessage(
{

19
apps/scandic-web/components/MyPages/Surprises/Navigation.tsx
View File

@@ -1,9 +1,8 @@
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Button from "@/components/TempDesignSystem/Button"
import styles from "./surprises.module.css"
import type { NavigationProps } from "@/types/components/blocks/surprises"
@@ -18,11 +17,11 @@ export default function Navigation({
return (
<nav className={styles.nav}>
<Button
variant="icon"
intent="tertiary"
disabled={selectedSurprise === 0}
variant="Text"
isDisabled={selectedSurprise === 0}
onPress={() => showSurprise(-1)}
size="small"
size="Small"
typography="Body/Supporting text (caption)/smBold"
>
<MaterialIcon
icon="chevron_right"
@@ -35,11 +34,11 @@ export default function Navigation({
})}
</Button>
<Button
variant="icon"
intent="tertiary"
disabled={selectedSurprise === totalSurprises - 1}
variant="Text"
isDisabled={selectedSurprise === totalSurprises - 1}
onPress={() => showSurprise(1)}
size="small"
size="Small"
typography="Body/Supporting text (caption)/smBold"
>
{intl.formatMessage({
defaultMessage: "Next",

9
apps/scandic-web/components/MyPages/Surprises/Slide.tsx
View File

@@ -1,9 +1,12 @@
import { Typography } from "@scandic-hotels/design-system/Typography"
import ExpirationDate from "@/components/Rewards/ExpirationDate"
import Body from "@/components/TempDesignSystem/Text/Body"
import { getEarliestExpirationDate } from "@/utils/rewards"
import Card from "./Card"
import styles from "./surprises.module.css"
import type { SlideProps } from "@/types/components/blocks/surprises"
export default function Slide({ surprise }: SlideProps) {
@@ -11,7 +14,9 @@ export default function Slide({ surprise }: SlideProps) {
return (
<Card title={surprise.label}>
<Body textAlign="center">{surprise.description}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.textCenter}>{surprise.description}</p>
</Typography>
{earliestExpirationDate ? (
<ExpirationDate expirationDate={earliestExpirationDate} />
) : null}

27
apps/scandic-web/components/MyPages/Surprises/surprises.module.css
View File

@@ -72,8 +72,8 @@
.dialog {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
padding-bottom: var(--Spacing-x2);
gap: var(--Space-x2);
padding-bottom: var(--Space-x2);
/* to hide sliding cards */
position: relative;
@@ -88,7 +88,7 @@
height: var(--button-height);
position: relative;
justify-content: center;
padding: var(--Spacing-x2) var(--Spacing-x2) 0;
padding: var(--Space-x2) var(--Space-x2) 0;
}
.content {
@@ -96,17 +96,28 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 var(--Spacing-x3);
gap: var(--Spacing-x2);
padding: 0 var(--Space-x3);
gap: var(--Space-x2);
min-height: 350px;
}
.title {
color: var(--Base-Text-High-contrast);
}
.widthFull {
width: 100%;
}
.textCenter {
text-align: center;
}
.nav {
border-top: 1px solid var(--Base-Border-Subtle);
display: flex;
justify-content: space-between;
padding: 0 var(--Spacing-x2);
width: 100%;
margin: 0 var(--Space-x2);
}
.nav button {
@@ -134,7 +145,7 @@
border: none;
cursor: pointer;
position: absolute;
right: var(--Spacing-x2);
right: var(--Space-x2);
width: 32px;
height: var(--button-height);
display: flex;

31
apps/scandic-web/components/Rewards/ExpirationDate/index.tsx
View File

@@ -2,9 +2,10 @@
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { dt } from "@/lib/dt"
import Body from "@/components/TempDesignSystem/Text/Body"
import useLang from "@/hooks/useLang"
import styles from "./expirationDate.module.css"
@@ -21,19 +22,21 @@ export default function ExpirationDate({
return (
<div className={styles.badge}>
<Body textTransform="bold">
{intl.formatMessage(
{
defaultMessage: "Valid through {expirationDate}",
},
{
expirationDate: dt(expirationDate)
.locale(lang)
.utc()
.format("D MMM YYYY"),
}
)}
</Body>
<Typography variant="Body/Supporting text (caption)/smBold">
<p>
{intl.formatMessage(
{
defaultMessage: "Valid through {expirationDate}",
},
{
expirationDate: dt(expirationDate)
.locale(lang)
.utc()
.format("D MMM YYYY"),
}
)}
</p>
</Typography>
</div>
)
}