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

Merged in fix/sas-flow-design-updates (pull request #1567)

Browse Source 
Fix typography in SAS flow

* Add missing translation

* Update SAS login page typography

* Update LinkAccountFormTypography

* Update typography in OneTimePasswordForm

* Update typography of SAS link success page

* Update typography of SAS flow errors

* Update typography of SAS unlink success page

* Update typography of SAS error boundary


Approved-by: Linus Flood
This commit is contained in:
Anton Gunnarsson
2025-03-21 09:05:47 +00:00
parent d406725a65
commit c58815ec06
21 changed files with 224 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx
View File

@@ -6,15 +6,14 @@ import { useTransition } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { profileEdit } from "@/constants/routes/myPages"
import { ArrowRightIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Label from "@/components/TempDesignSystem/Form/Label"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./link-sas.module.css"
@@ -60,28 +59,32 @@ export function LinkAccountForm({
width={182}
src="/_static/img/partner/sas/sas-campaign-logo.png"
/>
<Title level="h3" textTransform="regular">
{intl.formatMessage({ id: "Link your accounts" })}
</Title>
<Typography variant="Title/Subtitle/lg">
<h3>{intl.formatMessage({ id: "Link your accounts" })}</h3>
</Typography>
</div>
<div className={styles.dateOfBirth}>
<Body textTransform="bold">
{userDateOfBirth
? intl.formatMessage(
{
id: "Birth date: {dateOfBirth, date, ::MMMM d yyyy}",
},
{
dateOfBirth: new Date(userDateOfBirth),
}
)
: intl.formatMessage({ id: "Birth date is missing" })}
</Body>
<Label size="small" className={styles.dateOfBirthDescription}>
{intl.formatMessage({
id: "We require your birth date in order to link your Scandic account with your SAS EuroBonus account. Please check that it is correct.",
})}
</Label>
<Typography variant="Body/Paragraph/mdBold">
<p>
{userDateOfBirth
? intl.formatMessage(
{
id: "Birth date: {dateOfBirth, date, ::MMMM d yyyy}",
},
{
dateOfBirth: new Date(userDateOfBirth),
}
)
: intl.formatMessage({ id: "Birth date is missing" })}
</p>
</Typography>
<Typography variant="Label/xsRegular">
<p className={styles.dateOfBirthDescription}>
{intl.formatMessage({
id: "We require your birth date in order to link your Scandic account with your SAS EuroBonus account. Please check that it is correct.",
})}
</p>
</Typography>
<Link
href={profileEdit[params.lang]}
className={styles.dateOfBirthLink}
@@ -107,30 +110,36 @@ export function LinkAccountForm({
disabled: !userDateOfBirth,
}}
>
<Body>
{intl.formatMessage({ id: "I accept the terms and conditions" })}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "I accept the terms and conditions",
})}
</p>
</Typography>
</Checkbox>
<Body className={styles.termsDescription}>
{intl.formatMessage(
{
id: "By linking your accounts you accept the <sasScandicTermsAndConditionsLink>Scandic Friends & SAS Terms and Conditions</sasScandicTermsAndConditionsLink>. You will be connected throughout the duration of your employment or until further notice, and you can opt out at any time.",
},
{
sasScandicTermsAndConditionsLink: (str) => (
<Link
// TODO correct link
href={"#"}
weight="bold"
variant="default"
textDecoration="underline"
>
{str}
</Link>
),
}
)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.termsDescription}>
{intl.formatMessage(
{
id: "By linking your accounts you accept the <sasScandicTermsAndConditionsLink>Scandic Friends & SAS Terms and Conditions</sasScandicTermsAndConditionsLink>. You will be connected throughout the duration of your employment or until further notice, and you can opt out at any time.",
},
{
sasScandicTermsAndConditionsLink: (str) => (
<Link
// TODO correct link
href={"#"}
weight="bold"
variant="default"
textDecoration="underline"
>
{str}
</Link>
),
}
)}
</p>
</Typography>
</div>
<div className={styles.ctaContainer}>
<Button

34
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/success/page.tsx
View File

@@ -1,11 +1,11 @@
import React from "react"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { partnerSas } from "@/constants/routes/myPages"
import CheckCircle from "@/components/Icons/CheckCircle"
import { Redirect } from "@/components/Redirect"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { SASModal } from "../../components/SASModal"
@@ -21,20 +21,24 @@ export default async function SASxScandicLinkPage({
<SASModal>
<Redirect url={partnerSas[params.lang]} timeout={3000} />
<CheckCircle height={64} width={64} color="uiSemanticSuccess" />
<Title as="h2" level="h1" textAlign="center">
{intl.formatMessage({ id: "Your accounts are connected" })}
</Title>
<Typography variant="Title/Subtitle/lg">
<h1>{intl.formatMessage({ id: "Your accounts are linked" })}</h1>
</Typography>
<div>
<Body textAlign="center">
{intl.formatMessage({
id: "We successfully connected your accounts!",
})}
</Body>
<Body textAlign="center">
{intl.formatMessage({
id: "Redirecting you to my pages.",
})}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "We successfully connected your accounts!",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "Redirecting you to my pages.",
})}
</p>
</Typography>
</div>
</SASModal>
)