Refactor Consent/Preferences to remove modal behavior, update unit and e2e tests

Author: webstackdev

src/components/Consent/Banner/client/__tests__/index.spec.ts

@@ -25,10 +25,6 @@ vi.mock('@components/scripts/store', () => {
   }
 })
 
-vi.mock('@components/Consent/Preferences/client', () => ({
-  showConsentCustomizeModal: vi.fn(),
-}))
-
 import * as consentStore from '@components/scripts/store'
 
 const showConsentBannerMock = vi.mocked(consentStore.showConsentBanner)
@@ -154,4 +150,28 @@ describe('ConsentBannerElement', () => {
       expect(hideConsentBannerMock).toHaveBeenCalled()
     })
   })
+
+  it('navigates to the consent page when Customize is triggered', async () => {
+    await renderConsentBanner(({ element, window }) => {
+      const customizeBtn = window.document.querySelector('.consent-modal__btn-customize') as HTMLButtonElement | null
+      expect(customizeBtn).not.toBeNull()
+
+      const bannerCtor = element.constructor as typeof HTMLElement & {
+        navigateToUrl: (url: string) => void
+      }
+      const navigateSpy = vi.spyOn(bannerCtor, 'navigateToUrl').mockImplementation(() => {})
+
+      try {
+        customizeBtn!.dispatchEvent(new window.MouseEvent('click', { bubbles: true }))
+
+        expect(navigateSpy).toHaveBeenCalledTimes(1)
+        expect(navigateSpy).toHaveBeenCalledWith(expect.stringContaining('/consent'))
+
+        const wrapper = window.document.getElementById('consent-modal-id') as HTMLDivElement | null
+        expect(wrapper?.style.display).toBe('none')
+      } finally {
+        navigateSpy.mockRestore()
+      }
+    })
+  })
 })

src/components/Consent/Banner/client/index.ts

@@ -15,7 +15,6 @@ import {
   initConsentCookies,
   showConsentBanner,
 } from '@components/scripts/store'
