From a62c8b54cf28530fbb587db6973ecbea675a76ee Mon Sep 17 00:00:00 2001
From: Reece Browne <74901996+reecebrowne@users.noreply.github.com>
Date: Wed, 26 Nov 2025 17:19:48 +0000
Subject: [PATCH] Chore/v2/hide banner in onboard (#5032)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.
---
 .../static/css/cookieconsentCustomisation.css |  5 +++++
 .../public/css/cookieconsentCustomisation.css |  5 +++++
 frontend/src/core/hooks/useCookieConsent.ts   | 22 +++++++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/app/core/src/main/resources/static/css/cookieconsentCustomisation.css b/app/core/src/main/resources/static/css/cookieconsentCustomisation.css
index a28b1e89b..bfd0e87f1 100644
--- a/app/core/src/main/resources/static/css/cookieconsentCustomisation.css
+++ b/app/core/src/main/resources/static/css/cookieconsentCustomisation.css
@@ -76,4 +76,9 @@
     .cm__btns{
         padding-top: 1rem !important;
     }
+}
+
+/* Lower z-index so cookie banner appears behind onboarding modals */
+#cc-main {
+    z-index: 100 !important;
 }
\ No newline at end of file
diff --git a/frontend/public/css/cookieconsentCustomisation.css b/frontend/public/css/cookieconsentCustomisation.css
index 87f1fd30a..2c02d7407 100644
--- a/frontend/public/css/cookieconsentCustomisation.css
+++ b/frontend/public/css/cookieconsentCustomisation.css
@@ -175,4 +175,9 @@
 #cc-main .pm {
     background: var(--cc-bg) !important;
     color: var(--cc-primary-color) !important;
+}
+
+/* Lower z-index so cookie banner appears behind onboarding modals */
+#cc-main {
+    z-index: 100 !important;
 }
\ No newline at end of file
diff --git a/frontend/src/core/hooks/useCookieConsent.ts b/frontend/src/core/hooks/useCookieConsent.ts
index 29eb6d550..b90a43edd 100644
--- a/frontend/src/core/hooks/useCookieConsent.ts
+++ b/frontend/src/core/hooks/useCookieConsent.ts
@@ -2,12 +2,15 @@ import { useEffect, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BASE_PATH } from '@app/constants/app';
 import { useAppConfig } from '@app/contexts/AppConfigContext';
+import { useOnboarding } from '@app/contexts/OnboardingContext';
 
 declare global {
   interface Window {
     CookieConsent?: {
       run: (config: any) => void;
       show: (show?: boolean) => void;
+      hide: () => void;
+      getCookie: (name?: string) => any;
       acceptedCategory: (category: string) => boolean;
       acceptedService: (serviceName: string, category: string) => boolean;
     };
@@ -23,6 +26,7 @@ export const useCookieConsent = ({
 }: CookieConsentConfig = {}) => {
   const { t } = useTranslation();
   const { config } = useAppConfig();
+  const { isOpen: tourIsOpen } = useOnboarding();
   const [isInitialized, setIsInitialized] = useState(false);
 
   useEffect(() => {
@@ -241,6 +245,24 @@ export const useCookieConsent = ({
     };
   }, [analyticsEnabled, config?.enablePosthog, config?.enableScarf, t]);
 
+  // Hide cookie banner when tour is active
+  useEffect(() => {
+    if (!isInitialized || !window.CookieConsent) {
+      return;
+    }
+
+    if (tourIsOpen) {
+      window.CookieConsent.hide();
+    } else {
+      // Only show if user hasn't made a choice yet
+      const consentCookie = window.CookieConsent.getCookie?.();
+      const hasConsented = consentCookie && Object.keys(consentCookie).length > 0;
+      if (!hasConsented) {
+        window.CookieConsent.show();
+      }
+    }
+  }, [tourIsOpen, isInitialized]);
+
   const showCookieConsent = useCallback(() => {
     if (isInitialized && window.CookieConsent) {
       window.CookieConsent?.show();