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 { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Image from "@/components/Image" import Image from "@/components/Image"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./surprises.module.css" import styles from "./surprises.module.css"
@@ -21,9 +22,9 @@ export default function Card({ title, children }: CardProps) {
})} })}
/> />
<header> <header>
<Title textAlign="center" level="h4"> <Typography variant="Title/smRegular">
{title} <h4 className={styles.title}>{title}</h4>
</Title> </Typography>
</header> </header>
{children} {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 { Dialog, Modal, ModalOverlay } from "react-aria-components"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { benefits } from "@/constants/routes/myPages" import { benefits } from "@/constants/routes/myPages"
import { import {
benefits as webviewBenefits, benefits as webviewBenefits,
@@ -15,7 +17,6 @@ import { customerService } from "@/constants/webHrefs"
import { trpc } from "@/lib/trpc/client" import { trpc } from "@/lib/trpc/client"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { toast } from "@/components/TempDesignSystem/Toasts" import { toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
@@ -186,17 +187,19 @@ export default function SurprisesNotification({
}} }}
> >
{showSurprises && totalSurprises > 1 && ( {showSurprises && totalSurprises > 1 && (
<Caption type="label" uppercase> <Typography variant="Tag/sm">
{intl.formatMessage( <p>
{ {intl.formatMessage(
defaultMessage: "{amount} out of {total}", {
}, defaultMessage: "{amount} out of {total}",
{ },
amount: selectedSurprise + 1, {
total: totalSurprises, amount: selectedSurprise + 1,
} total: totalSurprises,
)} }
</Caption> )}
</p>
</Typography>
)} )}
</Header> </Header>

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

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

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

@@ -1,9 +1,8 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Button from "@/components/TempDesignSystem/Button"
import styles from "./surprises.module.css" import styles from "./surprises.module.css"
import type { NavigationProps } from "@/types/components/blocks/surprises" import type { NavigationProps } from "@/types/components/blocks/surprises"
@@ -18,11 +17,11 @@ export default function Navigation({
return ( return (
<nav className={styles.nav}> <nav className={styles.nav}>
<Button <Button
variant="icon" variant="Text"
intent="tertiary" isDisabled={selectedSurprise === 0}
disabled={selectedSurprise === 0}
onPress={() => showSurprise(-1)} onPress={() => showSurprise(-1)}
size="small" size="Small"
typography="Body/Supporting text (caption)/smBold"
> >
<MaterialIcon <MaterialIcon
icon="chevron_right" icon="chevron_right"
@@ -35,11 +34,11 @@ export default function Navigation({
})} })}
</Button> </Button>
<Button <Button
variant="icon" variant="Text"
intent="tertiary" isDisabled={selectedSurprise === totalSurprises - 1}
disabled={selectedSurprise === totalSurprises - 1}
onPress={() => showSurprise(1)} onPress={() => showSurprise(1)}
size="small" size="Small"
typography="Body/Supporting text (caption)/smBold"
> >
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "Next", 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 ExpirationDate from "@/components/Rewards/ExpirationDate"
import Body from "@/components/TempDesignSystem/Text/Body"
import { getEarliestExpirationDate } from "@/utils/rewards" import { getEarliestExpirationDate } from "@/utils/rewards"
import Card from "./Card" import Card from "./Card"
import styles from "./surprises.module.css"
import type { SlideProps } from "@/types/components/blocks/surprises" import type { SlideProps } from "@/types/components/blocks/surprises"
export default function Slide({ surprise }: SlideProps) { export default function Slide({ surprise }: SlideProps) {
@@ -11,7 +14,9 @@ export default function Slide({ surprise }: SlideProps) {
return ( return (
<Card title={surprise.label}> <Card title={surprise.label}>
<Body textAlign="center">{surprise.description}</Body> <Typography variant="Body/Paragraph/mdRegular">
<p className={styles.textCenter}>{surprise.description}</p>
</Typography>
{earliestExpirationDate ? ( {earliestExpirationDate ? (
<ExpirationDate expirationDate={earliestExpirationDate} /> <ExpirationDate expirationDate={earliestExpirationDate} />
) : null} ) : null}

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

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

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

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