@hashicorp/react-components 0.0.0 → 1.0.0

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

@@ -0,0 +1,334 @@
+import { fireEvent, render, screen, act } from '@testing-library/react'
+
+const defaultProps = {
+	version: 0,
+	showDialog: false,
+	segmentWriteKey: 'iyi06c432UL7SB1r3fQReec4bNwFyzkW',
+	privacyPolicyLink: 'https://www.hashicorp.com/privacy',
+	companyName: 'HashiCorp',
+	segmentServices: [
+		{
+			name: 'Example Name',
+			category: 'Example Category',
+			description:
+				'A short description of what the service is and how your company uses the data.',
+		},
+	],
+	additionalServices: [
+		{
+			name: 'Name of the service',
+			category: 'Example Category',
+			description:
+				'A short description of what the service is and how your company uses the data.',
+			body: '',
+			url: 'http://www.an-optional-url-for-a-script-to-add-to-the-page.com',
+			async: true,
+		},
+		{
+			name: 'Name of the service 2',
+			category: 'Example Category',
+			description: 'A script with additional elements to be injected',
+			body: '',
+			url: 'https://source-url-of-script.com',
+			async: true,
+			addToBody: true,
+			dataAttrs: [
+				{
+					name: 'test',
+					value: 'foobar',
+				},
+			],
+		},
+		{
+			name: 'Name of the service 3',
+			category: 'Example Category',
+			description: 'A script with additional elements to be injected',
+			body: 'window.foo = "bar"',
+			async: true,
+			dataAttrs: [
+				{
+					name: 'test',
+					value: 'foobar',
+				},
+			],
+		},
+		{
+			name: 'Name of the conditionally loaded service',
+			category: 'Example Category with conditionally loaded service',
+			description: 'A script with additional elements to be injected',
+			body: 'window.foo = "bar"',
+			url: 'https://source-of-conditionally-loaded-script.com',
+			async: true,
+			dataAttrs: [
+				{
+					name: 'test',
+					value: 'foobar',
+				},
+			],
+			shouldLoad: () => false,
+		},
+	],
+	categories: [
+		{
+			name: 'Example Category',
+			description: 'A short description of the category',
+		},
+	],
+	container: '#consent-manager',
+}
+
+beforeAll(() => {
+	HTMLDialogElement.prototype.show = vi.fn()
+	HTMLDialogElement.prototype.showModal = vi.fn()
+	HTMLDialogElement.prototype.close = vi.fn()
+})
+
+describe('ConsentManager', () => {
+	afterEach(() => {
+		vi.resetModules()
+	})
+
+	test('shows the banner if the forceShow prop is true', async () => {
+		const { default: ConsentManager } = await import('./')
+		render(<ConsentManager {...defaultProps} forceShow={true} />)
+		expect(screen.getByTestId('consent-banner')).toBeInTheDocument()
+	})
+
+	test('sets existing preferences and does not show the banner if preferences are already set', async () => {
+		await runWithMockedImport(
+			'./util/cookies',
+			{
+				loadPreferences: () => {
+					return { loadAll: false, segment: false, version: 0 }
+				},
+				// eslint-disable-next-line @typescript-eslint/no-empty-function
+				savePreferences: () => {},
+			},
+			(MockedConsentManager) => {
+				render(<MockedConsentManager {...defaultProps} forceShow={false} />)
+				expect(screen.queryByTestId('consent-banner')).not.toBeInTheDocument()
+			}
+		)
+	})
+
+	test('shows the banner if preferences are set but version has increased', async () => {
+		await runWithMockedImport(
+			'./util/cookies',
+			{
+				loadPreferences: () => {
+					return { loadAll: false, segment: false, version: 1 }
+				},
+				// eslint-disable-next-line @typescript-eslint/no-empty-function
+				savePreferences: () => {},
+			},
+			(MockedConsentManager) => {
+				render(
+					<MockedConsentManager
+						{...defaultProps}
+						forceShow={false}
+						version={2}
+					/>
+				)
+				expect(screen.queryByTestId('consent-banner')).toBeInTheDocument()
+			}
+		)
+	})
+
+	test('if the manage preferences button is clicked, opens the dialog and makes body un-scrollable', async () => {
+		const { default: ConsentManager } = await import('./')
+
+		render(<ConsentManager {...defaultProps} forceShow={true} />)
+		fireEvent.click(screen.getByTestId('manage-preferences'))
+		expect(screen.getByTestId('consent-mgr-dialog')).toBeInTheDocument()
+		expect(document.body.className).toBe('g-noscroll')
+	})
+
+	test('opens the dialog when the open function is called', async () => {
+		const { default: ConsentManager, open } = await import('./')
+		render(<ConsentManager {...defaultProps} />)
+		act(() => open())
+		expect(screen.getByTestId('consent-mgr-dialog')).toBeInTheDocument()
+	})
+
+	test('if accept all button is clicked, any open dialogs are closed and all analytics are loaded', async () => {
+		let prefs
+		await runWithMockedImport(
+			'./util/cookies',
+			{
+				// eslint-disable-next-line @typescript-eslint/no-empty-function
+				loadPreferences: () => {},
+				savePreferences: (preferences) => {
+					prefs = preferences
+				},
+			},
+			(MockedConsentManager) => {
+				render(<MockedConsentManager {...defaultProps} forceShow={true} />)
+				fireEvent.click(screen.getByTestId('accept'))
+			}
+		)
+		expect(prefs.loadAll).toBe(true)
+	})
+
+	test('loads segment and additional services if loadAll is passed', async () => {
+		await runWithMockedImport(
+			'./util/cookies',
+			{
+				loadPreferences: () => {
+					return { loadAll: true, segment: { foo: 'bar' } }
+				},
+				// eslint-disable-next-line @typescript-eslint/no-empty-function
+				savePreferences: () => {},
+			},
+			(MockedConsentManager) => {
+				render(
+					<MockedConsentManager
+						{...defaultProps}
+						forceShow={false}
+						version={2}
+					/>
+				)
+				const html = document.body.innerHTML
+				// script was injected
+				expect(html).toMatch(
+					/<script type="text\/javascript" src="https:\/\/artemis.hashicorp.com\/script/
+				)
+				// all services loaded, as well as custom segment
+				expect(html).toMatch(
+					/analytics\.load\("iyi06c432UL7SB1r3fQReec4bNwFyzkW", {"integrations":{"All":true,"Segment\.io":true,"foo":"bar"}}\);/
+				)
+
+				// custom service loaded
+				expect(html).toMatch(
+					/src="http:\/\/www.an-optional-url-for-a-script-to-add-to-the-page\.com"/
+				)
+
+				// conditionally loaded service not loaded
+				expect(html).not.toMatch(
+					/src="https:\/\/source-of-conditionally-loaded-script\.com"/
+				)
+
+				// custom inline script
+				expect(html).toMatch(/window\.foo = "bar"/)
+			}
+		)
+	})
+
+	describe('handles custom events', () => {
+		test('manage preferences callback', async () => {
+			const fn = vi.fn()
+			await runWithMockedImport(
+				'./components/dialog',
+				{
+					default: () => {
+						return <p data-testid="mocked-dialog">test</p>
+					},
+				},
+				(MockedConsentManager) => {
+					render(
+						<MockedConsentManager
+							{...defaultProps}
+							forceShow={true}
+							onManagePreferences={fn}
+						/>
+					)
+					fireEvent.click(screen.getByTestId('manage-preferences'))
+					expect(fn).toHaveBeenCalled()
+				}
+			)
+		})
+
+		test('accept all callback', async () => {
+			const fn = vi.fn()
+			await runWithMockedImport(
+				'./components/dialog',
+				{
+					default: () => {
+						return <p data-testid="mocked-dialog">test</p>
+					},
+				},
+				(MockedConsentManager) => {
+					render(
+						<MockedConsentManager
+							{...defaultProps}
+							forceShow={true}
+							onAcceptAll={fn}
+						/>
+					)
+					fireEvent.click(screen.getByTestId('accept'))
+					expect(fn).toHaveBeenCalled()
+				}
+			)
+		})
+	})
+
+	describe('handles conditionally loaded services in dialog', () => {
+		test('additional services category is not in dialog when shouldLoad() is false in all category services', async () => {
+			const { default: ConsentManager, open } = await import('./')
+			render(<ConsentManager {...defaultProps} />)
+			act(() => open())
+
+			const shownCategory = await screen.findByText('Example Category')
+			const hiddenCategory = screen.queryByText(
+				'Example Category with conditionally loaded service'
+			)
+			expect(shownCategory).toBeInTheDocument()
+			expect(hiddenCategory).not.toBeInTheDocument()
+		})
+
+		test('additional services category is in dialog when shouldLoad() is false in some category services but service is not in dialog', async () => {
+			const newService = {
+				name: 'Name of the new service',
+				category: 'Example Category with conditionally loaded service',
+				description: 'A script with additional elements to be injected',
+				body: 'window.foo = "bar"',
+				async: true,
+				dataAttrs: [
+					{
+						name: 'test',
+						value: 'foobar',
+					},
+				],
+			}
+
+			const { default: ConsentManager, open } = await import('./')
+			render(
+				<ConsentManager
+					{...{
+						...defaultProps,
+						additionalServices: [
+							...defaultProps.additionalServices,
+							newService,
+						],
+					}}
+				/>
+			)
+			act(() => open())
+			const category = await screen.findByText(
+				'Example Category with conditionally loaded service'
+			)
+
+			expect(category).toBeInTheDocument()
+			const showMoreButton = category.nextSibling!.nextSibling!
+			// Open category accordion item to make services visible
+			fireEvent.click(showMoreButton)
+			const shouldLoadService = await screen.findByText(
+				'Name of the new service'
+			)
+			const shouldNotLoadService = screen.queryByText(
+				'Name of the conditionally loaded service'
+			)
+			expect(shouldLoadService).toBeInTheDocument()
+			expect(shouldNotLoadService).not.toBeInTheDocument()
+		})
+	})
+})
+
+// Given an internal module name and mock implementation, mocks the given module and returns a version
+// of the component with the module mocked.
+async function runWithMockedImport(module, mock, cb) {
+	vi.doMock(module, () => mock)
+	return import('./').then(({ default: ConsentManager, open }) => {
+		cb(ConsentManager, open)
+		vi.doUnmock(module)
+	})
+}

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

@@ -0,0 +1,186 @@
+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

@@ -0,0 +1,29 @@
+# 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 '@hashicorp/react-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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,12 @@
+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

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