From 3f6127b861a654244d3f5695118b7b277bcd3882 Mon Sep 17 00:00:00 2001 From: Christian Andolf Date: Mon, 23 Jun 2025 16:48:03 +0200 Subject: [PATCH] feat(LOY-276): add hero image to account page --- .../my-pages/[...path]/page.module.css | 45 +++++++++++++++++-- .../(protected)/my-pages/[...path]/page.tsx | 37 ++++++++++++--- .../SAS/LinkedAccounts/index.tsx | 16 +++---- .../LinkedAccounts/linkedAccounts.module.css | 11 ----- .../Query/AccountPage/AccountPage.graphql | 2 + .../contentstack/accountPage/output.ts | 6 +++ 6 files changed, 87 insertions(+), 30 deletions(-) diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css index 80c9c8513..e4f2c943f 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css @@ -1,18 +1,57 @@ +.header { + height: 400px; + position: relative; + display: flex; + align-items: flex-end; + justify-content: center; + padding: var(--Space-x4); + border-radius: var(--Corner-radius-lg); + overflow: hidden; + + &::after { + content: ""; + position: absolute; + inset: 0; + z-index: 2; + background: linear-gradient( + 180deg, + color-mix(in srgb, transparent, var(--Text-Brand-OnPrimary-1-Default) 8%) + 13%, + color-mix(in srgb, transparent, var(--Text-Brand-OnPrimary-1-Heading) 40%) + 100% + ); + } +} + +.heading { + position: relative; + z-index: 3; + color: var(--Text-Inverted); +} + +.image { + z-index: 1; +} + .blocks { display: grid; - gap: var(--Spacing-x5); + gap: var(--Space-x5); max-width: var(--max-width-page); align-content: flex-start; } @media screen and (min-width: 768px) { .blocks { - gap: var(--Spacing-x7); + gap: var(--Space-x7); } } @media screen and (min-width: 1367px) { + .header { + height: 480px; + padding-bottom: 150px; + } .blocks { - gap: var(--Spacing-x7); + gap: var(--Space-x7); } } diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx index e51798f28..c0c623398 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx @@ -1,6 +1,9 @@ +import { Typography } from "@scandic-hotels/design-system/Typography" + import { serverClient } from "@/lib/trpc/server" import Blocks from "@/components/Blocks" +import Image from "@/components/Image" import SectionHeader from "@/components/Section/Header" import TrackingSDK from "@/components/TrackingSDK" import { getIntl } from "@/i18n" @@ -23,17 +26,37 @@ export default async function MyPages({}: PageArgs< } const { tracking, accountPage } = accountPageRes - const { heading, preamble, content } = accountPage + const { heading, preamble, hero_image, hero_image_active, content } = + accountPage return ( <>
- + {hero_image_active ? ( +
+ +

{heading}

+ + {hero_image ? ( + {hero_image.meta.alt + ) : null} +
+ ) : ( + + )} {content?.length ? ( diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx index 50054b4d7..a8c498a31 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx @@ -47,11 +47,9 @@ export default async function SASLinkedAccount({ -
- }> - - -
+ }> + +
@@ -98,7 +96,7 @@ async function MatchedAccountInfo() { const matchState = calculateMatchState(user.loyalty) return ( -
+
-
+
) } @@ -156,7 +154,7 @@ async function MatchedAccountInfoSkeleton() { const intl = await getIntl() return ( -
+
+ ) } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css index b01bd9d45..55bef4dc8 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css @@ -12,17 +12,6 @@ } } -.cardsContainer { - display: flex; - flex-direction: column; - gap: var(--Spacing-x3); - justify-content: flex-start; - - @media screen and (min-width: 768px) { - flex-direction: row; - } -} - .mutationSection { display: flex; flex-direction: column; diff --git a/apps/scandic-web/lib/graphql/Query/AccountPage/AccountPage.graphql b/apps/scandic-web/lib/graphql/Query/AccountPage/AccountPage.graphql index 68722151c..7aedd6be8 100644 --- a/apps/scandic-web/lib/graphql/Query/AccountPage/AccountPage.graphql +++ b/apps/scandic-web/lib/graphql/Query/AccountPage/AccountPage.graphql @@ -8,6 +8,8 @@ query GetAccountPage($locale: String!, $uid: String!) { account_page(locale: $locale, uid: $uid) { heading preamble + hero_image + hero_image_active title url content { diff --git a/apps/scandic-web/server/routers/contentstack/accountPage/output.ts b/apps/scandic-web/server/routers/contentstack/accountPage/output.ts index c645f2650..d4fa14f05 100644 --- a/apps/scandic-web/server/routers/contentstack/accountPage/output.ts +++ b/apps/scandic-web/server/routers/contentstack/accountPage/output.ts @@ -11,6 +11,7 @@ import { shortcutsSchema, } from "../schemas/blocks/shortcuts" import { textContentSchema } from "../schemas/blocks/textContent" +import { tempImageVaultAssetSchema } from "../schemas/imageVault" import { systemSchema } from "../schemas/system" import { AccountPageEnum } from "@/types/enums/accountPage" @@ -44,6 +45,11 @@ export const accountPageSchema = z.object({ content: discriminatedUnionArray(blocksSchema.options), heading: z.string().nullable(), preamble: z.string().nullable(), + hero_image: tempImageVaultAssetSchema, + hero_image_active: z + .boolean() + .nullable() + .transform((val) => val ?? false), title: z.string(), url: z.string(), system: systemSchema.merge(