diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/claimPoints.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/claimPoints.module.css
new file mode 100644
index 000000000..9421503c6
--- /dev/null
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/claimPoints.module.css
@@ -0,0 +1,8 @@
+.claim {
+ color: var(--Text-Secondary);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--Space-x2);
+ white-space: nowrap;
+}
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx
new file mode 100644
index 000000000..5bc7d4db2
--- /dev/null
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { missingPoints } from "@/constants/missingPointsHrefs"
+
+import ButtonLink from "@/components/ButtonLink"
+import useLang from "@/hooks/useLang"
+
+import styles from "./claimPoints.module.css"
+
+export default function ClaimPoints() {
+ const intl = useIntl()
+ const lang = useLang()
+
+ return (
+
+
+
+ {intl.formatMessage({
+ defaultMessage: "Missing a previous stay?",
+ })}
+
+
+
+ {intl.formatMessage({ defaultMessage: "Claim points" })}
+
+
+
+ )
+}
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/earnAndBurn.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/earnAndBurn.module.css
new file mode 100644
index 000000000..f2ed22bcc
--- /dev/null
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/earnAndBurn.module.css
@@ -0,0 +1,14 @@
+.header {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: var(--Space-x1);
+}
+
+@media screen and (min-width: 1367px) {
+ .header {
+ align-items: center;
+ flex-direction: row;
+ gap: var(--Space-x6);
+ }
+}
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx
index 28b92f18c..2405f053d 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx
@@ -2,8 +2,11 @@ import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
+import ClaimPoints from "../ClaimPoints"
import JourneyTable from "./JourneyTable"
+import styles from "./earnAndBurn.module.css"
+
import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
export default function EarnAndBurn({
@@ -13,7 +16,11 @@ export default function EarnAndBurn({
}: AccountPageComponentProps) {
return (
-
+
+
+
+
+
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
index 788bc2082..97febbfe6 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
@@ -1,13 +1,9 @@
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
import { serverClient } from "@/lib/trpc/server"
-import ButtonLink from "@/components/ButtonLink"
+import ClaimPoints from "@/components/Blocks/DynamicContent/Points/ClaimPoints"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
-import { getIntl } from "@/i18n"
import ClientPreviousStays from "./Client"
@@ -19,7 +15,6 @@ export default async function PreviousStays({
title,
link,
}: AccountPageComponentProps) {
- const intl = await getIntl()
const caller = await serverClient()
const initialPreviousStays = await caller.user.stays.previous({
limit: 6,
@@ -33,25 +28,8 @@ export default async function PreviousStays({
-
-
-
- {intl.formatMessage({
- defaultMessage: "Missing a previous stay?",
- })}
-
-
-
- {intl.formatMessage({ defaultMessage: "Claim points" })}
-
-
-
+
+
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css
index c3f0dfc1f..f2ed22bcc 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css
@@ -5,14 +5,6 @@
gap: var(--Space-x1);
}
-.claim {
- color: var(--Text-Secondary);
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: var(--Space-x2);
-}
-
@media screen and (min-width: 1367px) {
.header {
align-items: center;
diff --git a/apps/scandic-web/constants/missingPointsHrefs.ts b/apps/scandic-web/constants/missingPointsHrefs.ts
new file mode 100644
index 000000000..f07e94825
--- /dev/null
+++ b/apps/scandic-web/constants/missingPointsHrefs.ts
@@ -0,0 +1,10 @@
+import type { LangRoute } from "@/types/routes"
+
+export const missingPoints: LangRoute = {
+ da: "https://www.scandichotels.dk/form/manglende-point",
+ de: "https://www.scandichotels.de/formulare/fehlende-punkte",
+ fi: "https://www.scandichotels.fi/forms/puuttuvat-pisteet",
+ en: "https://www.scandichotels.com/forms/missing-points",
+ no: "https://www.scandichotels.no/form/manglende-poeng",
+ sv: "https://www.scandichotels.se/formular/saknade-poang",
+}