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/cookies.ts

@@ -0,0 +1,74 @@
+import { z } from 'zod';
+
+const CONSENT_COOKIE_NAME = 'c15t-consent';
+const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
+
+const ConsentNamesSchema = z.enum(['necessary', 'functionality', 'marketing', 'measurement']);
+const ConsentStateSchema = z.record(ConsentNamesSchema, z.boolean());
+const ConsentCookieSchema = z.object({
+  preferences: ConsentStateSchema,
+  timestamp: z.string().datetime(),
+});
+
+type ConsentCookie = z.infer<typeof ConsentCookieSchema>;
+
+const encode = (c: ConsentCookie) => encodeURIComponent(JSON.stringify(c));
+const decode = (raw: string) => {
+  try {
+    const json: unknown = JSON.parse(decodeURIComponent(raw));
+
+    return ConsentCookieSchema.parse(json);
+  } catch {
+    return null;
+  }
+};
+
+export const consentCookieClient = () => {
+  const getCookie = (name: string) => {
+    if (typeof document === 'undefined') return null;
+
+    const pair = document.cookie.split('; ').find((c) => c.startsWith(`${name}=`));
+
+    return pair ? pair.slice(name.length + 1) : null;
+  };
+
+  const serialize = (value: string) =>
+    `${CONSENT_COOKIE_NAME}=${value}; Path=/; Max-Age=${ONE_YEAR_SECONDS}; SameSite=Lax; Secure`;
+
+  return {
+    get: () => {
+      const raw = getCookie(CONSENT_COOKIE_NAME);
+
+      return raw ? decode(raw) : null;
+    },
+    set: (consent: ConsentCookie) => {
+      if (typeof document === 'undefined') return;
+      document.cookie = serialize(encode(consent));
+    },
+  };
+};
+
+export const consentCookieServer = async () => {
+  const { cookies } = await import('next/headers');
+  const cookieStore = await cookies();
+
+  return {
+    get: () => {
+      const cookie = cookieStore.get(CONSENT_COOKIE_NAME)?.value;
+
+      if (!cookie) return null;
+
+      return decode(cookie);
+    },
+    set: (consent: ConsentCookie) => {
+      cookieStore.set({
+        name: CONSENT_COOKIE_NAME,
+        value: encode(consent),
+        path: '/',
+        maxAge: ONE_YEAR_SECONDS,
+        sameSite: 'lax',
+        secure: true,
+      });
+    },
+  };
+};

core/lib/consent-manager/handlers.ts

@@ -0,0 +1,50 @@
+import { consentCookieClient } from './cookies';
+
+const ok = <T>(data: T | null = null) => ({
+  data,
+  error: null,
+  ok: true,
+  response: null,
+});
+
+export function showConsentBanner() {
+  let show = true;
+
+  try {
+    const consent = consentCookieClient().get();
+
+    show = !consent;
+  } catch {
+    show = false;
+  }
+
+  return ok({
+    showConsentBanner: show,
+    branding: 'none',
+  });
+}
+
+export function setConsent(options?: { body?: { preferences?: Record<string, boolean> } }) {
+  const { preferences } = options?.body ?? {};
+
+  consentCookieClient().set({
+    preferences: preferences ?? {},
+    timestamp: new Date().toISOString(),
+  });
+
+  return ok();
+}
+
+export function verifyConsent() {
+  const consent = consentCookieClient().get();
+
+  if (!consent) {
+    return ok({
+      isValid: false,
+    });
+  }
+
+  return ok({
+    isValid: true,
+  });
+}

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', '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",