Segment Consent Manager Doesnt set cookies auto when shouldRequireConsent prop is false

37 views Asked by At

Im creating consent maganer for some countries and if i want by default for the States sets cookies without showing the consent manager, the preferences looks fine in the console.log and the banner is not shown but the cookies are not set, if i show the banner and then click on acept all cookies or deny, the cookie is set correctly here is my code also here is the docs for segment consent manager

'use client'
import { useEffect, useState } from 'react'

import { useRouter } from 'next/router'

import { LocaleTranslation } from '@/types/segmentManager'
import { ConsentManager } from '@segment/consent-manager'
import type { ConsentManagerProps } from '@segment/consent-manager/types/types'
import Cookies from 'js-cookie'

import inEUValidation from '@/utils/browser'

import { SegmentConsentBanner } from '../SegmentConsentBanner'
import {
  customCategories,
  getLocalizedDialogContent,
  initialPreferencesOptIn,
  initialPreferencesOptOut,
  isOptedIn,
  isOptedOut,
  otherWriteKeys,
  shouldRequireConsent
} from '../config'

type Geo = {
  city: string
  country: string
  region: string
}

const getGeo = async () => {
  const res = await fetch('/api/geo')
  const data: Geo = await res.json()
  return data
}
export function SegmentConsentManager() {
  const { locale } = useRouter()
  const isAbsoluteURL = locale != null && ['en-de', 'en-es', 'en-mx'].includes(locale)
  const [ready, setReady] = useState(false)
  const [preferences, setPreferences] = useState<ConsentManagerProps['initialPreferences']>({})
  const [requireConsent, setRequireConsent] = useState(true)

  const getPreferences = async () => {
      try {
          const country = "USA"
          const { region } = await getGeo()
          if (isOptedIn({ country, region })) {
              setPreferences(initialPreferencesOptIn)
          } else if (isOptedOut({ country })) {
              setPreferences(initialPreferencesOptOut)
          } else {
              setPreferences(initialPreferencesOptIn)
              setRequireConsent(false)
          }

          setReady(true)
      } catch (error) {
          console.log('Geo Fetch Failed : ' + error)
          const inEU = inEUValidation(window)
          if (inEU) {
              setPreferences(initialPreferencesOptOut)
          } else {
              setPreferences(initialPreferencesOptIn)
              setRequireConsent(false)
          }
          setReady(true)
      }
  }

  useEffect(() => {
      window.analytics.ready(function () {
          const date = new Date()
          const time = date.getTime()
          const expTime = time + 3600 * 1000 * 87660

          date.setTime(expTime)

          Cookies.set('segmentAnonId', window.analytics.user().anonymousId(), {
              expires: date,
              path: '/'
          })
      })
      getPreferences()
  }, [])

  const {
      preferencesDialogTitle,
      preferencesDialogContent,
      preferencesDialogTemplate,
      cancelDialogTitle,
      cancelDialogContent
  } = getLocalizedDialogContent({ locale })

  if (!ready) {
      return null
  }
  console.log("khee ", shouldRequireConsent(requireConsent), preferences)
  return (
      <div className="fixed bottom-0 h-full  w-full segment-banner-container">
          <ConsentManager
              bannerActionsBlock
              bannerBackgroundColor="#031033"
              bannerContent={
                  <SegmentConsentBanner
                      locale={locale as LocaleTranslation}
                      isAbsoluteURL={isAbsoluteURL}
                  />
              }
              bannerSubContent=""
              cancelDialogTitle={cancelDialogTitle}
              cancelDialogContent={cancelDialogContent}
              closeBehavior={() => ({
                  ...preferences
              })}
              customCategories={customCategories[locale as Locale]}
              initialPreferences={preferences}
              otherWriteKeys={otherWriteKeys}
              preferencesDialogTitle={preferencesDialogTitle}
              preferencesDialogContent={preferencesDialogContent}
              preferencesDialogTemplate={preferencesDialogTemplate}
              shouldRequireConsent={() => shouldRequireConsent(requireConsent)}
              writeKey={process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY || ''}
          />
      </div>
  )
}


0

There are 0 answers