scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-1391-join-scandic-friends-startpage (pull request #1260)

Browse Source 
feat(SW-1391): add join scandic friends block

Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Christian Andolf
2025-02-06 15:05:06 +00:00
parent 7c8d6cbc2e 053ce3f4de
commit 9fafb33d26
14 changed files with 348 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
components/Blocks/JoinScandicFriends/index.tsx Normal file
View File

@@ -0,0 +1,83 @@
import { SurpriseIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./joinScandicFriends.module.css"
import type { JoinScandicFriends } from "@/types/trpc/routers/contentstack/startPage"
interface JoinScandicFriendsProps {
content: JoinScandicFriends
}
export default function JoinScandicFriends({
content,
}: JoinScandicFriendsProps) {
const { show_header, show_usp, usp, primary_button } = content
return (
<div className={styles.container}>
<div className={styles.iconContainer}>
{content.image ? (
<Image
src={content.image.url}
alt={content.image.title}
width={384}
height={384}
/>
) : (
<SurpriseIcon width={384} height={384} />
)}
</div>
<div className={styles.content}>
<div className={styles.textContent}>
{show_header ? (
<header className={styles.header}>
<BiroScript color="red" type="two">
{content.scripted_top_title}
</BiroScript>
<Title level="h3">{content.title}</Title>
</header>
) : null}
<Preamble>{content.preamble}</Preamble>
{show_usp && usp.length ? (
<ul className={styles.usp}>
{usp.map((uspBullet) => (
<Body asChild key={uspBullet}>
<li>{uspBullet}</li>
</Body>
))}
</ul>
) : null}
</div>
{content.has_primary_button ? (
<div className={styles.buttonContainer}>
<Button
theme="base"
intent="primary"
size="small"
fullWidth
asChild
>
<Link
href={primary_button.href}
target={primary_button.openInNewTab ? "_blank" : undefined}
color="none"
size="regular"
>
{primary_button.title}
</Link>
</Button>
</div>
) : null}
</div>
</div>
)
}

75
components/Blocks/JoinScandicFriends/joinScandicFriends.module.css Normal file
View File

@@ -0,0 +1,75 @@
.container {
border-radius: var(--Corner-radius-Large);
background-color: var(--Main-Brand-WarmWhite);
padding: 0 var(--Spacing-x2);
display: flex;
gap: var(--Spacing-x5);
}
@media screen and (min-width: 768px) {
.container {
padding: 0 var(--Spacing-x4) 0 0;
}
}
.iconContainer {
display: none;
}
@media screen and (min-width: 768px) {
.iconContainer {
width: 384px;
display: flex; /* gets rid of whitespace */
}
}
.content {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
padding: var(--Spacing-x3) 0;
}
.textContent {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
}
.header {
display: grid;
gap: var(--Spacing-x-quarter);
}
.usp {
list-style: none;
display: grid;
gap: var(--Spacing-x1);
}
@media screen and (min-width: 768px) {
.usp {
grid-template-columns: repeat(3, 1fr);
padding: var(--Spacing-x-one-and-half) 0;
}
}
.usp li {
display: flex;
align-items: center;
gap: var(--Spacing-x1);
padding-left: var(--Spacing-x1);
}
.usp li:before {
content: url("/_static/icons/heart.svg");
position: relative;
top: 3px;
}
@media screen and (min-width: 768px) {
.buttonContainer {
display: flex;
width: 180px;
}
}

3
components/Blocks/index.tsx
View File

@@ -10,6 +10,7 @@ import { SasTierComparison } from "@/components/SasTierComparison"
import AccordionSection from "./Accordion"
import FullWidthCampaign from "./FullWidthCampaign"
import HotelListing from "./HotelListing"
import JoinScandicFriends from "./JoinScandicFriends"
import Table from "./Table"
import type { BlocksProps } from "@/types/components/blocks"
@@ -104,6 +105,8 @@ export default function Blocks({ blocks }: BlocksProps) {
return <SasTierComparison content={block.sas_tier_comparison} />
case BlocksEnums.block.FullWidthCampaign:
return <FullWidthCampaign content={block.full_width_campaign} />
case BlocksEnums.block.JoinScandicFriends:
return <JoinScandicFriends content={block.join_scandic_friends} />
default:
return null
}

8
components/ContentType/StartPage/index.tsx
View File

@@ -21,7 +21,7 @@ export default async function StartPage() {
const { header, blocks } = content.startPage
return (
<>
<div className={styles.background}>
<header className={styles.header}>
<div className={styles.headerContent}>
<Title color="white" textAlign="center">
@@ -45,7 +45,7 @@ export default async function StartPage() {
) : null}
</header>
<main className={styles.main}>
{(blocks || []).map((block) => {
{(blocks || []).map((block, index) => {
if (block.typename === BlocksEnums.block.FullWidthCampaign) {
return (
<FullWidthCampaign
@@ -56,7 +56,7 @@ export default async function StartPage() {
}
return (
<div key={block.typename} className={styles.section}>
<div key={`${block.typename}-${index}`} className={styles.section}>
<Blocks blocks={[block]} />
</div>
)
@@ -65,6 +65,6 @@ export default async function StartPage() {
<Suspense fallback={null}>
<TrackingSDK pageData={content.tracking} />
</Suspense>
</>
</div>
)
}

4
components/ContentType/StartPage/startPage.module.css
View File

@@ -1,3 +1,7 @@
.background {
background-color: var(--Base-Surface-Primary-light-Normal);
}
.header {
height: 560px;
position: relative;

37
components/Icons/Surprise.tsx Normal file
View File

File diff suppressed because one or more lines are too long

1
components/Icons/index.tsx
View File

@@ -162,6 +162,7 @@ export { default as SpeakerIcon } from "./Speaker"
export { default as StarFilledIcon } from "./StarFilled"
export { default as StoreIcon } from "./Store"
export { default as StreetIcon } from "./Street"
export { default as SurpriseIcon } from "./Surprise"
export { default as SwimIcon } from "./Swim"
export { default as ThermostatIcon } from "./Thermostat"
export { default as TrainIcon } from "./Train"

77
lib/graphql/Fragments/Blocks/JoinScandicFriends.graphql Normal file
View File

@@ -0,0 +1,77 @@
#import "../PageLink/AccountPageLink.graphql"
#import "../PageLink/ContentPageLink.graphql"
#import "../PageLink/LoyaltyPageLink.graphql"
#import "../PageLink/HotelPageLink.graphql"
#import "../PageLink/CollectionPageLink.graphql"
#import "../PageLink/DestinationCityPageLink.graphql"
#import "../PageLink/DestinationCountryPageLink.graphql"
#import "../PageLink/DestinationOverviewPageLink.graphql"
#import "../AccountPage/Ref.graphql"
#import "../ContentPage/Ref.graphql"
#import "../HotelPage/Ref.graphql"
#import "../LoyaltyPage/Ref.graphql"
#import "../CollectionPage/Ref.graphql"
#import "../DestinationCityPage/Ref.graphql"
#import "../DestinationCountryPage/Ref.graphql"
#import "../DestinationOverviewPage/Ref.graphql"
fragment JoinScandicFriends_StartPage on StartPageBlocksJoinScandicFriends {
__typename
join_scandic_friends {
show_header
scripted_top_title
title
preamble
image
show_usp
usp
has_primary_button
primary_button {
cta_text
open_in_new_tab
is_contentstack_link
external_link {
href
title
}
linkConnection {
edges {
node {
__typename
...AccountPageLink
...ContentPageLink
...LoyaltyPageLink
...HotelPageLink
...CollectionPageLink
...DestinationCityPageLink
...DestinationCountryPageLink
...DestinationOverviewPageLink
}
}
}
}
}
}
fragment JoinScandicFriends_StartPageRefs on StartPageBlocksJoinScandicFriends {
join_scandic_friends {
primary_button {
linkConnection {
edges {
node {
__typename
...AccountPageRef
...ContentPageRef
...HotelPageRef
...LoyaltyPageRef
...CollectionPageRef
...DestinationCityPageRef
...DestinationCountryPageRef
...DestinationOverviewPageRef
}
}
}
}
}
}

3
lib/graphql/Query/StartPage/StartPage.graphql
View File

@@ -2,6 +2,7 @@
#import "../../Fragments/Blocks/CardsGrid.graphql"
#import "../../Fragments/Blocks/FullWidthCampaign.graphql"
#import "../../Fragments/Blocks/CarouselCards.graphql"
#import "../../Fragments/Blocks/JoinScandicFriends.graphql"
query GetStartPage($locale: String!, $uid: String!) {
start_page(locale: $locale, uid: $uid) {
@@ -27,6 +28,7 @@ query GetStartPage($locale: String!, $uid: String!) {
}
}
}
...JoinScandicFriends_StartPage
}
system {
...System
@@ -56,6 +58,7 @@ query GetStartPageRefs($locale: String!, $uid: String!) {
}
}
}
...JoinScandicFriends_StartPageRefs
}
system {
...System

36
server/routers/contentstack/schemas/blocks/joinScandicFriends.ts Normal file
View File

@@ -0,0 +1,36 @@
import { z } from "zod"
import { tempImageVaultAssetSchema } from "../imageVault"
import { buttonSchema } from "./utils/buttonLinkSchema"
import { linkConnectionRefsSchema } from "./utils/linkConnection"
import { BlocksEnums } from "@/types/enums/blocks"
export const joinScandicFriendsSchema = z.object({
join_scandic_friends: z.object({
show_header: z.boolean().default(false),
scripted_top_title: z.string(),
title: z.string(),
preamble: z.string(),
image: tempImageVaultAssetSchema,
show_usp: z.boolean().default(false),
usp: z.array(z.string()),
has_primary_button: z.boolean().default(false),
primary_button: buttonSchema,
}),
})
export const joinScandicFriendsBlockSchema = z
.object({
typename: z
.literal(BlocksEnums.block.JoinScandicFriends)
.optional()
.default(BlocksEnums.block.JoinScandicFriends),
})
.merge(joinScandicFriendsSchema)
export const joinScandicFriendsBlockRefsSchema = z.object({
join_scandic_friends: z.object({
primary_button: linkConnectionRefsSchema,
}),
})

18
server/routers/contentstack/startPage/output.ts
View File

@@ -14,6 +14,10 @@ import {
fullWidthCampaignBlockRefsSchema,
fullWidthCampaignBlockSchema,
} from "../schemas/blocks/fullWidthCampaign"
import {
joinScandicFriendsBlockRefsSchema,
joinScandicFriendsBlockSchema,
} from "../schemas/blocks/joinScandicFriends"
import { tempImageVaultAssetSchema } from "../schemas/imageVault"
import { systemSchema } from "../schemas/system"
@@ -37,10 +41,17 @@ const startPageFullWidthCampaign = z
})
.merge(fullWidthCampaignBlockSchema)
const startPageJoinScandicFriends = z
.object({
__typename: z.literal(StartPageEnum.ContentStack.blocks.JoinScandicFriends),
})
.merge(joinScandicFriendsBlockSchema)
export const blocksSchema = z.discriminatedUnion("__typename", [
startPageCards,
startPageFullWidthCampaign,
startPageCarouselCards,
startPageJoinScandicFriends,
])
export const startPageSchema = z.object({
@@ -82,10 +93,17 @@ const startPageCarouselCardsRef = z
})
.merge(carouselCardsRefsSchema)
const startPageJoinScandicFriendsRef = z
.object({
__typename: z.literal(StartPageEnum.ContentStack.blocks.JoinScandicFriends),
})
.merge(joinScandicFriendsBlockRefsSchema)
const startPageBlockRefsItem = z.discriminatedUnion("__typename", [
startPageCardsRefs,
startPageFullWidthCampaignRef,
startPageCarouselCardsRef,
startPageJoinScandicFriendsRef,
])
export const startPageRefsSchema = z.object({

1
types/enums/blocks.ts
View File

@@ -13,5 +13,6 @@ export namespace BlocksEnums {
HotelListing = "HotelListing",
FullWidthCampaign = "FullWidthCampaign",
CarouselCards = "CarouselCards",
JoinScandicFriends = "JoinScandicFriends",
}
}

1
types/enums/startPage.ts
View File

@@ -4,6 +4,7 @@ export namespace StartPageEnum {
CardsGrid = "StartPageBlocksCardsGrid",
CarouselCards = "StartPageBlocksCarouselCards",
FullWidthCampaign = "StartPageBlocksFullWidthCampaign",
JoinScandicFriends = "StartPageBlocksJoinScandicFriends",
}
}
}

5
types/trpc/routers/contentstack/startPage.ts
View File

@@ -1,6 +1,7 @@
import type { z } from "zod"
import type { fullWidthCampaignSchema } from "@/server/routers/contentstack/schemas/blocks/fullWidthCampaign"
import type { joinScandicFriendsSchema } from "@/server/routers/contentstack/schemas/blocks/joinScandicFriends"
import type {
blocksSchema,
startPageRefsSchema,
@@ -20,3 +21,7 @@ export type Block = z.output<typeof blocksSchema>
export type FullWidthCampaign = z.output<
typeof fullWidthCampaignSchema
>["full_width_campaign"]
export type JoinScandicFriends = z.output<
typeof joinScandicFriendsSchema
>["join_scandic_friends"]