From 53c21bb60121775dd4679a50cbe3040432642d65 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Thu, 8 May 2025 14:25:16 +0200
Subject: [PATCH] feat(LOY-199): add benefits link to dtmc modal

---
 .../MyPages/DigitalTeamMemberCard/Client.tsx     | 16 ++++++++++++++--
 .../digitalTeamMemberCard.module.css             |  6 ++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx
index c1ed47aae..24655294c 100644
--- a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx
+++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx
@@ -7,6 +7,7 @@ import { useIntl } from "react-intl"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import ButtonLink from "@/components/ButtonLink"
 import Modal from "@/components/Modal"
 import useWakeLock from "@/hooks/useWakeLock"
 
@@ -117,13 +118,24 @@ export default function DigitalTeamMemberCardClient({
           </div>
         </div>
         <Typography variant="Body/Paragraph/mdRegular">
-          <div className={styles.footer}>
+          <p className={styles.footer}>
             {intl.formatMessage({
               defaultMessage:
                 "Book discounted stays for yourself, family and friends!",
             })}
-          </div>
+          </p>
         </Typography>
+        {/* TODO: Add missing link to benefits page */}
+        <ButtonLink href="#" target="_blank" variant="Tertiary">
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <span className={styles.link}>
+              {intl.formatMessage({
+                defaultMessage: "Check out all your benefits",
+              })}
+              <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
+            </span>
+          </Typography>
+        </ButtonLink>
       </Modal>
     </>
   )
diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css
index 9487632bf..6244f18c6 100644
--- a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css
+++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css
@@ -110,6 +110,12 @@
   text-align: center;
 }
 
+.link {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x05);
+}
+
 @media screen and (min-width: 768px) {
   .modal {
     max-width: 375px;