Merge pull request #916 from prezly/feature/care-5202-remove-cookie-b…

…ar-from-theme-preview

[CARE-5202] Feature - Hide cookie bar if mask parameter is present

components/PreviewPageMask/PreviewPageMask.tsx

@@ -1,10 +1,9 @@
-import { useSearchParams } from 'next/navigation';
+import { useMaskParam } from '@/hooks/useMaskParam';
 
 import styles from './PreviewPageMask.module.scss';
 
 export function PreviewPageMask() {
-    const searchParams = useSearchParams();
-    const mask = JSON.parse(searchParams.get('mask') || 'false');
+    const mask = useMaskParam();
 
     if (!mask) {
         return null;

hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useDevice';
 export * from './useIsMounted';
+export * from './useMaskParam';
 export * from './useThemeSettings';

hooks/useMaskParam.ts

@@ -0,0 +1,16 @@
+import { useSearchParams } from 'next/navigation';
+
+export function useMaskParam(): boolean {
+    const searchParams = useSearchParams();
+    const mask = searchParams.get('mask');
+
+    if (!mask) {
+        return false;
+    }
+
+    try {
+        return Boolean(JSON.parse(mask));
+    } catch {
+        return false;
+    }
+}

modules/Layout/CookieConsentBar/CookieConsentBar.tsx

@@ -4,12 +4,18 @@ import { useCompanyInformation } from '@prezly/theme-kit-nextjs';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 
+import { useMaskParam } from '@/hooks';
 import { Button } from '@/ui';
 
 import styles from './CookieConsentBar.module.scss';
 
 function CookieConsentBar() {
     const { cookie_statement: cookieStatement } = useCompanyInformation();
+    const isHidden = useMaskParam();
+
+    if (isHidden) {
+        return null;
+    }
 
     return (
         <DefaultCookieConsentBar>