@hashicorp/react-components 1.1.10 → 1.1.11

package/src/components/consent-manager/index.tsx

@@ -1,186 +0,0 @@
-import { useState, useEffect, useCallback } from 'react'
-import { EventEmitter } from 'events'
-import classNames from 'classnames'
-import { isInUS } from '@hashicorp/platform-util/geo'
-import { loadPreferences, savePreferences } from './util/cookies'
-import ConsentBanner from './components/banner/banner'
-import ConsentPreferences from './components/dialog/dialog'
-import SegmentScript from './scripts/segment'
-import CustomScripts from './scripts/custom'
-import s from './style.module.css'
-import {
-	ConsentManagerCategory,
-	ConsentManagerService,
-	ConsentManagerPreferences,
-} from './types'
-
-interface ConsentManagerProps {
-	additionalServices?: ConsentManagerService[]
-	categories?: ConsentManagerCategory[]
-	className?: string
-	cookiePolicyLink?: string
-	forceShow?: boolean
-	privacyPolicyLink?: string
-	segmentServices?: ConsentManagerService[]
-	segmentWriteKey?: string
-	showDialog?: boolean
-	version?: number
-	onManagePreferences?: () => void
-	onAcceptAll?: () => void
-}
-
-const emitter = new EventEmitter()
-
-export function open() {
-	emitter.emit('openDialog')
-}
-
-export function saveAndLoadAnalytics(preferences: ConsentManagerPreferences) {
-	emitter.emit('saveAndLoadAnalytics', preferences)
-}
-
-export default function ConsentManager(props: ConsentManagerProps) {
-	const [preferences, setPreferences] = useState<{
-		loadAll?: boolean
-		version?: number
-	}>(loadPreferences() ?? {})
-	const [showDialog, setShowDialog] = useState(props.showDialog ?? false)
-	const [showBanner, setShowBanner] = useState(() => {
-		// 1. If prop override is set, always show the consent bar.
-		if (props.forceShow) return true
-	})
-
-	const hasEmptyPreferencesOrVersionMismatch =
-		Object.keys(preferences).length === 0 ||
-		preferences.version !== props.version
-
-	const closeDialog = () => {
-		document.body.classList.remove('g-noscroll')
-		setShowDialog(false)
-		setShowBanner(false)
-		setPreferences(loadPreferences() ?? {})
-	}
-
-	const saveAndLoadAnalytics = useCallback(
-		(preferences) => {
-			if (typeof preferences === 'undefined') {
-				preferences = { loadAll: false, segment: false }
-			}
-			savePreferences(preferences, props.version)
-
-			// If analytics have already been added to page, it's likely you're updating your preferences
-			// We reload the page to re-initiate the script with the updated integrations
-			if (window.analytics && window.analytics.initialized) {
-				window.location.reload()
-				return
-			}
-
-			closeDialog()
-		},
-		[props.version]
-	)
-
-	const openDialog = useCallback(() => {
-		document.body.classList.add('g-noscroll')
-		setShowBanner(false)
-		setShowDialog(true)
-	}, [])
-
-	// Setup the event handler to open the dialog imperatively
-	useEffect(() => {
-		emitter.on('openDialog', openDialog)
-		return () => {
-			emitter.off('openDialog', openDialog)
-		}
-	}, [openDialog])
-
-	// Setup the event handler to save and load analytics imperatively
-	useEffect(() => {
-		emitter.on('saveAndLoadAnalytics', saveAndLoadAnalytics)
-		return () => {
-			emitter.off('saveAndLoadAnalytics', saveAndLoadAnalytics)
-		}
-	}, [saveAndLoadAnalytics])
-
-	// Show banner if there are no preferences or the version mismatches
-	useEffect(() => {
-		setShowBanner(hasEmptyPreferencesOrVersionMismatch)
-		// eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to run this check once
-	}, [])
-
-	useEffect(() => {
-		if (hasEmptyPreferencesOrVersionMismatch && isInUS()) {
-			saveAndLoadAnalytics({ loadAll: true })
-			setShowBanner(true)
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to run this check once
-	}, [])
-
-	const escFunction = useCallback(
-		(event) => {
-			if (showDialog && event.key === 'Escape') {
-				closeDialog()
-			}
-		},
-		[showDialog]
-	)
-
-	useEffect(() => {
-		document.addEventListener('keydown', escFunction, false)
-
-		return () => {
-			document.removeEventListener('keydown', escFunction, false)
-		}
-	}, [escFunction])
-
-	const filteredAdditionalServices = props.additionalServices?.filter(
-		(service) => service.shouldLoad === undefined || service.shouldLoad()
-	)
-
-	return (
-		<div className={classNames(s.root, props.className)}>
-			{/*  Consent banner at the bottom */}
-			{showBanner && (
-				<ConsentBanner
-					preferences={preferences}
-					privacyPolicyLink={props.privacyPolicyLink}
-					cookiePolicyLink={props.cookiePolicyLink}
-					onManagePreferences={() => {
-						openDialog()
-						if (props.onManagePreferences) {
-							props.onManagePreferences()
-						}
-					}}
-					onAccept={() => {
-						saveAndLoadAnalytics({ loadAll: true })
-						if (props.onAcceptAll) {
-							props.onAcceptAll()
-						}
-					}}
-				/>
-			)}
-			{/*  Consent manager preferences dialog */}
-			<ConsentPreferences
-				version={props.version}
-				segmentWriteKey={props.segmentWriteKey}
-				segmentServices={props.segmentServices}
-				additionalServices={filteredAdditionalServices}
-				preferences={preferences}
-				categories={props.categories || []}
-				privacyPolicyLink={props.privacyPolicyLink}
-				cookiePolicyLink={props.cookiePolicyLink}
-				saveAndLoadAnalytics={saveAndLoadAnalytics}
-				showDialog={showDialog}
-			/>
-
-			<SegmentScript
-				preferences={preferences}
-				writeKey={props.segmentWriteKey}
-			/>
-			<CustomScripts
-				preferences={preferences}
-				services={filteredAdditionalServices}
-			/>
-		</div>
-	)
-}

package/src/components/consent-manager/loader/README.md

@@ -1,29 +0,0 @@
-# Consent Manager Loader
-
-The consent manager component is large and complex, with many configurable options. The consent manager loader interface makes a bunch of assumptions and strips down the number of configurable options to very few, which is enough to do the trick for most of our web properties.
-
-The loader also ships with a couple **presets**, which load in standard sets of tracking scripts that we tend to adhere towards. Currently, the available options are `oss` and `enterprise`.
-
-## Usage
-
-Code block below shows basic usage:
-
-```js
-import createConsentManager from '@web/react-components/src/components/consent-manager/loader'
-
-const { ConsentManager, openConsentManager } = createConsentManager({
-  preset: 'oss',
-})
-
-// sample implementation
-export default function SomePage() {
-  return (
-    <>
-      <p>my page content</p>
-      <ConsentManager />
-    </>
-  )
-}
-```
-
-Check out the [types](types.ts) to get an overview of the full options that can be passed in!

package/src/components/consent-manager/loader/categories.ts

@@ -1,22 +0,0 @@
-export default [
-	{
-		name: 'Functional',
-		description:
-			'Functional services provide a utility to the website, such as the ability to log in, or to get live support. Disabling any of these scripts will cause that utility to be missing from the site.',
-	},
-	{
-		name: 'Analytics',
-		description:
-			'Analytics services keep track of page traffic and user behavior while browsing the site. We use this data internally to improve the usability and performance of the site. Disabling any of these scripts makes it more difficult for us to understand how our site is being used, and slower to improve it.',
-	},
-	{
-		name: 'Email Marketing',
-		description:
-			'Email Marketing services track user behavior while browsing the site. We use this data internally in our marketing efforts to provide users contextually relevant information based off of their behaviors. Disabling any of these scripts makes it more difficult for us to provide you contextually relevant information.',
-	},
-	{
-		name: 'Advertising',
-		description:
-			"Advertising services allow us to keep track of whether our company advertising campaigns have been successful or not. We absolutely never display any third party advertisements on our own websites, or sell any user data to third parties. Disabling any of these scripts makes it more difficult for us to gauge whether our company's advertisements are resonating with current and potential future customers.",
-	},
-]

package/src/components/consent-manager/loader/index.tsx

@@ -1,94 +0,0 @@
-import React from 'react'
-import ConsentManagerComponent, { open, saveAndLoadAnalytics } from '../'
-import defaultCategories from './categories'
-import ossPreset from './presets/oss'
-import enterprisePreset from './presets/enterprise'
-import {
-	ConsentManagerCategory,
-	ConsentManagerPreferences,
-	ConsentManagerProps,
-	ConsentManagerService,
-} from '../types'
-
-const VERSION = 4
-const COMPANY_NAME = 'HashiCorp'
-const PRIVACY_LINK = 'https://www.hashicorp.com/privacy'
-const COOKIES_LINK = 'https://www.hashicorp.com/cookies'
-
-export default function createConsentManager({
-	segmentWriteKey = process.env.SEGMENT_WRITE_KEY,
-	preset,
-	segmentServices,
-	otherServices,
-	categories,
-	forceShow = false,
-	onAcceptAll,
-	onManagePreferences,
-}: {
-	segmentWriteKey?: string
-	preset?: 'oss' | 'enterprise'
-	segmentServices?: ConsentManagerService[]
-	otherServices?: ConsentManagerService[]
-	categories?: ConsentManagerCategory[]
-	forceShow?: boolean
-	onAcceptAll?: () => void
-	onManagePreferences?: () => void
-}): {
-	ConsentManager: typeof ConsentManagerComponent
-	openConsentManager: () => void
-	saveAndLoadAnalytics: (preferences: ConsentManagerPreferences) => void
-} {
-	// if hashi env is present, check against it. if not, fall back to checking node env
-	const isProd = process.env.HASHI_ENV
-		? process.env.HASHI_ENV === 'production'
-		: process.env.NODE_ENV === 'production'
-
-	if (!process.env.HASHI_ENV)
-		console.warn(
-			'Consent manager expects the "HASHI_ENV" environment variable to be set in order to ensure proper analytics tracking. Please make sure "HASHI_ENV" is set appropriately within your app.'
-		)
-
-	// set the correct segment key based on environment
-	const segmentKey = isProd
-		? segmentWriteKey
-		: '0EXTgkNx0Ydje2PGXVbRhpKKoe5wtzcE'
-
-	// next we build the config objct, kicking it off with the default values
-	let config: ConsentManagerProps = {
-		version: VERSION,
-		companyName: COMPANY_NAME,
-		privacyPolicyLink: PRIVACY_LINK,
-		cookiePolicyLink: COOKIES_LINK,
-		segmentWriteKey: segmentKey,
-		categories: defaultCategories,
-		forceShow,
-		onAcceptAll,
-		onManagePreferences,
-	}
-
-	// add preset values if present
-	if (preset === 'oss') config = { ...config, ...ossPreset }
-	if (preset === 'enterprise') config = { ...config, ...enterprisePreset }
-
-	// add any other custom values nondestructively if present
-	if (segmentServices) {
-		if (!config.segmentServices) config.segmentServices = []
-		config.segmentServices.push(...segmentServices)
-	}
-	if (otherServices) {
-		if (!config.additionalServices) config.additionalServices = []
-		config.additionalServices.push(...otherServices)
-	}
-	if (categories) config.categories!.push(...categories)
-
-	// finally, we return a HOC that will render the fully configured consent manager
-	return {
-		ConsentManager: function ConsentManagerWrapper() {
-			return (
-				<ConsentManagerComponent {...config} categories={config.categories!} />
-			)
-		},
-		openConsentManager: open,
-		saveAndLoadAnalytics,
-	}
-}

package/src/components/consent-manager/loader/presets/enterprise.ts

@@ -1,12 +0,0 @@
-import services from '../services'
-
-export default {
-	segmentServices: [
-		services.googleAnalytics,
-		services.googleTagManager,
-		services.linkedIn,
-		services.heap,
-		services.marketo,
-		services.googleAds,
-	],
-}

package/src/components/consent-manager/loader/presets/oss.ts

@@ -1,10 +0,0 @@
-import services from '../services'
-
-export default {
-	segmentServices: [
-		services.googleAnalytics,
-		services.googleAds,
-		services.linkedIn,
-		services.marketo,
-	],
-}

package/src/components/consent-manager/loader/services.ts

@@ -1,45 +0,0 @@
-export default {
-	googleAnalytics: {
-		name: 'Google Analytics',
-		description:
-			'Google Analytics is a popular service for tracking web traffic. We use this data to determine what content our users find important so that we can dedicate more resources toward improving what matters most.',
-		category: 'Analytics',
-	},
-	googleTagManager: {
-		name: 'Google Tag Manager',
-		description:
-			'Google Tag Manager allows us to see how effective our advertising campaigns have been by measuring how many users arrived at our site via external advertisements for HashiCorp services. It is also used for the Google Optimize service, which performs A/B tests designed to optimize the usability of our websites.',
-		category: 'Analytics',
-	},
-	linkedIn: {
-		name: 'LinkedIn Insight Tag',
-		description:
-			'This small script allows us to see how effective our LinkedIn campaigns are by measuring how many users have clicked prompts on LinkedIn to arrive at our site.',
-		category: 'Advertising',
-	},
-	heap: {
-		name: 'Heap',
-		description:
-			'Heap is an analytics tool that is used to track interaction with specific elements on websites, like menus or buttons in sequence, as opposed to tracking overall pageviews like Google Analytics. We use this to test our user experience and ensure that people are able to find what they are looking for on our websites.',
-		category: 'Analytics',
-	},
-	marketo: {
-		name: 'Marketo V2',
-		description:
-			'Marketo is a marketing automation tool that allows us to segment users into different categories based off of their behaviors. We use this information to provide tailored information to users in our email campaigns.',
-		category: 'Email Marketing',
-	},
-	engagio: {
-		name: 'Engagio',
-		description:
-			"Engagio is a service that aids with the company's marketing efforts by estimating the types of visitors that are using our website and the way they move through it, allowing us to optimize content to best fit expectations.",
-		category: 'Advertising',
-		body: `var _eiq = _eiq || [];var _engagio_settings = {accountId: "a44336530751c27cca1d8124d3f1ad1867bb0c93"};(function() {var ei = document.createElement('script'); ei.type = 'text/javascript'; ei.async = true;ei.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'web-analytics.engagio.com/js/ei.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ei, s);})();`,
-	},
-	googleAds: {
-		name: 'Google Ads (Gtag)',
-		description:
-			'This script keeps track of whether those who have clicked on advertisements for HashiCorp services we have run through google have clicked and arrived successfully on our website.',
-		category: 'Advertising',
-	},
-}

package/src/components/consent-manager/scripts/custom.tsx

@@ -1,59 +0,0 @@
-import Script from 'next/script'
-import { ConsentManagerService, ConsentManagerPreferences } from '../types'
-
-interface CustomScriptProps {
-	service: ConsentManagerService
-}
-
-interface CustomScriptsProps {
-	preferences: ConsentManagerPreferences
-	services?: ConsentManagerService[]
-}
-
-function CustomScript({ service }: CustomScriptProps) {
-	const dataAttrs = service.dataAttrs
-		? Object.fromEntries(
-				service.dataAttrs.map((attr) => [`data-${attr.name}`, attr.value])
-		  )
-		: {}
-
-	const strategy =
-		service.strategy ?? service.async ? 'afterInteractive' : 'beforeInteractive'
-
-	return (
-		<Script
-			src={service.url}
-			strategy={strategy}
-			id={service.name}
-			{...dataAttrs}
-			onLoad={service?.onLoad}
-		>
-			{service.body ? service.body : null}
-		</Script>
-	)
-}
-
-export default function CustomScripts({
-	preferences,
-	services = [],
-}: CustomScriptsProps) {
-	if (!preferences.loadAll && services?.length === 0) return null
-
-	let servicesToInject: ConsentManagerService[] = []
-
-	if (preferences.loadAll) {
-		servicesToInject = services
-	} else {
-		servicesToInject = services.filter(
-			(service) => preferences?.custom?.[service.name]
-		)
-	}
-
-	return (
-		<>
-			{servicesToInject.map((service) => (
-				<CustomScript service={service} key={service.name} />
-			))}
-		</>
-	)
-}

package/src/components/consent-manager/scripts/segment.tsx

@@ -1,87 +0,0 @@
-import Script from 'next/script'
-
-declare global {
-	interface Window {
-		heap?: $TSFixMe
-	}
-}
-
-// Define a function that's responsible for sending Segment-related properties to Heap
-// We pass this callback function to Segment's ready method (https://segment.com/docs/sources/website/analytics.js/#ready)
-const segmentReadyCb = function passSegmentKeysToHeap() {
-	if (!window.heap) return
-
-	// Send XID
-	if (!localStorage.getItem('seg_heap_xid')) {
-		const xId = localStorage.getItem('seg_xid')
-
-		if (xId) {
-			window.heap.addUserProperties({
-				'Segment Cross Origin ID': JSON.parse(xId),
-			})
-			localStorage.setItem('seg_heap_xid', Date.now().toString())
-		}
-	}
-
-	// Send Anonymous ID
-	if (!localStorage.getItem('seg_heap_anonymous_id')) {
-		const anonId = localStorage.getItem('ajs_anonymous_id')
-
-		if (anonId) {
-			window.heap.addUserProperties({
-				'Segment Dotcom Anonymous ID': JSON.parse(anonId),
-			})
-			localStorage.setItem('seg_heap_anonymous_id', Date.now().toString())
-		}
-	}
-}
-
-// Version of the segment snippet we're using. This is used by:
-// - SegmentScript
-// - SegmentPreloadScript
-const SNIPPET_VERSION = '4.1.0'
-
-/**
- * This script is provided by Segment
- * - @see https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-add-the-segment-snippet
- *
- * It has been modified to “preload” the window.analytics API without loading the full `analytics.js` segment script so we can buffer tracking calls before segment fully loads.
- *
- * This has also been modified to use the HashiCorp proxy, artemis.hashicorp.com & custom filename, instead of cdn.segment.com.
- */
-export const SegmentPreloadScript = () => {
-	return (
-		<script
-			dangerouslySetInnerHTML={{
-				__html: `!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://artemis.hashicorp.com/script/"+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics._cdn="https://artemis.hashicorp.com";analytics.SNIPPET_VERSION="${SNIPPET_VERSION}";}}();`,
-			}}
-		/>
-	)
-}
-
-export default function SegmentScript({ preferences, writeKey }) {
-	if (!preferences.loadAll && !preferences.segment) return null
-
-	const integrations = Object.assign(
-		{ All: Boolean(preferences.loadAll), 'Segment.io': true },
-		preferences.segment ?? {}
-	)
-
-	return (
-		<Script id="segment">
-			{/**
-			 * @note This snippet is provided by Segment and has been modified to
-			 * use artemis.hashicorp.com instead of cdn.segment.com.
-			 *
-			 * @see https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-add-the-segment-snippet
-			 */}
-			{`!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://artemis.hashicorp.com/script/"+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics._cdn="https://artemis.hashicorp.com";analytics.SNIPPET_VERSION="${SNIPPET_VERSION}";
-  analytics.load("${writeKey}", ${
-				integrations ? JSON.stringify({ integrations: integrations }) : {}
-			});
-  analytics.page();
-  analytics.ready(${segmentReadyCb});
-  }}();`}
-		</Script>
-	)
-}

package/src/components/consent-manager/style.module.css

@@ -1,9 +0,0 @@
-.root {
-	@media only percy {
-		display: none;
-	}
-
-	@media print {
-		display: none;
-	}
-}

package/src/components/consent-manager/types.ts

@@ -1,55 +0,0 @@
-import { ScriptProps } from 'next/script'
-export interface ConsentManagerService {
-	async?: boolean
-	strategy?: Pick<ScriptProps, 'strategy'>
-	body?: string
-	category: string
-	description: string
-	name: string
-	url?: string
-	dataAttrs?: { name: string; value: string }[]
-	/**
-	 * Optional function that determines whether
-	 * or not the script will load on the page.
-	 * If left undefined, script will load as usual.
-	 */
-	shouldLoad?: () => boolean
-	/**
-	 * Optional function that runs when a script has
-	 * finished loading.
-	 * Docs: https://nextjs.org/docs/pages/api-reference/components/script#onload
-	 */
-	onLoad?: () => void
-}
-
-export interface ConsentManagerPreset {
-	additionalServices: ConsentManagerService[]
-	segmentServices: ConsentManagerService[]
-}
-
-export interface ConsentManagerCategory {
-	description: string
-	name: string
-}
-
-export interface ConsentManagerProps {
-	additionalServices?: ConsentManagerService[]
-	categories?: ConsentManagerCategory[]
-	className?: string
-	companyName?: string
-	cookiePolicyLink?: string
-	forceShow?: boolean
-	privacyPolicyLink?: string
-	segmentServices?: ConsentManagerService[]
-	segmentWriteKey?: string
-	showDialog?: boolean
-	version?: number
-	onManagePreferences?: () => void
-	onAcceptAll?: () => void
-}
-
-export interface ConsentManagerPreferences {
-	loadAll?: boolean
-	segment?: Record<string, boolean>
-	custom?: Record<string, boolean>
-}