@hashicorp/react-components 0.0.0 → 1.0.0

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

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

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

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

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

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

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

package/src/components/consent-manager/util/cookies.test.ts

@@ -0,0 +1,75 @@
+import cookies from 'js-cookie'
+import * as cookiesJS from './cookies.js'
+
+it('should not show preferences loaded before cookies are saved', () => {
+	expect(cookiesJS.preferencesSavedAndLoaded()).toBe(false)
+})
+
+it('should show preferences loaded if cookies are loaded', () => {
+	const preferences = JSON.stringify({ loadAll: true, version: 1 })
+	const originalCookiesGet = cookies.get
+
+	// mocks
+	cookies.get = vi.fn().mockImplementationOnce(() => preferences)
+	cookiesJS.loadPreferences()
+
+	const preferencesLoaded = cookiesJS.preferencesSavedAndLoaded()
+	expect(preferencesLoaded).toBe(true)
+
+	cookies.get = originalCookiesGet
+})
+
+it('should get the domain', () => {
+	const originalLocation = global.window.location
+	const originalCookiesGet = cookies.get
+	const originalCookiesSet = cookies.set
+
+	// mocks
+	delete global.window.location
+	global.window.location = { hostname: 'foo.bar.baz.net' }
+	cookies.get = vi.fn().mockImplementationOnce(() => 'baz.net')
+	cookies.set = vi.fn()
+
+	expect(cookiesJS.getDomain()).toBe('baz.net')
+
+	// restore mocks
+	global.window.location = originalLocation
+	cookies.get = originalCookiesGet
+	cookies.set = originalCookiesSet
+})
+
+it('should load preferences', () => {
+	const preferences = { loadAll: true, version: 1 }
+	const originalCookiesGet = cookies.get
+
+	// mocks
+	cookies.get = vi.fn().mockImplementationOnce(() => preferences)
+
+	expect(cookiesJS.loadPreferences()).toStrictEqual(preferences)
+
+	// restore mocks
+	cookies.get = originalCookiesGet
+})
+
+it('should save preferences', () => {
+	global.window.location = { hostname: 'foo.bar.baz.net' }
+	const preferences = { loadAll: true, version: 1 }
+	const version = 1
+	const args = [
+		cookiesJS.COOKIE_KEY,
+		JSON.stringify(preferences),
+		{ expires: cookiesJS.COOKIE_EXPIRES, domain: '' },
+	]
+	const originalCookiesSet = cookies.set
+
+	// mocks
+	cookies.set = vi.fn()
+
+	cookiesJS.savePreferences(preferences, version)
+
+	const lastArgs = cookies.set.mock.calls[cookies.set.mock.calls.length - 1]
+
+	expect(lastArgs).toStrictEqual(args)
+
+	cookies.set = originalCookiesSet
+})

package/src/components/consent-manager/util/cookies.ts

@@ -0,0 +1,70 @@
+/*
+  Cookies structure:
+  {
+    { segment: { Hotjar: true, Intercom: false, .. } },
+    { custom: { OptinMonster: true } },
+    { categories: { Functional: true } }
+  }
+*/
+
+import cookies from 'js-cookie'
+export const COOKIE_KEY = 'hashi-consent-preferences'
+export const COOKIE_EXPIRES = 183
+
+let preferences = undefined
+let preferencesLoaded = false
+
+export function getDomain() {
+	const host = window.location.hostname
+	const parts = host.split('.')
+	const levels: string[] = []
+	let result = ''
+
+	// get all domain levels
+	for (let i = parts.length - 2; i >= 0; i--) {
+		levels.push(parts.slice(i).join('.'))
+	}
+
+	// find top level domain
+	for (let i = 0; i < levels.length; i++) {
+		const cname = '__tld__'
+		const domain = levels[i]
+		const opts = { domain: '.' + domain }
+
+		cookies.set(cname, '1', opts)
+		if (cookies.get(cname)) {
+			cookies.set(cname, 'null', opts)
+			result = domain
+			break
+		}
+	}
+
+	return result
+}
+
+export const loadPreferences = () => {
+	if (!preferences) {
+		const value = cookies.get(COOKIE_KEY)
+		if (value && value !== {}.toString()) {
+			preferences = JSON.parse(value)
+			if (preferences) {
+				preferencesLoaded = true
+			}
+		}
+	}
+
+	return preferences
+}
+
+export function savePreferences(prefs, version) {
+	const domain = getDomain()
+	const prefsWithVersion = Object.assign(prefs, { version: version })
+	cookies.set(COOKIE_KEY, JSON.stringify(prefsWithVersion), {
+		expires: COOKIE_EXPIRES,
+		domain,
+	})
+	preferences = prefsWithVersion
+	preferencesLoaded = true
+}
+
+export const preferencesSavedAndLoaded = () => preferencesLoaded

