Merged in chore/partner-sas-404-page (pull request #3339)

chore: Fix partner-sas 404 page

* Fix 404 page

* Fix 404 links

* Fix links


Approved-by: Matilda Landström

apps/partner-sas/app/[lang]/middleware-error/404/page.tsx

@@ -1,4 +1,5 @@
+import NotFound from "@/components/NotFound"
+
 export default function NotFoundPage() {
-  // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-  return <div>Not Found</div>
+  return <NotFound />
 }

apps/partner-sas/app/[lang]/not-found.tsx

@@ -1,4 +1,5 @@
+import NotFound from "@/components/NotFound"
+
 export default function NotFoundPage() {
-  // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-  return <div>Not Found, missing lang in url?</div>
+  return <NotFound />
 }

apps/partner-sas/components/NotFound/Texts.ts

@@ -0,0 +1,61 @@
+import type { Lang } from "@scandic-hotels/common/constants/language"
+
+type Texts = {
+  title: string
+  goToStartPage: {
+    question: string
+    link: string
+    linkText: string
+  }
+}
+
+export const texts: Record<Lang, Texts> = {
+  en: {
+    title: "Sorry, page not found.",
+    goToStartPage: {
+      question: "Would you like to go back to the ",
+      link: "https://sas.scandichotels.com/en",
+      linkText: "startpage",
+    },
+  },
+  sv: {
+    title: "Oj då, vi kunde inte hitta sidan du söker.",
+    goToStartPage: {
+      question: "Vill du gå tillbaka till ",
+      link: "https://sas.scandichotels.com/sv",
+      linkText: "startsidan",
+    },
+  },
+  de: {
+    title: "Tut uns leid, Seite nicht gefunden.",
+    goToStartPage: {
+      question: "Möchten Sie zurück zur ",
+      link: "https://sas.scandichotels.com/de",
+      linkText: "Startseite",
+    },
+  },
+  fi: {
+    title: "Valitettavasti sivua ei löydy.",
+    goToStartPage: {
+      question: "Haluaisitko mennä takaisin ",
+      link: "https://sas.scandichotels.com/fi",
+      linkText: "etusivulle",
+    },
+  },
+  no: {
+    title: "Oi da, vi fant ikke siden du lette etter...",
+    goToStartPage: {
+      question: "Vil du gå tilbake til ",
+      link: "https://sas.scandichotels.com/no",
+      linkText: "startsiden",
+    },
+  },
+  da: {
+    title: "Hov - siden kan ikke findes!",
+    goToStartPage: {
+      question: "Vil du gå tilbage til ",
+      link: "https://sas.scandichotels.com/da",
+      linkText: "startsiden",
+    },
+  },
+}

apps/partner-sas/components/NotFound/index.tsx

@@ -0,0 +1,32 @@
+import { getLang } from "@/i18n/serverContext"
+
+import { texts } from "./Texts"
+
+import styles from "./notFound.module.css"
+
+export default async function NotFound() {
+  const lang = await getLang()
+  const infoTexts = texts[lang]
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <h1 className={styles.header}>{infoTexts.title}</h1>
+        <div className={styles.pitch}>
+          <p className={styles.text}>
+            {infoTexts.goToStartPage.question}
+            <a
+              className={styles.link}
+              title={infoTexts.goToStartPage.linkText}
+              href={infoTexts.goToStartPage.link}
+            >
+              {infoTexts.goToStartPage.linkText}
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            </a>
+            ?
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/partner-sas/components/NotFound/notFound.module.css

@@ -0,0 +1,68 @@
+.container {
+  margin-top: 0;
+  background: var(--Background-Primary);
+  position: relative;
+  background-clip: content-box;
+}
+
+.content {
+  position: relative;
+  text-align: center;
+  box-sizing: content-box;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
+  padding: 70px 30px;
+}
+
+.header {
+  font-family:
+    brandon text,
+    Arial,
+    Helvetica,
+    sans-serif;
+  font-size: 32px;
+  line-height: 1;
+  margin: 0;
+  text-transform: uppercase;
+  font-weight: 400;
+  color: #483729;
+}
+
+.pitch {
+  margin-top: 32px;
+  margin-bottom: 16px;
+}
+
+.text {
+  font-family:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-weight: 300;
+  line-height: normal;
+  text-transform: none;
+  font-size: 20px;
+  color: #333;
+}
+
+.link {
+  color: #00838e;
+  text-decoration: none;
+}
+
+@media screen and (min-width: 740px) {
+  .content {
+    text-align: left;
+  }
+}
+
+@media screen and (min-width: 950px) {
+  .header {
+    font-size: 46px;
+  }
+
+  .text {
+    font-size: 24px;
+  }
+}