feat(BOOK-743): Replaced deprecated Button component

Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2026-01-21 09:38:38 +00:00
parent f834433d4d
commit 8e08af718c
77 changed files with 575 additions and 2233 deletions
@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
import { serializeBookingSearchParams } from "@scandic-hotels/booking-flow/utils/url"
import { BOOK_NOW_SESSION_KEY } from "@scandic-hotels/common/constants/sessionKeys"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { LinkList } from "@scandic-hotels/design-system/LinkList"
import { MessageBanner } from "@scandic-hotels/design-system/MessageBanner"
import Modal from "@scandic-hotels/design-system/Modal"
@@ -15,7 +14,7 @@ import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
import { rewardNightsURL } from "@/constants/rewards"
import InfoCard from "@/components/ContentType/StartPage/InfoCard"
import InfoCardWithImage from "@/components/ContentType/StartPage/InfoCardWithImage"
import { UsePointsButton } from "./UsePointsButton"
@@ -120,7 +119,7 @@ export function UsePointsModal({
</div>
<div>
{points >= 10000 ? (
<InfoCard
<InfoCardWithImage
image={items.image}
heading={intl.formatMessage({
id: "myPages.membershipPointsModal.headingAboveThreshold",
@@ -132,35 +131,32 @@ export function UsePointsModal({
})}
primaryButton={{
href: bookLink,
title: intl.formatMessage({
text: intl.formatMessage({
id: "myPages.membershipPointsModal.bookNow",
defaultMessage: "Book now",
}),
forceReload: true,
// Kind of a hack to make sure the link opens with focus inside the booking widget
// This should be refactored and the booking widget should handle this itself.
// Currently it only listens to the search param on first load.
isExternal: true,
onClick: () => trackButtonClick("book now"),
}}
secondaryButton={{
href: rewardNightsURL,
title: intl.formatMessage({
text: intl.formatMessage({
id: "myPages.membershipPointsModal.priceList",
defaultMessage: "Price list",
}),
openInNewTab: true,
materialIcon: (
<MaterialIcon
icon="open_in_new"
color="CurrentColor"
size={20}
/>
),
trailingIconName: "open_in_new",
onClick: () => trackButtonClick("price list"),
}}
onPrimaryButtonClick={() => trackButtonClick("book now")}
onSecondaryButtonClick={() => trackButtonClick("price list")}
theme="primaryDark"
theme="Primary 3"
imagePosition="top"
height="dynamic"
></InfoCard>
/>
) : (
<InfoCard
<InfoCardWithImage
heading={intl.formatMessage({
id: "myPages.membershipPointsModal.headingBelowThreshold",
defaultMessage:
@@ -168,24 +164,18 @@ export function UsePointsModal({
})}
secondaryButton={{
href: rewardNightsURL,
title: intl.formatMessage({
text: intl.formatMessage({
id: "myPages.membershipPointsModal.priceList",
defaultMessage: "Price list",
}),
openInNewTab: true,
materialIcon: (
<MaterialIcon
icon="open_in_new"
color="CurrentColor"
size={20}
/>
),
trailingIconName: "open_in_new",
onClick: () => trackButtonClick("price list"),
}}
onSecondaryButtonClick={() => trackButtonClick("price list")}
theme="primaryDark"
theme="Primary 3"
imagePosition="top"
height="dynamic"
></InfoCard>
/>
)}
</div>
<div>