package/src/components/consent-manager/util/integrations.test.ts

@@ -0,0 +1,115 @@
+test('fetches integrations from segment, formats them as expected', async () => {
+	vi.resetModules()
+	global.fetch = () =>
+		Promise.resolve({
+			ok: true,
+			json: () => mockSegmentResponse,
+		}) as any
+	const getIntegrations = await import('./integrations')
+	const resp = await getIntegrations.default(
+		mockProps.segmentServices,
+		mockProps.additionalServices,
+		'XXX - segment key'
+	)
+	expect(resp['Test Category'][0].name).toBe('Test Non-Segment Service')
+	expect(resp['Test Category'][0].origin).toBe('custom')
+	expect(resp['Test Category'][1].name).toBe('Test Non-Segment Service 2')
+	expect(resp['Test Category'][1].origin).toBe('custom')
+	expect(resp['Test Category'][2].name).toBe('Google Analytics')
+	expect(resp['Test Category'][2].origin).toBe('segment')
+	expect(resp['Test Category'][3].name).toBe('LinkedIn Insight Tag')
+	expect(resp['Test Category'][3].origin).toBe('segment')
+	expect(resp['Email Marketing'][0].name).toBe('Marketo V2')
+	expect(resp['Email Marketing'][0].origin).toBe('segment')
+})
+
+const mockSegmentResponse = [
+	{
+		name: 'Google Analytics',
+		creationName: 'Google Analytics',
+		description:
+			'Google Analytics is the most popular analytics tool for the web. It’s free and provides a wide range of features. It’s especially good at measuring traffic sources and ad campaigns.',
+		website: 'http://google.com/analytics',
+		category: 'Test Category',
+	},
+	{
+		name: 'LinkedIn Insight Tag',
+		creationName: 'LinkedIn Insight Tag',
+		description:
+			'The LinkedIn Insight Tag is a piece of lightweight JavaScript code that you can add to your website to enable in-depth campaign reporting and unlock valuable insights about your website visitors. As a LinkedIn Marketing Solutions customer, you can use the LinkedIn Insight Tag to track conversions, retarget website visitors, and unlock additional insights about members interacting with your ads.',
+		website: 'https://www.linkedin.com',
+		category: 'Advertising',
+	},
+	{
+		name: 'Marketo V2',
+		creationName: 'Marketo V2',
+		description:
+			'Marketo is a marketing automation tool that can help you engage customers and prospects.',
+		website: 'https://www.marketo.com/',
+		category: 'Email Marketing',
+	},
+	{
+		name: 'Heap',
+		creationName: 'Heap',
+		description:
+			'Heap is an analytics tool that automatically tracks all of the actions your users perform just by flipping a switch, instead of after adding custom tracking code.',
+		website: 'http://heapanalytics.com',
+		category: 'Analytics',
+	},
+	{
+		name: 'Google Tag Manager',
+		creationName: 'Google Tag Manager',
+		description:
+			'Google Tag Manager lets you add or update your website tags, easily and for free.',
+		website: 'https://www.google.com/analytics/tag-manager/',
+		category: 'Tag Managers',
+	},
+	{
+		name: 'Amazon S3',
+		creationName: 'Amazon S3',
+		description:
+			'Our Amazon S3 copies our log files of your raw API calls from our S3 bucket to yours, where you can then perform custom analysis on them.',
+		website: 'http://aws.amazon.com/s3',
+		category: 'Analytics',
+	},
+]
+
+const mockProps = {
+	segmentServices: [
+		{
+			name: 'LinkedIn Insight Tag',
+			category: 'Test Category',
+			description: 'description',
+		},
+	],
+	additionalServices: [
+		{
+			name: 'Test Non-Segment Service',
+			category: 'Test Category',
+			description: 'description',
+			body: 'test body',
+			url: 'test url',
+		},
+		{
+			name: 'Test Non-Segment Service 2',
+			category: 'Test Category',
+			description: 'description',
+			body: 'test body 2',
+			url: 'test url 2',
+			async: true,
+			addToBody: true,
+			dataAttrs: [
+				{
+					name: 'test',
+					value: 'foobar',
+				},
+			],
+		},
+	],
+	categories: [
+		{
+			name: 'Test Category',
+			description: 'description',
+		},
+	],
+}

