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
This commit is contained in:
Emma Zettervall
2025-11-28 15:08:06 +00:00
parent 69f194f7bf
commit f443bae46e
54 changed files with 3631 additions and 70 deletions

View File

@@ -5,10 +5,12 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import { isBoostedBySas } from "@scandic-hotels/trpc/routers/user/helpers"
import { membershipLevels } from "@/constants/membershipLevels"
import { getUsePointsModal } from "@/lib/trpc/memoizedRequests"
import MembershipLevelIcon from "@/components/Levels/Icon"
import { getIntl } from "@/i18n"
import { UsePointsModal } from "./UsePoints/UsePointsModal"
import SasBoostStatus from "./SasBoostStatus"
import styles from "./membershipOverviewCard.module.css"
@@ -24,6 +26,8 @@ export default async function MembershipOverviewCard({
}: MembershipOverviewCardProps) {
const intl = await getIntl()
const usePointsData = await getUsePointsModal()
if (!user.membership?.membershipLevel) {
return null
}
@@ -70,17 +74,28 @@ export default async function MembershipOverviewCard({
color="Border/Divider/Brand/OnPrimary 3/Default"
/>
<Typography variant="Title/Overline/sm">
<h3 className={styles.headingText}>
{intl.formatMessage({
id: "common.pointsToSpend",
defaultMessage: "Points to spend",
})}
</h3>
</Typography>
<Typography variant="Title/lg">
<p className={styles.pointsValue}>{pointsToSpendText}</p>
</Typography>
<div className={styles.bottom}>
<div>
<Typography variant="Title/Overline/sm">
<h3 className={styles.headingText}>
{intl.formatMessage({
id: "common.pointsToSpend",
defaultMessage: "Points to spend",
})}
</h3>
</Typography>
<Typography variant="Title/lg">
<p className={styles.pointsValue}>{pointsToSpendText}</p>
</Typography>
</div>
{user.membership.currentPoints > 0 && usePointsData && (
<UsePointsModal
buttonVariant="Primary"
contentData={usePointsData}
points={user.membership.currentPoints}
/>
)}
</div>
</section>
)
}