CookieConsentProvider.tsx

import type { SerializeOptions } from 'cookie'
import { parse, serialize } from 'cookie'
import type { ComponentType, Context, PropsWithChildren } from 'react'
import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
} from 'react'
import { uniq } from '../helpers/array'
import { stringToHash } from '../helpers/misc'
import { IS_CLIENT, isCategoryKind } from './helpers'
import type { Config, Consent, Integrations } from './types'
import { useSegmentIntegrations } from './useSegmentIntegrations'

const COOKIE_PREFIX = '_scw_rgpd' as const
const HASH_COOKIE = `${COOKIE_PREFIX}_hash` as const

// Appx 13 Months
const CONSENT_MAX_AGE: number = 13 * 30 * 24 * 60 * 60
// Appx 6 Months
const CONSENT_ADVERTISING_MAX_AGE: number = 6 * 30 * 24 * 60 * 60

const COOKIES_OPTIONS: SerializeOptions = {
  path: '/',
  sameSite: 'strict',
  secure: true,
} as const

type CookieContext = {
  integrations: Integrations
  needConsent: boolean
  isSegmentAllowed: boolean
  isSegmentIntegrationsLoaded: boolean
  segmentIntegrations: Record<string, boolean>
  categoriesConsent: Partial<Consent>
  saveConsent: (categoriesConsent: Partial<Consent>) => void
}

const CookieConsentContext: Context<CookieContext | undefined> = createContext<
  CookieContext | undefined
>(undefined)

const useCookieConsent = (): CookieContext => {
  const context = useContext(CookieConsentContext)
  if (context === undefined) {
    throw new Error(
      'useCookieConsent must be used within a CookieConsentProvider',
    )
  }

  return context
}

type CookieConsentProviderProps = PropsWithChildren<{
  isConsentRequired: boolean
  essentialIntegrations: string[]
  config: Config
  cookiePrefix?: string
  consentMaxAge?: number
  consentAdvertisingMaxAge?: number
  cookiesOptions?: SerializeOptions
}>

