feat(LOY-263): add link to missing points form to earn and burn

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;
+}

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 (
+    <div className={styles.claim}>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p>
+          {intl.formatMessage({
+            defaultMessage: "Missing a previous stay?",
+          })}
+        </p>
+      </Typography>
+      <ButtonLink
+        href={missingPoints[lang]}
+        variant="Text"
+        target="_blank"
+        size="Small"
+        typography="Body/Supporting text (caption)/smBold"
+      >
+        {intl.formatMessage({ defaultMessage: "Claim points" })}
+        <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
+      </ButtonLink>
+    </div>
+  )
+}