diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx new file mode 100644 index 000000000..751580b43 --- /dev/null +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx @@ -0,0 +1,134 @@ +import { Typography } from "@scandic-hotels/design-system/Typography" +import { getEurobonusMembership } from "@scandic-hotels/trpc/routers/user/helpers" + +import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests" + +import ButtonLink from "@/components/ButtonLink" +import Image from "@/components/Image" +import { getIntl } from "@/i18n" +import desktopBackground from "@/public/_static/img/sas/sas-scandic-link-account-banner-desktop.png" +import mobileBackground from "@/public/_static/img/sas/sas-scandic-link-account-banner-mobile.png" + +import styles from "./linkAccountBanner.module.css" + +import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent" + +export default async function SASLinkAccountBanner( + props: DynamicContentProps["dynamic_content"] +) { + const intl = await getIntl() + const user = await getProfileWithExtendedPartnerData() + + if (!user || "error" in user || !user.loyalty) { + return null + } + const sasMembership = getEurobonusMembership(user.loyalty) + if (sasMembership) { + return null + } + + function match() { + return ( + + {intl.formatMessage({ + defaultMessage: "MATCH", + })} + + ) + } + + const headingText = intl.formatMessage( + { + defaultMessage: "A MADE IN HEAVEN", + }, + { + match, + } + ) + + const buttonText = + props.link?.text || + intl.formatMessage({ + defaultMessage: "Read more and link accounts", + }) + + function scandicFriends() { + return ( + + {intl.formatMessage({ + defaultMessage: "Scandic Friends", + })} + + ) + } + + function sasEuroBonus() { + return ( + + {intl.formatMessage({ + defaultMessage: "SAS EuroBonus", + })} + + ) + } + + const descriptionText = intl.formatMessage( + { + defaultMessage: + "Link your and accounts to earn, use and exchange points between memberships", + }, + { + scandicFriends, + sasEuroBonus, + } + ) + + return ( +
+
+ SAS Scandic Link Account Banner Mobile Background + SAS Scandic Link Account Banner Desktop Background +
+
+ +
+
+ +

{headingText}

+
+
+ +
+ +

{descriptionText}

+
+
+ + {props.link?.href ? ( +
+ + {buttonText} + +
+ ) : null} +
+
+ ) +} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/linkAccountBanner.module.css b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/linkAccountBanner.module.css new file mode 100644 index 000000000..c0d091c74 --- /dev/null +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/linkAccountBanner.module.css @@ -0,0 +1,114 @@ +.container { + position: relative; + overflow: hidden; + border-radius: var(--Corner-radius-lg); + background: linear-gradient( + to right, + var(--Scandic-Blue-60), + var(--Scandic-Blue-80) + ); +} + +.backgroundImage { + position: absolute; + inset: 0; +} + +.mobileImage { + object-fit: cover; + display: block; +} + +.desktopImage { + object-fit: cover; + display: none; +} + +.overlay { + position: absolute; + inset: 0; + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0) 23.33%, + rgba(0, 0, 0, 0.25) 61.67%, + rgba(0, 0, 0, 0.52) 100% + ); +} + +.content { + position: relative; + z-index: 10; + display: grid; + grid-template-areas: + "heading" + "description" + "button"; + gap: var(--Space-x2); + min-height: 200px; + color: var(--Text-Inverted); + padding: var(--Space-x5) var(--Space-x3); +} + +.headingContainer { + grid-area: heading; +} +.descriptionContainer { + grid-area: description; +} +.buttonContainer { + grid-area: button; + justify-self: start; +} + +.brandName { + font-weight: 600; +} +.highlight { + color: var(--Scandic-Brand-Burgundy); +} + +@media (min-width: 768px) { + .container { + background: linear-gradient( + to right, + var(--Scandic-Yellow-10), + var(--Scandic-Peach-20) + ); + } + + .mobileImage { + display: none; + } + .desktopImage { + display: block; + } + + .overlay { + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0.18) 50%, + rgba(0, 0, 0, 0.38) 100% + ); + } + + .content { + grid-template-areas: + "heading button" + "description button"; + grid-template-columns: 2fr 1fr; + gap: var(--Space-x2) var(--Space-x4); + padding: var(--Space-x4) var(--Space-x4) var(--Space-x5); + } + + .headingContainer { + align-self: end; + } + .descriptionContainer { + align-self: start; + } + .buttonContainer { + justify-self: center; + align-self: center; + } +} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/index.tsx index 5a5ffd8ae..c3ada3e17 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/index.tsx @@ -11,6 +11,7 @@ import ExpiringPoints from "@/components/Blocks/DynamicContent/Points/ExpiringPo import PointsOverview from "@/components/Blocks/DynamicContent/Points/Overview" import CurrentRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/CurrentRewards" import NextLevelRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/NextLevel" +import SASLinkAccountBanner from "@/components/Blocks/DynamicContent/SAS/LinkAccountBanner" import SASLinkedAccount from "@/components/Blocks/DynamicContent/SAS/LinkedAccounts" import SASTransferPoints from "@/components/Blocks/DynamicContent/SAS/TransferPoints" import SASTierComparisonBlock from "@/components/Blocks/DynamicContent/SASTierComparison" @@ -63,6 +64,8 @@ function DynamicContentBlocks(props: DynamicContentProps) { return case DynamicContentEnum.Blocks.components.sas_linked_account: return + case DynamicContentEnum.Blocks.components.sas_link_account_banner: + return case DynamicContentEnum.Blocks.components.sas_transfer_points: return case DynamicContentEnum.Blocks.components.sas_tier_comparison: diff --git a/apps/scandic-web/public/_static/img/sas/sas-scandic-link-account-banner-desktop.png b/apps/scandic-web/public/_static/img/sas/sas-scandic-link-account-banner-desktop.png new file mode 100644 index 000000000..c4a218224 Binary files /dev/null and b/apps/scandic-web/public/_static/img/sas/sas-scandic-link-account-banner-desktop.png differ diff --git a/apps/scandic-web/public/_static/img/sas/sas-scandic-link-account-banner-mobile.png b/apps/scandic-web/public/_static/img/sas/sas-scandic-link-account-banner-mobile.png new file mode 100644 index 000000000..c145ec956 Binary files /dev/null and b/apps/scandic-web/public/_static/img/sas/sas-scandic-link-account-banner-mobile.png differ diff --git a/packages/trpc/lib/types/dynamicContent.ts b/packages/trpc/lib/types/dynamicContent.ts index 8e29e2cc9..d892d8e38 100644 --- a/packages/trpc/lib/types/dynamicContent.ts +++ b/packages/trpc/lib/types/dynamicContent.ts @@ -21,6 +21,7 @@ export namespace DynamicContentEnum { soonest_stays: "soonest_stays", upcoming_stays: "upcoming_stays", sas_linked_account: "sas_linked_account", + sas_link_account_banner: "sas_link_account_banner", sas_transfer_points: "sas_transfer_points", sas_tier_comparison: "sas_tier_comparison", } as const