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

Author: TheCatLady

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"