@gradial/aci 0.1.27 → 0.1.29

package/templates/nextjs/template/src/app/_components/ConsentManager.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import {
+  ConsentBanner,
+  ConsentDialog,
+  ConsentManagerProvider,
+  useConsentManager,
+  type ConsentManagerProviderProps,
+} from '@c15t/nextjs';
+import { useEffect, useMemo, type ReactNode } from 'react';
+
+// Hosted c15t backend (consent.io or self-hosted). Unset = offline mode:
+// consent is stored client-side and no network calls are made.
+const C15T_BACKEND_URL = process.env.NEXT_PUBLIC_C15T_BACKEND_URL;
+
+// The CMP's own categories. The mapping from categories to the Gradial
+// personalization purpose lives in .content/config/site.json
+// (personalization.consentCategories), not here.
+const CONSENT_CATEGORIES = ['necessary', 'measurement', 'marketing'] as const;
+
+// ---------------------------------------------------------------------------
+// Gradial collect bridge
+//
+// The Gradial collect SDK's c15t preset (the site config's
+// `personalization.consentPreset: "c15t"`, emitted as
+// `data-aci-consent="c15t"` on the collect tag) reads
+// `window.c15t = { consents, onConsentChange }`. c15t itself does not
+// publish that shape, so this bridge mirrors the store onto it — only after
+// a real visitor decision (`consentInfo` set), never for pre-decision
+// defaults, so the SDK cannot mistake an untouched banner for a withdrawal.
+// ---------------------------------------------------------------------------
+
+type Consents = Record<string, boolean>;
+type ConsentListener = (payload: { consents: Consents }) => void;
+
+declare global {
+  interface Window {
+    c15t?: {
+      consents?: Consents;
+      onConsentChange?: (cb: ConsentListener) => void;
+    };
+  }
+}
+
+const consentListeners: ConsentListener[] = [];
+
+function publishAciConsents(consents: Consents): void {
+  const bridge = (window.c15t ??= {});
+  bridge.consents = consents;
+  bridge.onConsentChange ??= (cb: ConsentListener) => {
+    consentListeners.push(cb);
+  };
+  for (const listener of [...consentListeners]) {
+    listener({ consents });
+  }
+}
+
+function AciConsentBridge() {
+  const { consents, consentInfo } = useConsentManager();
+  useEffect(() => {
+    if (!consentInfo || !consents) return;
+    publishAciConsents(consents as Consents);
+  }, [consents, consentInfo]);
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Consent manager
+// ---------------------------------------------------------------------------
+
+function getConsentOptions(): ConsentManagerProviderProps['options'] {
+  const baseOptions = {
+    consentCategories: [...CONSENT_CATEGORIES],
+    legalLinks: {
+      privacyPolicy: {
+        href: '/privacy/',
+        target: '_self' as const,
+        label: 'Privacy policy',
+      },
+    },
+  };
+
+  if (C15T_BACKEND_URL) {
+    return {
+      ...baseOptions,
+      mode: 'hosted',
+      backendURL: C15T_BACKEND_URL,
+    };
+  }
+
+  return {
+    ...baseOptions,
+    mode: 'offline',
+    offlinePolicy: {
+      policyPacks: [
+        {
+          id: 'default-opt-in',
+          match: { isDefault: true },
+          consent: {
+            model: 'opt-in',
+            categories: [...CONSENT_CATEGORIES],
+          },
+          ui: { mode: 'banner' },
+        },
+      ],
+    },
+  };
+}
+
+export function ConsentManager({ children }: { children: ReactNode }) {
+  const options = useMemo(() => getConsentOptions(), []);
+
+  return (
+    <ConsentManagerProvider options={options}>
+      {children}
+      <AciConsentBridge />
+      <ConsentBanner
+        title="Cookie preferences"
+        description="We use cookies to keep the site working, measure performance, and support marketing."
+        acceptButtonText="Accept all"
+        rejectButtonText="Reject all"
+        customizeButtonText="Customize"
+        legalLinks={['privacyPolicy']}
+        layout={[['reject', 'accept'], 'customize']}
+        primaryButton="accept"
+        scrollLock={false}
+        hideBranding
+      />
+      <ConsentDialog legalLinks={['privacyPolicy']} scrollLock trapFocus hideBranding />
+    </ConsentManagerProvider>
+  );
+}

package/templates/nextjs/template/src/app/layout.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 import { Inter, Space_Grotesk } from 'next/font/google';
 import { DevRefresh } from '@gradial/aci/next';
+import { ConsentManager } from '@/app/_components/ConsentManager';
+import '@c15t/nextjs/styles.css';
 import '@/design-system/styles.css';
 
 const inter = Inter({
@@ -21,7 +23,7 @@ export default function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={`${inter.variable} ${spaceGrotesk.variable}`}>
       <body>
-        {children}
+        <ConsentManager>{children}</ConsentManager>
         <DevRefresh />
       </body>
     </html>

package/templates/nextjs/template/src/components/sections/HomeHero.tsx

@@ -57,6 +57,6 @@ export function HomeHero({ eyebrow = '', headline = '', description = '', ctaLab
 }
 
 function heroImageSrc(image?: HeroImage) {
-  if (!image || image.sources.length === 0) return '';
+  if (!image) return '';
   return primaryImageSource(image).src;
 }