import { Experiment, Result } from "@growthbook/growthbook"

import {
  GrowthBookProvider as GBProvider,
  GrowthBook,
} from "@growthbook/growthbook-react"
import { useRouter } from "next/router"
import { useEffect, useState } from "react"
import { getSegmentAnonymousIdWithRetry } from "src/utils/segment-utils"
import getUUID from "src/utils/user-uuid"

const onExperimentViewed = (
  experiment: Experiment<any>,
  result: Result<any>
) => {
  const experimentId = experiment.key
  const variationId = result.key
  const userId = getUUID()

  setTimeout(() => {
    // Sometimes the window object is not available, like if
    // Segment is not allowed to load because of GDPR or whatever
    // In this case we add ?. to avoid attempting to fire this
    // if the analytics object is not available
    window?.analytics?.track("Experiment Viewed", {
      experimentId,
      variationId,
      userId,
    })
  }, 2000)
}

// Create a client-side GrowthBook instance
const gb = new GrowthBook({
  apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,
  clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY,
  decryptionKey: process.env.NEXT_PUBLIC_GROWTHBOOK_DECRYPTION_KEY,
  // Enable easier debugging of feature flags during development
  enableDevMode: true,
  trackingCallback: onExperimentViewed,
})

// Let the GrowthBook instance know when the URL changes so the active
// experiments can update accordingly
function updateGrowthBookURL() {
  gb.setURL(window.location.href)
}

const GrowthBookProvider = ({ children }: { children: React.ReactNode }) => {
  const router = useRouter()

  useEffect(() => {
    // Initialize GrowthBook and make sure the attributes are set properly
    gb.init({ streaming: true })

    // Initial setup with UUID
    const uuid = getUUID()
    gb.setAttributes({ id: uuid, anonymousId: uuid })

    // Try to get Segment's anonymousId and set it if available
    getSegmentAnonymousIdWithRetry().then((anonymousId) => {
      if (anonymousId) {
        gb.setAttributes({ id: uuid, anonymousId: anonymousId })
      }
    })

    router.events.on("routeChangeComplete", updateGrowthBookURL)
    return () => router.events.off("routeChangeComplete", updateGrowthBookURL)
  }, [])

  return <GBProvider growthbook={gb}>{children}</GBProvider>
}

export default GrowthBookProvider

gbuuid

import Cookies from "js-cookie"

const getUUID = (): string => {
  const COOKIE_NAME = "gbuuid"
  const COOKIE_DAYS = 400 // 400 days is the max cookie duration for Chrome

  // Only run on client side
  if (typeof window === "undefined") return ""

  // Generate a UUID using the most appropriate method available
  const genUUID = (): string => {
    if (window?.crypto?.randomUUID) return window.crypto.randomUUID()

    return `${1e7}-${1e3}-${4e3}-${8e3}-${1e11}`.replace(/[018]/g, (c) =>
      (
        Number(c) ^
        (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (Number(c) / 4)))
      ).toString(16)
    )
  }

  // Check for existing Growthbook UUID
  // If it exists, refresh the expiration date
  const existingUUID = Cookies.get(COOKIE_NAME)

  if (existingUUID) {
    // Refresh the expiration date when retrieved
    Cookies.set(COOKIE_NAME, existingUUID, {
      expires: COOKIE_DAYS,
      path: "/",
      sameSite: "strict",
      secure: process.env.NODE_ENV === "production",
    })
    return existingUUID
  }

  const uuid = genUUID()

  if (uuid) {
    Cookies.set(COOKIE_NAME, uuid, {
      expires: COOKIE_DAYS,
      path: "/",
      sameSite: "strict",
      secure: process.env.NODE_ENV === "production",
    })
    return uuid
  }

  return ""
}

export default getUUID

gbuuid

anonymous_id

Experiment Viewed

anonymous_id

{
  "anonymousId": "123456",
  "userId": "abcdefg",
  "properties": {
    "userId": "qwerty"
  }
}