Merged in feat/LOY-400-create-spend-points-modal (pull request #3131)

Feat/LOY-400 create spend points modal

* feat(LOY-400): Added custom button to my pages overview and skeleton file to custom modal for my points.

* feat(LOY-400): Added custom button to my pages overview and components for custom modal for my points.

* feat(LOY-400): Changed some style and infogridcardover

* feat(LOY-400):Removed custom card components and changed in infoCard: Added imagePosition top, added optional height prop. In Card: Changed Text-wrap styling, added min-width styling to buttons, added optional Icon prop, added optional height prop

* feat(LOY-400):Added linkList, LinkListItem component and messageBanner component. Added granola illustration.

* feat(LOY-400): Removed background in several illustrations. Added component for illustration. Fixed LinkedList and styling for UsePointsButton.

* feat(LOY-400): Added modal to PointsToSpendCard and fixed UsePointsButton.

* fix(LOY-400):added some styling

* feat(LOY-400): Linked Modal to contentstack and fetch the data in cards with UsePointsModal for now

* feat(LOY-400): changed link to aria-component, cleaned up a bit

* feat(LOY-400): Changed height for larger modals in mobile, fixed zod schema for no illustration input, cleaned up

* fix(LOY-400): fixed graphql after rebase

* fix(LOY-400): mini fix

* fix(LOY-400): fixed pr-comments

* fix(LOY-400): fixed some PR-comments

* fix(LOY-400): fixed a PR-comment

* feat(LOY-400): added size prop to ilustration in LinkListItem to be able to use illustrations in IllustrationByIconName

* fix(LOY-400): fixed pr-comments

* Merged in feat/LOY-402-pre-ticked-book-reward-night-in-booking-flow (pull request #3210)

Feat/LOY-402 pre ticked book reward night in booking flow

* feat(LOY-402): Changed UsePointsModal structure to handle button actions in card.

* feat(LOY-402): added functionality for book now button

* feat(LOY-400): pr comment fix

* feat(LOY-402): transformed the contentstack data

* fix(LOY-402): fixed pr comments

Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Anton Gunnarsson
Approved-by: Matilda Landström

* Merged in feat/LOY-404-add-tracking-for-spend-points-modal (pull request #3229)

Feat/LOY-404 add tracking for spend points modal

* feat(LOY-402): Changed UsePointsModal structure to handle button actions in card.

* feat(LOY-402): added functionality for book now button

* feat(LOY-400): pr comment fix

* feat(LOY-402): transformed the contentstack data

* feat(LOY-404): added tracking

* fix(LOY-404): fix for session storage removal of bookNowFromPointsModal

* feat(LOY-404): added consts

* fix(LOY-404): moved foxusWidget const

* fix(LOY-404): moved BOOKING_WIDGET_STATE const

* fix(LOY-404):fix


Approved-by: Matilda Landström

* fix(LOY-400): some fixes

* feat(LOY-400): created linkList storybook


Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/DynamicContent/Points/PointsToSpendCard/PointsToSpendCard.module.css

@@ -85,7 +85,11 @@
   flex-direction: column;
   gap: var(--Space-x2);
 }
-
+@media screen and (max-width: 767px) {
+  .usePointsButton {
+    margin-top: var(--Space-x2);
+  }
+}
 @media screen and (min-width: 768px) {
   .content {
     grid-template-columns: auto 1fr;
@@ -105,6 +109,9 @@
     border-radius: 0;
     background: transparent;
   }
+  .usePointsButton {
+    padding: 0;
+  }
 }
 
 @media screen and (min-width: 1367px) {

apps/scandic-web/components/Blocks/DynamicContent/Points/PointsToSpendCard/index.tsx

@@ -1,13 +1,12 @@
-import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import MoneyHandEllipsisIcon from "@scandic-hotels/design-system/Icons/MoneyHandEllipsisIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { spendPoints } from "@/constants/webHrefs"
+import { getUsePointsModal } from "@/lib/trpc/memoizedRequests"
 
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
+import { UsePointsModal } from "../../Overview/MembershipOverviewCard/UsePoints/UsePointsModal"
 import ExpiringPointsSeeAllButton from "./ExpiringPointsSeeAllButton"
 import { getExpiryLabel } from "./utils"
 
@@ -25,6 +24,8 @@ export default async function PointsToSpendCard({
   const intl = await getIntl()
   const lang = await getLang()
 
+  const usePointsData = await getUsePointsModal()
+
   if (!user.membership) {
     return null
   }
@@ -74,18 +75,13 @@ export default async function PointsToSpendCard({
               </Typography>
             )}
           </div>
-          {hasPointsToSpend && (
-            <ButtonLink href={spendPoints[lang]} target="_blank" variant="Text">
-              {intl.formatMessage({
-                id: "points.pointsToSpendCard.howToSpendCta",
-                defaultMessage: "How to spend points",
-              })}
-              <MaterialIcon
-                icon="chevron_right"
-                color="CurrentColor"
-                size={24}
-              />
-            </ButtonLink>
+          {hasPointsToSpend && usePointsData && (
+            <UsePointsModal
+              buttonVariant="Text"
+              contentData={usePointsData}
+              points={user.membership.currentPoints}
+              className={styles.usePointsButton}
+            />
           )}
         </div>
       </div>