-import { showConsentCustomizeModal } from '@components/Consent/Preferences/client'
 import {
   getConsentAllowBtn,
   getConsentCloseBtn,
@@ -41,6 +40,13 @@ export class ConsentBannerElement extends HTMLElement {
   private afterSwapHandler: (() => void) | null = null
   public isInitialized = false
   private static isModalCurrentlyVisible = false
+  public static navigateToUrl(url: string): void {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    window.location.assign(url)
+  }
 
   connectedCallback(): void {
     if (this.isInitialized || typeof document === 'undefined') {
@@ -207,12 +213,23 @@ export class ConsentBannerElement extends HTMLElement {
     addScriptBreadcrumb(context)
 
     try {
-      showConsentCustomizeModal()
+      this.navigateToConsentPage()
     } catch (error) {
       handleScriptError(error, context)
     }
   }
 
+  private navigateToConsentPage(): void {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    this.handleDismissModal()
+
+    const targetUrl = new URL('/consent', window.location.origin)
+    ConsentBannerElement.navigateToUrl(targetUrl.toString())
+  }
+
   private bindEvents(): void {
     const context = { scriptName: COMPONENT_SCRIPT_NAME, operation: 'bindEvents' }
     addScriptBreadcrumb(context)
@@ -236,6 +253,13 @@ export class ConsentBannerElement extends HTMLElement {
       const shouldBeVisible = wasVisible ||
         ConsentBannerElement.isModalCurrentlyVisible ||
         sessionStorage.getItem('consent-modal-visible') === 'true'
+      const cookiesInitialized = initConsentCookies()
+
+      if (this.isConsentRoute()) {
+        console.log('🍪 Suppressing consent modal on consent settings page')
+        this.suppressModalForConsentPage()
+        return
+      }
 
       if (shouldBeVisible) {
         console.log('🍪 Restoring modal from previous navigation')
@@ -246,7 +270,7 @@ export class ConsentBannerElement extends HTMLElement {
         return
       }
 
-      if (!initConsentCookies()) {
+      if (!cookiesInitialized) {
         console.log('🍪 User already consented, skipping modal')
         return
       }
@@ -263,6 +287,24 @@ export class ConsentBannerElement extends HTMLElement {
     }
   }
 
+  private isConsentRoute(): boolean {
+    if (typeof window === 'undefined') {
+      return false
+    }
+
+    const pathname = window.location.pathname
+    return pathname === '/consent' || pathname.startsWith('/consent/')
+  }
+
+  private suppressModalForConsentPage(): void {
+    this.removeFocusTrap()
+    this.wrapper.style.display = 'none'
+    hideConsentBanner()
+    ConsentBannerElement.isModalCurrentlyVisible = false
+    sessionStorage.removeItem('consent-modal-visible')
+    sessionStorage.removeItem('consent-modal-shown')
+  }
+
   private setupFocusTrap(): void {
     const context = { scriptName: COMPONENT_SCRIPT_NAME, operation: 'setupFocusTrap' }
     addScriptBreadcrumb(context)

src/components/Consent/Preferences/client/__tests__/index.spec.ts

@@ -6,7 +6,7 @@ import type { WebComponentModule } from '@components/scripts/@types/webComponent
 import ConsentPreferencesComponent from '@components/Consent/Preferences/index.astro'
 import type { ConsentPreferencesElement } from '@components/Consent/Preferences/client'
 import type { ConsentCategory, ConsentState } from '@components/scripts/store'
-import { allowAllConsent, updateConsent } from '@components/scripts/store'
+import { allowAllConsent, updateConsent, revokeAllConsent } from '@components/scripts/store'
 import { executeRender, withJsdomEnvironment } from '@test/unit/helpers/litRuntime'
 
 type ConsentPreferencesModule = WebComponentModule<ConsentPreferencesElement>
@@ -104,6 +104,12 @@ vi.mock('@components/scripts/store', () => {
       state.marketing = true
       notify()
     }),
+    revokeAllConsent: vi.fn(() => {
+      state.analytics = false
+      state.functional = false
+      state.marketing = false
+      notify()
+    }),
   }
 })
 
@@ -118,30 +124,6 @@ describe('ConsentPreferencesElement', () => {
     })
   })
 
-  it('shows the modal when showModal is invoked', async () => {
-    await renderConsentPreferences(({ element, window }) => {
-      const wrapper = window.document.getElementById('consent-modal-modal-id') as HTMLDivElement | null
-      expect(wrapper).not.toBeNull()
-
-      element.showModal()
-      expect(wrapper!.style.display).toBe('flex')
-    })
-  })
-
-  it('hides the modal when the close button is clicked', async () => {
-    await renderConsentPreferences(({ element, window }) => {
-      element.showModal()
-      const wrapper = window.document.getElementById('consent-modal-modal-id') as HTMLDivElement | null
-      expect(wrapper).not.toBeNull()
-      const closeBtn = window.document.querySelector('.consent-modal__close-btn') as HTMLButtonElement | null
-      expect(closeBtn).not.toBeNull()
-
-      closeBtn!.dispatchEvent(new window.MouseEvent('click', { bubbles: true }))
-
-      expect(wrapper!.style.display).toBe('none')
-    })
-  })
-
   it('grants all consent when Allow All is clicked', async () => {
     await renderConsentPreferences(({ window }) => {
       const allowBtn = window.document.getElementById('consent-allow-all') as HTMLButtonElement | null
@@ -156,6 +138,20 @@ describe('ConsentPreferencesElement', () => {
     })
   })
 
+  it('revokes all consent when Decline All is clicked', async () => {
+    await renderConsentPreferences(({ window }) => {
+      const denyBtn = window.document.getElementById('consent-deny-all') as HTMLButtonElement | null
+      expect(denyBtn).not.toBeNull()
+
+      denyBtn!.dispatchEvent(new window.MouseEvent('click', { bubbles: true }))
+
+      expect(revokeAllConsent).toHaveBeenCalled()
+      expect((window.document.getElementById('analytics-cookies') as HTMLInputElement).checked).toBe(false)
+      expect((window.document.getElementById('functional-cookies') as HTMLInputElement).checked).toBe(false)
+      expect((window.document.getElementById('marketing-cookies') as HTMLInputElement).checked).toBe(false)
+    })
+  })
+
   it('saves consent preferences when Save button is clicked', async () => {
     await renderConsentPreferences(({ window }) => {
       const analyticsCheckbox = window.document.getElementById('analytics-cookies') as HTMLInputElement | null

src/components/Consent/Preferences/client/__tests__/selectors.spec.ts

@@ -5,13 +5,7 @@ import { experimental_AstroContainer as AstroContainer } from 'astro/container'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
 import ConsentPreferencesComponent from '@components/Consent/Preferences/index.astro'
 import type { ConsentPreferencesElement } from '@components/Consent/Preferences/client'
-import {
-  getConsentCustomizeModal,
-  getConsentCustomizeCloseBtn,
-  getAllowAllBtn,
-  getSavePreferencesBtn,
-} from '@components/Consent/Preferences/client/selectors'
-import { ClientScriptError } from '@components/scripts/errors'
+import { getAllowAllBtn, getSavePreferencesBtn, getDenyAllBtn } from '@components/Consent/Preferences/client/selectors'
 import {
   executeRender,
   withJsdomEnvironment,
@@ -72,26 +66,6 @@ beforeEach(async () => {
 })
 
 describe('Consent Preferences Selectors', () => {
-  it('returns the consent customize modal wrapper', async () => {
-    await renderConsentPreferences(() => {
-      const modal = getConsentCustomizeModal()
-
-      expect(modal.id).toBe('consent-modal-modal-id')
-      expect(modal.getAttribute('role')).toBe('dialog')
-      expect(modal.getAttribute('aria-label')).toBe('customize consent dialog')
-    })
-  })
-
-  it('returns the close button with expected attributes', async () => {
-    await renderConsentPreferences(() => {
-      const closeBtn = getConsentCustomizeCloseBtn()
-
-      expect(closeBtn.classList.contains('consent-modal__close-btn')).toBe(true)
-      expect(closeBtn.dataset['testid']).toBe('consent-preferences-close')
-      expect(closeBtn.getAttribute('aria-label')).toMatch(/privacy preferences dialog/i)
-    })
-  })
-
   it('returns the allow-all button', async () => {
     await renderConsentPreferences(() => {
       const allowBtn = getAllowAllBtn()
@@ -110,11 +84,12 @@ describe('Consent Preferences Selectors', () => {
     })
   })
 
-  it('throws ClientScriptError when the modal is missing', async () => {
-    await renderConsentPreferences(({ window }) => {
-      window.document.getElementById('consent-modal-modal-id')?.remove()
+  it('returns the deny-all button', async () => {
+    await renderConsentPreferences(() => {
+      const denyBtn = getDenyAllBtn()
 
-      expect(() => getConsentCustomizeModal()).toThrowError(ClientScriptError)
+      expect(denyBtn.id).toBe('consent-deny-all')
+      expect(denyBtn.textContent?.trim()).toBe('Decline All')
     })
   })
 })

src/components/Consent/Preferences/client/index.ts

@@ -1,6 +1,6 @@
 /**
  * Consent Preferences Management
- * Handles consent preference functionality and modal interactions
+ * Handles consent preference functionality for the inline component
  * Uses centralized state management from scripts/store
  */
 
@@ -12,14 +12,10 @@ import {
   subscribeToConsentState,
   updateConsent,
   allowAllConsent,
+  revokeAllConsent,
   type ConsentState,
 } from '@components/scripts/store'
-import {
-  getConsentCustomizeModal,
-  getConsentCustomizeCloseBtn,
-  getAllowAllBtn,
-  getSavePreferencesBtn,
-} from '@components/Consent/Preferences/client/selectors'
+import { getAllowAllBtn, getSavePreferencesBtn, getDenyAllBtn } from '@components/Consent/Preferences/client/selectors'
 import { addScriptBreadcrumb } from '@components/scripts/errors'
 import { handleScriptError } from '@components/scripts/errors/handler'
 import { defineCustomElement } from '@components/scripts/utils'
@@ -29,9 +25,8 @@ const COMPONENT_SCRIPT_NAME = 'ConsentPreferencesElement'
 export const CONSENT_PREFERENCES_READY_EVENT = 'consent-preferences:ready'
 
 export class ConsentPreferencesElement extends HTMLElement {
-  private modal!: HTMLDivElement
-  private closeBtn!: HTMLButtonElement
   private allowAllBtn!: HTMLButtonElement
+  private denyAllBtn!: HTMLButtonElement
   private saveBtn!: HTMLButtonElement
   private domReadyHandler: (() => void) | null = null
   private beforePreparationHandler: (() => void) | null = null
@@ -92,7 +87,6 @@ export class ConsentPreferencesElement extends HTMLElement {
     addScriptBreadcrumb(context)
 
     try {
-      delete this.dataset['consentPreferencesReady']
       this.findElements()
       this.bindEvents()
       this.syncConsentState(getConsentSnapshot())
@@ -111,9 +105,8 @@ export class ConsentPreferencesElement extends HTMLElement {
   }
 
   private findElements(): void {
-    this.modal = getConsentCustomizeModal()
-    this.closeBtn = getConsentCustomizeCloseBtn()
     this.allowAllBtn = getAllowAllBtn()
+    this.denyAllBtn = getDenyAllBtn()
     this.saveBtn = getSavePreferencesBtn()
   }
 
@@ -175,23 +168,9 @@ export class ConsentPreferencesElement extends HTMLElement {
     // Reserved for future cleanup work before View Transition swaps
   }
 
-  /** Show the consent customize modal */
-  public showModal(): void {
-    if (this.modal) {
-      this.modal.style.display = 'flex'
-    }
-  }
-
-  /** Hide the consent customize modal */
-  private hideModal = (): void => {
-    if (this.modal) {
-      this.modal.style.display = 'none'
-    }
-  }
-
   private bindEvents(): void {
-    addButtonEventListeners(this.closeBtn, this.hideModal)
     addButtonEventListeners(this.allowAllBtn, () => this.allowAll())
+    addButtonEventListeners(this.denyAllBtn, () => this.denyAll())
     addButtonEventListeners(this.saveBtn, () => this.savePreferences())
     this.bindToggleLabelListeners()
   }
@@ -269,6 +248,14 @@ export class ConsentPreferencesElement extends HTMLElement {
     this.showNotification('All consent enabled!')
   }
 
+  private denyAll(): void {
+    revokeAllConsent()
+    const updatedConsent = getConsentSnapshot()
+    this.syncConsentState(updatedConsent)
+    this.applyPreferences(updatedConsent)
+    this.showNotification('All optional consent disabled!')
+  }
+
   private getCurrentPreferences(): Partial<ConsentState> {
     const analyticsCheckbox = document.getElementById('analytics-cookies')
     const functionalCheckbox = document.getElementById('functional-cookies')
@@ -355,13 +342,10 @@ export class ConsentPreferencesElement extends HTMLElement {
   }
 }
 
-/**
- * Helper function to show the consent customize modal
- * Used by the ConsentBanner component
- */
-export const showConsentCustomizeModal = (): void => {
-  const modal = getConsentCustomizeModal()
-  modal.style.display = 'flex'
+declare global {
+  interface HTMLElementTagNameMap {
+    'consent-preferences': ConsentPreferencesElement
+  }
 }
 
 export const registerConsentPreferencesWebComponent = (tagName: string = COMPONENT_TAG_NAME) => {