feat(BOOK-436): Added manage cookie bot dynamic content to content pages

Approved-by: Linus Flood

apps/scandic-web/components/Blocks/DynamicContent/ManageCookieConsent/CookieConsentButton/cookieConsentButton.module.css

@@ -0,0 +1,3 @@
+.cookieConsentButton {
+  justify-self: start;
+}

apps/scandic-web/components/Blocks/DynamicContent/ManageCookieConsent/CookieConsentButton/index.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import styles from "./cookieConsentButton.module.css"
+
+export function CookieConsentButton() {
+  const intl = useIntl()
+
+  function handleClick() {
+    if (!window?.Cookiebot?.show) {
+      return
+    }
+
+    window.Cookiebot.show()
+  }
+
+  return (
+    <Button
+      variant="Text"
+      size="Medium"
+      typography="Body/Paragraph/mdBold"
+      wrapping={false}
+      onPress={handleClick}
+      className={styles.cookieConsentButton}
+    >
+      {intl.formatMessage({
+        defaultMessage: "Manage cookies",
+      })}
+      <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
+    </Button>
+  )
+}

apps/scandic-web/components/Blocks/DynamicContent/ManageCookieConsent/index.tsx

@@ -0,0 +1,30 @@
+import { CookieConsentButton } from "@/components/Blocks/DynamicContent/ManageCookieConsent/CookieConsentButton"
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
+
+interface ManageCookieConsentProps {
+  title?: string
+  subtitle?: string
+  link?: { href: string; text: string }
+}
+
+export function ManageCookieConsent({
+  title,
+  subtitle,
+  link,
+}: ManageCookieConsentProps) {
+  return (
+    <SectionContainer>
+      <SectionHeader
+        link={link}
+        preamble={subtitle}
+        title={title}
+        headingAs="h3"
+        headingLevel="h2"
+      />
+      <CookieConsentButton />
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}

apps/scandic-web/components/Blocks/DynamicContent/index.tsx

@@ -5,6 +5,7 @@ import { DynamicContentEnum } from "@scandic-hotels/trpc/types/dynamicContent"
 
 import HowItWorks from "@/components/Blocks/DynamicContent/HowItWorks"
 import LoyaltyLevels from "@/components/Blocks/DynamicContent/LoyaltyLevels"
+import { ManageCookieConsent } from "@/components/Blocks/DynamicContent/ManageCookieConsent"
 import MyPagesOverviewShortcuts from "@/components/Blocks/DynamicContent/MyPagesOverviewShortcuts"
 import Overview from "@/components/Blocks/DynamicContent/Overview"
 import OverviewTable from "@/components/Blocks/DynamicContent/OverviewTable"
@@ -46,6 +47,8 @@ function DynamicContentBlocks(props: DynamicContentProps) {
       return <HowItWorks dynamic_content={dynamic_content} />
     case DynamicContentEnum.Blocks.components.jobylon_feed:
       return <JobylonFeed {...dynamic_content} />
+    case DynamicContentEnum.Blocks.components.manage_cookie_consent:
+      return <ManageCookieConsent {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.loyalty_levels:
       return <LoyaltyLevels dynamic_content={dynamic_content} />
     case DynamicContentEnum.Blocks.components.membership_overview:

apps/scandic-web/components/Sidebar/index.tsx

@@ -2,6 +2,7 @@ import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { DynamicContentEnum } from "@scandic-hotels/trpc/types/dynamicContent"
 import { SidebarEnums } from "@scandic-hotels/trpc/types/sidebar"
 
+import { CookieConsentButton } from "@/components/Blocks/DynamicContent/ManageCookieConsent/CookieConsentButton"
 import EmployeeBenefitsAuthCard from "@/components/DigitalTeamMemberCard/EmployeeBenefits/AuthCard"
 
 import ShortcutsList from "../Blocks/ShortcutsList"
@@ -33,6 +34,8 @@ export default function Sidebar({ blocks }: SidebarProps) {
                 return (
                   <EmployeeBenefitsAuthCard key={`${block.typename}-${idx}`} />
                 )
+              case DynamicContentEnum.Sidebar.components.cookie_consent_button:
+                return <CookieConsentButton key={`${block.typename}-${idx}`} />
               default:
                 return null
             }

apps/scandic-web/types/window.d.ts

@@ -1,6 +1,6 @@
 interface Window {
   dataLayer: {
-    [key: string]: any
+    [key: string]: unknown
     push: (...args: unknown) => void
   }
   adobeDataLayer: {
@@ -10,12 +10,12 @@ interface Window {
   adobe: {
     OptInCategories: { ANALYTICS: string }
     optIn: {
-      approve: (s: string, b: boolean) => {}
+      approve: (s: string, b: boolean) => void
-      deny: (s: string, b: boolean) => {}
+      deny: (s: string, b: boolean) => void
-      complete: () => {}
+      complete: () => void
     }
   }
-  Cookiebot: { changed: boolean; consented: boolean }
+  Cookiebot: { changed: boolean; consented: boolean; show: () => void }
   ApplePaySession: (() => void) | undefined
   kindlyChat: {
     showBubble: () => void

packages/trpc/lib/types/dynamicContent.ts

@@ -25,6 +25,7 @@ export namespace DynamicContentEnum {
       sas_link_account_banner: "sas_link_account_banner",
       sas_transfer_points: "sas_transfer_points",
       sas_tier_comparison: "sas_tier_comparison",
+      manage_cookie_consent: "manage_cookie_consent",
       unknown: "unknown",
     } as const
 
@@ -72,6 +73,7 @@ export namespace DynamicContentEnum {
     export const components = {
       my_pages_navigation: "my_pages_navigation",
       employee_benefits_auth_card: "employee_benefits_auth_card",
+      cookie_consent_button: "cookie_consent_button",
       unknown: "unknown",
     } as const