diff --git a/apps/scandic-web/components/ContentType/PromoCampaignPage/ExpiredPromoCampaign/ExpiredPromoCampaign.module.css b/apps/scandic-web/components/ContentType/PromoCampaignPage/ExpiredPromoCampaign/ExpiredPromoCampaign.module.css new file mode 100644 index 000000000..8503000f8 --- /dev/null +++ b/apps/scandic-web/components/ContentType/PromoCampaignPage/ExpiredPromoCampaign/ExpiredPromoCampaign.module.css @@ -0,0 +1,22 @@ +.container { + display: flex; + padding: var(--Space-x7) var(--Space-x1); + flex-direction: column; + align-items: center; + gap: var(--Space-x6); + border-radius: var(--Corner-radius-lg); + background: var(--Surface-Secondary-Default); +} + +.content { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--Space-x4); + text-align: center; +} + +.title, +.description { + color: var(--Text-Heading); +} diff --git a/apps/scandic-web/components/ContentType/PromoCampaignPage/ExpiredPromoCampaign/index.tsx b/apps/scandic-web/components/ContentType/PromoCampaignPage/ExpiredPromoCampaign/index.tsx new file mode 100644 index 000000000..d1b81eae8 --- /dev/null +++ b/apps/scandic-web/components/ContentType/PromoCampaignPage/ExpiredPromoCampaign/index.tsx @@ -0,0 +1,48 @@ +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" +import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" + +import { offers } from "@/constants/webHrefs" + +import { getIntl } from "@/i18n" +import { getLang } from "@/i18n/serverContext" + +import styles from "./ExpiredPromoCampaign.module.css" + +export default async function ExpiredPromoCampaign() { + const intl = await getIntl() + const lang = await getLang() + return ( +
+ + +
+ +

+ {intl.formatMessage({ + defaultMessage: "This promotion has expired", + })} +

+ + + +

+ {intl.formatMessage({ + defaultMessage: + "Don't worry, we will conjure up new exciting offers and campaigns in the future. Stay tuned!", + })} +

+ +
+ + + {intl.formatMessage({ + defaultMessage: "See all offers", + })} + +
+ ) +} diff --git a/apps/scandic-web/components/ContentType/PromoCampaignPage/index.tsx b/apps/scandic-web/components/ContentType/PromoCampaignPage/index.tsx index 70e1970f2..07e93a0e0 100644 --- a/apps/scandic-web/components/ContentType/PromoCampaignPage/index.tsx +++ b/apps/scandic-web/components/ContentType/PromoCampaignPage/index.tsx @@ -1,11 +1,13 @@ import { notFound } from "next/navigation" import { Suspense } from "react" +import { dt } from "@scandic-hotels/common/dt" import { Typography } from "@scandic-hotels/design-system/Typography" import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK" import { getPromoCampaignPage } from "@/lib/trpc/memoizedRequests" +import ExpiredPromoCampaign from "./ExpiredPromoCampaign" import PromoCampaignHero from "./Hero" import PromoCampaignPageSkeleton from "./PromoCampaignPageSkeleton" @@ -18,7 +20,11 @@ export default async function PromoCampaignPage() { } //const isUserLoggedIn = await isLoggedInUser() const { promo_campaign_page, tracking } = pageData - const { heading, subheading, promo_hero } = promo_campaign_page + const { heading, subheading, enddate, promo_hero } = promo_campaign_page + + const isCampaignExpired = enddate + ? dt().isAfter(dt(enddate).endOf("day")) + : false return ( <> @@ -30,13 +36,14 @@ export default async function PromoCampaignPage() {

{heading}

 - {subheading ? ( + {subheading && !isCampaignExpired ? (

{subheading}

 ) : null} + {isCampaignExpired ? : null} diff --git a/apps/scandic-web/constants/webHrefs.ts b/apps/scandic-web/constants/webHrefs.ts index 06610db53..6c8270bd0 100644 --- a/apps/scandic-web/constants/webHrefs.ts +++ b/apps/scandic-web/constants/webHrefs.ts @@ -37,3 +37,12 @@ export const spendPoints: LangRoute = { no: `/${Lang.no}/scandic-friends/bruk-poeng`, sv: `/${Lang.sv}/scandic-friends/anvand-poang`, } + +export const offers: LangRoute = { + da: `/${Lang.da}/tilbud`, + de: `/${Lang.de}/angebote`, + en: `/${Lang.en}/offers`, + fi: `/${Lang.fi}/tarjoukset`, + no: `/${Lang.no}/hotelltilbud`, + sv: `/${Lang.sv}/erbjudanden`, +} diff --git a/packages/design-system/lib/components/Icons/Illustrations/MagicWand.tsx b/packages/design-system/lib/components/Icons/Illustrations/MagicWand.tsx index 7663d23d9..b76d0d9a7 100644 --- a/packages/design-system/lib/components/Icons/Illustrations/MagicWand.tsx +++ b/packages/design-system/lib/components/Icons/Illustrations/MagicWand.tsx @@ -3,47 +3,1071 @@ import type { IllustrationProps } from '../icon' export default function MagicWandIcon(props: IllustrationProps) { return ( - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - ) }