Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: showPreferences method now working when switching language (next-intl) #743

Closed
Kai4ik opened this issue Oct 21, 2024 · 1 comment
Closed

[Bug]: showPreferences method now working when switching language (next-intl) #743

Kai4ik opened this issue Oct 21, 2024 · 1 comment
Labels
bug Something isn't working triage yet to be reviewed

Comments

@Kai4ik
Copy link

Kai4ik commented Oct 21, 2024 •
edited
Loading

Expected Behavior

Calling showPreferences method does not open preferences modal.

Current Behavior

<button type="button" data-cc="show-preferencesModal" className="text-sm md:mt-0 mt-6 text-center" aria-label="Open Cookie Consent Preferences" > Cookie Preferences </button>

When clicking this button initially, it works well and opens the modal. Once, user switches language (I use the following library - https://next-intl-docs.vercel.app/), clicking button does not open the modal. But once user refreshes the browser, it starts working again (the modal opens, using newly selected language)

Steps to reproduce

  1. Config
import` type { CookieConsentConfig } from 'vanilla-cookieconsent';
import { default as enTranslations } from '@/locale/en.json';
import { default as frTranslations } from '@/locale/fr.json';

const en = { consentModal: enTranslations.consentModal, preferencesModal: enTranslations.preferencesModal };
const fr = { consentModal: frTranslations.consentModal, preferencesModal: frTranslations.preferencesModal };

const config: CookieConsentConfig = {
  guiOptions: {
    consentModal: {
      layout: 'cloud',
      position: 'bottom',
    },
    preferencesModal: {
      layout: 'box',
      position: 'left',
    },
  },
  categories: {
    necessary: {
      enabled: true,
      readOnly: true,
      services: {
        language: {
          label: 'Language Preferences',
          cookies: [{ name: /^(NEXT_LOCALE)/ }],
        },
      },
    },
    analytics: {
      autoClear: {
        cookies: [{ name: /^(_ga|_gid)/ }],
      },
      services: {
        ga: {
          label: 'Google Analytics',
          cookies: [{ name: /^(_ga|_gid)/ }],
        },
      },
    },
  },
  language: {
    default: 'en',
    autoDetect: 'document',
    translations: {
      en,
      fr,
    },
  },
};

export default config;
  1. Initialization
'use client';

import config from '@/lib/cookieConsent/config';
import { isDevelopment } from '@/lib/utils';
import { GoogleAnalytics } from '@next/third-parties/google';
import { useEffect, useState } from 'react';
import * as CookieConsent from 'vanilla-cookieconsent';

export default function ConsentManager() {
  const [consentedServices, setConsentedServices] = useState<{ [key: string]: string[] }>(() => {
    if (typeof window === 'undefined') return {};
    const initialCookie = CookieConsent.getCookie();
    return initialCookie?.services || {};
  });

  const loadGA = consentedServices?.analytics?.includes('ga');
  const _loadActOn = consentedServices?.marketing?.includes('acton');

  const cc_config = {
    ...config
  };

  useEffect(() => {
    CookieConsent.run(cc_config);

    if (!CookieConsent.validConsent()) {
      CookieConsent.reset(true);
      CookieConsent.run(cc_config);
    }
  }, []);

  return <></>;
}
  1. Root Layout
 <html lang={locale}>
      <body>
        <NextIntlClientProvider locale={locale} messages={messages}>
          <LayoutProvider>
            <ConsentManager />
            {children}
            <Footer />
          </LayoutProvider>
        </NextIntlClientProvider>
      </body>
    </html>

Proposed fix or additional info.

No response

Version

3.0.1

On which browser do you see the issue?

Firefox, Chrome, Safari, Microsoft Edge
@Kai4ik Kai4ik added the bug Something isn't working label Oct 21, 2024
@github-actions github-actions bot added the triage yet to be reviewed label Oct 21, 2024
@Kai4ik Kai4ik closed this as completed Oct 25, 2024
@minhajislam674
Copy link

@Kai4ik Hi we currently have the same issue in our Nuxt 3 application. Could you please tell us how you solved the issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working triage yet to be reviewed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Kai4ik @minhajislam674