Upgrade Plunk and C15t to v2

app/components/atoms/ConsentBanner.vue

@@ -21,7 +21,7 @@ const showSettings = ref(false)
     role="dialog"
     :data-state="showPopup ? 'open' : 'closed'"
     data-test-banner
-    class="fixed border-4 border-muted bg-background shadow-lg z-50 md:w-md overflow-hidden rounded-2xl right-4 left-4 bottom-4 p-4 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+    class="fixed border-4 border-muted bg-background shadow-lg z-50 md:w-lg overflow-hidden rounded-2xl right-4 left-4 bottom-4 p-4 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
   >
     <div
       v-if="!showSettings"
@@ -81,27 +81,26 @@ const showSettings = ref(false)
 
       <div class="flex flex-col gap-2">
         <div
-          v-for="type in consentTypes"
-          :key="type"
+          v-for="{ name } in consentTypes"
+          :key="name"
           class="border rounded-lg p-4 flex flex-col gap-2"
         >
           <div class="flex items-center justify-between">
-            <UiLabel :for="type">
-              {{ $t(`components.ConsentBanner.${type}`) }}
+            <UiLabel :for="name">
+              {{ $t(`components.ConsentBanner.${name}`) }}
             </UiLabel>
             <UiSwitch
-              :id="type"
-              :checked="consents?.[type] || false"
-              :default-value="consents?.[type] || false"
-              :disabled="type === 'necessary'"
+              :id="name"
+              :checked="consents?.[name] || false"
+              :default-value="consents?.[name] || false"
+              :disabled="name === 'necessary'"
               @update:model-value="() => {
-                console.log('toggling consent for', type)
-                toggleConsent(type)
+                toggleConsent(name)
               }"
             />
           </div>
           <p class="text-sm text-muted-foreground">
-            {{ $t(`components.ConsentBanner.${type}Text`) }}
+            {{ $t(`components.ConsentBanner.${name}Text`) }}
           </p>
         </div>
       </div>

app/composables/useConsent.ts

@@ -1,46 +1,34 @@
-import { configureConsentManager, createConsentManagerStore } from 'c15t'
+import { getOrCreateConsentRuntime } from 'c15t'
 import { gtag } from '@c15t/scripts/google-tag'
 import type { AllConsentNames } from 'c15t'
 
-let consentManager: ReturnType<typeof configureConsentManager>
-let c15tStore: ReturnType<typeof createConsentManagerStore>
-
 export function useConsent() {
   const { c15tUrl, gId } = useRuntimeConfig().public
 
-  if (!consentManager) {
-    consentManager = configureConsentManager({
-      mode: 'c15t',
-      backendURL: c15tUrl,
-    })
-  }
-
-  if (!c15tStore) {
-    c15tStore = createConsentManagerStore(consentManager, {
-      initialGdprTypes: ['necessary', 'measurement'],
-      scripts: [
-        gtag({
-          id: gId,
-          category: 'measurement',
-          script: {
-            attributes: {
-              crossorigin: 'anonymous',
-            },
-          },
-        }),
-      ],
-    })
-  }
+  const { consentStore } = getOrCreateConsentRuntime({
+    mode: 'hosted',
+    backendURL: c15tUrl as string,
+    consentCategories: ['necessary', 'measurement'],
+    scripts: [
+      gtag({
+        id: gId,
+        category: 'measurement',
+      }),
+    ],
+  })
 
-  const consents = ref(c15tStore.getState().consents)
-  const consentTypes = c15tStore.getState().gdprTypes
-  const showPopup = ref(c15tStore?.getState().showPopup ?? false)
+  const state = consentStore.getState()
+  const consents = ref(state.consents)
+  const consentTypes = state.consentTypes.filter(t =>
+    state.consentCategories.includes(t.name),
+  )
+  const showPopup = ref(state.activeUI !== 'none')
 
-  onMounted(() => c15tStore?.subscribe(updateState))
+  consentStore.subscribe(updateState)
 
   function updateState() {
-    showPopup.value = c15tStore?.getState().showPopup ?? false
-    consents.value = c15tStore?.getState().consents
+    showPopup.value = consentStore.getState().activeUI !== 'none'
+    consents.value = consentStore.getState().consents
   }
 
   function toggleConsent(type: AllConsentNames) {
@@ -50,26 +38,26 @@ export function useConsent() {
   }
 
   function acceptAll() {
-    consentTypes.forEach(type => setConsent(type, true))
-    showPopup.value = false
+    consentTypes.forEach(type => setConsent(type.name, true))
+    consentStore.getState().setActiveUI('none')
   }
 
   function rejectAll() {
     consentTypes.forEach((type) => {
-      if (type !== 'necessary') setConsent(type, false)
+      if (type.name !== 'necessary') setConsent(type.name, false)
     })
-    showPopup.value = false
+    consentStore.getState().setActiveUI('none')
   }
 
   function savePreferences() {
     Object.entries(consents.value ?? {}).forEach(([type, value]) => {
       setConsent(type as AllConsentNames, value)
     })
-    showPopup.value = false
+    consentStore.getState().setActiveUI('none')
   }
 
   function setConsent(type: AllConsentNames, value: boolean) {
-    c15tStore?.getState().setConsent(type, value)
+    consentStore.getState().setConsent(type, value)
   }
 
   return {