Display privacy link in third party opt in

Introduce usePrivacyLink hook that returns url, label and link props
for the privacy page. Consolidates URL manipulation from OptIn and
ConsentBar into a single SSR-compatible helper that handles absolute,
protocol- relative and relative URLs.

REDMINE-21240

Author: tf

entry_types/scrolled/package/spec/frontend/features/thirdPartyConsent-spec.js

@@ -338,6 +338,42 @@ describe('Third party consent', () => {
 
       expect(container.querySelector('[data-file-name=SvgMedia]')).not.toBeNull();
     });
+
+    it('renders privacy link pointing to privacy page with vendor param', async () => {
+      const {getByTestId} = await renderEntry({
+        seed: {
+          themeOptions: {thirdPartyConsent: {cookieName: 'optIn'}},
+          contentElements: [{typeName: 'test'}],
+          legalInfo: {
+            imprint: {label: '', url: ''},
+            copyright: {label: '', url: ''},
+            privacy: {label: 'Privacy', url: 'https://example.com/privacy'}
+          }
+        }
+      });
+
+      const {getByText} = within(getByTestId('test-content-element'));
+      const link = getByText('Privacy');
+
+      expect(link).toHaveAttribute(
+        'href',
+        'https://example.com/privacy?vendors=someService#consent'
+      );
+      expect(link).toHaveAttribute('target', '_blank');
+    });
+
+    it('does not render privacy link when no privacy url is configured', async () => {
+      const {getByTestId} = await renderEntry({
+        seed: {
+          themeOptions: {thirdPartyConsent: {cookieName: 'optIn'}},
+          contentElements: [{typeName: 'test'}]
+        }
+      });
+
+      const {queryByText} = within(getByTestId('test-content-element'));
+
+      expect(queryByText('Privacy')).toBeNull();
+    });
   });
 
   describe('opt in with implicit provider name', () => {

entry_types/scrolled/package/spec/frontend/usePrivacyLink-spec.js

@@ -0,0 +1,162 @@
+import {usePrivacyLink} from 'frontend/usePrivacyLink';
+
+import {renderHookInEntry} from 'support';
+
+describe('usePrivacyLink', () => {
+  it('returns url and label without modifications when called without args', () => {
+    const {result} = renderHookInEntry(
+      () => usePrivacyLink(), {
+        seed: {
+          legalInfo: {
+            privacy: {url: 'https://example.com/privacy', label: 'Privacy'}
+          }
+        }
+      }
+    );
+
+    expect(result.current.url).toEqual('https://example.com/privacy');
+    expect(result.current.label).toEqual('Privacy');
+  });
+
+  it('returns empty string when privacy url is empty', () => {
+    const {result} = renderHookInEntry(
+      () => usePrivacyLink({vendors: 'spotify'}), {
+        seed: {
+          legalInfo: {
+            privacy: {url: ''}
+          }
+        }
+      }
+    );
+
+    expect(result.current.url).toEqual('');
+  });
+
+  it('appends vendors param and consent hash to absolute url', () => {
+    const {result} = renderHookInEntry(
+      () => usePrivacyLink({vendors: 'spotify'}), {
+        seed: {
+          legalInfo: {
+            privacy: {url: 'https://example.com/privacy'}
+          }
+        }
+      }
+    );
+
+    expect(result.current.url)
+      .toEqual('https://example.com/privacy?vendors=spotify#consent');
+  });
+
+  it('appends vendors param to url with existing params', () => {
+    const {result} = renderHookInEntry(
+      () => usePrivacyLink({vendors: 'spotify'}), {
+        seed: {
+          legalInfo: {
+            privacy: {url: 'https://example.com/privacy?lang=de'}
+          }
+        }
+      }
+    );
+
+    expect(result.current.url)
+      .toEqual('https://example.com/privacy?lang=de&vendors=spotify#consent');
+  });
+
+  it('preserves protocol-relative url format', () => {
+    const {result} = renderHookInEntry(
+      () => usePrivacyLink({vendors: 'spotify'}), {
+        seed: {
+          legalInfo: {
+            privacy: {url: '//example.com/privacy?lang=de'}
+          }
+        }
+      }
+    );
+
+    expect(result.current.url)
+      .toEqual('//example.com/privacy?lang=de&vendors=spotify#consent');
+  });
+
+  it('handles relative path', () => {
+    const {result} = renderHookInEntry(
+      () => usePrivacyLink({vendors: 'spotify'}), {
+        seed: {
+          legalInfo: {
+            privacy: {url: '/privacy?lang=de'}
+          }
+        }
+      }
+    );
+
+    expect(result.current.url)
+      .toEqual('/privacy?lang=de&vendors=spotify#consent');
+  });
+
+  it('supports comma-separated vendor names', () => {
+    const {result} = renderHookInEntry(
+      () => usePrivacyLink({vendors: 'spotify,youtube'}), {
+        seed: {
+          legalInfo: {
+            privacy: {url: 'https://example.com/privacy'}
+          }
+        }
+      }
+    );
+
+    expect(result.current.url)
+      .toEqual('https://example.com/privacy?vendors=spotify%2Cyoutube#consent');
+  });
+
+  it('returns link props with href and target', () => {
+    const {result} = renderHookInEntry(
+      () => usePrivacyLink(), {
+        seed: {
+          legalInfo: {
+            privacy: {url: 'https://example.com/privacy'}
+          }
+        }
+      }
+    );
+
+    expect(result.current.props).toEqual({
+      href: 'https://example.com/privacy',
+      target: '_blank',
+      rel: 'noreferrer noopener'
+    });
+  });
+
+  it('returns props with onClick for javascript: privacy settings url', () => {
+    const {result} = renderHookInEntry(
+      // eslint-disable-next-line no-script-url
+      () => usePrivacyLink(), {
+        seed: {
+          legalInfo: {
+            privacy: {url: 'javascript:pageflowDisplayPrivacySettings()'}
+          }
+        }
+      }
+    );
+
+    expect(result.current.props.href).toEqual('#privacySettings');
+    expect(result.current.props.onClick).toBeInstanceOf(Function);
+    expect(result.current.props.target).toBeUndefined();
+  });
+
+  it('returns link props with vendors param in href', () => {
+    const {result} = renderHookInEntry(
+      () => usePrivacyLink({vendors: 'spotify'}), {
+        seed: {
+          legalInfo: {
+            privacy: {url: 'https://example.com/privacy'}
+          }
+        }
+      }
+    );
+
+    expect(result.current.props).toEqual({
+      href: 'https://example.com/privacy?vendors=spotify#consent',
+      target: '_blank',
+      rel: 'noreferrer noopener'
+    });
+  });
+});

entry_types/scrolled/package/spec/widgets/defaultNavigation/LegalInfoLink-spec.js

@@ -17,13 +17,14 @@ describe('LegalInfoLink', () => {
     expect(getByRole('link')).toHaveAttribute('rel', 'noreferrer noopener');
   });
 
-  it('supports javascript url scheme', () => {
+  it('allows overriding link props', () => {
     const {getByRole} = render(
-      // eslint-disable-next-line no-script-url
-      <LegalInfoLink label="Copyright" url="javascript:pageflowDisplayPrivacySettings()" />
-    )
+      <LegalInfoLink label="Privacy"
+                     url="https://example.com"
+                     props={{href: '#privacySettings', onClick: jest.fn()}} />
+    );
 
-    expect(getByRole('link')).toHaveTextContent('Copyright');
+    expect(getByRole('link')).toHaveTextContent('Privacy');
     expect(getByRole('link')).toHaveAttribute('href', '#privacySettings');
     expect(getByRole('link')).not.toHaveAttribute('target');
     expect(getByRole('link')).not.toHaveAttribute('rel');

entry_types/scrolled/package/src/frontend/index.js

@@ -124,6 +124,7 @@ export {useFloatingPortalRoot, FloatingPortalRootProvider} from './FloatingPorta
 export {SectionIntersectionObserver} from './SectionIntersectionObserver';
 export {ScrollButton} from './ScrollButton';
 
+export {usePrivacyLink} from './usePrivacyLink';
 export {textColorForBackgroundColor} from './textColorForBackgroundColor';
 export {getTransitionNames, getAvailableTransitionNames} from './transitions';
 export {getAppearanceSectionScopeName} from './appearance';

entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptIn.js

@@ -3,6 +3,7 @@ import {useConsentGiven} from './hooks';
 import {useI18n} from '../i18n';
 import {useContentElementAttributes} from '../useContentElementAttributes';
 import {useContentElementConsentVendor} from '../../entryState';
+import {usePrivacyLink} from '../usePrivacyLink';
 
 import styles from './OptIn.module.css';
 import OptInIcon from '../icons/media.svg';
@@ -29,9 +30,10 @@ export function OptIn({children, providerName, wrapper, icon}) {
   const {t} = useI18n();
   const {contentElementId} = useContentElementAttributes();
   const contentElementConsentVendor = useContentElementConsentVendor({contentElementId});
-
   providerName = providerName || contentElementConsentVendor?.name;
 
+  const privacyLink = usePrivacyLink({vendors: providerName});
+
   const cookieMessage =
     contentElementConsentVendor?.optInPrompt ||
     t(`pageflow_scrolled.public.third_party_consent.opt_in_prompt.${providerName}`);
@@ -55,6 +57,12 @@ export function OptIn({children, providerName, wrapper, icon}) {
       <div className={styles.optInMessage}>
         {cookieMessage}
       </div>
+      {privacyLink.url &&
+       <div className={styles.privacyLink}>
+         <a {...privacyLink.props}>
+           {privacyLink.label}
+         </a>
+       </div>}
       <div>
         <button className={styles.optInButton} onClick={accept}>
           {t('pageflow_scrolled.public.third_party_consent.confirm')}

entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptIn.module.css

@@ -16,7 +16,7 @@
 }
 
 .optInMessage {
-  margin: 1em 0 1.5em 0;
+  margin: 1em 0;
 }
 
 @media (max-width: 600px) {
@@ -25,7 +25,7 @@
   }
 
   .optInMessage {
-    margin: 0.5em 0 1em 0;
+    margin: 0.5em 0 0.8em 0;
   }
 }
 
@@ -43,3 +43,11 @@
   border-radius: 4px;
   cursor: pointer;
 }
+
+.privacyLink {
+  margin-bottom: 1.5em;
+}
+
+.privacyLink a {
+  color: currentColor;
+}

entry_types/scrolled/package/src/frontend/usePrivacyLink.js

@@ -0,0 +1,68 @@
+import {useLegalInfo} from '../entryState';
+
+// eslint-disable-next-line no-script-url
+const displayPrivacySettingsUrl = 'javascript:pageflowDisplayPrivacySettings()';
+
+/**
+ * Returns the privacy link URL, label and link props. When vendors
+ * are passed, the vendors query parameter and consent hash are
+ * appended to the URL. Handles absolute, protocol-relative and
+ * relative URLs.
+ *
+ * @param {Object} [options]
+ * @param {string} [options.vendors] - Comma-separated vendor names.
+ *
+ * @example
+ *
+ * const {url, label, props} = usePrivacyLink({vendors: 'youtube'});
+ * // props => {href: '...', target: '_blank', rel: 'noreferrer noopener'}
+ */
+export function usePrivacyLink({vendors} = {}) {
+  const {privacy} = useLegalInfo();
+
+  const url = vendors && privacy.url
+    ? appendVendorsParam(privacy.url, vendors)
+    : privacy.url;
+
+  return {
+    url,
+    label: privacy.label,
+    props: linkProps(url)
+  };
+}
+
+function linkProps(url) {
+  if (url === displayPrivacySettingsUrl) {
+    return {
+      href: '#privacySettings',
+      onClick(event) {
+        window.pageflowDisplayPrivacySettings();
+        event.preventDefault();
+      }
+    };
+  }
+
+  return {
+    href: url,
+    target: '_blank',
+    rel: 'noreferrer noopener'
+  };
+}
+
+function appendVendorsParam(privacyLinkUrl, vendors) {
+  const isProtocolRelative = privacyLinkUrl.startsWith('//');
+  const urlString = isProtocolRelative ? 'https:' + privacyLinkUrl : privacyLinkUrl;
+  const url = new URL(urlString, 'https://localhost');
+
+  url.searchParams.set('vendors', vendors);
+  url.hash = '#consent';
+
+  if (isProtocolRelative) {
+    return url.toString().replace('https:', '');
+  }
+  else if (!privacyLinkUrl.includes('://')) {
+    return url.pathname + url.search + url.hash;
+  }
+
+  return url.toString();
+}