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

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
2025-03-21 09:05:47 +00:00
parent d406725a65
commit c58815ec06
21 changed files with 224 additions and 174 deletions
--- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx
+++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx
@@ -2,12 +2,12 @@
 import Link from "next/link"
 import { useIntl } from "react-intl"

+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { partnerSas } from "@/constants/routes/myPages"

 import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
 import Button from "@/components/TempDesignSystem/Button"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import useLang from "@/hooks/useLang"

 import { SASModal, SASModalContactBlock, SASModalDivider } from "./SASModal"
@@ -19,15 +19,17 @@ export function AlreadyLinkedError() {
  return (
    <SASModal>
      <ErrorCircleFilledIcon height={64} width={64} color="red" />
-      <Title as="h2" level="h1" textAlign="center" textTransform="regular">
-        {intl.formatMessage({ id: "Accounts are already linked" })}
-      </Title>
-      <Body textAlign="center">
-        {/* TODO copy */}
-        {intl.formatMessage({
-          id: "We could not connect your accounts to give you access. Please contact us and we’ll help you resolve this issue.",
-        })}
-      </Body>
+      <Typography variant="Title/Subtitle/lg">
+        <h1>{intl.formatMessage({ id: "Accounts are already linked" })}</h1>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          {/* TODO copy */}
+          {intl.formatMessage({
+            id: "We could not connect your accounts to give you access. Please contact us and we’ll help you resolve this issue.",
+          })}
+        </p>
+      </Typography>
      <Button theme="base" asChild>
        <Link href={partnerSas[lang]}>
          {intl.formatMessage({ id: "View your account" })}
--- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx
+++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx
@@ -2,12 +2,12 @@
 import { Link } from "react-aria-components"
 import { useIntl } from "react-intl"

+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { profile } from "@/constants/routes/myPages"

 import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
 import Button from "@/components/TempDesignSystem/Button"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import useLang from "@/hooks/useLang"

 import { SASModal, SASModalContactBlock, SASModalDivider } from "./SASModal"
@@ -19,16 +19,18 @@ export function DateOfBirthError() {
  return (
    <SASModal>
      <ErrorCircleFilledIcon height={64} width={64} color="red" />
-      <Title as="h2" level="h1" textAlign="center" textTransform="regular">
-        {intl.formatMessage({ id: "Date of birth not matching" })}
-      </Title>
-      <Body textAlign="center">
-        {/* TODO copy */}
-        {intl.formatMessage({
-          id: "We could not connect your accounts to give you access. Please contact us and we’ll help you resolve this issue.",
-        })}
-      </Body>
-      <Button theme="base">
+      <Typography variant="Title/Subtitle/lg">
+        <h1>{intl.formatMessage({ id: "Date of birth not matching" })}</h1>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          {/* TODO copy */}
+          {intl.formatMessage({
+            id: "We could not connect your accounts to give you access. Please contact us and we’ll help you resolve this issue.",
+          })}
+        </p>
+      </Typography>
+      <Button theme="base" asChild>
        <Link href={profile[lang]}>
          {intl.formatMessage({ id: "View your account" })}
        </Link>
--- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/FailedAttemptsError.tsx
+++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/FailedAttemptsError.tsx
@@ -2,8 +2,9 @@

 import { useIntl } from "react-intl"

+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import Button from "@/components/TempDesignSystem/Button"
-import Body from "@/components/TempDesignSystem/Text/Body"

 import { GenericError } from "./GenericError"

@@ -15,11 +16,13 @@ export function FailedAttemptsError() {
      title={intl.formatMessage({ id: "Too many failed attempts" })}
      variant="info"
    >
-      <Body textAlign="center">
-        {intl.formatMessage({
-          id: "Please wait 1 hour before trying again.",
-        })}
-      </Body>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          {intl.formatMessage({
+            id: "Please wait 1 hour before trying again.",
+          })}
+        </p>
+      </Typography>
      <Button theme="base" disabled>
        {intl.formatMessage({ id: "Send new code" })}
      </Button>
--- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/GenericError.tsx
+++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/GenericError.tsx
@@ -1,8 +1,9 @@
 "use client"
 import Image from "next/image"

+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
-import Title from "@/components/TempDesignSystem/Text/Title"

 import { SASModal } from "./SASModal"

@@ -30,9 +31,9 @@ export function GenericError({
          style={{ marginTop: 16 }}
        />
      )}
-      <Title as="h3" level="h1" textAlign="center" textTransform="regular">
-        {title}
-      </Title>
+      <Typography variant="Title/Subtitle/lg">
+        <h1>{title}</h1>
+      </Typography>
      {children}
    </SASModal>
  )
--- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.module.css
+++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.module.css
@@ -27,6 +27,7 @@
    position: relative;
    padding: 0 var(--Spacing-x2);
    background-color: white;
+    color: var(--UI-Text-Placeholder);
  }

  &::before {
--- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.tsx
+++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.tsx
@@ -2,9 +2,9 @@

 import { useIntl } from "react-intl"

+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Title from "@/components/TempDesignSystem/Text/Title"

 import styles from "./SASModal.module.css"

@@ -17,9 +17,9 @@ export function SASModalDivider() {

  return (
    <div className={styles.divider}>
-      <Body asChild color="uiTextPlaceholder">
+      <Typography variant="Body/Paragraph/mdRegular">
        <span>{intl.formatMessage({ id: "or" })}</span>
-      </Body>
+      </Typography>
    </div>
  )
 }
@@ -31,14 +31,11 @@ export function SASModalContactBlock() {

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
-      <Title
-        level="h4"
-        as="h3"
-        textTransform="regular"
-        className={styles.contactBlockTitle}
-      >
-        {intl.formatMessage({ id: "Contact our memberservice" })}
-      </Title>
+      <Typography variant="Title/Subtitle/md">
+        <h4 className={styles.contactBlockTitle}>
+          {intl.formatMessage({ id: "Contact our memberservice" })}
+        </h4>
+      </Typography>
      <Link
        href={`tel:${phone.replaceAll(" ", "")}`}
        textDecoration="underline"
--- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx
+++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx
@@ -2,8 +2,9 @@

 import { useIntl } from "react-intl"

+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import Button from "@/components/TempDesignSystem/Button"
-import Body from "@/components/TempDesignSystem/Text/Body"

 import { GenericError } from "./GenericError"

@@ -15,11 +16,13 @@ export function TooManyCodesError() {
      title={intl.formatMessage({ id: "You’ve requested too many codes" })}
      variant="info"
    >
-      <Body textAlign="center">
-        {intl.formatMessage({
-          id: "Please wait 1 hour before trying again.",
-        })}
-      </Body>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          {intl.formatMessage({
+            id: "Please wait 1 hour before trying again.",
+          })}
+        </p>
+      </Typography>
      <Button theme="base" disabled>
        {intl.formatMessage({ id: "Send new code" })}
      </Button>
--- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyFailedAttemptsError.tsx
+++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyFailedAttemptsError.tsx
@@ -2,8 +2,9 @@

 import { useIntl } from "react-intl"

+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import Button from "@/components/TempDesignSystem/Button"
-import Body from "@/components/TempDesignSystem/Text/Body"

 import { GenericError } from "./GenericError"

@@ -15,11 +16,13 @@ export function TooManyFailedAttemptsError() {
      title={intl.formatMessage({ id: "Too many failed attempts." })}
      variant="info"
    >
-      <Body textAlign="center">
-        {intl.formatMessage({
-          id: "Please wait 1 hour before trying again.",
-        })}
-      </Body>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>
+          {intl.formatMessage({
+            id: "Please wait 1 hour before trying again.",
+          })}
+        </p>
+      </Typography>
      <Button theme="base" disabled>
        {intl.formatMessage({ id: "Send new code" })}
      </Button>