feat(LOY-263): added new link to missing points form

removed soonest stays for redundancy

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx

@@ -1,18 +1,25 @@
+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 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"
 
+import styles from "./previous.module.css"
+
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function PreviousStays({
   title,
-  subtitle,
   link,
 }: AccountPageComponentProps) {
+  const intl = await getIntl()
   const caller = await serverClient()
   const initialPreviousStays = await caller.user.stays.previous({
     limit: 6,
@@ -24,7 +31,28 @@ export default async function PreviousStays({
 
   return (
     <SectionContainer>
-      <SectionHeader title={title} preamble={subtitle} link={link} />
+      <div className={styles.header}>
+        <SectionHeader title={title} link={link} />
+        <div className={styles.claim}>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "Missing a previous stay?",
+              })}
+            </p>
+          </Typography>
+          <ButtonLink
+            href="https://www.scandichotels.com/forms/missing-points"
+            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>
+      </div>
       <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css

@@ -0,0 +1,22 @@
+.header {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  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;
+    flex-direction: row;
+    gap: var(--Space-x6);
+  }
+}