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: