feat(scripts): integrate consent manager with control panel privacy setting

matthewvolk · matthewvolk · commit 79990a1e819e · 2025-10-31T13:15:37.000-05:00
diff --git a/.changeset/silent-carrots-wash.md b/.changeset/silent-carrots-wash.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Integrates Catalyst's consent manager with the BigCommerce Control Panel's Cookie Consent setting, allowing merchants to centrally control whether the consent banner displays on the storefront. When disabled in the Control Panel, the consent banner is suppressed and all script categories are consented implicitly, matching Stencil behavior.
diff --git a/core/app/[locale]/layout.tsx b/core/app/[locale]/layout.tsx
@@ -31,6 +31,9 @@ const RootLayoutMetadataQuery = graphql(
     query RootLayoutMetadataQuery {
       site {
         settings {
+          privacy {
+            cookieConsentEnabled
+          }
           storeName
           seo {
             pageTitle
@@ -124,12 +127,14 @@ export default async function RootLayout({ params, children }: Props) {
   });
 
   const scripts = scriptsTransformer(rootData.data.site.content.scripts);
+  const isCookieConsentEnabled =
+    rootData.data.site.settings?.privacy?.cookieConsentEnabled ?? false;
 
   return (
     <html className={clsx(fonts.map((f) => f.variable))} lang={locale}>
       <body className="flex min-h-screen flex-col">
         <NextIntlClientProvider>
-          <ConsentManager scripts={scripts}>
+          <ConsentManager isCookieConsentEnabled={isCookieConsentEnabled} scripts={scripts}>
             <NuqsAdapter>
               <StreamableAnalyticsProvider data={streamableAnalyticsData} />
               <Providers>
diff --git a/core/components/consent-manager/consent-providers.tsx b/core/components/consent-manager/consent-providers.tsx
@@ -10,9 +10,14 @@ export type C15tScripts = NonNullable<ComponentProps<typeof ClientSideOptionsPro
 
 interface ConsentManagerProviderProps extends PropsWithChildren {
   scripts: C15tScripts;
+  isCookieConsentEnabled: boolean;
 }
 
-export function ConsentManagerProvider({ children, scripts }: ConsentManagerProviderProps) {
+export function ConsentManagerProvider({
+  children,
+  scripts,
+  isCookieConsentEnabled,
+}: ConsentManagerProviderProps) {
   return (
     <C15TConsentManagerProvider
       options={{
@@ -21,7 +26,7 @@ export function ConsentManagerProvider({ children, scripts }: ConsentManagerProv
 
         // @ts-expect-error endpointHandlers type is not yet exposed by the package
         endpointHandlers: {
-          showConsentBanner,
+          showConsentBanner: () => showConsentBanner(isCookieConsentEnabled),
           setConsent,
           verifyConsent,
         },
diff --git a/core/components/consent-manager/index.tsx b/core/components/consent-manager/index.tsx
@@ -8,11 +8,12 @@ import { CookieBanner } from './cookie-banner';
 
 interface ConsentManagerProps extends PropsWithChildren {
   scripts: C15tScripts;
+  isCookieConsentEnabled: boolean;
 }
 
-export function ConsentManager({ children, scripts }: ConsentManagerProps) {
+export function ConsentManager({ children, scripts, isCookieConsentEnabled }: ConsentManagerProps) {
   return (
-    <ConsentManagerProvider scripts={scripts}>
+    <ConsentManagerProvider isCookieConsentEnabled={isCookieConsentEnabled} scripts={scripts}>
       <ConsentManagerDialog />
       <CookieBanner />
       {children}
diff --git a/core/lib/consent-manager/handlers.ts b/core/lib/consent-manager/handlers.ts
@@ -7,7 +7,7 @@ const ok = <T>(data: T | null = null) => ({
   response: null,
 });
 
-export function showConsentBanner() {
+export function showConsentBanner(isCookieConsentEnabled: boolean) {
   let show = true;
   let language = 'en';
 
@@ -23,6 +23,17 @@ export function showConsentBanner() {
     show = false;
   }
 
+  if (!isCookieConsentEnabled) {
+    return ok({
+      showConsentBanner: false,
+      jurisdiction: { code: 'NONE' },
+      translations: {
+        language,
+      },
+      branding: 'none',
+    });
+  }
+
   return ok({
     showConsentBanner: show,
     translations: {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@bigcommerce/catalyst-core": minor
 +---
++
 +Integrates Catalyst's consent manager with the BigCommerce Control Panel's Cookie Consent setting, allowing merchants to centrally control whether the consent banner displays on the storefront. When disabled in the Control Panel, the consent banner is suppressed and all script categories are consented implicitly, matching Stencil behavior.