feat(scripts): add consent manager provider using c15t

Author: matthewvolk

.changeset/full-bees-worry.md

@@ -0,0 +1,5 @@
+---
+'@bigcommerce/catalyst-core': minor
+---
+
+Adds a new consent manager provider using the `@c15t/nextjs` package to handle cookie consent management with support for multiple consent categories and cookie-based persistence.

core/lib/consent-manager/handlers.ts

@@ -0,0 +1,106 @@
+import { z } from 'zod';
+
+export const CONSENT_COOKIE_NAME = 'c15t-consent';
+
+const ConsentNamesSchema = z.enum([
+  'necessary',
+  'experience',
+  'functionality',
+  'marketing',
+  'measurement',
+]);
+const ConsentStateSchema = z.record(ConsentNamesSchema, z.boolean());
+const ConsentCookieSchema = z.object({
+  preferences: ConsentStateSchema,
+  timestamp: z.date(),
+});
+
+function getConsentCookie() {
+  if (typeof document === 'undefined') return null;
+
+  const cookies = document.cookie.split('; ');
+  const cookie = cookies.find((c) => c.startsWith(`${CONSENT_COOKIE_NAME}=`));
+
+  if (!cookie) return null;
+
+  const value = cookie.split('=')[1] ?? null;
+
+  if (!value) return null;
+
+  const decoded = decodeURIComponent(value);
+  const raw: unknown = JSON.parse(decoded);
+  const result = ConsentCookieSchema.safeParse(raw);
+
+  if (!result.success) return null;
+
+  return result.data;
+}
+
+function setConsentCookie(consent: Record<string, boolean>) {
+  if (typeof document === 'undefined') return;
+
+  const encoded = encodeURIComponent(JSON.stringify(consent));
+
+  document.cookie = `${CONSENT_COOKIE_NAME}=${encoded}; path=/`;
+}
+
+export function showConsentBanner() {
+  let show = true;
+
+  try {
+    const consent = getConsentCookie();
+
+    show = !consent;
+  } catch {
+    show = false;
+  }
+
+  return {
+    data: {
+      showConsentBanner: show,
+      branding: 'none',
+    },
+    error: null,
+    ok: true,
+    response: null,
+  };
+}
+
+export function setConsent(options?: {
+  body?: { preferences?: Record<string, boolean>; type?: string; domain?: string };
+}) {
+  const { preferences } = options?.body ?? {};
+
+  setConsentCookie(preferences ?? {});
+
+  return {
+    data: null,
+    error: null,
+    ok: true,
+    response: null,
+  };
+}
+
+export function verifyConsent() {
+  const consent = getConsentCookie();
+
+  if (!consent) {
+    return {
+      data: {
+        isValid: false,
+      },
+      error: null,
+      ok: true,
+      response: null,
+    };
+  }
+
+  return {
+    data: {
+      isValid: true,
+    },
+    error: null,
+    ok: true,
+    response: null,
+  };
+}

core/lib/consent-manager/index.ts

@@ -0,0 +1 @@
+export * from './provider';

core/lib/consent-manager/provider.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { ConsentManagerProvider as C15TConsentManagerProvider } from '@c15t/nextjs';
+import { type PropsWithChildren } from 'react';
+
+import { setConsent, showConsentBanner, verifyConsent } from './handlers';
+
+export function ConsentManagerProvider({ children }: PropsWithChildren) {
+  return (
+    <C15TConsentManagerProvider
+      options={{
+        mode: 'custom',
+        consentCategories: ['necessary', 'experience', 'functionality', 'marketing', 'measurement'],
+
+        // @ts-expect-error endpointHandlers type is not yet exposed by the package
+        endpointHandlers: {
+          showConsentBanner,
+          setConsent,
+          verifyConsent,
+        },
+      }}
+    >
+      {children}
+    </C15TConsentManagerProvider>
+  );
+}

core/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@bigcommerce/catalyst-client": "workspace:^",
+    "@c15t/nextjs": "^1.7.0",
     "@conform-to/react": "^1.6.1",
     "@conform-to/zod": "^1.6.1",
     "@icons-pack/react-simple-icons": "^11.2.0",