diff --git a/components/Blocks/JoinScandicFriends/index.tsx b/components/Blocks/JoinScandicFriends/index.tsx
new file mode 100644
index 000000000..3f0708bf9
--- /dev/null
+++ b/components/Blocks/JoinScandicFriends/index.tsx
@@ -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 (
+
+
+ {content.image ? (
+
+ ) : (
+
+ )}
+
+
+
+ {show_header ? (
+
+
+ {content.scripted_top_title}
+
+ {content.title}
+
+ ) : null}
+
+
{content.preamble}
+
+ {show_usp && usp.length ? (
+
+ {usp.map((uspBullet) => (
+
+ - {uspBullet}
+
+ ))}
+
+ ) : null}
+
+ {content.has_primary_button ? (
+
+
+
+ ) : null}
+
+
+ )
+}
diff --git a/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css b/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
new file mode 100644
index 000000000..a249af5c8
--- /dev/null
+++ b/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
@@ -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;
+ }
+}
diff --git a/components/Blocks/index.tsx b/components/Blocks/index.tsx
index 6b4995b1a..f0a5acf37 100644
--- a/components/Blocks/index.tsx
+++ b/components/Blocks/index.tsx
@@ -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
case BlocksEnums.block.FullWidthCampaign:
return
+ case BlocksEnums.block.JoinScandicFriends:
+ return
default:
return null
}
diff --git a/components/ContentType/StartPage/index.tsx b/components/ContentType/StartPage/index.tsx
index 17b177b3d..01e174ecd 100644
--- a/components/ContentType/StartPage/index.tsx
+++ b/components/ContentType/StartPage/index.tsx
@@ -21,7 +21,7 @@ export default async function StartPage() {
const { header, blocks } = content.startPage
return (
- <>
+
@@ -45,7 +45,7 @@ export default async function StartPage() {
) : null}
- {(blocks || []).map((block) => {
+ {(blocks || []).map((block, index) => {
if (block.typename === BlocksEnums.block.FullWidthCampaign) {
return (
+
)
@@ -65,6 +65,6 @@ export default async function StartPage() {
- >
+
)
}
diff --git a/components/ContentType/StartPage/startPage.module.css b/components/ContentType/StartPage/startPage.module.css
index 2c9b1f6b3..3116430fc 100644
--- a/components/ContentType/StartPage/startPage.module.css
+++ b/components/ContentType/StartPage/startPage.module.css
@@ -1,3 +1,7 @@
+.background {
+ background-color: var(--Base-Surface-Primary-light-Normal);
+}
+
.header {
height: 560px;
position: relative;
diff --git a/components/Icons/Surprise.tsx b/components/Icons/Surprise.tsx
new file mode 100644
index 000000000..f590d198e
--- /dev/null
+++ b/components/Icons/Surprise.tsx
@@ -0,0 +1,37 @@
+import type { IconProps } from "@/types/components/icon"
+
+export default function SurpriseIcon({ color, ...props }: IconProps) {
+ return (
+
+ )
+}
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
index 5a7045654..4e7131d1b 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -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"
diff --git a/lib/graphql/Fragments/Blocks/JoinScandicFriends.graphql b/lib/graphql/Fragments/Blocks/JoinScandicFriends.graphql
new file mode 100644
index 000000000..54827fde9
--- /dev/null
+++ b/lib/graphql/Fragments/Blocks/JoinScandicFriends.graphql
@@ -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
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/lib/graphql/Query/StartPage/StartPage.graphql b/lib/graphql/Query/StartPage/StartPage.graphql
index 03c113478..6ba478994 100644
--- a/lib/graphql/Query/StartPage/StartPage.graphql
+++ b/lib/graphql/Query/StartPage/StartPage.graphql
@@ -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
diff --git a/server/routers/contentstack/schemas/blocks/joinScandicFriends.ts b/server/routers/contentstack/schemas/blocks/joinScandicFriends.ts
new file mode 100644
index 000000000..6bb25a868
--- /dev/null
+++ b/server/routers/contentstack/schemas/blocks/joinScandicFriends.ts
@@ -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,
+ }),
+})
diff --git a/server/routers/contentstack/startPage/output.ts b/server/routers/contentstack/startPage/output.ts
index 4ee6b6212..e0372230e 100644
--- a/server/routers/contentstack/startPage/output.ts
+++ b/server/routers/contentstack/startPage/output.ts
@@ -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({
diff --git a/types/enums/blocks.ts b/types/enums/blocks.ts
index ad3532441..b833e4a76 100644
--- a/types/enums/blocks.ts
+++ b/types/enums/blocks.ts
@@ -13,5 +13,6 @@ export namespace BlocksEnums {
HotelListing = "HotelListing",
FullWidthCampaign = "FullWidthCampaign",
CarouselCards = "CarouselCards",
+ JoinScandicFriends = "JoinScandicFriends",
}
}
diff --git a/types/enums/startPage.ts b/types/enums/startPage.ts
index 684cfd7de..da55c58ca 100644
--- a/types/enums/startPage.ts
+++ b/types/enums/startPage.ts
@@ -4,6 +4,7 @@ export namespace StartPageEnum {
CardsGrid = "StartPageBlocksCardsGrid",
CarouselCards = "StartPageBlocksCarouselCards",
FullWidthCampaign = "StartPageBlocksFullWidthCampaign",
+ JoinScandicFriends = "StartPageBlocksJoinScandicFriends",
}
}
}
diff --git a/types/trpc/routers/contentstack/startPage.ts b/types/trpc/routers/contentstack/startPage.ts
index ae93ef46a..a1d24bb76 100644
--- a/types/trpc/routers/contentstack/startPage.ts
+++ b/types/trpc/routers/contentstack/startPage.ts
@@ -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
export type FullWidthCampaign = z.output<
typeof fullWidthCampaignSchema
>["full_width_campaign"]
+
+export type JoinScandicFriends = z.output<
+ typeof joinScandicFriendsSchema
+>["join_scandic_friends"]