[fix] store PostHog opt-in in cookie_consent as well (#233)

package.json

@@ -60,7 +60,7 @@
  "js-md5": "^0.8.3",
  "lowlight": "^3.1.0",
  "mustache": "^4.2.0",
- "posthog-js": "^1.133.0",
+ "posthog-js": "^1.135.2",
  "qrcode": "^1.5.3",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",

src/locales/de-DE/messages.po

@@ -179,7 +179,7 @@ msgstr "In wenigen Minuten bis zum ersten Ergebnis"
 msgid "Abandoned"
 msgstr "Verlassen"
 
-#: src/shared/cookie-consent/CookieConsent.tsx:70
+#: src/shared/cookie-consent/CookieConsent.tsx:81
 msgid "Accept"
 msgstr ""
 
@@ -1455,7 +1455,7 @@ msgstr "Regionen"
 msgid "Register"
 msgstr "Registrieren"
 
-#: src/shared/cookie-consent/CookieConsent.tsx:84
+#: src/shared/cookie-consent/CookieConsent.tsx:95
 msgid "Reject"
 msgstr ""
 
@@ -1801,7 +1801,7 @@ msgstr "Warnung"
 msgid "We have sent an email with a confirmation link to your email address. Please follow the link to activate your account."
 msgstr "Wir haben eine E-Mail mit einem Bestätigungslink an Ihre E-Mail-Adresse gesendet. Bitte folgen Sie dem Link, um Ihr Konto zu aktivieren."
 
-#: src/shared/cookie-consent/CookieConsent.tsx:46
+#: src/shared/cookie-consent/CookieConsent.tsx:52
 msgid "We use cookies and other tracking technologies to analyze site usage and assist in marketing efforts. For details, see our <0>cookie policy<1/></0>."
 msgstr ""
 

src/locales/en-US/messages.po

@@ -179,7 +179,7 @@ msgstr "A few minutes to first results"
 msgid "Abandoned"
 msgstr "Abandoned"
 
-#: src/shared/cookie-consent/CookieConsent.tsx:70
+#: src/shared/cookie-consent/CookieConsent.tsx:81
 msgid "Accept"
 msgstr "Accept"
 
@@ -1455,7 +1455,7 @@ msgstr "Regions"
 msgid "Register"
 msgstr "Register"
 
-#: src/shared/cookie-consent/CookieConsent.tsx:84
+#: src/shared/cookie-consent/CookieConsent.tsx:95
 msgid "Reject"
 msgstr "Reject"
 
@@ -1801,7 +1801,7 @@ msgstr "Warning"
 msgid "We have sent an email with a confirmation link to your email address. Please follow the link to activate your account."
 msgstr "We have sent an email with a confirmation link to your email address. Please follow the link to activate your account."
 
-#: src/shared/cookie-consent/CookieConsent.tsx:46
+#: src/shared/cookie-consent/CookieConsent.tsx:52
 msgid "We use cookies and other tracking technologies to analyze site usage and assist in marketing efforts. For details, see our <0>cookie policy<1/></0>."
 msgstr "We use cookies and other tracking technologies to analyze site usage and assist in marketing efforts. For details, see our <0>cookie policy<1/></0>."
 

src/shared/cookie-consent/CookieConsent.tsx

@@ -10,10 +10,16 @@ import { PostHogPageView } from 'src/shared/posthog'
 const CookieConsentComp = () => {
  const postHog = usePostHog()
  const containerRef = useRef<HTMLDivElement>(null)
- const [showConsent, setShowConsent] = useState(postHog.has_opted_in_capturing() ? false : Cookies.get('cookie_consent') !== 'false')
+ const [showConsent, setShowConsent] = useState(false)
 
  useEffect(() => {
- if (postHog.has_opted_in_capturing() || Cookies.get('cookie_consent') !== 'false') {
+ if (Cookies.get('cookie_consent') === 'true') {
+ postHog.opt_in_capturing({ enable_persistence: true })
+ } else if (!postHog.has_opted_in_capturing()) {
+ setShowConsent(Cookies.get('cookie_consent') !== 'false')
+ }
+
+ if (Cookies.get('cookie_consent') !== 'true' && Cookies.get('cookie_consent') !== 'false') {
  Cookies.remove('cookie_consent', {
  domain: env.isProd ? '.fix.security' : undefined,
  secure: !env.isLocal,
@@ -64,6 +70,11 @@ const CookieConsentComp = () => {
  variant="contained"
  onClick={() => {
  setShowConsent(false)
+ Cookies.set('cookie_consent', 'true', {
+ domain: env.isProd ? '.fix.security' : undefined,
+ secure: !env.isLocal,
+ expires: 365,
+ })
  postHog.opt_in_capturing({ enable_persistence: true })
  }}
  >

src/shared/posthog/PostHogProvider.tsx

@@ -1,5 +1,4 @@
 import { useSuspenseQuery } from '@tanstack/react-query'
-import Cookies from 'js-cookie'
 import postHog from 'posthog-js'
 import { PostHogProvider as Provider } from 'posthog-js/react'
 import { useEffect, useState } from 'react'
@@ -24,15 +23,6 @@ export const PostHogProvider = ({ children }: { children: React.ReactNode }) =>
  environment === 'prd' ? import.meta.env.VITE_POSTHOG_PROD_PROJECT_API_KEY : import.meta.env.VITE_POSTHOG_DEV_PROJECT_API_KEY
  env.isProd = environment === 'prd'
  if (projectApiKey && !postHog.__loaded) {
- const postHogCookie = Cookies.get(`ph_${projectApiKey}_posthog`)
- let parsedPostHogCookie: { distinct_id?: string } | undefined
- if (postHogCookie) {
- try {
- parsedPostHogCookie = JSON.parse(postHogCookie) as { distinct_id?: string } | undefined
- } catch {
- parsedPostHogCookie = undefined
- }
- }
  postHog.init(projectApiKey, {
  api_host: env.postHogApiHost,
  ui_host: env.postHogUiHost,
@@ -49,9 +39,6 @@ export const PostHogProvider = ({ children }: { children: React.ReactNode }) =>
  disable_surveys: true,
  enable_recording_console_log: false,
  })
- if (!window.localStorage.getItem(`ph_${projectApiKey}_posthog`) && parsedPostHogCookie?.distinct_id) {
- postHog.opt_in_capturing({ enable_persistence: true })
- }
  }
  setInitialized(true)
  }, [environment])

yarn.lock

@@ -9055,10 +9055,10 @@ postcss@^8.4.38:
  picocolors "^1.0.0"
  source-map-js "^1.2.0"
 
-posthog-js@^1.133.0:
- version "1.133.0"
- resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.133.0.tgz#fbba377d8e11dd5833685111ac219049771736ea"
- integrity sha512-d+TfOqWTPRGoFuxaxRaGhh/XCg1tR5TyjdxCIW1Qp1XQE22zqite2/vg5l+mE6VdZfjMqeBStx0wjmxOj3uUDA==
+posthog-js@^1.135.2:
+ version "1.135.2"
+ resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.135.2.tgz#1da1508760521e6f0fe1ab908bc4ffbe04c2952c"
+ integrity sha512-kqix067CyrlcNKUhVxrys8Qp0O/8FUtlkp7lfM+tkJFJAMZsKjIDVslz2AjI9y79CvyyZX+pddfA7F3YFYlS0Q==
  dependencies:
  fflate "^0.4.8"
  preact "^10.19.3"