const CookieConsentProvider: ComponentType<CookieConsentProviderProps> = ({
  children,
  isConsentRequired,
  essentialIntegrations,
  config,
  cookiePrefix = COOKIE_PREFIX,
  consentMaxAge = CONSENT_MAX_AGE,
  consentAdvertisingMaxAge = CONSENT_ADVERTISING_MAX_AGE,
  cookiesOptions = COOKIES_OPTIONS,
}) => {
  const [needConsent, setNeedsConsent] = useState(false)
  const [cookies, setCookies] = useState<Record<string, string | undefined>>(
    IS_CLIENT ? parse(document.cookie) : {},
  )

  const {
    integrations: segmentIntegrations,
    isLoaded: isSegmentIntegrationsLoaded,
  } = useSegmentIntegrations(config)

  const integrations: Integrations = useMemo(
    () =>
      uniq([
        ...(segmentIntegrations ?? []),
        ...(essentialIntegrations.map(integration => ({
          category: 'essential',
          name: integration,
        })) as Integrations),
      ]),
    [segmentIntegrations, essentialIntegrations],
  )

  // We compute a hash with all the integrations that are enabled
  // This hash will be used to know if we need to ask for consent
  // when a new integration is added
  const integrationsHash = useMemo(
    () =>
      stringToHash(
        uniq([
          ...(segmentIntegrations ?? []).map(({ name }) => name),
          ...essentialIntegrations,
        ])
          .sort()
          .join(undefined),
      ),
    [segmentIntegrations, essentialIntegrations],
  )

  useEffect(() => {
    // We set needConsent at false until we have an answer from segment
    // This is to avoid showing setting needConsent to true only to be set
    // to false after receiving segment answer and flicker the UI

    setNeedsConsent(
      isConsentRequired &&
        cookies[HASH_COOKIE] !== integrationsHash.toString() &&
        segmentIntegrations !== undefined,
    )
  }, [isConsentRequired, integrationsHash, segmentIntegrations, cookies])

  // We store unique categories names in an array
  const categories = useMemo(
    () =>
      uniq((segmentIntegrations ?? []).map(({ category }) => category)).sort(
        undefined,
      ),
    [segmentIntegrations],
  )

  // From the unique categories names we can now build our consent object
  // and check if there is already a consent in a cookie
  // Default consent if none is found is false
  const cookieConsent = useMemo(
    () =>
      categories.reduce<Partial<Consent>>(
        (acc, category) => ({
          ...acc,
          [category]:
            isConsentRequired || needConsent
              ? cookies[`${cookiePrefix}_${category}`] === 'true'
              : true,
        }),
        {},
      ),
    [isConsentRequired, categories, cookiePrefix, needConsent, cookies],
  )

  const saveConsent = useCallback(
    (categoriesConsent: Partial<Consent>) => {
      for (const [consentName, consentValue] of Object.entries(
        categoriesConsent,
      )) {
        const consentCategoryName = isCategoryKind(consentName)
          ? consentName
          : 'unknown'

        const cookieName = `${cookiePrefix}_${consentCategoryName}`

        if (consentValue) {
          document.cookie = serialize(cookieName, consentValue.toString(), {
            ...cookiesOptions,
            maxAge:
              consentCategoryName === 'advertising'
                ? consentAdvertisingMaxAge
                : consentMaxAge,
          })
        } else {
          // If consent is set to false we have to delete the cookie
          document.cookie = serialize(cookieName, '', {
            ...cookiesOptions,
            expires: new Date(0),
          })
        }
        setCookies(prevCookies => ({
          ...prevCookies,
          [cookieName]: consentValue ? 'true' : 'false',
        }))
      }
      // We set the hash cookie to the current consented integrations
      document.cookie = serialize(HASH_COOKIE, integrationsHash.toString(), {
        ...cookiesOptions,
        // Here we use the shortest max age to force to ask again for expired consent
        maxAge: consentAdvertisingMaxAge,
      })
      setCookies(prevCookies => ({
        ...prevCookies,
        [HASH_COOKIE]: integrationsHash.toString(),
      }))
      setNeedsConsent(false)
    },
    [
      integrationsHash,
      consentAdvertisingMaxAge,
      consentMaxAge,
      cookiePrefix,
      cookiesOptions,
    ],
  )

  const isSegmentAllowed = useMemo(
    () =>
      isConsentRequired
        ? !needConsent &&
          !!segmentIntegrations?.some(
            integration => cookieConsent[integration.category],
          )
        : true,
    [isConsentRequired, segmentIntegrations, cookieConsent, needConsent],
  )
  // 'All': false tells Segment not to send data to any Destinations by default, unless they’re explicitly listed as true in the next lines.
  // In this case we should not have any integration, so we protect the user. Maybe unecessary as we always set true of false for an integration.
  const segmentEnabledIntegrations = useMemo(
    () =>
      segmentIntegrations?.length === 0
        ? { All: !isConsentRequired }
        : (segmentIntegrations ?? []).reduce<Record<string, boolean>>(
            (acc, integration) => ({
              ...acc,
              [integration.name]: cookieConsent[integration.category] ?? false,
            }),
            {},
          ),
    [cookieConsent, isConsentRequired, segmentIntegrations],
  )

  const value = useMemo(
    () => ({
      categoriesConsent: cookieConsent,
      integrations,
      isSegmentAllowed,
      isSegmentIntegrationsLoaded,
      needConsent,
      saveConsent,
      segmentIntegrations: segmentEnabledIntegrations,
    }),
    [
      integrations,
      needConsent,
      isSegmentAllowed,
      isSegmentIntegrationsLoaded,
      segmentEnabledIntegrations,
      cookieConsent,
      saveConsent,
    ],
  )

  return (
    <CookieConsentContext.Provider value={value}>
      {children}
    </CookieConsentContext.Provider>
  )
}

export { CookieConsentProvider }
export { useCookieConsent }