@navinc/base-react-components/src/use-tealium-utag.js

Nav's Pattern Library

import { noop } from '@navinc/utils'
import { useEffect, useState } from 'react'

/**
 * @returns {Promise<Object>}
 * @example
 * import { waitForTealium } from '@navinc/base-react-components'
 *
 * const tealiumData = await waitForTealium()
 */
export const waitForTealium = () => {
  return new Promise((resolve, reject) => {
    let retriesRemaining = 50
    const tryForTealium = () => {
      const tealiumData = global?.utag?.data
      if (tealiumData != null) {
        resolve(tealiumData)
      } else {
        if (retriesRemaining > 0) {
          --retriesRemaining
          setTimeout(tryForTealium, 50)
        } else {
          reject(new Error('Timed out waiting for tealium'))
        }
      }
    }
    tryForTealium()
  })
}

/**
 * @param {Object} [onError]
 * @returns {{tealiumId: string, isTealiumLoading: boolean, data: Object}}
 * @example
 * import { useTealiumUtag } from '@navinc/base-react-components'
 *
 * const { tealiumId, isTealiumLoading } = useTealiumUtag()
 * isTealiumLoading ? <div>Loading...</div> : <div>Tealium ID: {tealiumId}</div>
 */
const useTealiumUtag = ({ onError = noop } = {}) => {
  const [data, setData] = useState()
  const [loading, setIsLoading] = useState(true)

  // wait for tealium to be available before returning data
  useEffect(() => {
    waitForTealium()
      .then((res) => {
        setData(res)
        setIsLoading(false)
      })
      .catch((error) => {
        onError(error)
      })
      .finally(() => setIsLoading(false))
  }, [onError])

  const tealiumId = data?.tealium_visitor_id

  return { tealiumId, loading, data }
}

export default useTealiumUtag