feat(LOY-199): add benefits link to dtmc modal

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>
     </>
   )

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;