Merged in feat/LOY-361-add-promo-campaign-page-type (pull request #2826)

Feat/LOY-361 add promo campaign page type

* feat(LOY-361): add Pomo Campaign page type

* chore(SW-361): remove campaign page flag

* fix(LOY-361): cleanup

* fix(LOY-361): add promo code


Approved-by: Erik Tiekstra
Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Matilda Landström
2025-09-19 07:20:17 +00:00
parent c791fef2c6
commit 0e30a2d218
34 changed files with 613 additions and 19 deletions

View File

@@ -71,4 +71,4 @@ DTMC_ENTRA_ID_CLIENT=""
DTMC_ENTRA_ID_ISSUER=""
DTMC_ENTRA_ID_SECRET=""
CAMPAIGN_PAGES_ENABLED="0" # 0 - disabled, 1 - enabled
PROMO_CAMPAIGN_PAGES_ENABLED="0" # 0 - disabled, 1 - enabled

View File

@@ -0,0 +1,19 @@
import { Suspense } from "react"
import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
export default function PromoCampaignPageBreadcrumbs() {
const variants: Pick<BreadcrumbsProps, "color" | "size"> = {
color: "Background/Primary",
size: "contentWidth",
}
return (
<Suspense fallback={<BreadcrumbsSkeleton {...variants} />}>
<Breadcrumbs {...variants} />
</Suspense>
)
}

View File

@@ -1,18 +1,11 @@
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { env } from "@/env/server"
import CampaignOverviewPage from "@/components/ContentType/CampaignOverviewPage"
import CampaignOverviewPageSkeleton from "@/components/ContentType/CampaignOverviewPage/CampaignOverviewPageSkeleton"
import styles from "./page.module.css"
export default async function CampaignOverviewPagePage() {
if (!env.CAMPAIGN_PAGES_ENABLED) {
notFound()
}
return (
<div className={styles.page}>
<Suspense fallback={<CampaignOverviewPageSkeleton />}>

View File

@@ -1,8 +1,5 @@
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { env } from "@/env/server"
import CampaignPage from "@/components/ContentType/CampaignPage"
import CampaignPageSkeleton from "@/components/ContentType/CampaignPage/CampaignPageSkeleton"
@@ -11,10 +8,6 @@ import styles from "./page.module.css"
export { generateMetadata } from "@/utils/metadata/generateMetadata"
export default async function CampaignPagePage() {
if (!env.CAMPAIGN_PAGES_ENABLED) {
return notFound()
}
return (
<div className={styles.page}>
<Suspense fallback={<CampaignPageSkeleton />}>

View File

@@ -0,0 +1,3 @@
.page {
background-color: var(--Background-Primary);
}

View File

@@ -0,0 +1,24 @@
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { env } from "@/env/server"
import PromoCampaignPage from "@/components/ContentType/PromoCampaignPage"
import PromoCampaignPageSkeleton from "@/components/ContentType/PromoCampaignPage/PromoCampaignPageSkeleton"
import styles from "./page.module.css"
export { generateMetadata } from "@/utils/metadata/generateMetadata"
export default async function PromoCampaignPagePage() {
if (!env.PROMO_CAMPAIGN_PAGES_ENABLED) {
return notFound()
}
return (
<div className={styles.page}>
<Suspense fallback={<PromoCampaignPageSkeleton />}>
<PromoCampaignPage />
</Suspense>
</div>
)
}

View File

@@ -0,0 +1,31 @@
"use client"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./promoCampaignPage.module.css"
export default function PromoCampaignPageSkeleton() {
return (
<div className={styles.pageContainer}>
<SkeletonShimmer width="100%" height="478px" />
<div className={styles.intro}>
<div className={styles.headingWrapper}>
<Typography variant="Title/lg">
<SkeletonShimmer width="20ch" />
</Typography>
<Typography variant="Title/Subtitle/lg">
<SkeletonShimmer width="50ch" />
</Typography>
</div>
</div>
<div>
<Typography variant="Title/smLowCase">
<SkeletonShimmer width="30ch" />
</Typography>
<SkeletonShimmer width="100%" height="110px" />
</div>
</div>
)
}

View File

@@ -0,0 +1,43 @@
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
import { getPromoCampaignPage } from "@/lib/trpc/memoizedRequests"
import PromoCampaignPageSkeleton from "./PromoCampaignPageSkeleton"
import styles from "./promoCampaignPage.module.css"
export default async function PromoCampaignPage() {
const pageData = await getPromoCampaignPage()
if (!pageData) {
notFound()
}
//const isUserLoggedIn = await isLoggedInUser()
const { promo_campaign_page, tracking } = pageData
const { heading, subheading } = promo_campaign_page
return (
<>
<Suspense fallback={<PromoCampaignPageSkeleton />}>
<div className={styles.pageContainer}>
<div className={styles.intro}>
<div className={styles.headingWrapper}>
<Typography variant="Title/lg">
<h1 className={styles.heading}>{heading}</h1>
</Typography>
{subheading ? (
<Typography variant="Title/Subtitle/lg">
<p>{subheading}</p>
</Typography>
) : null}
</div>
</div>
</div>
</Suspense>
<TrackingSDK pageData={tracking} />
</>
)
}

View File

@@ -0,0 +1,29 @@
.pageContainer {
display: grid;
gap: var(--Space-x6);
padding-bottom: var(--Space-x7);
width: var(--max-width-content);
margin: 0 auto;
}
.intro {
display: grid;
gap: var(--Space-x5);
}
.headingWrapper {
display: grid;
gap: var(--Space-x2);
}
.heading {
color: var(--Text-Heading);
text-wrap: balance;
hyphens: auto;
}
@media screen and (min-width: 1367px) {
.pageContainer {
gap: var(--Space-x9);
}
}

View File

@@ -149,7 +149,7 @@ export const env = createEnv({
* We currently have the secret in local and test environments.
*/
DTMC_ENTRA_ID_SECRET: z.string().optional(),
CAMPAIGN_PAGES_ENABLED: z
PROMO_CAMPAIGN_PAGES_ENABLED: z
.string()
.refine((s) => s === "1" || s === "0")
.transform((s) => s === "1")
@@ -247,7 +247,7 @@ export const env = createEnv({
DTMC_ENTRA_ID_CLIENT: process.env.DTMC_ENTRA_ID_CLIENT,
DTMC_ENTRA_ID_ISSUER: process.env.DTMC_ENTRA_ID_ISSUER,
DTMC_ENTRA_ID_SECRET: process.env.DTMC_ENTRA_ID_SECRET,
CAMPAIGN_PAGES_ENABLED: process.env.CAMPAIGN_PAGES_ENABLED,
PROMO_CAMPAIGN_PAGES_ENABLED: process.env.PROMO_CAMPAIGN_PAGES_ENABLED,
WEBVIEW_SHOW_OVERVIEW: process.env.WEBVIEW_SHOW_OVERVIEW,
ENABLE_NEW_OVERVIEW_SECTION: process.env.ENABLE_NEW_OVERVIEW_SECTION,
CHATBOT_LIVE_LANGS: process.env.CHATBOT_LIVE_LANGS,

View File

@@ -232,3 +232,10 @@ export const getCampaignOverviewPage = cache(
return caller.contentstack.campaignOverviewPage.get()
}
)
export const getPromoCampaignPage = cache(
async function getMemoizedPromoCampaignPage() {
const caller = await serverClient()
return caller.contentstack.promoCampaignPage.get()
}
)