package/src/components/consent-manager/util/integrations.ts

@@ -0,0 +1,110 @@
+import type { ConsentManagerService } from '../types'
+
+/*
+  integrations.js
+  Fetches integrations from Segment given write key and applies user-defined
+  overrides. Combines with custom scripts to give a complete view into
+  scripts that the site is trying to load. Finally, groups it all by category.
+*/
+
+export type ConsentManagerServiceWithOrigin = ConsentManagerService & {
+	origin: string
+}
+
+export default function getIntegrations(
+	segmentServices: ConsentManagerService[] = [],
+	additionalServices: ConsentManagerService[] = [],
+	segmentWriteKey: string | undefined
+): Promise<Record<string, ConsentManagerServiceWithOrigin[]>> {
+	return fetchIntegrationsFromSegment(segmentWriteKey)
+		.then((segmentOriginated) =>
+			zipIntegrations(segmentServices, additionalServices, segmentOriginated)
+		)
+		.then(groupByCategory)
+}
+
+interface SegmentIntegration {
+	name: string
+	creationName: string
+	description: string
+	website: string
+	category: string
+}
+
+// Get integrations from Segment by write key
+async function fetchIntegrationsFromSegment(
+	segmentWriteKey: string | undefined
+) {
+	const res = await fetch(
+		`https://artemis.hashicorp.com/v1/projects/${segmentWriteKey}/integrations`
+	)
+	if (!res.ok) {
+		throw new Error(
+			`Failed to fetch integrations: HTTP ${res.status} ${res.statusText}`
+		)
+	}
+	return (await res.json()) as SegmentIntegration[]
+}
+
+// Include developer overrides for fetched Segment integrations
+function zipIntegrations(
+	segmentOverrides: ConsentManagerService[],
+	additionalServices: ConsentManagerService[] | undefined,
+	segmentOriginated: SegmentIntegration[]
+): ConsentManagerServiceWithOrigin[] {
+	// Create Segment integration object with name as key for quick retrieval
+	const segmentObj = segmentOriginated.reduce((obj, segment) => {
+		obj[segment.name] = segment
+		obj[segment.name].origin = 'segment'
+		return obj
+	}, {})
+
+	// Go through each developer-defined segment service and update
+	// segmentObj with any overrides
+	for (let i = 0; i < segmentOverrides.length; i++) {
+		if (
+			Object.prototype.hasOwnProperty.call(segmentObj, segmentOverrides[i].name)
+		) {
+			segmentObj[segmentOverrides[i].name] = Object.assign(
+				segmentObj[segmentOverrides[i].name],
+				segmentOverrides[i]
+			)
+		} else {
+			/* eslint-disable-next-line */
+			console.warn(
+				`Unmatched integration config for ${segmentOverrides[i].name}`
+			)
+		}
+	}
+
+	// Include additional (non-Segment) services
+	const allIntegrations = additionalServices
+		? additionalServices.map((integration) => {
+				return { ...integration, origin: 'custom' }
+		  })
+		: []
+
+	for (const key in segmentObj) {
+		allIntegrations.push(segmentObj[key])
+	}
+
+	// Returns array with all integrations, with origin key (segment or custom)
+	return allIntegrations
+}
+
+// Group by category for display purposes
+function groupByCategory(
+	integrations: ConsentManagerServiceWithOrigin[]
+): Record<string, ConsentManagerServiceWithOrigin[]> {
+	const grouped: Record<string, ConsentManagerServiceWithOrigin[]> = {}
+
+	integrations.forEach((integration) => {
+		if (Object.prototype.hasOwnProperty.call(grouped, integration.category)) {
+			grouped[integration.category].push(integration)
+		} else {
+			grouped[integration.category] = [integration]
+		}
+	})
+
+	return grouped
+}